/*
 * The application frame and the sign-in screens, on the AutomationEdge design system:
 *   frame      ui_kits/rpa-console/ConsoleShell.jsx   (the frame owns the viewport; only <main> scrolls)
 *   sidebar    components/navigation/SideNav.jsx       (.ae-sidenav, .ae-navsearch, .ae-navrow)
 *   topbar     components/navigation/TopBar.jsx        (.ae-topbar, .ae-userchip) + core/PageBreadcrumb.jsx
 *   palette    components/navigation/CommandPalette.jsx (.ae-palette)
 *   sign-in    ui_kits/rpa-console/LoginScreen.jsx     (.ae-login)
 * Values are the DS tokens; the few literals are the DS components' own and say where they come from.
 */

/* ---- frame ---- */
.ae-shell {
  position: relative;
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--gutter-bg);
}
.ae-shell__column {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--gutter-bg);
}
/* the topbar card, inset so both ends line up with the page card below (TopBar.prompt.md) */
.ae-shell__bar { flex: 0 0 auto; padding-inline: var(--gutter-inset); }
/* the content region: the only scroller; a page's PageCard / FormCanvas fills it and scrolls inside itself */
.ae-shell__main {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  background: var(--gutter-bg);
}
.ae-shell__notice { flex: 0 0 auto; padding: var(--gutter-inset) var(--gutter-inset) 0; }
.ae-shell__page { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.ae-skip-link {
  position: absolute; z-index: 100; top: calc(-1 * var(--s-12)); left: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--surface-raised); color: var(--text-strong);
  border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-md);
  font: var(--type-label); text-decoration: none;
}
.ae-skip-link:focus { top: var(--s-2); }
.ae-skip-link:hover { color: var(--text-strong); }

/* ---- brand images (the DS assets; background images so the strict CSP needs no <img> source) ---- */
.ae-logo {
  display: block; width: 100%; height: 26px; /* SideNav: the lockup at 26px */
  background: url("../ds/assets/logo.png") left center / contain no-repeat;
}
.ae-logo-mark {
  display: block; height: 20px; aspect-ratio: 485 / 329; /* SideNav: the "A" mark at 20px in the rail */
  background: url("../ds/assets/logo-mark.png") center / contain no-repeat;
}

/* ---- sidebar ---- */
.ae-sidenav {
  position: relative; z-index: 1; /* its edge shadow falls on the gutter, above the column */
  flex: 0 0 auto;
  width: var(--sidebar-w); height: 100%;
  display: flex; flex-direction: column;
  overflow-x: hidden;
  background: var(--surface-card);
  border-block: 1px solid var(--border-default);
  border-inline-end: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-chrome-edge);
  transition: width var(--duration-normal) var(--ease-standard);
}
.ae-sidenav.is-rail { width: var(--sidebar-w-collapsed); }

/* the logo band, level with the topbar; in the rail the toggle drops below the mark (same element, so it keeps
   focus when pressed) */
.ae-sidenav__band {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--topbar-h);
  padding: 0 var(--s-1) 0 var(--chrome-gutter);
}
.ae-sidenav.is-rail .ae-sidenav__band {
  flex-direction: column; align-items: center; gap: 0;
  height: auto; padding: 0 var(--s-1);
}
.ae-sidenav__home {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: 100%;
  border-radius: var(--radius-xs);
}
.ae-sidenav__home:focus-visible { outline-offset: -2px; }
.ae-sidenav.is-rail .ae-sidenav__home { flex: 0 0 auto; justify-content: center; width: 100%; height: var(--topbar-h); }
.ae-sidenav__band > .ae-tooltip-anchor { display: flex; flex: 0 0 auto; }
.ae-sidenav.is-rail .ae-sidenav__band > .ae-tooltip-anchor { margin-top: var(--s-2); }
.ae-sidenav__toggle {
  display: grid; place-items: center;
  width: 30px; height: 30px; /* SideNav CollapseToggle */
  flex: 0 0 auto; padding: 0;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-body);
  transition: var(--transition-control);
}
.ae-sidenav__toggle:hover { background: var(--surface-hover); color: var(--text-strong); }
.ae-sidenav__toggle:active { background: var(--surface-active); }

/* Search: reads as a field, behaves as a button (the palette owns the input) */
.ae-sidenav__search { flex: 0 0 auto; padding: var(--s-4) var(--s-4) 0; }
.ae-sidenav.is-rail .ae-sidenav__search { padding: var(--s-2) var(--s-1) 0; }
.ae-sidenav__search > .ae-tooltip-anchor { display: flex; }
.ae-navsearch {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: var(--nav-row-h);
  padding: 0 var(--s-2);
  border: 1px solid var(--ae-neutral-100); border-radius: var(--radius-sm);
  background: var(--surface-card);
  font: var(--type-label); font-size: var(--text-xs); font-weight: var(--weight-regular);
  color: var(--ae-neutral-500);
  transition: var(--transition-control);
}
.ae-navsearch > .icon { color: var(--text-body); }
.ae-navsearch:hover { border-color: var(--border-default); background: var(--surface-hover); color: var(--text-strong); }
.ae-navsearch:hover > .icon { color: var(--text-strong); }
.ae-navsearch__label { flex: 1 1 auto; min-width: 0; text-align: start; }
.ae-navsearch__kbd {
  flex: 0 0 auto;
  padding: 1px var(--s-1);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
  background: var(--surface-card);
  font: var(--type-caption); font-size: 10px; /* SideNav SearchRow kbd */
  color: var(--ae-neutral-400);
}
.ae-sidenav.is-rail .ae-navsearch,
.ae-sidenav.is-rail .ae-navsearch:hover { justify-content: center; padding: 0; border-color: transparent; background: transparent; }

/* the section rows */
.ae-sidenav__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-1);
}
.ae-sidenav__list { position: relative; display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ae-sidenav__list .ae-tooltip-anchor { display: flex; }
.ae-navrow {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: var(--nav-row-h);
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4);
  border-radius: var(--radius-sm);
  font: var(--type-label); font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-body); background: transparent;
  text-decoration: none; text-align: start;
  transition: var(--transition-control);
}
.ae-navrow:hover { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.ae-navrow:hover > .icon { animation: ae-nav-nod 700ms var(--ease-standard); } /* the DS "nod" on nav hover */
.ae-navrow:active { transform: scale(0.975); }
.ae-navrow__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "you are here": the brand-gradient pill, white ink, and the 3px accent bar at the window edge */
.ae-navrow[aria-current="page"] {
  font-weight: var(--weight-semibold);
  color: var(--ae-neutral-0);
  background: var(--brand-gradient);
}
.ae-navrow[aria-current="page"]:hover { color: var(--ae-neutral-0); background: var(--brand-gradient-hover); }
.ae-navrow[aria-current="page"]:active { background: var(--brand-gradient-flat); }
.ae-navrow[aria-current="page"]::before {
  content: "";
  position: absolute; top: 2px; bottom: 2px; left: calc(-1 * var(--s-1));
  width: var(--accent-bar-w);
  border-radius: 0 2px 2px 0;
  background: var(--surface-brand);
  animation: ae-fade-in 700ms var(--ease-standard);
}
.ae-sidenav.is-rail .ae-navrow { justify-content: center; padding: 0; }
.ae-sidenav.is-rail .ae-navrow[aria-current="page"]::before { display: none; }
.ae-sidenav.is-rail .ae-navrow__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- topbar: its own card, flush to the top, bottom corners rounded ---- */
.ae-topbar {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-end-start-radius: var(--radius-chrome);
  border-end-end-radius: var(--radius-chrome);
  box-shadow: var(--shadow-xs);
}
.ae-topbar__row {
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--topbar-h);
  padding: 0 var(--chrome-gutter);
}
.ae-topbar__title {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  overflow: hidden;
  margin-inline: calc(-1 * var(--s-1)); padding-inline: var(--s-1); /* room for a link's focus outline */
}
.ae-topbar__trust { flex: 0 0 auto; white-space: nowrap; }
/* the product lockup, where the console shows the tenant's */
.ae-topbar__product {
  flex: 0 0 auto;
  display: grid;
  margin-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  text-align: start;
}
.ae-topbar__product-name {
  font: var(--type-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug);
  color: var(--text-strong); white-space: nowrap;
}
.ae-topbar__product-caption { font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }

/* the user chip: avatar, name over role, the small filled caret */
.ae-userchip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-2);
  height: 36px; /* TopBar: the chip sets the bar's 44px floor */
  padding: 0 var(--s-1);
  border: none; border-radius: var(--radius-control);
  background: transparent; color: inherit; text-align: start;
  transition: var(--transition-control);
}
.ae-userchip:hover, .ae-userchip.is-open { background: var(--surface-hover); }
.ae-userchip__avatar {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; /* TopBar avatar */
  background: var(--surface-brand-subtle); color: var(--text-brand);
  font: var(--type-caption); font-weight: var(--weight-semibold);
}
.ae-userchip__text { display: grid; min-width: 0; }
.ae-userchip__name { font: var(--type-label); font-size: var(--text-xs); color: var(--text-strong); white-space: nowrap; }
.ae-userchip__role { font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
.ae-userchip__caret {
  flex-shrink: 0; width: 0; height: 0;
  border-style: solid; border-width: 7px 5.5px 0; /* TopBar: the 11x7 filled triangle */
  border-color: var(--text-subtle) transparent transparent;
}

/* Narrower desktop windows: the trail keeps its room. The product lockup goes first, then the chip's text (the DS
   mobile bar shows the avatar alone); the trust badge always stays. */
@media (max-width: 1199px) {
  .ae-topbar__product { display: none; }
}
@media (max-width: 959px) {
  .ae-userchip__text { display: none; }
}

/* ---- breadcrumb: soft neutral ancestors, strong current page ---- */
.ae-breadcrumb { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.ae-breadcrumb__list { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; list-style: none; }
.ae-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.ae-breadcrumb__sep { display: inline-flex; flex-shrink: 0; color: var(--breadcrumb-separator); }
.ae-breadcrumb__seg {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-width: 0; margin: 0;
  font: var(--type-label); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--breadcrumb-parent);
  white-space: nowrap;
}
.ae-breadcrumb__seg--current { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-strong); }
.ae-breadcrumb__lead { display: inline-flex; flex-shrink: 0; color: var(--breadcrumb-lead); }
.ae-breadcrumb__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ae-breadcrumb__seg--link { border-radius: var(--radius-xs); text-decoration: none; transition: var(--transition-control); }
.ae-breadcrumb__seg--link:hover { color: var(--text-body); text-decoration: none; }
.ae-breadcrumb__seg--link:hover .ae-breadcrumb__text { text-decoration: underline; text-underline-offset: 2px; }

/* ---- command palette: top-anchored over the whole frame ---- */
.ae-palette {
  position: fixed; inset: 0; z-index: 40;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 8%; /* CommandPalette */
  background: var(--surface-overlay);
  backdrop-filter: var(--blur-sheet);
}
.ae-palette__dialog {
  width: min(560px, calc(100% - var(--s-8))); max-height: 420px; /* CommandPalette */
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: ae-rise var(--duration-normal) var(--ease-entrance);
}
.ae-palette__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}
.ae-palette__head > .icon { color: var(--text-subtle); }
.ae-palette__input {
  flex: 1 1 auto; min-width: 0;
  padding: 0; border: none; outline: none; background: transparent;
  font: var(--type-body); color: var(--text-strong);
}
.ae-palette__input:focus-visible { outline: none; } /* focus never leaves it; the caret is the indicator */
.ae-palette__input::placeholder { color: var(--text-subtle); opacity: 1; }
.ae-palette__kbd {
  flex-shrink: 0;
  padding: 1px var(--s-1);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
  font: var(--type-caption); font-size: 10px; /* CommandPalette kbd */
  color: var(--ae-neutral-400);
}
.ae-palette__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-1); }
.ae-palette__caption {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle);
}
.ae-palette__list { margin: 0; padding: 0; list-style: none; }
.ae-palette__row {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 32px; /* CommandPalette row */
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-control);
}
.ae-palette__row > .icon { color: var(--text-subtle); }
.ae-palette__row:hover { background: var(--surface-hover); }
.ae-palette__row[aria-selected="true"] { background: var(--surface-active); }
.ae-palette__label { flex: 1 1 auto; min-width: 0; font: var(--type-body-sm); color: var(--text-strong); }
.ae-palette__empty { padding: var(--s-4); font: var(--type-body-sm); color: var(--text-subtle); text-align: center; }

/* ---- sign-in, unreachable, starting: the split-screen login ---- */
.ae-login {
  container-type: inline-size;
  min-height: 100vh; min-height: 100dvh;
  background: var(--surface-page);
  color: var(--text-body);
}
.ae-login__split { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
@container (min-width: 992px) {
  .ae-login__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ae-login__half {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vh, 80px) var(--s-8); /* LoginScreen */
  overflow: hidden;
}
.ae-login__half--form { align-items: center; gap: var(--s-4); }
/* ambient brand blobs, warm and cool at low alpha (LoginScreen: literal sizes, colours and blurs) */
.ae-login__blob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.ae-login__blob--promo-warm { width: min(970px, 100%); height: min(730px, 80vh); top: -10%; left: -5%; background: rgb(249 147 31 / 7%); filter: blur(50px); }
.ae-login__blob--promo-cool { width: min(381px, 60%); height: min(500px, 60vh); bottom: 10%; right: 2%; background: rgb(122 174 241 / 12%); filter: blur(50px); }
.ae-login__blob--form-warm { width: min(285px, 50%); height: min(307px, 40vh); bottom: 10%; left: 5%; background: rgb(249 147 31 / 7%); filter: blur(100px); }
.ae-login__blob--form-cool { width: min(870px, 100%); height: min(916px, 100vh); top: -20%; right: -15%; background: rgb(122 174 241 / 12%); filter: blur(100px); }

.ae-login__promo {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-8); justify-items: center; align-content: center;
  width: 100%; max-width: 540px; margin: 0 auto; /* LoginScreen */
  padding: clamp(24px, 3vw, 40px); /* LoginScreen */
  background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgb(4 36 98 / 6%); /* LoginScreen card shadow */
}
.ae-login__brand { display: grid; justify-items: center; gap: var(--s-4); width: 100%; }
.ae-login__logo {
  display: block; max-width: 100%;
  height: clamp(32px, 3vw, 44px); aspect-ratio: 2745 / 336; /* LoginScreen: the lockup up to 44px */
  background: url("../ds/assets/logo.png") center / contain no-repeat;
}
.ae-login__rule { display: block; width: 100%; height: 1px; background: var(--border-subtle); }
.ae-login__disc {
  display: flex; align-items: center; justify-content: center;
  width: clamp(88px, 9vw, 140px); height: clamp(88px, 9vw, 140px); /* LoginScreen: the ringed disc */
  border: 1px solid var(--border-default); border-radius: 50%;
  background: var(--surface-raised);
}
.ae-login__bot {
  display: block; width: 66%; aspect-ratio: 232 / 306;
  background: url("../ds/assets/login-bot.png") center / contain no-repeat;
}
.ae-login__pitch { display: grid; gap: var(--s-3); text-align: center; }
.ae-login__pitch-title { font: var(--type-h3); color: var(--text-strong); text-wrap: balance; }
.ae-login__pitch-product { font: var(--type-body); font-weight: var(--weight-medium); color: var(--text-brand); }

.ae-login__card {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-4); align-content: center;
  width: 100%; max-width: 540px; /* LoginScreen */
  padding: clamp(20px, 2vw, 32px); /* LoginScreen form card */
  background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgb(4 36 98 / 6%); /* LoginScreen card shadow */
}
.ae-login__head { display: grid; gap: var(--s-3); }
.ae-login__title { font: var(--type-h3); color: var(--text-strong); text-wrap: balance; }
.ae-login__body { display: grid; gap: var(--s-3); font: var(--type-body); color: var(--text-body); }
.ae-login__action { display: grid; }
.ae-login__fine { display: flex; justify-content: center; }
.ae-login__wait { display: grid; place-items: center; min-height: var(--s-24); }