/* AI Assure portal app shell (client and admin). Builds on aia.css: the same tokens, chips,
   charts (.bars, .donut, .hbars), tabs, and form controls as the public-site illustrations. */

/* Portal scale: every size and corner in this file uses these steps, so the two portals stay consistent. */
:root {
  --fs-ui-2xs: .72rem; --fs-ui-xs: .78rem; --fs-ui-sm: .85rem; --fs-ui-md: .92rem; --fs-ui-lg: 1.05rem;
  --fs-ui-xl: 1.2rem; --fs-ui-2xl: 1.6rem; --fs-ui-3xl: 1.9rem;
  --r-ui-sm: 8px; --r-ui-md: 12px; --r-ui-lg: 16px; --r-ui-xl: 20px;
}

/* The portals are dark only: native controls and scrollbars follow, so nothing renders as a bright light-theme bar. */
body.app { min-height: 100vh; background: var(--ink-950); color-scheme: dark; scrollbar-color: rgba(140, 186, 255, .28) transparent; }
body.app * { scrollbar-width: thin; scrollbar-color: rgba(140, 186, 255, .28) transparent; }
body.app [hidden] { display: none !important; }

/* Sign-in: the same night-sky atmosphere (light and fine grain) as the public site hero, behind a centred card. */
.app-signin { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100vh; padding: 2rem var(--gutter); overflow: hidden; }
.app-signin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(30, 143, 240, .22), transparent 70%), radial-gradient(40% 40% at 85% 100%, rgba(111, 227, 255, .08), transparent 70%); }
.app-signin::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; }
.app-signin .panel { width: min(100%, 440px); box-shadow: var(--shadow-glow), var(--shadow-deep); }
.app-signin .panel .form-status:empty { display: none; }
.app-signin .brand-mark { display: block; width: 168px; height: auto; margin: 0 auto 1.6rem; }
.app-signin .forgot { margin: .2rem 0 0; text-align: center; font-size: var(--fs-ui-sm); }

/* Admin portal: a small permanent marker, so staff always know they are in administration. */
.app--admin .app-sidebar { border-top: 3px solid var(--warn); }
.app-admin-badge { display: inline-flex; align-items: center; margin: -1rem .6rem 1.4rem; padding: .2rem .55rem; border-radius: var(--r-pill); border: 1px solid rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .1); color: #ffd27a; font: 700 var(--fs-ui-2xs) var(--font-sans); letter-spacing: .12em; text-transform: uppercase; width: fit-content; }
.app-signin h1 { margin-bottom: .4rem; font-size: clamp(1.45rem, 3.4vw, 1.8rem); text-align: center; letter-spacing: -.02em; }
.app-signin .lede { margin-bottom: 1.4rem; color: var(--on-dark-2); text-align: center; font-size: var(--fs-ui-md); }
.app-signin .form { grid-template-columns: 1fr; }
.app-signin .eyebrow { display: flex; justify-content: center; }
.app-signin .eyebrow::before { display: none; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.otp input { min-height: 56px !important; padding: 0 !important; text-align: center; font: 700 1.4rem var(--font-display) !important; }

/* Shell */
.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: 1.2rem .9rem; border-right: 1px solid var(--line-dark); background: rgba(2, 10, 23, .55); }
.app-sidebar .logo { display: block; width: 138px; margin: .2rem .6rem 1.6rem; }
.app-nav { display: grid; gap: .2rem; }
.app-nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--stop); color: #fff; font: 700 var(--fs-ui-2xs)/1.5 var(--font-sans); text-align: center; }
.app-nav-badge[hidden] { display: none; }
.app-nav-label { margin: 1.2rem .7rem .4rem; color: var(--on-dark-3); font: 700 var(--fs-ui-2xs) var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.app-nav a { display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: 0 .85rem; border-radius: var(--r-ui-md); color: var(--on-dark-2); font-size: var(--fs-ui-md); font-weight: 600; text-decoration: none; transition: color var(--t-fast), background-color var(--t-fast); }
.app-nav a::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 2px; background: currentColor; opacity: .55; }
.app-nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.app-nav a[aria-current="page"] { color: #fff; background: rgba(56, 182, 255, .14); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .18); }
.app-nav a[aria-current="page"]::before { background: var(--cyan-300); opacity: 1; box-shadow: 0 0 8px var(--cyan-300); }
.app-sidebar-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-dark); }
.app-user { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--r-ui-md); }
.app-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; font: 700 var(--fs-ui-sm) var(--font-sans); }
.app-user b { display: block; color: #fff; font-size: var(--fs-ui-sm); line-height: 1.25; }
.app-user span { display: block; color: var(--on-dark-3); font-size: var(--fs-ui-xs); }
.app-user > div { min-width: 0; }
.app-user b, .app-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user .app-avatar { display: grid; color: #fff; font-size: var(--fs-ui-sm); white-space: nowrap; overflow: visible; }
.app-signout { width: 100%; margin-top: .4rem; }

.app-main { min-width: 0; padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 3rem; }
.app-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: 1.4rem; }
.app-topbar-title { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.app-topbar h1 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -.02em; }
.app-crumbs { color: var(--on-dark-3); font-size: var(--fs-ui-sm); }
.app-topbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.app-topbar-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; margin-left: auto; }
/* Admin company switcher: searchable, A to Z, with a Global option. */
.switcher { position: relative; }
.switcher-button { display: inline-flex; align-items: center; gap: .55rem; max-width: 18rem; padding: .5rem .8rem; border: 1px solid rgba(111, 227, 255, .28); border-radius: var(--r-ui-md); background: rgba(4, 20, 46, .7); color: #fff; font: inherit; font-size: var(--fs-ui-sm); cursor: pointer; }
.switcher-button:hover, .switcher-button[aria-expanded="true"] { border-color: var(--cyan-300); }
.switcher-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-button small { color: var(--on-dark-3); font-size: var(--fs-ui-2xs); text-transform: uppercase; letter-spacing: .06em; }
.switcher-button svg { flex: none; width: 14px; height: 14px; }
.switcher-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: min(22rem, calc(100vw - 2rem)); padding: .5rem; border: 1px solid rgba(111, 227, 255, .25); border-radius: var(--r-ui-md); background: var(--ink-850); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.switcher-panel input { width: 100%; margin-bottom: .4rem; padding: .55rem .7rem; border: 1px solid rgba(111, 227, 255, .25); border-radius: var(--r-ui-sm); background: rgba(4, 20, 46, .8); color: #fff; font: inherit; }
.switcher-list { max-height: 20rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.switcher-list li { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: var(--r-ui-sm); cursor: pointer; }
.switcher-list li b { color: #fff; font-weight: 600; font-size: var(--fs-ui-md); }
.switcher-list li small { color: var(--on-dark-3); font-size: var(--fs-ui-xs); }
.switcher-list li[aria-selected="true"], .switcher-list li:hover { background: rgba(56, 182, 255, .14); }
.switcher-list li.current { box-shadow: inset 3px 0 0 var(--cyan-300); background: rgba(56, 182, 255, .1); }
.switcher-list li.current b::after { content: " (current)"; color: var(--cyan-200); font-weight: 500; font-size: var(--fs-ui-xs); }
.switcher-empty { padding: .6rem; color: var(--on-dark-3); font-size: var(--fs-ui-sm); }
.health-indicator { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: var(--r-pill); border: 1px solid rgba(111, 227, 255, .2); color: var(--on-dark-2); font-size: var(--fs-ui-xs); text-decoration: none; }
.health-indicator i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--on-dark-3); }
.health-indicator[data-state="ok"] i { background: var(--ok); }
.health-indicator[data-state="warning"] i { background: var(--warn); }
.health-indicator[data-state="problem"] i { background: var(--stop); }
.app-nav-badge-inline { margin-left: .4rem; padding: 0 .45rem; border-radius: var(--r-pill); background: rgba(245, 184, 77, .2); color: #ffd27a; font-size: var(--fs-ui-2xs); }
.app-menu-toggle { display: none; }
.app-context { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: .7rem .9rem; border-radius: var(--r-ui-md); border: 1px solid rgba(255, 181, 71, .3); background: rgba(255, 181, 71, .07); color: var(--on-dark-2); font-size: var(--fs-ui-sm); }
.app-context b { color: #fff; }

/* Cards and layout */
.app-grid { display: grid; gap: 1rem; }
.app-grid-2 { grid-template-columns: 1.4fr 1fr; }
.app-grid-2e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid > * { min-width: 0; }
.app-card { padding: 1.1rem 1.2rem; border-radius: var(--r-ui-lg); border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .55); }
.app-card h2 { margin-bottom: .9rem; color: var(--on-dark-1); font: 650 var(--fs-ui-md) var(--font-sans); letter-spacing: 0; }
.app-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.app-card-head h2 { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi { padding: 1rem 1.1rem; border-radius: var(--r-ui-lg); border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .55); }
.kpi span { display: block; color: var(--on-dark-2); font-size: var(--fs-ui-sm); font-weight: 600; }
.kpi strong { display: block; margin: .35rem 0 .3rem; color: #fff; font: 700 var(--fs-ui-3xl)/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi strong .chip { font-size: var(--fs-ui-sm); letter-spacing: 0; vertical-align: middle; }
.detail-list { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .55rem 1rem; margin: 0; font-size: var(--fs-ui-md); }
.detail-list dt { color: var(--on-dark-3); }
.detail-list dd { margin: 0; color: var(--on-dark-1); overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; color: var(--on-dark-2); font-size: var(--fs-ui-md); line-height: 1.55; }
.support-grid dt { color: var(--on-dark-3); }
.area-list { display: grid; gap: .35rem; max-height: 16rem; overflow-y: auto; margin: .4rem 0 .2rem 1.6rem; padding-right: .3rem; }
.area-option { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .1rem; cursor: pointer; }
.area-option input { margin-top: .2rem; accent-color: var(--accent, #38b6ff); }
.area-option span { display: grid; gap: .1rem; }
.area-option small { color: var(--on-dark-3); font-size: var(--fs-ui-xs); }
/* A one-off suggestion card on the dashboard: text on the left, actions on the right (stacked on phones). */
.app-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; border-color: rgba(56, 182, 255, .35); background: rgba(56, 182, 255, .07); }
.app-prompt > div:first-child { flex: 1 1 22rem; min-width: 0; }
.app-prompt h2 { margin: 0 0 .3rem; font-size: 1rem; }
.app-prompt p { margin: 0; color: var(--on-dark-2); font-size: var(--fs-ui-sm); max-width: 70ch; }
.app-prompt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.area-note { margin-bottom: 1rem; padding: .7rem .9rem; border: 1px solid rgba(56, 182, 255, .35); border-radius: var(--r-ui-md); background: rgba(56, 182, 255, .08); color: var(--on-dark-2); font-size: var(--fs-ui-sm); }
.table-link { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; }
.table-link:hover, .table-link:focus-visible { color: var(--accent, #7cc4ff); }
.kpi em { color: var(--ok); font-size: var(--fs-ui-xs); font-style: normal; font-weight: 650; }
.kpi em.muted-note { color: var(--on-dark-3); }
.app-card .bars { height: 170px; }
.app-card .donut { width: 150px; }
.app-card .donut::after { inset: 18px; background: #0d1f3d; }
.app-card .donut-label { font-size: var(--fs-ui-2xl); }

/* Tables */
.app-table-wrap { overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui-sm); }
.app-table th { padding: .65rem .7rem; color: var(--on-dark-3); font-weight: 650; font-size: var(--fs-ui-xs); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-dark); }
.app-table td { padding: .7rem; color: var(--on-dark-2); border-bottom: 1px solid rgba(140, 186, 255, .08); vertical-align: middle; }
.app-table td:first-child { color: #fff; font-weight: 600; }
.app-table tr:last-child td { border-bottom: 0; }
.app-table tbody tr { transition: background-color var(--t-fast); }
.app-table tbody tr:hover { background: rgba(56, 182, 255, .05); }
.app-table .actions-cell { text-align: right; white-space: nowrap; }
.app-table .table-link, .app-table td:first-child > :first-child { white-space: nowrap; }
.row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }

/* Row action menu (Portal.rowActions): sits in the popover layer so the table's scroll box never clips it. */
.row-menu { position: fixed; inset: auto; margin: 0; min-width: 12rem; padding: .35rem; border: 1px solid var(--line-dark-strong); border-radius: var(--r-ui-md); background: var(--ink-850); color: var(--on-dark-1); box-shadow: var(--shadow-deep); }
.row-menu:popover-open { display: grid; gap: .1rem; }
.row-menu-item { display: block; width: 100%; min-height: 40px; padding: 0 .8rem; border: 0; border-radius: var(--r-ui-sm); background: none; color: var(--on-dark-1); font: 600 var(--fs-ui-sm) var(--font-sans); text-align: left; cursor: pointer; }
.row-menu-item:hover, .row-menu-item:focus-visible { background: rgba(56, 182, 255, .14); color: #fff; outline: none; }
.row-menu-item.is-danger { color: #ffb3bb; }
.row-menu-item.is-danger:hover, .row-menu-item.is-danger:focus-visible { background: rgba(255, 93, 108, .14); }
.row-menu-item:disabled { opacity: .45; cursor: not-allowed; }
.row-menu-toggle::after { content: ""; width: 9px; height: 9px; margin-left: .1rem; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Phones: each table row becomes a card, with the column name beside each value and actions along the bottom. */
@media (max-width: 760px) {
  .app-table-wrap { overflow: visible; }
  .app-table, .app-table tbody, .app-table tr, .app-table td { display: block; width: 100%; }
  .app-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-table tbody { display: grid; gap: .6rem; }
  .app-table tbody tr { padding: .75rem .85rem; border: 1px solid var(--line-dark); border-radius: var(--r-ui-md); background: rgba(2, 10, 23, .35); }
  .app-table tbody tr[hidden] { display: none; }
  .app-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem 0; border: 0; text-align: right; }
  .app-table td[data-label]::before { content: attr(data-label); flex: none; color: var(--on-dark-3); font-size: var(--fs-ui-xs); font-weight: 650; text-align: left; }
  .app-table td:first-child { display: block; padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line-dark); font-size: var(--fs-ui-md); text-align: left; }
  .app-table td:first-child::before { display: none; }
  .app-table .actions-cell { justify-content: flex-start; padding-top: .6rem; text-align: left; white-space: normal; }
  .app-table .actions-cell .row-actions { justify-content: flex-start; }
  .app-card:has(> .app-table-wrap, > .app-table-block, > div > .app-table-wrap) { padding: .6rem; }
}
.app-table small { display: block; color: var(--on-dark-3); font-size: var(--fs-ui-xs); font-weight: 500; }
.app-empty { display: grid; justify-items: center; gap: .5rem; padding: 2.2rem 1rem; border: 1px dashed var(--line-dark-strong); border-radius: var(--r-ui-md); color: var(--on-dark-2); text-align: center; }
.app-empty strong { color: #fff; }
.app-empty p { max-width: 460px; margin: 0; font-size: var(--fs-ui-md); }
.app-loading { padding: 2rem; color: var(--on-dark-3); text-align: center; }
.app-loading::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto .8rem; border-radius: 50%; border: 3px solid rgba(111, 227, 255, .2); border-top-color: var(--cyan-300); animation: app-spin .8s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Toolbar */
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.app-toolbar .search { flex: 1 1 240px; }
.app-toolbar select, .app-select { min-height: 42px; padding: 0 2.2rem 0 .8rem; border-radius: var(--r-ui-md); border: 1px solid var(--line-dark-strong); background: rgba(2, 10, 23, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2393b4d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center / 14px; color: #fff; font: inherit; font-size: var(--fs-ui-md); appearance: none; }
.app-toolbar select option, .app-select option { background: var(--ink-850); }
.app-toolbar input.search { min-width: 0; min-height: 42px; padding: 0 .9rem; border-radius: var(--r-ui-md); border: 1px solid var(--line-dark-strong); background: rgba(2, 10, 23, .55); color: #fff; font: inherit; font-size: var(--fs-ui-md); }
.app-toolbar input.search::placeholder { color: var(--on-dark-3); }
.app-toolbar input.search:focus, .app-toolbar select:focus, .app-select:focus { outline: none; border-color: var(--cyan-300); box-shadow: 0 0 0 4px rgba(56, 182, 255, .2); }
.app-count { color: var(--on-dark-3); font-size: var(--fs-ui-sm); }
a.app-count { color: var(--cyan-300); text-decoration: none; font-weight: 650; }
.app-account { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-account form { display: grid; gap: 1rem; }
@media (max-width: 900px) { .app-account { grid-template-columns: 1fr; } }

/* Setup checklist */
.checklist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: var(--r-ui-md); border: 1px solid var(--line-dark); color: var(--on-dark-2); font-size: var(--fs-ui-md); }
.checklist li::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line-dark-strong); }
.checklist li.done { color: #fff; }
.checklist li.done::before { border-color: var(--ok); background: rgba(47, 208, 138, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%232fd08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.checklist a { margin-left: auto; font-size: var(--fs-ui-sm); font-weight: 650; text-decoration: none; }

/* Dialog */
.app-dialog { width: min(100% - 2rem, 520px); padding: 0; border: 1px solid var(--line-dark-strong); border-radius: var(--r-ui-xl); background: #0b1c38; color: var(--on-dark-1); box-shadow: var(--shadow-deep); }
.app-dialog::backdrop { background: rgba(2, 10, 23, .82); }
.app-dialog form { display: grid; gap: 1rem; padding: 1.4rem; }
.app-dialog h2 { font-size: var(--fs-ui-xl); letter-spacing: -.01em; }
.app-dialog p { margin: 0; color: var(--on-dark-2); font-size: var(--fs-ui-md); }
.app-dialog .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }
.app-dialog .form-status { min-height: 0; }
.code-box { display: flex; align-items: center; gap: .6rem; padding: .8rem; border-radius: var(--r-ui-md); border: 1px dashed var(--line-dark-strong); background: rgba(2, 10, 23, .55); font: var(--fs-ui-sm) var(--font-mono); word-break: break-all; color: var(--cyan-200); }

/* Toast */
.app-toast { position: fixed; z-index: 90; right: 1.2rem; bottom: 1.2rem; max-width: min(420px, calc(100% - 2.4rem)); padding: .85rem 1.1rem; border-radius: var(--r-ui-md); border: 1px solid rgba(47, 208, 138, .45); background: #0b2a2a; color: #e7fff4; font-size: var(--fs-ui-md); box-shadow: var(--shadow-deep); animation: panel-in var(--t-med) var(--ease-out); }
.app-toast.is-error { border-color: rgba(255, 93, 108, .5); background: #2a0f18; color: #ffe5e8; }

/* Agent release history */
.release-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 0; }
.release-item { padding: 1rem 0; border-top: 1px solid var(--line-dark); }
.release-item:first-child { border-top: 0; padding-top: .4rem; }
.release-head { margin-bottom: .5rem; }
.release-head b { font-size: var(--fs-ui-lg); }
.release-notes { color: var(--on-dark-2); font-size: var(--fs-ui-md); line-height: 1.55; }
.release-notes .plain-list { margin: 0 0 .5rem; }

/* Sign-in extras: inline text button and the remember tick box */
.link-button { padding: 0; border: 0; background: none; color: var(--cyan-200); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:hover { color: #fff; }
.check-row { display: flex; align-items: center; gap: .55rem; margin: -.2rem 0 .2rem; color: var(--on-dark-2); font-size: var(--fs-ui-md); cursor: pointer; }
.check-row input { appearance: none; display: grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; margin: 0; border: 1.5px solid var(--line-dark-strong); border-radius: 5px; background: rgba(2, 10, 23, .55); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }
.check-row input::after { content: ""; width: .6rem; height: .6rem; transform: scale(0); transition: transform var(--t-fast) var(--ease-out);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.8' fill='none' stroke='%23020a17' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.check-row input:checked { border-color: var(--cyan-300); background: var(--cyan-300); }
.check-row input:checked::after { transform: scale(1); }
.check-row input:hover { border-color: rgba(111, 227, 255, .6); }

/* Inactivity warning: bottom right, above toasts */
.idle-warning { position: fixed; z-index: 95; right: 1.2rem; bottom: 1.2rem; width: min(360px, calc(100% - 2.4rem)); padding: 1.1rem 1.2rem; border-radius: var(--r-ui-lg); border: 1px solid rgba(255, 196, 77, .5); background: #1d1a10; color: #fff7e0; box-shadow: var(--shadow-deep); animation: panel-in var(--t-med) var(--ease-out); }
.idle-warning h2 { margin: 0 0 .35rem; font-size: var(--fs-ui-lg); }
.idle-warning p { margin: 0; color: #f5e6bf; font-size: var(--fs-ui-md); line-height: 1.5; }
.idle-warning .idle-count { display: block; margin: .6rem 0 .8rem; font: 700 var(--fs-ui-3xl)/1 var(--font-mono); color: #ffd36b; font-variant-numeric: tabular-nums; }
.idle-warning .idle-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .idle-warning { animation: none; } }

/* Wizard and policy */
.app-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.2rem; }
.app-step { display: grid; gap: .45rem; padding: 0; border: 0; background: none; color: var(--on-dark-3); font: 600 var(--fs-ui-xs) var(--font-sans); text-align: left; cursor: pointer; }
.app-step i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.app-step.is-done i, .app-step.is-current i { background: linear-gradient(90deg, var(--blue-500), var(--cyan-300)); }
.app-step.is-current { color: #fff; }
.option-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .95rem; margin-bottom: .5rem; border-radius: var(--r-ui-md); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); }
.option-row b { display: block; color: #fff; font-size: var(--fs-ui-md); }
.option-row span { color: var(--on-dark-3); font-size: var(--fs-ui-sm); }
.option-row.is-selected { border-color: var(--cyan-300); background: rgba(56, 182, 255, .1); }
.switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); transition: background-color var(--t-fast); pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--t-med) var(--ease-out); }
.switch input:checked + i { background: var(--blue-500); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--cyan-300); outline-offset: 2px; }
.seg-select { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg-select button { min-height: 32px; padding: 0 .7rem; border-radius: var(--r-pill); border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark-2); font: 600 var(--fs-ui-xs) var(--font-sans); cursor: pointer; }
.seg-select button:hover { color: #fff; border-color: rgba(111, 227, 255, .45); }
.seg-select button[aria-pressed="true"].approve { color: var(--ok); border-color: rgba(47, 208, 138, .6); background: rgba(47, 208, 138, .12); }
.seg-select button[aria-pressed="true"].review { color: var(--warn); border-color: rgba(255, 181, 71, .6); background: rgba(255, 181, 71, .12); }
.seg-select button[aria-pressed="true"].block { color: var(--stop); border-color: rgba(255, 93, 108, .6); background: rgba(255, 93, 108, .12); }
.seg-select button:disabled { opacity: .5; cursor: not-allowed; }

/* Definition lists */
.app-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem 1rem; margin: 0; }
.app-dl dt { color: var(--on-dark-2); }
.app-dl dd { margin: 0; color: #fff; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.app-dl .total { padding-top: .7rem; border-top: 1px solid var(--line-dark-strong); font-size: var(--fs-ui-lg); }

/* Cookie settings link (sidebar foot and sign-in panel) and the consent banner in portal colours. */
.app-cookie-link { display: block; margin: .7rem auto 0; padding: .2rem .4rem; border: 0; background: none; color: var(--on-dark-3); font: 600 var(--fs-ui-xs) var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.app-cookie-link:hover { color: #fff; }
.app-cookie-link[hidden] { display: none; }
body.app .google-consent { border-color: rgba(140, 186, 255, .4); background: #0d203d; color: #eef5ff; }
body.app .google-consent a { color: #6fe3ff; }
body.app .google-consent__actions button { border-color: #6fe3ff; background: #0d203d; color: #eef5ff; }
body.app .google-consent__actions button:last-child { background: #168ee0; color: #fff; }

/* Responsive */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-grid-2, .app-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(290px, 86vw); transform: translateX(-100%); transition: transform var(--t-med) var(--ease-out); background: var(--ink-900); box-shadow: var(--shadow-deep); }
  .app-sidebar.is-open { transform: none; }
  .app-scrim { position: fixed; z-index: 55; inset: 0; background: rgba(2, 10, 23, .6); }
  .app-menu-toggle { display: inline-flex; }
  .app-grid-2e { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi strong { font-size: var(--fs-ui-2xl); }
  .app-steps { grid-template-columns: repeat(5, 1fr); }
  .app-step span { display: none; }
  .app-main { padding-inline: 1rem; }
}
/* Table paging */
.app-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem .2rem 0; color: var(--on-dark-3); font-size: var(--fs-ui-sm); }
.app-pager-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.app-pager-label { display: inline-flex; align-items: center; gap: .45rem; }
.app-pager-size { padding: .3rem 1.8rem .3rem .6rem; border: 1px solid rgba(111, 227, 255, .25); border-radius: var(--r-ui-sm); background-color: rgba(4, 20, 46, .7); color: #fff; font: inherit; font-size: var(--fs-ui-sm); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2393b4d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 12px; }
.app-pager-size option { background: var(--ink-850); color: #fff; }
.app-pager-position { min-width: 6.5rem; text-align: center; color: var(--on-dark-2); }
.app-pager .btn[disabled] { opacity: .45; cursor: default; }
@media (max-width: 560px) { .app-pager { justify-content: flex-start; } .app-pager-position { min-width: 0; } }

/* Portal readiness reports use the same score, risk, category and priority hierarchy as the public result. */
.readiness-report { --line-dark: rgba(140, 186, 255, .16); display: grid; gap: 1.2rem; max-width: 1180px; margin-inline: auto; color: var(--on-dark-1); }
.readiness-report-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(111, 227, 255, .2); border-radius: var(--r-ui-lg); background: radial-gradient(ellipse at 100% 0, rgba(56, 182, 255, .15), transparent 50%), linear-gradient(135deg, var(--ink-850), #0b2142); }
.readiness-report-head .eyebrow, .readiness-report .eyebrow { color: var(--cyan-300); font-size: var(--fs-ui-2xs); font-weight: 750; letter-spacing: .14em; }
.readiness-report-head h2 { margin: .45rem 0; color: #fff; font: 700 clamp(1.55rem, 3.5vw, 2.2rem)/1.15 var(--font-display); letter-spacing: -.035em; }
.readiness-report-head p { margin: 0; color: var(--on-dark-2); }
.readiness-report-mark { display: flex; align-items: center; gap: .45rem; flex: none; color: #fff; font: 750 var(--fs-ui-2xl) var(--font-display); }
.readiness-report-mark span { align-self: end; margin-bottom: .18rem; color: var(--on-dark-2); font: 700 var(--fs-ui-2xs) var(--font-sans); letter-spacing: .12em; }
.readiness-result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.readiness-report .rd-score-card, .readiness-report .rd-risk-card { min-height: 250px; padding: 1.6rem; border-color: rgba(111, 227, 255, .18); background-color: #0a1a34; }
.readiness-report .rd-score-card { background: radial-gradient(circle at 50% 45%, rgba(56, 182, 255, .13), transparent 58%), #0a1a34; }
.readiness-report .rd-ring--lg { width: 150px; }
.readiness-report .rd-ring-label strong { color: #fff; }
.readiness-report .rd-risk-card { gap: 1rem; }
.readiness-report .readiness-byline { color: var(--on-dark-3); }
.readiness-report .rd-meaning { margin: 0; padding: 1.2rem 1.4rem; border-color: rgba(111, 227, 255, .2); background: rgba(14, 34, 66, .55); }
.readiness-report .rd-meaning h3 { margin: .4rem 0; color: #fff; font: 650 var(--fs-ui-xl) var(--font-display); }
.readiness-report .rd-meaning p { margin: 0; color: var(--on-dark-2); }
.readiness-report-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.readiness-report-grid .panel, .readiness-responses, .readiness-comments { min-width: 0; padding: 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--r-ui-lg); background: rgba(14, 34, 66, .55); }
.readiness-report h3 { margin: .25rem 0 .7rem; color: #fff; font: 650 var(--fs-ui-lg) var(--font-display); }
.readiness-report-grid .small.muted { margin: 0 0 1rem; }
.readiness-report .readiness-findings { display: grid; }
.readiness-report .readiness-finding { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line-dark); }
.readiness-report .readiness-finding:last-child { border-bottom: 0; }
.readiness-report .readiness-finding h3 { margin: .35rem 0; font: 600 var(--fs-ui-md)/1.5 var(--font-sans); }
.readiness-report .readiness-finding p { margin: 0; color: var(--on-dark-2); font-size: var(--fs-ui-sm); }
.readiness-report .readiness-finding .chip { flex: none; }
.readiness-report .checklist { margin: .5rem 0 0; }
.readiness-report .readiness-responses { overflow: hidden; }
.readiness-report-foot { padding: .6rem 0; border-top: 1px solid var(--line-dark); color: var(--on-dark-3); font-size: var(--fs-ui-xs); }
@media (max-width: 760px) { .readiness-report-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .readiness-result-cards { grid-template-columns: 1fr; } .readiness-report-head { align-items: flex-start; } .readiness-report-mark { font-size: var(--fs-ui-xl); } .readiness-report .readiness-finding { flex-direction: column; } }

@media print {
  .app-pager { display: none !important; }
  .app-table tbody tr[hidden] { display: table-row !important; }
  .app-sidebar, .app-topbar-actions, .app-toolbar, .app-menu-toggle, .no-print { display: none !important; }
  .app-shell { display: block; }
  body.app { background: #fff; color: #000; }
  .app-card, .kpi { border-color: #ccc; background: #fff; color: #000; break-inside: avoid; }
  .app-table td, .app-table th, .kpi strong, .kpi span, .app-card h2 { color: #000 !important; }
  body.app:has(.readiness-report) { background: #fff; }
  body.app:has(.readiness-report) .app-topbar { display: none !important; }
  .readiness-report { max-width: none; gap: 12pt; color: #10223d; font: 10pt/1.45 Arial, sans-serif; }
  .readiness-report-head { min-height: 100pt; padding: 18pt 22pt; border: 0; border-bottom: 3pt solid #38b6ff; border-radius: 10pt; background: #071a38 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .readiness-report-head h2, .readiness-report h3, .readiness-report .rd-risk { color: #fff !important; }
  .readiness-report .rd-score-card, .readiness-report .rd-risk-card { min-height: 155pt; padding: 16pt; background: #0a1a34 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .readiness-report .rd-ring { width: 112pt; }
  .readiness-report .rd-risk { min-width: 0; padding: 10pt 18pt; font-size: 19pt; }
  .readiness-report .rd-meaning, .readiness-report-grid .panel, .readiness-responses, .readiness-comments { border: 1px solid #d6e1ed; border-radius: 8pt; background: #fff !important; color: #173252; break-inside: avoid; }
  .readiness-report .rd-meaning h3, .readiness-report-grid h3, .readiness-responses h3, .readiness-comments h3 { color: #10223d !important; }
  .readiness-report .rd-meaning p, .readiness-report .readiness-findings p, .readiness-report .checklist { color: #38536d !important; }
  .readiness-report .hbar { color: #274360; }
  .readiness-report .hbar b { color: #10223d; }
  .readiness-report .hbar .track { background: #e5edf6; }
  .readiness-report .rd-priority b { color: #10223d; }
  .readiness-report .rd-priority p { color: #38536d; }
  .readiness-report-foot { color: #64778b; }
  .readiness-report .app-table td, .readiness-report .app-table th { color: #274360 !important; }
  .readiness-report .app-table td:first-child { color: #10223d !important; }
  .readiness-report .app-table tr, .readiness-report .readiness-finding { break-inside: avoid; }
  .readiness-report-grid { grid-template-columns: 1.2fr 1fr; }
}
.btn--danger { --btn-bg: rgba(255, 93, 108, .08); --btn-border: rgba(255, 93, 108, .6); color: #ffb3bb; }
.btn--danger:hover { --btn-bg: rgba(255, 93, 108, .16); }
.readiness-recommend { margin-top: 1rem; display: grid; gap: .5rem; justify-items: start; border-color: rgba(111, 227, 255, .28); }
.readiness-recommend .plain-list { margin-bottom: .3rem; }
.provider-setup > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.provider-setup > summary::-webkit-details-marker { display: none; }
.provider-setup > summary > div { display: grid; gap: .2rem; }
.provider-setup > summary span { color: var(--on-dark-2); font-size: .88rem; }
.provider-setup-body { margin-top: 1rem; display: grid; gap: .7rem; }
.provider-setup-body h3 { font-size: 1rem; margin: .4rem 0 0; }
.provider-setup-body code { font-size: .82rem; word-break: break-all; }

/* Helpers used by the portal views instead of inline styles. Last in the file so they win over component defaults. */
.mt-xs { margin-top: .4rem; } .mt-sm { margin-top: .6rem; } .mt-md { margin-top: .8rem; } .mt-1 { margin-top: 1rem; } .mt-lg { margin-top: 1.4rem; }
.mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: .6rem; } .mb-md { margin-bottom: .8rem; } .mb-1 { margin-bottom: 1rem; }
.my-1 { margin-block: 1rem; } .m-0 { margin: 0; }
.note-sm { display: block; color: var(--on-dark-3); font-size: var(--fs-ui-xs); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.text-center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.break-all { word-break: break-all; }
.pre-wrap { white-space: pre-wrap; }
.tone-warn { color: var(--warn); } .tone-stop { color: var(--stop); }
.qr-frame { display: grid; place-items: center; padding: .8rem; border-radius: 14px; background: #fff; }
.code-list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0; list-style: none; }