/* ===== tokens.css ===== */
/* ==========================================================================
   Headx Portal — Design Tokens
   Extracted from Figma: xkJGyvqTuKKTrOtt0YClJG / Page 1
   Reference frames: 24:581 (tenant Dashboard), 301:1226 (Platform Dashboard)
   Design width 1440 · sidebar 320 · topbar 76

   Note this is a DIFFERENT scale from the marketing site. The landing page runs
   a 70px display scale at 1920; the portal is an application UI at 1440 whose
   dominant body style is Poppins Regular 15/24. Do not import the landing
   page's tokens.css here — the names overlap but the values do not.
   ========================================================================== */

:root {
  /* ---- Type ----------------------------------------------------------- */
  /* Poppins carries the whole portal. Lato/Inter/SF Pro appear on a handful of
     stray layers in the Figma file; they are not part of the system and are
     deliberately folded into the Poppins stack rather than loaded. */
  --ff: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Measured type ramp, named by role rather than size so screens stay
     consistent when a value is nudged. */
  --fs-page: 30px;    --lh-page: 36px;    /* page title, big stat numerals   */
  --fs-stat: 25px;    --lh-stat: 24px;    /* secondary stat numerals         */
  --fs-h2: 20px;      --lh-h2: 20px;      /* card titles                     */
  --fs-h3: 16px;      --lh-h3: 20px;      /* sub-headings, nav items         */
  --fs-body: 15px;    --lh-body: 24px;    /* dominant body / table cells     */
  --fs-sm: 14px;      --lh-sm: 20px;
  --fs-xs: 13px;      --lh-xs: 20px;      /* table headers, meta             */
  --fs-2xs: 12px;     --lh-2xs: 18px;     /* badges, axis labels             */
  --fs-3xs: 10px;     --lh-3xs: 20px;     /* chart ticks, group labels       */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;           /* topbar greeting only — 24:781 is Poppins Bold */

  /* ---- Ink ------------------------------------------------------------ */
  --c-ink: #1c1c21;         /* primary text                                 */
  --c-ink-2: #101828;       /* headings                                     */
  --c-ink-3: #0d0d11;
  --c-ink-4: #0a0a0a;
  --c-muted: #636674;       /* secondary text, nav idle                     */
  --c-muted-2: #5d5f6b;
  --c-muted-3: #808290;
  --c-muted-4: #737582;
  --c-muted-5: #797c95;
  --c-on-brand: #ffffff;
  --c-ink-greet: #0a0c12;   /* topbar greeting — 24:781                     */
  --c-nav-admin: #393939;   /* admin rail idle label — 301:1265             */
  --c-nav-group: #63677e;   /* admin rail group heading — 301:1327          */
  --c-icon-muted: #6d6f7b;  /* topbar search glyph stroke — 24:586          */

  /* ---- Surfaces ------------------------------------------------------- */
  --s-app: #f4f6f6;         /* content background behind the cards          */
  --s-card: #ffffff;
  --s-side: #ffffff;
  --s-line: #d9d9d9;        /* borders, dividers, chart gridlines           */
  --s-line-soft: #eceef0;
  --s-hairline: #e5e5e5;    /* topbar underline + sidebar right edge.
                               Measured 24:589 (1441x1 rect at y=76) and the
                               1px stroke on the rail plate 24:587 / 301:1255. */

  /* ---- Brand / status ------------------------------------------------- */
  --c-green: #239b44;       /* primary brand green, active nav              */
  --c-green-deep: #10712a;
  --c-green-600: #128736;
  --c-green-700: #099630;
  --c-green-bright: #21bf46;
  --c-green-neon: #2de660;
  --c-blue: #1e7ac0;
  --c-blue-deep: #095d9e;
  --c-blue-bright: #0c87e2;
  --c-purple: #7a41d3;
  --c-red: #ff3336;
  --c-red-2: #e73b3b;
  --c-red-deep: #d41014;
  --c-pink: #db2754;
  --c-amber: #eba108;

  /* ---- Status tints (stat cards, pills) ------------------------------- */
  --t-green: #e2fce8;
  --t-red: #fff0f0;
  --t-purple: #f1e8ff;

  /* ---- Gradients ------------------------------------------------------ */
  --g-teal-blue: linear-gradient(135deg, #027d50 0%, #06608a 100%);
  --g-blue-green: linear-gradient(135deg, #0161ac 0%, #128832 100%);
  --g-blue-green-2: linear-gradient(135deg, #06608b 0%, #00883a 100%);
  --g-blue-green-3: linear-gradient(135deg, #036797 0%, #118637 100%);
  --g-nav-active: linear-gradient(90deg, #10712a 0%, #027d50 100%);
  /* Shell gradients, all read off the two reference frames. The tenant rail
     does NOT use a gradient pill: its active row is a flat --s-app plate with
     a 5px gradient bar down the left edge (24:592 + 24:593). The admin rail
     is the one with the gradient pill (301:1258). */
  --g-nav-accent: linear-gradient(180deg, #128832 0%, #0161ac 100%);
  --g-nav-active-admin: linear-gradient(71.04deg, #128832 3.2%, #0c4673 101.85%);
  --g-side-scroll: linear-gradient(180deg, #0161ac 0%, #128832 100%); /* 36:1915 */

  /* ---- Layout --------------------------------------------------------- */
  --design-w: 1440px;
  --side-w: 320px;
  --side-w-admin: 320px;    /* CORRECTED from 258px. Measured on 301:1226:
                               the rail plate 301:1255 is 324 wide (x -2..322)
                               and the content plate 301:1232 starts at x=322,
                               1120 wide — identical to the tenant frame. The
                               admin rail is NOT narrower; only its rows are
                               (44px, no dividers) versus the tenant's 50px.  */
  --topbar-h: 76px;
  --pad-x: 42px;            /* content gutter                              */
  --pad-y: 28px;
  --gap: 24px;              /* gap between cards                           */
  --gap-sm: 16px;

  /* ---- Radii ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --sh-card: 0 1px 3px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.03);
  --sh-pop: 0 8px 24px rgba(16, 24, 40, 0.10);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

/* The portal is a fixed 1440 desktop design. Below that the shell collapses the
   sidebar to a rail, then to an off-canvas drawer; the content grids reflow
   from 2-up to 1-up. Screens layer their own rules on top of these. */
@media (max-width: 1200px) {
  :root { --side-w: 260px; --side-w-admin: 260px; --pad-x: 28px; --gap: 20px; }
}

@media (max-width: 900px) {
  :root { --pad-x: 20px; --pad-y: 20px; --gap: 16px; }
}

@media (max-width: 640px) {
  :root {
    --fs-page: 24px; --lh-page: 30px;
    --fs-stat: 21px;
    --fs-h2: 18px;
    --pad-x: 16px;
  }
}

/* ==========================================================================
   Component layer additions
   Measured for css/components/*. Every value below carries the Figma node it
   was read from so it can be re-verified. Added here rather than inside a
   component file so screens can reference them directly.
   ========================================================================== */

:root {
  /* ---- Card / panel chrome -------------------------------------------- */
  --s-card-line: #e6e6e6;      /* card hairline           24:785, 27:1382   */
  --s-card-line-2: #d9e4ed;    /* profile panels          261:641, 251:470  */
  --r-card: 23px;              /* dashboard cards         24:785, 24:822    */
  --r-panel: 10px;             /* table + profile panels  27:1382, 261:641  */
  --r-panel-lg: 15px;          /* policies + banners      235:3026, 232:2211*/
  --r-2xs: 5px;                /* admin tiles + list rows 301:1330          */

  /* ---- Rules ----------------------------------------------------------- */
  --c-rule: rgba(0, 0, 0, 0.08);        /* table row rule      27:1419      */
  --c-rule-dash: rgba(50, 50, 50, 0.3); /* dashed row rule     24:616       */
  --c-grid: rgba(72, 74, 86, 0.7);      /* chart gridline      24:787       */

  /* ---- Status tints (badges, icon buttons) ---------------------------- */
  --t-pill-green: #ddffe6;     /* Active pill             27:1422 @60%      */
  --t-pill-red: #ffd7e1;       /* Inactive pill           27:1442 @50%      */
  --t-pill-amber: #fff4de;     /* key action              27:1430 @70%      */
  --t-pill-green-2: #c2f4d0;   /* Active pill (profile)   260:625 @50%      */
  --t-blue: #f4faff;           /* admin tile tint         301:1330          */
  --t-magenta: #fff4fe;        /* admin tile tint         301:1331          */
  --t-amber: #fffaf0;          /* amber tile tint (derived from #a17317)    */

  /* Soft hairlines for the tinted stat tiles — measured, not derived. */
  --t-line-purple: #9fc3ff;    /* 24:671 */
  --t-line-red: #ffadad;       /* 24:688 */
  --t-line-green: #6fe98b;     /* 24:705 */
  --t-line-blue: #a9d3f5;      /* same register as the three above          */
  --t-line-amber: #ecd39a;
  --t-line-magenta: #eab7e4;

  /* ---- Semantic status ink -------------------------------------------- */
  --c-excellent: #099630;      /* 24:623 */
  --c-good: #095d9e;           /* 24:624 */
  --c-average: #db2754;        /* 24:625 */
  --c-amber-ink: #a17317;      /* 27:1417 stroke, 88:714 accent            */
  --c-blue-accent: #4974be;    /* 88:642 accent border                     */
  --c-green-accent: #299f4a;   /* 88:695 accent border                     */
  --c-danger: #f31048;         /* Delete button           265:1039          */
  --c-toggle-on: #28a56e;      /* switch track            260:632           */

  /* ---- Form ------------------------------------------------------------ */
  --c-field-bg: #f5f6f9;       /* 261:753 */
  --c-field-line: #e0e4ea;     /* 261:753 */
  --c-label: #787878;          /* 261:749 */
  --c-placeholder: #5d5f6b;    /* 27:1600 */
  --c-stat-label: #545454;     /* 88:643, 301:1338 */
  --c-outline: #54575a;        /* outline button          265:1033          */

  /* ---- Soft list rows (Account & Security) ---------------------------- */
  --s-list: #f8fcfa;           /* 260:571 */
  --s-list-line: #b7d8c0;      /* 260:571 */
  --c-list-title: #111c32;     /* 260:572 */
  --c-list-meta: #576172;      /* 260:573 */

  /* ---- Gradients ------------------------------------------------------- */
  --g-btn: linear-gradient(90deg, #0092ba 0%, #428b0a 100%);      /* 235:3234 */
  --g-banner: linear-gradient(90deg, #035419 0%, #084972 100%);   /* 247:320, 232:2211 */
  --g-thead: linear-gradient(90deg, #0c5921 0%, #125587 100%);    /* 235:3028 */
  /* Same two stops, mirrored: the Status Dashboard head bar runs blue at the
     left to green at the right. 111:1955 is authored as a "to left" ramp with
     #0c5921 at 0% and #125587 at 101.79%; rewritten onto a 90deg axis that is
     #125587 at -1.79% and #0c5921 at 100%. 235:3028 draws the same bar. */
  --g-thead-rev: linear-gradient(90deg, #125587 -1.79%, #0c5921 100%);
  --c-thead: #08476e;                                             /* 232:2227 */

  /* ---- Component metrics ---------------------------------------------- */
  --h-control: 50px;           /* toolbar search / select / button 27:1599  */
  --h-btn: 42px;               /* standard button          235:3234         */
  --h-btn-sm: 36px;            /* chip button / dropdown   24:814           */
  --h-field: 52px;             /* form input               261:753          */
  --h-row: 52px;               /* table row                27:1418          */
  --h-row-head: 53px;          /* table header row         27:1383          */
  --card-pad: 28px;            /* card gutter              24:813           */
  --card-pad-top: 22px;        /* card head top            24:813           */
  --sh-pop-sm: 0 2px 8px rgba(16, 24, 40, 0.08);
}

/* ==========================================================================
   Media-table additions
   Measured on Recordings 167:1784. The Webcam (176:1568), Screenshot Gallery
   (186:73) and Audio (218:699) frames draw the same object, so these live here
   rather than in css/screens/recording.css.
   ========================================================================== */

:root {
  --r-info: 19px;              /* info banner              170:2344         */
  --r-thumb: 2px;              /* preview mask corner      174:233          */
  --s-panel-line: #f2f2f2;     /* media panel hairline     174:6            */
  --s-btn-line: #e5eaf2;       /* row action button edge   174:236          */
  --c-btn-glyph: #14213d;      /* row action glyph         174:237 / 174:239*/
  --c-ink-soft: #393939;       /* body copy on a panel     176:1566/171:2374*/

  /* The table head bar runs blue -> green here, the mirror image of the
     policies bar --g-thead reads off 235:3028. Both are in the file. */
  --g-thead-blue: linear-gradient(90deg, #125587 0%, #0c5921 100%); /* 174:8 */

  /* Row tint cycle. Each media row tints its three leading icon discs from one
     pair: the disc fill and the glyph ink. Fills read off the exported
     Ellipse 6732/6733 nodes, inks off the glyph strokes in the same rows. */
  --t-row-blue: #e7eefe;     --c-row-blue: #1761e4;    /* 174:211 / 267:1131 */
  --t-row-green: #e3fcea;    --c-row-green: #239b44;   /* 174:263            */
  --t-row-mint: #e8f9f2;     --c-row-mint: #34a66d;    /* 174:270 / 174:278  */
  --t-row-rose: #ffebf0;     --c-row-rose: #db2754;    /* 174:297            */
  --t-row-amber: #fff3dc;    --c-row-amber: #a17317;   /* 174:330            */
  --t-row-magenta: #fee7fc;  --c-row-magenta: #af11a2; /* 174:364            */
  --t-row-purple: #f7eeff;   --c-row-purple: #7a41d3;  /* 174:397            */
  --t-row-violet: #f1edfc;   --c-row-violet: #582df0;  /* 174:412            */
  --t-row-gold: #fff7e6;     --c-row-gold: #e9af39;    /* 174:430            */
  --t-row-teal: #e3f6f5;     --c-row-teal: #069c94;    /* 174:463            */
  --t-row-red: #ffefef;      --c-row-red: #d95e5e;     /* 174:742            */
  --t-row-lime: #ecffe4;     --c-row-lime: #33ac00;    /* 174:775            */
}

/* ==========================================================================
   Live-session layer
   Measured on the Remote Desktop frame (159:204). The streaming screens —
   Remote Desktop, Recording, Webcam, Audio — share one panel/ink vocabulary
   that is a full step cooler than the dashboard cards: a blue-grey hairline,
   a navy ink ramp and 10px meta type. Every value carries its node.
   ========================================================================== */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --s-panel-line: #e0e5f0;     /* panel hairline  166:732 167:823 167:839  */
  --s-plate: #ecf1fb;          /* tinted plate inside a panel   167:846    */
  --s-control: #f5f6f9;        /* quiet chip / button fill      167:1003   */
  --s-control-line: #eef0f4;   /* its hairline                  167:1003   */
  --s-meter-track: #f5f7fa;    /* usage bar track               167:853    */
  --s-gauge-track: #ecedf1;    /* gauge arc track               167:939    */
  --s-switch-off: #c8cdd8;     /* switch track, off             167:1068   */

  /* ---- Ink ------------------------------------------------------------- */
  --c-ink-session: #1a212e;    /* session strip + panel titles  167:826    */
  --c-ink-kv: #263045;         /* detail row label              167:847    */
  --c-ink-owner: #454e61;      /* owner caption                 167:845    */
  --c-ink-meta: #6b758a;       /* usage label                   167:851    */
  --c-ink-timer: #424c5f;      /* session timer                 167:827    */
  --c-ink-row: #4c4c4c;        /* device row text               167:769    */
  --c-ink-gauge: #1e1f1e;      /* gauge caption                 167:943    */

  /* ---- Status ---------------------------------------------------------- */
  --c-online: #1a9452;         /* "Connected" / "Online"        167:825    */
  --c-online-bright: #00ff46;  /* dot on a dark row + pill tint 167:762    */
  --c-blue-elec: #1f63eb;      /* CPU fill, hero disc, total    167:854    */
  --c-blue-action: #2469ee;    /* Disconnect button             167:986    */
  --c-green-meter: #25a362;    /* RAM fill                      167:907    */
  --c-green-gauge: #20a960;    /* online gauge                  167:945    */
  --c-red-gauge: #e2494c;      /* offline gauge                 167:953    */

  /* ---- Rules ----------------------------------------------------------- */
  --c-rule-soft: rgba(217, 217, 217, 0.5);  /* list row rule    167:780    */
  --c-rule-dot: rgba(161, 164, 181, 0.3);   /* 2-2 dashed rule  167:892    */
  --c-field-line-soft: rgba(188, 188, 188, 0.5); /* toolbar select 167:830 */

  /* ---- KPI tile gradients (160:674 / 683 / 692 / 700) ------------------ */
  /* All four are the same 56.3deg ramp with stops at 3% / 78.65%.          */
  --g-tile-blue:   linear-gradient(56.308deg, #0c89ea 2.996%, #01355d 78.654%);
  --g-tile-purple: linear-gradient(56.308deg, #7a41d3 2.996%, #3d0b8b 78.654%);
  --g-tile-green:  linear-gradient(56.308deg, #1fb849 2.996%, #00631b 78.654%);
  --g-tile-red:    linear-gradient(56.308deg, #ff255b 2.996%, #810020 78.654%);
  --g-row-active:  linear-gradient(106.383deg, #0d7229 3.037%, #07497b 81.669%); /* 167:746 */
}

/* ==========================================================================
   Installation screen additions (frame 125:2)
   Colours this frame introduces that the dashboard/admin frames never used.
   Read off the node fills and the exported line assets, not off the render.
   ========================================================================== */

:root {
  --c-gold: #d49615;           /* "Installed" KPI tile     130:580          */
  --c-teal: #009b82;           /* "Failed" KPI tile, donut arc + legend dot
                                  130:589 / 134:644 / 134:647              */
  --c-violet: #ac42ff;         /* donut "Installed" arc + dot   134:650/653 */
  --c-amber-bright: #ffb419;   /* donut "Pending" arc + dot     134:638/641 */

  --t-violet: #f5e9ff;         /* legend chip tint, Installed   134:650     */
  --t-amber-2: #ffeecb;        /* legend chip tint, Pending     134:638     */
  --t-teal: #dffffa;           /* legend chip tint, Failed      134:644     */

  --sh-chart-line: 0 4px 6px rgba(115, 71, 206, 0.23);
                               /* activity line drop shadow — read off the
                                  filter on 137:765 (dy 4, stdDeviation 3)   */

  /* Nothing else here needed a new name. The four values it would have been
     tempting to add all already exist, confirmed against the exported assets
     rather than against the render:
       chart gridline  137:732  #a1a4b5 @0.6, dash 2/2  = --c-grid-soft
       table row rule  138:794  #323232 @0.3, dash 3/3  = --c-rule-dash
       activity line   137:765  #7a41d3                 = --c-purple
       tooltip ink     138:783  #1b1f3a                 = --c-tip-ink        */
}

/* ==========================================================================
   Timesheet additions (79:243)
   Six values that genuinely are not in the set above. Each carries the node
   it was measured from. Nothing existing was changed.
   ========================================================================== */

:root {
  --c-blue-el: #0858e1;                 /* Total Hours icon disc     88:670  */
  --c-task-amber: #f4b22e;              /* "Completed" task colour   107:1210*/
  --c-tip-ink: #1b1f3a;                 /* chart tooltip value ink   107:1288*/
  --c-grid-soft: rgba(161, 164, 181, 0.6);   /* chart gridline       107:1259
                                           (#a1a4b5 @60%, dashed 2 2)        */
  --c-rule-dash-soft: rgba(50, 50, 50, 0.2); /* soft dashed row rule 107:1214
                                           (#323232 @20%, dashed 3 3)        */
  --g-btn-apply: linear-gradient(94.19deg, #1673bb 1.78%, #10712a 99.24%);
                                        /* "Apply" filter button     92:86   */
}

/* ==========================================================================
   Long-form guide additions
   Measured on Mass Deployment (143:1589). The portal has a second register
   besides the dashboard cards: a full-width document card carrying prose,
   callouts and code. These four values are the only ones that register needs
   which were not already here.
   ========================================================================== */

:root {
  --c-green-note: #0d852e;              /* callout accent ink  151:25, 151:87 */
  /* 151:13 fills with #ecfdf0 and strokes #239b44, then drops the whole rect
     to 30% opacity. The composited values live here so the type sitting on
     top of the panel is not faded with it. */
  --t-note: rgba(236, 253, 240, 0.3);
  --t-note-line: rgba(35, 155, 68, 0.3);
  --s-panel-cool: #fbfdff;              /* cool panel          151:28, 151:173 */
  --r-doc: 20px;                        /* document card       143:1819       */
}

/* ==========================================================================
   Security Dashboard additions — measured on frame 231:552
   The security KPI tiles use their own, more saturated tint/ink pairing than
   the dashboard tiles already in the ramp, and the severity palette adds two
   blues and a magenta that had no name yet.
   ========================================================================== */

:root {
  /* ---- KPI tile tints (231:1425 / 1442 / 1459 / 1476) ------------------ */
  /* The purple tile reuses --t-purple (#f1e8ff) exactly; the other three are
     a step deeper than the dashboard's --t-green / --t-red / --t-amber. */
  --t-kpi-green: #ddffe7;      /* 231:1442 */
  --t-kpi-red: #ffe4eb;        /* 231:1459 */
  --t-kpi-amber: #fff2d9;      /* 231:1476 */

  /* ---- Deep numerals on those tiles ------------------------------------ */
  --c-purple-deep: #41128a;    /* 231:1434 "145", 231:1499 "Open"          */
  --c-green-forest: #086321;   /* 231:1451 "9335"                          */
  --c-crimson: #921735;        /* 231:1468 "12"                            */

  /* ---- Severity / status ink ------------------------------------------- */
  --c-magenta: #af11a2;        /* 231:1411 donut "Medium"                  */
  --c-blue-600: #066cb8;       /* 231:1512 "On Hold"                       */
  --c-blue-700: #0161ac;       /* 232:1647 risky-user dot                  */

  /* ---- Chart chrome ----------------------------------------------------- */
  --c-grid-2: #a1a4b5;         /* 231:1331 gridline stroke, drawn at 60%   */
  --s-track: #e1e1e1;          /* 231:1399 donut track, drawn at 30%       */
}

/* ==========================================================================
   Dashboard additions (24:581)
   Values the tenant Dashboard needs that the component layer did not already
   carry. Each one names the node it was measured from.
   ========================================================================== */

:root {
  /* Axis ink. The two charts on 24:581 use two different greys and neither is
     --c-muted-4: the bar chart's y-axis is near-black at 80%, its x-axis a
     warm grey at 80%. */
  --c-tick-y: #060606;         /* 24:812 y-axis labels, opacity .8          */
  --c-tick-x: #383838;         /* 24:806 x-axis labels, opacity .8          */

  /* The three charts on this frame do NOT share --c-grid; only the bar chart
     uses it. The other two draw their own gridline. */
  --c-grid-apps: rgba(50, 50, 50, 0.15);    /* 24:858  4/4 dash             */
  --c-grid-sites: rgba(161, 164, 181, 0.6); /* 24:899  2/2 dash             */

  --c-donut-track: #e1e1e1;    /* 24:825 attendance track ring              */
  --c-tip-value: #1b1f3a;      /* 24:928 line-chart tooltip value "700"     */

  /* The hero KPI tile's gradient is NOT --g-blue-green-2: it runs at 117.3deg
     and its first stop lands at 27.3%, so the teal corner reads much darker. */
  --g-stat-hero: linear-gradient(117.33deg, #06608b 27.34%, #00883a 100%); /* 24:654 */

  /* Top Application Usage bars — same pair as --g-teal-blue but painted along
     the bar (90deg), and needed as separate stops for the SVG gradient. */
  --c-bar-a: #027d50;          /* 24:877 fill stop 0                        */
  --c-bar-b: #06608a;          /* 24:877 fill stop 1                        */

  --sh-tip: 0 0 4px 3px rgba(0, 0, 0, 0.04);  /* 24:861, 24:920 tooltip     */
}

/* ==========================================================================
   Activity Monitoring additions — frame 38:2322
   Values that genuinely are not already in this file. Every one carries the
   node it was measured from.
   ========================================================================== */

:root {
  /* ---- KPI tile tints + full-accent edges ----------------------------- */
  /* These tiles are a different register from the dashboard's pastel tiles:
     a near-white tint with a FULL-strength 1px accent border. */
  --t-kpi-green: #ecfdf0;      /* 43:131 */
  --t-kpi-blue: #f2f9ff;       /* 43:160 */
  --t-kpi-red: #ffedf2;        /* 43:183 */
  --t-kpi-purple: #f5f0ff;     /* 43:190 */
  --c-kpi-bar-green: #4e995e;  /* 43:134 — muted next to --c-green         */
  --c-purple-edge: #874bff;    /* 43:190 border                            */
  --c-purple-bar: #6d2feb;     /* 43:193 bar + 43:194 sparkline            */

  /* ---- Chart series ---------------------------------------------------- */
  --c-series-active: #7347ce;  /* 78:146 grouped bar / 79:171 legend swatch.
                                  Distinct from --c-purple (#7a41d3).      */

  /* ---- Plot chrome ----------------------------------------------------- */
  --c-grid-2: rgba(161, 164, 181, 0.6);  /* 47:411 #a1a4b5 @60%, 2/2 dash.
                                            Lighter than --c-grid.         */

  /* ---- Static chart callout -------------------------------------------- */
  --c-tip-label: #646679;                /* 86:638 */
  --c-tip-value: #1b1f3a;                /* 86:639 */
  --sh-tip: 0 0 4px 3px rgba(0, 0, 0, 0.04);  /* 86:636 */
}

/* ==========================================================================
   Media-screen additions (Webcam 176:1568)
   One value the media screens draw with that no earlier frame named. It is
   measured, not derived, and it recurs outside Webcam.
   ========================================================================== */

:root {
  /* The hairline on the Webcam feed panel (185:3), the camera select (185:13),
     the divider 185:26 and the full-screen button 185:27 is #e0e5f0 — the same
     stroke the live-session layer above already names --s-panel-line
     (166:732 / 167:823 / 167:839) and Audio repeats on 221:1596. No new token:
     Webcam uses --s-panel-line. */

  /* The slate the media pager is drawn in: 1px border on 185:40 / 185:43, the
     chevron strokes 185:41 / 185:44 and the ink of the "1 of 12" label 185:46. */
  --c-ctl-ink: #555c6d;
}

/* ==========================================================================
   Clipboard additions (213:132)
   Three values that genuinely are not in the set above. Each carries the node
   it was measured from. Nothing existing was changed.
   ========================================================================== */

:root {
  --c-chevron: #828282;        /* toolbar select chevron stroke   213:381    */
  --c-pager-line: #e5eaf2;     /* pager button hairline           218:687    */
  --c-icon-pale: #a7b8cd;      /* empty-state figure + pager arrows
                                  218:649 fill, 218:694 stroke               */
}

/* ==========================================================================
   Reports & Analytics additions — frame 232:1699
   The ranked-bar register. Every row of Top Applications / Top Websites is
   one 12px pill whose TWO-STOP gradient carries the value: the accent holds
   solid to the first stop and has faded to --c-bar-tail by the second. The
   accents below are the five hues that frame introduces and no earlier one
   used; --c-pink, --c-green, --c-amber-ink and --c-magenta cover the rest.
   ========================================================================== */

:root {
  --c-bar-violet: #8a1fc3;     /* 232:2261 LockApp.exe                       */
  --c-bar-sky: #2facf2;        /* 232:2319 Chrome.exe                        */
  --c-bar-gold: #e9af39;       /* 232:2342 PickerHost.exe                    */
  --c-bar-cyan: #0192b8;       /* 232:2391 headx.in/remote                   */
  --c-bar-grass: #33ac00;      /* 232:2438 headx.in/superadmin/streaming     */
  --c-bar-tail: #f5f4f9;       /* the fade-out stop, shared by all ten bars  */

  --c-url: #696969;            /* URL caption beside the domain    232:2444  */

  /* The "Total time" / "Visit count" chip. NOT --g-btn: it runs green→blue,
     the opposite of the primary button's cyan→green. 232:2348 / 232:2379 */
  --g-chip-report: linear-gradient(90deg, #118638 0%, #1e7ac0 100%);

  /* Overview banner. Same two stops as --g-banner but drawn on a 71.9° axis
     with inset stops, so the green corner covers far more of the plate and
     the transition reads diagonal rather than horizontal. 232:2211 */
  --g-banner-diag: linear-gradient(71.919deg, #035419 29.54%, #084972 83.665%);

  /* "Other Reports" tiles — tint / edge / icon-plate ramp, one set per tile.
     The blue tint is --t-blue exactly; the other two are new. */
  --c-report-blue: #436fad;    /* 233:2463 border                            */
  --g-report-blue: linear-gradient(180deg, #204079 0%, #1e7ac0 100%);  /* 234:2507 */
  --t-report-green: #ecfff1;   /* 234:2538 fill                              */
  --c-report-green: #49895b;   /* 234:2538 border                            */
  --g-report-green: linear-gradient(180deg, #239b44 0%, #023610 100%); /* 234:2541 */
  --t-report-purple: #f6efff;  /* 234:2550 fill                              */
  --c-report-purple: #683cae;  /* 234:2550 border                            */
  --g-report-purple: linear-gradient(180deg, #7a41d3 0%, #290562 100%);/* 234:2553 */
}

/* ==========================================================================
   Screenshot Gallery additions (186:73)
   Two values the frame needs that no earlier pass had a use for.
   ========================================================================== */

:root {
  /* Figma reports these text layers as literal black, a shade below --c-ink.
     196:376 / 197:401 / 197:426 field labels, 199:429, 209:40, 209:45,
     209:49, 210:78 pills, 210:96 and 210:98 in the empty state. */
  --c-ink-0: #000000;

  /* The green -> blue action button. Distinct from --g-btn, which is the
     same pair running the other way (blue -> green, 189:342 / 235:3234).
     Measured on 210:90 "Apply Filters" and 210:101 "Select an Employee". */
  --g-cta: linear-gradient(90deg, #118638 0%, #1e7ac0 100%);
}

/* ==========================================================================
   My Profile additions — frame 246:2
   The hero banner ink ramp and the eight tint/ink pairs the Personal
   Information discs are drawn from. Every value carries the node it was
   measured from. Nothing existing was changed.
   ========================================================================== */

:root {
  /* --g-banner already names the two stops of 247:320, but it runs them at
     90deg from 0% to 100%. This frame paints the SAME pair at 75.07deg with
     stops at 29.54% / 83.665%, which pushes the green corner far left and
     leaves the whole right third flat blue. */
  --g-profile-hero: linear-gradient(75.073deg, #035419 29.54%, #084972 83.665%);

  --c-hero-meta: #c3c3c3;      /* 248:361 "UI/UX Developer"                  */
  --c-hero-mail: #cdced7;      /* 247:351 email line                         */
  --c-hero-stat: #edefff;      /* 247:341 + 247:342 completion caption       */
  --c-hero-bar: #04d03c;       /* 247:340 completion fill                    */
  --t-hero-track: rgba(255, 255, 255, 0.1);    /* 247:339 track (white @10%) */
  --t-hero-chip: rgba(255, 255, 255, 0.1);     /* 255:564 Edit chip          */
  --t-hero-tag: rgba(217, 217, 217, 0.13);     /* 248:358 "Design Team"      */
  --t-hero-tag-line: rgba(255, 255, 255, 0.14);/* 248:358 0.5px stroke       */

  /* Personal Information — disc fill / glyph stroke, one pair per fact.
     Discs 252:486, 253:495, 253:507, 253:516, 253:526, 253:535, 253:545,
     253:554; glyphs 252:487, 253:496, 253:508, 253:517, 253:527, 253:536,
     253:546, 253:555. --t-fld-magenta is the same value as --t-row-magenta
     but its glyph ink is not, so the pair is kept whole here. */
  --t-fld-indigo:  #f6f4fd;  --c-fld-indigo:  #4736f1;  /* Full name        */
  --t-fld-amber:   #fff9ed;  --c-fld-amber:   #a17317;  /* Department       */
  --t-fld-green:   #f3faf7;  --c-fld-green:   #239b44;  /* Email Address    */
  --t-fld-teal:    #ddfafb;  --c-fld-teal:    #37b1b5;  /* Designation      */
  --t-fld-rose:    #fef4f8;  --c-fld-rose:    #db2754;  /* Phone Number     */
  --t-fld-magenta: #fee7fc;  --c-fld-magenta: #bc17c2;  /* Employee ID      */
  --t-fld-blue:    #f0f7fe;  --c-fld-blue:    #1e7ac0;  /* Date of Birt     */
  --t-fld-violet:  #e7e7f9;  --c-fld-violet:  #8484d7;  /* Join date        */
}

/* ==========================================================================
   Working Hours additions (235:5572)
   Six values the frame needs that no earlier pass had a name for. Each one
   carries the node it was measured from. Nothing existing was changed.
   ========================================================================== */

:root {
  --t-info-cool: #f8fcff;      /* info banner fill          235:6039        */
  --r-info-lg: 17px;           /* info banner corner        235:6039        */
  --c-ink-note: #5f6264;       /* banner copy 235:6042 + its glyph 235:6044.
                                  Already hard-coded once in card.css for
                                  .card__text (265:1026); same ink.         */
  --c-chip-line: #8dafc9;      /* day chip 0.5px edge       236:6105        */
  --c-chip-ink: #114369;       /* day chip label 236:6106 + tick 236:6120   */
  --c-clock-glyph: #bfc5ce;    /* time-field clock glyph    235:6095        */
}

/* ==========================================================================
   Policies Configuration additions - frame 234:2558
   Three values this frame draws with that the earlier passes did not name.
   Each carries the node it was measured from; nothing existing was changed.
   ========================================================================== */

:root {
  /* The link/assign glyph in the policies row actions is a brighter gold than
     --c-amber-ink (#a17317, read off 27:1430). Measured on 235:3246. */
  --c-amber-link: #c08104;

  /* This frame's row-action tint and Yes pill are one step deeper than the
     employee-table pair already in the ramp (--t-pill-green #ddffe6 @60%,
     --t-pill-green-2 #c2f4d0 @50%). Composited over the white card they read
     rgb(228,255,235) and rgb(224,249,231) in the 1440 render. */
  --t-ib-green-2: rgba(210, 255, 222, 0.6);   /* 235:3244 rect fill @60%    */
  --t-pill-yes: rgba(194, 244, 208, 0.5);     /* 235:3257 rect fill @50%    */
}

/* ==========================================================================
   Status Dashboard additions - frame 110:1314
   The agent-count strip reuses --t-kpi-green / --t-kpi-blue / --t-kpi-red /
   --t-kpi-purple for four of its five pills. Only the amber pair below is
   genuinely new; both were sampled off 111:1824, whose fill and 1px stroke
   the frame flattens into one image.
   ========================================================================== */

:root {
  --c-amber-deep: #dba61f;     /* "Inactive" pill stroke + disc  111:1824    */
  --t-amber-deep: #fff5db;     /* "Inactive" pill fill           111:1824    */
}

/* ===== base.css ===== */
/* ==========================================================================
   Headx Portal — Reset + element defaults
   Everything here is unscoped and applies to every screen, so keep it to
   genuine primitives. Anything screen-specific belongs in css/screens/,
   anything reused belongs in css/components/.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--s-app);
  color: var(--c-ink);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: var(--fw-medium); }

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   App shell frame
   The sidebar is fixed and the topbar sticks to the top of the scrolling
   content, matching the Figma frames where the rail runs full height.
   -------------------------------------------------------------------------- */

.app {
  min-height: 100vh;
  padding-left: var(--side-w);
}

.app[data-shell="admin"] { padding-left: var(--side-w-admin); }

.app__main {
  padding: var(--pad-y) var(--pad-x) 56px;
  max-width: calc(var(--design-w) - var(--side-w));
}

.page-title {
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
  margin-bottom: var(--gap);
}

@media (max-width: 900px) {
  .app,
  .app[data-shell="admin"] { padding-left: 0; }
}

/* ===== shell.css ===== */
/* ==========================================================================
   Headx Portal — App shell (sidebar rails + topbar)

   Everything here is scoped under .side or .topbar. Both rails are measured
   off the two reference frames:

     tenant  24:581   rail plate 24:587   324x1270, #fff, 1px #e5e5e5 stroke
     admin   301:1226 rail plate 301:1255 324x1836, #fff, 1px #e5e5e5 stroke

   The two rails are the SAME width (see --side-w-admin in tokens.css); what
   differs is the row rhythm and the active treatment:

     tenant  50px pitch (49 row + 1px #d9d9d9 divider), active row is a flat
             #f4f6f6 plate (r10) with a 5px gradient bar down its left edge
     admin   44px rows, no dividers, grouped under 13px uppercase headings,
             active row is the blue/green gradient pill with white text

   build.py owns the markup inside <!--NAV-->; this file only styles the
   classes it emits: .side__list, .side__link, .side__icon[data-icon],
   .side__group, .is-todo, and [aria-current="page"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rail frame
   -------------------------------------------------------------------------- */

.side {
  /* Row metrics live as custom properties so the narrow breakpoints can
     tighten them without touching a single rule below. */
  --nav-inset: 28px;   /* left edge of the rows      — 24:592 x=28          */
  --nav-gutter: 30px;  /* gap from row to rail edge  — 28+262=290 of 320    */
  --nav-pad: 12px;     /* row padding before the icon — icon box lands at 40 */
  --nav-gap: 17px;     /* icon box to label          — label lands at 81    */

  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--side-w);
  background: var(--s-side);
  /* The hairline is an outset shadow rather than a border so the rail's usable
     width stays exactly --side-w and the line lands on x=320 like the Figma
     plate, instead of eating the rail's last pixel. */
  box-shadow: 1px 0 0 var(--s-hairline);
}

.side--admin {
  width: var(--side-w-admin);
  --nav-pad: 14px;
  --nav-gap: 15px;
}

/* Logo plate: 76px tall, hairline underneath, logo 120x50 at x=42 y=13. */
.side__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding-left: var(--pad-x);
  /* Same trick as the rail: the seam has to line up with the topbar's, and
     both sit at y=76 — 24:589 draws one unbroken 1441px rule under both. */
  box-shadow: 0 1px 0 var(--s-hairline);
}

.side__brand {
  display: block;
  border-radius: var(--r-xs);
}

.side__brand img {
  width: 120px;
  height: 50px;
  object-fit: contain;
}

/* The rail scrolls on its own so a 23-item list never drags the page with it.
   Thumb gradient measured off 36:1915 (7px wide, #0161ac -> #128832). */
.side__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 0 40px;
  scrollbar-width: thin;
  scrollbar-color: #128832 transparent;
}

.side--admin .side__nav { padding-top: 15px; }

.side__nav::-webkit-scrollbar { width: 7px; }
.side__nav::-webkit-scrollbar-track { background: transparent; }
.side__nav::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--g-side-scroll);
}

/* --------------------------------------------------------------------------
   Rows
   -------------------------------------------------------------------------- */

.side__list { padding-left: var(--nav-inset); }

.side__link {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin-right: var(--nav-gutter);
  padding: 0 8px 0 var(--nav-pad);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The glyph is a mask filled with currentColor, so one file serves the idle,
   hover and active states (green on the tenant rail, white on the admin one).
   The fallback MUST be a transparent image rather than `none`: `none` means
   "no mask at all", which would paint the whole 24px box solid. */
.side__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--side-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
          mask: var(--side-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
}

/* Rows the design draws without a glyph keep the empty 24px slot so their
   labels stay on the same left edge as the rest. */

.side__link.is-todo { cursor: default; }

/* ---- Tenant rail --------------------------------------------------------- */

.side--tenant .side__list > li { border-bottom: 1px solid var(--s-line); }
.side--tenant .side__list > li:last-child { border-bottom: 0; }

/* 49px row + 1px divider = a 50px pitch. The design's own steps run 47-53
   (every row is hand-placed) and average 50.45; 50 lands the first six rows
   within 1.5px and never drifts more than ~10px by Logout at the foot. 49
   also makes the active plate exactly the 49px of 24:592. */
.side--tenant .side__link {
  height: 49px;
  border-radius: 10px;
  color: var(--c-ink);
}

.side--tenant .side__link:not(.is-todo):not([aria-current]):hover {
  background: var(--s-line-soft);
}

.side--tenant .side__link[aria-current="page"] {
  position: relative;
  background: var(--s-app);
  color: var(--c-green-600);
  font-weight: var(--fw-medium);
}

/* 24:593 — 5px bar, r5, gradient running green at the top to blue at the foot. */
.side--tenant .side__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 5px;
  background: var(--g-nav-accent);
}

/* The design drops the divider under the active plate. */
.side--tenant .side__list > li.is-current,
.side--tenant .side__list > li:has(> [aria-current="page"]) {
  border-bottom-color: transparent;
}

/* ---- Admin rail ---------------------------------------------------------- */

/* Group crossings in the design span 83-86px from one label to the next
   (44 row + 18 + 20 label + 6). The first heading sits tight under the logo
   plate instead, 14px down with a 9px drop to the pill. */
.side__group {
  margin: 18px 0 6px;
  padding-left: calc(var(--nav-inset) + var(--nav-pad) + 1px);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  color: var(--c-nav-group);
  text-transform: uppercase;
}

.side__nav > .side__group:first-child { margin: 0 0 9px; }

/* 44px rows, no dividers. Measured steps run 40-48 and average 44.6. */
.side--admin .side__link {
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--c-nav-admin);
}

.side--admin .side__link:not(.is-todo):not([aria-current]):hover {
  background: var(--s-line-soft);
}

/* 301:1258 — 262x49 pill, r8, 71deg #128832 -> #0c4673, white Medium label. */
.side--admin .side__link[aria-current="page"] {
  background: var(--g-nav-active-admin);
  color: var(--c-on-brand);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Per-item glyphs

   Every mask below is an SVG exported from the node that draws that row in
   Figma; nothing here is hand-drawn. The rails are scoped separately because
   "announcements" and "logout" exist in both and are different nodes, and
   because several admin rows are drawn with no glyph at all.
   -------------------------------------------------------------------------- */

.side--tenant .side__icon[data-icon="dashboard"]              { --side-icon: url(../assets/icons/nav/dashboard.svg); }
.side--tenant .side__icon[data-icon="employees-monitoring"]   { --side-icon: url(../assets/icons/nav/employees-monitoring.svg); }
.side--tenant .side__icon[data-icon="activity-monitoring"]    { --side-icon: url(../assets/icons/nav/activity-monitoring.svg); }
.side--tenant .side__icon[data-icon="timesheet"]              { --side-icon: url(../assets/icons/nav/timesheet.svg); }
.side--tenant .side__icon[data-icon="status-dashboard"]       { --side-icon: url(../assets/icons/nav/status-dashboard.svg); }
.side--tenant .side__icon[data-icon="installation"]           { --side-icon: url(../assets/icons/nav/installation.svg); }
.side--tenant .side__icon[data-icon="download-agent"]         { --side-icon: url(../assets/icons/nav/download-agent.svg); }
.side--tenant .side__icon[data-icon="mass-deployment"]        { --side-icon: url(../assets/icons/nav/mass-deployment.svg); }
.side--tenant .side__icon[data-icon="activity-tracking"]      { --side-icon: url(../assets/icons/nav/activity-tracking.svg); }
.side--tenant .side__icon[data-icon="remote-desktop"]         { --side-icon: url(../assets/icons/nav/remote-desktop.svg); }
.side--tenant .side__icon[data-icon="recording"]              { --side-icon: url(../assets/icons/nav/recording.svg); }
.side--tenant .side__icon[data-icon="webcam"]                 { --side-icon: url(../assets/icons/nav/webcam.svg); }
.side--tenant .side__icon[data-icon="screenshot-gallery"]     { --side-icon: url(../assets/icons/nav/screenshot-gallery.svg); }
.side--tenant .side__icon[data-icon="clipboard"]              { --side-icon: url(../assets/icons/nav/clipboard.svg); }
.side--tenant .side__icon[data-icon="audio"]                  { --side-icon: url(../assets/icons/nav/audio.svg); }
.side--tenant .side__icon[data-icon="security-dashboard"]     { --side-icon: url(../assets/icons/nav/security-dashboard.svg); }
.side--tenant .side__icon[data-icon="reports-analytics"]      { --side-icon: url(../assets/icons/nav/reports-analytics.svg); }
.side--tenant .side__icon[data-icon="policies-configuration"] { --side-icon: url(../assets/icons/nav/policies-configuration.svg); }
.side--tenant .side__icon[data-icon="app-categories"]         { --side-icon: url(../assets/icons/nav/app-categories.svg); }
.side--tenant .side__icon[data-icon="announcements"]          { --side-icon: url(../assets/icons/nav/announcements.svg); }
.side--tenant .side__icon[data-icon="working-hours"]          { --side-icon: url(../assets/icons/nav/working-hours.svg); }
.side--tenant .side__icon[data-icon="my-profile"]             { --side-icon: url(../assets/icons/nav/my-profile.svg); }
.side--tenant .side__icon[data-icon="logout"]                 { --side-icon: url(../assets/icons/nav/logout.svg); }

/* build.py derives data-icon from the escaped label when a row has no slug,
   so the ampersand rows arrive as "revenue & growth" once the parser has
   decoded &amp;. */
.side--admin .side__icon[data-icon="admin-dashboard"]     { --side-icon: url(../assets/icons/nav/admin-dashboard.svg); }
.side--admin .side__icon[data-icon="pending-registrations"]{ --side-icon: url(../assets/icons/nav/pending-registrations.svg); }
.side--admin .side__icon[data-icon="companies"]           { --side-icon: url(../assets/icons/nav/companies.svg); }
.side--admin .side__icon[data-icon="agent-manager"]       { --side-icon: url(../assets/icons/nav/agent-manager.svg); }
.side--admin .side__icon[data-icon="reseller-management"] { --side-icon: url(../assets/icons/nav/reseller-management.svg); }
.side--admin .side__icon[data-icon="activity"]            { --side-icon: url(../assets/icons/nav/activity.svg); }
.side--admin .side__icon[data-icon="storage"]             { --side-icon: url(../assets/icons/nav/storage.svg); }
.side--admin .side__icon[data-icon="subscription-plans"]  { --side-icon: url(../assets/icons/nav/subscription-plans.svg); }
.side--admin .side__icon[data-icon="renewals-capacity"]   { --side-icon: url(../assets/icons/nav/renewals-capacity.svg); }
.side--admin .side__icon[data-icon="billing"]             { --side-icon: url(../assets/icons/nav/billing.svg); }
.side--admin .side__icon[data-icon="invoices"]            { --side-icon: url(../assets/icons/nav/invoices.svg); }
.side--admin .side__icon[data-icon="revenue-growth"]      { --side-icon: url(../assets/icons/nav/revenue-growth.svg); }
.side--admin .side__icon[data-icon="white-label"]         { --side-icon: url(../assets/icons/nav/white-label.svg); }
.side--admin .side__icon[data-icon="admins"]              { --side-icon: url(../assets/icons/nav/admins.svg); }
.side--admin .side__icon[data-icon="reseller-support"]    { --side-icon: url(../assets/icons/nav/reseller-support.svg); }
.side--admin .side__icon[data-icon="admin-announcements"] { --side-icon: url(../assets/icons/nav/announcements.svg); }
.side--admin .side__icon[data-icon="audit-logs"]          { --side-icon: url(../assets/icons/nav/audit-logs.svg); }
.side--admin .side__icon[data-icon="health"]              { --side-icon: url(../assets/icons/nav/health.svg); }
.side--admin .side__icon[data-icon="live-streaming"]      { --side-icon: url(../assets/icons/nav/live-streaming.svg); }
.side--admin .side__icon[data-icon="email-templates"]     { --side-icon: url(../assets/icons/nav/email-templates.svg); }
.side--admin .side__icon[data-icon="settings"]            { --side-icon: url(../assets/icons/nav/settings-nav.svg); }
.side--admin .side__icon[data-icon="logout"]              { --side-icon: url(../assets/icons/nav/logout-admin.svg); }

/* --------------------------------------------------------------------------
   Topbar
   Greeting 41px in, search 387x50 hard against the right cluster, then
   settings 35 / 16 / bell 35 / 13 / avatar 50 / 15 / identity — the 338px
   action group measured on 24:721, sitting 40px off the right edge.
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 40px 0 var(--pad-x);
  background: var(--s-card);
  box-shadow: 0 1px 0 var(--s-hairline);
}

/* The design has no page title in the bar — the screens draw their own 25px
   heading at (361,105). The title still needs a home for assistive tech, so
   it rides here hidden, and takes the greeting's place once the bar gets too
   narrow to carry both. */
.topbar__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.topbar__greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar__hello {
  font-size: var(--fs-h2);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--c-ink-greet);
  white-space: nowrap;
}

.topbar__wave {
  flex: 0 0 auto;
  width: 34px;
  height: 33px;
}

/* ---- Search -------------------------------------------------------------- */

.topbar__search {
  position: relative;
  flex: 0 1 387px;
  width: 387px;
  height: 50px;
  margin-left: auto;
}

.topbar__search-input {
  width: 100%;
  height: 100%;
  padding: 0 41px 0 15px;
  border: 0;
  border-radius: 10px;
  background: var(--s-app);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink);
  appearance: none;
}

.topbar__search-input::placeholder {
  color: var(--c-muted-2);
  font-weight: var(--fw-medium);
  opacity: 1;
}

.topbar__search-input::-webkit-search-cancel-button { appearance: none; }

.topbar__search-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
  background-color: var(--c-icon-muted);
  -webkit-mask: url(../assets/icons/nav/search.svg) center / contain no-repeat;
          mask: url(../assets/icons/nav/search.svg) center / contain no-repeat;
}

/* ---- Action cluster ------------------------------------------------------ */

.topbar__actions {
  display: flex;
  align-items: center;
  margin-left: 26px;
}

.topbar__icon-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--s-app);
  transition: background-color var(--dur) var(--ease);
}

.topbar__icon-btn:hover { background: var(--s-line-soft); }
.topbar__icon-btn + .topbar__icon-btn { margin-left: 16px; }

.topbar__icon {
  width: 22px;
  height: 22px;
  background-color: var(--c-ink);
  -webkit-mask: var(--side-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
          mask: var(--side-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
}

.topbar__icon--settings { --side-icon: url(../assets/icons/nav/settings.svg); }
.topbar__icon--bell     { --side-icon: url(../assets/icons/nav/bell.svg); }

/* ---- User ---------------------------------------------------------------- */

.topbar__user {
  position: relative;
  margin-left: 13px;
}

.topbar__user-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: var(--r-pill);
  text-align: left;
}

.topbar__avatar {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--s-line);
}

.topbar__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar__name {
  font-size: var(--fs-sm);
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.topbar__email {
  font-size: var(--fs-xs);
  line-height: 22px;
  font-weight: var(--fw-light);
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The design shows the identity block as a static label; the portal needs
   somewhere to hang profile actions, so it doubles as a menu trigger. */
.topbar__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--s-hairline);
  border-radius: var(--r-md);
  background: var(--s-card);
  box-shadow: var(--sh-pop);
}

.topbar__menu[hidden] { display: none; }

.topbar__menu-link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink);
}

.topbar__menu-link:hover { background: var(--s-app); }

/* --------------------------------------------------------------------------
   Burger + drawer close
   Neither control exists in the 1440 design, so both are drawn in CSS rather
   than with an invented glyph.
   -------------------------------------------------------------------------- */

.topbar__burger,
.side__close {
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}

.topbar__burger { margin: 0 12px 0 -8px; }

.topbar__burger:hover,
.side__close:hover { background: var(--s-app); }

.topbar__burger-bars,
.topbar__burger-bars::before,
.topbar__burger-bars::after,
.side__close-bars::before,
.side__close-bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
}

.topbar__burger-bars { position: relative; }
.topbar__burger-bars::before { position: absolute; top: -7px; left: 0; }
.topbar__burger-bars::after  { position: absolute; top: 7px;  left: 0; }

.side__close-bars { position: relative; width: 20px; height: 2px; }
.side__close-bars::before { position: absolute; inset: 0; transform: rotate(45deg); }
.side__close-bars::after  { position: absolute; inset: 0; transform: rotate(-45deg); }

.side__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(16, 24, 40, 0.45);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.side__scrim[hidden] { display: none; }
.side__scrim.is-open { opacity: 1; }

/* --------------------------------------------------------------------------
   Narrow widths
   -------------------------------------------------------------------------- */

/* Between 901 and 1200 the rail is 260 wide, so the row metrics tighten to
   keep the longest label ("Policies Configuration") on one line. */
@media (max-width: 1200px) {
  .side {
    --nav-inset: 16px;
    --nav-gutter: 10px;
    --nav-pad: 10px;
    --nav-gap: 12px;
  }
  .side--admin { --nav-pad: 10px; --nav-gap: 12px; }
  .topbar { padding-right: var(--pad-x); }
  .topbar__search { flex-basis: 300px; width: 300px; }
  .topbar__actions { margin-left: 20px; }
}

/* Below 900 the rail leaves the flow and becomes a drawer. */
@media (max-width: 900px) {
  .side {
    --nav-inset: 28px;
    --nav-gutter: 24px;
    --nav-pad: 12px;
    --nav-gap: 17px;
    width: min(320px, 86vw);
    transform: translateX(-100%);
    /* visibility flips only once the slide has finished, so the closed drawer
       is not a focus trap of its own and the open one still animates. */
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    box-shadow: 1px 0 0 var(--s-hairline), var(--sh-pop);
  }

  .side--admin { width: min(320px, 86vw); --nav-pad: 14px; --nav-gap: 15px; }

  .side.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }

  .side__head { padding-right: 12px; }
  .side__brand { margin-right: auto; }

  .topbar__burger,
  .side__close { display: grid; }

  .topbar__email { display: none; }
  .topbar__name { line-height: var(--lh-body); }
}

@media (max-width: 760px) {
  .topbar__greeting { display: none; }

  .topbar__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    font-size: var(--fs-h2);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
    color: var(--c-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar__search { flex: 0 1 240px; width: 240px; margin-left: 16px; }
  .topbar__actions { margin-left: 16px; }
  .topbar__identity { display: none; }
  .topbar__user-btn { gap: 0; }
}

@media (max-width: 560px) {
  .topbar__search { display: none; }
  .topbar__title { margin-right: auto; }
  .topbar__avatar { width: 38px; height: 38px; }
}

/* Belt and braces: above the drawer breakpoint the rail is always in the flow
   and the scrim can never be left behind by a stale open state. */
@media (min-width: 901px) {
  .side { transform: none; visibility: visible; }
  .side__scrim { display: none; }
}

/* No transform animation for people who asked for less motion — base.css
   already zeroes the durations, so the drawer simply appears. */

/* ===== components/admin.css ===== */
/* ==========================================================================
   Admin — patterns shared by the 20 super-admin screens

   The Figma file designs exactly one super-admin frame (the Platform
   Dashboard). Everything here is built from the vocabulary that frame and the
   22 tenant frames already establish: the same tokens, the same card, table,
   stat, badge and form components. Nothing invents a new visual language.

   Only genuinely repeated structure lives here. Anything used by one screen
   belongs in css/screens/<slug>.css.
   ========================================================================== */

/* -- page head ------------------------------------------------------------
   Title on the left, actions hard right. Replaces a bare .page-title on the
   screens that carry a primary action.
   ------------------------------------------------------------------------ */

.adm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  margin-bottom: var(--gap);
}

.adm-head .page-title { margin-bottom: 0; }

.adm-head__sub {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-muted);
}

.adm-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* -- toolbar --------------------------------------------------------------
   Search + filters + trailing action. The trailing item is pushed right by
   margin-left:auto so the row survives any number of filters.
   ------------------------------------------------------------------------ */

.adm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--gap-sm);
}

.adm-bar__search { flex: 0 1 300px; min-width: 200px; }
.adm-bar__filter { flex: 0 0 auto; min-width: 148px; }
.adm-bar__end    { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .adm-bar__search { flex-basis: 100%; }
  .adm-bar__end    { margin-left: 0; }
}

/* -- grid -----------------------------------------------------------------
   Two-column content rows. --adm-cols takes fr units so a 2:1 split is
   written as `--adm-cols: 2fr 1fr` at the call site.
   ------------------------------------------------------------------------ */

.adm-grid {
  display: grid;
  grid-template-columns: var(--adm-cols, 1fr 1fr);
  gap: var(--gap-sm);
  align-items: start;
  margin-bottom: var(--gap-sm);
}

@media (max-width: 1100px) {
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -- key/value list -------------------------------------------------------
   Detail panels: a label column and a value column that wraps on narrow.
   ------------------------------------------------------------------------ */

.kv { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 12px 16px; }

.kv__k {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-muted);
}

.kv__v {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-2);
  font-weight: var(--fw-medium);
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 4px 0; } }

/* -- timeline -------------------------------------------------------------
   Audit trail / activity stream. The rail is a border on the <li> so the line
   stops cleanly at the last item rather than running past it.
   ------------------------------------------------------------------------ */

.tl { list-style: none; margin: 0; padding: 0; }

.tl__item {
  position: relative;
  padding: 0 0 20px 30px;
  border-left: 1px solid var(--c-rule);
  margin-left: 7px;
}

.tl__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.tl__item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 0 3px var(--s-card);
}

.tl__item--blue::before   { background: var(--c-blue); }
.tl__item--amber::before  { background: var(--c-amber); }
.tl__item--red::before    { background: var(--c-red); }
.tl__item--purple::before { background: var(--c-purple); }

.tl__title {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

.tl__meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

/* -- plan card ------------------------------------------------------------
   Subscription tiers. --plan-accent lets one rule serve every tier.
   ------------------------------------------------------------------------ */

.plan {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-card);
  background: var(--s-card);
}

.plan--featured {
  border-color: var(--c-green);
  box-shadow: 0 0 0 1px var(--c-green);
}

.plan__name {
  font-size: var(--fs-h3);
  line-height: 26px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
}

.plan__price {
  margin-top: 10px;
  font-size: 32px;
  line-height: 40px;
  font-weight: var(--fw-semibold);
  color: var(--plan-accent, var(--c-green));
}

.plan__per {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
}

.plan__note {
  margin-top: 4px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

.plan__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--c-rule);
  display: grid;
  gap: 10px;
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: 21px;
  color: var(--c-ink-4);
}

.plan__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background-color: var(--plan-accent, var(--c-green));
  mask: url(../assets/icons/check-tick.svg) center / contain no-repeat;
  -webkit-mask: url(../assets/icons/check-tick.svg) center / contain no-repeat;
}

.plan__list li.is-off { color: var(--c-muted-3); }
.plan__list li.is-off::before { background-color: var(--c-muted-3); opacity: .5; }

.plan__cta { margin-top: 20px; }

/* -- service tile ---------------------------------------------------------
   System Health. Status is carried by data-state so markup stays semantic.
   ------------------------------------------------------------------------ */

.svc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-panel);
  background: var(--s-card);
}

.svc__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--c-green);
}

.svc[data-state="degraded"] .svc__dot { background: var(--c-amber); }
.svc[data-state="down"]     .svc__dot { background: var(--c-red); }

.svc__name {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

.svc__meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

.svc__val {
  margin-left: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
  white-space: nowrap;
}

/* -- upload / drop zone ---------------------------------------------------- */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  border: 1px dashed var(--c-field-line);
  border-radius: var(--r-panel);
  background: var(--c-field-bg);
  text-align: center;
}

.drop__title {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

.drop__hint {
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

/* -- swatch row (White label) --------------------------------------------- */

.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.swatch__chip {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-xs);
  background: var(--swatch, var(--c-green));
}

.swatch__hex {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* -- capacity / usage meter inside a table -------------------------------- */

.cap { display: grid; gap: 5px; min-width: 130px; }

.cap__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-xs);
  line-height: 16px;
  color: var(--c-muted);
}

.cap__val { color: var(--c-ink-2); font-weight: var(--fw-medium); }

.cap__track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--s-meter-track);
  overflow: hidden;
}

.cap__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--c-green);
  width: var(--cap, 0%);
}

.cap[data-level="warn"] .cap__fill { background: var(--c-amber); }
.cap[data-level="over"] .cap__fill { background: var(--c-red); }

/* -- template row (Email Templates) --------------------------------------- */

.tmpl {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.tmpl:last-child { border-bottom: 0; }
.tmpl:hover      { background: var(--s-app); }

.tmpl.is-active {
  background: var(--t-pill-green);
  box-shadow: inset 3px 0 0 var(--c-green);
}

.tmpl__name {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

.tmpl__meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

/* -- rendered email preview ------------------------------------------------ */

.mail-preview {
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #fff;
}

.mail-preview__bar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-rule);
  background: var(--s-app);
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

.mail-preview__body { padding: 24px; }

.mail-preview__logo {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-green-deep);
  margin-bottom: 16px;
}

.mail-preview__body p {
  font-size: var(--fs-sm);
  line-height: 22px;
  color: var(--c-ink-4);
  margin-bottom: 12px;
}

.mail-preview__token {
  padding: 1px 5px;
  border-radius: var(--r-2xs);
  background: var(--t-pill-green);
  color: var(--c-green-deep);
  font-weight: var(--fw-medium);
}

/* -- stream tile (Live-Streaming) ------------------------------------------ */

.stream {
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--s-card);
}

.stream__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1f2733 0%, #38414f 100%);
}

.stream__live {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55);
  font-size: var(--fs-3xs);
  line-height: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: #fff;
}

.stream__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-red);
}

.stream__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 7px;
  border-radius: var(--r-2xs);
  background: rgba(0, 0, 0, .55);
  font-size: var(--fs-3xs);
  line-height: 14px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.stream__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.stream__name {
  font-size: var(--fs-sm);
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

.stream__meta {
  font-size: var(--fs-xs);
  line-height: 17px;
  color: var(--c-muted);
}

/* -- settings section ------------------------------------------------------ */

.set-sec { padding: 20px var(--card-pad); border-bottom: 1px solid var(--c-rule); }
.set-sec:last-child { border-bottom: 0; }

.set-sec__title {
  font-size: var(--fs-body);
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
}

.set-sec__sub {
  margin-top: 3px;
  margin-bottom: 16px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

/* A label/description pair on the left, a control hard right. */
.set-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule-soft);
}

.set-row:last-child { border-bottom: 0; }

.set-row__body { min-width: 0; }

.set-row__name {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

.set-row__hint {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

.set-row__ctl { margin-left: auto; flex: 0 0 auto; }

/* -- misc ------------------------------------------------------------------ */

/* Right-aligned currency/number column. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Monospace-ish identifiers (IPs, hostnames, invoice numbers). */
.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--c-ink-4);
}

/* -- KPI tile without an icon ---------------------------------------------
   .stat__label carries margin-top:22px to clear the icon on the dashboard
   tiles. The admin list screens use the same tile with no icon, so the gap
   has to come back off. Compose as: stat stat--admin stat--tint stat--plain
   stat--green
   ------------------------------------------------------------------------ */

.stat--plain .stat__label { margin-top: 0; }

.stat--plain .stat__trend {
  color: var(--c-muted);
  font-weight: var(--fw-regular);
}

/* -- tile row spacing ------------------------------------------------------
   .stat-grid carries no bottom margin (the tenant screens space it from their
   own screen CSS). The admin screens stack tiles above a toolbar or a card, so
   they opt into the gap explicitly.
   ------------------------------------------------------------------------ */

.adm-tiles { margin-bottom: var(--gap-sm); }

/* -- caption, not a trend --------------------------------------------------
   .stat__trend renders an up-arrow via ::before. Most admin tiles carry a
   plain caption ("of 25 TB provisioned") rather than a movement, and an arrow
   there reads as a trend that was never measured. --flat drops the glyph.
   ------------------------------------------------------------------------ */

.stat__trend.stat__trend--flat::before { content: none; }

/* Two classes on purpose: build.py concatenates css/components/*.css in
   filename order, so admin.css lands BEFORE stat.css. At equal specificity
   stat.css would win and the arrow would come back. */

/* -- equal-height pair -----------------------------------------------------
   .adm-grid aligns to start so a short card does not stretch. Where the two
   cards are peers, stretching them reads better than a ragged bottom edge.
   ------------------------------------------------------------------------ */

.adm-grid--even { align-items: stretch; }
.adm-grid--even > .card { display: flex; flex-direction: column; }
.adm-grid--even > .card > .card__body { flex: 1 1 auto; }

/* ===== components/badge.css ===== */
/* ==========================================================================
   badge — status pills, chips and dots
   Figma: 27:1422 Active pill (77x32, r=100, #ddffe6 @60%, ink #239b44)
          27:1442 Inactive pill (#ffd7e1 @50%, ink #db2754)
          260:624 Active pill with leading dot (#c2f4d0 @50%)
          235:3030 Yes / No pills in the policies table
          29:1683 6px agent dot · 247:349 "Design Team" tag on the profile hero

   Markup
   ------
   <span class="badge is-active">Active</span>
   <span class="badge is-online badge--dot">Online</span>
   <span class="chip">Total time</span>
   <span class="dot is-online"></span> Online

   The state classes are the contract — screens write the meaning, not the
   colour, so a later palette change lands in one place:

     is-active is-inactive is-online is-offline is-pending
     is-excellent is-good is-average is-poor
     is-yes is-no is-success is-warning is-danger is-info is-neutral
   ========================================================================== */

.badge {
  --badge-bg: rgba(0, 0, 0, 0.05);
  --badge-ink: var(--c-muted);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 77px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

/* -- palettes ------------------------------------------------------------- */

.badge.is-active,
.badge.is-online,
.badge.is-yes,
.badge.is-success,
.badge.is-excellent { --badge-bg: rgba(221, 255, 230, 0.6); --badge-ink: var(--c-green); }

.badge.is-inactive,
.badge.is-offline,
.badge.is-no,
.badge.is-danger,
.badge.is-average   { --badge-bg: rgba(255, 215, 225, 0.5); --badge-ink: var(--c-pink); }

.badge.is-pending,
.badge.is-warning   { --badge-bg: rgba(255, 244, 222, 0.7); --badge-ink: var(--c-amber-ink); }

.badge.is-good,
.badge.is-info      { --badge-bg: #e8f2fb;                  --badge-ink: var(--c-good); }

.badge.is-poor      { --badge-bg: var(--t-red);             --badge-ink: var(--c-red); }
.badge.is-neutral   { --badge-bg: var(--s-app);             --badge-ink: var(--c-muted); }
.badge.is-purple    { --badge-bg: var(--t-purple);          --badge-ink: var(--c-purple); }

/* -- shapes --------------------------------------------------------------- */

/* Leading state dot inside the pill (260:629). */
.badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.badge--sm  { min-width: 0; height: 26px; padding: 0 10px; font-size: var(--fs-2xs); }
.badge--wide{ min-width: 96px; }

/* A solid tag rather than a tint — "Design Team" on the profile hero. */
.badge--solid {
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-on-brand);
  min-width: 0;
  height: 27px;
  padding: 0 12px;
  font-size: var(--fs-2xs);
}

/* Square-ish tag used for counts and short labels. */
.badge--square { border-radius: var(--r-xs); min-width: 0; padding: 0 10px; }

/* ==========================================================================
   chip — the small filled control-shaped label ("Total time", "Visit count")
   Figma: 232:2216 area, 232:2347
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-btn-sm);
  padding: 0 18px;
  border-radius: var(--r-xs);
  background: var(--g-btn);
  color: var(--c-on-brand);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.chip--quiet {
  background: var(--s-app);
  color: var(--c-ink-4);
}

.chip--outline {
  background: none;
  border: 1px solid var(--s-card-line);
  color: var(--c-ink-4);
}

/* ==========================================================================
   dot — the bare 6px agent-state marker used beside plain text
   Figma: 29:1683 (#239b44 online) / 29:1685 (#db2754 offline)
   ========================================================================== */

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: 2px;
  background: var(--c-muted-3);
}

.dot.is-online,
.dot.is-active,
.dot.is-success  { background: var(--c-green); }

.dot.is-offline,
.dot.is-inactive,
.dot.is-danger   { background: var(--c-pink); }

.dot.is-warning  { background: var(--c-amber); }
.dot.is-info     { background: var(--c-blue-bright); }
.dot.is-purple   { background: var(--c-purple); }

/* A larger swatch dot for legends and quick-action lists (301:1706). */
.dot--lg { width: 13px; height: 13px; margin-right: 13px; vertical-align: -1px; }

/* ===== components/button.css ===== */
/* ==========================================================================
   button
   Figma: 235:3234 primary (r=6, 42 tall, gradient #0092ba→#428b0a, 17px)
          27:1614 primary lg (r=6, 50 tall, 196 wide, + plus-circle icon)
          261:879 primary pill (r=100, 130x42, 15px)   "Save Profile"
          265:1033 outline pill (transparent, 1px #54575a) "Cancel"
          265:1039 danger pill (#f31048)                "Delete"
          232:2216 light (white on a gradient banner, r=10, 60 tall, 18px)
          261:718 ghost chip (r=6, 70x36, #f4f6f6, 14px Medium) "Edit"
          92:97  ghost pill (r=100, 116x50, #f4f6f6) "Reset"
          27:1425/27:1427/27:1430 icon buttons (40x40, tinted, r=3–4)

   Markup
   ------
   <button class="btn btn--primary" type="button">
     <span class="icon" data-icon="plus-circle"></span>Add Employee
   </button>
   <a class="btn btn--ghost btn--sm" href="#"><span class="icon" data-icon="pencil"></span>Edit</a>
   <button class="icon-btn icon-btn--amber" type="button" aria-label="Credentials">
     <span class="icon" data-icon="key"></span>
   </button>

   Variants  .btn--primary --secondary --outline --ghost --danger --light
   Shapes    .btn--pill  .btn--block  .btn--icon-only
   Sizes     .btn--sm (36) · default (42) · .btn--lg (50) · .btn--xl (60)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h-btn);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: none;
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1;
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}

/* -- variants ------------------------------------------------------------- */

.btn--primary {
  background: var(--g-btn);
  color: var(--c-on-brand);
  font-size: 17px;
}

.btn--primary:hover { filter: brightness(1.06); }
.btn--primary:active { filter: brightness(0.94); }

.btn--secondary {
  background: var(--s-card);
  border-color: var(--s-card-line);
  color: var(--c-ink-4);
}

.btn--secondary:hover { background: var(--s-app); }

.btn--outline {
  background: none;
  border-color: var(--c-outline);
  color: var(--c-outline);
}

.btn--outline:hover { background: rgba(84, 87, 90, 0.06); }

.btn--ghost {
  background: var(--s-app);
  color: var(--c-ink-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.btn--ghost:hover { background: var(--s-line-soft); }

.btn--danger {
  background: var(--c-danger);
  color: var(--c-on-brand);
}

.btn--danger:hover { filter: brightness(1.08); }

/* White button sitting on a gradient banner (232:2216). */
.btn--light {
  background: var(--s-card);
  color: var(--c-ink-4);
  border-radius: var(--r-panel);
  font-size: 18px;
  font-weight: var(--fw-medium);
}

.btn--light:hover { background: var(--s-app); }

/* -- shapes and sizes ----------------------------------------------------- */

.btn--pill { border-radius: var(--r-pill); }
.btn--block { display: flex; width: 100%; }

.btn--sm { height: var(--h-btn-sm); padding: 0 14px; font-size: var(--fs-sm); gap: 8px; }
.btn--lg { height: var(--h-control); padding: 0 22px; }
.btn--xl { height: 60px; padding: 0 25px; gap: 16px; }

.btn--sm.btn--primary { font-size: var(--fs-sm); }

.btn--icon-only { width: var(--h-btn); padding: 0; }
.btn--icon-only.btn--sm { width: var(--h-btn-sm); }
.btn--icon-only.btn--lg { width: var(--h-control); }

.btn[disabled],
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.2);
}

/* An icon inside a button never shrinks and never sets the line box. */
.btn > .icon { flex: none; }

/* ==========================================================================
   icon-btn — the square tinted action buttons in table rows
   40x40, 3px apart. Tint at the design's opacity, glyph in the accent ink.
   ========================================================================== */

.icon-btn {
  --ib-bg: var(--s-app);
  --ib-ink: var(--c-muted);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--ib-bg);
  color: var(--ib-ink);
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
}

.icon-btn:hover { filter: brightness(0.96); }

.icon-btn--amber { --ib-bg: rgba(255, 244, 222, 0.7); --ib-ink: var(--c-amber-ink); }
.icon-btn--green { --ib-bg: rgba(221, 255, 230, 0.6); --ib-ink: var(--c-green); }
.icon-btn--red   { --ib-bg: rgba(255, 215, 225, 0.5); --ib-ink: var(--c-pink); }
.icon-btn--blue  { --ib-bg: var(--t-blue);            --ib-ink: var(--c-blue); }
.icon-btn--plain { --ib-bg: transparent;              --ib-ink: var(--c-muted); }

.icon-btn--sm    { width: 32px; height: 32px; }
.icon-btn--round { border-radius: var(--r-pill); }

.icon-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   btn-row — the toolbar rhythm above a table (search / selects / primary)
   ========================================================================== */

.btn-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.btn-row__spacer { margin-left: auto; }

@media (max-width: 640px) {
  .btn-row > * { flex: 1 1 100%; }
  .btn-row .btn { width: 100%; }
}

/* ===== components/card.css ===== */
/* ==========================================================================
   card — the white rounded panel every screen is built out of
   Figma: 24:785 (chart card) · 24:822 (attendance) · 27:1382 (table shell)
          261:641 (profile section) · 235:3026 (policies) · 247:320 (banner)

   Markup
   ------
   <section class="card">
     <header class="card__head">
       <h2 class="card__title">Productivity Overview</h2>
       <p class="card__sub">optional</p>
       <div class="card__actions"> …dropdown / button / overflow… </div>
     </header>
     <div class="card__body"> … </div>
     <footer class="card__foot"> … </footer>
   </section>

   Variants
   --------
   .card--panel      r=10 hairline #d9e4ed — profile / form panels
   .card--table      r=10 — wraps a full-bleed <table>, kills body padding
   .card--policies   r=15 — panel that carries a coloured table head
   .card--gradient   green→blue banner, white ink (reports Overview, profile hero)
   .card--flush      no body padding at all
   .card__divider    full-bleed hairline between stacked sections in one card
   .card__section    a titled block inside a multi-section card
   ========================================================================== */

.card {
  position: relative;
  background: var(--s-card);
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-card);
}

.card--panel   { border-radius: var(--r-panel);    border-color: var(--s-card-line-2); }
.card--table   { border-radius: var(--r-panel);    overflow: hidden; }
.card--policies{ border-radius: var(--r-panel-lg); overflow: hidden; }

/* -- head ---------------------------------------------------------------- */

.card__head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--h-btn-sm);
  padding: var(--card-pad-top) var(--card-pad) 0;
}

.card__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

.card__sub {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-muted);
}

/* Trailing control cluster — dropdown, "View all", overflow button. */
.card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* -- body / foot --------------------------------------------------------- */

.card__body {
  padding: var(--gap-sm) var(--card-pad) var(--card-pad);
}

.card__head + .card__body { padding-top: var(--gap-sm); }

.card--flush > .card__body,
.card--table > .card__body { padding: 0; }

.card--table > .card__head { padding-bottom: 0; }

.card__foot {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--card-pad);
  border-top: 1px solid var(--c-rule);
}

/* -- sections ------------------------------------------------------------ */

/* Full-bleed rule — profile stacks Profile Information / Update Password /
   Delete Account inside one panel, split by an edge-to-edge line (265:968). */
.card__divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--s-card-line-2);
}

.card__section { padding: var(--card-pad-top) var(--card-pad) var(--card-pad); }

.card__section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  margin-bottom: var(--gap-sm);
}

.card__text {
  font-size: 18px;
  line-height: 28px;
  color: #5f6264;                 /* 265:1026 */
  max-width: 62ch;
}

/* -- gradient banner ----------------------------------------------------- */
/* Reports "Overview" (232:2211) and the My Profile hero (247:320) are the same
   object: a green→blue panel, white ink, one trailing action. */

.card--gradient {
  background: var(--g-banner);
  border-color: transparent;
  border-radius: var(--r-panel-lg);
  color: var(--c-on-brand);
}

.card--gradient .card__title,
.card--gradient .card__section-title { color: var(--c-on-brand); }

.card--gradient .card__sub,
.card--gradient .card__text { color: rgba(255, 255, 255, 0.86); }

.card--gradient .card__divider { background: rgba(255, 255, 255, 0.18); }

/* -- a card that is only a heading + trailing control --------------------- */
/* "Top Applications" / "Top Websites" sit above their panel rather than inside
   it (232:2231). Same rhythm as .card__head but with no panel behind it. */

.card-heading {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}

.card-heading__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

.card-heading__actions { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 640px) {
  .card { border-radius: var(--r-lg); }
  .card__head,
  .card__body,
  .card__section { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
  .card__foot { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
}

/* ===== components/chart.css ===== */
/* ==========================================================================
   chart — shared chrome for inline-SVG charts, plus the pure-CSS meters
   Figma: 24:786 bar chart (dashed 2/2 gridlines rgba(72,74,86,.7), #10712a bars)
          24:824 donut + legend (15px swatch, 13/24 label, 9px gap)
          24:857 horizontal gradient bars · 24:889 line chart with tooltip
          232:2261 table progress bar (12px, r=100, accent→#f5f4f9)
          301:1606 resource meters · 107:1218 stacked task bar

   Charts in this portal are REAL elements, never exported pictures — a
   developer has to be able to bind them to live data. This file gives the
   chrome (frame, gridlines, ticks, legend, tooltip); the screen supplies the
   geometry with the numbers from its own frame.

   Markup — SVG chart
   ------------------
   <figure class="chart" style="--chart-h:260px">
     <svg class="chart__svg" viewBox="0 0 464 260" role="img"
          aria-label="Productivity by month">
       <title>Productivity Overview</title>
       <g class="chart__grid">
         <line class="chart__gridline" x1="42" y1="18" x2="459" y2="18"/>
       </g>
       <g class="chart__ticks chart__ticks--y">
         <text class="chart__tick" x="30" y="22">1000</text>
       </g>
       <g class="chart__series">
         <rect class="chart__bar" x="72" y="230" width="37" height="59"/>
       </g>
       <g class="chart__ticks chart__ticks--x">
         <text class="chart__tick" x="90" y="255">JAN</text>
       </g>
     </svg>
     <ul class="chart__legend">
       <li class="chart__legend-item">
         <span class="chart__swatch" style="--swatch:var(--c-blue-bright)"></span>Present
       </li>
     </ul>
   </figure>

   Markup — meters (no SVG needed)
   -------------------------------
   <div class="meter"><span class="meter__track"><span class="meter__fill"
        style="--pct:42%;--meter-ink:var(--c-blue-bright)"></span></span>
        <span class="meter__value">42%</span></div>

   <ul class="hbars"> <li class="hbar">
        <span class="hbar__label">Google Chrome</span>
        <span class="hbar__track"><span class="hbar__fill" style="--pct:96%"></span></span>
   </li> </ul>
   ========================================================================== */

.chart {
  position: relative;
  margin: 0;
  min-width: 0;
}

.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* -- frame ---------------------------------------------------------------- */

.chart__gridline {
  stroke: var(--c-grid);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.chart__gridline--solid { stroke-dasharray: none; stroke: var(--s-line); }
.chart__gridline--wide  { stroke-dasharray: 3 3; stroke: var(--c-rule-dash); }

.chart__axis {
  stroke: var(--s-line);
  stroke-width: 1;
}

.chart__tick {
  fill: var(--c-muted-4);
  font-family: var(--ff);
  font-size: var(--chart-tick, 12px);
  font-weight: var(--fw-regular);
}

.chart__ticks--y .chart__tick { text-anchor: end; dominant-baseline: middle; }
.chart__ticks--x .chart__tick { text-anchor: middle; }
.chart__tick--rotated { text-anchor: end; }

.chart__label {
  fill: var(--c-ink-4);
  font-family: var(--ff);
  font-size: var(--fs-xs);
}

/* -- marks ---------------------------------------------------------------- */

.chart__bar {
  fill: var(--bar, var(--c-green-deep));
  transition: opacity var(--dur) var(--ease);
}

.chart__bar:hover { opacity: 0.85; }

.chart__line {
  fill: none;
  stroke: var(--line, var(--c-ink-4));
  stroke-width: var(--line-w, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__area { fill: var(--area, rgba(12, 135, 226, 0.12)); stroke: none; }

.chart__point {
  fill: var(--point, var(--c-green));
  stroke: var(--s-card);
  stroke-width: 2;
}

.chart__seg { transition: opacity var(--dur) var(--ease); }
.chart__seg:hover { opacity: 0.88; }

/* -- legend --------------------------------------------------------------- */

.chart__legend {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart__legend--row { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }

.chart__legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--c-ink-4);
}

.chart__swatch {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--swatch, var(--c-green));
}

.chart__swatch--square { border-radius: 3px; }

.chart__legend-value { margin-left: auto; color: var(--c-muted); }

/* -- tooltip -------------------------------------------------------------- */

/* A static bubble in the design (24:799, 92:2). Screens position it with
   --x / --y, or drop `.is-static` and place it inside a flow. */
.chart__tooltip {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 0);
  transform: translate(-50%, -100%);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--s-card);
  border: 1px solid var(--s-card-line);
  box-shadow: var(--sh-pop-sm);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.chart__tooltip-label {
  display: block;
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  color: var(--c-muted);
}

.chart__tooltip-value {
  display: block;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

.chart__tooltip--dot {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

/* ==========================================================================
   donut — ring with a centred readout (24:824, 301:1443)
   The ring itself is an SVG circle set with stroke-dasharray; this supplies
   the frame and the centre label.
   ========================================================================== */

.donut {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--donut-size, 178px);
  height: var(--donut-size, 178px);
  flex: none;
}

.donut__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.donut__ring { fill: none; stroke: var(--s-line-soft); stroke-width: var(--donut-w, 30); }

.donut__seg {
  fill: none;
  stroke: var(--seg, var(--c-green));
  stroke-width: var(--donut-w, 30);
  transition: opacity var(--dur) var(--ease);
}

.donut__seg:hover { opacity: 0.85; }

.donut__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.donut__value {
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-4);
}

.donut__caption {
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  color: var(--c-muted);
}

/* ==========================================================================
   hbars — horizontal bar rows (Top Application Usage, 24:857)
   Each fill runs the accent into #f5f4f9 so the bars fade to the right.
   ========================================================================== */

.hbars {
  display: flex;
  flex-direction: column;
  gap: var(--hbar-gap, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hbar {
  display: grid;
  grid-template-columns: var(--hbar-label-w, 96px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.hbar__label {
  font-size: var(--fs-3xs);
  line-height: var(--lh-3xs);
  color: var(--c-ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbar__track {
  display: block;
  position: relative;
  height: var(--hbar-h, 24px);
  border-radius: var(--r-pill);
  background: var(--s-line-soft);
  overflow: hidden;
}

.hbar__fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--fill, var(--g-teal-blue));
}

.hbar__value {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* Stacked layout — label above the bar (232:2266). */
.hbar--stacked { display: block; }

.hbar--stacked .hbar__label {
  display: block;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--c-stat-label);
  margin-bottom: 8px;
}

.hbar--stacked .hbar__track { height: 12px; background: #f5f4f9; }

.hbar--stacked .hbar__fill {
  background: linear-gradient(90deg, var(--accent, var(--c-purple)) 0%, #f5f4f9 100%);
}

/* ==========================================================================
   meter — the thin progress bar with a trailing readout (301:1606 area)
   Also used for "Profile Completion" on the My Profile hero.
   ========================================================================== */

.meter {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.meter__track {
  display: block;
  flex: 1 1 auto;
  height: var(--meter-h, 6px);
  border-radius: var(--r-pill);
  background: var(--meter-track, var(--s-line-soft));
  overflow: hidden;
}

.meter__fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--meter-ink, var(--c-green));
}

.meter__value {
  flex: none;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-4);
  font-variant-numeric: tabular-nums;
}

.meter--onbrand .meter__track { background: rgba(255, 255, 255, 0.28); }
.meter--onbrand .meter__fill  { background: var(--c-green-bright); }
.meter--onbrand .meter__value { color: var(--c-on-brand); }

/* A labelled meter row: icon, name, bar, percentage. */
.meter-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.meter-row__name {
  display: block;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--c-ink-4);
  margin-bottom: 6px;
}

/* ==========================================================================
   stackbar — one bar split into proportional segments (Task Overview 107:1247)
   ========================================================================== */

.stackbar {
  display: flex;
  gap: 4px;
  height: var(--stack-h, 20px);
}

.stackbar__seg {
  display: block;
  flex: 0 0 var(--pct, 25%);
  border-radius: var(--r-xs);
  background: var(--seg, var(--c-blue-bright));
}

/* ==========================================================================
   chart-split — the recurring "plot on the left, legend on the right" layout
   ========================================================================== */

.chart-split {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

.chart-split > .chart { flex: 1 1 240px; }

@media (max-width: 560px) {
  .chart-split { justify-content: center; }
  .hbar { grid-template-columns: minmax(0, 1fr) auto; }
  .hbar__label { grid-column: 1 / -1; }
}

/* ===== components/form.css ===== */
/* ==========================================================================
   form — inputs, selects, search, checkbox, radio, switch, textarea
   Figma: 261:753 filled input (315x52, r=8, #f5f6f9, 1px #e0e4ea, 15px/20)
          261:749 label (15/20 Regular #787878)
          27:1599 toolbar search (white, r=10, 50 tall, 16px icon at 17px)
          27:1604 toolbar select (white, r=6, 50 tall, 16px text + chevron)
          260:632 switch (35x18 track #28a56e, 14px knob, 2px inset)

   Markup
   ------
   <div class="field">
     <label class="field__label" for="first">First Name</label>
     <input class="input" id="first" type="text" value="Christopher">
     <p class="field__hint" id="first-hint">As it appears on payroll.</p>
   </div>

   <div class="field is-invalid">
     <label class="field__label" for="mail">Email</label>
     <input class="input" id="mail" type="email" aria-describedby="mail-err" aria-invalid="true">
     <p class="field__error" id="mail-err">Enter a valid address.</p>
   </div>

   <div class="select-wrap"><select class="select" id="dept">…</select></div>
   <div class="search"><label class="sr-only" for="q">Search</label>
        <input class="search__input" id="q" type="search" placeholder="Search"></div>

   Variants
   --------
   .input--plain / .select--plain   white toolbar treatment (r=6, 50 tall)
   .field--inline                   label beside control
   .form-grid                       the 3-up field grid used on My Profile
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.field__label {
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  color: var(--c-label);
}

.field__hint {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-muted);
}

.field__error {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-red);
}

.field__req { color: var(--c-red); margin-left: 2px; }

/* -- text controls -------------------------------------------------------- */

.input,
.select,
.textarea {
  width: 100%;
  height: var(--h-field);
  padding: 0 20px;
  border: 1px solid var(--c-field-line);
  border-radius: var(--r-sm);
  background: var(--c-field-bg);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-4);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.textarea {
  height: auto;
  min-height: 120px;
  padding: 15px 20px;
  line-height: var(--lh-body);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder { color: var(--c-placeholder); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--s-line); }

/* background-COLOR, not the shorthand: `background:` also resets
   background-image / -position / -size, which threw away .select's chevron
   (24:819) on every focused select in the portal. */
.input:focus,
.select:focus,
.textarea:focus { background-color: var(--s-card); border-color: var(--c-green); }

.input[disabled],
.select[disabled],
.textarea[disabled] { opacity: 0.55; cursor: not-allowed; }

.is-invalid .input,
.is-invalid .select,
.is-invalid .textarea,
[aria-invalid="true"].input { border-color: var(--c-red); }

/* White toolbar treatment — sits on the app background, not inside a card. */
.input--plain,
.select--plain {
  height: var(--h-control);
  background: var(--s-card);
  border-color: transparent;
  border-radius: var(--r-xs);
  font-size: var(--fs-h3);
  padding: 0 16px;
}

/* -- select --------------------------------------------------------------- */

/* The chevron is the real 9x5 export (24:819); the native arrow is removed. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url(../assets/icons/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 9px 5px;
  cursor: pointer;
}

.select-wrap { position: relative; min-width: 0; }

/* -- search --------------------------------------------------------------- */

.search {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--h-control);
  border-radius: var(--r-panel);
  background: var(--s-card);
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.search::before {
  content: "";
  position: absolute;
  left: 17px;
  width: 16px;
  height: 16px;
  background-color: var(--c-muted-2);
  -webkit-mask: url(../assets/icons/search.svg) center / contain no-repeat;
  mask: url(../assets/icons/search.svg) center / contain no-repeat;
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 100%;
  padding: 0 16px 0 40px;
  border: 0;
  border-radius: inherit;
  background: none;
  font-family: var(--ff);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

.search__input::placeholder { color: var(--c-muted-2); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }
.search:focus-within { border-color: var(--c-green); }

/* Search rendered inside a card body picks up the field fill instead. */
.search--filled { background: var(--c-field-bg); border-color: var(--c-field-line); }

/* -- checkbox and radio --------------------------------------------------- */

.check,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-4);
  cursor: pointer;
}

.check__box,
.radio__dot {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  border: 1px solid var(--c-field-line);
  background: var(--c-field-bg);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.check__box { border-radius: var(--r-xs); }
.radio__dot { border-radius: 50%; }

.check__box:checked,
.radio__dot:checked { background: var(--c-green); border-color: var(--c-green); }

/* The tick is drawn as two rules of the box's own border — a geometric mark,
   not a traced glyph. */
.check__box:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 2px auto 0;
  border: solid var(--c-on-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.radio__dot:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 5px auto;
  border-radius: 50%;
  background: var(--c-on-brand);
}

.check__box[disabled],
.radio__dot[disabled] { opacity: 0.5; cursor: not-allowed; }

/* -- switch --------------------------------------------------------------- */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.switch__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 35px;
  height: 18px;
  flex: none;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--s-line);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.switch__input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--s-card);
  transition: transform var(--dur) var(--ease);
}

.switch__input:checked { background: var(--c-toggle-on); }
.switch__input:checked::after { transform: translateX(17px); }
.switch__input[disabled] { opacity: 0.5; cursor: not-allowed; }

.switch__label { font-size: var(--fs-body); color: var(--c-ink-4); }

/* -- layout --------------------------------------------------------------- */

/* My Profile lays fields out three across (261:782). */
.form-grid {
  display: grid;
  grid-template-columns: repeat(var(--form-cols, 3), minmax(0, 1fr));
  gap: var(--gap-sm) var(--gap);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap);
}

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-sm);
}

.field--inline .field__label { flex: none; margin: 0; }

@media (max-width: 900px) { .form-grid { --form-cols: 2; } }
@media (max-width: 600px) { .form-grid { --form-cols: 1; } }

/* ===== components/misc.css ===== */
/* ==========================================================================
   misc — icon primitive, dropdown, tabs, pagination, avatar, list rows,
          empty state, overflow control
   Figma: 24:814 dropdown (80x36, r=6, #f4f6f6, 14/20 Medium + 9x5 chevron)
          24:854 overflow "…" (22x22 chip, r=6, #f4f6f6, ink #808290)
          27:1436 avatar (41px, circular mask) · 247:344 hero avatar (132, r=8)
          260:571 soft list row (481x46, r=8, #f8fcfa, 1px #b7d8c0 @50%)

   ICON PRIMITIVE
   --------------
   Every glyph is a Figma export in assets/icons/. Two ways to place one:

     <span class="icon" data-icon="search"></span>       tinted, follows currentColor
     <img class="icon" src="assets/icons/search.svg" width="20" height="20" alt="">

   The masked form is preferred inside buttons and rows so one file serves
   every accent. Size it with --icon-size (default 20px); the mask is
   `contain`, so a non-square glyph keeps its own proportions inside the box.
   ========================================================================== */

.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
}

.icon[data-icon] {
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon--sm { --icon-size: 16px; }
.icon--lg { --icon-size: 24px; }
.icon--xl { --icon-size: 42px; }

/* Rotation helpers. The design reuses one arrow glyph at several angles —
   Quick Actions points the thin right-arrow north-east (301:1708), and the
   list chevron is the down chevron turned a quarter (260:635). */
.icon--ne   { transform: rotate(-45deg); }
.icon--up   { transform: rotate(180deg); }
.icon--left { transform: rotate(90deg); }
.icon--right{ transform: rotate(-90deg); }

/* -- registry ------------------------------------------------------------- */

.icon[data-icon="arrow-right"]           { --icon: url(../assets/icons/arrow-right.svg); }
.icon[data-icon="arrow-right-thin"]      { --icon: url(../assets/icons/arrow-right-thin.svg); }
.icon[data-icon="check-circle"]          { --icon: url(../assets/icons/check-circle.svg); }
.icon[data-icon="chevron-down"]          { --icon: url(../assets/icons/chevron-down.svg); }
.icon[data-icon="corner-arrow"]          { --icon: url(../assets/icons/corner-arrow.svg); }
.icon[data-icon="edit"]                  { --icon: url(../assets/icons/edit.svg); }
.icon[data-icon="filter"]                { --icon: url(../assets/icons/filter.svg); }
.icon[data-icon="key"]                   { --icon: url(../assets/icons/key.svg); }
.icon[data-icon="pencil"]                { --icon: url(../assets/icons/pencil.svg); }
.icon[data-icon="people"]                { --icon: url(../assets/icons/people.svg); }
.icon[data-icon="plus-circle"]           { --icon: url(../assets/icons/plus-circle.svg); }
.icon[data-icon="refresh"]               { --icon: url(../assets/icons/refresh.svg); }
.icon[data-icon="search"]                { --icon: url(../assets/icons/search.svg); }
.icon[data-icon="trash"]                 { --icon: url(../assets/icons/trash.svg); }
.icon[data-icon="trend-arrow"]           { --icon: url(../assets/icons/trend-arrow.svg); }

/* The sidebar glyphs are registered here too so screens can reuse them. */
.icon[data-icon="activity-monitoring"]   { --icon: url(../assets/icons/activity-monitoring.svg); }
.icon[data-icon="activity-tracking"]     { --icon: url(../assets/icons/activity-tracking.svg); }
.icon[data-icon="announcements"]         { --icon: url(../assets/icons/announcements.svg); }
.icon[data-icon="app-categories"]        { --icon: url(../assets/icons/app-categories.svg); }
.icon[data-icon="audio"]                 { --icon: url(../assets/icons/audio.svg); }
.icon[data-icon="clipboard"]             { --icon: url(../assets/icons/clipboard.svg); }
.icon[data-icon="dashboard"]             { --icon: url(../assets/icons/dashboard.svg); }
.icon[data-icon="download-agent"]        { --icon: url(../assets/icons/download-agent.svg); }
.icon[data-icon="employees-monitoring"]  { --icon: url(../assets/icons/employees-monitoring.svg); }
.icon[data-icon="installation"]          { --icon: url(../assets/icons/installation.svg); }
.icon[data-icon="logout"]                { --icon: url(../assets/icons/logout.svg); }
.icon[data-icon="mass-deployment"]       { --icon: url(../assets/icons/mass-deployment.svg); }
.icon[data-icon="my-profile"]            { --icon: url(../assets/icons/my-profile.svg); }
.icon[data-icon="policies-configuration"]{ --icon: url(../assets/icons/policies-configuration.svg); }
.icon[data-icon="recording"]             { --icon: url(../assets/icons/recording.svg); }
.icon[data-icon="remote-desktop"]        { --icon: url(../assets/icons/remote-desktop.svg); }
.icon[data-icon="reports-analytics"]     { --icon: url(../assets/icons/reports-analytics.svg); }
.icon[data-icon="screenshot-gallery"]    { --icon: url(../assets/icons/screenshot-gallery.svg); }
.icon[data-icon="security-dashboard"]    { --icon: url(../assets/icons/security-dashboard.svg); }
.icon[data-icon="status-dashboard"]      { --icon: url(../assets/icons/status-dashboard.svg); }
.icon[data-icon="timesheet"]             { --icon: url(../assets/icons/timesheet.svg); }
.icon[data-icon="webcam"]                { --icon: url(../assets/icons/webcam.svg); }
.icon[data-icon="working-hours"]         { --icon: url(../assets/icons/working-hours.svg); }

/* ==========================================================================
   dropdown — the "Month" / "Week" period picker on every card head
   Markup:
     <div class="dropdown">
       <button class="dropdown__toggle" type="button" aria-expanded="false">Month</button>
       <ul class="dropdown__menu" hidden>
         <li><button class="dropdown__item is-selected" type="button">Month</button></li>
       </ul>
     </div>
   js/portal.js owns the open/close behaviour; this file owns the look.
   ========================================================================== */

.dropdown { position: relative; }

.dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--h-btn-sm);
  padding: 0 14px;
  border-radius: var(--r-xs);
  background: var(--s-app);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}

.dropdown__toggle:hover { background: var(--s-line-soft); }

.dropdown__toggle::after {
  content: "";
  width: 9px;
  height: 5px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(../assets/icons/chevron-down.svg) center / contain no-repeat;
  mask: url(../assets/icons/chevron-down.svg) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}

.dropdown__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  border-radius: var(--r-sm);
  background: var(--s-card);
  border: 1px solid var(--s-card-line);
  box-shadow: var(--sh-pop);
}

.dropdown__menu[hidden] { display: none; }

.dropdown__item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-4);
  text-align: left;
}

.dropdown__item:hover { background: var(--s-app); }
.dropdown__item.is-selected { color: var(--c-green); font-weight: var(--fw-medium); }
.dropdown__sep { height: 1px; margin: 6px 0; background: var(--s-line-soft); }

/* ==========================================================================
   overflow — the "…" control in a card head (24:854)
   A text glyph on a 22px chip, exactly as the design draws it.
   ========================================================================== */

.overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  background: var(--s-app);
  color: var(--c-muted-3);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 1px;
  transition: background var(--dur) var(--ease);
}

.overflow-btn::before { content: "\00B7\00B7\00B7"; transform: translateY(-3px); }
.overflow-btn:hover { background: var(--s-line-soft); }

/* ==========================================================================
   tabs
   ========================================================================== */

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--s-card-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  padding: 12px 16px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--c-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.tab:hover { color: var(--c-ink-4); }

.tab.is-active {
  color: var(--c-green);
  font-weight: var(--fw-medium);
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-green);
  border-radius: 2px 2px 0 0;
}

/* Pill tab set — the segmented control form. */
.tabs--pill { border-bottom: 0; gap: 6px; padding: 4px; background: var(--s-app); border-radius: var(--r-pill); display: inline-flex; }
.tabs--pill .tab { padding: 8px 18px; border-radius: var(--r-pill); }
.tabs--pill .tab.is-active { background: var(--s-card); color: var(--c-ink-4); }
.tabs--pill .tab.is-active::after { display: none; }

/* ==========================================================================
   pagination
   ========================================================================== */

.pager {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pager__info {
  margin-right: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-muted);
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: var(--h-btn-sm);
  padding: 0 12px;
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-xs);
  background: var(--s-card);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-4);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pager__btn:hover { background: var(--s-app); }

.pager__btn.is-current {
  background: var(--g-btn);
  border-color: transparent;
  color: var(--c-on-brand);
  font-weight: var(--fw-medium);
}

.pager__btn[disabled],
.pager__btn.is-disabled { opacity: 0.4; pointer-events: none; }

.pager__gap { padding: 0 4px; color: var(--c-muted); }

/* ==========================================================================
   avatar
   ========================================================================== */

.avatar {
  display: block;
  width: var(--avatar-size, 40px);
  height: var(--avatar-size, 40px);
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--s-line);
}

.avatar--sm { --avatar-size: 32px; }
.avatar--lg { --avatar-size: 56px; }
.avatar--xl { --avatar-size: 132px; border-radius: var(--r-sm); }

/* Fallback when there is no photo — initials on a tinted disc. */
.avatar--initials {
  display: grid;
  place-items: center;
  background: var(--t-green);
  color: var(--c-green);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--s-card); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ==========================================================================
   list — the soft tinted rows on My Profile / admin activity feeds
   Figma: 260:571 (481x46, r=8, #f8fcfa, 1px #b7d8c0 @50%)
          301:1606 (379x59, r=5, tinted by kind)
   Markup:
     <ul class="list">
       <li class="list__row">
         <span class="list__icon"><span class="icon" data-icon="check-circle"></span></span>
         <div class="list__body">
           <p class="list__title">Account Status</p>
           <p class="list__meta">Your account is active</p>
         </div>
         <span class="badge is-active badge--dot badge--sm">Active</span>
       </li>
     </ul>
   ========================================================================== */

.list { display: flex; flex-direction: column; gap: 12px; }

.list__row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: var(--list-bg, var(--s-list));
  border: 1px solid var(--list-line, rgba(183, 216, 192, 0.5));
}

.list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--c-green);
}

.list__icon--disc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--list-accent, var(--c-green));
  color: var(--c-on-brand);
}

.list__body { min-width: 0; flex: 1 1 auto; }

.list__title {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-list-title);
}

.list__meta {
  font-size: var(--fs-3xs);
  line-height: var(--lh-3xs);
  font-weight: var(--fw-light);
  color: var(--c-list-meta);
}

.list__time {
  flex: none;
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink);
}

/* A row that navigates gets the trailing chevron (260:635). */
.list__row--link { cursor: pointer; }

.list__row--link::after {
  content: "";
  width: 5px;
  height: 9px;
  flex: none;
  background-color: #828282;
  -webkit-mask: url(../assets/icons/chevron-down.svg) center / contain no-repeat;
  mask: url(../assets/icons/chevron-down.svg) center / contain no-repeat;
  transform: rotate(-90deg);
}

.list__row--link:hover { filter: brightness(0.98); }

/* Tint presets for feed rows. */
.list__row--green  { --list-bg: var(--t-green);      --list-line: transparent; --list-accent: var(--c-green); }
.list__row--red    { --list-bg: #fff0f4;             --list-line: transparent; --list-accent: var(--c-pink); }
.list__row--blue   { --list-bg: var(--t-blue);       --list-line: transparent; --list-accent: var(--c-blue); }
.list__row--amber  { --list-bg: var(--t-pill-amber); --list-line: transparent; --list-accent: var(--c-amber-ink); }
.list__row--purple { --list-bg: var(--t-purple);     --list-line: transparent; --list-accent: var(--c-purple); }

/* A plain, untinted variant used for link lists such as Quick Actions. */
.list--plain .list__row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  border-radius: 0;
  padding-left: 4px;
  padding-right: 4px;
}

.list--plain .list__row:last-child { border-bottom: 0; }

/* ==========================================================================
   empty state
   ========================================================================== */

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--s-app);
  color: var(--c-muted-3);
  margin-bottom: 4px;
}

.empty__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

.empty__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-muted);
  max-width: 42ch;
}

.empty__action { margin-top: 8px; }

/* ==========================================================================
   small shared helpers
   ========================================================================== */

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  margin-bottom: var(--gap-sm);
}

.divider { height: 1px; border: 0; margin: 0; background: var(--s-line-soft); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Registered for the super-admin screens: every glyph in assets/icons/ now
   resolves globally, so a screen no longer has to re-declare one it uses.
   (check-tick, view-list and download were previously screen-scoped only.) */
.icon[data-icon="act-company"]               { --icon: url(../assets/icons/act-company.svg); }
.icon[data-icon="act-user"]                  { --icon: url(../assets/icons/act-user.svg); }
.icon[data-icon="activity"]                  { --icon: url(../assets/icons/activity.svg); }
.icon[data-icon="admin-dashboard"]           { --icon: url(../assets/icons/admin-dashboard.svg); }
.icon[data-icon="admin-stat-agents"]         { --icon: url(../assets/icons/admin-stat-agents.svg); }
.icon[data-icon="admin-stat-orgs"]           { --icon: url(../assets/icons/admin-stat-orgs.svg); }
.icon[data-icon="admin-stat-revenue"]        { --icon: url(../assets/icons/admin-stat-revenue.svg); }
.icon[data-icon="admin-stat-stale"]          { --icon: url(../assets/icons/admin-stat-stale.svg); }
.icon[data-icon="admin-stat-users"]          { --icon: url(../assets/icons/admin-stat-users.svg); }
.icon[data-icon="admins"]                    { --icon: url(../assets/icons/admins.svg); }
.icon[data-icon="agent-manager"]             { --icon: url(../assets/icons/agent-manager.svg); }
.icon[data-icon="bell"]                      { --icon: url(../assets/icons/bell.svg); }
.icon[data-icon="calendar"]                  { --icon: url(../assets/icons/calendar.svg); }
.icon[data-icon="check-badge"]               { --icon: url(../assets/icons/check-badge.svg); }
.icon[data-icon="check-shield"]              { --icon: url(../assets/icons/check-shield.svg); }
.icon[data-icon="check-tick"]                { --icon: url(../assets/icons/check-tick.svg); }
.icon[data-icon="chevron-down-12"]           { --icon: url(../assets/icons/chevron-down-12.svg); }
.icon[data-icon="clock-field"]               { --icon: url(../assets/icons/clock-field.svg); }
.icon[data-icon="clock-hours"]               { --icon: url(../assets/icons/clock-hours.svg); }
.icon[data-icon="companies"]                 { --icon: url(../assets/icons/companies.svg); }
.icon[data-icon="download"]                  { --icon: url(../assets/icons/download.svg); }
.icon[data-icon="download-arrow"]            { --icon: url(../assets/icons/download-arrow.svg); }
.icon[data-icon="filter-thin"]               { --icon: url(../assets/icons/filter-thin.svg); }
.icon[data-icon="fullscreen"]                { --icon: url(../assets/icons/fullscreen.svg); }
.icon[data-icon="id-card"]                   { --icon: url(../assets/icons/id-card.svg); }
.icon[data-icon="info-alert"]                { --icon: url(../assets/icons/info-alert.svg); }
.icon[data-icon="info-circle"]               { --icon: url(../assets/icons/info-circle.svg); }
.icon[data-icon="invoices"]                  { --icon: url(../assets/icons/invoices.svg); }
.icon[data-icon="link"]                      { --icon: url(../assets/icons/link.svg); }
.icon[data-icon="logout-admin"]              { --icon: url(../assets/icons/logout-admin.svg); }
.icon[data-icon="mic"]                       { --icon: url(../assets/icons/mic.svg); }
.icon[data-icon="monitor"]                   { --icon: url(../assets/icons/monitor.svg); }
.icon[data-icon="monitor-stand"]             { --icon: url(../assets/icons/monitor-stand.svg); }
.icon[data-icon="pc-monitor"]                { --icon: url(../assets/icons/pc-monitor.svg); }
.icon[data-icon="pending-registrations"]     { --icon: url(../assets/icons/pending-registrations.svg); }
.icon[data-icon="rec-calendar"]              { --icon: url(../assets/icons/rec-calendar.svg); }
.icon[data-icon="rec-clock"]                 { --icon: url(../assets/icons/rec-clock.svg); }
.icon[data-icon="rec-device"]                { --icon: url(../assets/icons/rec-device.svg); }
.icon[data-icon="rec-monitor"]               { --icon: url(../assets/icons/rec-monitor.svg); }
.icon[data-icon="rec-video"]                 { --icon: url(../assets/icons/rec-video.svg); }
.icon[data-icon="reload"]                    { --icon: url(../assets/icons/reload.svg); }
.icon[data-icon="report-card"]               { --icon: url(../assets/icons/report-card.svg); }
.icon[data-icon="res-memory"]                { --icon: url(../assets/icons/res-memory.svg); }
.icon[data-icon="res-monitor"]               { --icon: url(../assets/icons/res-monitor.svg); }
.icon[data-icon="res-network"]               { --icon: url(../assets/icons/res-network.svg); }
.icon[data-icon="res-sync"]                  { --icon: url(../assets/icons/res-sync.svg); }
.icon[data-icon="reseller-management"]       { --icon: url(../assets/icons/reseller-management.svg); }
.icon[data-icon="reset"]                     { --icon: url(../assets/icons/reset.svg); }
.icon[data-icon="revenue-growth"]            { --icon: url(../assets/icons/revenue-growth.svg); }
.icon[data-icon="search-white-19"]           { --icon: url(../assets/icons/search-white-19.svg); }
.icon[data-icon="sec-alert"]                 { --icon: url(../assets/icons/sec-alert.svg); }
.icon[data-icon="sec-resolved"]              { --icon: url(../assets/icons/sec-resolved.svg); }
.icon[data-icon="sec-risk"]                  { --icon: url(../assets/icons/sec-risk.svg); }
.icon[data-icon="sec-ueba"]                  { --icon: url(../assets/icons/sec-ueba.svg); }
.icon[data-icon="settings"]                  { --icon: url(../assets/icons/settings.svg); }
.icon[data-icon="shopping-bag"]              { --icon: url(../assets/icons/shopping-bag.svg); }
.icon[data-icon="sms"]                       { --icon: url(../assets/icons/sms.svg); }
.icon[data-icon="speaker"]                   { --icon: url(../assets/icons/speaker.svg); }
.icon[data-icon="stat-absent"]               { --icon: url(../assets/icons/stat-absent.svg); }
.icon[data-icon="stat-agents"]               { --icon: url(../assets/icons/stat-agents.svg); }
.icon[data-icon="stat-present"]              { --icon: url(../assets/icons/stat-present.svg); }
.icon[data-icon="step-arrow"]                { --icon: url(../assets/icons/step-arrow.svg); }
.icon[data-icon="storage"]                   { --icon: url(../assets/icons/storage.svg); }
.icon[data-icon="user-placeholder"]          { --icon: url(../assets/icons/user-placeholder.svg); }
.icon[data-icon="user-solid"]                { --icon: url(../assets/icons/user-solid.svg); }
.icon[data-icon="verified-badge"]            { --icon: url(../assets/icons/verified-badge.svg); }
.icon[data-icon="view-grid"]                 { --icon: url(../assets/icons/view-grid.svg); }
.icon[data-icon="view-list"]                 { --icon: url(../assets/icons/view-list.svg); }

/* -- grid empty state ------------------------------------------------------
   Injected by js/list.js into a [data-grid] container when its filters
   match nothing. Spans the full grid row so the card keeps its shape.
   ------------------------------------------------------------------------ */

.grid-empty {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-muted);
}

/* ===== components/stat.css ===== */
/* ==========================================================================
   stat — the KPI tiles
   Figma: 24:653 gradient tile · 24:670/24:687/24:704 tinted tiles (242x160)
          88:641 outline row tile (251x102) · 301:1329 admin tile (199x102)

   Three shapes, one vocabulary:

   1. BLOCK  (dashboard, 160 tall) — icon top-left, trend chip top-right,
             label + big numeral bottom-left, corner arrow bottom-right.
   2. ROW    (timesheet / reports, 102 tall) — circular icon left, label over
             value right. White with an accent hairline.
   3. ADMIN  (platform dashboard, 102 tall) — tinted, circular gradient icon,
             label / value / trend stacked.

   Markup — block
   --------------
   <article class="stat stat--gradient">
     <span class="stat__icon"><span class="icon" data-icon="people"></span></span>
     <p class="stat__trend is-up">90%<span class="stat__period">This week</span></p>
     <h3 class="stat__label">Total Employees</h3>
     <p class="stat__value">15</p>
     <a class="stat__corner" href="employees-monitoring.html">
       <span class="sr-only">Open Total Employees</span>
     </a>
   </article>

   Markup — row
   ------------
   <article class="stat stat--row stat--blue">
     <span class="stat__icon stat__icon--circle">…</span>
     <div><h3 class="stat__label">Total Hours</h3><p class="stat__value">168h 30m</p></div>
   </article>

   Accent modifiers (set --stat-accent / --stat-tint / --stat-line / --stat-edge):
     .stat--blue .stat--green .stat--red .stat--amber .stat--purple .stat--magenta
   Trend direction:  .stat__trend.is-up (green) / .is-down (red)
   ========================================================================== */

.stat {
  --stat-accent: var(--c-green);
  --stat-tint: var(--t-green);
  --stat-line: var(--t-line-green);
  --stat-edge: var(--c-green-accent);

  position: relative;
  display: block;
  border-radius: var(--r-xl);
  background: var(--s-card);
  border: 1px solid transparent;
  padding: 13px 14px;
  min-height: 160px;
  color: var(--c-ink-4);
}

/* -- accents -------------------------------------------------------------- */

/* --stat-line is the hairline on a TINTED tile (soft pastel, 24:688/24:705);
   --stat-edge is the hairline on a WHITE row tile (full accent, 88:642). */
.stat--blue    { --stat-accent: var(--c-blue);      --stat-tint: var(--t-blue);    --stat-line: var(--t-line-blue);    --stat-edge: var(--c-blue-accent); }
.stat--green   { --stat-accent: var(--c-green);     --stat-tint: var(--t-green);   --stat-line: var(--t-line-green);   --stat-edge: var(--c-green-accent); }
.stat--red     { --stat-accent: var(--c-pink);      --stat-tint: var(--t-red);     --stat-line: var(--t-line-red);     --stat-edge: var(--c-pink); }
.stat--amber   { --stat-accent: var(--c-amber-ink); --stat-tint: var(--t-amber);   --stat-line: var(--t-line-amber);   --stat-edge: var(--c-amber-ink); }
.stat--purple  { --stat-accent: var(--c-purple);    --stat-tint: var(--t-purple);  --stat-line: var(--t-line-purple);  --stat-edge: var(--c-purple); }
.stat--magenta { --stat-accent: #af11a2;            --stat-tint: var(--t-magenta); --stat-line: var(--t-line-magenta); --stat-edge: #af6ba9; }

/* -- block variants ------------------------------------------------------- */

.stat--gradient {
  background: var(--g-blue-green-2);
  color: var(--c-on-brand);
}

.stat--tint {
  background: var(--stat-tint);
  border-color: var(--stat-line);
}

/* -- parts ---------------------------------------------------------------- */

.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);   /* gradient tile — 24:662 */
  color: var(--c-on-brand);
}

.stat--tint .stat__icon { background: var(--stat-accent); }

.stat__label {
  margin-top: 22px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: inherit;
}

.stat__value {
  margin-top: 8px;
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* Trend chip, pinned top-right of a block tile. */
.stat__trend {
  position: absolute;
  top: 13px;
  right: 15px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--s-card);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  color: var(--stat-accent);
  white-space: nowrap;
}

.stat--gradient .stat__trend { background: rgba(255, 255, 255, 0.1); }

.stat__trend::before {
  content: "";
  width: 14px;
  height: 9px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(../assets/icons/trend-arrow.svg) center / contain no-repeat;
  mask: url(../assets/icons/trend-arrow.svg) center / contain no-repeat;
}

/* Direction flips the glyph; it does NOT change the ink. On a tinted tile the
   chip always takes the tile's own accent — Figma's Online Agents tile shows a
   GREEN down-arrow (24:711 #21bf46) next to the red Absent tile (24:702
   #ff3336). Only the gradient tile has a fixed pair. The design's down-arrow
   is the up-arrow with a -1 vertical scale (relativeTransform 0,-1), which is
   what scaleY(-1) reproduces. */
.stat__trend.is-up    { color: var(--c-green-neon); }
.stat__trend.is-down  { color: var(--c-red); }
.stat__trend.is-down::before { transform: scaleY(-1); }

.stat--tint .stat__trend { color: var(--stat-accent); }

/* "This week" caption riding alongside the percentage. */
.stat__period {
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  margin-left: 3px;
}

.stat--gradient .stat__period { color: var(--s-line); }

/* Corner affordance — the small arrow bottom-right that opens the detail
   screen (24:668). Stretched to cover the tile so the whole tile is the hit
   target, with the glyph drawn in the corner. */
.stat__corner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.stat__corner::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 16px;
  height: 14px;
  background-color: var(--c-ink-4);
  -webkit-mask: url(../assets/icons/corner-arrow.svg) center / contain no-repeat;
  mask: url(../assets/icons/corner-arrow.svg) center / contain no-repeat;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}

.stat--gradient .stat__corner::after { background-color: var(--c-on-brand); }
.stat__corner:hover::after { transform: rotate(-45deg) translateX(3px); }

/* ==========================================================================
   ROW tile — icon left, label over value (timesheet, reports)
   ========================================================================== */

.stat--row {
  display: flex;
  align-items: center;
  gap: 19px;
  min-height: 102px;
  padding: 18px 17px;
  border-radius: var(--r-md);
  border-color: var(--stat-edge);
  background: var(--s-card);
}

.stat--row .stat__icon {
  width: 42px;
  height: 42px;
  background: var(--stat-accent);
  color: var(--c-on-brand);
}

.stat--row .stat__label {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--c-stat-label);
}

.stat--row .stat__value {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: var(--lh-body);
  font-weight: 700;
  color: var(--c-ink-4);
}

/* ==========================================================================
   ADMIN tile — tinted, gradient icon, trend footer (301:1329)
   ========================================================================== */

.stat--admin {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 102px;
  padding: 11px 14px;
  border-radius: var(--r-2xs);
  background: var(--stat-tint);
  border-color: var(--stat-line);
}

.stat--admin .stat__icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--stat-accent) 0%, color-mix(in srgb, var(--stat-accent) 40%, #000) 100%);
  color: var(--c-on-brand);
}

.stat--admin .stat__label {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--c-stat-label);
}

.stat--admin .stat__value {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-4);
}

.stat--admin .stat__trend {
  position: static;
  height: auto;
  padding: 0;
  margin-top: 6px;
  background: none;
  color: var(--c-green);
  font-weight: var(--fw-medium);
}

.stat--admin .stat__period { color: #2b2b2b; font-weight: var(--fw-regular); }

/* ==========================================================================
   Layout helper — the 4-up / 5-up strip these tiles always sit in.
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  gap: var(--gap-sm);
}

@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== components/table.css ===== */
/* ==========================================================================
   table — data tables
   Figma: 27:1382 employees (plain head, 52px rows, solid rules)
          24:607 dashboard card table (dashed rules, 14px head)
          232:2227 reports (solid #08476e head bar)
          235:3028 policies (green→blue gradient head bar, 48px rows)
          301:1464 admin "Recent Companies" + View all

   Markup
   ------
   <div class="table-wrap">
     <table class="table">
       <caption class="sr-only">Employees</caption>
       <thead><tr><th scope="col">Employee</th>…<th scope="col" class="table__right">Actions</th></tr></thead>
       <tbody>
         <tr>
           <td>
             <div class="table__user">
               <img class="avatar" src="…" width="40" height="40" alt="">
               <div><span class="table__name">Chandu</span>
                    <span class="table__mail">chandu@svss.co.in</span></div>
             </div>
           </td>
           <td>Developer</td>
           <td><span class="badge is-active">Active</span></td>
           <td><span class="dot is-online"></span>Online</td>
           <td class="table__right"><div class="table__actions">…icon buttons…</div></td>
         </tr>
       </tbody>
     </table>
   </div>

   Variants
   --------
   .table--dashed        dashed row rules (dashboard cards)
   .table--dark-head     solid #08476e header bar, white 18px
   .table--gradient-head green→blue header bar, white 14px semibold
   .table--compact       48px rows
   .table--card          adds the head/row inset used inside .card--table
   Cell helpers: .table__right .table__center .table__num
   Status words: .status.is-excellent | .is-good | .is-average | .is-poor
   ========================================================================== */

/* Every table scrolls sideways rather than squashing its columns. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-4);
}

.table th,
.table td {
  padding: 0 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.table th:first-child,
.table td:first-child { padding-left: 27px; }

.table th:last-child,
.table td:last-child  { padding-right: 27px; }

.table thead th {
  height: var(--h-row-head);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-rule);
}

.table tbody td {
  height: var(--h-row);
  border-bottom: 1px solid var(--c-rule);
}

/* The last row keeps its rule in the design — it reads as the table's floor. */
.table tbody tr:last-child td { border-bottom-color: transparent; }

/* -- cell helpers --------------------------------------------------------- */

.table__right  { text-align: right; }
.table__center { text-align: center; }

.table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__wrap-cell { white-space: normal; }

/* Employee identity cell — avatar + name over email (27:1431). */
.table__user {
  display: flex;
  align-items: center;
  gap: 5px;
}

.table__name,
.table__mail { display: block; }

.table__name {
  font-size: var(--fs-body);
  line-height: 21px;
  color: var(--c-ink-4);
}

.table__mail {
  font-size: var(--fs-xs);
  line-height: 20px;
  font-weight: var(--fw-light);
  color: var(--c-ink);
}

/* Trailing action cluster — 40px icon buttons, 3px apart (27:1425..27:1430). */
.table__actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.table__right .table__actions { justify-content: flex-end; }

/* Status rendered as a bare coloured word rather than a pill (24:623). */
.status {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-muted);
}

.status.is-excellent { color: var(--c-excellent); }
.status.is-good      { color: var(--c-good); }
.status.is-average   { color: var(--c-average); }
.status.is-poor      { color: var(--c-red); }
.status.is-active    { color: var(--c-excellent); }
.status.is-inactive  { color: var(--c-average); }

/* A totals row — heavier ink, no rule above it (Timesheet 107:1241). */
.table tfoot td,
.table__total td {
  height: var(--h-row);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  border-top: 1px solid var(--c-rule);
  border-bottom: 0;
}

/* -- rule styles ---------------------------------------------------------- */

/* Dashboard cards draw the row rules as a 3/3 dash (24:616). */
.table--dashed tbody td {
  border-bottom: 0;
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

.table--dashed thead th {
  font-size: var(--fs-sm);
  border-bottom-color: var(--c-rule);
}

.table--dashed tbody tr:last-child td { background-image: none; }

/* -- header bars ---------------------------------------------------------- */

.table--dark-head thead th,
.table--gradient-head thead th {
  color: var(--c-on-brand);
  border-bottom: 0;
}

.table--dark-head thead th {
  height: 62px;
  font-size: 18px;
  font-weight: var(--fw-medium);
  background: var(--c-thead);
}

.table--gradient-head thead th {
  height: 51px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: var(--g-thead);
}

/* Gradient stripes are painted per-cell, so give the strip a single
   background by letting the row own it too. */
.table--gradient-head thead tr { background: var(--g-thead); }
.table--gradient-head thead th { background: none; }

.table--dark-head tbody td,
.table--gradient-head tbody td {
  border-bottom: 0;
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

.table--dark-head tbody tr:last-child td,
.table--gradient-head tbody tr:last-child td { background-image: none; }

.table--dark-head tbody td { height: 67px; }

/* -- density -------------------------------------------------------------- */

.table--compact tbody td { height: 48px; }
.table--compact thead th { height: 51px; }
.table--roomy   tbody td { height: 67px; }

/* -- rank / progress cell (Top Applications, 232:2266) -------------------- */

.table__rank {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

.table__meter { min-width: 320px; white-space: normal; }

.table__meter-label {
  display: block;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--c-stat-label);
}

.table__meter-sub {
  color: var(--c-muted-2);
  margin-left: 8px;
  font-size: var(--fs-sm);
}

/* -- affordances ---------------------------------------------------------- */

/* "View all" — same 80x36 chip the dropdown uses (301:1466). */
.table__viewall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-btn-sm);
  padding: 0 14px;
  border-radius: var(--r-xs);
  background: var(--s-app);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  transition: background var(--dur) var(--ease);
}

.table__viewall:hover { background: var(--s-line-soft); }

.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: rgba(0, 0, 0, 0.015); }

.table__empty td {
  height: 160px;
  text-align: center;
  color: var(--c-muted);
  white-space: normal;
}

@media (max-width: 640px) {
  .table th:first-child,
  .table td:first-child { padding-left: var(--gap-sm); }
  .table th:last-child,
  .table td:last-child  { padding-right: var(--gap-sm); }
}

/* -- sortable headers ------------------------------------------------------
   js/list.js marks clickable headers with .is-sortable and stamps aria-sort
   on the active one. The arrow rides ::after so no markup changes.
   ------------------------------------------------------------------------ */

.table th.is-sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--dur) var(--ease);
}

.table th.is-sortable:hover { color: var(--c-ink-2); }

.table th.is-sortable::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.table th.is-sortable:hover::after { opacity: .35; border-top: 5px solid currentColor; }
.table th[aria-sort="ascending"]::after  { opacity: 1; border-bottom: 5px solid currentColor; border-top: 0; }
.table th[aria-sort="descending"]::after { opacity: 1; border-top: 5px solid currentColor; border-bottom: 0; }

/* ===== screens/activity-monitoring.css ===== */
/* ==========================================================================
   screen: activity-monitoring — Figma 38:2322 (1440 x 1268, tenant shell)

   The frame is a fixed 1440 layout. Everything below is measured off it and
   expressed relative to the content plate, whose left edge sits at x=359 and
   whose width is 1039. The vertical rhythm is NOT the shared --gap: this
   frame stacks its blocks 18px apart, and puts 21px between the header row
   and the KPI strip.

     y=105  header row (title + Date), 42 tall      38:2696 / 43:3
     y=168  KPI strip, 119 tall                     43:130 43:159 43:182 43:189
     y=305  chart row, 347 tall                     45:196 + 78:112
     y=670  Live Employee Activity, 347 tall        79:181
     y=1017 content ends

   Both chart SVGs use a viewBox whose origin is (card left, y=380) in frame
   coordinates, so every coordinate in the markup is the Figma number minus
   that origin. Nothing is drawn above y=380 in either plot.

   Everything is scoped under [data-screen="activity-monitoring"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header row — 38:2696 title + 43:3 Date button
   -------------------------------------------------------------------------- */

/* The button owns the row height (42, top at y=106); the title's smaller line
   box is nudged so its ink lands on y=112 the way the frame draws it. */
[data-screen="activity-monitoring"] .am-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--h-btn);
  padding-top: 1px;
  margin-bottom: 20px;
}

/* 38:2696 is Poppins Medium 25/24 #1c1c21 — a step down from the shared
   .page-title (30/36 semibold). Scoped rather than forked. */
[data-screen="activity-monitoring"] .page-title {
  position: relative;
  top: -3px;
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin: 0;
}

/* 43:5 — 117x42, r6, --g-btn. Glyph at +22, label at +50. */
[data-screen="activity-monitoring"] .am-date {
  width: 117px;
  gap: 11px;
  padding: 0 26px 0 22px;
  margin-left: auto;
}

[data-screen="activity-monitoring"] .am-date__icon {
  --icon: url(../assets/icons/calendar.svg);   /* 86:634 */
  width: 17px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   KPI strip — 43:130 / 43:159 / 43:182 / 43:189
   251x119 tiles, 4-up with an 11.7px gutter across 1039.
   Each tile is a .stat/.stat--tint whose accent vocabulary is re-pointed at
   this frame's near-white tints and full-strength edges.
   -------------------------------------------------------------------------- */

[data-screen="activity-monitoring"] .am-kpis {
  gap: 12px;
  margin-bottom: 18px;
}

[data-screen="activity-monitoring"] .am-kpi {
  min-height: 119px;
  padding: 0;
  border-radius: var(--r-panel);
}

[data-screen="activity-monitoring"] .am-kpi--green {
  --stat-tint: var(--t-kpi-green);
  --stat-line: var(--c-green);
  --am-bar: var(--c-kpi-bar-green);
  --am-ink: var(--c-green);
  --am-label-w: 108px;
  --am-base-y: 72px;
  --am-spark-y: 44px;
}

[data-screen="activity-monitoring"] .am-kpi--blue {
  --stat-tint: var(--t-kpi-blue);
  --stat-line: var(--c-blue);
  --am-bar: var(--c-blue);
  --am-ink: var(--c-blue);
  --am-label-w: 83px;
  --am-base-y: 52px;
  --am-spark-y: 44px;
}

[data-screen="activity-monitoring"] .am-kpi--red {
  --stat-tint: var(--t-kpi-red);
  --stat-line: var(--c-pink);
  --am-bar: var(--c-pink);
  --am-ink: var(--c-pink);
  --am-label-w: 108px;
  --am-base-y: 76px;
  --am-spark-y: 40px;
}

[data-screen="activity-monitoring"] .am-kpi--purple {
  --stat-tint: var(--t-kpi-purple);
  --stat-line: var(--c-purple-edge);
  --am-bar: var(--c-purple-bar);
  --am-ink: var(--c-purple-bar);
  --am-label-w: 49px;
  --am-base-y: 56px;
  --am-spark-y: 43px;
}

/* 43:134 — 3x42 pill down the left edge. */
[data-screen="activity-monitoring"] .am-kpi__bar {
  position: absolute;
  left: 21px;
  top: 18px;
  width: 3px;
  height: 42px;
  border-radius: var(--r-pill);
  background: var(--am-bar);
}

/* 43:132 — Poppins Medium 16/24 #545454, wrapped at the frame's own width. */
[data-screen="activity-monitoring"] .am-kpi .stat__label {
  position: absolute;
  left: 34px;
  top: 16px;
  width: var(--am-label-w);
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--c-stat-label);
}

/* 43:133 — Poppins Bold 20/24 black. */
[data-screen="activity-monitoring"] .am-kpi .stat__value {
  position: absolute;
  left: 34px;
  top: 78px;
  margin: 0;
  font-size: 20px;
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--c-ink-4);
}

/* 43:136 — 94px dashed rule in the tile's accent. Its height above the
   sparkline differs per tile, which is why --am-base-y is per-tile. */
[data-screen="activity-monitoring"] .am-kpi__base {
  position: absolute;
  right: 23px;
  top: var(--am-base-y);
  width: 94px;
  height: 1px;
  /* The frame's dash is a tight 3-on / 1-off; a CSS dashed border renders
     4-on / 1-off in Blink, so paint it instead. */
  background-image: linear-gradient(to right, var(--am-ink) 0 3px, transparent 3px 4px);
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

/* 43:135 — 78x20.5 sparkline with the export's coloured glow. */
[data-screen="activity-monitoring"] .am-kpi__spark {
  position: absolute;
  right: 31px;
  top: var(--am-spark-y);
  width: 78px;
  height: 20.5px;
}

[data-screen="activity-monitoring"] .am-kpi__spark--tall { height: 26px; }

[data-screen="activity-monitoring"] .am-kpi__spark .chart__line {
  --line: var(--am-ink);
  --line-w: 1;
}

/* --------------------------------------------------------------------------
   Chart row — 45:196 (483 wide) + 78:112 (539 wide), 17px apart
   -------------------------------------------------------------------------- */

[data-screen="activity-monitoring"] .am-charts {
  display: grid;
  grid-template-columns: 483fr 539fr;
  gap: 17px;
  margin-bottom: 18px;
  align-items: start;
}

/* Both chart cards: head at +25 so the 36px Month chip lands on y=330 and the
   20px title on y=338, then the plot at +75 (frame y=380). */
[data-screen="activity-monitoring"] .am-panel--line,
[data-screen="activity-monitoring"] .am-panel--bars {
  min-height: 347px;
}

/* The Month chip is hung off the right edge, and the two chart cards do not
   agree on that inset in the frame: 29 on 45:202, 35 on 78:118. */
[data-screen="activity-monitoring"] .am-panel--line .card__head {
  padding: 25px 29px 0 var(--card-pad);
}

[data-screen="activity-monitoring"] .am-panel--bars .card__head {
  padding: 25px 34px 0 var(--card-pad);
}

[data-screen="activity-monitoring"] .am-panel--line .am-panel__body,
[data-screen="activity-monitoring"] .am-panel--bars .am-panel__body {
  padding: 14px 0 0;
}

/* 45:203 — the Month chip is 80 wide in this frame, tighter than the shared
   .dropdown__toggle rhythm. */
[data-screen="activity-monitoring"] .am-period {
  gap: 2px;
  padding: 0 10px 0 14px;
}

/* -- plot chrome ---------------------------------------------------------- */

[data-screen="activity-monitoring"] .am-chart {
  --chart-tick: var(--fs-xs);
}

[data-screen="activity-monitoring"] .am-chart .chart__gridline {
  stroke: var(--c-grid-2);
}

/* 47:428 / 78:138 — the value axis is left-aligned against the plate, not
   right-aligned into the axis, and rides at 90% opacity. */
[data-screen="activity-monitoring"] .am-ticks--y .chart__tick {
  text-anchor: start;
  fill: var(--c-muted);
  opacity: 0.9;
}

/* -- line chart — 76:29 green, 76:30 blue (5px strokes) ------------------- */

[data-screen="activity-monitoring"] .am-line { --line-w: 5; }
[data-screen="activity-monitoring"] .am-line--green { --line: var(--c-green); }
[data-screen="activity-monitoring"] .am-line--blue  { --line: var(--c-blue); }

/* 86:636 — a static callout, no border, r10, soft ambient shadow. */
[data-screen="activity-monitoring"] .am-tip {
  width: 68px;
  height: 48px;
  padding: 7px 0 0;
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: var(--sh-tip);
}

[data-screen="activity-monitoring"] .am-tip__label {
  font-size: var(--fs-xs);
  line-height: 17px;
  color: var(--c-tip-label);
}

[data-screen="activity-monitoring"] .am-tip__value {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-regular);
  color: var(--c-tip-value);
}

/* 86:637 — the pointer, 13 wide x 11.25 tall, hung off the bubble's floor. */
[data-screen="activity-monitoring"] .am-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  border-top: 11.25px solid var(--s-card);
  /* white on a white card — it only reads because of the export's shadow. */
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.10));
}

/* -- grouped bars — 78:146 … 78:164 -------------------------------------- */

[data-screen="activity-monitoring"] .am-bar--active  { --bar: var(--c-series-active); }
[data-screen="activity-monitoring"] .am-bar--idle    { --bar: var(--c-green); }
[data-screen="activity-monitoring"] .am-bar--offline { --bar: var(--c-blue); }

/* 79:180 — centred under the plot, 13px swatches, ~43px between items. */
[data-screen="activity-monitoring"] .am-legend {
  justify-content: center;
  gap: 8px 43px;
  margin-top: 14px;
}

[data-screen="activity-monitoring"] .am-legend .chart__swatch {
  width: 13px;
  height: 13px;
}

[data-screen="activity-monitoring"] .am-legend .chart__legend-item { gap: 8px; }

/* --------------------------------------------------------------------------
   Live Employee Activity — 79:181
   Head at +20 (title +32 from the card's left edge, chip 20 in from the
   right). Header row and body rows are both 56 tall, which puts the three
   dashed rules on y=838 / 894 / 950 exactly.
   -------------------------------------------------------------------------- */

[data-screen="activity-monitoring"] .am-panel--table { min-height: 347px; }

[data-screen="activity-monitoring"] .am-panel--table .card__head {
  padding: 20px 20px 0 32px;
}

[data-screen="activity-monitoring"] .am-panel--table .am-panel__body { padding: 0; }

/* 79:189 — the rules start 16px in from the card edge, so the table does too
   and the first column pays back the difference. */
[data-screen="activity-monitoring"] .am-table-wrap { padding-left: 16px; }

/* Both bands are 56 tall, but the frame sets its text low inside them — the
   asymmetric top padding reproduces that without moving the rules. */
[data-screen="activity-monitoring"] .am-table th {
  padding: 13px 0 0;
}

[data-screen="activity-monitoring"] .am-table td {
  padding: 8px 0 0;
}

[data-screen="activity-monitoring"] .am-table th:first-child,
[data-screen="activity-monitoring"] .am-table td:first-child {
  padding-left: 17px;
}

/* 79:204 — the head carries no rule at all in this frame: Line 53 is white
   at 8% opacity, i.e. deliberately invisible. */
[data-screen="activity-monitoring"] .am-table thead th {
  height: 56px;
  border-bottom: 0;
}

[data-screen="activity-monitoring"] .am-table tbody td { height: 56px; }

/* Column geometry, measured from the text runs at 79:203 / 79:215 / 79:209 /
   79:193 / 79:232 / 79:222 and expressed against the 1021px table body. */
[data-screen="activity-monitoring"] .am-table th:nth-child(1) { width: 21.45%; }
[data-screen="activity-monitoring"] .am-table th:nth-child(2) { width: 20.18%; }
[data-screen="activity-monitoring"] .am-table th:nth-child(3) { width: 14.50%; }
[data-screen="activity-monitoring"] .am-table th:nth-child(4) { width: 17.53%; }
[data-screen="activity-monitoring"] .am-table th:nth-child(5) { width: 15.38%; }
[data-screen="activity-monitoring"] .am-table th:nth-child(6) { width: 10.97%; }

/* --------------------------------------------------------------------------
   Reflow. The frame is a fixed 1440 desktop; below the chart row's natural
   width the two plots stack, and the KPI strip follows .stat-grid.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="activity-monitoring"] .am-charts {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="activity-monitoring"] .am-panel--line,
  [data-screen="activity-monitoring"] .am-panel--bars,
  [data-screen="activity-monitoring"] .am-panel--table {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  [data-screen="activity-monitoring"] .am-head { flex-wrap: wrap; }

  [data-screen="activity-monitoring"] .am-panel--line .card__head,
  [data-screen="activity-monitoring"] .am-panel--bars .card__head,
  [data-screen="activity-monitoring"] .am-panel--table .card__head {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }
}

/* ===== screens/activity-tracking.css ===== */
/* ==========================================================================
   activity-tracking — Figma 229:2 (1440 x 1279), tenant shell

   The whole screen is one flat white plate, 1039 x 473 at (360,171). It has
   NO radius and NO border — 229:225 is a plain rectangle, confirmed pixel by
   pixel against the render, so .card is used for its surface and the chrome
   is switched off with a scoped modifier rather than by forking the component.

   Geometry read off the frame (all coordinates in frame space):

     plate        229:225   360..1399 x 171..644   #fff, square corners
     filter bar   229:226   389..1370 x 200..252   six controls, 12px apart
     department   229:230   389..615  (226 wide)
     employee     229:254   627..866  (239 wide)
     date from    229:280   878..989  (111 wide)
     "to"         229:278   1001
     date to      229:310   1026..1137 (111 wide)
     Search       229:302   1151..1370 (219 wide), r6, #0092ba -> #428b0a
     empty panel  229:332   389..1370 x 275..577   r10, #f5f6f9 @50%
     avatar disc  229:334   77px white circle, drop shadow
     pager        229:340   42px buttons at 389 and 1328, y 592
   ========================================================================== */

[data-screen="activity-tracking"] {
  /* Two hues this frame introduces that the token set does not carry yet.
     Both are measured, not derived. */
  --actrk-placeholder: #a7b8cd;   /* avatar glyph + pager arrows  229:335/229:344 */
  --actrk-pager-line: #e5eaf2;    /* pager button hairline        229:342         */
}

/* The frame draws its heading at 25/24 Poppins Medium #1c1c21 (229:330), not
   the 30px semibold that base.css hands every screen. Scoped so the shared
   rule is left alone — see the report: this belongs in base.css once, for all
   23 screens, rather than 23 times here. */
[data-screen="activity-tracking"] .page-title {
  font-size: 25px;
  line-height: var(--lh-stat);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  /* The frame sets the 24px text box at y=114, 33px clear of the plate at 171;
     the shell's own padding lands it at 104, hence the 11px nudge. */
  margin-top: 11px;
  margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   The plate
   -------------------------------------------------------------------------- */

[data-screen="activity-tracking"] .actrk {
  border: 0;
  border-radius: 0;
  padding: 29px 29px 10px;      /* 200-171, 389-360, 644-634 */
}

/* --------------------------------------------------------------------------
   Filter bar — 229:226
   The two selects carry the slack so the row still ends flush against the
   plate's right edge when the shell is a couple of pixels off 1440.
   -------------------------------------------------------------------------- */

[data-screen="activity-tracking"] .actrk__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-screen="activity-tracking"] .actrk__control {
  position: relative;
  min-width: 0;
}

/* Growth factors, not fixed widths: the plate is a hair narrower than the
   frame's 1039, and the two selects should absorb that rather than the
   fixed-width date pair. 226:239 reproduces 229:230 and 229:254 to <1px. */
[data-screen="activity-tracking"] .actrk__control--dept     { flex: 226 1 0; }
[data-screen="activity-tracking"] .actrk__control--employee { flex: 239 1 0; }
[data-screen="activity-tracking"] .actrk__control--date     { flex: 0 0 111px; }

[data-screen="activity-tracking"] .actrk__range {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
}

/* 15/20 Poppins Regular, true black — the design uses the same ink for the
   select value and for the date placeholder (229:231, 229:281). */
[data-screen="activity-tracking"] .actrk__select,
[data-screen="activity-tracking"] .actrk__input {
  height: 52px;
  padding: 0 32px 0 50px;       /* 17 gutter + 21.5 glyph + 11.5 gap */
  border-radius: var(--r-sm);
  line-height: var(--lh-xs);
  color: #000;
}

/* The date pair leaves 15px between glyph and text where the selects leave 12
   (229:291 vs 229:242), so they get their own gutter. */
[data-screen="activity-tracking"] .actrk__input { padding: 0 18px 0 53px; }
[data-screen="activity-tracking"] .actrk__input::placeholder { color: #000; opacity: 1; }

/* The chevron is its own 13x7 export at the design's #828282, so the shared
   background-image chevron is switched off. */
[data-screen="activity-tracking"] .actrk__select {
  background-image: none;
}

[data-screen="activity-tracking"] .actrk__lead,
[data-screen="activity-tracking"] .actrk__chevron {
  position: absolute;
  top: 50%;
  pointer-events: none;
}

/* 21.46 rather than the node's 20px box: the export carries the 1.7 stroke,
   which Figma paints outside the geometry, so the glyph reads 21.5 x 20.7. */
[data-screen="activity-tracking"] .actrk__lead {
  left: 17px;
  margin-top: -11px;
  --icon-size: 21.5px;
  color: #000;
}

[data-screen="activity-tracking"] .actrk__chevron {
  /* The export carries a 0.5px stroke margin, so the 13x7 box paints the
     design's 12x6 glyph. 229:232 sits 13 in, 229:256 17 in — split at 15. */
  right: 15px;
  width: 13px;
  height: 7px;
  margin-top: -4px;
}

[data-screen="activity-tracking"] .actrk__to {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-xs);
  color: #000;
}

/* 229:302 — 219x52. The glyph and label sit left, 13px in, with the rest of
   the button empty; that is how the frame draws it. */
[data-screen="activity-tracking"] .actrk__submit {
  flex: 0 0 219px;
  height: 52px;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 13px;
}

/* 229:305 is a 19px box whose 1.4 stroke overflows to 20.4 painted pixels. */
[data-screen="activity-tracking"] .actrk__submit-icon {
  flex: none;
  width: 20.4px;
  height: 20.4px;
}

/* --------------------------------------------------------------------------
   Empty state — 229:331
   The panel fill and hairline are the design's #f5f6f9 / #e0e4ea at 50%,
   written as rgba so the half-opacity lands on the plate and not on the
   contents the way an `opacity` would.
   -------------------------------------------------------------------------- */

[data-screen="activity-tracking"] .actrk__empty {
  align-content: start;
  gap: 0;
  min-height: 302px;
  margin-top: 23px;
  /* 302 outer = 1 + 75 + 77 disc + 12 + 20 title + 9 + 52 copy + 55 + 1. */
  padding: 75px 24px 55px;
  border: 1px solid rgba(224, 228, 234, 0.5);
  border-radius: var(--r-panel);
  background: rgba(245, 246, 249, 0.5);
}

/* 229:334 — 77px white disc. The Figma effect is dilate 4 / offset -1,2 /
   blur 2 at black 4%. */
[data-screen="activity-tracking"] .actrk__empty-icon {
  width: 77px;
  height: 77px;
  margin-bottom: 12px;
  background: var(--s-card);
  box-shadow: -1px 2px 4px 4px rgba(0, 0, 0, 0.04);
}

[data-screen="activity-tracking"] .actrk__empty-icon img {
  width: 34px;
  height: 36px;
}

[data-screen="activity-tracking"] .actrk__empty-title {
  font-size: 18px;
  line-height: var(--lh-xs);
  font-weight: var(--fw-regular);
  color: #000;
}

[data-screen="activity-tracking"] .actrk__empty-text {
  max-width: 290px;
  margin-top: 9px;
  font-size: var(--fs-body);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: #000;
}

/* --------------------------------------------------------------------------
   Pager — 229:340
   -------------------------------------------------------------------------- */

[data-screen="activity-tracking"] .actrk__pager {
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
}

[data-screen="activity-tracking"] .actrk__pager-btn {
  width: 42px;
  height: 42px;
  min-width: 0;
  padding: 0;
  border-radius: var(--r-sm);
  border-color: var(--actrk-pager-line);
}

[data-screen="activity-tracking"] .actrk__pager-arrow {
  --icon-size: 15px;
  color: var(--actrk-placeholder);
}

/* One arrow export serves both directions — the frame mirrors it for "back". */
[data-screen="activity-tracking"] .actrk__pager-arrow--prev { transform: scaleX(-1); }

[data-screen="activity-tracking"] .actrk__pager-info {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: #000;
}

/* --------------------------------------------------------------------------
   Narrow widths
   The six-across row needs roughly 980px of plate. Below that it breaks into
   two rows with the date pair kept intact, then stacks; the Search button goes
   full width so it never ends up as a 219px orphan.
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {
  [data-screen="activity-tracking"] .actrk__toolbar { flex-wrap: wrap; }
  [data-screen="activity-tracking"] .actrk__control--dept,
  [data-screen="activity-tracking"] .actrk__control--employee { flex: 1 1 230px; }
  [data-screen="activity-tracking"] .actrk__range { flex: 1 1 300px; }
  [data-screen="activity-tracking"] .actrk__control--date { flex: 1 1 130px; }
  [data-screen="activity-tracking"] .actrk__submit { margin-left: auto; }
}

@media (max-width: 900px) {
  [data-screen="activity-tracking"] .actrk { padding: 20px 20px 10px; }
  [data-screen="activity-tracking"] .page-title { margin-top: 0; margin-bottom: var(--gap); }
}

@media (max-width: 640px) {
  [data-screen="activity-tracking"] .page-title { font-size: 22px; margin-bottom: 20px; }
  [data-screen="activity-tracking"] .actrk { padding: 16px 16px 10px; }
  [data-screen="activity-tracking"] .actrk__control--dept,
  [data-screen="activity-tracking"] .actrk__control--employee,
  [data-screen="activity-tracking"] .actrk__range { flex: 1 1 100%; }
  [data-screen="activity-tracking"] .actrk__control--date { flex: 1 1 0; }
  [data-screen="activity-tracking"] .actrk__submit {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
  }
  [data-screen="activity-tracking"] .actrk__empty {
    min-height: 0;
    padding: 48px 16px 40px;
  }
  /* The two 111px date fields shed their glyph before their text. */
  [data-screen="activity-tracking"] .actrk__range .actrk__lead { display: none; }
  [data-screen="activity-tracking"] .actrk__input { padding-left: 18px; }
}

/* ===== screens/activity.css ===== */
/* ==========================================================================
   Activity — platform-wide event stream
   ========================================================================== */

[data-screen="activity"] .ac-chart { margin: 0; }

[data-screen="activity"] .ac-chart .chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

[data-screen="activity"] .ac-chart .chart__bar { --bar: var(--c-blue); }

[data-screen="activity"] .ac-chart .chart__ticks--x .chart__tick { text-anchor: middle; }
[data-screen="activity"] .ac-chart .chart__ticks--y .chart__tick { text-anchor: end; }

/* -- category bars ---------------------------------------------------------
   The default 96px label column clips "Agent check-in"; these labels are the
   widest thing in the card so they get the room.
   ------------------------------------------------------------------------ */

[data-screen="activity"] .ac-cats {
  --hbar-label-w: 108px;
  --hbar-h: 18px;
  --hbar-gap: 16px;
}

[data-screen="activity"] .ac-cats .hbar__label { font-size: var(--fs-xs); }
[data-screen="activity"] .ac-cats .hbar__fill  { --fill: var(--g-blue-green); }

/* The event description is the widest column and the one worth wrapping. */
[data-screen="activity"] .table td:first-child { min-width: 260px; white-space: normal; }

/* ===== screens/admin-announcements.css ===== */
/* ==========================================================================
   Announcements (admin)
   ========================================================================== */

[data-screen="admin-announcements"] .field + .field,
[data-screen="admin-announcements"] .an-row + .field { margin-top: 18px; }

[data-screen="admin-announcements"] .an-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  [data-screen="admin-announcements"] .an-row { grid-template-columns: minmax(0, 1fr); }
}

[data-screen="admin-announcements"] .an-row .field { margin-top: 0; }

/* Two per row on wide, one on narrow — four checkboxes in a single column
   pushes the form actions well below the fold. */
[data-screen="admin-announcements"] .an-audience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 8px;
}

@media (max-width: 520px) {
  [data-screen="admin-announcements"] .an-audience { grid-template-columns: minmax(0, 1fr); }
}

[data-screen="admin-announcements"] .an-audience .check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-4);
  cursor: pointer;
}

[data-screen="admin-announcements"] .form-actions { margin-top: 22px; }

[data-screen="admin-announcements"] .an-timeline { padding-top: 2px; }

/* ===== screens/admin-dashboard.css ===== */
/* ==========================================================================
   screen: admin-dashboard — Figma 301:1226 (super-admin, 1440 x 1816)

   Everything is scoped under [data-screen="admin-dashboard"]. The screen is
   composed from the shared components (card, stat, table, chart/donut/meter,
   list, badge/dot, dropdown, overflow-btn, icon); the rules below carry only
   the measurements this frame uses that differ from the component defaults,
   and each one names the node it came from.

   Content column 361 -> 1396 (1035 wide), five rows:
     1  5 x 199 tiles, 10px apart                      y 151 .. 253
     2  Company Growth 664 + 17 + System Overview 354  y 270 .. 617
     3  Agent Versions 344 + 19 + Recent Companies 670 y 636 .. 983
     4  Resource Usage 580 + 21 + Recent Activities432 y 1000 .. 1412
     5  Recent Agents 670 + 19 + Quick Actions 344     y 1435 .. 1782
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page frame
   301:1328 draws the heading in a 24px box at y=105, and the first tile row
   starts at 151 — a 22px drop rather than the shell's default 24.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .page-title {
  line-height: 24px;
  margin-bottom: 22px;
}

[data-screen="admin-dashboard"] .pd { display: grid; gap: 19px; }

[data-screen="admin-dashboard"] .pd__row { display: grid; align-items: start; }

/* Card widths + gutters, straight off the frame. */
[data-screen="admin-dashboard"] .pd__row--a { grid-template-columns: 664fr 354fr; gap: 17px; }
[data-screen="admin-dashboard"] .pd__row--b { grid-template-columns: 344fr 670fr; gap: 19px; }
[data-screen="admin-dashboard"] .pd__row--c { grid-template-columns: 580fr 432fr; gap: 21px; }
[data-screen="admin-dashboard"] .pd__row--d { grid-template-columns: 670fr 344fr; gap: 19px; }

/* --------------------------------------------------------------------------
   Cards
   Every panel on this frame is r=15 with the standard #e6e6e6 hairline
   (301:1397, 301:1444, 301:1465, 301:1515, 301:1536, 301:1592, 301:1658,
   301:1703) — a step tighter than the tenant dashboard's r=23.
   The head is top-aligned, not centred: the trailing control sits higher than
   the title on every card in this frame.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card { border-radius: var(--r-panel-lg); }

[data-screen="admin-dashboard"] .pd-card > .card__head {
  align-items: flex-start;
  min-height: 0;
  padding: var(--pd-head-t) var(--pd-head-r) 0 var(--pd-head-l);
}

[data-screen="admin-dashboard"] .pd-card > .card__head > .card__title {
  margin-top: var(--pd-title-dy, 0);
}

[data-screen="admin-dashboard"] .pd-card > .card__body { padding: var(--pd-body-t) 0 0; }

/* --------------------------------------------------------------------------
   Row 1 — KPI tiles (301:1329 / 1343 / 1356 / 1370 / 1383)
   199 x 102, r=5, a 0.5px DASHED accent hairline over a pastel tint. The icon
   sits 22px from the top rather than centred, and the label/value/trend column
   starts at x+73.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-tiles { gap: 10px; }

[data-screen="admin-dashboard"] .pd-tile {
  align-items: flex-start;
  gap: 17px;
  padding: 11px 14px;
  border-style: dashed;
  background: var(--stat-tint);
  border-color: var(--stat-line);
}

[data-screen="admin-dashboard"] .pd-tile .stat__icon { margin-top: 11px; }

[data-screen="admin-dashboard"] .pd-tile__body { min-width: 0; }

[data-screen="admin-dashboard"] .pd-tile .stat__trend {
  margin-top: 7px;
  color: var(--c-green);              /* 301:1340 — always green, both ways */
}

/* Tints + hairlines, measured per tile. */
[data-screen="admin-dashboard"] .pd-tile--users   { --stat-tint: #fff4fe; --stat-line: #af6ba9; }
[data-screen="admin-dashboard"] .pd-tile--orgs    { --stat-tint: #ebfff6; --stat-line: #26b075; }
[data-screen="admin-dashboard"] .pd-tile--agents  { --stat-tint: #fff6f0; --stat-line: #d6620e; }
[data-screen="admin-dashboard"] .pd-tile--revenue { --stat-tint: #f7f1ff; --stat-line: #7728dd; }
[data-screen="admin-dashboard"] .pd-tile--stale   { --stat-tint: #ffeff3; --stat-line: #db2754; }

/* Total Users and Organizations export their disc AND glyph as one 42px vector
   (301:1332, 301:1345), so the disc is the artwork rather than a CSS fill. */
[data-screen="admin-dashboard"] .pd-tile--users .stat__icon,
[data-screen="admin-dashboard"] .pd-tile--orgs .stat__icon { background: none; }

[data-screen="admin-dashboard"] .pd-tile__art { width: 42px; height: 42px; }

/* The other three draw a 180deg gradient disc with a white glyph on top
   (301:1360, 301:1373, 301:1386). */
[data-screen="admin-dashboard"] .pd-tile--agents .stat__icon  { background: linear-gradient(180deg, #d6620e 0%, #703307 100%); }
[data-screen="admin-dashboard"] .pd-tile--revenue .stat__icon { background: linear-gradient(180deg, #7728dd 0%, #401677 100%); }
[data-screen="admin-dashboard"] .pd-tile--stale .stat__icon   { background: linear-gradient(180deg, #db2754 0%, #75152d 100%); }

/* --------------------------------------------------------------------------
   Company Growth (301:1396)
   Head: title at +22, "Week" chip at +18 hard against a 19px right gutter.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--growth {
  --pd-head-t: 18px; --pd-head-r: 19px; --pd-head-l: 26px;
  --pd-title-dy: 4px; --pd-body-t: 4px;
}

/* 301:1406..1423 — #a1a4b5 at 60%, 2/2 dash, on both axes. */
[data-screen="admin-dashboard"] .pd-growth .chart__gridline { stroke: var(--c-grid-2); }

[data-screen="admin-dashboard"] .pd-growth__y .chart__tick { fill: var(--c-muted); opacity: 0.9; }
[data-screen="admin-dashboard"] .pd-growth__x .chart__tick { fill: var(--c-muted-4); text-anchor: middle; }
[data-screen="admin-dashboard"] .pd-growth .chart__tick { font-size: 13px; }

/* 301:1442 / 301:1597..1605 — one 2px #1a76bd stroke, nine 8px dots. */
[data-screen="admin-dashboard"] .pd-growth__line { --line: #1a76bd; --line-w: 2; }
[data-screen="admin-dashboard"] .pd-growth__dots .chart__point { fill: #1a76bd; stroke: none; }

/* 301:1438 — the static callout: white r=10 plate, 15px pointer, 0/0/4/3 shadow. */
[data-screen="admin-dashboard"] .pd-growth__tip rect,
[data-screen="admin-dashboard"] .pd-growth__tip path { fill: var(--s-card); }
[data-screen="admin-dashboard"] .pd-growth__tip { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.08)); }

[data-screen="admin-dashboard"] .pd-growth__tip-label,
[data-screen="admin-dashboard"] .pd-growth__tip-value {
  font-family: var(--ff);
  font-size: 13px;
  text-anchor: middle;
}

[data-screen="admin-dashboard"] .pd-growth__tip-label { fill: var(--c-tip-label); }
[data-screen="admin-dashboard"] .pd-growth__tip-value { fill: var(--c-tip-value); }

/* --------------------------------------------------------------------------
   System Overview (301:1443)
   The only tinted panel on the frame: #f4fffa plate, mint period chip.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--system {
  --pd-head-t: 15px; --pd-head-r: 15px; --pd-head-l: 24px;
  --pd-title-dy: 8px; --pd-body-t: 48px;
  background: #f4fffa;                /* 301:1444 */
}

[data-screen="admin-dashboard"] .pd-card--system > .card__body { padding-bottom: 36px; }

/* 301:1454 — the chip is mint here, not --s-app. */
[data-screen="admin-dashboard"] .pd-dd--mint { background: #daffe4; }
[data-screen="admin-dashboard"] .pd-dd--mint:hover { background: #c8f7d6; }

/* 301:1458 — 144px ring: 18px track, 21.6px segments, ~2.5deg gaps. */
[data-screen="admin-dashboard"] .pd-donut {
  --donut-size: 144px;
  margin: 0 auto;
}

[data-screen="admin-dashboard"] .pd-donut .donut__ring {
  stroke: var(--c-donut-track);
  stroke-width: 18;
  opacity: 0.3;
}

[data-screen="admin-dashboard"] .pd-donut .donut__seg { stroke-width: 21.6; }
[data-screen="admin-dashboard"] .pd-donut__seg--online  { stroke: #d32651; }
[data-screen="admin-dashboard"] .pd-donut__seg--warning { stroke: #6f26ce; }
[data-screen="admin-dashboard"] .pd-donut__seg--offline { stroke: #239b44; }

[data-screen="admin-dashboard"] .pd-donut .donut__value {
  font-size: 25px;
  line-height: 30px;
  color: var(--c-ink-0);
}

/* 301:1445..1450 — 16px swatches, 13px labels, 8px apart, 38px between items. */
[data-screen="admin-dashboard"] .pd-legend {
  gap: 12px 38px;
  padding-left: 24px;
  margin-top: 44px;
}

[data-screen="admin-dashboard"] .pd-legend .chart__legend-item { gap: 8px; color: var(--c-ink-0); }
[data-screen="admin-dashboard"] .pd-legend .chart__swatch { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Agent Version Distribution (301:1513)
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--versions {
  --pd-head-t: 22px; --pd-head-r: 20px; --pd-head-l: 28px;
  --pd-title-dy: 0; --pd-body-t: 21px;
}

[data-screen="admin-dashboard"] .pd-card--versions > .card__body { padding-bottom: 21px; }

/* 301:1517..1522 — #484a56 at 70%, 2/2 dash. Heavier than the growth grid. */
[data-screen="admin-dashboard"] .pd-versions .chart__gridline { stroke: var(--c-grid); }

[data-screen="admin-dashboard"] .pd-versions .chart__tick { font-size: 13px; opacity: 0.8; }
[data-screen="admin-dashboard"] .pd-versions__y .chart__tick { fill: var(--c-tick-y); }
[data-screen="admin-dashboard"] .pd-versions__x .chart__tick { fill: var(--c-tick-x); }

/* 301:1523/1524/1525/1531 — square-cornered #1a76bd columns, 25 wide. */
[data-screen="admin-dashboard"] .pd-versions .chart__bar { fill: #1a76bd; }

/* --------------------------------------------------------------------------
   Tables — Recent Companies (301:1464) and Recent Agents (301:1657)
   Both share one rhythm: a 50px header with NO rule under it (Line 53 is a
   white 8% line, i.e. invisible), then 55px rows split by the 3/3 dashed rule.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--companies,
[data-screen="admin-dashboard"] .pd-card--agentlist {
  --pd-head-t: 20px; --pd-head-r: 20px; --pd-head-l: 27px;
  --pd-title-dy: 4px; --pd-body-t: 8px;
}

[data-screen="admin-dashboard"] .pd-card--companies > .card__body,
[data-screen="admin-dashboard"] .pd-card--agentlist > .card__body { padding-bottom: 13px; }

[data-screen="admin-dashboard"] .pd-table {
  table-layout: fixed;
  min-width: 0;
}

[data-screen="admin-dashboard"] .pd-table th,
[data-screen="admin-dashboard"] .pd-table td {
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-screen="admin-dashboard"] .pd-table th:first-child,
[data-screen="admin-dashboard"] .pd-table td:first-child { padding-left: 27px; }

[data-screen="admin-dashboard"] .pd-table th:last-child,
[data-screen="admin-dashboard"] .pd-table td:last-child { padding-right: 20px; }

/* 301:1476 / 301:1673 — 14px SemiBold #636674, and no rule beneath. */
[data-screen="admin-dashboard"] .pd-table thead th {
  height: 50px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-bottom: 0;
}

/* 301:1477 etc — 15px Regular #0a0a0a. */
[data-screen="admin-dashboard"] .pd-table tbody td { height: 55px; }

/* 301:1669..1672 — the agent state is plain ink here, not a status colour. */
[data-screen="admin-dashboard"] .pd-agent-state { color: var(--c-ink-4); }

/* --------------------------------------------------------------------------
   Resource Usage (301:1534)
   Five 44px rows, 21px apart: 42px gradient disc, name over an 8px bar in a
   #f1f1f1 track, percentage in a 40px gutter column.

   NOTE: the frame's bar rects are drawn at 217/295/217/163/287 of a 418px
   track, which does not agree with the percentages printed beside them. The
   printed values are the real data, so the fills bind to those.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--resource {
  --pd-head-t: 22px; --pd-head-r: 19px; --pd-head-l: 30px;
  --pd-title-dy: 4px; --pd-body-t: 39px;
}

[data-screen="admin-dashboard"] .pd-card--resource > .card__body { padding-bottom: 29px; }

[data-screen="admin-dashboard"] .pd-res { display: grid; gap: 21px; padding: 0 18px 0 32px; }

[data-screen="admin-dashboard"] .pd-res__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 40px;
  column-gap: 13px;
  align-items: start;
  height: 44px;
}

[data-screen="admin-dashboard"] .pd-res__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: 2px;
  border-radius: var(--r-pill);
}

[data-screen="admin-dashboard"] .pd-res__name {
  display: block;
  font-size: var(--fs-h3);
  line-height: 23px;
  color: var(--c-stat-label);
}

[data-screen="admin-dashboard"] .pd-res__main .meter__track {
  margin-top: 6px;
  height: 8px;
  background: #f1f1f1;                /* 301:1547 */
}

[data-screen="admin-dashboard"] .pd-res__value {
  margin-top: 19px;
  margin-left: 4px;
  font-size: var(--fs-h3);
  line-height: 23px;
  color: var(--c-stat-label);
  font-variant-numeric: tabular-nums;
}

/* Disc gradient + bar ink, one pair per row (301:1543/1548, 1553/1558,
   1563/1568, 1573/1578, 1583/1588). */
[data-screen="admin-dashboard"] .pd-res__row--cpu     .pd-res__disc { background: linear-gradient(180deg, #2d77fb 0%, #051e4a 100%); }
[data-screen="admin-dashboard"] .pd-res__row--memory  .pd-res__disc { background: linear-gradient(180deg, #a20f96 0%, #63045b 100%); }
[data-screen="admin-dashboard"] .pd-res__row--disk    .pd-res__disc { background: linear-gradient(180deg, #239b44 0%, #053b14 100%); }
[data-screen="admin-dashboard"] .pd-res__row--network .pd-res__disc { background: linear-gradient(180deg, #e26d12 0%, #602d04 100%); }
[data-screen="admin-dashboard"] .pd-res__row--cpu2    .pd-res__disc { background: linear-gradient(180deg, #db2754 0%, #6a021c 100%); }

[data-screen="admin-dashboard"] .pd-res__row--cpu     .meter__fill { background: #2d77fb; }
[data-screen="admin-dashboard"] .pd-res__row--memory  .meter__fill { background: #a20f96; }
[data-screen="admin-dashboard"] .pd-res__row--disk    .meter__fill { background: #239b44; }
[data-screen="admin-dashboard"] .pd-res__row--network .meter__fill { background: #e26d12; }
[data-screen="admin-dashboard"] .pd-res__row--cpu2    .meter__fill { background: #c7214a; }

/* 301:1538 — the "…" chip is 28x26 here, not the component's 22 square. */
[data-screen="admin-dashboard"] .pd-overflow { width: 28px; height: 26px; }

/* --------------------------------------------------------------------------
   Recent Activities (301:1591)
   379 x 59 tinted rows, r=5, 10px apart; 38px disc; the timestamp sits in a
   fixed 86px column, left aligned, not flushed right.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--activities {
  --pd-head-t: 21px; --pd-head-r: 21px; --pd-head-l: 28px;
  --pd-title-dy: 2px; --pd-body-t: 14px;
}

[data-screen="admin-dashboard"] .pd-card--activities > .card__body { padding-bottom: 16px; }

[data-screen="admin-dashboard"] .pd-feed { gap: 10px; padding: 0 26px 0 27px; }

[data-screen="admin-dashboard"] .pd-feed__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 86px;
  column-gap: 13px;
  align-items: center;
  min-height: 59px;
  padding: 0 0 0 9px;
  border: 0;
  border-radius: var(--r-2xs);
}

[data-screen="admin-dashboard"] .pd-feed__row .list__title {
  font-size: var(--fs-xs);
  line-height: 20px;
  color: var(--c-ink-0);
}

[data-screen="admin-dashboard"] .pd-feed__row .list__meta {
  font-size: var(--fs-2xs);
  line-height: 24px;
  color: var(--c-ink);
}

[data-screen="admin-dashboard"] .pd-feed__row .list__time { line-height: 24px; }

/* Measured tints — a shade off the component presets (301:1607, 1618, 1628,
   1638, 1648). The discs already match --list-accent. */
[data-screen="admin-dashboard"] .pd-feed__row.list__row--red    { --list-bg: #fff0f4; }
[data-screen="admin-dashboard"] .pd-feed__row.list__row--blue   { --list-bg: #ebf7ff; }
[data-screen="admin-dashboard"] .pd-feed__row.list__row--amber  { --list-bg: #fff3ea; }
[data-screen="admin-dashboard"] .pd-feed__row.list__row--purple { --list-bg: #f8f3ff; }
[data-screen="admin-dashboard"] .pd-feed__row.list__row--green  { --list-bg: #e2ffea; }

/* --------------------------------------------------------------------------
   Quick Actions (301:1701)
   Six 35px rows on a 48px pitch, split by full-bleed 3/3 dashed rules that run
   the whole 344 width of the card. The NE arrow sits 16px lower than the label.
   -------------------------------------------------------------------------- */

[data-screen="admin-dashboard"] .pd-card--quick {
  --pd-head-t: 20px; --pd-head-r: 18px; --pd-head-l: 18px;
  --pd-title-dy: 0; --pd-body-t: 25px;
}

[data-screen="admin-dashboard"] .pd-card--quick > .card__body { padding-bottom: 7px; }

[data-screen="admin-dashboard"] .pd-qa li { margin-bottom: 12px; }

[data-screen="admin-dashboard"] .pd-qa li:not(:last-child) {
  padding-bottom: 11px;
  border-bottom: 1px dashed var(--c-rule-dash-soft);
}

[data-screen="admin-dashboard"] .pd-qa li:last-child { margin-bottom: 0; }

[data-screen="admin-dashboard"] .pd-qa__row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 0 21px 0 18px;
  color: var(--qa, var(--c-green));
}

[data-screen="admin-dashboard"] .pd-qa__dot {
  margin: 6px 0 0;
  background: var(--qa, var(--c-green));
}

[data-screen="admin-dashboard"] .pd-qa__label {
  font-size: var(--fs-xs);
  line-height: 24px;
  color: var(--c-ink-0);
}

/* 301:1708 — the shared 16x13 arrow turned NE; its rotated box is 19px. */
[data-screen="admin-dashboard"] .pd-qa__go {
  --icon-size: 15px;
  margin: 16px 0 0 auto;
}

[data-screen="admin-dashboard"] .pd-qa__row:hover .pd-qa__label { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Narrower viewports
   The frame is a fixed 1440 desktop layout; below that every row collapses to
   one column and the tables fall back to the shared horizontal scroller.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="admin-dashboard"] .pd__row--a,
  [data-screen="admin-dashboard"] .pd__row--b,
  [data-screen="admin-dashboard"] .pd__row--c,
  [data-screen="admin-dashboard"] .pd__row--d { grid-template-columns: minmax(0, 1fr); gap: 19px; }

  [data-screen="admin-dashboard"] .pd-table { min-width: 620px; }
}

@media (max-width: 640px) {
  [data-screen="admin-dashboard"] .pd-res { padding: 0 16px; }
  [data-screen="admin-dashboard"] .pd-feed { padding: 0 16px; }
  [data-screen="admin-dashboard"] .pd-res__row { grid-template-columns: 42px minmax(0, 1fr) 40px; }
  [data-screen="admin-dashboard"] .pd-feed__row { grid-template-columns: 38px minmax(0, 1fr) 76px; }
}

/* ===== screens/agent-manager.css ===== */
/* ==========================================================================
   Agent Manager
   ========================================================================== */

[data-screen="agent-manager"] .am-versions { margin: 0; }

[data-screen="agent-manager"] .am-versions .chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Bars are the admin blue of the Platform Dashboard's version chart, not the
   tenant green, so the two admin charts read as one family. */
[data-screen="agent-manager"] .am-versions .chart__bar { --bar: var(--c-blue); }

[data-screen="agent-manager"] .am-versions .chart__ticks--x .chart__tick,
[data-screen="agent-manager"] .am-versions .chart__ticks--y .chart__tick {
  text-anchor: middle;
}

[data-screen="agent-manager"] .am-versions .chart__ticks--y .chart__tick {
  text-anchor: end;
}

/* -- platform split -------------------------------------------------------- */

[data-screen="agent-manager"] .am-split { display: grid; gap: 6px; }

[data-screen="agent-manager"] .am-split .list__row { align-items: center; }

/* The meter sits right of the label pair and takes the remaining width.
   .table__meter is deliberately not used here — its 320px minimum is sized for
   a table cell, not a card list. */
[data-screen="agent-manager"] .am-split__meter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 clamp(120px, 42%, 220px);
}

[data-screen="agent-manager"] .am-split__meter .meter { flex: 1 1 auto; }

[data-screen="agent-manager"] .am-split__meter .meter__value {
  font-size: var(--fs-sm);
  min-width: 34px;
  text-align: right;
}

[data-screen="agent-manager"] .am-split .list__title {
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--c-ink-2);
  font-weight: var(--fw-medium);
}

/* list__title and list__meta are inline spans by default, which runs the
   platform name and its agent count together on one line. */
[data-screen="agent-manager"] .am-split .list__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

[data-screen="agent-manager"] .am-split .list__meta {
  font-size: var(--fs-xs);
  line-height: 17px;
}

/* ===== screens/announcements.css ===== */
/* ==========================================================================
   Announcements — Figma 235:4912 (1440 x 1255), tenant shell.

   The sparest screen in the portal: a title row carrying the gradient
   "Create Announcements" button, then one white card holding a six-column
   table of 13 rows. No toolbar, no card head, no pager — the frame really
   is only those two objects.

   Geometry, all read off 235:5157 (the card: x=361 y=163, 1039 x 867):

     card        361..1400 · r23 · 1px #e6e6e6            235:5158 export
     title       25/24 Poppins Medium #1c1c21             235:5149
     button      281x42 · r6 · #0092ba -> #428b0a         235:5150 / 235:5152
     head cells  y=191, 14px Poppins SemiBold #636674      235:5175
     row band    62px pitch — 52px of content, 10px gap    235:5182
     row rule    1px #323232 @30%, 3/3 dash, inset 15px on
                 the left, flush to the card's right edge  235:5183
     columns     Title 394 · Type 636 · Target(pill) 757 ·
                 Status 919 · Created 1079 · Actions 1282

   Two things in the frame that look like mistakes but are transcribed as
   drawn rather than "fixed":

     - the column the header calls "Target" holds the active/inactive pill,
       and the one it calls "Status" holds a hostname (anydesk.exe /
       facebook.com). Whoever wires this to an API should check the mapping.
     - 235:5171 draws a 579px line under the first two headers, but it
       renders at zero contrast (sampled: pure white at y=224). No header
       rule is painted here.
   ========================================================================== */

[data-screen="announcements"] {
  /* Three tints this frame draws that sit a shade off the shared ramp. Kept
     local rather than pushed into tokens.css because they are one screen's
     worth of drift, not a new rung. Each is the shared hex at the frame's
     own opacity. */
  --ann-pill-green: rgba(194, 244, 208, 0.5);  /* 235:5384 — --t-pill-green-2 @50% */
  --ann-pill-red:   rgba(255, 235, 240, 0.5);  /* 235:5388 — --t-row-rose     @50% */
  --ann-chip-green: rgba(210, 255, 222, 0.6);  /* 235:5191 — #d2ffde         @60% */

  /* Column widths. Measured in px from the card's inner left edge, then
     written as fractions of the frame's 1037px inner width so they hold
     their proportions against the shell's slightly narrower content column
     (1036 rather than the frame's 1039). */
  --ann-c1: 26.5188%;   /* 275 — Title    → Type    at 275 */
  --ann-c2: 11.6683%;   /* 121 — Type     → Target  at 396 */
  --ann-c3: 15.6220%;   /* 162 — Target   → Status  at 558 */
  --ann-c4: 15.4291%;   /* 160 — Status   → Created at 718 */
  --ann-c5: 19.5757%;   /* 203 — Created  → Actions at 921 */
  --ann-c6: 11.1861%;   /* 116 — Actions  → 1037           */
}

/* --------------------------------------------------------------------------
   Title row — 235:5143 area. The title box and the button are centred on the
   same line (y=124) and the row sits 18px above the card.
   -------------------------------------------------------------------------- */

[data-screen="announcements"] .ann-head {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-bottom: 18px;
}

[data-screen="announcements"] .ann-head__title {
  /* 235:5149 measures 25/24 Poppins Medium #1c1c21 — a step below the 30px
     .page-title that base.css sets from the Dashboard frame. */
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin-bottom: 0;
}

/* 235:5150. The label is a 231px centred box beginning 2px after a 22.5px
   plus-circle that is itself inset 18px from the button's left edge, which is
   why the horizontal padding is lopsided. */
[data-screen="announcements"] .ann-create {
  width: 281px;
  margin-left: auto;
  padding: 0 8px 0 18px;
  gap: 2px;
}

[data-screen="announcements"] .ann-create__icon { --icon-size: 22.5px; }

[data-screen="announcements"] .ann-create__label {
  flex: 1;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Card + table
   -------------------------------------------------------------------------- */

/* The scroller lives edge to edge inside the card, so clip it to the r23. */
[data-screen="announcements"] .ann-card { overflow: hidden; }

[data-screen="announcements"] .ann-table {
  table-layout: fixed;
  /* Below this the six columns start colliding, so the card scrolls instead.
     Kept under the 1033px the card offers at 1440 so the desktop layout
     never opens a scrollbar. */
  min-width: 1010px;
  /* Rules are painted per row, not per cell, so nothing here collapses. */
  border-collapse: separate;
  border-spacing: 0;
}

[data-screen="announcements"] .ann-table th,
[data-screen="announcements"] .ann-table td {
  padding: 0;
  white-space: nowrap;
}

[data-screen="announcements"] .ann-col--title   { width: var(--ann-c1); }
[data-screen="announcements"] .ann-col--type    { width: var(--ann-c2); }
[data-screen="announcements"] .ann-col--target  { width: var(--ann-c3); }
[data-screen="announcements"] .ann-col--status  { width: var(--ann-c4); }
[data-screen="announcements"] .ann-col--created { width: var(--ann-c5); }
[data-screen="announcements"] .ann-col--actions { width: var(--ann-c6); }

/* Title copy starts 33px inside the card (394 against a card at 361). */
[data-screen="announcements"] .ann-table th:first-child,
[data-screen="announcements"] .ann-table td:first-child { padding-left: 33px; }

/* "Target" and "Actions" are centred over the pill and the button pair rather
   than flush with them, which lands both headings 15px into their column
   (235:5177 centres on 795.5, 235:5378 on 1323). */
[data-screen="announcements"] .ann-table thead th:nth-child(3),
[data-screen="announcements"] .ann-table thead th:nth-child(6) { padding-left: 15px; }

[data-screen="announcements"] .ann-table thead th {
  /* 66, not 67: the frame measures 163 → 230 from the card's outer edge, and
     the card's own 1px border eats the first of those pixels here. */
  height: 66px;
  padding-bottom: 18px;      /* drops the 21px line onto y=191..212 */
  vertical-align: bottom;
  font-size: var(--fs-sm);
  line-height: 21px;
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  border-bottom: 0;
}

[data-screen="announcements"] .ann-table tbody td {
  height: 62px;              /* 52px of content, then the 10px row gap */
  padding-bottom: 10px;
  vertical-align: middle;
  font-size: var(--fs-body);
  line-height: 23px;
  border-bottom: 0;
  background-image: none;
}

/* The rule belongs to the row, not to the cell: it has to run unbroken from
   15px inside the card's left edge all the way to its right edge, and a
   per-cell tile would reset the 3/3 dash at every column boundary. */
[data-screen="announcements"] .ann-table tbody tr {
  background-image: repeating-linear-gradient(
      to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: no-repeat;
  background-size: calc(100% - 15px) 1px;
  background-position: bottom 10px right 0;
}

/* The last row draws no rule; it just runs out onto the card's floor, which
   sits 3px below it (row band 974..1026, card bottom 1029). */
[data-screen="announcements"] .ann-table tbody tr:last-child { background-image: none; }

[data-screen="announcements"] .ann-table tbody tr:last-child td {
  height: 55px;
  padding-bottom: 3px;
}

/* The action pair is flush with the top of the 52px content box, not centred
   on it — 235:5188 sits at the row band's y, 6px above the text's midline. */
[data-screen="announcements"] .ann-table td:last-child { vertical-align: top; }

/* --------------------------------------------------------------------------
   Row furniture
   -------------------------------------------------------------------------- */

/* 235:5384 / 235:5388 — a fixed 77x32 pill, so the two words never size it
   differently. Ink is the shared --c-green / --c-pink; only the tint moves. */
[data-screen="announcements"] .ann-table .badge {
  width: 77px;
  min-width: 0;
  padding: 0 8px;
}

[data-screen="announcements"] .ann-table .badge.is-active   { --badge-bg: var(--ann-pill-green); }
[data-screen="announcements"] .ann-table .badge.is-inactive { --badge-bg: var(--ann-pill-red); }

/* 235:5191 exports at rx=3 and 235:5188 at rx=4 — a one-pixel slip in the
   frame, kept because it is what the file says. */
[data-screen="announcements"] .ann-table .icon-btn { border-radius: 4px; }

[data-screen="announcements"] .ann-table .icon-btn--green {
  --ib-bg: var(--ann-chip-green);
  border-radius: 3px;
}

[data-screen="announcements"] .ann-table .icon-btn--green .icon { --icon-size: 19px; }
[data-screen="announcements"] .ann-table .icon-btn--red   .icon { --icon-size: 19.5px; }

/* --------------------------------------------------------------------------
   Narrow widths. The table keeps its designed column rhythm and scrolls
   sideways inside the card; only the title row reflows.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  [data-screen="announcements"] .ann-head {
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }

  [data-screen="announcements"] .ann-create {
    width: 100%;
    margin-left: 0;
  }
}

/* ===== screens/app-categories.css ===== */
/* ==========================================================================
   App & Website Categories — Figma 235:4117 (1440x1255, tenant shell)

   The screen is a heading row over one white card. Nothing here is new
   geometry: it is the shared .card, .select, .table, .icon-btn and .btn
   primitives with this frame's measurements layered on top. Every number
   below carries the node it was read from.

   Vertical model of the card (235:4609 — y 163..1208, so exactly 1045 tall):

       21   card padding-top                       -> selects at y 184
       52   filter selects        235:4660/235:4709   ends 236
       20   gap                                     -> table at y 256
       43   thead                                   -> its floor at y 299
       68   first row  (6 top pad + 52 band + 10)   -> band 305..357
    12x62   rows 2..13 (52 band + 10 gap)           -> band 13 ends 1101
       52   last row   (no rule, no gap)            -> band 1111..1163
       45   card padding-bottom                     -> card ends 1208
      ----
     1045   (44px of that padding is CSS; the card's own 1px stroke is the
             45th, because Figma measures the stroked box)

   The header has NO visible rule: Line 53 (235:4616) exports as
   stroke="white" opacity="0.08" on a white card. The only rules are the row
   rules, Line 54 (235:4617) — #323232 @30%, 3/3 dash — which start 16px
   inside the card and run flush to its right edge.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading row — 235:4354 title + 235:4571 button, both centred on y=124
   -------------------------------------------------------------------------- */

[data-screen="app-categories"] .apc-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--h-btn);   /* the 42px button sets the row */
  margin-bottom: 16px;        /* row ends 147, card starts 163 */
}

/* 235:4354 is Poppins Medium 25/24 #1c1c21 — the same step down from the
   shared 30px .page-title that Status Dashboard and the Gallery use. */
[data-screen="app-categories"] .apc-head .page-title {
  margin: 0;
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* 235:4573 — 187x42, r6, --g-btn. Glyph 21px (22.5 with its 1.5 stroke) at
   x=1228, label at x=1255, so 16 / 6 / 20 across the button. */
[data-screen="app-categories"] .apc-add {
  margin-left: auto;
  width: 187px;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 20px 0 16px;
}

[data-screen="app-categories"] .apc-add__icon { --icon-size: 22.5px; }

/* --------------------------------------------------------------------------
   Card + filter row
   -------------------------------------------------------------------------- */

/* Plain .card is already r23 / #e6e6e6 / white — 235:4609 exports exactly
   that. Only the vertical gutters are this screen's own. */
[data-screen="app-categories"] .apc-card {
  padding-top: 21px;
  padding-bottom: 44px;
}

[data-screen="app-categories"] .apc-filters {
  display: flex;
  align-items: center;
  gap: 13px;                  /* 586 -> 599 */
  padding: 0 23px;            /* card left 361, first select 386 */
  margin-bottom: 20px;        /* selects end 236, table head starts 256 */
}

[data-screen="app-categories"] .apc-filter { flex: none; }
[data-screen="app-categories"] .apc-filter--dept { width: 200px; }  /* 235:4660 */
[data-screen="app-categories"] .apc-filter--type { width: 148px; }  /* 235:4709 */

/* The chevron on this frame is the 12x6 #828282 export (235:4665), not the
   9x5 black one the base .select carries. */
[data-screen="app-categories"] .apc-select {
  background-image: url(../assets/icons/chevron-down-12.svg);
  background-size: 12px 6px;
  background-position: right 17px center;
}

[data-screen="app-categories"] .apc-filter--type .apc-select {
  background-position: right 20px center;   /* 727 -> 747 */
}

/* --------------------------------------------------------------------------
   Table — six columns, 1039 wide, measured off the text origins
       Name 394 · Department 576 · Type 772 · Pattern 950 · Category 1129
       action cluster 1274 · card right edge 1400
   -------------------------------------------------------------------------- */

/* The shell gives this table 1034px of card interior where the frame drew
   1039, so the columns are expressed as percentages of 1034 chosen to land
   each text origin on its Figma x: 31 / 213 / 409 / 587 / 766 / 911 from the
   table's left edge. Widths therefore read 213 196 178 179 145 123. */
[data-screen="app-categories"] .apc-table {
  table-layout: fixed;
  min-width: 860px;
}

[data-screen="app-categories"] .apc-col--name     { width: 20.5996%; }  /* 213 */
[data-screen="app-categories"] .apc-col--dept     { width: 18.9555%; }  /* 196 */
[data-screen="app-categories"] .apc-col--type     { width: 17.2147%; }  /* 178 */
[data-screen="app-categories"] .apc-col--pattern  { width: 17.3114%; }  /* 179 */
[data-screen="app-categories"] .apc-col--category { width: 14.0232%; }  /* 145 */
[data-screen="app-categories"] .apc-col--actions  { width: 11.8956%; }  /* 123 */

/* Columns are positioned by the colgroup, so every cell is flush-left. */
[data-screen="app-categories"] .apc-table th,
[data-screen="app-categories"] .apc-table td {
  padding-left: 0;
  padding-right: 0;
}

[data-screen="app-categories"] .apc-table th:first-child,
[data-screen="app-categories"] .apc-table td:first-child { padding-left: 31px; }

[data-screen="app-categories"] .apc-table th:last-child,
[data-screen="app-categories"] .apc-table td:last-child  { padding-right: 40px; }

/* -- head (235:4631 etc — Poppins SemiBold 14 #636674, no rule) ----------- */

[data-screen="app-categories"] .apc-table thead th {
  height: 43px;               /* 256..299 */
  padding-bottom: 4px;        /* label centred on 276.5, not on the band */
  font-size: var(--fs-sm);
  border-bottom: 0;
}

/* "Actions" (235:4656) sits at 1286, 12px inside its column. */
[data-screen="app-categories"] .apc-table thead th:last-child { padding-left: 12px; }

/* -- body ----------------------------------------------------------------- */

[data-screen="app-categories"] .apc-table tbody td {
  height: 62px;               /* 52 band + 10 gap under the rule */
  padding-bottom: 10px;
  border-bottom: 0;
  color: var(--c-ink-4);
}

/* 6px of air between the (invisible) head floor at 299 and the band at 305. */
[data-screen="app-categories"] .apc-table tbody tr:first-child td {
  height: 68px;
  padding-top: 6px;
}

/* The action cluster is NOT centred on the row: every pair sits flush with
   the top of its 52px band (235:4716 y=305 in a 305..357 band, and the same
   in every following row), 6px above the text's own centre line. */
[data-screen="app-categories"] .apc-table tbody td:last-child { vertical-align: top; }

/* Last band 1111..1163 — no rule beneath it and no trailing gap. */
[data-screen="app-categories"] .apc-table tbody tr:last-child td {
  height: 52px;
  padding-bottom: 0;
}

/* Line 54 (235:4617): #323232 @30%, 3/3 dash, inset 16px from the card's
   outer edge and flush to its right, drawn 10px above the next band. */
[data-screen="app-categories"] .apc-table tbody tr { position: relative; }

[data-screen="app-categories"] .apc-table tbody tr:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 0;
  bottom: 10px;
  height: 1px;
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-size: 6px 1px;
  pointer-events: none;
}

/* -- row actions ---------------------------------------------------------- */
/* 40x40 buttons 3px apart (235:4719 green, 235:4716 red). The exported groups
   carry their own plate: green rx3 #d2ffde @60%, red rx4 #ffd7e1 @50% — the
   red one is already .icon-btn--red exactly, the green plate is a shade
   deeper than the shared tint, so it is restated here. */

[data-screen="app-categories"] .apc-btn--edit {
  --ib-bg: rgba(210, 255, 222, 0.6);
  border-radius: 3px;
  padding-top: 3px;           /* glyph box sits at y=12 in a 40 box, not 10.5 */
}

[data-screen="app-categories"] .apc-btn--delete {
  border-radius: 4px;
  padding-top: 2px;
}

/* Both glyphs are non-square, and the mask is `contain`, so the box size is
   the glyph's longer edge: edit 18x19, trash 18.5x19.5. */
[data-screen="app-categories"] .apc-btn--edit .icon   { --icon-size: 19px; }
[data-screen="app-categories"] .apc-btn--delete .icon { --icon-size: 19.5px; }

/* --------------------------------------------------------------------------
   Narrow widths — the design is a fixed 1440 desktop frame, so below the
   shell's own breakpoints the head row stacks and the table keeps its own
   scroller rather than crushing six columns.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  [data-screen="app-categories"] .apc-card {
    padding-top: var(--gap-sm);
    padding-bottom: var(--gap);
  }

  [data-screen="app-categories"] .apc-filters { padding: 0 var(--gap-sm); }
}

@media (max-width: 640px) {
  [data-screen="app-categories"] .apc-head {
    display: block;
    margin-bottom: var(--gap-sm);
  }

  [data-screen="app-categories"] .apc-head .page-title {
    font-size: 22px;
    margin-bottom: var(--gap-sm);
  }

  [data-screen="app-categories"] .apc-add { margin-left: 0; }

  /* Below 640 the two selects no longer hold "All Departments" side by side,
     so each takes its own row rather than truncating its label. */
  [data-screen="app-categories"] .apc-filters { flex-wrap: wrap; gap: 10px; }
  [data-screen="app-categories"] .apc-filter { flex: 1 1 100%; width: auto; }

  [data-screen="app-categories"] .apc-table th:first-child,
  [data-screen="app-categories"] .apc-table td:first-child { padding-left: var(--gap-sm); }

  [data-screen="app-categories"] .apc-table th:last-child,
  [data-screen="app-categories"] .apc-table td:last-child  { padding-right: var(--gap-sm); }

  [data-screen="app-categories"] .apc-table tbody tr::after { left: 0; }
}

/* ===== screens/audio.css ===== */
/* ==========================================================================
   Audio — Figma 218:699 (1440 x 1279, tenant shell)

   Three blocks, all built on shared components:

     1. a 4-up strip of .stat tiles (109 tall, r=6) — the same block/label/
        value/corner vocabulary as the dashboard tile, but short, with the
        icon plate moved to the top-right and a caption under the numeral.
     2. .card "Select a PC" (251x503, r=18) — a .search plus a hand-rolled
        row list; the rows are not a table, they are a single-select control.
     3. .card holding a full-bleed #093d65 stage (769x235) over the Audio
        Control block.

   Everything below is scoped to [data-screen="audio"]. Values that only this
   screen uses are declared once here as --audio-* so no raw hex appears in a
   rule; each carries the node it was measured from. Nothing in css/tokens.css,
   css/base.css or css/components/ is edited.
   ========================================================================== */

[data-screen="audio"] {
  /* Stat tile gradients — 218:1547 / 218:1558 / 218:1569 / 218:1580.
     All four run bottom-left to top-right. */
  --audio-g-pcs:      linear-gradient(56.31deg, #a5730e 3%,    #be1b44 78.65%);
  --audio-g-selected: linear-gradient(56.31deg, #c741d3 3%,    #3d0b8b 78.65%);
  --audio-g-saved:    linear-gradient(56.31deg, #1fb849 3%,    #00631b 78.65%);
  /* Stream: Figma's own stop pair (9.45/78.79) saturates the bottom-left
     corner; the ramp is re-anchored so the four sampled corners land on the
     frame's own values (#1465d3 / #0a749b / #047e78). */
  --audio-g-stream:   linear-gradient(54.03deg, #1761e4 -9.6%,  #047e78 77.5%);

  /* Picker card + rows */
  --audio-card-line: #e0e5f0;   /* 221:1596 stroke                          */
  --audio-row-sel:   linear-gradient(106.38deg, #0d7229 3.04%, #07497b 81.67%); /* 221:1636 */
  --audio-row-rule:  rgba(217, 217, 217, 0.5);  /* 221:1657 #d9d9d9 @50%    */
  --audio-name:      #4c4c4c;   /* 221:1648                                 */
  --audio-live:      #00ff46;   /* 221:1639 + the 5px presence dot 221:1641 */

  /* Avatar discs — 221:1651 / 221:1662 / 221:1601 / 221:1612 / 221:1623 */
  --audio-av-blue:   #086bb7;
  --audio-av-purple: #521da4;
  --audio-av-green:  #087827;
  --audio-av-red:    #d21846;
  --audio-av-teal:   #009b82;

  /* Listening stage — 221:1693 plate, 221:1718 disc, 224:1784 microphone */
  --audio-stage:      #093d65;
  --audio-disc:       #265376;
  --audio-disc-line:  #678094;
  --audio-mic:        #9bbdd6;

  --audio-listen:     #26b44d;  /* 221:1749 Listen Address                  */
}

/* The screen draws its own 25px Medium heading (218:1027), not the 30px
   SemiBold one base.css sets for the dashboard, and hangs it 10px lower so
   the tile strip lands on y=162 exactly as the frame does. */
[data-screen="audio"] .page-title {
  margin: 10px 0 var(--gap);
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* ==========================================================================
   1. Summary tiles — 218:1543 (4 x 251x109, 11.66 apart)
   ========================================================================== */

[data-screen="audio"] .audio-summary {
  column-gap: 11.66px;
  row-gap: 12px;
}

[data-screen="audio"] .stat--audio {
  min-height: 109px;
  padding: 14px 20px 0;
  border: 0;
  border-radius: var(--r-xs);
}

[data-screen="audio"] .audio-tile--pcs      { background: var(--audio-g-pcs); }
[data-screen="audio"] .audio-tile--selected { background: var(--audio-g-selected); }
[data-screen="audio"] .audio-tile--saved    { background: var(--audio-g-saved); }
[data-screen="audio"] .audio-tile--stream   { background: var(--audio-g-stream); }

/* 218:1549 — a 34px white@10% disc holding the same people glyph the
   dashboard tiles use, but pinned top-right instead of top-left. */
[data-screen="audio"] .stat--audio .stat__icon {
  position: absolute;
  top: 12px;
  right: 21px;
  width: 34px;
  height: 34px;
  --icon-size: 16px;
}

[data-screen="audio"] .stat--audio .stat__label {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  padding-right: 46px;           /* keeps a long label clear of the disc */
}

[data-screen="audio"] .stat--audio .stat__value {
  margin-top: 6px;
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  font-weight: var(--fw-semibold);
}

/* 218:1552 — the caption under the numeral. Screen-local part: no other
   screen's stat tile carries one. */
[data-screen="audio"] .stat--audio .stat__sub {
  margin-top: 7px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: inherit;
}

/* 218:1553 — the shared corner arrow, but this frame turns it 52.6deg and
   sits it lower and further in than the dashboard's -45deg. */
[data-screen="audio"] .stat--audio .stat__corner::after {
  right: 31px;
  bottom: 13.5px;
  width: 14px;
  height: 11.5px;
  transform: rotate(-52.6deg);
}

[data-screen="audio"] .stat--audio .stat__corner:hover::after {
  transform: rotate(-52.6deg) translateX(3px);
}

/* ==========================================================================
   2 + 3. The two-column body — 251 + 19 + 769 (221:1595 / 221:1692)
   ========================================================================== */

[data-screen="audio"] .audio-layout {
  display: grid;
  grid-template-columns: 251px minmax(0, 1fr);
  gap: 19px;
  align-items: start;
  margin-top: 22px;              /* tiles end at y=271, cards start at 293 */
}

/* -- 2. Select a PC -------------------------------------------------------- */

/* Figma measures the 10/13 gutter from the plate edge, so the CSS padding is
   one pixel smaller on each side than the frame reads — the border makes up
   the difference. */
[data-screen="audio"] .audio-picker {
  padding: 9px 12px 14px;
  border-radius: 18px;
  border-color: var(--audio-card-line);
}

[data-screen="audio"] .audio-picker__title {
  font-size: var(--fs-2xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
  text-transform: uppercase;
}

/* 221:1631 — 223x34, r=6, on the app fill rather than the white toolbar one. */
[data-screen="audio"] .audio-picker__search {
  height: 34px;
  margin-top: 11px;
  border-radius: var(--r-xs);
  background: var(--s-app);
  border-color: transparent;
}

[data-screen="audio"] .audio-picker__search::before {
  left: 10px;
  width: 10px;
  height: 10px;
  background-color: var(--c-icon-muted);
}

[data-screen="audio"] .audio-picker__search .search__input {
  padding: 0 12px 0 28px;
  font-size: var(--fs-3xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-regular);
}

[data-screen="audio"] .audio-picker__search .search__input::placeholder {
  color: var(--c-placeholder);
}

/* The list runs out to the card edge (362..611 of a 361..612 plate). */
[data-screen="audio"] .audio-pcs {
  margin: 13px -12px 0;
}

[data-screen="audio"] .audio-pc {
  display: flex;
  align-items: center;
  width: 100%;
  height: 66px;
  padding-left: 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--dur) var(--ease);
}

[data-screen="audio"] .audio-pcs__item + .audio-pcs__item .audio-pc {
  border-bottom: 1px solid var(--audio-row-rule);
}

[data-screen="audio"] .audio-pcs__item:last-child .audio-pc { border-bottom: 0; }

[data-screen="audio"] .audio-pc:not(.is-selected):hover { background: var(--s-app); }

/* 221:1635 — the selected row is 67 tall, r=10, on its own green→blue ramp,
   and the design drops the rule under it. */
[data-screen="audio"] .audio-pc.is-selected {
  height: 67px;
  margin-bottom: 3px;
  border-radius: var(--r-panel);
  border-bottom: 0;
  background: var(--audio-row-sel);
  color: var(--c-on-brand);
}

[data-screen="audio"] .audio-pc__avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);   /* selected row — 221:1640 */
  color: var(--c-on-brand);
  --icon-size: 13.5px;
}

[data-screen="audio"] .audio-pc__avatar--blue   { background: var(--audio-av-blue); }
[data-screen="audio"] .audio-pc__avatar--purple { background: var(--audio-av-purple); }
[data-screen="audio"] .audio-pc__avatar--green  { background: var(--audio-av-green); }
[data-screen="audio"] .audio-pc__avatar--red    { background: var(--audio-av-red); }
[data-screen="audio"] .audio-pc__avatar--teal   { background: var(--audio-av-teal); }

/* 221:1641 — the 5px presence dot on the selected machine only. */
[data-screen="audio"] .audio-pc__dot {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--audio-live);
}

[data-screen="audio"] .audio-pc__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 12px;
}

[data-screen="audio"] .audio-pc__name {
  font-size: var(--fs-2xs);
  line-height: 18px;
  color: var(--audio-name);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="audio"] .audio-pc__meta {
  font-size: var(--fs-3xs);
  line-height: 18px;
  color: var(--audio-name);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="audio"] .audio-pc.is-selected .audio-pc__name,
[data-screen="audio"] .audio-pc.is-selected .audio-pc__meta { color: var(--c-on-brand); }

/* The status label is left-aligned on a fixed 46px column, exactly as the
   frame stacks "Online"/"Offline" on one x. */
[data-screen="audio"] .audio-pc__status {
  flex: none;
  width: 46px;
  font-size: 9px;
  line-height: 20px;
}

[data-screen="audio"] .audio-pc__status.is-online  { color: var(--c-green); }
[data-screen="audio"] .audio-pc__status.is-offline { color: var(--c-pink); }
[data-screen="audio"] .audio-pc__status.is-live    { color: var(--audio-live); }

/* -- 3. Stage + Audio Control --------------------------------------------- */

[data-screen="audio"] .audio-panel {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
}

/* 221:1693 — a flat 769x235 plate, not a gradient. */
[data-screen="audio"] .audio-stage {
  padding: 32px 24px 0;
  height: 235px;
  background: var(--audio-stage);
  color: var(--c-on-brand);
  text-align: center;
}

[data-screen="audio"] .audio-stage__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin: 0 auto;
  border: 1px solid var(--audio-disc-line);
  border-radius: 50%;
  background: var(--audio-disc);
  color: var(--audio-mic);
}

[data-screen="audio"] .audio-stage__disc .icon {
  width: 40px;
  height: 62px;
}

[data-screen="audio"] .audio-stage__title {
  margin-top: 14px;
  font-size: 18px;
  line-height: 20px;
}

[data-screen="audio"] .audio-stage__hint {
  margin-top: 9px;
  font-size: var(--fs-body);
  line-height: 26px;
  font-weight: var(--fw-light);
}

/* The frame insets this block 18 on the left and 27 on the right. */
[data-screen="audio"] .audio-control {
  padding: 23px 27px 25px 18px;
}

[data-screen="audio"] .audio-control__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* 221:1726 — a read-only 41px plate carrying the connected machine. */
[data-screen="audio"] .audio-control__target {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 41px;
  margin-top: 8px;
  padding: 0 21px;
  border: 1px solid var(--c-field-line);
  border-radius: var(--r-sm);
  background: var(--c-field-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-4);
}

[data-screen="audio"] .audio-control__target .icon {
  width: 21px;
  height: 20px;
}

/* 221:1748 — the design's own flat green, not the shared --g-btn ramp. */
[data-screen="audio"] .audio-control__listen {
  width: 100%;
  height: 41px;
  margin-top: 14px;
  border-radius: var(--r-sm);
  background: var(--audio-listen);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-on-brand);
}

[data-screen="audio"] .audio-control__listen:hover  { filter: brightness(1.06); }
[data-screen="audio"] .audio-control__listen:active { filter: brightness(0.94); }

[data-screen="audio"] .audio-note__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--audio-stage);
}

[data-screen="audio"] .audio-note__head .icon {
  width: 19px;
  height: 19px;
  color: var(--audio-stage);
}

[data-screen="audio"] .audio-note__text {
  max-width: 709px;              /* holds the frame's own two-line wrap */
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

/* ==========================================================================
   Screen-local icon registrations. misc.css owns the shared registry; these
   three glyphs are only used here, so they are declared in scope rather than
   pushed into the shared file.
   ========================================================================== */

[data-screen="audio"] .icon[data-icon="monitor-stand"] { --icon: url(../assets/icons/monitor-stand.svg); }
[data-screen="audio"] .icon[data-icon="mic"]        { --icon: url(../assets/icons/mic.svg); }
[data-screen="audio"] .icon[data-icon="info-alert"] { --icon: url(../assets/icons/info-alert.svg); }

/* ==========================================================================
   Narrow widths — the portal is a fixed 1440 design; below the two-column
   break the picker sits above the stage and the tiles reflow 2-up / 1-up
   through .stat-grid's own breakpoints.
   ========================================================================== */

@media (max-width: 900px) {
  [data-screen="audio"] .audio-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-sm);
  }
  [data-screen="audio"] .audio-picker { max-width: 420px; }
  [data-screen="audio"] .audio-control { padding: 20px var(--gap-sm); }
}

@media (max-width: 560px) {
  [data-screen="audio"] .audio-picker { max-width: none; }
  [data-screen="audio"] .audio-stage { height: auto; padding-bottom: 28px; }
}

/* ===== screens/auth.css ===== */
/* ==========================================================================
   Auth — Sign In (Figma 2130:5) and Sign Up (2139:188), file fmBCg…

   Both frames are 1920x942: a dark #001d21 stage with a fluid-photo wash at
   20% opacity, a hero column on the left (greeting, gradient headline, quote
   card with the support-agent photo breaking out of its top) and a 540x648
   glassy form card on the right. The two pages share every pattern; only the
   card's field stack differs, so everything lives under .auth-* and the two
   [data-screen] hooks exist for per-page nudges only.

   These are STANDALONE pages (no app shell): login.html / signup.html link
   css/styles.css directly and are not part of build.py's manifest loop.
   ========================================================================== */

[data-screen="login"],
[data-screen="signup"] {
  background: #001d21;
  min-height: 100vh;
}

.auth {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff);
}

/* The Figma wash: photo at 20% through a soft mask, flipped as in the frame. */
.auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../assets/auth/bg-fluid.jpg) center / cover no-repeat;
  opacity: 0.2;
  transform: scaleY(-1);
  -webkit-mask: url(../assets/auth/bg-mask.svg) center / cover no-repeat;
  mask: url(../assets/auth/bg-mask.svg) center / cover no-repeat;
  pointer-events: none;
}

.auth__inner {
  position: relative;
  width: min(1440px, 100%);
  padding: 60px clamp(20px, 4vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}

/* -- hero ------------------------------------------------------------------ */

.auth-hero { position: relative; min-height: 700px; }

.auth-hero__hi {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 96px;
  font-family: var(--ff-inter, Inter, var(--ff));
  font-weight: 500;
  font-size: clamp(34px, 3.5vw, 50px);
  line-height: 1.005;
  letter-spacing: 1px;
  color: #fff;
}

.auth-hero__hi img { width: 48px; height: 47px; }

.auth-hero__headline {
  margin-top: 22px;
  font-family: "SF Pro Display", "Segoe UI", var(--ff);
  font-weight: 700;
  /* 55px in SF Pro; Segoe UI (the Windows fallback) runs wider, so the size
     drops a step to keep "Please sign in to your" on one line like the frame. */
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: clamp(40px, 4vw, 56px);
  background: linear-gradient(90deg, #398c09 17%, #0da2c7 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* Quote card; the agent photo is anchored to it and breaks out of its top. */
.auth-hero__panel {
  position: relative;
  margin-top: 190px;
  width: min(603px, 100%);
  min-height: 265px;
  border-radius: 30px;
  background: rgba(37, 37, 42, 0.76);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 4px 4px rgba(0, 0, 0, 0.25);
  opacity: 0.85;
  padding: 44px 270px 40px 33px;
}

.auth-hero__marks {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.auth-hero__marks img { height: 34px; width: auto; }

.auth-hero__quote {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 24px;
  color: #cecece;
  max-width: 333px;
}

.auth-hero__agent {
  position: absolute;
  right: -74px;
  bottom: 0;
  width: 331px;
  height: 468px;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}

/* -- card ------------------------------------------------------------------ */

.auth-card {
  position: relative;
  border: 1px solid rgba(64, 66, 91, 0.5);
  border-radius: 15px;
  padding: 6px;
}

.auth-card__inner {
  background: #021422;
  border: 1px solid #2c2d38;
  border-radius: 13px;
  padding: 39px 25px 34px;
}

.auth-card__title {
  font-family: "SF Pro Display", "Segoe UI", var(--ff);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.005;
  text-align: center;
  color: #fff;
}

.auth-card__sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 29px;
  letter-spacing: 0.28px;
  text-align: center;
  color: #acaeb4;
  font-weight: 300;
}

/* -- fields ---------------------------------------------------------------- */

.auth-form { margin-top: 26px; }

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.auth-field { margin-bottom: 18px; min-width: 0; }

.auth-field__label {
  display: block;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 12px;
}

.auth-field__box {
  position: relative;
  height: 52px;
  border-radius: 7px;
  background: rgba(24, 26, 29, 0.45);
  box-shadow: inset 0 4px 43px rgba(255, 255, 255, 0.21);
}

.auth-field__input {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: none;
  font-family: var(--ff);
  font-size: 16px;
  font-weight: 300;
  color: #e8e9eb;
  outline: none;
}

.auth-field__input::placeholder { color: #7d7e82; }

.auth-field__input:focus-visible { box-shadow: 0 0 0 2px rgba(13, 162, 199, 0.55); border-radius: 7px; }

/* Password eye */
.auth-field__eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.7;
  display: grid;
  place-items: center;
}

.auth-field__eye img { width: 21px; height: 15px; }
.auth-field__eye:hover { opacity: 1; }
.auth-field__eye[aria-pressed="true"] { opacity: 1; filter: brightness(1.6); }

.auth-field--eye .auth-field__input { padding-right: 48px; }

/* Phone: +91 selector | divider | number */
.auth-phone { display: flex; align-items: center; height: 100%; }

.auth-phone__cc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  white-space: nowrap;
}

.auth-phone__cc img { width: 8px; height: 7px; transform: scaleY(-1); }

.auth-phone__rule {
  width: 1px;
  align-self: stretch;
  margin: 3px 0;
  background: rgba(125, 126, 130, 0.3);
}

.auth-phone .auth-field__input { padding-left: 11px; }

/* -- consent / meta row ---------------------------------------------------- */

.auth-consent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 22px;
  font-size: 14px;
  line-height: 29px;
  font-weight: 300;
  color: #acaeb4;
}

.auth-consent input {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.auth-consent input:checked::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0092ba, #428b0a);
}

.auth-consent b { font-weight: 500; }

.auth-consent__forgot {
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  color: #acaeb4;
  text-decoration: none;
  white-space: nowrap;
}

.auth-consent__forgot:hover { color: #fff; }

/* -- button ---------------------------------------------------------------- */

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, #0092ba 1.3%, #428b0a);
  font-family: var(--ff);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.48px;
  color: #fff;
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
}

.auth-submit:hover { filter: brightness(1.08); }

.auth-submit img { width: 22px; height: 10px; }

/* -- divider + social ------------------------------------------------------ */

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 22px;
  font-family: var(--ff-inter, Inter, var(--ff));
  font-size: 14px;
  letter-spacing: 0.42px;
  color: #fff;
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }

.auth-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 48px;
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: none;
  font-family: var(--ff);
  font-size: 14px;
  letter-spacing: 0.42px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.auth-social__btn:hover { border-color: rgba(255, 255, 255, 0.9); color: #fff; }

.auth-social__btn img { width: 18px; height: 19px; }

/* -- footer link ----------------------------------------------------------- */

.auth-swap {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  line-height: 29px;
  letter-spacing: 0.3px;
  font-weight: 300;
  color: #acaeb4;
}

.auth-swap a { font-weight: 500; color: #acaeb4; text-decoration: none; }
.auth-swap a:hover { color: #fff; }

/* -- responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
  .auth__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 40px; }
  .auth-hero { display: none; }  /* the frame is desktop-only; the card is the page */
  .auth-card { width: min(540px, 100%); }
}

@media (max-width: 560px) {
  .auth-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .auth-social { grid-template-columns: minmax(0, 1fr); }
  .auth-card__inner { padding: 30px 18px 26px; }
}

/* ===== screens/clipboard.css ===== */
/* ==========================================================================
   screen: clipboard  —  Figma 213:132 "Clipboard" (1440 x 1279, tenant shell)

   One white full-bleed sheet holding a filter toolbar, a tinted empty state
   and a three-part pager. Every selector is scoped to [data-screen="clipboard"].

   Geometry, read off the frame (all x/y are frame coordinates):
     title   213:449   359,114   25/24 Poppins Medium #1c1c21
     sheet   213:353   360,171   1039x473  flat white, square corners, no stroke
     toolbar 218:591   389,195   981x52
     empty   218:593   390,266   981x302
     pager   218:698   389,587   981x42
   Sheet padding therefore = 24 top / 29 sides / 15 bottom, rows 19 apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page title
   base.css sets .page-title to 30/36 Semibold #101828 (the marketing-scale
   step). This frame's heading is 25/24 Poppins Medium #1c1c21 at y=114 with
   the sheet at y=171 — so the step, the weight, the ink and both margins are
   corrected here. See the report: base.css is very likely the file that should
   change, at which point this block can be deleted.
   -------------------------------------------------------------------------- */

[data-screen="clipboard"] .page-title {
  font-size: var(--fs-stat);          /* 25px — 213:449 */
  line-height: var(--lh-stat);        /* 24px */
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin: 10px 0 33px;                /* box 114..138, sheet top 171 */
}

/* --------------------------------------------------------------------------
   Sheet — .card with its radius and hairline removed
   213:353 exports as `M0 0H1039V473H0V0Z` filled white: a plain rectangle,
   no corner radius, no stroke and no shadow.
   -------------------------------------------------------------------------- */

[data-screen="clipboard"] .clip-sheet {
  border: 0;
  border-radius: 0;
  padding: 24px 29px 15px;
}

/* --------------------------------------------------------------------------
   Toolbar — 218:591
   389 dept 226 · 627 employee 239 · 878 date 111 · "to" · 1026 date 111 ·
   1151 Refresh 117 · 1280 count.  Uniform 12px rhythm.
   -------------------------------------------------------------------------- */

[data-screen="clipboard"] .clip-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: var(--h-field);         /* 52 — 213:379 */
}

/* The two date controls and the "to" between them are one unit in the design,
   so this is a real flex box at every width — "to" can never be orphaned at
   the end of a wrapped line. At 1440 it contributes 111 + 12 + 15 + 12 + 111,
   which is the same rhythm the frame draws, so the row is unchanged. */
[data-screen="clipboard"] .clip-range {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
}

[data-screen="clipboard"] .clip-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The two selects are the only elastic items: zero basis + a grow ratio equal
   to the design widths reproduces 226 / 239 exactly at 1440 while letting the
   row absorb narrower viewports.

   min-width is what decides when the row wraps, and it is measured, not
   guessed: 50px of leading-glyph gutter + the label + 34px behind the chevron.
   "All Departments" is 121 wide (213:380) and "Select an Employee" 148
   (218:510), so the boxes bottom out at 205 and 232. Because flexbox breaks
   lines on the min-clamped size, the toolbar now drops an item onto a second
   row the moment a label would start to clip instead of shaving the selects
   down to "All Depar" / "Select an" — which is exactly what a fixed 1180px
   breakpoint let happen at 1200. */
[data-screen="clipboard"] .clip-field--dept     { flex: 226 1 0; min-width: 205px; }
[data-screen="clipboard"] .clip-field--employee { flex: 239 1 0; min-width: 232px; }
[data-screen="clipboard"] .clip-field--date     { flex: 0 0 111px; }

/* Each control carries the same leading glyph — 213:391 / 218:521 / 218:546 /
   218:669 all export the identical monitor-with-user vector already shipped as
   activity-monitoring.svg. The node box is 19.76x19; Figma paints the 1.7
   stroke outside it, so the export is 21.46x20.7 in a 22x21 canvas — hence the
   22x21 box, which `contain` maps 1:1. 17px in from the control edge. */
[data-screen="clipboard"] .clip-field::before {
  content: "";
  position: absolute;
  left: 17px;
  width: 22px;
  height: 21px;
  background-color: var(--c-ink-0);   /* stroke is literal black, not --c-ink-4 */
  -webkit-mask: url(../assets/icons/activity-monitoring.svg) center / contain no-repeat;
  mask: url(../assets/icons/activity-monitoring.svg) center / contain no-repeat;
  pointer-events: none;
}

/* The chevron is a separate node from the one .select paints, and it is the
   12x6 #828282 glyph (213:381 / 218:511), NOT the 9x5 black one .select
   carries — scaling that one up would paint a 1.44px stroke where the design
   has 1px. chevron-down-12.svg is the matching 13x7 export (the extra 1px is
   the stroke margin), already in the repo for App Categories. The component's
   background chevron is switched off and this is redrawn as a mask so it can
   take a colour.
   The frame hangs it 12.5 off the dept select and 16.5 off the employee one
   (213:381 vs 218:511); split at 15, exactly as Activity Tracking does for the
   same control pair. */
[data-screen="clipboard"] .clip-field--select::after {
  content: "";
  position: absolute;
  right: 15px;
  width: 13px;
  height: 7px;
  background-color: var(--c-chevron);
  -webkit-mask: url(../assets/icons/chevron-down-12.svg) center / contain no-repeat;
  mask: url(../assets/icons/chevron-down-12.svg) center / contain no-repeat;
  pointer-events: none;
}

/* Every label on this toolbar is drawn in literal black (213:380, 218:510,
   218:535, 218:556, 218:659), a shade below the component's --c-ink-4. */
[data-screen="clipboard"] .clip-control {
  width: 100%;
  padding-left: 50px;                 /* label x=439 against control x=389 */
  padding-right: 16px;
  color: var(--c-ink-0);
}

[data-screen="clipboard"] .clip-field--select .clip-control {
  padding-right: 34px;
  background-image: none;             /* .select's own chevron; redrawn above */
}

/* The date pair leaves 53 to its label (218:535 x=931 on a control at 878;
   218:659 x=1079 on 1026) where the selects leave 50. */
[data-screen="clipboard"] .clip-field--date .clip-control { padding-left: 53px; }

/* "Date" is drawn in the same black as every other control label (218:535,
   218:659) rather than in the component's grey placeholder ink. */
[data-screen="clipboard"] .clip-field--date .clip-control::placeholder {
  color: var(--c-ink-0);
  opacity: 1;
}

[data-screen="clipboard"] .clip-toolbar__to {
  flex: none;
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-0);              /* 218:556 */
}

/* 218:581 — 117x52, r=6, the standard --g-btn gradient at 17px white. */
[data-screen="clipboard"] .clip-refresh {
  flex: none;
  width: 117px;
  height: var(--h-field);
  padding: 0;
  gap: 7px;
}

[data-screen="clipboard"] .clip-refresh__icon { --icon-size: 21px; }

/* 218:685 — 14/24 #1c1c21, sits hard after the button. */
/* On the full-width row the selects absorb every spare pixel, so the auto
   margin is inert; once the count is pushed onto a row of its own it keeps the
   right-edge anchor the frame gives it. */
[data-screen="clipboard"] .clip-toolbar__count {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Empty state — 218:593
   981x302 panel, r=10, #f5f6f9 over a #e0e4ea hairline, the WHOLE rectangle
   at 50% opacity (218:594). The fill is therefore drawn on a ::before so the
   copy above it stays at full strength.

   DELIBERATE DEVIATION: in the frame the content group (218:608, 705..994)
   centres on 849.5 while the panel centres on 880.5 — 31px to the left. The
   Activity Tracking frame (229:333 on 229:332) repeats the offset to the pixel,
   so it is an artefact carried by the copied component, not a decision: the
   "Page 1" row directly beneath it IS panel-centred. Centred here, matching
   what activity-tracking.css already ships. Everything else is to the pixel.
   -------------------------------------------------------------------------- */

[data-screen="clipboard"] .clip-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 302px;
  margin-top: 19px;
  padding: 74px 24px 55px;            /* disc top 340, copy bottom 512 */
  border-radius: var(--r-panel);
  text-align: center;
}

[data-screen="clipboard"] .clip-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-field-line);
  border-radius: inherit;
  background: var(--c-field-bg);
  opacity: 0.5;
}

[data-screen="clipboard"] .clip-empty > * { position: relative; }

/* 218:609 — 77px white disc. The Figma drop shadow is dilate 4 / offset
   (-1, 2) / blur stdDeviation 2 / black 4%. */
[data-screen="clipboard"] .clip-empty__disc {
  display: grid;
  place-items: center;
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background: var(--s-card);
  box-shadow: -1px 2px 4px 4px rgba(0, 0, 0, 0.04);
}

/* 218:649 — 34.11 x 36 solid figure. Registered locally rather than in the
   shared registry in css/components/misc.css. */
[data-screen="clipboard"] .clip-empty__glyph {
  --icon: url(../assets/icons/user-solid.svg);
  width: 34px;
  height: 36px;
  color: var(--c-icon-pale);
}

[data-screen="clipboard"] .clip-empty__title {
  margin-top: 15px;                   /* disc bottom 417, text top 432 */
  font-size: 18px;                    /* 218:611 — no 18px step in the ramp */
  line-height: 20px;
  color: var(--c-ink-0);
}

[data-screen="clipboard"] .clip-empty__text {
  margin-top: 9px;                    /* 218:621 at y=461 */
  max-width: 289px;                   /* breaks after "dropdown" */
  font-size: var(--fs-body);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

/* --------------------------------------------------------------------------
   Pager — 218:698
   42x42 white squares at both ends (r=8, 1px #e5eaf2) with "Page 1" centred
   on the sheet. Both arrows are the one thin-arrow export; the left one is
   mirrored (218:694 carries a -100% x scale in the frame).
   -------------------------------------------------------------------------- */

[data-screen="clipboard"] .clip-pager {
  gap: 0;
  margin-top: 19px;
}

[data-screen="clipboard"] .clip-pager__nav {
  width: 42px;
  height: 42px;
  min-width: 0;
  padding: 0;
  border-radius: var(--r-sm);
  border-color: var(--c-pager-line);
}

[data-screen="clipboard"] .clip-pager__info {
  margin: 0 auto;                     /* centred, not pushed left */
  font-size: var(--fs-body);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
  text-align: center;
}

/* The arrow node measures 15x12 but Figma paints the 1px stroke outside it, so
   the export canvas is 16x13. Sizing the mask box at 16x13 puts the stroke
   centreline back on the design's 15x12 with a 1px stroke; a 15x12 box would
   shrink `contain` to 0.92 and thin the stroke with it. */
[data-screen="clipboard"] .clip-pager__arrow {
  width: 16px;
  height: 13px;
  color: var(--c-icon-pale);
}

[data-screen="clipboard"] .clip-pager__arrow--prev { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Narrow widths
   The design is a fixed 1440 desktop frame. Below it the toolbar sheds items
   onto further rows rather than scrolling sideways; the wrap point is set by
   the min-widths above, not by a breakpoint, so it moves with the labels.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  [data-screen="clipboard"] .clip-sheet { padding: 20px; }
  [data-screen="clipboard"] .page-title { margin: 0 0 20px; }
}

@media (max-width: 640px) {
  /* Each control takes a row of its own, so the label min-widths are dropped:
     below ~320px they would be wider than the sheet and force a sideways
     scroll, and a clipped label is the lesser evil at that size. */
  [data-screen="clipboard"] .clip-field--dept,
  [data-screen="clipboard"] .clip-field--employee { flex: 1 1 100%; min-width: 0; }
  [data-screen="clipboard"] .clip-range { flex: 1 1 100%; }
  [data-screen="clipboard"] .clip-field--date { flex: 1 1 0; }
  [data-screen="clipboard"] .clip-refresh { flex: 1 1 100%; width: auto; }
  [data-screen="clipboard"] .clip-empty { min-height: 0; padding: 48px 16px 40px; }
}

/* ===== screens/dashboard.css ===== */
/* ==========================================================================
   screen: dashboard — Figma 24:581 (tenant, 1440 x 1266)

   Everything here is scoped under [data-screen="dashboard"]. The screen is
   composed from the shared components (card, stat, table, chart, dropdown,
   overflow-btn, icon); the rules below only carry the measurements this frame
   uses that differ from the component defaults, and each one names its node.

   Content column: 361 -> 1400 (1039 wide), three rows 21px apart.
     row 1   tiles 504 + 22 + Productivity 513
     row 2   Team 615   + 21 + Attendance   403
     row 3   Apps 513   + 21 + Websites     497
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page frame
   The shared .page-title is the 30/36 SemiBold step; this frame draws its
   heading at 25/24 Medium in --c-ink (24:652, x=361 y=105) with a 31px drop
   to the first row at y=159.
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .page-title {
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin-bottom: 31px;
}

[data-screen="dashboard"] .dash { display: grid; gap: 21px; }

[data-screen="dashboard"] .dash__row { display: grid; align-items: start; }

[data-screen="dashboard"] .dash__row--top    { grid-template-columns: 504fr 513fr; gap: 22px; }
[data-screen="dashboard"] .dash__row--mid    { grid-template-columns: 615fr 403fr; gap: 21px; }
/* Row 3 is the one row the frame does NOT run to the full 1039: its two cards
   are 513 + 21 + 497 = 1031 and stop 8px short of the column's right edge
   (24:852 ends at 874, 24:890 at 1392). Percentages of the column reproduce
   that; fr units would silently stretch the gap away. */
[data-screen="dashboard"] .dash__row--bottom { grid-template-columns: 49.37% 47.83%; gap: 21px; }

/* 242x160 tiles, 20 across and 16 down — 24:653 / 24:670 / 24:687 / 24:704. */
[data-screen="dashboard"] .dash__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 16px;
}

/* --------------------------------------------------------------------------
   KPI tiles
   Two departures from the stat component, both measured:

   1. the trend chip is NOT the whole "90% This week" group. The white pill is
      only 53px wide (24:657 spans 110..163 of 242) and holds the arrow and the
      percentage; "This week" sits OUTSIDE it, hard against the tile's right
      gutter (24:660 at x=168..227).
   2. Present Today is drawn at r=9 while its three siblings are r=20
      (24:671 vs 24:654 / 24:688 / 24:705). That is the frame, not a slip on
      our side, so it is reproduced.
   -------------------------------------------------------------------------- */

/* The tiles carry a 1px stroke INSIDE their 242x160 box, so the padding is one
   pixel tighter than the component's in both axes: the glyph disc still lands
   at (14,13) of the border box and the tile still measures exactly 160. */
[data-screen="dashboard"] .dash-stat {
  border-radius: var(--r-xl);
  padding: 12px 13px;
}

/* 24:654 — 117.3deg with the first stop at 27.3%, darker than --g-blue-green-2. */
[data-screen="dashboard"] .dash-stat--hero    { background: var(--g-stat-hero); }
[data-screen="dashboard"] .dash-stat--present { border-radius: 9px; }

/* Icon discs. The tint modifiers give the right plate and hairline already;
   only the disc ink differs from the family accent. */
[data-screen="dashboard"] .dash-stat--absent { --stat-accent: var(--c-red-deep); }     /* 24:690 */
[data-screen="dashboard"] .dash-stat--agents { --stat-accent: var(--c-green-bright); } /* 24:714 */

/* ...and Absent Today's chip is the brighter #ff3336, not its disc ink. */
[data-screen="dashboard"] .dash-stat--absent .stat__trend { color: var(--c-red); }     /* 24:701 */

[data-screen="dashboard"] .dash-stat .stat__trend {
  top: 12px;
  right: 78px;
  height: 21px;
  padding: 0 4px 0 5px;
  gap: 4px;
  margin: 0;
  line-height: 18px;
}

[data-screen="dashboard"] .dash-stat .stat__period {
  position: absolute;
  top: 15px;
  right: 14px;
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="dashboard"] .dash-stat--hero .stat__period { color: var(--s-line); }

/* 24:668 — the corner arrow is turned 52.6deg here, not the component's 45. */
[data-screen="dashboard"] .stat__corner::after {
  right: 17px;
  bottom: 21px;
  transform: rotate(-52.6deg);
}

[data-screen="dashboard"] .stat__corner:hover::after {
  transform: rotate(-52.6deg) translateX(3px);
}

/* Glyphs exported from the four tiles. `people` is already registered by the
   component layer and is the same drawing as 24:663. */
[data-screen="dashboard"] .icon[data-icon="stat-present"] { --icon: url(../assets/icons/stat-present.svg); }
[data-screen="dashboard"] .icon[data-icon="stat-absent"]  { --icon: url(../assets/icons/stat-absent.svg); }
[data-screen="dashboard"] .icon[data-icon="stat-agents"]  { --icon: url(../assets/icons/stat-agents.svg); }

/* --------------------------------------------------------------------------
   Cards
   The five panels share the 23px radius and #e6e6e6 hairline the card
   component already draws; what they do not share is the head rhythm, so each
   one carries the padding its own node measures.
   -------------------------------------------------------------------------- */

/* Every padding below is one pixel less than the distance the frame reports,
   because the card's own 1px hairline sits inside the measured box. */
[data-screen="dashboard"] .dash-card > .card__head {
  align-items: flex-start;
  padding: 19px 18px 0 27px;
}

[data-screen="dashboard"] .dash-card > .card__head .card__title { margin-top: 2px; }

/* The 80x36 period chip (24:817) is tighter than the component's 92: 14 in
   front of the label, ~2 to the chevron, 10 behind it. */
[data-screen="dashboard"] .dash-card .dropdown__toggle { padding: 0 10px 0 14px; gap: 2px; }

[data-screen="dashboard"] .dash-card--productivity { min-height: 336px; }             /* 24:785 */
[data-screen="dashboard"] .dash-card--productivity > .card__body { padding: 7px 18px 12px 27px; }

[data-screen="dashboard"] .dash-card--team { min-height: 347px; }                     /* 24:608 */
[data-screen="dashboard"] .dash-card--team > .card__head { padding-right: 26px; }
[data-screen="dashboard"] .dash-card--team > .card__head .card__title { margin-top: 4px; }
[data-screen="dashboard"] .dash-card--team > .card__body { padding: 13px 15px 11px; }

[data-screen="dashboard"] .dash-card--attendance { min-height: 347px; }               /* 24:822 */
[data-screen="dashboard"] .dash-card--attendance > .card__head { padding-right: 20px; }
/* The legend column (5 x 24 + 4 x 14 + 4) runs 180 tall, two more than the
   ring, so it — not the donut — sets the floor of this card. */
[data-screen="dashboard"] .dash-card--attendance > .card__body { padding: 52px 19px 58px 28px; }

[data-screen="dashboard"] .dash-card--apps { min-height: 341px; }                     /* 24:852 */
[data-screen="dashboard"] .dash-card--apps > .card__head { padding: 21px 20px 0 27px; }
[data-screen="dashboard"] .dash-card--apps > .card__head .card__title { margin-top: 0; }
[data-screen="dashboard"] .dash-card--apps .overflow-btn { margin-top: 1px; }
[data-screen="dashboard"] .dash-card--apps > .card__body { padding: 27px 0 0; }

[data-screen="dashboard"] .dash-card--sites { min-height: 341px; }                    /* 24:890 */
[data-screen="dashboard"] .dash-card--sites > .card__head { padding: 24px 22px 0 27px; }
[data-screen="dashboard"] .dash-card--sites > .card__body { padding: 3px 0 8px; }

/* --------------------------------------------------------------------------
   Productivity Overview — 24:786
   Six 37px bars on a 208px scale (1000 at y=240, 0 at y=448) with six dashed
   gridlines. Both axes are LEFT-set in the frame, so the y ticks lose the
   component's end anchor.
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .dash-chart--bars { --chart-tick: 13px; }

[data-screen="dashboard"] .dash-chart--bars .chart__ticks--y .chart__tick {
  text-anchor: start;
  fill: var(--c-tick-y);
  opacity: 0.8;
}

[data-screen="dashboard"] .dash-chart--bars .chart__ticks--x .chart__tick {
  fill: var(--c-tick-x);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Team Performance — 24:607
   579px table inset 16 from the card, five hand-placed columns, a 45px head
   and 55px rows, every rule a 3/3 dash including the one under the head.
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .dash-table {
  min-width: 520px;
  table-layout: fixed;
}

[data-screen="dashboard"] .dash-table th,
[data-screen="dashboard"] .dash-table td { padding: 0; }

[data-screen="dashboard"] .dash-table th:first-child,
[data-screen="dashboard"] .dash-table td:first-child { padding-left: 17px; }

[data-screen="dashboard"] .dash-table th:last-child,
[data-screen="dashboard"] .dash-table td:last-child { padding-right: 0; }

/* 141 / 111 / 121 / 126 / 84 of 583 — text lands at 17, 141, 252, 373, 499. */
[data-screen="dashboard"] .dash-table thead th:nth-child(1) { width: 24.19%; }
[data-screen="dashboard"] .dash-table thead th:nth-child(2) { width: 19.04%; }
[data-screen="dashboard"] .dash-table thead th:nth-child(3) { width: 20.75%; }
[data-screen="dashboard"] .dash-table thead th:nth-child(4) { width: 21.61%; }
[data-screen="dashboard"] .dash-table thead th:nth-child(5) { width: 14.41%; }

/* The frame carries a Line node under the head (24:615) but renders it
   invisible — only the three rules BETWEEN data rows are drawn (y=683, 740,
   794), so the head keeps no floor at all. */
[data-screen="dashboard"] .dash-table thead th {
  height: 45px;
  border-bottom: 0;
  background-image: none;
}

[data-screen="dashboard"] .dash-table tbody th,
[data-screen="dashboard"] .dash-table tbody td {
  height: 55px;
  /* The frame does not centre its row text in the band the rules describe —
     it sits ~3px low. Padding rather than a taller row so the rules stay put. */
  padding-top: 6px;
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
}

/* The row header cell has to carry the same dashed floor the data cells do. */
[data-screen="dashboard"] .dash-table tbody th {
  border-bottom: 0;
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

[data-screen="dashboard"] .dash-table tbody tr:last-child th { background-image: none; }

/* --------------------------------------------------------------------------
   Attendance — 24:824
   178px ring, 18px stroke (centreline r=80, C=502.65). Segment offsets are
   measured arc sweeps: absent 48.72deg, work from home 5.79, late 19.52,
   present 190.03, on leave 90 — clockwise from twelve o'clock.
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .dash-attend {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

/* 178px box, arc innerRadius 0.7 -> the ring runs r=62.3 to r=89, so it is
   26.7 thick on a 75.65 centreline (C=475.32), not the 18px stroke weight the
   node also carries. */
[data-screen="dashboard"] .dash-attend__donut { --donut-size: 178px; --donut-w: 26.7; }

[data-screen="dashboard"] .dash-attend__donut .donut__ring { stroke: var(--c-donut-track); }

[data-screen="dashboard"] .dash-attend__legend { gap: 14px; padding-top: 4px; }

[data-screen="dashboard"] .dash-attend__seg--present { --seg: var(--c-blue-bright); }
[data-screen="dashboard"] .dash-attend__seg--absent  { --seg: var(--c-green); }
[data-screen="dashboard"] .dash-attend__seg--leave   { --seg: var(--c-purple); }
[data-screen="dashboard"] .dash-attend__seg--late    { --seg: var(--c-red-2); }
[data-screen="dashboard"] .dash-attend__seg--wfh     { --seg: var(--c-amber); }

[data-screen="dashboard"] .dash-attend__swatch--present { --swatch: var(--c-blue-bright); }
[data-screen="dashboard"] .dash-attend__swatch--absent  { --swatch: var(--c-green); }
[data-screen="dashboard"] .dash-attend__swatch--leave   { --swatch: var(--c-purple); }
[data-screen="dashboard"] .dash-attend__swatch--late    { --swatch: var(--c-red-2); }
[data-screen="dashboard"] .dash-attend__swatch--wfh     { --swatch: var(--c-amber); }

/* --------------------------------------------------------------------------
   Top Application Usage — 24:857
   Six 25px bars (r=5) filled with the 90deg teal->blue ramp, seven vertical
   gridlines, a 10px name column at x=30 and a 12px hour axis.
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .dash-chart--apps { --chart-tick: 12px; }

/* 24:858 — a much softer rule than the bar chart's: 4/4 at 15%. */
[data-screen="dashboard"] .dash-chart--apps .chart__gridline {
  stroke: var(--c-grid-apps);
  stroke-dasharray: 4 4;
}

[data-screen="dashboard"] .dash-apps__bar    { fill: url(#dashAppsBar); }
[data-screen="dashboard"] .dash-apps__grad-a { stop-color: var(--c-bar-a); }
[data-screen="dashboard"] .dash-apps__grad-b { stop-color: var(--c-bar-b); }

[data-screen="dashboard"] .dash-apps__name {
  fill: var(--c-muted);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  dominant-baseline: middle;
}

[data-screen="dashboard"] .dash-chart--apps .chart__ticks--x .chart__tick { fill: var(--c-muted); }

/* --------------------------------------------------------------------------
   Top Website Usage — 24:898
   The frame draws the trend line and its dots as separate objects that do not
   quite share vertices; both sets of coordinates are transcribed as-is rather
   than reconciled, so the render matches the design.
   The y axis really does read 100 / 800 / 600 / 400 / 200 / 100 (24:916).
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .dash-chart--sites { --chart-tick: 13px; }

/* 24:899 — 2/2 like the bar chart but a cooler, lighter grey. */
[data-screen="dashboard"] .dash-chart--sites .chart__gridline { stroke: var(--c-grid-sites); }

[data-screen="dashboard"] .dash-chart--sites .chart__ticks--y .chart__tick {
  text-anchor: start;
  fill: var(--c-muted);
  opacity: 0.9;
}

[data-screen="dashboard"] .dash-chart--sites .chart__ticks--x .chart__tick { fill: var(--c-muted-4); }

[data-screen="dashboard"] .dash-sites__line  { --line-w: 1.6; }
[data-screen="dashboard"] .dash-sites__point { --point: var(--c-green); stroke: none; }

/* --------------------------------------------------------------------------
   Static callouts — 24:861 (Slack) and 24:920 (Sales 700)
   Both are fixed bubbles in the design, not hover state, so they ship as
   figcaptions inside the chart rather than as behaviour.
   -------------------------------------------------------------------------- */

[data-screen="dashboard"] .dash-tip {
  padding: 0;
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: var(--sh-tip);
}

[data-screen="dashboard"] .dash-tip--apps { width: 91px; height: 42px; }

[data-screen="dashboard"] .dash-tip--apps .dash-tip__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 18px;
  font-size: var(--fs-3xs);
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--c-muted);
}

[data-screen="dashboard"] .dash-tip--apps .dash-tip__row {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

[data-screen="dashboard"] .dash-tip__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-green);
}

[data-screen="dashboard"] .dash-tip--apps .dash-tip__value {
  font-size: 8px;
  line-height: 12px;
  color: var(--c-ink-4);
}

[data-screen="dashboard"] .dash-tip--sites { width: 68px; height: 48px; }

[data-screen="dashboard"] .dash-tip--sites .dash-tip__title,
[data-screen="dashboard"] .dash-tip--sites .dash-tip__value {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  font-size: var(--fs-xs);
  line-height: 20px;
}

[data-screen="dashboard"] .dash-tip--sites .dash-tip__title { top: 4px;  color: var(--c-muted-5); }
[data-screen="dashboard"] .dash-tip--sites .dash-tip__value { top: 21px; color: var(--c-tip-value); }

/* 24:926 — a 15px white pointer tucked under the bubble. Geometry, not a
   pictogram, so it is drawn rather than exported. */
[data-screen="dashboard"] .dash-tip--sites::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 6px);
  width: 0;
  height: 0;
  margin-left: -7.5px;
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-top: 15px solid var(--s-card);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}

/* --------------------------------------------------------------------------
   Narrow widths
   The frame is a fixed 1440 desktop layout; below the two-up threshold every
   row becomes a single column and the cards stop being pinned to their design
   heights so the charts can shrink without leaving a void underneath.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="dashboard"] .dash__row--top,
  [data-screen="dashboard"] .dash__row--mid,
  [data-screen="dashboard"] .dash__row--bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
  }

  [data-screen="dashboard"] .dash { gap: var(--gap); }
  [data-screen="dashboard"] .dash-card { min-height: 0; }
}

@media (max-width: 640px) {
  [data-screen="dashboard"] .dash__tiles { grid-template-columns: minmax(0, 1fr); }

  [data-screen="dashboard"] .dash-attend {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  [data-screen="dashboard"] .dash-card--attendance > .card__body,
  [data-screen="dashboard"] .dash-card--productivity > .card__body {
    padding: var(--gap-sm) var(--gap-sm) var(--card-pad);
  }

  [data-screen="dashboard"] .dash-card--team > .card__body { padding: 13px 0 11px; }

  [data-screen="dashboard"] .dash-card > .card__head,
  [data-screen="dashboard"] .dash-card--apps > .card__head,
  [data-screen="dashboard"] .dash-card--sites > .card__head {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }
}

/* ===== screens/download-agent.css ===== */
/* ==========================================================================
   screen: download-agent
   Figma 141:883 "Download agent" — 1440 x 1818, tenant shell.

   The whole page is one square-cornered white plate (141:1307, 1038x1614 at
   x=361) whose top 251px is the gradient installer banner (141:1309). Inside
   the plate everything is inset 46px: the two installer cards, the two-column
   notes block split by a centre rule, and the deployment checklist table.

   Every selector is scoped under [data-screen="download-agent"].
   ========================================================================== */

[data-screen="download-agent"] {
  /* Values measured off 141:883 that are specific to this screen. Anything
     shared already lives in css/tokens.css and is used via var() below. */
  --dl-panel-line: #cecece;                                        /* 141:1307 */
  --dl-banner: linear-gradient(79.03deg, #035419 29.54%, #084972 83.67%); /* 141:1309 */
  --dl-pill-bg: rgba(217, 217, 217, 0.13);                         /* 141:1325 */
  --dl-pill-line: rgba(255, 255, 255, 0.14);                       /* 141:1325 */

  --dl-normal-bg: #ecfdf0;                                         /* 142:1338 */
  --dl-normal-line: var(--c-green);                    /* 142:1338 stroke #239b44 */
  --dl-normal-btn: #328d34;                                        /* 142:1348 */
  --dl-stealth-bg: #f2f9ff;                                        /* 142:1364 */
  --dl-stealth-line: #1a76bd;                               /* 142:1364 stroke */
  --dl-stealth-btn: #1a76bd;                                       /* 142:1368 */

  --dl-code-ink: #c83459;                                          /* 143:1403 */
  --dl-rule: rgba(203, 203, 203, 0.5);              /* 143:1439 #cbcbcb @50%   */

  --dl-thead: linear-gradient(90deg, #084972 0%, #118638 100%);    /* 143:1549 */
  --dl-row-a: #f4fff7;                                             /* 143:1555 */
  --dl-row-b: rgba(216, 247, 224, 0.6);              /* 143:1563 #d8f7e0 @60%  */
  --dl-desc-ink: #383838;                                          /* 143:1559 */

  --dl-pad: 46px;                       /* plate gutter — 407 − 361 (141:1307) */

  /* Every body/heading layer on this frame is literal #000000, not the #0a0a0a
     the dashboard frames use — 143:1379, 142:1344, 143:1384, 143:1441, 143:1445,
     143:1547, 143:1556 and 143:1557 all report `text-black`. That is what
     --c-ink-0 is in tokens.css, so it is used rather than --c-ink-4 below. */
}

/* --------------------------------------------------------------------------
   the plate — 141:1307. Square corners and a #cecece hairline, not the
   rounded .card chrome, so it is its own object rather than a forked card.
   -------------------------------------------------------------------------- */

[data-screen="download-agent"] .dl-panel {
  background: var(--s-card);
  border: 1px solid var(--dl-panel-line);
}

[data-screen="download-agent"] .dl-panel__body {
  padding: 0 var(--dl-pad) var(--dl-pad);
}

/* --------------------------------------------------------------------------
   installer banner — 141:1309 (flush with the plate's top and sides)
   -------------------------------------------------------------------------- */

[data-screen="download-agent"] .dl-hero {
  position: relative;
  overflow: hidden;                       /* clips the art at the banner edge */
  min-height: 251px;
  padding: 36px 50px 31px;                /* 198−162 top, 411−361 left,
                                             413−382 under the code chip      */
  background: var(--dl-banner);
  color: var(--c-on-brand);
}

/* 142:1336 hangs 26px above the banner and is cut off by it — that clipped
   download arrow is the design, not an accident. */
[data-screen="download-agent"] .dl-hero__art {
  position: absolute;
  top: -26px;                             /* 136 − 162                        */
  right: 41px;                            /* 1399 − 1358                      */
  width: 419px;
  height: 332px;
  max-width: none;
  pointer-events: none;
}

[data-screen="download-agent"] .dl-hero__body {
  position: relative;
  z-index: 1;
}

[data-screen="download-agent"] .dl-hero__title {
  font-size: var(--fs-stat);              /* 25px — 141:1328                  */
  line-height: var(--lh-stat);
  font-weight: var(--fw-medium);
}

[data-screen="download-agent"] .dl-hero__text {
  max-width: 534px;
  margin-top: 21px;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-light);
}

/* The label is indented 5px further than the title and the paragraph: they sit at
   x=411 (141:1328 / 141:1329), the label at x=416 (141:1333), and the chip at
   x=560 (141:1325) — so the row is padded 5 and the gap to the chip is 15. */
[data-screen="download-agent"] .dl-hero__enroll {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 23px;
  padding-left: 5px;
}

[data-screen="download-agent"] .dl-hero__enroll-label {
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--fw-light);
}

/* The frosted code chip — 141:1325 / 141:1326. */
[data-screen="download-agent"] .dl-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 208px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--dl-pill-line);
  border-radius: var(--r-pill);
  background: var(--dl-pill-bg);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  font-size: 18px;
  line-height: 21px;
}

/* --------------------------------------------------------------------------
   the two installer cards — 142:1341 (Normal) / 142:1362 (Stealth)
   .card--panel already carries the 10px radius and the 1px hairline; only the
   tint, the border ink and the stacking are screen-specific.
   -------------------------------------------------------------------------- */

[data-screen="download-agent"] .dl-agents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 39px;                       /* 452 − 413                        */
}

[data-screen="download-agent"] .dl-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 242px;
  padding: 24px 45px 22px;                /* (463 − 373) / 2 = 45 side        */
}

[data-screen="download-agent"] .dl-agent--normal {
  background: var(--dl-normal-bg);
  border-color: var(--dl-normal-line);
}

[data-screen="download-agent"] .dl-agent--stealth {
  background: var(--dl-stealth-bg);
  border-color: var(--dl-stealth-line);
}

[data-screen="download-agent"] .dl-agent__title {
  font-size: var(--fs-h2);                /* 20px — 143:1379                  */
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);
}

[data-screen="download-agent"] .dl-agent__text {
  max-width: 373px;
  margin-top: 11px;
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

/* Pinned to the card floor so both buttons line up whatever the copy does. */
[data-screen="download-agent"] .dl-btn {
  width: 316px;
  max-width: 100%;
  height: 46px;                           /* 45.553 — 142:1348                */
  gap: 17px;                              /* icon 551 → label 568             */
  margin-top: auto;
  padding: 0 20px;
  border: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-regular);
  color: var(--c-on-brand);
}

[data-screen="download-agent"] .dl-btn--green { background: var(--dl-normal-btn); }
[data-screen="download-agent"] .dl-btn--blue  { background: var(--dl-stealth-btn); }

[data-screen="download-agent"] .dl-btn:hover  { filter: brightness(1.06); }
[data-screen="download-agent"] .dl-btn:active { filter: brightness(0.94); }

[data-screen="download-agent"] .dl-btn__icon {
  width: 14.5px;
  height: 20px;
  flex: none;
}

/* --------------------------------------------------------------------------
   How It Works / Security Notes — 143:1414 + 143:1440
   The rule (143:1439) runs down the exact half of the plate's inner width and
   starts level with the bottom of the installer cards, so it is drawn as the
   second column's left border rather than as a separate element.
   -------------------------------------------------------------------------- */

[data-screen="download-agent"] .dl-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-screen="download-agent"] .dl-notes__col {
  padding-top: 26px;                      /* 720 − 694                        */
  padding-bottom: 14px;
}

[data-screen="download-agent"] .dl-notes__col + .dl-notes__col {
  padding-left: 37px;                     /* 917 − 880                        */
  border-left: 1px solid var(--dl-rule);
}

[data-screen="download-agent"] .dl-notes__title {
  font-size: var(--fs-h2);                /* 20px — 143:1384 / 143:1441       */
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);
}

[data-screen="download-agent"] .dl-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

[data-screen="download-agent"] .dl-step {
  display: flex;
  align-items: flex-start;
  gap: 11.65px;                           /* icon box ends 428.35, text 440   */
}

[data-screen="download-agent"] .dl-step__icon {
  width: 21.35px;
  height: 24.94px;
  flex: none;
  margin-top: 4px;                        /* icon 764 vs text box 759         */
}

/* Each item carries the Figma text-box width as --dl-w so the line breaks
   land where the frame puts them. */
[data-screen="download-agent"] .dl-step__body {
  max-width: var(--dl-w, 100%);
  min-width: 0;
}

[data-screen="download-agent"] .dl-step__text {
  font-size: 16px;
  line-height: 28px;
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

/* 143:1401 / 143:1461 sit on a slacker 32px line than the rest. */
[data-screen="download-agent"] .dl-step__text--lead { line-height: 32px; }

[data-screen="download-agent"] .dl-step__code {
  display: block;
  max-width: 383px;
  margin-top: 6px;
  font-family: var(--ff);
  font-size: var(--fs-body);              /* 15px — 143:1403                  */
  line-height: 29px;
  font-weight: var(--fw-light);
  color: var(--dl-code-ink);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Deployment Checklist — 232:2223
   Reuses .table + .table--gradient-head; this block re-measures the header
   bar (62 tall, blue → green, not the shared green → blue), the 75px rows and
   the two-tint striping, and drops the shared dashed row rule.
   -------------------------------------------------------------------------- */

[data-screen="download-agent"] .dl-checklist { padding-top: 36px; }

[data-screen="download-agent"] .dl-checklist__title {
  font-size: var(--fs-h2);                /* 20px — 143:1547                  */
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);
}

[data-screen="download-agent"] .dl-table-wrap {
  max-width: 935px;                       /* 143:1470                         */
  margin-top: 27px;                       /* 1292 − 1265                      */
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-xl);
  background: var(--s-card);
}

[data-screen="download-agent"] .dl-table { table-layout: fixed; }

[data-screen="download-agent"] .dl-table thead tr { background: var(--dl-thead); }

[data-screen="download-agent"] .dl-table thead th {
  height: 62px;
  font-size: 18px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-on-brand);
}

[data-screen="download-agent"] .dl-table thead th:first-child { font-size: var(--fs-h2); }

[data-screen="download-agent"] .dl-table th,
[data-screen="download-agent"] .dl-table td {
  padding: 0;
  white-space: normal;
  vertical-align: middle;
}

[data-screen="download-agent"] .dl-table th:first-child,
[data-screen="download-agent"] .dl-table td:first-child {
  width: 132px;
  padding-left: 33px;                     /* 441 − 408, the "#" head 143:1586 */
}

/* The body numerals are indented 8px further than the "#" above them:
   143:1556/1564/1570/1576/1582 all sit at x=449, the head at x=441. */
[data-screen="download-agent"] .dl-table tbody td:first-child { padding-left: 41px; }

[data-screen="download-agent"] .dl-table th:nth-child(2),
[data-screen="download-agent"] .dl-table td:nth-child(2) { width: 209px; }

[data-screen="download-agent"] .dl-table th:last-child,
[data-screen="download-agent"] .dl-table td:last-child { padding-right: 53px; }

[data-screen="download-agent"] .dl-table tbody td {
  height: 75px;
  border-bottom: 0;
  background-image: none;                 /* the shared dashed rule is not here */
}

[data-screen="download-agent"] .dl-table tbody tr:nth-child(odd)  { background: var(--dl-row-a); }
[data-screen="download-agent"] .dl-table tbody tr:nth-child(even) { background: var(--dl-row-b); }

[data-screen="download-agent"] .dl-table__num {
  font-size: 18px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);
}

[data-screen="download-agent"] .dl-table__step {
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);
}

[data-screen="download-agent"] .dl-table__desc {
  max-width: 539px;
  font-size: var(--fs-body);
  line-height: 25px;
  color: var(--dl-desc-ink);
}

/* --------------------------------------------------------------------------
   reflow
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  /* Below the design width the art would sit under the banner copy. */
  [data-screen="download-agent"] .dl-hero__art { display: none; }
}

@media (max-width: 900px) {
  [data-screen="download-agent"] .dl-notes { grid-template-columns: minmax(0, 1fr); }

  [data-screen="download-agent"] .dl-notes__col + .dl-notes__col {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid var(--dl-rule);
  }

  [data-screen="download-agent"] { --dl-pad: 24px; }
  [data-screen="download-agent"] .dl-hero { padding: 28px 24px 32px; }
}

@media (max-width: 640px) {
  [data-screen="download-agent"] { --dl-pad: var(--gap-sm); }

  [data-screen="download-agent"] .dl-agents { grid-template-columns: minmax(0, 1fr); }
  [data-screen="download-agent"] .dl-agent { padding: 24px var(--gap-sm) 22px; }
  [data-screen="download-agent"] .dl-hero { padding: 24px var(--gap-sm) 28px; }
  [data-screen="download-agent"] .dl-hero__enroll { gap: 12px; }
  [data-screen="download-agent"] .dl-step__code { line-height: 26px; }
}

/* ===== screens/email-templates.css ===== */
/* ==========================================================================
   Email Templates
   ========================================================================== */

[data-screen="email-templates"] .et-list { align-self: stretch; }

/* The list is taller than the viewport once there are a dozen templates, so it
   scrolls inside the card rather than pushing the editor down the page. */
[data-screen="email-templates"] .et-scroll {
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
}

[data-screen="email-templates"] .tmpl .icon {
  flex: 0 0 auto;
  color: var(--c-muted-3);
}

[data-screen="email-templates"] .tmpl.is-active .icon { color: var(--c-green); }

[data-screen="email-templates"] .tmpl > span:last-child { min-width: 0; }

[data-screen="email-templates"] .tmpl__name,
[data-screen="email-templates"] .tmpl__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- editor ---------------------------------------------------------------- */

[data-screen="email-templates"] .et-editor { display: grid; gap: var(--gap-sm); }

[data-screen="email-templates"] .et-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  [data-screen="email-templates"] .et-row { grid-template-columns: minmax(0, 1fr); }
}

[data-screen="email-templates"] .et-body-field { margin-top: 18px; }

[data-screen="email-templates"] .et-body-field .textarea {
  font-variant-numeric: tabular-nums;
  line-height: 22px;
}

[data-screen="email-templates"] .field__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* -- preview --------------------------------------------------------------- */

[data-screen="email-templates"] .mail-preview__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--c-muted);
}

[data-screen="email-templates"] .mail-preview .btn { text-decoration: none; }

/* ===== screens/employees-monitoring.css ===== */
/* ==========================================================================
   employees-monitoring — Figma 27:1007 "Employee" (1440 x 1266)

   The screen is a title, a four-part filter toolbar and one full-bleed table
   card. Everything is built from the shared components; this file only holds
   the measurements that are specific to this frame:

     title      27:1597  Poppins Medium 25/24 #1c1c21  (NOT the 30px .page-title
                         default — see the report note)
     toolbar    27:1598 search 331x50 r10 · 27:1602 select 117x50 r6
                27:1607 select 148x50 · 27:1612 button 196x50 r6
     card       27:1382  1035x961, r10, 1px #e6e6e6
     head row   27:1383  53 tall, rule at y=284
     body rows  27:1398..101:693  60px pitch (rules 60 apart), 15 rows
     columns    header x = 385 / 616 / 782 / 938 / 1094 / 1242
                body   x = 385 / 617 / 782 / 924 / 1082 / 1242
     avatar     27:1415  35x33 rounded rect, r≈5 (measured off the 1x render)
     actions    27:1430 key #fff4de@70 · 27:1427 edit #ddffe6@60 · 27:1425 trash
                #ffd7e1@50 — 40x40, r=4, 3px apart, glyphs 19/19/18
   ========================================================================== */

/* -- page title ----------------------------------------------------------- */
/* This frame's title is one step smaller and lighter than the shell default. */
[data-screen="employees-monitoring"] .page-title {
  margin: 7px 0 31px;
  font-size: var(--fs-stat);      /* 25px */
  line-height: var(--lh-stat);    /* 24px */
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* -- toolbar -------------------------------------------------------------- */

[data-screen="employees-monitoring"] .em-toolbar {
  gap: 10px;                      /* 692→702 and 819→829 */
  margin-bottom: 14px;            /* toolbar 217 → card 231 */
}

[data-screen="employees-monitoring"] .em-search {
  flex: 0 1 331px;
  max-width: 331px;
}

[data-screen="employees-monitoring"] .em-filter {
  flex: none;
  width: 117px;
}

[data-screen="employees-monitoring"] .em-filter--wide { width: 148px; }

/* The plain select's chevron is 8x4 and sits ~15 in from the right; the label
   needs the room ("All locations" is 97 of the 148 box). */
[data-screen="employees-monitoring"] .em-filter .select {
  padding-left: 18px;
  padding-right: 30px;
  background-size: 8px 4px;
  background-position: right 15px center;
}

[data-screen="employees-monitoring"] .em-add {
  width: 196px;
  margin-left: auto;
  padding: 0 22px 0 15px;         /* glyph at x=1212, label at x=1247 */
  gap: 14px;
}

[data-screen="employees-monitoring"] .em-add .icon { --icon-size: 22px; }

/* -- table card ----------------------------------------------------------- */

/* The card is 961 tall for a 53 head + 15x60 rows; the balance is the breathing
   space under the last row, which carries no rule. */
[data-screen="employees-monitoring"] .em-card .table-wrap { padding-bottom: 5px; }

[data-screen="employees-monitoring"] .em-table {
  table-layout: fixed;
  min-width: 1000px;
}

/* 27:1383 is present in the file but renders as nothing — this frame has no
   rule under the head, only between the body rows. The 8px of top padding
   drops the labels the 4px they sit below the middle of the 53px band. */
[data-screen="employees-monitoring"] .em-table thead th {
  height: 53px;
  padding-top: 8px;
  border-bottom: 0;
}

[data-screen="employees-monitoring"] .em-table tbody td { height: 60px; }

/* Column boundaries, as a share of the 1033px inner width of the 1035 card. */
[data-screen="employees-monitoring"] .em-col--employee { width: 24.88%; }  /*  257 */
[data-screen="employees-monitoring"] .em-col--dept     { width: 16.07%; }  /*  166 */
[data-screen="employees-monitoring"] .em-col--code     { width: 13.75%; }  /*  142 */
[data-screen="employees-monitoring"] .em-col--status   { width: 15.30%; }  /*  158 */
[data-screen="employees-monitoring"] .em-col--agent    { width: 15.49%; }  /*  160 */
[data-screen="employees-monitoring"] .em-col--actions  { width: 14.51%; }  /*  150 */

/* The head labels are not flush with their column: Status and Agent hang 14
   and 12 to the right of the pill / dot that sits under them. */
[data-screen="employees-monitoring"] .em-table th,
[data-screen="employees-monitoring"] .em-table td {
  padding-left: 0;
  padding-right: 8px;
}

[data-screen="employees-monitoring"] .em-table th:first-child,
[data-screen="employees-monitoring"] .em-table td:first-child { padding-left: 27px; }

[data-screen="employees-monitoring"] .em-table td:nth-child(2) { padding-left: 1px; }
[data-screen="employees-monitoring"] .em-table th:nth-child(4) { padding-left: 14px; }
[data-screen="employees-monitoring"] .em-table th:nth-child(5) { padding-left: 12px; }

[data-screen="employees-monitoring"] .em-table th:last-child,
[data-screen="employees-monitoring"] .em-table td:last-child { padding-right: 0; }

/* -- identity cell -------------------------------------------------------- */

/* 27:1415 masks the photo to a 35x33 rounded rectangle, not a disc. */
[data-screen="employees-monitoring"] .em-avatar {
  --avatar-size: auto;
  width: 35px;
  height: 33px;
  border-radius: 5px;
}

[data-screen="employees-monitoring"] .table__user { gap: 8px; }   /* 420 → 428 */

[data-screen="employees-monitoring"] .table__name { line-height: 22px; }
[data-screen="employees-monitoring"] .table__mail { line-height: 22px; }

/* -- status pill ---------------------------------------------------------- */

/* In this frame the pill is tinted by the AGENT state, not by the status word:
   every Offline row wears the pink tint even where it reads "Active"
   (27:1402 pink under an "Active" label vs 27:1422 green). The badge keeps the
   class that matches its own word so the markup stays truthful; the row-level
   override reproduces what the frame draws. */
[data-screen="employees-monitoring"] tbody tr[data-agent="offline"] .badge {
  --badge-bg: rgba(255, 215, 225, 0.5);
  --badge-ink: var(--c-pink);
}

/* -- agent cell ----------------------------------------------------------- */

/* 29:1683: the 6px dot ends at 1088 and "Online" starts at 1094. */
[data-screen="employees-monitoring"] .em-table td .dot {
  margin-right: 6px;
  vertical-align: 1px;
}

/* -- row actions ---------------------------------------------------------- */

[data-screen="employees-monitoring"] .em-table .icon-btn { border-radius: 4px; }
[data-screen="employees-monitoring"] .em-table .icon-btn .icon { --icon-size: 19px; }
[data-screen="employees-monitoring"] .em-table .icon-btn--red .icon { --icon-size: 18px; }

/* -- narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {
  [data-screen="employees-monitoring"] .page-title { margin-bottom: var(--gap); }
  [data-screen="employees-monitoring"] .em-search { flex: 1 1 240px; }
}

@media (max-width: 640px) {
  [data-screen="employees-monitoring"] .em-search,
  [data-screen="employees-monitoring"] .em-filter,
  [data-screen="employees-monitoring"] .em-filter--wide,
  [data-screen="employees-monitoring"] .em-add {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* ===== screens/health.css ===== */
/* ==========================================================================
   System Health
   ========================================================================== */

[data-screen="health"] .he-services { margin-bottom: var(--gap-sm); }

[data-screen="health"] .he-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1200px) {
  [data-screen="health"] .he-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  [data-screen="health"] .he-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The name/meta pair must be able to shrink so .svc__val stays on the row. */
[data-screen="health"] .svc > div { min-width: 0; }

/* -- uptime ---------------------------------------------------------------- */

[data-screen="health"] .he-uptime { margin: 0; }

[data-screen="health"] .he-uptime .chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

[data-screen="health"] .he-uptime .chart__bar {
  --bar: var(--c-green);
  rx: 3;
}

[data-screen="health"] .he-uptime .he-bar--warn { --bar: var(--c-amber); }
[data-screen="health"] .he-uptime .he-bar--bad  { --bar: var(--c-red); }

[data-screen="health"] .he-uptime .chart__ticks--x .chart__tick { text-anchor: middle; }

[data-screen="health"] .he-incidents { padding-top: 2px; }

/* ===== screens/installation.css ===== */
/* ==========================================================================
   Installation — Figma 125:2 (1440 x 1266, tenant shell)

   Three bands, all sharing the 1036px content column (--pad-x gutter):

     1. four solid-fill KPI tiles          130:561 / 570 / 579 / 588
     2. Installation Status (donut + boxed legend)   133:607
        Installation Activity (9-vertex line chart)  137:721
     3. Recent Installation Status table             138:785

   The KPI tiles reuse .stat--row and add a scoped .stat--solid (the shape is
   the same icon-left tile, but filled with the accent instead of white).
   The donut and the line chart are real SVG elements — geometry transcribed
   from the frame, no exported picture.

   NOTE on the frame's own geometry: in Figma the KPI strip sits at x=361 but
   the three cards below it start at x=352/353, so the design's left edges do
   not line up. Everything here is aligned to the shared --pad-x gutter (361)
   instead; the right edges (1397) match the frame exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page heading — 125:224 is 25/24 Medium #1c1c21, not the 30px default.
   -------------------------------------------------------------------------- */

[data-screen="installation"] .page-title {
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin: 10px 0 30px;                   /* box lands at y=113, tiles at 168 */
}

/* --------------------------------------------------------------------------
   Band rhythm
   -------------------------------------------------------------------------- */

[data-screen="installation"] .install-tiles { gap: 20px; }   /* 244 x4 + 20 x3 = 1036 */

[data-screen="installation"] .install-row {
  display: grid;
  grid-template-columns: minmax(0, 484fr) minmax(0, 539fr);  /* 133:608 / 137:722 */
  gap: 21px;
  margin-top: 26px;
  align-items: stretch;
}

[data-screen="installation"] .install-recent { margin-top: 17px; }

/* Every card head on this frame hangs its title 27px below the card's top edge
   — the shared head centres the title against its trailing control instead, and
   this frame's controls are three different heights (22 chip / 36 dropdown), so
   centring would put the three titles on three different baselines. Ranging the
   title to the top and nudging each control is what keeps them level. */
[data-screen="installation"] .card { --card-pad-top: 27px; }
[data-screen="installation"] .card__head { align-items: flex-start; }

[data-screen="installation"] .install-status .card__actions  { margin-top: -5px; } /* chip     134:674 y=319 */
[data-screen="installation"] .install-activity .card__actions { margin-top: 2px; } /* dropdown 137:727 y=326 */
[data-screen="installation"] .install-recent .card__actions  { margin-top: -8px; } /* dropdown 138:790 y=683 */

[data-screen="installation"] .install-status,
[data-screen="installation"] .install-activity { border-radius: var(--r-xl); }

/* Both period pickers on this frame are exactly 80x36 with the chevron 10px
   off the right edge (137:726, 138:789). */
[data-screen="installation"] .card__actions .dropdown__toggle {
  width: 80px;
  padding: 0 10px 0 14px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   1. KPI tiles — 244 x 102, r10, solid accent, white ink (130:562 et al)
      icon disc 42 at (17,18) · label box at +22 · value box at +58
   -------------------------------------------------------------------------- */

[data-screen="installation"] .stat--gold { --stat-accent: var(--c-gold); }
[data-screen="installation"] .stat--teal { --stat-accent: var(--c-teal); }

[data-screen="installation"] .stat--solid {
  align-items: flex-start;
  gap: 18px;
  padding: 18px 17px 20px;
  border: 0;                             /* keeps the border box at 102 tall */
  border-radius: var(--r-panel);
  background: var(--stat-accent);
  color: var(--c-on-brand);
}

[data-screen="installation"] .stat--solid .stat__icon {
  background: rgba(255, 255, 255, 0.1);  /* 130:565 — white @10% over the fill */
  color: var(--c-on-brand);
}

[data-screen="installation"] .stat--solid .stat__icon .icon { --icon-size: 19px; }

[data-screen="installation"] .install-tile__text { margin-top: 4px; }

[data-screen="installation"] .stat--solid .stat__label { color: var(--c-on-brand); }

[data-screen="installation"] .stat--solid .stat__value {
  margin-top: 12px;
  color: var(--c-on-brand);
}

/* --------------------------------------------------------------------------
   2a. Installation Status — donut + boxed legend (133:607)
   -------------------------------------------------------------------------- */

[data-screen="installation"] .install-status .card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 37px var(--card-pad) 32px;    /* legend block lands at y=381 */
}

/* 134:654 — 217px box, 15px stroke, so the arc radius is 101 and the
   circumference 2*pi*101 = 634.6. Each arc's length comes from --seg-len (px
   along that circumference) and its start angle from the circle's own
   rotate() in the markup. */
[data-screen="installation"] .install-donut {
  --donut-size: 217px;
  --donut-w: 15;
  margin-top: 5px;                        /* ring sits 2.5px below the legend's
                                             centre line in the frame */
}

/* The gap in the dash pattern is the whole circumference, so each circle paints
   exactly one arc and nothing wraps back past the start of the path. */
[data-screen="installation"] .install-donut__seg {
  stroke-dasharray: var(--seg-len) 634.6;
  stroke-linecap: round;
}

/* The readout is not on the ring's centre line — the frame drops it 7px so the
   number reads against the wide part of the ring (134:667..671). */
[data-screen="installation"] .install-donut .donut__center { padding-top: 14px; }

[data-screen="installation"] .install-donut .donut__value {
  font-size: 40px;
  line-height: 44px;
  color: #000;                            /* 134:670 */
}

[data-screen="installation"] .install-donut .donut__caption {
  margin-top: 4px;
  font-size: var(--fs-h3);
  line-height: 24px;
  color: #000;                            /* 134:671 */
}

/* Legend chips — 147 x 70, r5, 1px dashed accent on a tint (134:638/644/650) */
[data-screen="installation"] .install-legend {
  gap: 10px;
  flex: none;
}

[data-screen="installation"] .install-legend__item {
  align-items: flex-start;
  gap: 12px;
  width: 147px;
  min-height: 70px;
  padding: 11px 10px 11px 9px;           /* dot at chip+10,+16 · label at +37 */
  border-radius: var(--r-2xs);
  border: 1px dashed currentColor;
}

[data-screen="installation"] .install-legend__item .chart__swatch { margin-top: 4px; }

[data-screen="installation"] .install-legend__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

[data-screen="installation"] .install-legend__label {
  font-size: var(--fs-sm);
  line-height: 21px;
  font-weight: var(--fw-light);
  color: #000;
}

[data-screen="installation"] .install-legend__value {
  font-size: var(--fs-h3);
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: #000;
}

[data-screen="installation"] .install-legend__item--installed { background: var(--t-violet);  color: var(--c-violet); }
[data-screen="installation"] .install-legend__item--pending   { background: var(--t-amber-2); color: var(--c-amber-bright); }
[data-screen="installation"] .install-legend__item--failed    { background: var(--t-teal);    color: var(--c-teal); }

/* --------------------------------------------------------------------------
   2b. Installation Activity — line chart (137:721)
      The plot bleeds to the card's right edge exactly as the frame draws it,
      so the body has no right padding.
   -------------------------------------------------------------------------- */

[data-screen="installation"] .install-activity .card__body {
  padding: 15px 0 10px var(--card-pad);  /* top gridline lands at y=384 */
}

/* Grid, line and point all take shared values — the gridline asset is
   #a1a4b5 @0.6 with a 2/2 dash, i.e. exactly --c-grid-soft and the
   .chart__gridline default, and the line and the vertices are both --c-purple. */
[data-screen="installation"] .install-chart {
  --chart-tick: 13px;
  --c-grid: var(--c-grid-soft);
  --line: var(--c-purple);
  --line-w: 2;
  --point: var(--c-purple);
}

/* The frame centres the y-axis numerals on their gridline rather than
   right-ranging them (137:747). */
[data-screen="installation"] .install-chart .chart__ticks--y .chart__tick { text-anchor: middle; }

[data-screen="installation"] .install-chart__line { filter: drop-shadow(var(--sh-chart-line)); }

[data-screen="installation"] .install-chart__point { stroke: none; }

/* Static callout on the Wednesday vertex — 138:780. */
/* The shadow has to be a filter rather than a box-shadow: the bubble's tail is
   a pseudo-element, and only a filter treats bubble + tail as one silhouette —
   with box-shadow the tail is white-on-white and disappears. */
[data-screen="installation"] .install-chart__tip {
  width: 68px;
  height: 48px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.05));
}

[data-screen="installation"] .install-chart__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--s-card);
}

[data-screen="installation"] .install-chart__tip .chart__tooltip-label {
  font-size: var(--fs-xs);
  line-height: 20px;
  color: var(--c-muted-5);
}

[data-screen="installation"] .install-chart__tip .chart__tooltip-value {
  font-size: var(--fs-xs);
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: var(--c-tip-ink);
}

/* --------------------------------------------------------------------------
   3. Recent Installation Status (138:785)
      The header rule the frame draws (138:793) is white at 8% — invisible —
      so it is dropped here rather than reproduced. The row rules are the
      shared .table--dashed treatment unchanged: the exported asset is
      #323232 @0.3 on a 3/3 dash, which is exactly --c-rule-dash.
   -------------------------------------------------------------------------- */

[data-screen="installation"] .install-recent .card__head {
  /* 19px right gutter, not 28 — 138:790 sits closer to the edge than the two
     card heads above it do. Bottom padding puts the header row centre at 759. */
  padding: var(--card-pad-top) 19px 13px var(--card-pad);
}

[data-screen="installation"] .install-table {
  --h-row: 55px;
  --h-row-head: 54px;
}

[data-screen="installation"] .install-table th,
[data-screen="installation"] .install-table td { padding: 0; }

[data-screen="installation"] .install-table th:first-child,
[data-screen="installation"] .install-table td:first-child { padding-left: 33px; }

[data-screen="installation"] .install-table th:last-child,
[data-screen="installation"] .install-table td:last-child { padding-right: 33px; }

[data-screen="installation"] .install-table thead th { border-bottom: 0; }

/* The frame gives the first body row more air than the rest (138:793 sits at
   y=842, six rows later the pitch has settled to ~55). */
[data-screen="installation"] .install-table tbody tr:first-child td { height: 58px; }

/* Column starts transcribed from the frame's text nodes, as a share of the
   1036px card: 33 / 233 / 396 / 542 / 710 / 929. */
[data-screen="installation"] .install-table__col-employee { width: 22.49%; }
[data-screen="installation"] .install-table__col-device   { width: 15.73%; }
[data-screen="installation"] .install-table__col-version  { width: 14.09%; }
[data-screen="installation"] .install-table__col-status   { width: 16.22%; }
[data-screen="installation"] .install-table__col-date     { width: 21.14%; }
[data-screen="installation"] .install-table__col-action   { width: 10.33%; }

/* The row "…" is a bare glyph in this frame, not the chip the card heads use. */
[data-screen="installation"] .install-table__more {
  width: 31px;
  height: 26px;
  background: none;
  font-size: 20px;
  letter-spacing: 0;
}

[data-screen="installation"] .install-table__more:hover { color: var(--c-ink-4); }

/* --------------------------------------------------------------------------
   Reflow
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="installation"] .install-row { grid-template-columns: minmax(0, 1fr); }
  [data-screen="installation"] .install-activity .card__body { padding-right: var(--card-pad); }
}

@media (max-width: 640px) {
  [data-screen="installation"] .install-status .card__body {
    flex-direction: column;
    justify-content: flex-start;
  }
  [data-screen="installation"] .install-legend { width: 100%; }
  [data-screen="installation"] .install-legend__item { width: 100%; }
  [data-screen="installation"] .install-recent .card__head,
  [data-screen="installation"] .install-status .card__body,
  [data-screen="installation"] .install-activity .card__body {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }
  [data-screen="installation"] .install-table th:first-child,
  [data-screen="installation"] .install-table td:first-child { padding-left: var(--gap-sm); }
  [data-screen="installation"] .install-table th:last-child,
  [data-screen="installation"] .install-table td:last-child { padding-right: var(--gap-sm); }
}

/* ===== screens/live-streaming.css ===== */
/* ==========================================================================
   Live Streaming
   ========================================================================== */

[data-screen="live-streaming"] .ls-card { margin-bottom: var(--gap-sm); }

[data-screen="live-streaming"] .ls-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
}

@media (max-width: 1100px) {
  [data-screen="live-streaming"] .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  [data-screen="live-streaming"] .ls-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The label pair must shrink so the Watch button never wraps under it. */
[data-screen="live-streaming"] .stream__foot > div { min-width: 0; flex: 1 1 auto; }
[data-screen="live-streaming"] .stream__foot .btn { flex: 0 0 auto; }

[data-screen="live-streaming"] .stream__name,
[data-screen="live-streaming"] .stream__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== screens/mass-deployment.css ===== */
/* ==========================================================================
   screen: mass-deployment
   Figma 143:1589 — "Mass Deployment", 1440x2953, tenant shell.

   This screen is the portal's long-form register: one white document card
   (143:1819, white, 20px top radius, no stroke) 1038 wide holding prose, a
   tab strip, two kinds of panel and a numbered walkthrough. It reuses .card,
   .tabs/.tab, .table + .table--dashed and .table-wrap; everything else here
   is genuinely local to a documentation page.

   Two panel skins, both 966 wide and both drawn at r=23:
     .md-note   green  — #ecfdf0 fill + #239b44 stroke, the whole rect at 30%
                         opacity (151:13). Used for the "why" callout and for
                         every code listing.
     .md-panel  cool   — #fbfdff fill + #e6e6e6 stroke (151:28, 151:173).
                         Used for the comparison table and the tamper summary.

   Vertical rhythm is transcribed from the frame. The design is hand-placed,
   so the step gaps run 14-31px and the in-step gaps 6-22px; those are
   normalised to 24 / 19 / 16 here, which lands the foot of the card within
   ~8px of the 2953 frame over 2800px of content.
   ========================================================================== */

[data-screen="mass-deployment"] {
  /* 966 content width inside the card: 1038 - 2x36 gutter. */
  --md-gutter: 36px;      /* card gutter                       397 - 361    */
  --md-pad: 29px;         /* panel gutter                      426 - 397    */
  --md-step-gap: 23px;    /* between numbered steps                         */
  --md-block-gap: 19px;   /* step title -> its panel                        */
  --md-text-gap: 16px;    /* step title / panel -> its paragraph            */
}

/* --------------------------------------------------------------------------
   Page title — 143:1810 is 25/24 Medium #1c1c21, not the 30px .page-title
   the dashboards use, and it sits 6px below the main gutter.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .page-title {
  margin: 6px 0 27px;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Document card — 143:1819
   White, no stroke, 20px radius. Figma rounds only the top corners because
   the card is cut off by the frame edge; a real page has a foot, so all four
   corners take the same radius.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-guide {
  padding: var(--md-gutter) var(--md-gutter) 73px;
  border: 0;
  border-radius: var(--r-doc);
}

[data-screen="mass-deployment"] .md-guide__title {
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

/* 148:1943 is a 737px box, but Poppins sets a shade narrower in the browser
   than in Figma, so the measure is trimmed to reproduce the frame's own break
   after "…if an employee deletes". Same reasoning wherever a max-width below
   sits a few px under the node it cites. */
[data-screen="mass-deployment"] .md-guide__lede {
  max-width: 705px;
  margin-top: 21px;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

/* 151:79 — the second 25px heading, 38px clear of the comparison panel. */
[data-screen="mass-deployment"] .md-guide__section {
  margin-top: 38px;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-guide__intro {
  max-width: 931px;
  margin-top: 19px;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

/* --------------------------------------------------------------------------
   Tab strip — 148:1946..151:9
   No rule under the strip; only the active row carries one, a 1px #10712a
   pill that overhangs its label by ~6px either side.
   -------------------------------------------------------------------------- */

/* The strip keeps .tabs' overflow-x, so it is inset by the 8px the active
   rule overhangs to the left — otherwise the scroll box clips the rule. */
[data-screen="mass-deployment"] .tabs--guide {
  gap: 28px;
  margin: 21px 0 0 -8px;
  padding: 0 0 4px 8px;
  border-bottom: 0;
}

[data-screen="mass-deployment"] .tabs--guide .tab {
  padding: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .tabs--guide .tab:hover { color: var(--c-green-deep); }

[data-screen="mass-deployment"] .tabs--guide .tab.is-active {
  color: var(--c-green-deep);
  font-weight: var(--fw-medium);
}

[data-screen="mass-deployment"] .tabs--guide .tab.is-active::after {
  left: -7px;
  right: -6px;
  bottom: -2px;
  height: 1px;
  border-radius: var(--r-pill);
  background: var(--c-green-deep);
}

/* --------------------------------------------------------------------------
   Green callout / code listing — 151:13, 151:85, 151:133, 151:152
   The Figma rect carries the fill AND the stroke at 30% opacity, so both are
   written here as the composited rgba rather than as opacity, which would
   otherwise fade the type sitting inside.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-note,
[data-screen="mass-deployment"] .md-code {
  border: 1px solid var(--t-note-line);
  border-radius: var(--r-card);
  background: var(--t-note);
}

/* Every panel gutter below is the Figma inset less 1px: Figma's rect height
   swallows its own stroke, CSS adds the border outside the padding box, so
   without the trim each panel stands 2px taller than the frame and the page
   walks away from the design. */
[data-screen="mass-deployment"] .md-note {
  margin-top: var(--gap);
  padding: 27px var(--md-pad) 26px;
}

[data-screen="mass-deployment"] .md-note__title {
  font-size: var(--fs-h2);
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-note__text {
  max-width: 879px;
  margin-top: 13px;
  font-size: var(--fs-h3);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-note__text + .md-note__text { margin-top: 20px; }
[data-screen="mass-deployment"] .md-note__text--accent { color: var(--c-green-note); }

/* --------------------------------------------------------------------------
   Cool-white panel — 151:28 (comparison), 151:173 (tamper summary)
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-panel {
  margin-top: var(--gap);
  padding: 27px var(--md-pad) 27px;
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-card);
  background: var(--s-panel-cool);
}

[data-screen="mass-deployment"] .md-panel__title {
  font-size: var(--fs-h2);
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-panel__lede {
  max-width: 879px;
  margin-top: 14px;
  font-size: var(--fs-h3);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

/* --------------------------------------------------------------------------
   Comparison table — 151:27
   .table--dashed already draws the 3/3 rgba(50,50,50,.3) row rule that
   151:36..151:38 export as SVG. What this screen changes: the head rule comes
   back as white at 8% in the design (151:35), i.e. invisible, so it is
   dropped; the rules are inset 16 left / 28 right of the panel; and the first
   column is a row header rather than a data cell.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-panel--compare { padding: 27px 0 12px; }

/* 151:77 is the one 20px title in the screen set at a 20px leading, not 24. */
[data-screen="mass-deployment"] .md-panel__title--inset {
  margin: 0 32px 13px;
  line-height: var(--lh-h2);
}

[data-screen="mass-deployment"] .md-compare {
  padding-left: 16px;
  padding-right: 28px;
}

[data-screen="mass-deployment"] .md-compare .table { min-width: 640px; }

/* 430 / 671 / 956 / 1195 measured off a 922-wide table body at x=413. */
[data-screen="mass-deployment"] .md-compare__c1 { width: 26.7%; }
[data-screen="mass-deployment"] .md-compare__c2 { width: 30.9%; }
[data-screen="mass-deployment"] .md-compare__c3 { width: 25.9%; }
[data-screen="mass-deployment"] .md-compare__c4 { width: 16.5%; }

[data-screen="mass-deployment"] .md-compare .table th:first-child,
[data-screen="mass-deployment"] .md-compare .table td:first-child { padding-left: 17px; }

[data-screen="mass-deployment"] .md-compare .table th:last-child,
[data-screen="mass-deployment"] .md-compare .table td:last-child { padding-right: 0; }

[data-screen="mass-deployment"] .md-compare .table thead th {
  height: 53px;
  border-bottom: 0;
}

/* The row header takes the body cell's voice, not <th>'s default weight. */
[data-screen="mass-deployment"] .md-compare .table tbody th,
[data-screen="mass-deployment"] .md-compare .table tbody td {
  height: 55px;
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
  white-space: normal;
}

/* .table--dashed only paints the dash on <td>; the row header needs it too. */
[data-screen="mass-deployment"] .md-compare .table tbody th {
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

[data-screen="mass-deployment"] .md-compare .table tbody tr:last-child th { background-image: none; }

/* --------------------------------------------------------------------------
   Numbered walkthrough — 151:82 / 151:94 / 151:110 / 151:130 / 151:150
   Figma draws each step as a one-item decimal list whose marker sits at 404
   and whose text starts at 420. The panels and paragraphs under a step run
   the full 966 content width, so they are pulled back out of the indent.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-steps {
  margin-top: 28px;
  padding-left: 23px;
  list-style: decimal;
}

[data-screen="mass-deployment"] .md-steps > li { margin-top: var(--md-step-gap); }
[data-screen="mass-deployment"] .md-steps > li:first-child { margin-top: 0; }

/* The marker is set at the step's own 20px, not at the card's body size. */
[data-screen="mass-deployment"] .md-steps > li::marker {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-steps__title {
  font-size: var(--fs-h2);
  line-height: 24px;
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-steps > li > * + * {
  margin-top: var(--md-text-gap);
  margin-left: -23px;
}

[data-screen="mass-deployment"] .md-steps > li > * + .md-code { margin-top: var(--md-block-gap); }

/* --------------------------------------------------------------------------
   Body copy inside the walkthrough
   -------------------------------------------------------------------------- */

/* Measures are the Figma text boxes: 151:92 / 151:146 at 955, 151:96 at 881,
   151:120 at 897 (one line), 151:138 at 939, 151:161 at 911 — each trimmed
   just enough to land the frame's own line breaks in the browser. */
[data-screen="mass-deployment"] .md-p {
  max-width: 955px;
  font-size: var(--fs-h3);
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-p--gpo    { max-width: 881px; line-height: var(--lh-body); }
[data-screen="mass-deployment"] .md-p--path   { max-width: none;  line-height: 28px; }
[data-screen="mass-deployment"] .md-p--props  { max-width: 930px; }
[data-screen="mass-deployment"] .md-p--verify { max-width: 900px; }

/* 151:92 renders "Download Agent" in the body ink; 151:146 renders it blue. */
[data-screen="mass-deployment"] .md-p__ref { color: inherit; }
[data-screen="mass-deployment"] .md-p__ref:hover { text-decoration: underline; }

[data-screen="mass-deployment"] .md-link { color: var(--c-blue); }
[data-screen="mass-deployment"] .md-link:hover { text-decoration: underline; }

/* The literals the design picks out in pink — paths, OU names, values. */
[data-screen="mass-deployment"] .md-hl { color: var(--c-pink); }

/* 151:104 and friends: a 9.7x8.7 stroked arrow drawn over the "→" in the
   copy. Poppins has no U+2192, so the exported vector is the glyph. */
[data-screen="mass-deployment"] .md-arrow {
  display: inline-block;
  width: 9.7px;
  height: 8.7px;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url(../assets/icons/step-arrow.svg) center / contain no-repeat;
          mask: url(../assets/icons/step-arrow.svg) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Code listings — 151:83, 151:111, 151:131, 151:151
   Poppins Light, not a mono face: the design sets these in the body font.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-code { padding: 23px var(--md-pad) 25px; }

/* 151:113 has no title and a taller listing; 151:152 is the short one, r=17. */
[data-screen="mass-deployment"] .md-code--plain { padding: 20px var(--md-pad) 31px; }
[data-screen="mass-deployment"] .md-code--tight { padding: 13px var(--md-pad) 23px; border-radius: 17px; }

[data-screen="mass-deployment"] .md-code__title {
  display: flex;
  align-items: center;
  font-size: var(--fs-h2);
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-green-note);
}

/* 151:142 — the "───" in the label is overpainted with a real 30x1 rule. */
[data-screen="mass-deployment"] .md-code__rule {
  flex: none;
  width: 30px;
  height: 1px;
  margin: 0 8px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* The listings are set in Poppins Light, not a mono face — so the <code>
   child has to be pulled off the UA monospace default as well as the <pre>. */
[data-screen="mass-deployment"] .md-code__pre,
[data-screen="mass-deployment"] .md-code__pre code {
  font-family: var(--ff);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

[data-screen="mass-deployment"] .md-code__pre {
  overflow-x: auto;
  margin: 0;
  line-height: 26px;
  white-space: pre;
}

[data-screen="mass-deployment"] .md-code__title + .md-code__pre { margin-top: 13px; }
[data-screen="mass-deployment"] .md-code__pre--tree { line-height: 28px; }
[data-screen="mass-deployment"] .md-code__pre--follow { margin-top: 15px; }

[data-screen="mass-deployment"] .md-code__path { color: var(--c-pink); }

/* --------------------------------------------------------------------------
   Tamper summary — 151:171
   The tick is a gradient badge (#0192b8 -> #239b44), so it ships as an <img>
   rather than a mask; a mask would throw the gradient away.
   -------------------------------------------------------------------------- */

[data-screen="mass-deployment"] .md-panel--tamper { margin-top: 18px; }

/* 151:184..151:202 sit 22 / 21 / 19 / 16 apart in the frame; one 19px step
   holds the panel to its 366px height. */
[data-screen="mass-deployment"] .md-checks {
  display: flex;
  flex-direction: column;
  gap: 19px;
  margin-top: 22px;
}

[data-screen="mass-deployment"] .md-checks__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

[data-screen="mass-deployment"] .md-checks__icon {
  flex: none;
  width: 21px;
  height: 24px;
  margin-top: 3px;
}

[data-screen="mass-deployment"] .md-checks__text {
  max-width: 828px;
  font-size: var(--fs-h3);
  line-height: 28px;
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

/* --------------------------------------------------------------------------
   Narrow widths
   The card is a single 966px column, so it only needs its gutters to shrink
   and its fixed prose measures to give way to the available width.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="mass-deployment"] .md-guide__lede,
  [data-screen="mass-deployment"] .md-guide__intro,
  [data-screen="mass-deployment"] .md-note__text,
  [data-screen="mass-deployment"] .md-panel__lede,
  [data-screen="mass-deployment"] .md-p,
  [data-screen="mass-deployment"] .md-p--24,
  [data-screen="mass-deployment"] .md-p--28,
  [data-screen="mass-deployment"] .md-checks__text { max-width: none; }
}

@media (max-width: 900px) {
  [data-screen="mass-deployment"] {
    --md-gutter: 24px;
    --md-pad: 20px;
  }

  [data-screen="mass-deployment"] .md-guide { padding-bottom: 40px; }
  [data-screen="mass-deployment"] .md-panel__title--inset { margin: 0 20px 13px; }
  [data-screen="mass-deployment"] .md-compare { padding-left: 4px; padding-right: 4px; }
  [data-screen="mass-deployment"] .md-compare .table th:first-child,
  [data-screen="mass-deployment"] .md-compare .table td:first-child { padding-left: 16px; }
  [data-screen="mass-deployment"] .md-compare .table th:last-child,
  [data-screen="mass-deployment"] .md-compare .table td:last-child { padding-right: 16px; }
}

@media (max-width: 640px) {
  [data-screen="mass-deployment"] {
    --md-gutter: 16px;
    --md-pad: 16px;
  }

  [data-screen="mass-deployment"] .page-title { font-size: 21px; }

  [data-screen="mass-deployment"] .md-guide__title,
  [data-screen="mass-deployment"] .md-guide__section { font-size: 21px; }

  [data-screen="mass-deployment"] .md-note__title,
  [data-screen="mass-deployment"] .md-panel__title,
  [data-screen="mass-deployment"] .md-code__title,
  [data-screen="mass-deployment"] .md-steps__title { font-size: 18px; }

  [data-screen="mass-deployment"] .md-code__pre { font-size: var(--fs-sm); }
}

/* Jump-nav targets: clear the sticky topbar plus breathing room when a guide
   tab scrolls the section to the top. */
[data-screen="mass-deployment"] [id="why-use-this"],
[data-screen="mass-deployment"] [id="compare-options"],
[data-screen="mass-deployment"] [id="active-directory-gpo"],
[data-screen="mass-deployment"] [id="rmm-tools"],
[data-screen="mass-deployment"] [id="manual-install"],
[data-screen="mass-deployment"] [id="antivirus-setup"],
[data-screen="mass-deployment"] [id="tamper-detection"] {
  scroll-margin-top: calc(var(--topbar-h) + 18px);
}

/* ===== screens/my-profile.css ===== */
/* ==========================================================================
   My Profile — screen styles
   Figma 246:2 (1440x1517, tenant shell)

   Everything is scoped under [data-screen="my-profile"]. The screen composes
   .card / .card--gradient / .card--panel / .card__section / .card__divider,
   .avatar / .badge / .btn / .icon-btn, .field / .input / .form-grid,
   .list / .list__row, .meter and .switch__input — nothing shared is forked.

   Frame geometry every number below comes from (frame coordinates; the
   content plate starts at x=324 and the topbar ends at y=77, so the content
   column runs 361..1402 = 1041 wide):

     page title        246:244   (361, 112)
     hero banner       247:318   1041x183 at (361, 164)
     Personal Info     261:639    509x369 at (361, 367)
     Account&Security  264:966    519x370 at (883, 366)
     Profile form      261:640   1041x734 at (361, 749)
                       rules at y=997 (265:968) and y=1257 (265:970)
   ========================================================================== */

[data-screen="my-profile"] .profile {
  display: flex;
  flex-direction: column;
}

/* Stack gaps are hand-set in the frame: 20px hero -> panels (347 -> 367) and
   13px panels -> form (736 -> 749). */
[data-screen="my-profile"] .profile__panels { margin-top: 20px; }
[data-screen="my-profile"] .profile__form   { margin-top: 13px; }

/* --------------------------------------------------------------------------
   1. Hero banner — 247:318
   Avatar 132 at (28, 25) inside the panel, identity block beside it, the
   completion meter pinned bottom-right and the Edit chip top-right.
   -------------------------------------------------------------------------- */

[data-screen="my-profile"] .profile__hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;                       /* 521 -> 547 */
  min-height: 183px;
  padding: 25px 29px 26px 28px;
  /* 247:320 — the same pair as --g-banner at a different angle, see tokens. */
  background: var(--g-profile-hero);
  /* 247:320 has no stroke at all, so the 1px .card hairline is dropped rather
     than made transparent — otherwise the panel measures 185, not 183. */
  border: 0;
  border-radius: var(--r-panel);   /* 10px, not the banner's 15 */
}

[data-screen="my-profile"] .profile__photo { --avatar-size: 132px; }

/* -- identity ------------------------------------------------------------- */

/* The 22px verified badge makes the name's line box 2 taller than the frame's
   20, so the column is nudged back onto the frame's y=202 baseline. */
[data-screen="my-profile"] .profile__identity { min-width: 0; margin-top: 3px; }

/* 247:348 — 20/20 Medium white, with the 22px verified badge 11px after it. */
[data-screen="my-profile"] .profile__name {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--c-on-brand);
}

[data-screen="my-profile"] .profile__verified {
  flex: none;
  width: 22px;
  height: 22px;
}

/* 248:361 — 15px Regular #c3c3c3 in a 23px box. The 5px step (rather than the
   frame's 7) absorbs the 2px the 22px badge adds to the name's line box. */
[data-screen="my-profile"] .profile__role {
  margin-top: 5px;
  font-size: var(--fs-body);
  line-height: 23px;
  color: var(--c-hero-meta);
}

/* 248:358 — 93x22 pill, r=100, #d9d9d9 @13% behind a 0.5px white @14% edge.
   .badge--solid is the same object; only the fill and the metrics differ. */
/* flex, not the default inline flow — otherwise the paragraph's 24px leading
   sets the row height instead of the 22px pill. */
[data-screen="my-profile"] .profile__team { display: flex; margin-top: 8px; }

[data-screen="my-profile"] .profile__team .badge {
  height: 22px;
  padding: 0 14px;
  background: var(--t-hero-tag);
  border: 0.5px solid var(--t-hero-tag-line);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-size: var(--fs-3xs);
  line-height: var(--lh-3xs);
}

/* 247:351 / 247:353 — 13px #cdced7 after the 13.33px sms glyph. */
[data-screen="my-profile"] .profile__mail {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-hero-mail);
}

[data-screen="my-profile"] .profile__mail img { flex: none; }
[data-screen="my-profile"] .profile__mail a:hover { text-decoration: underline; }

/* -- completion meter — 247:321 ------------------------------------------- */

[data-screen="my-profile"] .profile__completion {
  position: absolute;
  right: 29px;                     /* 1373 of 1402 */
  bottom: 36px;                    /* 311 of 347   */
  width: 245px;
}

[data-screen="my-profile"] .profile__completion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-sm);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-hero-stat);
}

[data-screen="my-profile"] .profile__completion-value { font-weight: var(--fw-semibold); }

[data-screen="my-profile"] .profile__meter {
  --meter-h: 4px;
  --meter-track: var(--t-hero-track);
  --meter-ink: var(--c-hero-bar);
  margin-top: 5px;                 /* 302 -> 307 */
}

/* --------------------------------------------------------------------------
   Edit chip — 255:561 (hero), 251:473 (Personal Info), 261:715 (form)
   All three are the 70x36 r=6 ghost chip the button layer measured off
   261:718; only the fill changes on the gradient. Each is a corner control,
   so it is pinned rather than floated into the heading's flow — the frame
   puts all three at exactly 20px from their panel's top edge.
   -------------------------------------------------------------------------- */

[data-screen="my-profile"] .profile__edit {
  position: absolute;
  top: 20px;
  width: 70px;
  padding: 0;
  gap: 6px;                        /* 1339 -> 1345 */
}

[data-screen="my-profile"] .profile__edit-icon { --icon-size: 15px; }

[data-screen="my-profile"] .profile__edit--hero {
  right: 19px;                     /* 1383 of 1402 */
  background: var(--t-hero-chip);
  color: var(--c-on-brand);
}

[data-screen="my-profile"] .profile__edit--hero:hover {
  background: rgba(255, 255, 255, 0.18);
}

[data-screen="my-profile"] .profile__edit--personal { right: 29px; }  /* 841 of 870  */
[data-screen="my-profile"] .profile__edit--form     { right: 22px; }  /* 1380 of 1402 */

/* --------------------------------------------------------------------------
   2 + 3. The side-by-side panels — 261:639 (509) and 264:966 (519) on a
   13px gutter, together the full 1041 column.
   -------------------------------------------------------------------------- */

[data-screen="my-profile"] .profile__panels {
  display: grid;
  grid-template-columns: 509fr 519fr;
  gap: 13px;
}

/* Both panels carry the 1px --s-card-line-2 stroke, and the frame's 509/519
   widths include it, so every pad below is the frame inset minus that pixel:
   Personal 22/22/33 (383 of 361, 736 of 703) and Account 20/18/20 with the
   title stepped a further 7 in (910 of 883). */
[data-screen="my-profile"] .profile__panel { position: relative; }

[data-screen="my-profile"] .profile__panel--personal { padding: 21px 21px 32px; }
[data-screen="my-profile"] .profile__panel--account  { padding: 23px 17px 19px 19px; }

/* 251:472 / 260:569 — 20/20 Medium, hard black rather than --c-ink-4. */
[data-screen="my-profile"] .profile__panel-title {
  color: var(--c-ink-0);
  margin: 0;
}

[data-screen="my-profile"] .profile__panel--account .profile__panel-title { margin-left: 7px; }

/* --------------------------------------------------------------------------
   2. Personal Information — 261:639
   Two columns on a 280px pitch (383 / 663), four rows on a 70px pitch
   (453 / 523 / 593 / 663). Each item is a 29px disc plus a 40px text block.
   -------------------------------------------------------------------------- */

[data-screen="my-profile"] .pinfo {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  row-gap: 30px;                   /* 70 pitch - 40 item */
  margin-top: 44px;                /* 409 -> 453 */
}

[data-screen="my-profile"] .pinfo__item {
  display: flex;
  gap: 12px;                       /* 412 -> 424 */
  min-width: 0;
}

/* 252:486 — 29px disc, glyph 13.52x13 centred (252:487). */
[data-screen="my-profile"] .pinfo__disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  margin-top: 5px;                 /* 453 -> 458 */
  border-radius: 50%;
  background: var(--pinfo-tint);
  color: var(--pinfo-ink);
}

/* The eight rows all draw the SAME exported monitor glyph, re-tinted; the
   file is masked so one export serves all eight. */
[data-screen="my-profile"] .pinfo__glyph {
  --icon: url(../assets/icons/monitor.svg);
  --icon-size: 13.52px;
}

[data-screen="my-profile"] .pinfo__item--indigo  { --pinfo-tint: var(--t-fld-indigo);  --pinfo-ink: var(--c-fld-indigo); }
[data-screen="my-profile"] .pinfo__item--amber   { --pinfo-tint: var(--t-fld-amber);   --pinfo-ink: var(--c-fld-amber); }
[data-screen="my-profile"] .pinfo__item--green   { --pinfo-tint: var(--t-fld-green);   --pinfo-ink: var(--c-fld-green); }
[data-screen="my-profile"] .pinfo__item--teal    { --pinfo-tint: var(--t-fld-teal);    --pinfo-ink: var(--c-fld-teal); }
[data-screen="my-profile"] .pinfo__item--rose    { --pinfo-tint: var(--t-fld-rose);    --pinfo-ink: var(--c-fld-rose); }
[data-screen="my-profile"] .pinfo__item--magenta { --pinfo-tint: var(--t-fld-magenta); --pinfo-ink: var(--c-fld-magenta); }
[data-screen="my-profile"] .pinfo__item--blue    { --pinfo-tint: var(--t-fld-blue);    --pinfo-ink: var(--c-fld-blue); }
[data-screen="my-profile"] .pinfo__item--violet  { --pinfo-tint: var(--t-fld-violet);  --pinfo-ink: var(--c-fld-violet); }

[data-screen="my-profile"] .pinfo__text { min-width: 0; }

/* 252:484 label 15/20 Regular, 252:485 value 14/20 Light — both #4c4c4c. */
[data-screen="my-profile"] .pinfo__label {
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-row);
}

[data-screen="my-profile"] .pinfo__value {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-h3);
  font-weight: var(--fw-light);
  color: var(--c-ink-row);
}

/* --------------------------------------------------------------------------
   3. Account & Security — 264:966
   Five .list__row objects, 481x46 on a 12.75px gutter (435 / 493 / 552 /
   611 / 670). The shared row pads 6px top and bottom, which two 20px lines
   would push to 52; this frame holds them at exactly 46.
   -------------------------------------------------------------------------- */

[data-screen="my-profile"] .acct {
  gap: 12.75px;
  margin-top: 25px;                /* 410 -> 435 */
}

[data-screen="my-profile"] .acct__row {
  width: 100%;
  height: 46px;
  min-height: 0;
  padding: 0 12px 0 13px;          /* glyph 916 of 903, pill 12 in from 1384 */
  text-align: left;
}

[data-screen="my-profile"] .acct__row .list__body {
  display: flex;
  flex-direction: column;
}

/* 260:624 — the Active pill is the deeper #c2f4d0 @50% of the profile frame,
   not the table's #ddffe6 @60%. */
[data-screen="my-profile"] .acct__pill {
  --badge-bg: rgba(194, 244, 208, 0.5);
  flex: none;
  gap: 4px;
  padding: 0 13px 0 14px;
}

/* 260:631 — 35x18 track, knob 14 at x=19; the shared switch already draws it.
   It sits 14 in from the row's right edge where the pill sits 12. */
[data-screen="my-profile"] .acct__switch { flex: none; margin-right: 2px; }

/* 260:635 — the chevron sits 20px in from the row's right edge. */
[data-screen="my-profile"] .acct__row.list__row--link { padding-right: 20px; }

/* --------------------------------------------------------------------------
   4. Profile Information / Update Password / Delete Account — 261:640
   One panel, three sections, two full-bleed rules. Section paddings are the
   frame's own: 22 above the first title, 27 below each rule.
   -------------------------------------------------------------------------- */

[data-screen="my-profile"] .pform__section {
  position: relative;
  padding: 26px 21px 36px;
}

[data-screen="my-profile"] .pform__title {
  color: var(--c-ink-0);
  margin-bottom: 23px;             /* 791 -> 814 */
}

/* 749 -> 771 above the first title (21 + the panel's 1px stroke); each rule
   then opens the next section 26 above its heading. */
[data-screen="my-profile"] .pform__section--profile { padding: 21px 21px 33px; }
[data-screen="my-profile"] .pform__section--delete  { padding-bottom: 46px; }

/* The two form sections open 23 under their heading (791 -> 814); the prose
   section opens 10 (1304 -> 1314). */
[data-screen="my-profile"] .pform__section--delete .pform__title { margin-bottom: 10px; }

/* 261:782 — 315 / 316 / 315 on a 20px gutter, 986 wide.
   263:899 — 318 / 318 / 318 on a 21px gutter, the full 996. */
[data-screen="my-profile"] .pform__grid--profile  { max-width: 986px; column-gap: 20px; }
[data-screen="my-profile"] .pform__grid--password { column-gap: 21px; }

/* 896 -> 922 under Profile Information, 1149 -> 1179 under Update Password. */
[data-screen="my-profile"] .pform__actions { margin-top: 26px; }
[data-screen="my-profile"] .pform__section--password .pform__actions { margin-top: 30px; }

/* 261:879 / 264:962 / 265:1033 / 265:1039 — all four pills are 42 tall with
   a 15px label; .btn--primary otherwise sets 17. */
[data-screen="my-profile"] .pform__btn {
  padding: 0;
  font-size: var(--fs-body);
}

[data-screen="my-profile"] .pform__btn--save   { width: 130px; }
[data-screen="my-profile"] .pform__btn--update { width: 161px; }
[data-screen="my-profile"] .pform__btn--cancel { width: 130px; }
[data-screen="my-profile"] .pform__btn--delete { width: 130px; }

/* 265:1026 — 18/28 #5f6264 in a 731px measure, which is what breaks the
   sentence after "undone". .card__text already carries the type. */
/* Figma reports the two-line box as 47 tall; .card__text sets 18/28, which is
   56. The 24px step below lands the buttons on the frame's y=1394 all the same. */
[data-screen="my-profile"] .pform__text {
  max-width: 731px;
  margin-bottom: 24px;
}

[data-screen="my-profile"] .pform__delete-actions { gap: 10px; }  /* 514 -> 524 */

/* --------------------------------------------------------------------------
   Narrow widths
   The frame is a fixed 1440 desktop design; below it the two panels stack,
   the hero drops its absolute corners into the flow and the 3-up field grid
   falls back to the shared .form-grid breakpoints.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="my-profile"] .profile__panels {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-sm);
  }
}

@media (max-width: 900px) {
  [data-screen="my-profile"] .pinfo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  [data-screen="my-profile"] .profile__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: 20px;
    padding-top: 56px;             /* clears the pinned Edit chip */
  }

  [data-screen="my-profile"] .profile__completion {
    position: static;
    grid-column: 1 / -1;
    width: auto;
  }

  [data-screen="my-profile"] .pform__grid--profile { max-width: none; }
}

@media (max-width: 640px) {
  [data-screen="my-profile"] .pinfo { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }

  [data-screen="my-profile"] .profile__hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  [data-screen="my-profile"] .profile__panel,
  [data-screen="my-profile"] .pform__section { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }

  [data-screen="my-profile"] .profile__edit--personal,
  [data-screen="my-profile"] .profile__edit--form { right: var(--gap-sm); }

  [data-screen="my-profile"] .pform__btn { width: auto; padding: 0 22px; }
}

/* ===== screens/policies-configuration.css ===== */
/* ==========================================================================
   Policies Configuration - screen styles
   Figma frame 234:2558 (1440 x 1255, tenant shell)

   The frame is one object: a heading row and a single table panel.

     title    234:2793  Poppins Medium 25/24 #1c1c21 at x=361 y=112
     button   235:3234  187x42, r=6, gradient #0092ba -> #428b0a, 17px white
     card     235:3026  1039x752 at x=364 y=164, white, r=15, 1px #e6e6e6
     head bar 235:3028  1039x51, gradient #125587 -> #0c5921 @101.79%
     rows     235:3037..235:3488  12 rows, 58.4px pitch, 3/3 dashed rule
     pill     235:3257 Yes (#c2f4d0 @50%) / 235:3263 No (#ffd7e1 @50%)
     actions  235:3246 link  40x40 #fff4de @70%, glyph #c08104
              235:3244 edit  40x40 #d2ffde @60%, glyph #239b44
              235:3245 trash 40x40 #ffd7e1 @50%, glyph #db2754 stroked 1.5

   Everything is composed from .card--policies + .table--gradient-head +
   .badge + .icon-btn; the rules below are the scoped deltas only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading row
   base.css sets .page-title to the 30/36 SemiBold step; 234:2793 is 25/24
   Poppins Medium in --c-ink, the same heading every other tenant frame draws.
   Scoped here rather than forked into base.css - see the report.

   The title and the 42px button share a centre line at y=124 in the frame,
   so they live on one flex row. The row starts at the --pad-y gutter (y=105)
   and is 42 tall, which puts the card top at 105+42+17 = 164, matching
   235:3026 exactly.
   -------------------------------------------------------------------------- */

[data-screen="policies-configuration"] .pol-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: 17px;
}

[data-screen="policies-configuration"] .page-title {
  margin: 0;
  font-size: var(--fs-stat);        /* 25px  - 234:2793 */
  line-height: var(--lh-stat);      /* 24px             */
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* 235:3234 is 187 wide with a 161px label, so the gutters are 13px a side.
   Fixing the width keeps it off the label's own text metrics. */
[data-screen="policies-configuration"] .pol-new {
  width: 187px;
  padding: 0;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

/* Fixed layout so the colgroup below is authoritative: every column in this
   frame is centre-set about a fixed axis, not sized by its content. */
[data-screen="policies-configuration"] .pol-table {
  table-layout: fixed;
  min-width: 880px;                 /* below this the 126px action cluster
                                       would start to crush                 */
}

/* Column axes measured off the frame and expressed against the 1037px card
   interior: centres at 75.5 / 256.5 / 514.5 / 777.5 / 962 give these widths. */
[data-screen="policies-configuration"] .pol-table__col-name     { width: 14.56%; }
[data-screen="policies-configuration"] .pol-table__col-default  { width: 20.35%; }
[data-screen="policies-configuration"] .pol-table__col-assigned { width: 29.41%; }
[data-screen="policies-configuration"] .pol-table__col-created  { width: 21.31%; }
[data-screen="policies-configuration"] .pol-table__col-actions  { width: 14.37%; }

/* Every cell, head and body, is centred in this frame - the shared table
   left-aligns, and the 27px edge insets would pull the centring off axis. */
[data-screen="policies-configuration"] .pol-table th,
[data-screen="policies-configuration"] .pol-table td,
[data-screen="policies-configuration"] .pol-table th:first-child,
[data-screen="policies-configuration"] .pol-table td:first-child,
[data-screen="policies-configuration"] .pol-table th:last-child,
[data-screen="policies-configuration"] .pol-table td:last-child {
  padding: 0 8px;
  text-align: center;
}

/* 235:3028 runs blue at the left to green at the right - the mirror of the
   --g-thead the shared .table--gradient-head paints. See the report. */
[data-screen="policies-configuration"] .pol-table thead tr {
  background: var(--g-thead-rev);
}

/* Four of the five head labels sit exactly on their column axis; 235:3240
   "Actions" is hand-nudged 18px right of it (centre 1341 against a column
   centre of 1323). Asymmetric padding reproduces that without moving the
   button cluster, which is on the axis. */
[data-screen="policies-configuration"] .pol-table thead th:last-child {
  padding-left: 44px;
}

/* 12 rows across 701px of card below the 51px head bar. */
[data-screen="policies-configuration"] .pol-table tbody td {
  height: 58.4px;
  color: var(--c-ink-0);            /* 235:3039 is literal black */
}

[data-screen="policies-configuration"] .pol-table tbody .table__actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Yes / No pills
   The shared .badge is-yes carries the employee table's #ddffe6 @60%; this
   frame's pill (235:3257) is the deeper #c2f4d0 @50%. Same object, one step
   down - set through the documented --badge-bg hook rather than forked.
   -------------------------------------------------------------------------- */

[data-screen="policies-configuration"] .badge.is-yes {
  --badge-bg: var(--t-pill-yes);
}

/* --------------------------------------------------------------------------
   Row actions
   .icon-btn already carries the 40x40 box, the 3px cluster gap and the amber /
   green / red tints. Two deltas: this frame's green tint is #d2ffde (not
   #ddffe6) and its link glyph is the brighter #c08104 gold.
   -------------------------------------------------------------------------- */

[data-screen="policies-configuration"] .pol-act--edit  { --ib-bg: var(--t-ib-green-2); }
[data-screen="policies-configuration"] .pol-act--link  { --ib-ink: var(--c-amber-link); }

/* The shared .icon-btn rounds at --r-xs (6px). Every row-action rect in this
   frame is tighter than that: rx=3 on 235:3244/235:3246, rx=4 on 235:3245.
   Scoped rather than forked - see the report, button.css documents r=3-4 in
   its own header and then paints 6. */
[data-screen="policies-configuration"] .pol-act--link,
[data-screen="policies-configuration"] .pol-act--edit  { border-radius: 3px; }
[data-screen="policies-configuration"] .pol-act--trash { border-radius: 4px; }

/* link.svg is exported from 235:3246 and is not in the shared registry, so it
   is registered here. Sizes are the glyphs' own Figma bounding boxes:
   link 19x19, edit 18x19, trash 18.5x19.5. */
[data-screen="policies-configuration"] .icon[data-icon="link"] {
  --icon: url(../assets/icons/link.svg);
}

[data-screen="policies-configuration"] .pol-act--link  .icon { --icon-size: 19px; }
[data-screen="policies-configuration"] .pol-act--edit  .icon { --icon-size: 19px; }
[data-screen="policies-configuration"] .pol-act--trash .icon { --icon-size: 19.5px; }

/* --------------------------------------------------------------------------
   Narrow widths
   The frame is a fixed 1440 desktop design; below the shell's breakpoints the
   heading row stacks and the table keeps its own horizontal scroll.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  [data-screen="policies-configuration"] .pol-head {
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: var(--gap-sm);
  }

  [data-screen="policies-configuration"] .page-title { font-size: 22px; }

  [data-screen="policies-configuration"] .pol-new {
    width: 100%;
    margin-left: 0;
  }
}

/* ===== screens/recording.css ===== */
/* ==========================================================================
   Recordings — css/screens/recording.css
   Figma: 167:1784 "Recordings" (1440 x 1279, tenant shell)

   Three objects on the page:
     167:2006  page title
     170:2344  white info banner: blue mark + copy + device picker (170:2348)
     174:5     the media table — gradient head (174:8) over 11 rows
               (174:250 … 174:797) with a dashed 3/3 rule between them

   Everything here is scoped to [data-screen="recording"]. Shared pieces used
   as-is: .card, .table + .table--gradient-head, .table-wrap, .icon,
   .icon-btn, .dropdown. Only local modifiers are declared below.
   ========================================================================== */

/* -- page title ----------------------------------------------------------- */
/* 167:2006 is Poppins Medium 25/24 #1c1c21 and sits at y=111 — a step down
   from the shell's default .page-title (30/36 SemiBold). The banner top edge
   is at y=172, which fixes the bottom margin. */

[data-screen="recording"] .page-title {
  margin: 8px 0 35px;
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* ==========================================================================
   Info banner — 170:2344 (1036 x 95, r=19, white, no stroke)
   ========================================================================== */

[data-screen="recording"] .rec-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 95px;
  padding: 0 23px 0 17px;
  border-color: transparent;
  border-radius: var(--r-info);
  margin-bottom: 32px;
}

/* 170:2346 — 60 x 63 plate, r=14, #1e7ac0. */
[data-screen="recording"] .rec-intro__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 63px;
  border-radius: 14px;
  background: var(--c-blue);
  color: var(--c-on-brand);
}

/* 171:2385 — the 34 x 21 camera body + lens. */
[data-screen="recording"] .rec-intro__glyph {
  width: 34px;
  height: 21px;
}

[data-screen="recording"] .rec-intro__glyph[data-icon="rec-video"] {
  --icon: url(../assets/icons/rec-video.svg);
}

/* 176:1566 — Poppins Light 15/22 #393939 in a 560-wide box. The Figma text
   carries a hard break inside "on-demand" (line 1 stops well short of the box),
   so the markup keeps that one break and lets the rest wrap on its own. */
[data-screen="recording"] .rec-intro__text {
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: 22px;
  font-weight: var(--fw-light);
  color: var(--c-ink-soft);
}

/* Below the design width the paragraph reflows, so the authored break goes. */
@media (max-width: 900px) {
  [data-screen="recording"] .rec-intro__break { display: none; }
}

/* -- device picker — 170:2348 (339 x 52, r=8, #f5f6f9 / 1px #e0e4ea) ------- */

[data-screen="recording"] .rec-device { margin-left: auto; }

[data-screen="recording"] .rec-device__toggle {
  display: flex;
  width: 339px;
  height: 52px;
  gap: 12px;
  padding: 0 22px;
  border: 1px solid var(--c-field-line);
  border-radius: var(--r-sm);
  background: var(--c-field-bg);
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: #000;
}

[data-screen="recording"] .rec-device__toggle:hover { background: #eef0f5; }

[data-screen="recording"] .rec-device__toggle::after { margin-left: auto; }

/* 171:2362 — the monitor-with-user glyph, drawn 19.76 x 19. */
[data-screen="recording"] .rec-device__icon {
  width: 20px;
  height: 19px;
}

[data-screen="recording"] .rec-device__icon[data-icon="rec-device"] {
  --icon: url(../assets/icons/rec-device.svg);
}

[data-screen="recording"] .rec-device__label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

[data-screen="recording"] .rec-device__name { white-space: nowrap; }

/* 171:2372 — a 14 x 1 black rule, not an em dash. */
[data-screen="recording"] .rec-device__dash {
  flex: none;
  width: 14px;
  height: 1px;
  border-radius: var(--r-pill);
  background: #000;
}

/* 171:2374 — Poppins Light 15/22 #393939. */
[data-screen="recording"] .rec-device__user {
  font-weight: var(--fw-light);
  color: var(--c-ink-soft);
  white-space: nowrap;
}

[data-screen="recording"] .rec-device__menu { min-width: 339px; }

/* ==========================================================================
   Media table — 174:5
   ========================================================================== */

[data-screen="recording"] .rec-panel {
  border-color: var(--s-panel-line);
  overflow: hidden;
}

/* min-width is the sum of the fixed columns plus the actions cluster and its
   gutter (290+170+155+157+92 + 96+18), so the table fills the panel at 1440
   without the wrap needing to scroll, and scrolls sideways below that. */
[data-screen="recording"] .rec-table {
  table-layout: fixed;
  min-width: 978px;
}

/* 174:8 runs blue -> green, the mirror of the shared --g-thead. */
[data-screen="recording"] .rec-table thead tr { background: var(--g-thead-blue); }

/* -- gutters and column widths -------------------------------------------- */
/* Row content is 999 wide inside the 1039 panel: 22 left, 18 right (174:797).
   Column edges are taken from the header labels, which sit flush with the
   leading element of every cell below them. */

[data-screen="recording"] .rec-table th,
[data-screen="recording"] .rec-table td { padding: 0; }

[data-screen="recording"] .rec-table th:first-child,
[data-screen="recording"] .rec-table td:first-child { padding-left: 22px; }

[data-screen="recording"] .rec-table th:last-child,
[data-screen="recording"] .rec-table td:last-child { padding-right: 18px; }

[data-screen="recording"] .rec-table th:nth-child(1) { width: 290px; }
[data-screen="recording"] .rec-table th:nth-child(2) { width: 170px; }
[data-screen="recording"] .rec-table th:nth-child(3) { width: 155px; }
[data-screen="recording"] .rec-table th:nth-child(4) { width: 157px; }
[data-screen="recording"] .rec-table th:nth-child(5) { width: 92px; }

[data-screen="recording"] .rec-table thead th { height: 51px; }

/* -- rows ----------------------------------------------------------------- */
/* 80px pitch: 12 above the 55-tall content band, 13 below it, then the rule.
   The first row tucks up under the head bar (5), the last one pads out to the
   panel floor (20) and drops its rule. */

[data-screen="recording"] .rec-table tbody td {
  height: auto;
  padding-top: 12px;
  padding-bottom: 13px;
  vertical-align: middle;
  background-image: none;
}

[data-screen="recording"] .rec-table tbody tr:first-child td { padding-top: 5px; }
[data-screen="recording"] .rec-table tbody tr:last-child td { padding-bottom: 20px; }

/* 174:18 — #323232 at 30%, dashed 3/3. Painted on the row rather than on each
   cell so the dash phase runs unbroken across the column boundaries. */
[data-screen="recording"] .rec-table tbody tr {
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

[data-screen="recording"] .rec-table tbody tr:last-child { background-image: none; }

/* -- leading icon cells --------------------------------------------------- */

[data-screen="recording"] .rec-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 29px disc, tinted by the row (174:211 / 174:218 / 174:225). */
[data-screen="recording"] .rec-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--rec-tint);
  color: var(--rec-ink);
}

[data-screen="recording"] .rec-chip__glyph--cal   { width: 11px;   height: 13px; }
[data-screen="recording"] .rec-chip__glyph--clock { width: 17px;   height: 15px; }
[data-screen="recording"] .rec-chip__glyph--type  { width: 13.5px; height: 13px; }

[data-screen="recording"] .rec-chip__glyph[data-icon="rec-calendar"] { --icon: url(../assets/icons/rec-calendar.svg); }
[data-screen="recording"] .rec-chip__glyph[data-icon="rec-clock"]    { --icon: url(../assets/icons/rec-clock.svg); }
[data-screen="recording"] .rec-chip__glyph[data-icon="rec-monitor"]  { --icon: url(../assets/icons/rec-monitor.svg); }

/* Row tint cycle. */
[data-screen="recording"] .rec-row--blue    { --rec-tint: var(--t-row-blue);    --rec-ink: var(--c-row-blue); }
[data-screen="recording"] .rec-row--green   { --rec-tint: var(--t-row-green);   --rec-ink: var(--c-row-green); }
[data-screen="recording"] .rec-row--rose    { --rec-tint: var(--t-row-rose);    --rec-ink: var(--c-row-rose); }
[data-screen="recording"] .rec-row--amber   { --rec-tint: var(--t-row-amber);   --rec-ink: var(--c-row-amber); }
[data-screen="recording"] .rec-row--magenta { --rec-tint: var(--t-row-magenta); --rec-ink: var(--c-row-magenta); }
[data-screen="recording"] .rec-row--purple  { --rec-tint: var(--t-row-purple);  --rec-ink: var(--c-row-purple); }
[data-screen="recording"] .rec-row--gold    { --rec-tint: var(--t-row-gold);    --rec-ink: var(--c-row-gold); }
[data-screen="recording"] .rec-row--teal    { --rec-tint: var(--t-row-teal);    --rec-ink: var(--c-row-teal); }
[data-screen="recording"] .rec-row--red     { --rec-tint: var(--t-row-red);     --rec-ink: var(--c-row-red); }
[data-screen="recording"] .rec-row--lime    { --rec-tint: var(--t-row-lime);    --rec-ink: var(--c-row-lime); }

/* Two rows break the cycle mid-row in the file: the green row shifts to mint
   from the Duration cell on (174:270 / 174:278) and the purple row shifts to
   violet in the Type cell (174:412). */
[data-screen="recording"] .rec-chip--mint-tint { --rec-tint: var(--t-row-mint); }
[data-screen="recording"] .rec-chip--mint      { --rec-tint: var(--t-row-mint);   --rec-ink: var(--c-row-mint); }
[data-screen="recording"] .rec-chip--violet    { --rec-tint: var(--t-row-violet); --rec-ink: var(--c-row-violet); }

/* -- preview cell — 174:247 (92 x 55, r=2, image + centred play glyph) ----- */

[data-screen="recording"] .rec-col-preview { text-align: center; }

[data-screen="recording"] .rec-preview {
  position: relative;
  display: block;
  width: 92px;
  height: 55px;
  border-radius: var(--r-thumb);
  overflow: hidden;
  background: var(--s-line);
  transition: filter var(--dur) var(--ease);
}

[data-screen="recording"] .rec-preview:hover { filter: brightness(1.06); }

[data-screen="recording"] .rec-preview__img {
  width: 92px;
  height: 55px;
  object-fit: cover;
}

/* 174:248 is the ▶ character, not a vector — 22px, white, centred on the
   thumbnail. FE0E keeps it a glyph rather than an emoji. */
[data-screen="recording"] .rec-preview__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--ff);
  font-size: 22px;
  line-height: 1;
  font-weight: var(--fw-semibold);
  color: var(--c-on-brand);
  pointer-events: none;
}

/* -- actions cell — 174:236 / 174:238 (42 square, r=8, white, 1px #e5eaf2) -- */

[data-screen="recording"] .rec-col-actions { text-align: right; }

[data-screen="recording"] .rec-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* The header label is centred over the button pair, not over the column. */
[data-screen="recording"] .rec-actions-head {
  display: inline-block;
  width: 96px;
  text-align: center;
}

[data-screen="recording"] .rec-btn {
  --ib-bg: var(--s-card);
  --ib-ink: var(--c-btn-glyph);
  width: 42px;
  height: 42px;
  border: 1px solid var(--s-btn-line);
  border-radius: var(--r-sm);
}

/* 174:237 and 174:239 are text layers — a ↓ and a ⋮, not vectors, so there is
   nothing to export. They are set in Inter Semi Bold, which the portal does not
   load (see tokens.css), so the stack below picks the closest system arrow:
   Calibri's ↓ has the same wide V head, measured 12x15 against Figma's 11x13.
   The ⋮ matches straight out of the symbol stack. */
[data-screen="recording"] .rec-btn__glyph {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--ff);
  font-size: 18px;
  line-height: 1;
  font-weight: var(--fw-semibold);
}

[data-screen="recording"] .rec-btn__glyph--down {
  font-family: Calibri, "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--ff);
  font-size: 16px;
}

[data-screen="recording"] .rec-btn__glyph--more { font-size: 20px; }

/* ==========================================================================
   Narrower than the 1440 design
   ========================================================================== */

@media (max-width: 1200px) {
  [data-screen="recording"] .rec-table { min-width: 856px; }
  [data-screen="recording"] .rec-table th:nth-child(1) { width: 250px; }
  [data-screen="recording"] .rec-table th:nth-child(2) { width: 140px; }
  [data-screen="recording"] .rec-table th:nth-child(3) { width: 130px; }
  [data-screen="recording"] .rec-table th:nth-child(4) { width: 130px; }
}

@media (max-width: 1100px) {
  [data-screen="recording"] .rec-intro { flex-wrap: wrap; }
  [data-screen="recording"] .rec-device { margin-left: 78px; }
}

@media (max-width: 640px) {
  [data-screen="recording"] .page-title { margin: 0 0 20px; }

  [data-screen="recording"] .rec-intro {
    padding: 16px;
    gap: 14px;
  }

  [data-screen="recording"] .rec-device { margin-left: 0; width: 100%; }
  [data-screen="recording"] .rec-device__toggle { width: 100%; padding: 0 16px; }
  [data-screen="recording"] .rec-device__menu { min-width: 0; width: 100%; }

  [data-screen="recording"] .rec-table th:first-child,
  [data-screen="recording"] .rec-table td:first-child { padding-left: var(--gap-sm); }

  [data-screen="recording"] .rec-table th:last-child,
  [data-screen="recording"] .rec-table td:last-child { padding-right: var(--gap-sm); }
}

/* ===== screens/remote-desktop.css ===== */
/* ==========================================================================
   Remote Desktop — Figma 159:204 (1440 x 1279, tenant shell)

   The screen is a live-session console: a 4-up KPI strip over a three-column
   stage — device picker (251), video + stream control (583), PC details (179).
   Column and gutter widths are the frame's own: 251 | 12 | (583 | 14 | 179).

   Everything here is scoped to [data-screen="remote-desktop"]. Shared
   components carry the look; this file only supplies the modifiers the frame
   needs (the tiles are 109 tall not 160, the panels use the cooler
   --s-panel-line hairline, the controls run on a 10px meta type ramp).
   ========================================================================== */

/* -- icon registry (this screen's four new Figma exports) ------------------ */

[data-screen="remote-desktop"] .icon[data-icon="monitor"]    { --icon: url(../assets/icons/monitor.svg); }
[data-screen="remote-desktop"] .icon[data-icon="pc-monitor"] { --icon: url(../assets/icons/pc-monitor.svg); }
[data-screen="remote-desktop"] .icon[data-icon="id-card"]    { --icon: url(../assets/icons/id-card.svg); }
[data-screen="remote-desktop"] .icon[data-icon="speaker"]    { --icon: url(../assets/icons/speaker.svg); }

/* The page heading on this frame is 25/24 Medium #1c1c21 (159:425), a step
   down from the dashboard's 30px title. */
[data-screen="remote-desktop"] .page-title {
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin: 6px 0 27px;
}

/* ==========================================================================
   KPI strip — 160:725, four 251x109 gradient tiles, 12px gutters
   ========================================================================== */

[data-screen="remote-desktop"] .rd-stats {
  --stat-cols: 4;
  gap: 12px;
}

[data-screen="remote-desktop"] .stat--rd {
  min-height: 109px;
  padding: 13px 20px 0;
  border-radius: var(--r-xs);          /* 6px — 160:674 */
}

[data-screen="remote-desktop"] .stat--rd.stat--gradient { background: var(--rd-tile); }

[data-screen="remote-desktop"] .stat--rd-blue   { --rd-tile: var(--g-tile-blue); }
[data-screen="remote-desktop"] .stat--rd-purple { --rd-tile: var(--g-tile-purple); }
[data-screen="remote-desktop"] .stat--rd-green  { --rd-tile: var(--g-tile-green); }
[data-screen="remote-desktop"] .stat--rd-red    { --rd-tile: var(--g-tile-red); }

/* Icon sits top-RIGHT here (160:706), on the same 10% white disc. */
[data-screen="remote-desktop"] .stat--rd .stat__icon {
  position: absolute;
  top: 12px;
  right: 21px;
  width: 34px;
  height: 34px;
}

[data-screen="remote-desktop"] .stat--rd .stat__icon .icon { --icon-size: 18px; }

[data-screen="remote-desktop"] .stat--rd .stat__label {
  margin-top: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  padding-right: 44px;
}

[data-screen="remote-desktop"] .stat--rd .stat__value { margin-top: 6px; }

[data-screen="remote-desktop"] .stat--rd .stat__sub {
  margin-top: 7px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

/* The corner arrow is the shared glyph at the frame's own angle (160:677). */
[data-screen="remote-desktop"] .stat--rd .stat__corner::after {
  right: 31.5px;
  bottom: 3.7px;
  width: 13.76px;
  height: 11.34px;
  transform: rotate(-52.6deg);
}

[data-screen="remote-desktop"] .stat--rd .stat__corner:hover::after {
  transform: rotate(-52.6deg) translateX(3px);
}

/* ==========================================================================
   Stage grid
   ========================================================================== */

[data-screen="remote-desktop"] .rd-layout {
  display: grid;
  grid-template-columns: 251px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 22px;
}

[data-screen="remote-desktop"] .rd-stage { display: flex; flex-direction: column; min-width: 0; }

[data-screen="remote-desktop"] .rd-stage__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 179px;
  gap: 14px;
  margin-top: 13px;
}

[data-screen="remote-desktop"] .rd-stage__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ==========================================================================
   Device picker — 221:1594 (251x637, r=18)
   ========================================================================== */

[data-screen="remote-desktop"] .rd-picker {
  display: flex;
  flex-direction: column;
  height: 637px;
  border-radius: 18px;
  border-color: var(--s-panel-line);
  overflow: hidden;
}

[data-screen="remote-desktop"] .rd-picker__head { flex: none; padding: 10px 15px 0 13px; }

[data-screen="remote-desktop"] .rd-picker__title {
  font-size: var(--fs-2xs);
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: #000;
}

/* Search (166:734) — 223x34, r=6, on the app grey rather than white. */
[data-screen="remote-desktop"] .rd-search {
  height: 34px;
  margin-top: 11px;
  border-radius: var(--r-xs);
  background: var(--s-app);
}

[data-screen="remote-desktop"] .rd-search::before {
  left: 10px;
  width: 11px;
  height: 11px;
  background-color: var(--c-icon-muted);
}

[data-screen="remote-desktop"] .rd-search .search__input {
  padding: 0 12px 0 28px;
  font-size: var(--fs-3xs);
  line-height: 20px;
  font-weight: var(--fw-regular);
}

[data-screen="remote-desktop"] .rd-search .search__input::placeholder { color: var(--c-placeholder); }

/* Department row (167:1599 + 167:830) */
[data-screen="remote-desktop"] .rd-dept {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 31px;
  margin-top: 9px;
}

[data-screen="remote-desktop"] .rd-dept__label {
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: #000;
}

[data-screen="remote-desktop"] .rd-select-wrap { display: inline-block; }

[data-screen="remote-desktop"] .rd-select {
  width: 115px;
  height: 31px;
  padding: 0 26px 0 10px;
  border-radius: var(--r-2xs);
  border-color: var(--c-field-line-soft);
  background-color: var(--s-card);
  background-image: none;
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: #000;
}

[data-screen="remote-desktop"] .rd-select-wrap::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 5px;
  margin-top: -2.5px;
  pointer-events: none;
  background-color: #828282;                  /* 167:831 */
  -webkit-mask: url(../assets/icons/chevron-down.svg) center / contain no-repeat;
  mask: url(../assets/icons/chevron-down.svg) center / contain no-repeat;
}

/* -- device rows (167:766 … 167:964) -------------------------------------- */

[data-screen="remote-desktop"] .rd-picker__list { flex: none; margin-top: 9px; padding: 0 2px; }

[data-screen="remote-desktop"] .rd-pc {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 62px;
  padding: 0 0 3px 11px;
  text-align: left;
  background: none;
}

[data-screen="remote-desktop"] .rd-pc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: var(--c-rule-soft);
}

[data-screen="remote-desktop"] .rd-pc:not(.rd-pc--current):hover { background: rgba(0, 0, 0, 0.015); }

/* Selected device — the green→blue plate (167:746). */
[data-screen="remote-desktop"] .rd-pc--current {
  height: 67px;
  padding: 0 0 0 12px;
  border-radius: var(--r-panel);
  background: var(--g-row-active);
  color: var(--c-on-brand);
}

[data-screen="remote-desktop"] .rd-pc--current::after { display: none; }

[data-screen="remote-desktop"] .rd-pc__disc {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--disc, var(--c-green));
  color: var(--c-on-brand);
}

[data-screen="remote-desktop"] .rd-pc__disc .icon { --icon-size: 13.5px; }

[data-screen="remote-desktop"] .rd-pc__disc--current { background: rgba(255, 255, 255, 0.1); }

[data-screen="remote-desktop"] .rd-pc__live {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-online-bright);
}

[data-screen="remote-desktop"] .rd-pc__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: 12px;
}

[data-screen="remote-desktop"] .rd-pc__host {
  font-size: var(--fs-2xs);
  line-height: 20px;
  color: var(--c-ink-row);
}

[data-screen="remote-desktop"] .rd-pc__owner {
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: var(--c-ink-row);
}

[data-screen="remote-desktop"] .rd-pc--current .rd-pc__host,
[data-screen="remote-desktop"] .rd-pc--current .rd-pc__owner { color: var(--c-on-brand); }

[data-screen="remote-desktop"] .rd-pc__state {
  flex: none;
  width: 45px;
  margin-left: auto;
  font-size: 9px;
  line-height: 20px;
}

[data-screen="remote-desktop"] .rd-pc__state.is-online  { color: var(--c-green); }
[data-screen="remote-desktop"] .rd-pc__state.is-offline { color: var(--c-pink); }
[data-screen="remote-desktop"] .rd-pc--current .rd-pc__state.is-online { color: var(--c-online-bright); }

/* -- fleet gauges (167:963) ----------------------------------------------- */
/* Three 54x52 arcs. The frame draws all three segments at the same 98° sweep
   on a 195° track, so the geometry below is the frame's, not a percentage of
   the value; --seg-len is left as the binding point for live data. */

[data-screen="remote-desktop"] .rd-gauges {
  display: grid;
  /* 167:947 / 167:954 put the two hairlines at 83 and 163.3 of the 251 panel,
     so the three cells are not equal. */
  grid-template-columns: 33.07% 31.99% minmax(0, 1fr);
  height: 70px;
  margin-top: 36.5px;
}

[data-screen="remote-desktop"] .rd-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

[data-screen="remote-desktop"] .rd-gauge + .rd-gauge::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 1px;
  height: 68px;
  background: var(--c-rule-soft);
}

[data-screen="remote-desktop"] .rd-gauge__svg { width: 54px; height: 52px; overflow: visible; }

[data-screen="remote-desktop"] .rd-gauge__track {
  fill: none;
  stroke: var(--s-gauge-track);
  stroke-width: 2.8;
  stroke-linecap: round;
}

[data-screen="remote-desktop"] .rd-gauge__seg {
  fill: none;
  stroke: var(--gauge);
  stroke-width: 2.8;
  stroke-linecap: round;
}

[data-screen="remote-desktop"] .rd-gauge__value {
  fill: var(--gauge);
  font-family: var(--ff);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  text-anchor: middle;
  dominant-baseline: middle;
}

[data-screen="remote-desktop"] .rd-gauge__label {
  margin-top: -3px;
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: var(--c-ink-gauge);
}

[data-screen="remote-desktop"] .rd-gauge--green { --gauge: var(--c-green-gauge); }
[data-screen="remote-desktop"] .rd-gauge--red   { --gauge: var(--c-red-gauge); }
[data-screen="remote-desktop"] .rd-gauge--blue  { --gauge: var(--c-blue-elec); }

/* ==========================================================================
   Session strip — 167:836 (776x52, r=12)
   ========================================================================== */

[data-screen="remote-desktop"] .rd-session {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 4px 13px 0 20px;         /* the strip's ink sits 2px below centre */
  border-radius: var(--r-md);
  border-color: var(--s-panel-line);
}

[data-screen="remote-desktop"] .rd-session__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-online);
}

[data-screen="remote-desktop"] .rd-session__state {
  margin-left: 8px;
  font-size: var(--fs-xs);
  line-height: 21px;
  font-weight: var(--fw-semibold);
  color: var(--c-online);
}

[data-screen="remote-desktop"] .rd-session__meta {
  margin-left: 18px;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 21px;
  color: var(--c-ink-session);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-screen="remote-desktop"] .rd-session__timer {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-xs);
  line-height: 21px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-timer);
  font-variant-numeric: tabular-nums;
}

/* 167:837 is a text layer, not a vector — the U+26F6 square-four-corners
   glyph at 20px. Kept as text so it stays selectable and recolourable. */
[data-screen="remote-desktop"] .rd-session__full {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-left: 9px;
  font-size: 20px;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--c-ink-session);
}

/* ==========================================================================
   Live preview — 167:1111 (583x398, r=18, masked)
   The frame places the 627x385 capture at -4px from the mask top and lets it
   run past the right edge; the strip under the taskbar stays white.
   ========================================================================== */

[data-screen="remote-desktop"] .rd-screen {
  position: relative;
  height: 398px;
  margin: 0;
  border: 1px solid var(--s-panel-line);
  border-radius: 18px;
  background: var(--s-card);
  overflow: hidden;
}

/* 627 / 583 = 107.55% wide, pulled up 4px (-1.005% of 398). Height is left to
   follow the raster's own ratio so a narrower stage scales it down instead of
   squashing it; at the design width this lands on exactly 627x385. */
[data-screen="remote-desktop"] .rd-screen img {
  position: absolute;
  left: 0;
  top: -1.005%;
  width: 107.55%;
  height: auto;
  max-width: none;
}

/* ==========================================================================
   Stream control — 167:976 (583x162, r=16)
   ========================================================================== */

[data-screen="remote-desktop"] .rd-control {
  height: 162px;
  padding: 16px 25px 0;
  border-radius: var(--r-lg);
  border-color: var(--s-panel-line);
}

[data-screen="remote-desktop"] .rd-control__title {
  font-size: var(--fs-2xs);
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: #000;
}

[data-screen="remote-desktop"] .rd-control__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* The frame's five widths (167:986 … 167:1036). */
[data-screen="remote-desktop"] .rd-control__actions > :nth-child(1) { width: 94px; }
[data-screen="remote-desktop"] .rd-control__actions > :nth-child(2) { width: 103px; }
[data-screen="remote-desktop"] .rd-control__actions > :nth-child(3) { width: 103px; }
[data-screen="remote-desktop"] .rd-control__actions > :nth-child(4) { width: 90px; }
[data-screen="remote-desktop"] .rd-control__actions > :nth-child(5) { width: 95px; }

[data-screen="remote-desktop"] .rd-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--s-control-line);
  border-radius: 7px;
  background: var(--s-control);
  font-family: var(--ff);
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: var(--c-ink-4);
  transition: filter var(--dur) var(--ease);
}

[data-screen="remote-desktop"] .rd-btn:hover { filter: brightness(0.97); }

[data-screen="remote-desktop"] .rd-btn__label {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}

/* The glyph keeps its own ink (#2b2b2b) while the label is near-black. */
[data-screen="remote-desktop"] .rd-btn .icon--id { color: #2b2b2b; }
[data-screen="remote-desktop"] .icon--id { --icon-size: 12.67px; }

[data-screen="remote-desktop"] .rd-btn--primary {
  padding-left: 9px;                       /* 167:988 sits closer to the edge */
  border-color: transparent;
  background: var(--c-blue-action);
  color: var(--c-on-brand);
}

[data-screen="remote-desktop"] .rd-btn--primary .icon--id { color: var(--c-on-brand); }

[data-screen="remote-desktop"] .rd-btn--block { width: 100%; }

[data-screen="remote-desktop"] .rd-control__settings {
  display: flex;
  align-items: center;
  margin: 20px -25px 0;
  padding: 15px 25px 0 35px;
  border-top: 1px solid var(--c-rule-soft);
}

[data-screen="remote-desktop"] .rd-control__label {
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: #2b2b2b;
}

[data-screen="remote-desktop"] .rd-select--wide { width: 140px; }

[data-screen="remote-desktop"] .rd-control__label + .rd-select-wrap { margin-left: 19px; }
[data-screen="remote-desktop"] .rd-select-wrap + .rd-control__label { margin-left: 15px; }

[data-screen="remote-desktop"] .rd-audio {
  display: flex;
  align-items: center;
  margin-left: auto;
}

[data-screen="remote-desktop"] .rd-audio__icon {
  --icon-size: 14px;
  height: 11px;
  color: #231f20;
}

[data-screen="remote-desktop"] .rd-audio__label {
  margin-left: 5px;
  font-size: var(--fs-3xs);
  line-height: 20px;
  color: #2b2b2b;
}

/* 167:1068 — 31x16 track, 14px knob, shown off. */
[data-screen="remote-desktop"] .rd-switch { margin-left: 15px; }

[data-screen="remote-desktop"] .rd-switch .switch__input {
  width: 31px;
  height: 16px;
  background: var(--s-switch-off);
}

[data-screen="remote-desktop"] .rd-switch .switch__input::after {
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
}

[data-screen="remote-desktop"] .rd-switch .switch__input:checked { background: var(--c-toggle-on); }
[data-screen="remote-desktop"] .rd-switch .switch__input:checked::after { transform: translateX(15px); }

/* ==========================================================================
   PC details — 167:839 (179x572, r=15)
   ========================================================================== */

[data-screen="remote-desktop"] .rd-details {
  height: 572px;
  padding: 6px;
  border-radius: var(--r-panel-lg);
  border-color: var(--s-panel-line);
  overflow: hidden;
}

[data-screen="remote-desktop"] .rd-details__hero {
  height: 192px;
  padding-top: 16px;
  border-radius: 11px;
  background: var(--s-plate);
  text-align: center;
}

[data-screen="remote-desktop"] .rd-details__title {
  font-size: var(--fs-2xs);
  line-height: 15px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink-session);
}

[data-screen="remote-desktop"] .rd-details__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 11px auto 0;
  border-radius: 50%;
  background: var(--c-blue-elec);
  color: var(--c-on-brand);
}

[data-screen="remote-desktop"] .rd-details__disc .icon { --icon-size: 27px; }

[data-screen="remote-desktop"] .rd-details__pill {
  --badge-bg: rgba(0, 255, 70, 0.1);
  --badge-ink: var(--c-online);
  min-width: 0;
  width: 67px;
  height: 22px;
  margin-top: 12px;
  padding: 0;
  gap: 5px;
  font-size: 11px;
  line-height: 15px;
}

[data-screen="remote-desktop"] .rd-details__host {
  margin-top: 8px;
  font-size: var(--fs-2xs);
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-session);
}

[data-screen="remote-desktop"] .rd-details__owner {
  font-size: 11px;
  line-height: 19px;
  color: var(--c-ink-owner);
}

/* Full-bleed 2-2 dashed rule (167:892 / 167:900 / 167:1601). */
[data-screen="remote-desktop"] .rd-rule {
  height: 1px;
  margin: 0 -6px;
  border: 0;
  background: repeating-linear-gradient(to right,
              var(--c-rule-dot) 0 2px, transparent 2px 4px);
}

[data-screen="remote-desktop"] .rd-details__hero + .rd-rule { margin-top: 16px; }

[data-screen="remote-desktop"] .rd-kv { margin: 6px 4px 0 9px; }

[data-screen="remote-desktop"] .rd-kv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 27.5px;
}

[data-screen="remote-desktop"] .rd-kv dt {
  font-size: var(--fs-xs);
  line-height: 19px;
  color: var(--c-ink-kv);
}

[data-screen="remote-desktop"] .rd-kv dd {
  margin: 0;
  font-size: var(--fs-3xs);
  line-height: 15px;
  color: var(--c-ink-session);
  text-align: right;
  white-space: nowrap;
}

[data-screen="remote-desktop"] .rd-kv + .rd-rule { margin-top: 8.5px; }
[data-screen="remote-desktop"] .rd-kv--net { margin-top: 18.5px; }
[data-screen="remote-desktop"] .rd-kv--net .rd-kv__row { height: 26.5px; }
[data-screen="remote-desktop"] .rd-kv--net + .rd-rule { margin-top: 7.5px; }

/* Usage meters — 167:902 / 167:903 (156x6 track, r=3). */
[data-screen="remote-desktop"] .rd-usage { margin: 12px 4px 0 9px; }
[data-screen="remote-desktop"] .rd-usage--ram { margin-top: 13px; }

[data-screen="remote-desktop"] .rd-usage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -2px;
}

[data-screen="remote-desktop"] .rd-usage__label {
  font-size: var(--fs-3xs);
  line-height: 19px;
  color: var(--c-ink-meta);
}

[data-screen="remote-desktop"] .rd-usage__value {
  font-size: var(--fs-3xs);
  line-height: 19px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink-session);
  font-variant-numeric: tabular-nums;
}

[data-screen="remote-desktop"] .rd-usage__meter { display: flex; margin-top: 4px; }

[data-screen="remote-desktop"] .rd-usage__meter .meter__track {
  --meter-track: var(--s-meter-track);
  --meter-h: 6px;
}

[data-screen="remote-desktop"] .rd-details__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 12.5px 10px 0 9px;
}

/* ==========================================================================
   Reflow — the frame is a fixed 1440 desktop console, so below the stage's
   natural width the three columns stack rather than squeeze.
   ========================================================================== */

@media (max-width: 1080px) {
  [data-screen="remote-desktop"] .rd-layout,
  [data-screen="remote-desktop"] .rd-stage__row { grid-template-columns: minmax(0, 1fr); }
  [data-screen="remote-desktop"] .rd-picker,
  [data-screen="remote-desktop"] .rd-details { height: auto; }
  [data-screen="remote-desktop"] .rd-details { padding-bottom: 14px; }
  [data-screen="remote-desktop"] .rd-picker__list { padding-bottom: 8px; }
  [data-screen="remote-desktop"] .rd-gauges { margin-top: 16px; margin-bottom: 20px; }
  [data-screen="remote-desktop"] .rd-screen { height: auto; aspect-ratio: 583 / 398; }
}

@media (max-width: 760px) {
  [data-screen="remote-desktop"] .rd-control { height: auto; padding-bottom: 20px; }
  [data-screen="remote-desktop"] .rd-control__actions { flex-wrap: wrap; gap: 8px; }
  [data-screen="remote-desktop"] .rd-control__actions > :nth-child(n) { width: auto; flex: 1 1 auto; }
  [data-screen="remote-desktop"] .rd-control__settings {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-left: 25px;
  }
  [data-screen="remote-desktop"] .rd-control__label + .rd-select-wrap,
  [data-screen="remote-desktop"] .rd-select-wrap + .rd-control__label,
  [data-screen="remote-desktop"] .rd-audio__label,
  [data-screen="remote-desktop"] .rd-switch { margin-left: 0; }
  [data-screen="remote-desktop"] .rd-audio { gap: 8px; margin-left: 0; }
  [data-screen="remote-desktop"] .rd-session { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 6px; }
  [data-screen="remote-desktop"] .rd-session__meta { white-space: normal; }
}

@media (max-width: 560px) {
  [data-screen="remote-desktop"] .rd-select--wide { width: 120px; }
  [data-screen="remote-desktop"] .rd-dept { flex-wrap: wrap; height: auto; gap: 6px; }
}

/* ===== screens/reports-analytics.css ===== */
/* ==========================================================================
   Reports & Analytics — Figma 232:1699 (1440 x 1772, tenant shell)

   Everything here is scoped under [data-screen="reports-analytics"]. The
   screen is composed almost entirely from the shared layer:

     .card .card--gradient   Overview banner      232:2211
     .btn  .btn--light --xl  "Open timesheet"     232:2216
     .stat .stat--row        four KPI tiles       232:2174 / 2192 / 2183 / 2201
     .card-heading           section head + chip  232:2230 / 232:2376
     .chip                   "Total time"         232:2348 / 232:2379
     .card .card--table      both panels          232:2226 / 232:2372
     .table .table--dark-head  the #08476e head   232:2227 / 232:2373
     .hbar .hbar--stacked    the ranked bars      232:2266 …
     .section-title          "Other Reports"      233:2458
     .card .card--panel      the three tiles      233:2463 / 234:2538 / 234:2550

   Measured geometry the layout is built on (frame-relative y):
     title box   112..136       banner 162..311 (h 149)
     KPI strip   331..433       Top Applications head 455..492, panel 509..977
     Top Websites head 1005..1042, panel 1059..1527
     "Other Reports" 1555..1575, tiles 1595..1699
   The content plate starts at x=324 and the first column of copy at x=361,
   so the shell's own 42px gutter already puts everything in the right place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page title
   232:1933 is Poppins Medium 25/24 #1c1c21 — not the 30/36 SemiBold #101828
   base.css gives .page-title. Every screen in this portal has had to restate
   this; it belongs in base.css once. Scoped here rather than forked.
   Box lands at y=112 (main content starts at 105) and the banner at y=162.
   -------------------------------------------------------------------------- */

[data-screen="reports-analytics"] .page-title {
  margin: 7px 0 26px;
  font-size: var(--fs-stat);        /* 25px */
  line-height: var(--lh-stat);      /* 24px */
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Overview banner — 232:2211
   1038x149, r=15. The shared .card--gradient carries --g-banner (the same two
   stops on a flat 90° axis); this frame draws them on a 71.9° axis with inset
   stops, which is a visibly different plate, so the axis is swapped here.
   Copy block and CTA are both vertically centred: the text stack is 109 tall
   inside 149, which lands its top at exactly the measured y=182.
   -------------------------------------------------------------------------- */

[data-screen="reports-analytics"] .ra-overview {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 149px;
  padding: 16px 33px 16px 34px;
  background: var(--g-banner-diag);
}

[data-screen="reports-analytics"] .ra-overview__body { min-width: 0; }

[data-screen="reports-analytics"] .ra-overview__title {
  font-size: var(--fs-stat);        /* 25px — 232:2212 */
  line-height: var(--lh-stat);      /* 24px */
  font-weight: var(--fw-medium);
}

/* 232:2213 — Poppins Light 15/24, full white, box 702 wide. The line breaks
   are hard breaks in the Figma text, so they are hard breaks here too. */
[data-screen="reports-analytics"] .ra-overview__text {
  margin-top: 13px;
  max-width: 702px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-on-brand);
}

/* 232:2216 — 231x60, r=10, 18px Medium, arrow 17.4x14 on the right. */
[data-screen="reports-analytics"] .ra-overview__cta {
  flex: none;
  width: 231px;
  margin-left: auto;
  gap: 12px;
}

[data-screen="reports-analytics"] .ra-overview__arrow { --icon-size: 18px; }

/* --------------------------------------------------------------------------
   KPI strip — 232:2174 / 232:2192 / 232:2183 / 232:2201
   Four 251x102 tiles at x 361 / 623 / 884 / 1146 → a 10.7px gutter, not the
   16px .stat-grid default. .stat--row already carries the 42px disc, the 19px
   gap, the 16/24 #545454 label and the 20px Bold value.
   -------------------------------------------------------------------------- */

[data-screen="reports-analytics"] .ra-kpis {
  --stat-cols: 4;
  gap: 11px;
  margin-top: 20px;
}

/* .stat--row centres the disc and the copy on the tile's own axis; this frame
   hangs both off the top padding instead — disc at y+18, label at y+22, value
   at y+58 (232:2177 / 232:2176 / 232:2182 against the tile at 232:2175). */
[data-screen="reports-analytics"] .ra-kpi {
  min-width: 0;
  align-items: flex-start;
  padding: 18px 17px;
}

[data-screen="reports-analytics"] .ra-kpi__body { padding-top: 4px; min-width: 0; }

[data-screen="reports-analytics"] .ra-kpi .stat__value {
  margin-top: 12px;
  white-space: nowrap;
}

/* The disc on the Total Employees tile is #0858e1 (232:2178), a step brighter
   than --c-blue; its border stays --c-blue-accent #4974be, which is what
   .stat--blue already gives. The other three tiles match their modifier
   exactly: #239b44/#299f4a, #db2754/#db2754, #a17317/#a17317. */
[data-screen="reports-analytics"] .ra-kpi--blue { --stat-accent: var(--c-blue-el); }

/* --------------------------------------------------------------------------
   Section rhythm
   Top Applications block starts 22px under the KPI strip; Top Websites and
   "Other Reports" each start 28px under the panel above them.
   -------------------------------------------------------------------------- */

[data-screen="reports-analytics"] .ra-section { margin-top: 22px; }
[data-screen="reports-analytics"] .ra-section + .ra-section { margin-top: 28px; }

/* Heading row — 232:2230 / 232:2376. 37 tall (the chip sets it), 17px clear
   of the panel below. */
[data-screen="reports-analytics"] .ra-heading {
  min-height: 37px;
  margin-bottom: 17px;
}

/* 232:2348 / 232:2379 — 118x37, r=7, green→blue. The shared .chip paints
   --g-btn, which is the primary button's cyan→green ramp running the other
   way; this chip is its mirror, so the gradient and the 7px radius are set
   here rather than forking the component. */
[data-screen="reports-analytics"] .ra-chip {
  width: 118px;
  height: 37px;
  padding: 0;
  border-radius: 7px;
  background: var(--g-chip-report);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

/* --------------------------------------------------------------------------
   The two ranked tables — 232:2224 / 232:2370
   Panel 1035x468, r=10, 1px #e6e6e6, with the solid #08476e head bar clipped
   to its top corners. .card--table + .table--dark-head already draw all of
   that; the screen supplies the column geometry and the row metrics.

   Columns, as fractions of the measured 1035 panel:
     rank   0..110    name 110..698    count 698..916    time 916..1035
   which places the rank glyphs at x=41, the app name and every bar at x=120,
   the right edge of the usage figures at x=802 and the time column at x=916.
   -------------------------------------------------------------------------- */

[data-screen="reports-analytics"] .ra-table {
  table-layout: fixed;
  min-width: 900px;
}

[data-screen="reports-analytics"] .ra-col--rank  { width: 10.628%; }
[data-screen="reports-analytics"] .ra-col--name  { width: 56.812%; }
[data-screen="reports-analytics"] .ra-col--count { width: 21.063%; }
[data-screen="reports-analytics"] .ra-col--time  { width: 11.497%; }

/* -- head bar ------------------------------------------------------------- */

/* "#" is set a step larger than the other three headers (232:2228 is 20px,
   232:2229/2232/2270 are 18px). */
[data-screen="reports-analytics"] .ra-table thead th:first-child {
  padding-left: 34px;
  font-size: var(--fs-h2);
}

[data-screen="reports-analytics"] .ra-table thead th:nth-child(3) { padding-left: 46px; }
[data-screen="reports-analytics"] .ra-table thead th:nth-child(4) { padding-left: 5px; }

/* The Applications head sets "Application" at x=495 while its cells start at
   x=482; the Websites head sets "Website" flush with its cells. Reproduced
   rather than tidied — it is what the frame draws. */
[data-screen="reports-analytics"] .ra-table--apps  thead th:nth-child(2) { padding-left: 23px; }
[data-screen="reports-analytics"] .ra-table--sites thead th:nth-child(2) { padding-left: 10px; }

/* -- body rows ------------------------------------------------------------ */

/* 81px pitch: 14 top + 24 label + 8 + 12 bar + 23 bottom. The numeric cells
   centre on the 44px label+bar block, which is what puts them 4px above the
   band's own centre in the frame. */
[data-screen="reports-analytics"] .ra-table tbody td,
[data-screen="reports-analytics"] .ra-table tbody th {
  height: auto;
  padding: 14px 12px 23px;
  vertical-align: middle;
}

/* The row rule is one continuous 3/3 dash of #323232 at 30% (Line 56, e.g.
   232:2264). Painted on the ROW, not on each cell — a per-cell background
   restarts the dash phase at every column edge and leaves a visible break. */
[data-screen="reports-analytics"] .ra-table tbody tr {
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

[data-screen="reports-analytics"] .ra-table tbody tr:last-child { background-image: none; }

[data-screen="reports-analytics"] .ra-table tbody td,
[data-screen="reports-analytics"] .ra-table tbody th { background-image: none; }

[data-screen="reports-analytics"] .ra-table tbody td.ra-table__rank {
  padding-left: 41px;
  font-size: 18px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="reports-analytics"] .ra-table tbody th.ra-table__name {
  padding-left: 10px;
  padding-right: 19px;
  font-weight: var(--fw-regular);
}

[data-screen="reports-analytics"] .ra-table tbody td.ra-table__count {
  padding-right: 114px;
  text-align: right;
  font-size: 18px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  font-variant-numeric: tabular-nums;
}

[data-screen="reports-analytics"] .ra-table tbody td.ra-table__time {
  padding-left: 0;
  padding-right: 12px;
  font-size: 18px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  font-variant-numeric: tabular-nums;
}

/* -- the ranked bar (the chart) ------------------------------------------- */

/* One 12px pill per row (232:2261 / 2307 / 2319 / 2330 / 2342 and the five
   website twins). The value lives in the gradient: --accent holds solid to
   --stop-a and has reached --c-bar-tail by --stop-b. --track is the pill's
   own width, which the frame varies — row 1 of both tables is 521, the rest
   are 558/559. .hbar--stacked already supplies the 16/24 #545454 label, the
   8px drop and the 12px rounded track. */

[data-screen="reports-analytics"] .ra-bar .hbar__track {
  width: var(--track, 100%);
  max-width: 100%;
  background: var(--c-bar-tail);
}

[data-screen="reports-analytics"] .ra-bar .hbar__fill {
  width: 100%;
  background: linear-gradient(90deg,
              var(--accent) var(--stop-a, 0%),
              var(--c-bar-tail) var(--stop-b, 100%));
}

[data-screen="reports-analytics"] .ra-bar .hbar__label {
  margin-bottom: 8px;
  white-space: nowrap;
}

/* Domain + full URL share one baseline in the Websites name cell — the
   domain at 16px #545454 (232:2392), the URL at 15px Light #696969
   (232:2444). The frame hand-places the URL 20–30px after the domain. */
[data-screen="reports-analytics"] .ra-site {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

[data-screen="reports-analytics"] .ra-site__url {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-url);
}

/* --------------------------------------------------------------------------
   Other Reports — 233:2458 + 234:2533 / 234:2534 / 234:2546
   Three 331/332 x 104 tiles on a 20px gutter. Tinted fill, full-strength 1px
   accent edge, r=10, with a 46x44 gradient icon plate at 17,17.
   -------------------------------------------------------------------------- */

[data-screen="reports-analytics"] .ra-other-title {
  margin: 28px 0 20px;
}

[data-screen="reports-analytics"] .ra-reports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

[data-screen="reports-analytics"] .ra-report {
  --report-tint: var(--t-blue);
  --report-edge: var(--c-report-blue);
  --report-plate: var(--g-report-blue);

  display: flex;
  align-items: flex-start;
  gap: 17px;
  min-height: 104px;
  /* 233:2463 is 104 tall: 17 to the title, 72 of copy, 15 clear at the foot.
     The 1px edge eats one row top and bottom, so the padding reads 16/14. */
  padding: 16px 17px 14px;
  background: var(--report-tint);
  border-color: var(--report-edge);
}

[data-screen="reports-analytics"] .ra-report--green {
  --report-tint: var(--t-report-green);
  --report-edge: var(--c-report-green);
  --report-plate: var(--g-report-green);
}

[data-screen="reports-analytics"] .ra-report--purple {
  --report-tint: var(--t-report-purple);
  --report-edge: var(--c-report-purple);
  --report-plate: var(--g-report-purple);
}

[data-screen="reports-analytics"] .ra-report__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 44px;
  border-radius: 7px;
  background: var(--report-plate);
}

[data-screen="reports-analytics"] .ra-report__icon img {
  width: 22px;
  height: 18.86px;
}

[data-screen="reports-analytics"] .ra-report__body { min-width: 0; }

[data-screen="reports-analytics"] .ra-report__title {
  font-size: var(--fs-h3);          /* 16px — 233:2464 */
  line-height: var(--lh-h3);        /* 20px */
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
}

[data-screen="reports-analytics"] .ra-report__text {
  margin-top: 2px;
  max-width: 224px;
  font-size: var(--fs-body);        /* 15px — 234:2496 */
  line-height: 25px;
  font-weight: var(--fw-light);
  color: var(--c-ink-4);
}

/* 234:2540 runs one word wider before it breaks. */
[data-screen="reports-analytics"] .ra-report--green .ra-report__text { max-width: 239px; }

/* --------------------------------------------------------------------------
   Narrower viewports
   The frame is a fixed 1440 desktop design. Below that the tables keep their
   own scroller (.table-wrap) and everything else stacks.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="reports-analytics"] .ra-overview {
    flex-wrap: wrap;
    padding: 22px;
  }

  [data-screen="reports-analytics"] .ra-overview__cta { margin-left: 0; }

  [data-screen="reports-analytics"] .ra-reports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-screen="reports-analytics"] .ra-report__text { max-width: none; }
}

@media (max-width: 640px) {
  [data-screen="reports-analytics"] .page-title { font-size: 22px; margin-bottom: 20px; }

  [data-screen="reports-analytics"] .ra-overview__cta { width: 100%; }

  [data-screen="reports-analytics"] .ra-heading { flex-wrap: wrap; }

  [data-screen="reports-analytics"] .ra-reports {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== screens/revenue-growth.css ===== */
/* ==========================================================================
   Revenue & Growth
   ========================================================================== */

[data-screen="revenue-growth"] .rg-trend { margin-bottom: var(--gap-sm); }

[data-screen="revenue-growth"] .rg-chart { margin: 0; }

[data-screen="revenue-growth"] .rg-chart .chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

[data-screen="revenue-growth"] .rg-line {
  --line: var(--c-green);
  --line-w: 2.5;
}

[data-screen="revenue-growth"] .rg-points .chart__point {
  fill: var(--c-green);
  stroke: var(--s-card);
  stroke-width: 2;
}

[data-screen="revenue-growth"] .rg-chart .chart__ticks--x .chart__tick { text-anchor: middle; }
[data-screen="revenue-growth"] .rg-chart .chart__ticks--y .chart__tick { text-anchor: end; }

/* -- plan mix -------------------------------------------------------------- */

[data-screen="revenue-growth"] .rg-plans {
  --hbar-label-w: 92px;
  --hbar-h: 20px;
}

[data-screen="revenue-growth"] .rg-plans .hbar__label { font-size: var(--fs-xs); }

[data-screen="revenue-growth"] .rg-plans .hbar__value {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  font-weight: var(--fw-medium);
}

[data-screen="revenue-growth"] .divider { margin: 20px 0 18px; }

[data-screen="revenue-growth"] .rg-kv { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }

/* ===== screens/screenshot-gallery.css ===== */
/* ==========================================================================
   Screenshot Gallery
   Figma 186:73 · 1440x1279 · tenant shell

   Layout read off the frame (absolute canvas coordinates, content plate x=321):

     head        title 189:339 at (359,114) · Export 189:340 at (1281,103) 117x42
     slab        186:298 (360,166) 1039x720 — white, square corners, NO stroke
       filters   197:428 (393,192) three 312x52 fields, 19px apart
       rule      205:116 y=304, full bleed
       quick     199:429 y=327 · pills 210:74 y=364 (33 tall) · actions y=360
       results   209:39 (389,421) 981x436, #f5f6f9/#e0e4ea at 50% over white
         bar     210:73 y=439, 37 tall
         empty   210:131 artwork y=506..635, copy, CTA 194x37 at y=741

   Everything is scoped to the screen. The only shared classes touched are
   ones this screen composes from (.card, .btn, .field, .select, .input,
   .divider, .empty) and each override sits behind one of this screen's own
   modifier classes.
   ========================================================================== */

[data-screen="screenshot-gallery"] {
  /* Measured on 186:73. Screen-local, so they live here rather than in
     tokens.css — nothing else in the portal draws these three edges. */
  --sg-chip-line: #0b5e9d;   /* selected quick-filter pill   210:75  */
  --sg-view-line: #bbc3d0;   /* view-toggle frame            209:42  */
  --sg-view-on:   #125588;   /* selected view button         209:43  */
  --sg-pad: 29px;            /* slab gutter — 209:39 sits 29 in      */
}

/* --------------------------------------------------------------------------
   Icon registry additions

   Five glyphs this screen introduces. Registered here rather than in
   components/misc.css so the shared file stays the components agent's; if a
   later screen needs them they should be promoted up.
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .icon[data-icon="download"]    { --icon: url(../assets/icons/download.svg); }
[data-screen="screenshot-gallery"] .icon[data-icon="reset"]       { --icon: url(../assets/icons/reset.svg); }
[data-screen="screenshot-gallery"] .icon[data-icon="filter-thin"] { --icon: url(../assets/icons/filter-thin.svg); }
[data-screen="screenshot-gallery"] .icon[data-icon="view-grid"]   { --icon: url(../assets/icons/view-grid.svg); }
[data-screen="screenshot-gallery"] .icon[data-icon="view-list"]   { --icon: url(../assets/icons/view-list.svg); }

/* --------------------------------------------------------------------------
   Head row — title left, Export right
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--h-btn);   /* the 42px Export button sets the row */
  margin-bottom: 20px;        /* row ends 146, slab starts 166 */
}

/* 189:339 is Poppins Medium 25/24 #1c1c21 — a step down from the shared
   .page-title. Scoped, not a change to base.css. */
[data-screen="screenshot-gallery"] .sg-head .page-title {
  /* 4px of leading margin lands the 25px cap where 189:339 draws it, two
     pixels below the optical centre of the 42px row. */
  margin: 4px 0 0;
  font-size: 25px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* 189:343 — glyph 13x18.5 at x=1302, label at x=1324, 21/19 side padding. */
[data-screen="screenshot-gallery"] .sg-export {
  margin-left: auto;
  gap: 9px;
  padding: 0 19px 0 21px;
}

/* 195:347 is 13x18.5 — taller than wide, so the box is sized on the height
   and narrowed to the glyph so the button lands on the design's 117px. */
[data-screen="screenshot-gallery"] .sg-export .icon { --icon-size: 19px; width: 14px; }

/* --------------------------------------------------------------------------
   The slab

   186:298 is a flat white rectangle: no radius, no stroke, no shadow. It uses
   .card only for the surface; both pieces of .card chrome are dropped here.
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-slab {
  border: 0;
  border-radius: 0;
  padding-bottom: var(--sg-pad);
}

/* --------------------------------------------------------------------------
   Filter fields — 197:428
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px;                       /* 196:351 ends 705, 197:379 starts 724 */
  padding: 26px var(--sg-pad) 0;
}

[data-screen="screenshot-gallery"] .sg-filters .field { gap: 9px; }

/* 196:376 / 197:401 / 197:426 are black, not the shared form grey. */
[data-screen="screenshot-gallery"] .sg-filters .field__label {
  color: var(--c-ink-0);
  white-space: nowrap;
}

/* 196:366 — 19.76x19 glyph at x=415 inside a field whose left edge is 393. */
[data-screen="screenshot-gallery"] .sg-control__icon {
  position: absolute;
  top: 50%;
  left: 22px;
  margin-top: -10px;
  color: var(--c-ink-0);
  pointer-events: none;
}

[data-screen="screenshot-gallery"] .sg-select,
[data-screen="screenshot-gallery"] .sg-input {
  padding-left: 54px;              /* 196:353 sets its text at x=447 */
  color: var(--c-ink-0);
}

/* 196:356 — the chevron is 12x6, 19px off the field's right edge. */
[data-screen="screenshot-gallery"] .sg-select {
  padding-right: 40px;
  background-size: 12px 6px;
  background-position: right 19px center;
}

/* 197:404 draws no chevron: the date range opens a picker, not a menu. */
[data-screen="screenshot-gallery"] .sg-input { cursor: pointer; }

/* --------------------------------------------------------------------------
   Rule — 205:116, full bleed at y=304
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-rule { margin-top: 31px; }

/* --------------------------------------------------------------------------
   Quick filters — 199:429 + 210:74
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-quick { padding: 22px var(--sg-pad) 0; }

[data-screen="screenshot-gallery"] .sg-quick__label {
  font-size: var(--fs-body);       /* 199:429 Poppins Regular 15/20, black */
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  color: var(--c-ink-0);
}

/* The row's three heights (33 pill, 36 Clear All, 37 Apply Filters) all sit on
   the same baseline at y=397 in the frame, so they bottom-align rather than
   centre. */
[data-screen="screenshot-gallery"] .sg-quick__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;                        /* 210:75 ends 520, 210:77 starts 528 */
  margin-top: 13px;
}

/* 210:77 — 33 tall, fully rounded, #f5f6f9 on a 1px #e0e4ea edge. */
[data-screen="screenshot-gallery"] .sg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 14px;
  border: 1px solid var(--c-field-line);
  border-radius: var(--r-pill);
  background: var(--c-field-bg);
  font-family: var(--ff);
  font-size: var(--fs-sm);
  line-height: var(--lh-h3);
  color: var(--c-ink-0);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

[data-screen="screenshot-gallery"] .sg-chip:hover { background: var(--s-line-soft); }

/* 210:75 — the selected pill drops its fill and takes the blue edge and ink. */
[data-screen="screenshot-gallery"] .sg-chip[aria-pressed="true"] {
  background: var(--s-card);
  border-color: var(--sg-chip-line);
  color: var(--sg-chip-line);
}

[data-screen="screenshot-gallery"] .sg-quick__actions {
  display: flex;
  align-items: center;
  gap: 16px;                       /* 210:86 ends 1200, 210:90 starts 1216 */
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   The two toolbar buttons — 210:85 (Clear All) and 210:89 (Apply Filters)
   Both are .btn.btn--sm with a 7px radius; only the skin differs.
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-btn { border-radius: 7px; }

[data-screen="screenshot-gallery"] .sg-btn--quiet {
  height: 36px;
  gap: 5px;
  padding: 0 14px 0 10px;
  background: var(--c-field-bg);
  border-color: var(--c-field-line);
  color: var(--c-ink-0);
}

[data-screen="screenshot-gallery"] .sg-btn--quiet:hover { background: var(--s-line-soft); }

/* 210:88 is 16x18 — taller than it is wide, so the box is sized on height. */
[data-screen="screenshot-gallery"] .sg-btn--quiet .icon { --icon-size: 18px; }

[data-screen="screenshot-gallery"] .sg-btn--cta {
  height: 37px;
  gap: 9px;
  padding: 0 19px;
  background: var(--g-cta);
  color: var(--c-on-brand);
}

[data-screen="screenshot-gallery"] .sg-btn--cta:hover { filter: brightness(1.06); }
[data-screen="screenshot-gallery"] .sg-btn--cta:active { filter: brightness(0.94); }
[data-screen="screenshot-gallery"] .sg-btn--cta .icon { --icon-size: 16px; }

/* --------------------------------------------------------------------------
   Results panel — 209:39

   #f5f6f9 on a 1px #e0e4ea edge, the whole thing at 50% opacity over the
   white slab. Written as two alpha colours rather than `opacity` so the
   empty state inside stays fully opaque.
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-results {
  margin: 24px var(--sg-pad) 0;
  border: 1px solid rgba(224, 228, 234, 0.5);
  border-radius: var(--r-panel);
  background: rgba(245, 246, 249, 0.5);
}

[data-screen="screenshot-gallery"] .sg-results__bar {
  display: flex;
  align-items: center;
  padding: 17px 13px 0 24px;       /* 210:73 spans x 413..1357 at y=439 */
}

[data-screen="screenshot-gallery"] .sg-count {
  margin-right: auto;
  font-size: var(--fs-body);       /* 209:40 Poppins Regular 15/20, black */
  line-height: var(--lh-h3);
  color: var(--c-ink-0);
}

/* 209:42 is the 90x37 frame; 209:43 is the 46x37 selected half sitting on top
   of it, so the two buttons overlap the frame's own edge by 1px. */
[data-screen="screenshot-gallery"] .sg-view {
  position: relative;
  flex: none;
  width: 90px;
  height: 37px;
  border: 1px solid var(--sg-view-line);
  border-radius: var(--r-2xs);
}

[data-screen="screenshot-gallery"] .sg-view__btn {
  position: absolute;
  top: -1px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 37px;
  border: 1px solid transparent;
  border-radius: var(--r-2xs);
  color: var(--sg-view-line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

[data-screen="screenshot-gallery"] .sg-view__btn--grid { left: -1px; }
[data-screen="screenshot-gallery"] .sg-view__btn--list { left: 45px; }

[data-screen="screenshot-gallery"] .sg-view__btn[aria-pressed="true"] {
  border-color: var(--sg-view-on);
  color: var(--sg-view-on);
}

/* 210:62-65 compose a 19x19 glyph; 210:113-115 an 18x11 one. */
[data-screen="screenshot-gallery"] .sg-view__btn--grid .icon { --icon-size: 20px; }
[data-screen="screenshot-gallery"] .sg-view__btn--list .icon { --icon-size: 19px; height: 12px; }

[data-screen="screenshot-gallery"] .sg-sort-label {
  margin-left: 24px;               /* 209:42 ends 1099, 209:45 starts 1123 */
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-0);
}

[data-screen="screenshot-gallery"] .sg-sort {
  flex: none;
  width: 159px;
  margin-left: 19px;               /* 209:45 ends 1179, 209:48 starts 1198 */
}

/* 209:48 — white, 37 tall, r7; 209:52 puts an 8x4 chevron 15px off the edge. */
[data-screen="screenshot-gallery"] .sg-sort-select {
  height: 37px;
  padding: 0 34px 0 15px;
  border-radius: 7px;
  border-color: var(--c-field-line);
  background-color: var(--s-card);
  background-size: 8px 4px;
  background-position: right 15px center;
  font-size: var(--fs-sm);
  color: var(--c-ink-0);
}

/* --------------------------------------------------------------------------
   Empty state — 210:131
   -------------------------------------------------------------------------- */

[data-screen="screenshot-gallery"] .sg-empty {
  gap: 0;
  padding: 30px 24px 78px;         /* bar ends 476, art at 506; CTA ends 777,
                                      panel floor 856 */
}

/* The artwork's own box: sparkles 57..234, circle-with-shadow 88..199 (local
   to 210:131), i.e. 177x129 rendered. */
[data-screen="screenshot-gallery"] .sg-empty__art {
  width: 177px;
  height: 129px;
}

[data-screen="screenshot-gallery"] .sg-empty .empty__title {
  margin-top: 10px;                /* art ends 635, 210:96 sits at 645 */
  font-size: 18px;                 /* Poppins Regular 18/20, black */
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: var(--c-ink-0);
}

[data-screen="screenshot-gallery"] .sg-empty .empty__text {
  margin-top: 9px;                 /* 210:98 at 674 */
  max-width: none;
  font-size: var(--fs-body);       /* Poppins Light 15/26, black */
  line-height: 26px;
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

[data-screen="screenshot-gallery"] .sg-empty .empty__action {
  margin-top: 15px;                /* copy ends 725, 210:100 at 741 — 15 not
                                      16 because the two 26px lines box at 52
                                      where Figma reports 51 */
}

/* --------------------------------------------------------------------------
   Narrow widths

   The frame is a fixed 1440 desktop design; below it the three filter columns
   step down, the results bar wraps its controls under the count, and the slab
   gutter tightens with the rest of the portal.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  [data-screen="screenshot-gallery"] { --sg-pad: 20px; }
}

@media (max-width: 1080px) {
  [data-screen="screenshot-gallery"] .sg-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-screen="screenshot-gallery"] .sg-quick__actions { margin-left: 0; }
}

@media (max-width: 900px) {
  [data-screen="screenshot-gallery"] .sg-results__bar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 16px 0;
  }
  [data-screen="screenshot-gallery"] .sg-count { margin-right: 0; flex: 1 1 100%; }
  [data-screen="screenshot-gallery"] .sg-sort-label { margin-left: auto; }
  [data-screen="screenshot-gallery"] .sg-empty { padding: 24px 16px 48px; }
}

@media (max-width: 640px) {
  [data-screen="screenshot-gallery"] { --sg-pad: 16px; }

  [data-screen="screenshot-gallery"] .sg-head { flex-wrap: wrap; }
  [data-screen="screenshot-gallery"] .sg-head .page-title { font-size: 22px; }
  [data-screen="screenshot-gallery"] .sg-export { margin-left: 0; }

  [data-screen="screenshot-gallery"] .sg-filters { grid-template-columns: minmax(0, 1fr); }

  [data-screen="screenshot-gallery"] .sg-quick__actions { flex: 1 1 100%; }
  [data-screen="screenshot-gallery"] .sg-btn { flex: 1 1 0; }

  [data-screen="screenshot-gallery"] .sg-sort { width: 100%; margin-left: 0; }
  [data-screen="screenshot-gallery"] .sg-sort-label { flex: 1 1 100%; margin-left: 0; }

  [data-screen="screenshot-gallery"] .sg-empty__art { width: 140px; height: 102px; }
}

/* ===== screens/security-dashboard.css ===== */
/* ==========================================================================
   Security Dashboard — screen styles
   Figma 231:552 (1440x1279, tenant shell)

   Everything is scoped under [data-screen="security-dashboard"]. Nothing here
   redefines a shared primitive; the screen composes .card / .stat / .table /
   .dropdown / .chart / .donut and only supplies the measurements and the
   handful of accents that are unique to this frame.

   Frame geometry the numbers below come from (all in frame coordinates,
   content plate starts at x=324, topbar ends at y=77):

     KPI strip      231:1424 …  4 x 242x160 on a 21px gutter, y 159..319
     Trend card     231:1321    610x347 at (359, 343)
     Severity donut 231:1395    403x238 at (987, 343)
     Status strip   231:1497    403x91  at (987, 599)
     Risky users    232:1576    344x347 at (361, 715)
     Recent alerts  232:1530    667x347 at (723, 715)
   ========================================================================== */

[data-screen="security-dashboard"] .secdash {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* --------------------------------------------------------------------------
   1. KPI strip — 231:1424 / 231:1441 / 231:1458 / 231:1475

   These are .stat--tint tiles with three deltas from the dashboard's:
     · a 9px radius, not 20
     · the hairline is the FULL accent, not the pastel --stat-line
     · the trend pill holds only the percentage — "Last 30 days" sits outside
       it on the tint (the dashboard tile keeps the caption inside the pill)
   -------------------------------------------------------------------------- */

[data-screen="security-dashboard"] .secdash__kpis {
  --stat-cols: 4;
  gap: 21px;
}

[data-screen="security-dashboard"] .secdash__kpi {
  border-radius: 9px;
  border-color: var(--stat-accent);
  /* Figma draws the 1px stroke inside the 160px frame, so the box loses the
     two border pixels off the bottom pad to stay 160 tall overall. */
  padding-bottom: 11px;
}

/* Per-tile tint + numeral ink (231:1425/1434, 1442/1451, 1459/1468, 1476/1485). */
[data-screen="security-dashboard"] .secdash__kpi.stat--purple { --stat-tint: var(--t-purple);    --stat-ink: var(--c-purple-deep); }
[data-screen="security-dashboard"] .secdash__kpi.stat--green  { --stat-tint: var(--t-kpi-green); --stat-ink: var(--c-green-forest); }
[data-screen="security-dashboard"] .secdash__kpi.stat--red    { --stat-tint: var(--t-kpi-red);   --stat-ink: var(--c-crimson); }
[data-screen="security-dashboard"] .secdash__kpi.stat--amber  { --stat-tint: var(--t-kpi-amber); --stat-ink: var(--c-amber-ink); }

[data-screen="security-dashboard"] .secdash__kpi .stat__value {
  color: var(--stat-ink);
}

/* 231:1461 exports the disc and its glyph as one 48px vector, so that tile
   drops the tinted disc and lets the artwork stand on its own. */
[data-screen="security-dashboard"] .secdash__kpi--art .stat__icon {
  background: none;
}

[data-screen="security-dashboard"] .secdash__kpi .stat__icon img {
  display: block;
}

/* Trend cluster: white pill + caption, pinned 13 from the top and 9 from the
   right edge (231:1435 spans x 100..233 of a 242-wide tile). */
[data-screen="security-dashboard"] .secdash__kpi-meta {
  position: absolute;
  top: 13px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  /* The caption is a sibling of the pill here, so it has to carry the pill's
     own 12px step rather than inheriting the tile's body size. */
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
}

[data-screen="security-dashboard"] .secdash__kpi .stat__trend {
  position: static;
  width: 53px;                     /* 231:1437 — fixed, whatever the digits */
  padding: 0 0 0 5px;
  gap: 4px;
}

[data-screen="security-dashboard"] .secdash__kpi .stat__period {
  margin-left: 0;
}

/* Corner arrow: 12.3 x 9.8 turned -52.6deg inside a 15x16 box whose right
   edge is 15 from the tile edge and bottom 21 up from it (231:1426). */
[data-screen="security-dashboard"] .secdash__kpi .stat__corner {
  pointer-events: none;
}

[data-screen="security-dashboard"] .secdash__kpi .stat__corner::after {
  right: 16px;
  bottom: 24px;
  width: 12px;
  height: 10px;
  transform: rotate(-52.6deg);
}

/* --------------------------------------------------------------------------
   2. Middle band — trend chart | (donut over status strip)
   610 : 403 on an 18px gutter; the right column splits 238 : 91 on the same.
   -------------------------------------------------------------------------- */

[data-screen="security-dashboard"] .secdash__mid {
  display: grid;
  grid-template-columns: 610fr 403fr;
  gap: 18px;
  align-items: stretch;
}

[data-screen="security-dashboard"] .secdash__side {
  display: grid;
  grid-template-rows: 238fr 91fr;
  gap: 18px;
  min-width: 0;
}

/* The period pickers are 80x36 with the label hard against a 14px inset and
   the chevron 10 off the right edge (231:1324, 232:1532). */
/* The frame gives both labels the same 46px text frame and hangs the chevron
   off its end, so the chevron lands on the same x whatever the word: pin the
   label left and the chevron right rather than letting the gap set it. */
[data-screen="security-dashboard"] .secdash__range {
  min-width: 80px;
  padding: 0 10px 0 14px;
  gap: 8px;
  justify-content: space-between;
}

/* -- 2a. DLP Alerts Trend (231:1321) ------------------------------------- */

[data-screen="security-dashboard"] .secdash__trend {
  min-width: 0;
}

/* Full-bleed: the grid runs from x=421 to the card's own right border. */
[data-screen="security-dashboard"] .secdash__trend-body {
  padding: 10px 0 0;
}

[data-screen="security-dashboard"] .secdash__chart {
  --chart-tick: 13px;
}

/* 231:1331 — #a1a4b5 at 60%, 2/2 dash, on both axes. The frame draws these on
   the half-pixel; crispEdges snaps them back to one solid row/column instead
   of letting the scale spread each dash over two anti-aliased pixels. */
[data-screen="security-dashboard"] .secdash__chart .chart__gridline {
  stroke: var(--c-grid-2);
  stroke-opacity: 0.6;
  stroke-dasharray: 2 2;
  shape-rendering: crispEdges;
}

[data-screen="security-dashboard"] .secdash__chart .chart__ticks--y .chart__tick {
  fill: var(--c-muted);
  fill-opacity: 0.9;
}

/* 231:1346 — 2px #7a41d3 carrying a soft purple drop shadow. */
[data-screen="security-dashboard"] .secdash__chart-line {
  --line: var(--c-purple);
  --line-w: 2;
  filter: drop-shadow(0 4px 2.8px rgba(115, 71, 206, 0.23));
}

/* 231:1347 … — flat r5 discs, no white keyline. */
[data-screen="security-dashboard"] .secdash__chart .chart__point {
  --point: var(--c-purple);
  stroke: none;
}

/* -- 2b. Alerts by Severity donut (231:1395) ------------------------------ */

/* No trailing control in this head, so the title sits at 22 from the card top
   rather than being centred in a 36px control row. */
[data-screen="security-dashboard"] .secdash__severity .card__head,
[data-screen="security-dashboard"] .secdash__risky .card__head {
  min-height: 0;
}

[data-screen="security-dashboard"] .secdash__severity-body {
  padding: 27px var(--card-pad) 25px;
}

[data-screen="security-dashboard"] .secdash__severity-split {
  gap: 69px;
  flex-wrap: nowrap;
  align-items: center;
}

/* Ring: outer r 72, band 21.6 → mid-radius 61.2 (231:1399). */
[data-screen="security-dashboard"] .secdash__donut {
  --donut-size: 144px;
  --donut-w: 21.6;
  margin-left: 18px;
}

[data-screen="security-dashboard"] .secdash__donut .donut__ring {
  stroke: var(--s-track);
  stroke-opacity: 0.3;
}

/* 38px pitch on a 24px line box (231:1407 … 231:1414). */
[data-screen="security-dashboard"] .secdash__severity-legend {
  gap: 14px;
}

/* -- 2c. Status strip (231:1497) ------------------------------------------ */

[data-screen="security-dashboard"] .secdash__strip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 11px;
  padding: 7px 0 10px;
}

[data-screen="security-dashboard"] .secdash__strip-title {
  padding-left: 13px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-4);
}

[data-screen="security-dashboard"] .secdash__strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 9px 0 0;
}

[data-screen="security-dashboard"] .secdash__strip-col {
  position: relative;
  display: flex;
  flex-direction: column-reverse;   /* value reads above its label */
  align-items: center;
  text-align: center;
}

/* Each rule takes the ink of the column to its left, at 50% (231:1501). */
[data-screen="security-dashboard"] .secdash__strip-col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  width: 1px;
  height: 33px;
  background: var(--ink);
  opacity: 0.5;
}

[data-screen="security-dashboard"] .secdash__strip-value {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 24px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

[data-screen="security-dashboard"] .secdash__strip-label {
  font-size: var(--fs-2xs);
  line-height: var(--lh-3xs);
  color: var(--c-ink-4);
}

/* --------------------------------------------------------------------------
   3. Bottom band — risky users | recent alerts, 344 : 667 on an 18px gutter
   -------------------------------------------------------------------------- */

[data-screen="security-dashboard"] .secdash__bottom {
  display: grid;
  grid-template-columns: 344fr 667fr;
  gap: 18px;
  align-items: stretch;
}

/* -- 3a. Top Risky Users (232:1576) --------------------------------------- */

[data-screen="security-dashboard"] .secdash__risky .card__head {
  padding-left: 24px;
}

[data-screen="security-dashboard"] .secdash__risky-body {
  padding: 33px 21px 28px 22px;
}

[data-screen="security-dashboard"] .secdash__risky-list {
  display: flex;
  flex-direction: column;
  gap: 20px;                         /* 24px rows on a 44px pitch */
}

[data-screen="security-dashboard"] .secdash__risky-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--c-ink-4);
}

[data-screen="security-dashboard"] .secdash__risky-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
}

/* Fixed so every leader starts on the same x, as it does in the frame. */
[data-screen="security-dashboard"] .secdash__risky-name {
  flex: 0 0 55px;
}

/* 3/3 dash in the row's own colour at 40% (232:1618). */
[data-screen="security-dashboard"] .secdash__risky-leader {
  flex: 1 1 auto;
  height: 1px;
  margin-right: 16px;
  color: var(--dot);
  opacity: 0.4;
  background-image: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-size: 6px 1px;
}

[data-screen="security-dashboard"] .secdash__risky-score {
  flex: none;
  white-space: nowrap;
}

/* -- 3b. Recent DLP Alerts (232:1530) ------------------------------------- */

/* The head is inset to line the title up with the first column, and the
   picker sits 20 off the right edge (232:1574 / 232:1532). */
[data-screen="security-dashboard"] .secdash__alerts .card__head {
  padding-left: 34px;
  padding-right: 20px;
}

/* 21px lead so the dashed rules start at x=744 and run to the card border. */
[data-screen="security-dashboard"] .secdash__alerts-body {
  padding: 10px 0 9px 21px;
}

[data-screen="security-dashboard"] .secdash__alerts-table {
  min-width: 600px;
  table-layout: fixed;
}

[data-screen="security-dashboard"] .secdash__alerts-table th,
[data-screen="security-dashboard"] .secdash__alerts-table td {
  padding: 0;
}

[data-screen="security-dashboard"] .secdash__alerts-table th:first-child,
[data-screen="security-dashboard"] .secdash__alerts-table td:first-child {
  padding-left: 13px;
}

[data-screen="security-dashboard"] .secdash__alerts-table th:last-child,
[data-screen="security-dashboard"] .secdash__alerts-table td:last-child {
  padding-right: 13px;
}

/* 232:1538 sits under the header row in the layer list but renders as nothing
   in the frame — the head is separated by space alone, so no rule here. */
[data-screen="security-dashboard"] .secdash__alerts-table thead th {
  height: 46px;
  border-bottom: 0;
}

[data-screen="security-dashboard"] .secdash__alerts-table tbody td {
  height: 56px;
}

/* 232:1546 — the Time column runs a step smaller than its neighbours. */
[data-screen="security-dashboard"] .secdash__alerts-table td:nth-child(6) {
  font-size: var(--fs-sm);
}

/* Column x positions read straight off the frame: 757 / 855 / 943 / 1043 /
   1136 / 1221 / 1298 inside a 646-wide box starting at 744. */
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(1) { width: 17.18%; }
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(2) { width: 13.62%; }
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(3) { width: 15.48%; }
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(4) { width: 14.40%; }
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(5) { width: 13.16%; }
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(6) { width: 11.92%; }
[data-screen="security-dashboard"] .secdash__alerts-table th:nth-child(7) { width: 14.24%; }

/* --------------------------------------------------------------------------
   Narrow widths
   The frame is a fixed 1440 desktop design; below the shell's own breakpoints
   the three bands stack rather than squeezing the chart and the donut.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="security-dashboard"] .secdash__mid,
  [data-screen="security-dashboard"] .secdash__bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="security-dashboard"] .secdash__side {
    grid-template-rows: auto auto;
  }
}

@media (max-width: 640px) {
  [data-screen="security-dashboard"] .secdash__severity-split {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
  }

  [data-screen="security-dashboard"] .secdash__donut {
    margin-left: 0;
  }

  [data-screen="security-dashboard"] .secdash__severity-body,
  [data-screen="security-dashboard"] .secdash__risky-body {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }

  [data-screen="security-dashboard"] .secdash__risky .card__head,
  [data-screen="security-dashboard"] .secdash__alerts .card__head {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }
}

/* ===== screens/settings.css ===== */
/* ==========================================================================
   Settings
   ========================================================================== */

/* card--flush removes the body padding so .set-sec can own its own rhythm and
   the section rules run edge to edge. */
[data-screen="settings"] .se-col > .card { overflow: hidden; }

[data-screen="settings"] .se-field { margin-top: 18px; }

[data-screen="settings"] .se-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

@media (max-width: 720px) {
  [data-screen="settings"] .se-row { grid-template-columns: minmax(0, 1fr); }
}

/* A control row that follows a field block needs the rule to clear the input. */
[data-screen="settings"] .se-row--top { margin-top: 20px; }

[data-screen="settings"] .se-integrations { display: grid; gap: 4px; }

[data-screen="settings"] .se-integrations .list__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

[data-screen="settings"] .se-integrations .list__title {
  font-size: var(--fs-sm);
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

[data-screen="settings"] .se-integrations .list__meta {
  font-size: var(--fs-xs);
  line-height: 17px;
}

/* ===== screens/status-dashboard.css ===== */
/* ==========================================================================
   Status Dashboard — Figma 110:1314 (1440x1266, tenant shell)

   Three bands, all 1039 wide on the 1126 content plate (x 361..1400):

     110:1536 / 110:1766 / 110:1758   title + Update + Uninstall   y 101..151
     111:1928                          five agent-count pills       y 179..243
     111:1831                          white r15 card, gradient
                                       head + 15 dashed rows        y 274..1214

   Everything below is scoped to [data-screen="status-dashboard"]. The screen
   composes .card--policies, .table.table--gradient-head, .icon-btn and .icon
   from css/components/ and only adds what is genuinely local: the pill row,
   the two flat header buttons, and the column geometry of this one table.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header band — 110:1536 title, 110:1766 Update, 110:1758 Uninstall
   All three share one 50px centre line (title box y 114..138, buttons 101..151).
   -------------------------------------------------------------------------- */

[data-screen="status-dashboard"] .status-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: 50px;
  margin-bottom: 28px;          /* 151 -> 179 */
}

/* 110:1536 is Poppins Medium 25/24 #1c1c21, not the 30px semibold that
   base.css gives .page-title. Overridden here rather than in base.css so the
   shell stays untouched — see the note in the build report. The 24px leading
   is the node's own; --lh-stat carries exactly that pairing (25/24). */
[data-screen="status-dashboard"] .page-title {
  margin: 0;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

[data-screen="status-dashboard"] .status-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;                     /* 1264 -> 1272 */
  margin-left: auto;
}

/* Both buttons are 128x50 r6 flat fills — NOT the --g-btn gradient that
   .btn--primary carries, and not .btn--danger's #f31048. */
[data-screen="status-dashboard"] .status-btn {
  width: 128px;
  height: var(--h-control);
  padding: 0;
  gap: 10px;
  border-radius: var(--r-xs);
  font-size: 17px;
  color: var(--c-on-brand);
}

[data-screen="status-dashboard"] .status-btn--update    { background: var(--c-green); }   /* 110:1768 */
[data-screen="status-dashboard"] .status-btn--uninstall { background: var(--c-pink); }    /* 110:1760 */

[data-screen="status-dashboard"] .status-btn:hover  { filter: brightness(1.07); }
[data-screen="status-dashboard"] .status-btn:active { filter: brightness(0.94); }

/* Exported artwork is the path plus its stroke padding, so the boxes are the
   export sizes, not the node sizes. 110:1771+110:1772 -> 22.5, 111:1777 -> 20.5x21.5 */
[data-screen="status-dashboard"] .status-btn__icon--plus  { width: 22.5px; height: 22.5px; }
[data-screen="status-dashboard"] .status-btn__icon--trash { width: 20.5px; height: 21.5px; }

/* --------------------------------------------------------------------------
   Agent tally — 111:1928
   Five 199x64 pills, 11px apart, r100, 1px accent stroke on a pale tint.
   A 51px accent disc sits 6px in with the white glyph centred on it.
   -------------------------------------------------------------------------- */

[data-screen="status-dashboard"] .agent-tally {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 31px;          /* 243 -> 274 */
}

[data-screen="status-dashboard"] .agent-tally__item {
  --tally-ink: var(--c-green);
  --tally-tint: var(--t-kpi-green);

  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--tally-ink);
  border-radius: var(--r-pill);
  background: var(--tally-tint);
}

/* 110:1538 · 111:1786 · 111:1806 · 111:1809 · 111:1824. Four of the five pairs
   are already in the ramp as the Activity Monitoring KPI tints (43:131/160/
   183/190) — the same tint + full-strength accent register. Only the amber is
   new; it lives in tokens.css as --c-amber-deep / --t-amber-deep. */
[data-screen="status-dashboard"] .agent-tally__item--total    { --tally-ink: var(--c-green);       --tally-tint: var(--t-kpi-green); }
[data-screen="status-dashboard"] .agent-tally__item--online   { --tally-ink: var(--c-blue);        --tally-tint: var(--t-kpi-blue); }
[data-screen="status-dashboard"] .agent-tally__item--offline  { --tally-ink: var(--c-pink);        --tally-tint: var(--t-kpi-red); }
[data-screen="status-dashboard"] .agent-tally__item--tampered { --tally-ink: var(--c-purple);      --tally-tint: var(--t-kpi-purple); }
[data-screen="status-dashboard"] .agent-tally__item--inactive { --tally-ink: var(--c-amber-deep);  --tally-tint: var(--t-amber-deep); }

[data-screen="status-dashboard"] .agent-tally__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: var(--tally-ink);
  color: var(--c-on-brand);
}

/* Both glyphs are reused straight from the sidebar exports and both boxes are
   the EXPORT box, not the node box, because .icon masks the whole viewBox.
   111:1959 / 111:1965 is a filled 22x16 group with no stroke overhang, so
   export == node. 266:1109 is a 19.76x19 stroked monitor whose 1.7px stroke
   pushes the export to 21.46x20.7; employees/activity-monitoring.svg rounds
   that viewBox to 22x21, so the box has to be 22x21 for the ink to land at
   its drawn size — at the node size the glyph came out ~8% small. */
[data-screen="status-dashboard"] .agent-tally__glyph--people  { width: 22px; height: 16px; }
[data-screen="status-dashboard"] .agent-tally__glyph--monitor { width: 22px; height: 21px; }

[data-screen="status-dashboard"] .agent-tally__label {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--fs-h3);
  line-height: 25px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);   /* 111:1929..111:1939 are literal black */
}

/* 111:1929 is the one label the design left at Regular; the other four are
   Medium. Transcribed as drawn rather than normalised. */
[data-screen="status-dashboard"] .agent-tally__item--total .agent-tally__label {
  font-weight: var(--fw-regular);
}

/* --------------------------------------------------------------------------
   Agent table — 111:1831
   White r15 card (no stroke in the design), 51px gradient head, then 15 rows
   on a 59px pitch split by the 3/3 dashed rule the component already draws.
   -------------------------------------------------------------------------- */

/* 111:1832 is a plain white plate with no stroke, and the head bar is flush
   with its edge — so the card drops .card's hairline rather than hiding it,
   which would otherwise leave a 1px white ring above the gradient. */
[data-screen="status-dashboard"] .status-card {
  border: 0;
}

[data-screen="status-dashboard"] .status-card .table-wrap {
  padding-bottom: 6px;          /* 1208 -> card floor 1214 */
}

/* The column widths below add up to the design's 1039. The shell's own gutters
   give 1036 at 1440, so table-layout:fixed scales them by 0.997 — sub-pixel —
   rather than the table overflowing its wrap by 3px. Below 900 it scrolls. */
[data-screen="status-dashboard"] .status-table {
  min-width: 900px;
  table-layout: fixed;
}

/* 111:1955 runs blue at the left to green at the right — the mirror of the
   shared --g-thead, so it takes its own token. */
[data-screen="status-dashboard"] .status-table thead tr { background: var(--g-thead-rev); }

/* Column geometry read straight off the head labels (card x = 359):
   Hostname 22 · Employee 198 · OS 330 · Agent Version 413 · Status 550
   IP Address 645 · Last Seen 782 · Actions 961.  Cells carry no side padding,
   so each column edge IS the text edge. */
[data-screen="status-dashboard"] .status-table th,
[data-screen="status-dashboard"] .status-table td { padding: 0; }

[data-screen="status-dashboard"] .status-table th:first-child,
[data-screen="status-dashboard"] .status-table td:first-child { padding-left: 22px; }

[data-screen="status-dashboard"] .status-table__col-host     { width: 198px; }
[data-screen="status-dashboard"] .status-table__col-employee { width: 132px; }
[data-screen="status-dashboard"] .status-table__col-os       { width: 83px; }
[data-screen="status-dashboard"] .status-table__col-version  { width: 137px; }
[data-screen="status-dashboard"] .status-table__col-status   { width: 95px; }
[data-screen="status-dashboard"] .status-table__col-ip       { width: 137px; }
/* 163 rather than the design's 166: the shell's gutters give 1036 where the
   design card is 1039, and Last Seen carries the slack. Every other column
   keeps its measured width, and the trailing buttons still finish 8px off the
   card edge exactly as in 116:2003. */
[data-screen="status-dashboard"] .status-table__col-seen     { width: 163px; }
[data-screen="status-dashboard"] .status-table__col-actions  { width: 91px; }

/* Agent Version is the only centred column, and it centres on its HEAD LABEL
   (413..514) rather than on the column box — 111:1945 vs 115:1979. */
[data-screen="status-dashboard"] .status-table th:nth-child(4),
[data-screen="status-dashboard"] .status-table td:nth-child(4) {
  text-align: center;
  padding-right: 36px;
}

/* Actions: label starts 13px into the column, the 40px buttons finish 8px off
   the card edge (1307..1390 against a 1398 floor). */
[data-screen="status-dashboard"] .status-table th:last-child { padding-left: 13px; }

[data-screen="status-dashboard"] .status-table td:last-child {
  text-align: right;
  padding-right: 8px;
}

/* Row rhythm: the head bar closes at 325 and the first rule lands at 380, so
   row one is 55; every rule after that is 59 apart. */
[data-screen="status-dashboard"] .status-table tbody td { height: 59px; }
[data-screen="status-dashboard"] .status-table tbody tr:first-child td { height: 55px; }

/* 116:2005 r3 / 116:2003 r4 — tighter than the .icon-btn default 6. */
[data-screen="status-dashboard"] .status-table .icon-btn { border-radius: 4px; }

/* Export boxes again: 116:2236 -> 21.5 square, 116:2004 -> 18.5x19.5. */
[data-screen="status-dashboard"] .icon[data-icon="reload"] {
  --icon: url(../assets/icons/reload.svg);
  width: 21.5px;
  height: 21.5px;
}

[data-screen="status-dashboard"] .status-table .icon[data-icon="trash"] {
  width: 18.5px;
  height: 19.5px;
}

/* --------------------------------------------------------------------------
   Narrow widths
   The table keeps its 1039 geometry and scrolls inside .table-wrap; the pill
   row drops to 3-up then 2-up, and the header stacks.
   -------------------------------------------------------------------------- */

/* "Total Agents 01" needs ~122px beside its 51px disc, so the five-up strip
   only fits while the content column is at least ~1020 wide — which, with the
   320 rail and the 42 gutters, means a 1425 viewport. Below that it goes
   three-up rather than letting the labels wrap onto two lines. */
@media (max-width: 1424px) {
  [data-screen="status-dashboard"] .agent-tally { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  [data-screen="status-dashboard"] .agent-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  [data-screen="status-dashboard"] .status-head {
    display: block;
    margin-bottom: var(--gap);
  }

  [data-screen="status-dashboard"] .page-title { margin-bottom: var(--gap-sm); }
  [data-screen="status-dashboard"] .status-head__actions { margin-left: 0; }
  [data-screen="status-dashboard"] .status-btn { flex: 1 1 0; width: auto; }
  [data-screen="status-dashboard"] .agent-tally { grid-template-columns: minmax(0, 1fr); }
}

/* ===== screens/storage.css ===== */
/* ==========================================================================
   Storage
   ========================================================================== */

[data-screen="storage"] .st-donut-body {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

[data-screen="storage"] .st-donut {
  --donut-size: 180px;
  --donut-w: 28;
  margin: 0;
}

[data-screen="storage"] .st-donut .donut__value {
  font-size: var(--fs-h2);
  line-height: 30px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
}

[data-screen="storage"] .st-donut .donut__caption {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 16px;
  color: var(--c-muted);
}

[data-screen="storage"] .st-legend {
  display: grid;
  gap: 12px;
  flex: 1 1 200px;
  min-width: 180px;
}

/* The legend rows are label-then-value, so the value is pushed right rather
   than sitting immediately after the text. */
[data-screen="storage"] .st-legend .chart__legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--c-ink-4);
}

[data-screen="storage"] .st-legend .chart__legend-value {
  margin-left: auto;
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

/* -- retention panel ------------------------------------------------------- */

[data-screen="storage"] .st-kv { margin-bottom: 4px; }

[data-screen="storage"] .divider { margin: 18px 0 6px; }

/* ===== screens/subscription-plans.css ===== */
/* ==========================================================================
   Subscription Plans
   ========================================================================== */

[data-screen="subscription-plans"] .sp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
  align-items: stretch;
}

@media (max-width: 1100px) {
  [data-screen="subscription-plans"] .sp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  [data-screen="subscription-plans"] .sp-plans { grid-template-columns: minmax(0, 1fr); }
}

/* The feature list is the variable-height part, so it takes the slack and the
   CTA stays pinned to the bottom of every card. */
[data-screen="subscription-plans"] .plan__list { flex: 1 1 auto; align-content: start; }

/* ===== screens/timesheet.css ===== */
/* ==========================================================================
   Screen — Timesheet
   Figma: 79:243 (1440 x 1266, tenant shell)

   Four regions, all built from the shared components:
     88:641 / 88:695 / 88:705 / 88:714   KPI strip   -> .stat.stat--row
     92:2                                Daily Time Tracking card
                                         -> .card + .btn-row + .table.table--dashed
     104:1122 + 107:1205..107:1293       Task Overview -> .card + .stackbar + .dot
     107:1249                            Time Tracking -> .card + inline-SVG .chart

   Every selector is scoped under [data-screen="timesheet"]; nothing here can
   reach another screen. Values in parentheses are the Figma node measured.
   ========================================================================== */

[data-screen="timesheet"] {
  /* Content rhythm. The frame stacks title -> KPIs -> sheet -> split with a
     flat 20px between blocks (270 -> 290, 762 -> 782), not the 24px --gap. */
  --ts-stack: 20px;

  /* 93:206 — the rule above the totals row is plain black at 20%, a shade
     firmer than --c-rule and inset from the card edges. */
  --ts-rule-total: rgba(0, 0, 0, 0.2);
}

/* Registered here rather than in components/misc.css so the shared registry
   stays untouched. 88:670 — the clock glyph inside the 42px accent disc. */
[data-screen="timesheet"] .icon[data-icon="clock-hours"] {
  --icon: url(../assets/icons/clock-hours.svg);
}

/* ==========================================================================
   KPI strip — 4 x 251x102 row tiles, 11px apart (88:641 .. 88:714)
   ========================================================================== */

[data-screen="timesheet"] .ts-kpis { gap: 11px; }

/* The disc is pinned to the tile's top padding (186 in a tile that starts at
   168), while the label/value block stays optically centred. */
[data-screen="timesheet"] .ts-kpi .stat__icon { align-self: flex-start; }

[data-screen="timesheet"] .ts-kpi .icon { --icon-size: 42px; }

/* 190 -> 226: the two lines sit 12px apart, not the component's 4. */
[data-screen="timesheet"] .ts-kpi .stat__value { margin-top: 12px; }

/* Total Hours is the one tile whose disc is not its border colour:
   the hairline is #4974be (88:642) but the disc is #0858e1 (88:670). */
[data-screen="timesheet"] .ts-kpi--total { --stat-accent: var(--c-blue-el); }

/* ==========================================================================
   Daily Time Tracking — 92:2 (1036 x 472)
   head 20+36 · filters 17+50 · table 20+43+4x55 · totals 66  =  472
   ========================================================================== */

[data-screen="timesheet"] .ts-sheet { margin-top: var(--ts-stack); }

[data-screen="timesheet"] .ts-sheet > .card__head { padding: 19px 19px 0 26px; }
[data-screen="timesheet"] .ts-sheet > .card__body { padding: 17px 0 0; }

/* 92:4 / 107:1252 — the period chip is 80 wide in the frame; the shared
   toggle's 14/10/14 rhythm renders a little roomier than that. */
[data-screen="timesheet"] .dropdown__toggle { padding: 0 12px; gap: 7px; }

/* -- filter bar (92:51 + 92:95) ------------------------------------------- */

[data-screen="timesheet"] .ts-filters {
  gap: 10px;                       /* 568 -> 578, 799 -> 809, 914 -> 924     */
  padding: 0 26px;
  flex-wrap: nowrap;
}

/* Pill selects: 50 tall, r=100, #f4f6f6, 16px, chevron 8x4 inset 20 (92:56). */
[data-screen="timesheet"] .ts-filters__select {
  border-radius: var(--r-pill);
  background-color: var(--s-app);
  padding: 0 40px 0 18px;
  background-position: right 20px center;
  background-size: 8px 4px;
}

[data-screen="timesheet"] .ts-filters__field { flex: none; }
[data-screen="timesheet"] .ts-filters__field--dept     { width: 181px; }
[data-screen="timesheet"] .ts-filters__field--employee { width: 221px; }
[data-screen="timesheet"] .ts-filters__field--date     { width: 105px; }

/* 92:86 — 116x50 pill, blue -> green at 94.19deg, white funnel + 16px label. */
[data-screen="timesheet"] .ts-filters__apply {
  width: 116px;
  padding: 0 20px;
  gap: 11px;
  background: var(--g-btn-apply);
  color: var(--c-on-brand);
  font-size: var(--fs-h3);
}

[data-screen="timesheet"] .ts-filters__apply:hover { filter: brightness(1.06); }
[data-screen="timesheet"] .ts-filters__apply .icon { --icon-size: 18px; }

/* 92:97 — same footprint, flat #f4f6f6, 21px refresh glyph in the ink. */
[data-screen="timesheet"] .ts-filters__reset {
  width: 116px;
  padding: 0 18px;
  gap: 10px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
}

[data-screen="timesheet"] .ts-filters__reset .icon { --icon-size: 21px; }

/* -- the sheet itself (93:109 .. 151:140) --------------------------------- */

[data-screen="timesheet"] .ts-sheet__wrap { margin-top: 20px; }

[data-screen="timesheet"] .ts-sheet__table {
  table-layout: fixed;
  min-width: 900px;
}

/* Column widths are derived from the label centres in the frame: Monday 566.5,
   Tuesday 679, Wednesday 798, Thursday 909, Friday 1011.5, Saturday 1114,
   Sunday 1220.5, Total 1315 — each boundary is the midpoint of two centres. */
[data-screen="timesheet"] .ts-sheet__table th:nth-child(1) { width: 14.407%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(2) { width: 10.859%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(3) { width: 11.173%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(4) { width: 11.100%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(5) { width: 10.304%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(6) { width:  9.894%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(7) { width: 10.087%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(8) { width:  9.701%; }
[data-screen="timesheet"] .ts-sheet__table th:nth-child(9) { width: 12.476%; }

/* Employee reads left; every day column and the total read centred. */
[data-screen="timesheet"] .ts-sheet__table th,
[data-screen="timesheet"] .ts-sheet__table td { text-align: center; }

[data-screen="timesheet"] .ts-sheet__table th:first-child,
[data-screen="timesheet"] .ts-sheet__table td:first-child {
  text-align: left;
  padding-left: 33px;              /* 394 in a card that starts at 361       */
}

[data-screen="timesheet"] .ts-sheet__table th:last-child,
[data-screen="timesheet"] .ts-sheet__table td:last-child { padding-right: 35px; }

/* 93:124 — 14px SemiBold #636674, and NO rule beneath: 93:109 is white at 8%,
   which is invisible on the card. */
[data-screen="timesheet"] .ts-sheet__table thead th {
  height: 43px;
  border-bottom-color: transparent;
}

/* 55px rows (495 -> 551 -> 605 -> 660), employee cell in the body ink. */
[data-screen="timesheet"] .ts-sheet__table tbody th,
[data-screen="timesheet"] .ts-sheet__table tbody td {
  height: 55.5px;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-ink-4);
  border-bottom: 0;
}

/* The dash runs edge to edge as one strip, so it is painted on the row rather
   than per cell — that keeps the 3/3 phase continuous across columns (93:110). */
[data-screen="timesheet"] .ts-sheet__table tbody td { background-image: none; }

[data-screen="timesheet"] .ts-sheet__table tbody tr {
  background-image: linear-gradient(to right, var(--c-rule-dash) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

[data-screen="timesheet"] .ts-sheet__table tbody tr:last-child { background-image: none; }

/* 93:206 — solid rule, inset 23 left / 28 right, drawn on the row so the inset
   survives whatever the first and last cells are padded by. */
[data-screen="timesheet"] .ts-sheet__table tfoot th,
[data-screen="timesheet"] .ts-sheet__table tfoot td {
  height: 63px;
  font-weight: var(--fw-regular);
  border-top: 0;
}

[data-screen="timesheet"] .ts-sheet__table tfoot th:first-child {
  padding-left: 26px;              /* 387, one notch left of the body rows    */
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
}

[data-screen="timesheet"] .ts-sheet__table tfoot tr {
  background-image: linear-gradient(to right,
      transparent 0 23px,
      var(--ts-rule-total) 23px calc(100% - 28px),
      transparent calc(100% - 28px));
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 1px;
}

/* 93:199 etc — "no hours" is drawn as a 14x1 bar, not an em dash. */
[data-screen="timesheet"] .ts-dash {
  display: inline-block;
  width: 14px;
  height: 1px;
  border-radius: var(--r-pill);
  background: var(--c-ink-4);
  vertical-align: 4px;
}

/* ==========================================================================
   Bottom row — Task Overview 513x341 (104:1122) + Time Tracking 497x341
   (107:1249), 23px apart. Equalised to a 2-up grid on the --gap rhythm.
   ========================================================================== */

[data-screen="timesheet"] .ts-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--ts-stack);
}

/* -- Task Overview -------------------------------------------------------- */

[data-screen="timesheet"] .ts-tasks > .card__head {
  padding: 22px 21px 0 28px;
  min-height: 22px;                /* the "..." chip is 22 tall (104:1129)    */
}

[data-screen="timesheet"] .ts-tasks > .card__body { padding: 20px 0 0; }

/* 107:1247 — 464x20 strip, four segments 229/94/67/53 with 7px between them
   and a 3px radius. Grow factors keep those exact ratios at any width. */
[data-screen="timesheet"] .ts-tasks__bar {
  gap: 7px;
  margin: 0 21px 0 28px;
}

[data-screen="timesheet"] .ts-tasks__bar .stackbar__seg {
  flex: var(--w) 1 0;
  border-radius: 3px;
}

/* 107:1218 .. 107:1293 — five 51px rows split by a soft 3/3 dash that runs the
   full width of the card (365 -> 874). */
[data-screen="timesheet"] .ts-tasks__row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 51px;
  padding: 0 21px 0 31px;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--c-ink-4);
  background-image: linear-gradient(to right, var(--c-rule-dash-soft) 0 3px, transparent 3px 6px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 6px 1px;
}

[data-screen="timesheet"] .ts-tasks__row:last-child { background-image: none; }

[data-screen="timesheet"] .ts-tasks__row .dot { margin-right: 0; vertical-align: baseline; }

/* 107:1242 — "Completed" is #f4b22e, a shade lighter than the shared amber. */
[data-screen="timesheet"] .ts-tasks__row .dot.is-warning { background: var(--c-task-amber); }

[data-screen="timesheet"] .ts-tasks__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* -- Time Tracking -------------------------------------------------------- */

[data-screen="timesheet"] .ts-tracking > .card__head { padding: 27px 25px 0 26px; }
[data-screen="timesheet"] .ts-tracking > .card__body { padding: 3px 6px 5px 27px; }

[data-screen="timesheet"] .ts-chart {
  --chart-tick: 13px;
  --line: var(--c-blue);           /* 108:1297 stroke #1e7ac0, 2px            */
  --point: var(--c-blue);          /* 108:1299 fill  #1e7ac0, r=5             */
}

/* The blue haze is a filter on the polyline; clipping to the viewport keeps it
   off the card edge exactly as the frame does. */
[data-screen="timesheet"] .ts-chart__svg { overflow: hidden; }

/* 107:1259 — #a1a4b5 at 60%, dashed 2/2, both axes. */
[data-screen="timesheet"] .ts-chart .chart__gridline { stroke: var(--c-grid-soft); }

/* 107:1276 y labels sit a touch darker than the 107:1274 day labels. */
[data-screen="timesheet"] .ts-chart .chart__ticks--y .chart__tick {
  fill: var(--c-muted);
  opacity: 0.9;
}

[data-screen="timesheet"] .ts-chart__point { stroke: none; }

/* 138:778 — 68x48 white card, r=10, soft 4/3 shadow, a downward pointer, and
   the label/value pair the frame spells out. */
[data-screen="timesheet"] .ts-chart__tip {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 68px;
  height: 48px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-panel);
  box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.04);
}

[data-screen="timesheet"] .ts-chart__tip .chart__tooltip-label {
  font-size: var(--fs-xs);
  line-height: 20px;
  color: var(--c-muted-5);
}

[data-screen="timesheet"] .ts-chart__tip .chart__tooltip-value {
  font-size: var(--fs-xs);
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: var(--c-tip-ink);
}

[data-screen="timesheet"] .ts-chart__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6.5px solid transparent;
  border-top: 11px solid var(--s-card);
  border-bottom: 0;
}

/* ==========================================================================
   Narrower viewports — the frame is a fixed 1440 desktop design, so below the
   shell's own breakpoints the two-up split stacks and the sheet scrolls.
   ========================================================================== */

@media (max-width: 1100px) {
  [data-screen="timesheet"] .ts-kpis { gap: var(--gap-sm); }
}

@media (max-width: 960px) {
  [data-screen="timesheet"] .ts-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  [data-screen="timesheet"] .ts-filters { flex-wrap: wrap; }
  [data-screen="timesheet"] .ts-filters__field,
  [data-screen="timesheet"] .ts-filters__apply,
  [data-screen="timesheet"] .ts-filters__reset { width: auto; flex: 1 1 200px; min-width: 0; }
}

@media (max-width: 640px) {
  [data-screen="timesheet"] .ts-sheet > .card__head,
  [data-screen="timesheet"] .ts-filters { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
  [data-screen="timesheet"] .ts-tasks > .card__head,
  [data-screen="timesheet"] .ts-tasks__bar { margin-left: var(--gap-sm); margin-right: var(--gap-sm); }
  [data-screen="timesheet"] .ts-tasks > .card__head { margin-left: 0; margin-right: 0; padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
  [data-screen="timesheet"] .ts-tasks__row { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
  [data-screen="timesheet"] .ts-tracking > .card__head { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
  [data-screen="timesheet"] .ts-tracking > .card__body { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
}

/* ===== screens/webcam.css ===== */
/* ==========================================================================
   screen: webcam — Figma 176:1568 (1440 x 1279), tenant shell

   The whole screen is one white plate carrying a single bordered "feed" panel
   and a centred pager underneath. Everything is composed from the shared
   components; the rules below are scoped modifiers only, never redefinitions.

     .card              -> .webcam-card    squares the plate off (see note)
     .dot  .is-online   -> the 12px LIVE marker              185:5
     .select            -> .webcam-feed__camera              185:13
     .icon-btn          -> .webcam-feed__expand              185:27
     .switch            -> .webcam-feed__auto                185:36
     .pager .pager__btn -> .webcam-pager                     185:40 / 185:43
     .icon              -> fullscreen (composed export) + chevron-down

   Measured off 176:1568, frame origin (0,0) at the top-left of the 1440 frame:

     183:2   plate        1039 x 720 at (361,150)  white, NO border, NO radius
     185:3   feed panel   1002 x 633 at (383,170)  1px #e0e5f0, r=11
     185:5   live dot     12 at (402,194)          #239b44
     185:4   "LIVE"       15 Poppins Medium at (419,188)
     185:9   e-mail       16 Poppins Light at (460,187), 24 line box
     185:6   "Camera :"   16 Poppins Light at (1014,187)
     185:13  select       209 x 35 at (1103,182)   r=6, 1px #e0e5f0
     185:14  select text  15 Poppins Regular at (1116,187)
     185:15  chevron      9 x 5 at (1289,198)      byte-identical to 24:819
     185:26  rule         1 x 33 at (1325,183)     #e0e5f0
     185:27  expand       32 x 34 at (1337,183)    r=3, 1px #e0e5f0
     186:65-68            four 3px corner marks; with their 1px stroke the
                          group is 13 x 13 at (1346.5,193.5)
     185:48  frame        967 x 521 at (401,228)   mask group
     185:28  "Last captured: 20 May 2025"  13 Poppins Light at (401,763)
     185:32  separator    1 x 15 at (585,768)      stroke="black" in the export
     185:30  "10:30:45 AM"                13 Poppins Light at (596,764)
     185:34  "Auto capture: Every 5 mins" 13 Poppins Light at (1142,764)
     185:36  switch       39 x 23 at (1328,765)    track #239b44 r=11.5,
                                                   knob r=9.5 at cx 26.5
     185:40  prev         30 x 31 at (802,820)     r=5, 1px #555c6d
     185:46  "1 of 12"    14 Poppins Regular #555c6d at (861,824)
     185:43  next         30 x 31 at (930,820)

   INK. Every text layer on this frame is literal #000000 — Figma emits
   `text-black` for 185:4 / 185:9 / 185:6 / 185:14 / 185:28 / 185:30 / 185:34,
   the 185:32 separator exports as stroke="black" and the four corner marks of
   the full-screen glyph export the same way. That is --c-ink-0, not the
   #0a0a0a --c-ink-4 the form and button primitives default to; Clipboard,
   Screenshot Gallery and Policies Configuration already make the same call.

   Vertical rhythm inside the panel, which is why the paddings are odd numbers:
     170 border · 11 pad · 35 head · 11 · 521 frame · 14 · 24 foot · 15 pad = 633

   Horizontal rhythm. The design is NOT centred — the plate carries 22px on the
   left and 15px on the right, and the panel 17px / 16px:
     plate 361 · 22 · panel 383 ......... panel 1385 · 15 · plate 1400
     panel 383 · 1 border · 17 · frame 401 ... frame 1368 · 16 · 1 border · 1385

   NOTE on .webcam-card: 183:2 is a plain white rectangle — square corners, no
   stroke (confirmed by sampling the render at the corner). .card is still the
   right surface primitive, so it is used and squared off here rather than a
   second white-panel class being invented.
   ========================================================================== */

/* -- page title ------------------------------------------------------------ */

/* 176:1790 is Poppins Medium 25/24 #1c1c21 with a 22px drop to the plate, not
   the 30/36 SemiBold #101828 base.css gives .page-title. Scoped rather than
   forked — this belongs in base.css once, for all 23 screens, and every other
   screen has had to restate it too. See the report. */
[data-screen="webcam"] .page-title {
  margin: 0 0 22px;
  font-size: var(--fs-stat);      /* 25px */
  line-height: var(--lh-stat);    /* 24px */
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* -- the plate ------------------------------------------------------------- */

/* No horizontal padding on the plate: the panel is inset 22/15 by its own
   margin, because the pager below it is centred on the PLATE (802..960 in a
   361..1400 plate) and not on the panel. Padding here would drag it right. */
[data-screen="webcam"] .webcam-card {
  border: 0;
  border-radius: 0;
  padding: 20px 0 19px;           /* 150->170 top, 803->820->869 foot */
}

/* -- the feed panel -------------------------------------------------------- */

[data-screen="webcam"] .webcam-feed {
  margin: 0 15px 0 22px;
  border: 1px solid var(--s-panel-line);
  border-radius: 11px;
  padding: 11px 16px 15px 17px;
  background: var(--s-card);
}

/* -- head ------------------------------------------------------------------ */

[data-screen="webcam"] .webcam-feed__head {
  display: flex;
  align-items: center;
  gap: 12px;                  /* "LIVE" ends 448 -> e-mail 460 */
  height: 35px;               /* the select is the tallest thing in the row */
}

[data-screen="webcam"] .webcam-feed__live {
  display: flex;
  align-items: center;
  gap: 6px;                   /* dot 401..413 -> "LIVE" 419 */
  flex: none;
  font-size: var(--fs-body);
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-0);
}

/* 185:5 is a 12px disc, twice the 6px agent marker .dot ships at. */
[data-screen="webcam"] .webcam-feed__live .dot {
  width: 12px;
  height: 12px;
  margin-right: 0;
  vertical-align: baseline;
}

[data-screen="webcam"] .webcam-feed__who {
  min-width: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- head: camera controls ------------------------------------------------- */

[data-screen="webcam"] .webcam-feed__controls {
  display: flex;
  align-items: center;
  margin-left: auto;
}

[data-screen="webcam"] .webcam-feed__camera-label {
  flex: none;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

/* .select ships as the 52px filled form control; 185:13 is the compact white
   toolbar form of the same object. Only the chrome is restated — the chevron,
   its 9x5 size and the appearance reset all come from the component. */
[data-screen="webcam"] .webcam-feed__camera {
  width: 209px;
  height: 35px;
  flex: none;
  margin-left: 15px;          /* "Camera :" ends 1088 -> select 1103 */
  padding: 0 32px 0 13px;
  border-radius: var(--r-xs);
  border-color: var(--s-panel-line);
  background-color: var(--s-card);
  background-position: right 15px center;
  line-height: 33px;
  color: var(--c-ink-0);
}

[data-screen="webcam"] .webcam-feed__rule {
  flex: none;
  width: 1px;
  height: 33px;
  margin-left: 13px;          /* select ends 1312 -> rule 1325 */
  background: var(--s-panel-line);
}

/* 185:27 is a bordered white square, not one of the tinted row buttons. It is
   bottom-aligned, not centred: the head band is 182..217 and the button runs
   183..217, so align-self keeps its border on whole pixels. */
[data-screen="webcam"] .webcam-feed__expand {
  --ib-bg: var(--s-card);
  --ib-ink: var(--c-ink-0);
  --icon-size: 13px;

  align-self: flex-end;
  width: 32px;
  height: 34px;
  margin-left: 11px;          /* rule ends 1326 -> button 1337 */
  border: 1px solid var(--s-panel-line);
  border-radius: 3px;
}

[data-screen="webcam"] .webcam-feed__expand:hover {
  filter: none;
  background: var(--s-app);
}

/* fullscreen.svg composes the four exported corner marks 186:65-68 at their
   measured offsets; the path data of each is untouched. */
[data-screen="webcam"] .icon[data-icon="fullscreen"] {
  --icon: url(../assets/icons/fullscreen.svg);
}

/* -- the frame ------------------------------------------------------------- */

[data-screen="webcam"] .webcam-feed__frame {
  height: 521px;
  margin: 11px 0 0;
  overflow: hidden;
  background: var(--c-ink-3);
}

/* The plate is a live feed, so the still is cropped rather than letterboxed:
   the shipped JPEG is already the 967x521 crop the design shows, and cover
   keeps that framing when the column is wider or narrower than 967. */
[data-screen="webcam"] .webcam-feed__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -- foot ------------------------------------------------------------------ */

[data-screen="webcam"] .webcam-feed__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-top: 14px;
}

[data-screen="webcam"] .webcam-feed__stamp {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

[data-screen="webcam"] .webcam-feed__sep {
  flex: none;
  width: 1px;
  height: 15px;
  background: var(--c-ink-0);
}

/* 185:36 is a bigger track than the 35x18 switch on My Profile (260:632), and
   it runs on the brand green rather than the profile toggle's #28a56e. */
[data-screen="webcam"] .webcam-feed__auto { gap: 15px; }

[data-screen="webcam"] .webcam-feed__auto .switch__label {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--c-ink-0);
}

/* Bottom-aligned for the same reason as the expand button: the foot band is
   24 tall and the track 23, so centring would land it on a half pixel. */
[data-screen="webcam"] .webcam-feed__auto .switch__input {
  align-self: flex-end;
  width: 39px;
  height: 23px;
}

[data-screen="webcam"] .webcam-feed__auto .switch__input::after {
  width: 19px;
  height: 19px;
}

[data-screen="webcam"] .webcam-feed__auto .switch__input:checked {
  background: var(--c-green);
}

/* knob centre 26.5 - radius 9.5 - 2px inset = 15px of travel */
[data-screen="webcam"] .webcam-feed__auto .switch__input:checked::after {
  transform: translateX(15px);
}

/* -- pager ----------------------------------------------------------------- */

/* Centred under the panel rather than the usual "N of M" on the left with the
   page buttons pushed right, so .pager__info gives its auto margin back. */
[data-screen="webcam"] .webcam-pager {
  justify-content: center;
  gap: 29px;
  margin-top: 17px;
}

[data-screen="webcam"] .webcam-pager__info {
  margin-right: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ctl-ink);
}

[data-screen="webcam"] .webcam-pager__btn {
  width: 30px;
  min-width: 30px;
  height: 31px;
  padding: 0;
  border-radius: var(--r-2xs);
  border-color: var(--c-ctl-ink);
  color: var(--c-ctl-ink);
}

/* 185:41 / 185:44 export as an 11x6 chevron stroked #555c6d — the same glyph
   as the 9x5 select chevron 185:15, so chevron-down.svg is masked in
   currentColor at 11px and .icon--left / .icon--right do the turning. */
[data-screen="webcam"] .webcam-pager__chev { --icon-size: 11px; }

/* --------------------------------------------------------------------------
   Narrow widths
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [data-screen="webcam"] .webcam-feed__head {
    height: auto;
    flex-wrap: wrap;
    row-gap: 12px;
  }

  [data-screen="webcam"] .webcam-feed__controls {
    width: 100%;
    margin-left: 0;
  }

  [data-screen="webcam"] .webcam-feed__camera {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  [data-screen="webcam"] .webcam-feed__rule { margin-left: auto; }
}

/* 521px is the design height at exactly 1440, where the frame is also 967 wide.
   Any narrower and holding that height would crop the feed to a letterbox slot,
   so below the design width the frame keeps 185:48's proportion instead. */
@media (max-width: 1439px) {
  [data-screen="webcam"] .webcam-feed__frame {
    height: auto;
    aspect-ratio: 967 / 521;
  }
}

@media (max-width: 900px) {
  [data-screen="webcam"] .webcam-card { padding: var(--gap-sm) 0; }
  [data-screen="webcam"] .webcam-feed { margin: 0 var(--gap-sm); }
}

@media (max-width: 640px) {
  [data-screen="webcam"] .page-title { font-size: 22px; margin-bottom: 18px; }

  [data-screen="webcam"] .webcam-feed__who { flex: 1 1 100%; }

  [data-screen="webcam"] .webcam-feed__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  [data-screen="webcam"] .webcam-pager { gap: 20px; }
}

/* ===== screens/white-label.css ===== */
/* ==========================================================================
   White Label

   The preview deliberately uses hard-coded blues rather than the Headx tokens:
   it is showing ANOTHER tenant's brand, so inheriting Headx green would defeat
   the purpose of the panel.
   ========================================================================== */

[data-screen="white-label"] .wl-tenant { min-width: 240px; }

/* The card body already pads; the sections add their own, so cancel the double. */
[data-screen="white-label"] .wl-sec:first-child { padding-top: 0; }
[data-screen="white-label"] .wl-sec { padding-left: 0; padding-right: 0; }

[data-screen="white-label"] .wl-colours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  [data-screen="white-label"] .wl-colours { grid-template-columns: minmax(0, 1fr); }
}

[data-screen="white-label"] .swatch .input {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

[data-screen="white-label"] .field__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* -- browser-chrome preview ------------------------------------------------ */

[data-screen="white-label"] .wl-preview {
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #fff;
}

[data-screen="white-label"] .wl-preview__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: #e9edf2;
  border-bottom: 1px solid #d8dee6;
}

[data-screen="white-label"] .wl-preview__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c3ccd7;
}

[data-screen="white-label"] .wl-preview__url {
  margin-left: 10px;
  font-size: var(--fs-3xs);
  line-height: 14px;
  color: #6b7684;
}

[data-screen="white-label"] .wl-preview__body {
  padding: 30px 34px 34px;
  background: #f1f5f9;
  text-align: center;
}

[data-screen="white-label"] .wl-preview__logo {
  font-size: 21px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: #0f172a;
}

[data-screen="white-label"] .wl-preview__logo span { color: #1d4ed8; }

[data-screen="white-label"] .wl-preview__welcome {
  margin-top: 22px;
  font-size: var(--fs-h2);
  line-height: 30px;
  font-weight: var(--fw-semibold);
  color: #0f172a;
}

[data-screen="white-label"] .wl-preview__sub {
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #64748b;
}

[data-screen="white-label"] .wl-preview__field {
  display: block;
  text-align: left;
  margin-bottom: 12px;
}

[data-screen="white-label"] .wl-preview__label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-3xs);
  line-height: 14px;
  font-weight: var(--fw-medium);
  color: #475569;
}

[data-screen="white-label"] .wl-preview__input {
  display: block;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--r-xs);
  background: #fff;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #334155;
}

[data-screen="white-label"] .wl-preview__btn {
  margin-top: 18px;
  padding: 10px;
  border-radius: var(--r-xs);
  background: #1d4ed8;
  font-size: var(--fs-sm);
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: #fff;
}

[data-screen="white-label"] .wl-preview__link {
  margin-top: 12px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: #0ea5e9;
}

[data-screen="white-label"] .divider { margin: 20px 0 18px; }

/* Consecutive fields in the Domain section collide because .field__hint wraps
   to two lines and .field carries no bottom margin of its own. */
[data-screen="white-label"] .wl-sec .field + .field { margin-top: 18px; }

/* ===== screens/working-hours.css ===== */
/* ==========================================================================
   Working Hours — Figma 235:5572 (1440x1255, tenant shell)

   One card, four stacked blocks. Every measurement below is frame-absolute,
   converted to the card's own 18px gutter:

     card       235:5818   x364 y163  1039x631  r23, 1px #e6e6e6
     banner     235:6039   x382 y181  1003x93   r17, #f8fcff, 1px #e6e6e6
     labels     235:6074   y294       15/20 #787878   (.field__label)
     fields     235:6052   y324       491x52 r8       (.input)
                235:6080   x894       21px gutter between the two
     Work Days  235:6101   y389       15/20 black
     day pills  236:6105+  y423       33 tall, r100, 10px gutter
     Save       236:6159   y483       118x42 r6

   Reuses .card, .card__body, .field, .field__label, .input, .btn.btn--primary
   and the .icon mask primitive. The only new objects are the info banner and
   the day pill; both are scoped, neither forks a shared component.
   ========================================================================== */

/* -- icons ----------------------------------------------------------------
   Three Figma exports this screen introduces. They are registered here rather
   than in components/misc.css so the screen stays self-contained; the paths
   resolve from css/styles.css, which is where build.py inlines this file.
   -------------------------------------------------------------------------- */

[data-screen="working-hours"] .icon[data-icon="info-circle"] { --icon: url(../assets/icons/info-circle.svg); }
[data-screen="working-hours"] .icon[data-icon="clock-field"] { --icon: url(../assets/icons/clock-field.svg); }
[data-screen="working-hours"] .icon[data-icon="check-tick"]  { --icon: url(../assets/icons/check-tick.svg); }

/* -- card ------------------------------------------------------------------
   The frame draws the panel 631 tall with everything in its top 380px, so the
   height is held rather than left to the content.
   -------------------------------------------------------------------------- */

[data-screen="working-hours"] .wh { min-height: 631px; }

[data-screen="working-hours"] .wh__body { padding: 18px; }

/* -- info banner ----------------------------------------------------------- */

[data-screen="working-hours"] .wh__note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 93px;
  margin: 0 0 20px;
  padding: 19px 17px;
  border: 1px solid var(--s-card-line);
  border-radius: var(--r-info-lg);
  background: var(--t-info-cool);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-ink-note);
}

/* 24px ring-and-bang, sitting on the first line rather than centred on the
   two-line block — 235:6044 centres at y213, the first line at y212. */
[data-screen="working-hours"] .wh__note-icon {
  --icon-size: 24px;
  color: var(--c-ink-note);
}

/* 235:6042 is a 900px text frame, which is what forces the break after
   "the dashboard". Without the cap the copy would run to one long line. */
[data-screen="working-hours"] .wh__note-text { max-width: 900px; }

/* -- time fields ----------------------------------------------------------- */

[data-screen="working-hours"] .wh__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
  margin-bottom: 13px;
}

[data-screen="working-hours"] .wh__control {
  position: relative;
  display: flex;
}

/* Room for the trailing glyph so a longer value never runs under it. */
[data-screen="working-hours"] .wh__input { padding-right: 54px; }

[data-screen="working-hours"] .wh__clock {
  position: absolute;
  top: 50%;
  right: 22px;
  margin-top: -10px;
  color: var(--c-clock-glyph);
  pointer-events: none;
}

/* -- work days ------------------------------------------------------------- */

[data-screen="working-hours"] .wh__days {
  min-width: 0;
  margin: 0 0 27px;
  padding: 0;
  border: 0;
}

/* Black, not the #787878 of the two field labels above it — 235:6101. */
[data-screen="working-hours"] .wh__legend {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  color: var(--c-ink-0);
}

[data-screen="working-hours"] .wh__day-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The pill carries its own checkbox. Unticked days lead with 22px of padding;
   ticked ones give 10px of that back to the 20px glyph, which is why Monday
   is 112 wide and Sunday 96. */
[data-screen="working-hours"] .wh-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 33px;
  padding: 0 19px 0 22px;
  /* The frame strokes the pill at 0.5px, which Figma resolves as a half-covered
     pixel: #8dafc9 over the #f5f6f9 fill lands on (193,210,225). Chromium snaps
     a 0.5px border up to a full pixel and draws it far heavier, so the weight is
     carried in the alpha instead. The solid line is the fallback. */
  border: 1px solid var(--c-chip-line);
  border-color: color-mix(in srgb, var(--c-chip-line) 50%, transparent);
  border-radius: var(--r-pill);
  background: var(--c-field-bg);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-chip-ink);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

[data-screen="working-hours"] .wh-day:hover { border-color: var(--c-chip-line); }

/* A ticked pill trades 10px of its lead for the glyph and 4px of its tail:
   Figma's seven pills are hand-sized, and the right padding implied by their
   widths is 12-17 on the six ticked ones (mean 15) against 19 on Sunday. Using
   one number for both leaves the row 29px long by the last pill; splitting
   them lands every pill within 3px of the frame. */
[data-screen="working-hours"] .wh-day:has(.wh-day__box:checked) { padding: 0 15px 0 12px; }

/* The real control, kept in the tab order and hit-testable across the pill. */
[data-screen="working-hours"] .wh-day__box {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  opacity: 0;
  cursor: pointer;
}

/* An invisible input cannot show a focus ring, so the pill wears it. */
[data-screen="working-hours"] .wh-day:has(.wh-day__box:focus-visible) {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* 236:6120 — a 20x15.5 brush tick, so the box is 20 wide and the mask keeps
   its own proportions inside it. */
[data-screen="working-hours"] .wh-day__tick { display: none; }

[data-screen="working-hours"] .wh-day__box:checked ~ .wh-day__tick { display: inline-block; }

[data-screen="working-hours"] .wh-day__label { position: relative; }

/* -- save ------------------------------------------------------------------ */

[data-screen="working-hours"] .wh__save { min-width: 118px; }

/* -- narrow widths ---------------------------------------------------------
   The card is the only object on the page, so it simply stops holding its
   631px and the two time fields stack.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  [data-screen="working-hours"] .wh { min-height: 0; }
  [data-screen="working-hours"] .wh__times { grid-template-columns: minmax(0, 1fr); gap: var(--gap-sm); }
  [data-screen="working-hours"] .wh__note { font-size: var(--fs-body); line-height: 22px; }
}