/* StaffGateway Admin · Glass design (design option 3), applied to the live-portal version.
   - Frosted white panels over a cool grey-blue gradient; smoked glass over a night-blue gradient in dark mode.
   - An icon rail on the start edge (menu groups open a flyout), a light top line with weather, date and time,
     section pills above the pages of a group, large light page titles, pill tabs and buttons, a blue Today card.
   Loaded last and unlayered, so it wins over the design-system token layers. Content and behaviour are unchanged. */

/* ---------- Tokens ---------- */
:root[data-brand] {
  --brand-font: "Outfit", "Work Sans", system-ui, sans-serif;
  --brand-font-display: "Outfit", "Work Sans", system-ui, sans-serif;

  --surface-background: #D3DBE5;
  --surface-foreground: #182131;
  --surface-card: rgb(255 255 255 / .55);
  --surface-popover: rgb(248 250 253 / .95);
  --surface-secondary: rgb(255 255 255 / .5);
  --surface-muted: rgb(255 255 255 / .42);
  --surface-muted-foreground: #4A576B;      /* ≥ 4.8:1 on the glass panels */
  --surface-border: rgb(255 255 255 / .72);
  --surface-input: rgb(110 128 156 / .45);  /* control edges stay visible on glass */
  --surface-sidebar: transparent;

  --surface-background-dark: #0C121C;
  --surface-foreground-dark: #EEF2F8;
  --surface-card-dark: rgb(255 255 255 / .06);
  --surface-popover-dark: rgb(20 28 41 / .96);
  --surface-secondary-dark: rgb(255 255 255 / .08);
  --surface-muted-dark: rgb(255 255 255 / .06);
  --surface-muted-foreground-dark: #9DA9BC;
  --surface-border-dark: rgb(255 255 255 / .1);
  --surface-input-dark: rgb(255 255 255 / .22);
  --surface-sidebar-dark: transparent;

  --gl-r: 22px; --gl-r-md: 16px;
  --gl-blur: blur(22px) saturate(1.45);
  --gl-shadow: 0 14px 34px -16px rgb(24 40 72 / .32), inset 0 1px 0 rgb(255 255 255 / .75);
  --gl-lift: 0 8px 18px -10px rgb(24 40 72 / .45);
  --gl-solid: #E9EEF4;            /* opaque stand-in where content scrolls underneath (sticky cells) */
  --gl-active: #fff;              /* the lifted white pill: selected tab, section pill */
  --gl-select: rgb(255 255 255 / .55); /* menu selection: see-through, no shadow */
  --gl-chip: rgb(255 255 255 / .22);
  --gl-chip-edge: rgb(255 255 255 / .95);
  --gl-hover: rgb(255 255 255 / .62);
  --gl-line: rgb(24 40 72 / .08);
  --gl-text-2: #334055;
  --rail-w: 80px;
}
:root[data-brand].dark {
  --gl-shadow: 0 18px 40px -18px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .08);
  --gl-lift: inset 0 1px 0 rgb(255 255 255 / .1);
  --gl-solid: #151D29;
  --gl-active: rgb(255 255 255 / .14);
  --gl-select: rgb(255 255 255 / .1);
  --gl-chip: rgb(255 255 255 / .03);
  --gl-chip-edge: rgb(255 255 255 / .18);
  --gl-hover: rgb(255 255 255 / .09);
  --gl-line: rgb(255 255 255 / .07);
  --gl-text-2: #C8D1DE;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(900px 520px at 88% -8%, rgb(255 255 255 / .6), transparent 60%),
    radial-gradient(760px 560px at -5% 105%, rgb(150 174 206 / .55), transparent 62%),
    linear-gradient(165deg, #E4E9F0 0%, #CDD6E1 48%, #B7C3D2 100%) fixed;
}
.dark body {
  background:
    radial-gradient(900px 520px at 88% -8%, rgb(46 111 208 / .3), transparent 60%),
    radial-gradient(760px 560px at -5% 105%, rgb(88 80 200 / .18), transparent 62%),
    linear-gradient(165deg, #121B28 0%, #0C131E 50%, #070C14 100%) fixed;
}

/* ---------- Shell ---------- */
.app.gl-app { display: block; min-height: 100dvh; background: none; padding-inline-start: var(--rail-w); }
.app.gl-app[data-bare] { padding: 0; }
.app.gl-app[data-bare] .rail, .app.gl-app[data-bare] .flyout { display: none; }

/* Rail: attached to the start edge, full height.
   One layout for both states, so collapsing only animates: the rail width changes, every icon stays in the same
   place (22px from the item's start in both states) and the labels fade. Collapsed = icons only, groups open the
   flyout; expanded = full list items, groups open as lists. The choice is saved. */
.app.gl-app { transition: padding-inline-start .32s cubic-bezier(.2, .7, .2, 1); }
.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-sticky, 40); width: var(--rail-w);
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 20px 8px;
  background: rgb(255 255 255 / .38); border-inline-end: 1px solid var(--border); box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  transition: width .32s cubic-bezier(.2, .7, .2, 1);
}
.dark .rail { background: rgb(255 255 255 / .04); }
.app[data-rail-open] { --rail-w: 252px; }

/* Logo: the full StaffGateway logo. The symbol stays put (centred in the collapsed rail); the wordmark fades down
   when the menu collapses and fades up when it expands. */
.rail-top { height: 46px; flex: none; display: flex; align-items: center; padding-inline-start: 19px; }
.rail-logo { display: flex; align-items: center; gap: 7px; text-decoration: none; }
.rail-logo svg { display: block; height: 30px; width: auto; flex: none; }
.logo-sym { fill: #0E5BBC; }
.logo-text { fill: #00347C; }
.dark .logo-sym, .dark .logo-text { fill: #fff; }

.rail-links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; overflow-x: visible; scrollbar-width: none; }
.rail-links::-webkit-scrollbar { display: none; }
.rail-link {
  position: relative; display: flex; min-width: 0; align-items: center; gap: 12px; width: 100%; height: 46px; padding-inline: 22px 16px;
  border: 0; border-radius: 999px; background: none; color: var(--gl-text-2); text-decoration: none; font: inherit; cursor: pointer;
  transition: background .2s, color .2s;
}
.rail-link .icon { width: 20px; height: 20px; flex: none; }
.rail-label { flex: 1; min-width: 0; text-align: start; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.rail-chev { flex: none; color: var(--muted-foreground); }

/* The words (logo word, item names, chevrons, sub items) fade one by one; --i is each one's place, --n the count.
   Collapsed they are hidden and 6px lower. Collapsing: they fade down from the last to the first, then the rail
   narrows (JS waits). Expanding: the rail widens first, then they fade up from the first to the last. */
.logo-text, .rail-label, .rail-chev { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .22s ease; }
.rail-sublink { transition: background .15s, color .15s, opacity .2s ease, transform .22s ease; }
.app[data-rail-open] .logo-text, .app[data-rail-open] .rail-label, .app[data-rail-open] .rail-chev, .app[data-rail-open] .rail-sublink { opacity: 1; transform: none; }
.app[data-rail-open] .rail-label { pointer-events: auto; }
.app[data-rail-open] .rail-group.open .rail-chev { transform: rotate(180deg); }
.app[data-rail-open][data-rail-closing] :is(.logo-text, .rail-label, .rail-chev, .rail-sublink) {
  opacity: 0; transform: translateY(6px); transition-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 35ms);
}
.app[data-rail-open][data-rail-closing] .rail-group.open .rail-chev { transform: translateY(6px) rotate(180deg); }
.app[data-rail-opening] :is(.logo-text, .rail-label, .rail-chev, .rail-sublink) {
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(280ms + var(--i, 0) * 45ms);
}
.rail-link:hover, .rail-link[aria-expanded="true"] { background: var(--gl-hover); color: var(--foreground); }
.rail-link[aria-current="page"] { background: var(--gl-select); color: var(--link); }
.app[data-rail-open] .rail-group .rail-link[aria-expanded="true"]:not(:hover) { background: none; }
.app[data-rail-open] .rail-group .rail-link[aria-current="page"] { background: none; color: var(--link); }
.app[data-rail-open] .rail-group .rail-link[aria-current="page"] .rail-label { font-weight: 600; }
.app[data-rail-open] .rail-group .rail-link[aria-current="page"]:hover { background: var(--gl-hover); }

/* Tooltips only when collapsed */
.rail-tip {
  position: absolute; inset-inline-start: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 2; white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 10px; background: var(--foreground); color: var(--background); font-size: 12px; font-weight: 500; opacity: 0; transition: opacity .15s;
}
.app:not([data-rail-open]) .rail-link:hover .rail-tip, .app:not([data-rail-open]) .rail-link:focus-visible .rail-tip { opacity: 1; }
.rail-link[aria-expanded="true"] .rail-tip { opacity: 0; }
.app:not([data-rail-open]) .rail-links { overflow: visible; }

/* A group's pages, under it when expanded */
.rail-sub { list-style: none; margin: 0; padding: 0; display: none; }
.app[data-rail-open] .rail-sub:not([hidden]) { display: grid; gap: 2px; margin: 2px 0 6px; padding-inline-start: 44px; }
.rail-sublink {
  display: flex; align-items: center; min-height: 38px; padding-inline: 14px; border-radius: 999px; color: var(--gl-text-2);
  text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s;
}
.rail-sublink:hover { background: var(--gl-hover); color: var(--foreground); }
.rail-sublink[aria-current="page"] { background: var(--gl-select); color: var(--link); font-weight: 600; }

/* Foot: theme, then Collapse / Expand */
.rail-foot { margin-block-start: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.rail-toggle .icon { transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.app:not([data-rail-open]) .rail-toggle .icon { transform: rotate(180deg); }
[dir="rtl"] .rail-toggle .icon { transform: scaleX(-1); }
[dir="rtl"] .app:not([data-rail-open]) .rail-toggle .icon { transform: scaleX(-1) rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .app.gl-app, .rail, .rail-label, .rail-chev, .logo-text, .rail-toggle .icon { transition: none; } }

/* Flyout for a menu group, beside the rail */
.flyout {
  position: fixed; inset-inline-start: calc(var(--rail-w) + 10px); z-index: calc(var(--z-sticky, 40) + 1); width: 264px; padding: 10px;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--gl-r); box-shadow: var(--gl-shadow), 0 24px 48px -24px rgb(24 40 72 / .4);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
.flyout[hidden] { display: none; }
.flyout-title { display: flex; align-items: center; gap: 8px; margin: 4px 8px 8px; color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; }
.flyout-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.flyout-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding-inline: 12px; border-radius: 14px;
  color: var(--foreground); text-decoration: none; font-weight: 500; transition: background .15s;
}
.flyout-link .chev { color: var(--muted-foreground); opacity: 0; transition: opacity .15s; }
[dir="rtl"] .flyout-link .chev { transform: scaleX(-1); }
.flyout-link:hover { background: var(--gl-hover); }
.flyout-link:hover .chev { opacity: 1; }
.flyout-link[aria-current="page"] { background: var(--primary); color: var(--primary-foreground); }
.flyout-link[aria-current="page"] .chev { color: inherit; opacity: 1; }

/* Top line: weather, date and time on the start side; language, bell and account on the end side */
.app-header {
  position: static; display: flex; align-items: center; gap: 16px; height: auto; max-width: 1440px; margin-inline: auto;
  padding: 20px 32px 0; background: none; border: 0;
}
.top-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--gl-text-2); }
.top-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.top-stat b { font-weight: 600; color: var(--foreground); }
.top-logo { display: none; }
.app-header-actions { margin-inline-start: auto; gap: 8px; }
.header-pill, .icon-pill, .user-chip {
  height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); cursor: pointer; transition: background .2s, border-color .2s;
}
.icon-pill { position: relative; display: grid; place-items: center; width: 40px; padding: 0; }
.icon-pill .badge-count { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; font-size: 11px; box-shadow: 0 0 0 2px var(--gl-solid); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 3px; padding-inline-end: 12px; }
.user-chip .avatar { width: 32px; height: 32px; font-size: 12px; background: var(--primary); color: var(--primary-foreground); }
.user-chip .chev { color: var(--muted-foreground); }
.user-meta b { font-size: 13px; }
.user-meta span { font-size: 11.5px; }
.header-pill:hover, .icon-pill:hover, a.user-chip:hover, button.user-chip:hover { background: rgb(255 255 255 / .8); border-color: #fff; color: var(--foreground); }
.dark .header-pill:hover, .dark .icon-pill:hover, .dark a.user-chip:hover, .dark button.user-chip:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .22); }

.main, [dir="rtl"] .main, .dark .main { max-width: 1440px; margin-inline: auto; padding: 8px 32px 64px; background: none; }
.app[data-bare] .main { max-width: none; padding: 0; }

/* Section pills (pages of the current group) above the page title */
.subnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-block: 18px 2px; }
.subnav-name { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 6px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.subnav-link {
  display: inline-flex; align-items: center; height: 34px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--gl-chip-edge);
  background: var(--gl-chip); color: var(--gl-text-2); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s;
}
.subnav-link:hover { background: var(--gl-hover); color: var(--foreground); }
.subnav-link[aria-current="page"] { background: var(--gl-active); color: var(--foreground); box-shadow: var(--gl-lift); font-weight: 600; }
.dark .subnav-link[aria-current="page"] { border-color: rgb(255 255 255 / .22); }

/* Page head: large light titles */
.page-head { align-items: flex-end; gap: 16px 24px; padding-block: 20px 4px; margin-block-end: 20px; }
.h-page { font-size: 44px; line-height: 1.1; font-weight: 300; letter-spacing: -.02em; }
:lang(ar) .h-page { font-weight: 400; letter-spacing: 0; line-height: 1.35; font-size: 38px; }
.page-sub { margin-block-start: 8px; color: var(--gl-text-2); font-size: 14px; }
.page-head .back { width: 44px; height: 44px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); align-self: center; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Components ---------- */
.card, .table-wrap, .stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--gl-r);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
.card, .stat-card { box-shadow: var(--gl-shadow); }
.card .card, .card .table-wrap, .card .stat-card { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .32); }
.dark .card .card, .dark .card .table-wrap, .dark .card .stat-card { background: rgb(255 255 255 / .03); }
.card .table-wrap { border-radius: var(--gl-r-md); }
.card-title { font-size: 16px; font-weight: 550; letter-spacing: -.005em; }

/* Figures: light and large, like the option's KPIs */
.stat-label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.stat-value { font-size: 32px; font-weight: 300; letter-spacing: -.02em; }
.stat-icon { border-radius: 999px; background: rgb(255 255 255 / .85); color: var(--link); border: 1px solid #fff; }
.dark .stat-icon { background: rgb(46 111 208 / .22); border-color: rgb(46 111 208 / .35); }

/* Buttons: pills; primary with a soft blue glow; outline is frosted */
.btn { border-radius: 999px; }
.btn-primary { box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--primary) 85%, transparent); }
.btn-outline { --btn-bg: rgb(255 255 255 / .5); --btn-border: var(--border); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.btn-outline:hover { --btn-bg: rgb(255 255 255 / .85); }
.dark .btn-outline { --btn-bg: rgb(255 255 255 / .06); --btn-border: rgb(255 255 255 / .16); }
.dark .btn-outline:hover { --btn-bg: rgb(255 255 255 / .12); }
.btn-icon { border-radius: 999px; }

/* Fields: pale frosted, soft corners; the search field is a pill */
.input, .select, .textarea { border-radius: 14px; background: rgb(255 255 255 / .62); }
.input-group > .input { border-radius: 999px; }
.checkbox, .radio { background: rgb(255 255 255 / .62); }
.dark .input, .dark .select, .dark .textarea, .dark .checkbox, .dark .radio { background: rgb(255 255 255 / .05); }
.checkbox:checked, .checkbox:indeterminate { background: var(--primary); }

/* Tabs: outline pills with a lifted white active pill (the option's room chips) */
.tabs { gap: 8px; border: 0; scrollbar-width: none; }
/* Shadows are never cut: a row that scrolls sideways clips at its padding edge, so it gets room for the lifted
   pill's shadow (8px to the sides, 16px below) and gives the same space back with negative margins. */
.tabs { padding: 4px 8px 16px; margin: -4px -8px -12px; }
dialog .card, dialog .stat-card, dialog .table-wrap { box-shadow: none; }
.tabs::-webkit-scrollbar, .subnav::-webkit-scrollbar { display: none; }
.tab {
  height: 36px; margin: 0; padding-inline: 14px; border: 1px solid var(--gl-chip-edge); border-radius: 999px; background: var(--gl-chip);
  color: var(--gl-text-2); transition: background .2s, color .2s;
}
.tab:hover { background: var(--gl-hover); color: var(--foreground); }
.tab[aria-selected="true"] { background: var(--gl-active); color: var(--foreground); border-color: var(--gl-chip-edge); box-shadow: var(--gl-lift); }
.tab[aria-selected="true"] .tab-count { background: var(--primary); color: var(--primary-foreground); }
.tab-count { background: rgb(255 255 255 / .6); }
.dark .tab-count { background: rgb(255 255 255 / .08); }

/* Toggle chips */
.toggle { background: var(--gl-chip); border-color: var(--gl-chip-edge); }
.toggle:hover { background: var(--gl-hover); color: var(--foreground); }
/* A chosen chip is the same lifted white pill as a selected tab or section pill */
.toggle { color: var(--gl-text-2); transition: background .2s, color .2s; }
.toggle[aria-checked="true"] { background: var(--gl-active); border-color: var(--gl-chip-edge); color: var(--foreground); box-shadow: var(--gl-lift); font-weight: 600; }
.dark .toggle[aria-checked="true"] { border-color: rgb(255 255 255 / .22); }

/* Tables: translucent header band, hairlines; sticky cells get an opaque stand-in so rows never show through */
.table thead th { background: rgb(255 255 255 / .38); color: var(--muted-foreground); }
.dark .table thead th { background: rgb(255 255 255 / .04); }
.table th, .table td { border-block-end-color: var(--gl-line); }
.table tbody tr:hover td { background: rgb(255 255 255 / .45); }
.dark .table tbody tr:hover td { background: rgb(255 255 255 / .05); }
/* The sticky Actions column looks like the rest of the table. Only when the table really scrolls sideways
   (data-overflow, set by the shell) does it get an opaque stand-in and an edge, so rows never show through it. */
.table.wide th:last-child, .table.wide td:last-child { box-shadow: none; }
.table.wide td:last-child { background: transparent; }
.table.wide thead th:last-child { background: rgb(255 255 255 / .38); }
.dark .table.wide thead th:last-child { background: rgb(255 255 255 / .04); }
.table.wide tbody tr:hover td:last-child { background: rgb(255 255 255 / .45); }
.dark .table.wide tbody tr:hover td:last-child { background: rgb(255 255 255 / .05); }
.table-wrap[data-overflow] .table.wide th:last-child, .table-wrap[data-overflow] .table.wide td:last-child { background: var(--gl-solid); box-shadow: inset 1px 0 0 var(--border); }
.table-wrap[data-overflow] .table.wide tbody tr:hover td:last-child { background: color-mix(in oklab, var(--gl-solid) 70%, #fff); }
.dark .table-wrap[data-overflow] .table.wide tbody tr:hover td:last-child { background: color-mix(in oklab, var(--gl-solid) 90%, #fff); }

/* Icon actions all look alike everywhere (tables, cards, lists); delete turns red only on hover or focus */
.btn-danger-ghost.btn-icon, .table .btn-danger-ghost { --btn-bg: transparent; }
.btn-danger-ghost.btn-icon:hover, .btn-danger-ghost.btn-icon:focus-visible,
.table .btn-danger-ghost:hover, .table .btn-danger-ghost:focus-visible { --btn-bg: color-mix(in oklab, var(--destructive) 12%, transparent); }

/* Status pills */
.status { height: 24px; padding-inline: 10px; font-weight: 550; }

/* Avatars read on glass */
.avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .7); }
.dark .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .12); }

/* Dialogs, menus and toasts: near-opaque frosted sheets over a blurred page */
dialog.dialog, .toast { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border: 1px solid var(--border); }
dialog.dialog { border-radius: var(--gl-r); }

/* Every window (create, edit, details) slides in from the side as a drawer:
   1/3 of the screen for forms and short content, 2/3 for large content (size: 'lg', wide tables).
   Only short confirmations (alerts) stay small in the middle. */
dialog.dialog:not(.alert) {
  --gl-from: 100%;
  position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0;
  width: max(33.333vw, 440px); max-width: 100vw; height: 100dvh; max-height: none;
  border: 0; border-inline-start: 1px solid var(--border); border-radius: 0;   /* straight edge, no rounded corners */
  box-shadow: 0 0 64px -16px rgb(16 24 40 / .4);
}
[dir="rtl"] dialog.dialog:not(.alert) { --gl-from: -100%; }
dialog.dialog.dialog-lg:not(.alert), dialog.dialog.asg-wide:not(.alert) { width: max(66.666vw, 640px); }
dialog.dialog:not(.alert)[open] { animation: gl-drawer-in .36s cubic-bezier(.2, .7, .2, 1); }
dialog.dialog:not(.alert) .dialog-body { flex: 1; min-height: 0; }
dialog.dialog:not(.alert) .dialog-head { padding: 24px 24px 18px; }
dialog.dialog:not(.alert) .h-dialog { font-size: 22px; font-weight: 450; letter-spacing: -.01em; }
dialog.dialog:not(.alert) .dialog-foot { margin-block-start: auto; }
@keyframes gl-drawer-in { from { transform: translateX(var(--gl-from)); } }
.dark dialog.dialog:not(.alert) { box-shadow: 0 0 0 1px var(--border), 0 0 64px -16px rgb(0 0 0 / .7); }
@media (max-width: 760px) {
  dialog.dialog:not(.alert), dialog.dialog.dialog-lg:not(.alert), dialog.dialog.asg-wide:not(.alert) { width: 100vw; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { dialog.dialog:not(.alert)[open] { animation: none; } }
dialog.dialog::backdrop, .motion-backdrop { background: rgb(11 19 36 / .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---------- Home (admin) ---------- */
.gl-home { display: grid; gap: 52px; }   /* clear air between the sections: banner, My dashboard, Announcements */
.gl-home .gl-greet { margin-block-end: -24px; }   /* the greeting stays close to the banner */
.gl-home .home-section { gap: 16px; }
.gl-greet { margin: 0; padding-block-start: 24px; }
.home-title.greet { display: block; font-size: 50px; line-height: 1.14; }
:lang(ar) .home-title.greet { font-size: 44px; line-height: 1.35; }
.home-title.greet .home-hello { display: block; margin-block-end: 4px; color: var(--muted-foreground); font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: 0; }
.home-title.greet .home-name { display: block; font-size: inherit; font-weight: 300; line-height: inherit; }
.kpi-strip { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-block-start: 18px; }
.kpi-inline { display: flex; align-items: center; gap: 10px; }
.kpi-inline .sq {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); color: var(--link); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
.kpi-inline b { display: block; font-size: 20px; line-height: 1.1; font-weight: 300; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-inline span:not(.sq) { font-size: 12.5px; color: var(--muted-foreground); }

.gl-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.gl-hero { min-width: 0; }
.gl-hero .home-hero { height: 100%; position: relative; }
.gl-home .home-slide { min-height: 340px; height: 100%; border-radius: var(--gl-r); }
.gl-home .home-slide-text { max-width: 54%; padding: 32px 32px 72px; gap: 12px; }
.gl-home .home-slide-title { font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; }
:lang(ar) .gl-home .home-slide-title { letter-spacing: 0; line-height: 1.45; }
.gl-home .home-slide-sub { font-size: 14px; opacity: .88; }
.gl-home .home-slide-tag { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gl-home .home-hero .home-nav {
  position: absolute; inset-inline-start: 32px; inset-block-end: 20px; z-index: 2; justify-content: flex-start;
}
.gl-home .home-hero .home-nav .btn { width: 32px; height: 32px; min-height: 0; background: rgb(255 255 255 / .18); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gl-home .home-hero .home-nav .btn:hover { background: rgb(255 255 255 / .34); }
.gl-home .home-hero .home-dot-btn span { background: rgb(255 255 255 / .45); }
.gl-home .home-hero .home-dot-btn[aria-current="true"] span { background: #fff; }

/* Banner track: the slides sit side by side and the track slides */
.home-slides { overflow: hidden; border-radius: var(--gl-r); min-width: 0; }
.home-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.home-track > .home-slide { flex: 0 0 100%; min-width: 0; }
/* The photo slides in first; then the text on it fades up one line at a time: tag, title, description, action */
.home-slide .home-slide-text > * { opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease; }
.home-slide.is-current .home-slide-text > * { opacity: 1; transform: none; transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.home-slide.is-current .home-slide-text > :nth-child(1) { transition-delay: .45s; }
.home-slide.is-current .home-slide-text > :nth-child(2) { transition-delay: .58s; }
.home-slide.is-current .home-slide-text > :nth-child(3) { transition-delay: .71s; }
.home-slide.is-current .home-slide-text > :nth-child(4) { transition-delay: .84s; }
@media (prefers-reduced-motion: reduce) { .home-track { transition: none; } .home-slide .home-slide-text > *, .home-slide.is-current .home-slide-text > * { transition: none; } }
.gl-hero .home-slides { height: 100%; }
/* Photos fill the banner, with a navy wash behind the text */
.home-slide.has-img .home-media-img { inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; opacity: 1; }
.home-slide.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(7 38 86 / .9) 0%, rgb(7 38 86 / .6) 45%, rgb(7 38 86 / .05) 100%);
}
[dir="rtl"] .home-slide.has-img::before { background: linear-gradient(270deg, rgb(7 38 86 / .9) 0%, rgb(7 38 86 / .6) 45%, rgb(7 38 86 / .05) 100%); }
.home-slide.has-img .home-slide-text { z-index: 2; }
.home-slide.has-img .home-slide-title { text-shadow: 0 1px 3px rgb(0 0 0 / .25); }
/* News photos */
.home-card-art .home-media-img { width: 100%; height: 100%; object-fit: cover; }

/* Today: the blue card with a glass sheen */
.gl-home .home-date {
  position: relative; overflow: hidden; color: #fff; border: 1px solid rgb(255 255 255 / .35); box-shadow: var(--gl-shadow);
  background: linear-gradient(150deg, rgb(86 145 224 / .92), rgb(14 91 188 / .94) 55%, rgb(8 63 134 / .96));
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
}
.dark .gl-home .home-date { background: linear-gradient(150deg, #1D5FB8 0%, #134B98 50%, #0C3770 100%); border-color: rgb(255 255 255 / .12); }
.gl-home .home-date::after {
  content: ""; position: absolute; inset-inline-end: -60px; inset-block-end: -80px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgb(255 255 255 / .25); box-shadow: 0 0 0 28px rgb(255 255 255 / .04), 0 0 0 56px rgb(255 255 255 / .03);
}
.gl-home .home-day, .gl-home .home-fulldate { color: rgb(255 255 255 / .85); }
.gl-home .home-clock { color: #fff; margin-block: 6px; }
.gl-home .home-hm { font-size: 52px; font-weight: 300; letter-spacing: -.03em; }
.gl-home .home-sec { color: rgb(255 255 255 / .85); font-weight: 500; }
.gl-home .home-date-foot { margin-block-start: auto; padding-block-start: 14px; position: relative; z-index: 1; }
.gl-home .home-weather { background: rgb(255 255 255 / .14); border-color: transparent; color: #fff; }
.gl-home .home-weather b { color: #fff; }
.gl-home .home-weather .icon { color: #FFC24B; }
.gl-home .home-segs { background: rgb(255 255 255 / .14); }
.gl-home .home-seg { color: rgb(255 255 255 / .85); }
.gl-home .home-seg:hover { color: #fff; }
.gl-home .home-seg[aria-checked="true"] { background: #fff; color: #0A4C9F; }
.gl-home .home-date :focus-visible { outline-color: #fff; }

.gl-home .home-h2 { font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.gl-home .home-dash { gap: 16px; }
.gl-home .home-tile { padding: 22px; }
.gl-home .home-big b, .gl-home .home-fyareq-total b { font-weight: 300; }
.gl-home .home-news { gap: 16px; }
.gl-home .home-card { padding: 0; }
.gl-home .home-card-art { height: 200px; border-radius: var(--gl-r); overflow: hidden; }

/* ---------- Charts (the option's style: light figures, tick strips, thick round bars, soft pills) ---------- */
.gl-dash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; }
.gl-chart-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; }
.gl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-block-end: 18px; }
.gl-card-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 550; }
.gl-card-sub { margin: 4px 0 0; color: var(--gl-text-2); font-size: 14px; }
.gl-figure { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.gl-figure b { font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gl-figure span { font-size: 17px; color: var(--gl-text-2); }
.gl-ticks { display: flex; align-items: stretch; gap: 4px; height: 62px; margin-block: 22px 14px; }
.gl-ticks i { flex: 1; min-width: 0; border-radius: 6px; background: rgb(255 255 255 / .75); }
.gl-ticks i.on, .gl-ticks i.pending { background: var(--primary); }
.gl-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gl-hint { color: var(--gl-text-2); font-size: 14px; }
.gl-hint b { color: var(--foreground); font-weight: 600; }
.gl-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.gl-pill.ok { background: #E3EDFB; color: var(--link); }
.gl-pill.ok::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--primary); }
/* One chart palette everywhere: positive / main = brand blue (approved, happy, available days),
   waiting / neutral = amber, negative = red */
.gl-ticks i.pending, .gl-legend i.pending, .gl-counts i.pending { background: #F2B53A; }
.gl-ticks i.approved, .gl-legend i.approved, .gl-counts i.approved { background: var(--primary); }
.gl-ticks i.rejected, .gl-legend i.rejected, .gl-counts i.rejected { background: #E0675F; }
.gl-legend, .gl-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--gl-text-2); }
.gl-legend li, .gl-counts li { display: inline-flex; align-items: center; gap: 7px; }
.gl-legend i, .gl-counts i { width: 8px; height: 8px; border-radius: 99px; }
.gl-counts b { color: var(--foreground); font-weight: 600; }
.gl-fya-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
/* Rule: every chart sits in its own inner container inside the card (a frosted box). */
/* Same box as the "Downloads by platform" cards: frosted surface, glass edge, the system's large radius, no shadow */
.gl-chart-box, .pf-chart-frame, .pf-donut-row, .pf-hbars, .pf-courses, .dash-chart, .gl-dist-list li {
  min-width: 0; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: none;
}
.gl-leave .gl-chart-box { flex: 1; display: flex; flex-direction: column; }
.gl-leave .gl-chart-foot { margin-block-start: auto; }
.gl-dist .gl-chart-box { margin-block-end: 16px; }
/* "Most given" pill takes the series colour (blue for happy) */
section:has(.gl-dist) .card-head .status-info { background: #E3EDFB; color: var(--link); }
.dark section:has(.gl-dist) .card-head .status-info { background: rgb(46 111 208 / .2); }
.gl-dist .gl-chart-box .gl-ticks { margin-block-end: 0; }
.gl-chart-box > .gl-ticks:last-child { margin-block-end: 0; }
.gl-fya-status .gl-ticks { margin-block: 18px 14px; }
/* The two dashboard cards end the same distance from their content: the FYA body fills its card like the leave box */
.gl-fya .gl-fya-body { flex: 1; }
.gl-fya-areas .gl-sub-label { margin-block-start: 0; }
.gl-sub-label { margin: 6px 0 16px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.gl-area + .gl-area { margin-block-start: 20px; }
.gl-area-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 10px; font-size: 14px; color: var(--gl-text-2); }
.gl-area-row b { color: var(--foreground); font-size: 24px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; }
.gl-meter { display: block; height: 14px; border-radius: 999px; background: rgb(255 255 255 / .75); overflow: hidden; }
.gl-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.dark .gl-ticks i:not([class]), .dark .gl-meter { background: rgb(255 255 255 / .1); }
.dark .gl-pill.ok { background: rgb(46 111 208 / .2); color: var(--link); }

/* Dashboard charts in the same style: thick round bars on a frosted track, a frosted donut track, light figures */
.dash-bar { height: 12px; background: rgb(255 255 255 / .75); }
.dark .dash-bar { background: rgb(255 255 255 / .1); }
.dash-donut-track { stroke: rgb(255 255 255 / .75); }
.dark .dash-donut-track { stroke: rgb(255 255 255 / .1); }
.dash-donut-center b { font-size: 36px; font-weight: 300; letter-spacing: -.02em; }

/* Feedbacks: satisfaction distribution in the same style */
.gl-dist .gl-ticks { height: 56px; margin-block: 20px 24px; }
.gl-dist-ticks i { background: var(--dash-c); }
.gl-dist-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gl-dist-list li { display: grid; gap: 10px; }
.gl-dist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--gl-text-2); font-size: 14px; }
.gl-dist-label { display: inline-flex; align-items: center; gap: 8px; }
.gl-dist-num { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.gl-dist-num b { font-size: 32px; line-height: 1; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gl-dist-num span { color: var(--muted-foreground); font-size: 14px; }
.gl-dist-list .gl-meter { height: 12px; }
.gl-dist-list .gl-meter > span { background: var(--dash-c); }
@media (max-width: 900px) { .gl-dist-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Design-system consistency (every page) ----------
   Labels: sentence case, muted, medium weight; never CAPITALS. Figures: large and light, in the text colour.
   Icon boxes: frosted circles with the link colour. */
.stat-label, .dash-summary dt, .dash-metric-label, .roles-pop-legend, .sys-pv-section, .asg-template-cap, .wf-caps {
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.dash-summary dd { font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.dash-total b { font-size: 32px; font-weight: 300; letter-spacing: -.02em; color: var(--foreground); }
.dash-pval, .dash-metric-value { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.dash-big { font-size: 34px; font-weight: 300; letter-spacing: -.02em; }
.dash-acc-fig b { font-weight: 400; color: var(--foreground); }
.dash-acc-rows .dash-acc-fig b { font-weight: 500; }
.dash-num, .dash-pair .dash-app { color: var(--foreground); }
.dash-ppct, .dash-devices dd { font-weight: 500; }
.dash-cl-icon, .stat-icon { background: rgb(255 255 255 / .85); color: var(--link); border: 1px solid #fff; }
.dark .dash-cl-icon, .dark .stat-icon { background: rgb(46 111 208 / .22); border-color: rgb(46 111 208 / .35); }
.dash-cluster, .dash-overview { background: rgb(255 255 255 / .38); border-color: rgb(255 255 255 / .75); border-radius: 18px; }
.dark .dash-cluster, .dark .dash-overview { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.dash-cl-head, .dash-fac { border-color: var(--gl-line); }

/* A series keeps its hue in dark mode (the third chart colour is teal in light mode, so it stays teal) */
:root[data-brand].dark { --chart-3: oklch(72% 0.12 183.9); }
/* Count pills in tables (e.g. Roles > assign): frosted like the other row actions in both modes */
.btn-pill-count { --btn-bg: rgb(255 255 255 / .6); --btn-fg: var(--link); }
.btn-pill-count:hover { --btn-bg: rgb(255 255 255 / .9); }
.dark .btn-pill-count { --btn-bg: rgb(255 255 255 / .06); }
.dark .btn-pill-count:hover { --btn-bg: rgb(255 255 255 / .12); }

/* Employee portal: list selection and analytics charts in the same style */
.svc-item[aria-current="true"] { background: var(--gl-select); color: var(--link); font-weight: 600; }
.svc-item[aria-current="true"] .svc-item-count { background: var(--primary); color: var(--primary-foreground); }
.svc-req.is-on { border-color: #fff; outline: 0; background: rgb(255 255 255 / .85); box-shadow: var(--gl-lift); }
.dark .svc-req.is-on { border-color: rgb(255 255 255 / .22); background: rgb(255 255 255 / .1); box-shadow: none; }
.pf-bar { width: min(100%, 22px); margin-inline: auto; border-radius: 999px; }
.pf-stack { width: min(100%, 22px); margin-inline: auto; border-radius: 999px; gap: 2px; }
.pf-stack > span { border-radius: 0; }   /* one capsule, straight joins between its parts */
.pf-bar-val { font-weight: 500; }
.pf-htrack { background: rgb(255 255 255 / .75); }
.dark .pf-htrack { background: rgb(255 255 255 / .1); }
.pf-donut-value { font-size: 24px; font-weight: 300; letter-spacing: -.02em; }
.pf-arc-track { stroke: rgb(255 255 255 / .75); }
.dark .pf-arc-track { stroke: rgb(255 255 255 / .1); }
.pf-grid span { border-color: var(--gl-line); }
.pf-donut.big .pf-donut-value { font-size: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .gl-top { grid-template-columns: minmax(0, 1fr) 280px; }
  .gl-home .home-slide-text { max-width: 64%; }
}
@media (max-width: 1100px) {
  .gl-top, .gl-dash { grid-template-columns: minmax(0, 1fr); }
  .top-time { display: none; }
}
@media (max-width: 1024px) {
  .app-header, .main, [dir="rtl"] .main { padding-inline: 20px; }
  .user-meta { display: none; }
  .user-chip { padding-inline-end: 8px; }
}
/* Phones: the rail becomes a floating bar at the bottom; a group's flyout opens above it */
@media (max-width: 760px) {
  .app.gl-app { padding-inline-start: 0; padding-block-end: 96px; }
  .rail {
    inset-block: auto 12px; inset-inline: 12px; width: auto; height: 64px; flex-direction: row; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 999px;
  }
  .rail-top, .rail-toggle { display: none; }
  .rail-links { flex-direction: row; margin: 0; flex: 1; justify-content: space-around; }
  .rail, .app[data-rail-open] .rail { width: auto; flex-direction: row; align-items: center; padding: 8px 10px; transition: none; }
  .rail-links, .app[data-rail-open] .rail-links { flex-direction: row; overflow: visible; }
  .rail-link, .app[data-rail-open] .rail-link { width: 46px; padding: 0; justify-content: center; }
  .rail-label, .rail-chev, .app[data-rail-open] .rail-label, .app[data-rail-open] .rail-chev, .app[data-rail-open] .rail-sub:not([hidden]) { display: none; }
  .rail-foot { display: flex; margin: 0; }
  .rail-foot { margin: 0; }
  .rail-tip { display: none; }
  .flyout { inset-inline: 12px; inset-block: auto 88px; top: auto; width: auto; }
  .app-header { padding: 14px 16px 0; gap: 10px; }
  .top-stats { gap: 12px; }
  .top-stat:nth-child(2) { display: none; }
  .header-pill .pill-text { display: none; }
  .header-pill { width: 40px; padding: 0; justify-content: center; }
  .main, [dir="rtl"] .main { padding: 4px 16px 32px; }
  .h-page { font-size: 32px; }
  :lang(ar) .h-page { font-size: 28px; }
  .home-title.greet { font-size: 36px; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-block-end: 16px; margin-block-end: -14px; }
  .subnav-name { display: none; }
  .gl-fya-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gl-ticks { height: 48px; gap: 3px; }
  .gl-home .home-slide-text { max-width: none; padding: 24px 20px 64px; }
  .gl-home .home-slide-title { font-size: 22px; }
  .gl-home .home-hero .home-nav { inset-inline-start: 20px; }
}