@charset "UTF-8";
/* ===========================================================================
   CyberAware — ca-ui.css
   The !docs/new_ui prototype look, made to work inside the live application.

   HOW A PAGE OPTS IN
     <body class="ca-ui skin-default fixed-layout">   (keep the theme's classes)
     Load order in <head>:
       1. dist/css/[ar_]style.min.css        (Material Pro theme + Bootstrap 4.3.1)
       2. dataTables.bootstrap4.css / any plugin css
       3. assets/css/ca-ui.css               <- LAST, always
     Nothing in this file applies unless <body> carries class="ca-ui"
     (or, for the logged-out pages, class="ca-auth" / class="ca-doc").
     Pages that have not been converted never include this file and are untouched.

   LAYERS (in file order)
     0  Tokens, fonts, opt-in guard
     A  The prototype, ported       - .topbar .sidebar .snav .ni .su .wbody .main .ph .cnt
                                      .card .ch .ct .cic .kpi .tbl .badge .tab .bor .bg .kv ...
     B  Right-to-left               - every rule in A and C works with dir="rtl"
     C  The reskin layer            - Bootstrap 4 + DataTables + Material Pro restyled
                                      WITHOUT touching page markup
     D  Public / auth pages         - .ca-auth (login, 2FA, reset) and .ca-doc (faq, legal, errors)
     E  Motion and print

   TYPE SCALE NOTE
     The prototype sets html{font-size:16px} and sizes everything in rem. We cannot do that
     here: Bootstrap's whole spacing and sizing system is rem-based off the 16px root, so
     moving the root would silently resize every unconverted component on the page. Every
     prototype rem value is therefore ported as PIXELS computed at the prototype's own 13px
     root (.62rem -> 8px, .75rem -> 10px, 1rem -> 13px ...). The look is identical and
     Bootstrap's rem world is left alone.

   COLLISIONS WITH BOOTSTRAP - the short version (details at each rule):
     .card    shared. Bootstrap's box model wins: .card carries NO padding of its own.
              A prototype card (one with no .card-body inside) is padded automatically via
              :has(), and .ca-pad / .ca-flush force padding on or off for certainty.
     .modal   NOT touched. Bootstrap's .modal is the full-screen overlay; the prototype's
              dialog styling is applied to ".modal-bg > .modal" and to ".modal-content" only.
     .btn     shared base geometry. The prototype's Orbitron micro-caps treatment stays on the
              prototype's own CTAs (.btn-red, .bor, .ssave); Bootstrap's .btn-* keep sentence
              case because their labels are long and translated.
     .badge   shared. The prototype's shape applies to both; Bootstrap's .badge-* colours are
              remapped onto the prototype palette.
     .toast   the prototype's toast wins inside body.ca-ui (Bootstrap's .toast component is
              not used anywhere in this application).
     .ps      the prototype's phishing-stat block. Bootstrap's .alert and perfect-scrollbar's
              .ps are both neutralised on it where they would otherwise show through.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. TOKENS
   Namespaced --ca-* so they cannot clash with Bootstrap's own :root variables
   (--red, --green, --orange ... are already defined by Bootstrap and are not ours
   to redefine globally). The prototype's bare names are aliased below, inside
   body.ca-ui only, so markup copied out of a mockup that says
   style="color:var(--red)" still renders correctly.
   --------------------------------------------------------------------------- */
:root{
  --ca-red:#D0202A;
  --ca-red-dark:#a5161e;
  --ca-red-soft:#fef2f2;
  --ca-red-tint:#fee2e2;
  --ca-ink:#0d0d0d;
  --ca-ink2:#1a1a1a;
  --ca-muted:#888;
  --ca-muted2:#6a6a6a;
  --ca-border:#e5e5e5;
  --ca-border2:#f0f0f0;
  --ca-off:#f6f6f6;
  --ca-white:#fff;
  --ca-green:#16a34a;
  --ca-green-tint:#dcfce7;
  --ca-green-soft:#f0fdf4;
  --ca-orange:#ea580c;
  --ca-orange-tint:#ffedd5;
  --ca-blue:#0369a1;
  --ca-blue-tint:#e0f2fe;
  --ca-sidebar-bg:#111;
  --ca-sidebar-w:268px;
  --ca-topbar-h:60px;
  --ca-card-shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.04);
  --ca-radius:4px;
  --ca-radius-sm:3px;

  /* Fonts. The prototype pulls Orbitron and DM Sans from fonts.googleapis.com. Customers of a
     security product routinely block external CDNs, so every stack below ends in faces that
     ship with the operating system, and each one contains at least one Arabic-capable face
     (Segoe UI / Tahoma / Noto Sans Arabic / Dubai) so an Arabic page never falls through to a
     font with no Arabic glyphs. Nothing in this file fetches anything. */
  --ca-font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Arabic","Dubai",Tahoma,sans-serif;
  --ca-font-display:"Orbitron","Bahnschrift","Eurostile",ui-monospace,"Cascadia Mono",Consolas,"Segoe UI","Noto Sans Arabic",Tahoma,monospace;
  /* Numeric readouts. Deliberately NOT the display face: Orbitron draws 0 as a
     slashed box and 3 as a mirrored E, so a KPI tile read as a broken glyph. */
  --ca-font-num:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",Tahoma,sans-serif;
  --ca-font-mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono","Courier New",monospace;
}

/* Prototype variable aliases - scoped to the opted-in page, never global. */
body.ca-ui,body.ca-auth,body.ca-doc{
  --red:var(--ca-red);--red-dark:var(--ca-red-dark);
  --ink:var(--ca-ink);--ink2:var(--ca-ink2);
  --muted:var(--ca-muted);--border:var(--ca-border);--off:var(--ca-off);--white:var(--ca-white);
  --green:var(--ca-green);--orange:var(--ca-orange);
  --sidebar-bg:var(--ca-sidebar-bg);--sidebar-w:var(--ca-sidebar-w);--topbar-h:var(--ca-topbar-h);
  --card-shadow:var(--ca-card-shadow);
}

/* ===========================================================================
   A. THE PROTOTYPE, PORTED
   Every selector is scoped to body.ca-ui. That does three jobs at once:
     - an unconverted page never loads this file and is untouched anyway;
     - a converted page opts in explicitly;
     - specificity (0,2,1) clears the theme's single-class and .skin-* rules
       (.skin-default .topbar is (0,2,0)) without a single !important.
   The prototype's global reset (*{margin:0;padding:0}) is deliberately NOT ported:
   Bootstrap's Reboot owns typography on these pages and zeroing every margin would
   wreck the page content we are keeping. Only shell elements are reset.
   =========================================================================== */

body.ca-ui{
  height:100vh;
  margin:0;
  overflow:hidden;                 /* the shell scrolls inside .main, like the prototype */
  background:var(--ca-off);
  color:var(--ca-ink);
  font-family:var(--ca-font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  text-align:start;                /* the theme sets text-align:left on body */
  -webkit-font-smoothing:antialiased;
}
body.ca-ui a{color:inherit;text-decoration:none}
body.ca-ui a:hover{text-decoration:none}
body.ca-ui button{font-family:inherit;cursor:pointer}
body.ca-ui input,body.ca-ui select,body.ca-ui textarea{font-family:inherit}

/* --- WORKSPACE ------------------------------------------------------------ */
body.ca-ui #ws{display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* Safety net: a page that opted in but has not got the shell wrapper yet (a conversion in
   progress) scrolls normally instead of clipping at the viewport. */
body.ca-ui:not(:has(#ws)){height:auto;overflow:auto}
body.ca-ui #main-wrapper{overflow:visible}   /* if the page kept the theme wrapper around the shell */

/* --- TOPBAR --------------------------------------------------------------- */
body.ca-ui .topbar{
  height:var(--ca-topbar-h);
  background:var(--ca-sidebar-bg);
  display:flex;align-items:center;
  padding-block:0;padding-inline:20px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;z-index:50;gap:12px;
  position:static;                 /* the theme makes .topbar position:fixed */
  box-shadow:none;width:auto;
}
body.ca-ui .tb-logo{display:flex;align-items:center;gap:9px;font-family:var(--ca-font-display);font-size:13px;font-weight:700;letter-spacing:.14em;color:#fff;white-space:nowrap}
body.ca-ui .tb-logo:hover{color:#fff}
body.ca-ui .tb-badge{width:28px;height:28px;background:var(--ca-red);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;color:#fff;flex-shrink:0;clip-path:polygon(0 0,85% 0,100% 15%,100% 100%,15% 100%,0 85%)}
body.ca-ui .tb-sep{width:1px;height:24px;background:rgba(255,255,255,.1);margin-inline:4px;flex-shrink:0}
body.ca-ui .tb-pg{font-size:12.5px;color:rgba(255,255,255,.4);font-family:var(--ca-font-display);letter-spacing:.08em;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ca-ui .tb-sp{flex:1}
body.ca-ui .tb-live{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.1em;color:#4ade80;font-family:var(--ca-font-display);white-space:nowrap}
body.ca-ui .live-dot{width:5px;height:5px;background:#4ade80;border-radius:50%;animation:ca-blink 1.4s infinite}
body.ca-ui .tb-actions{display:flex;align-items:center;gap:10px;margin-inline-start:16px}
body.ca-ui .tb-icon{position:relative;background:none;border:none;color:rgba(255,255,255,.4);font-size:15.5px;padding:4px;transition:color .2s;line-height:1}
body.ca-ui .tb-icon:hover{color:#fff}
body.ca-ui .tb-icon:focus-visible{color:#fff;outline:1px solid rgba(255,255,255,.55);outline-offset:2px}
body.ca-ui .nb{position:absolute;top:0;inset-inline-end:0;width:14px;height:14px;background:var(--ca-red);border-radius:50%;font-size:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ca-font-display);font-weight:700}
body.ca-ui .tb-av{width:28px;height:28px;background:var(--ca-red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0}
body.ca-ui .tb-av:hover{color:#fff;background:var(--ca-red-dark)}
body.ca-ui .tb-flag{font-size:16px;line-height:1}
body.ca-ui .tb-imp{display:flex;align-items:center;gap:6px;background:#3a2a00;color:#fbbf24;border:1px solid #7c5e00;font-size:12px;letter-spacing:.05em;padding:4px 9px;cursor:pointer;white-space:nowrap;text-decoration:none}
body.ca-ui .tb-imp:hover{background:#4a3500;color:#fbbf24}

/* --- BODY / SIDEBAR ------------------------------------------------------- */
body.ca-ui .wbody{display:flex;flex:1;overflow:hidden;min-height:0}
body.ca-ui .sidebar{
  width:var(--ca-sidebar-w);background:#fff;
  border-inline-end:1px solid var(--ca-border);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  flex-shrink:0;transition:width .25s,opacity .25s;
  position:static;height:auto;padding:0;box-shadow:none;   /* resets the theme's .left-sidebar */
}
body.ca-ui .sidebar.collapsed{width:0;opacity:0;overflow:hidden}
body.ca-ui .sidebar::-webkit-scrollbar{width:3px}
body.ca-ui .sidebar::-webkit-scrollbar-thumb{background:#ddd}
body.ca-ui .su{display:flex;flex-direction:column;align-items:center;padding:20px 14px 16px;border-bottom:1px solid var(--ca-border);gap:7px;text-align:center}
body.ca-ui .su-av{width:42px;height:42px;background:var(--ca-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:700;color:#fff;position:relative;flex-shrink:0}
body.ca-ui .su-av::after{content:'';position:absolute;bottom:1px;inset-inline-end:1px;width:9px;height:9px;background:#4ade80;border-radius:50%;border:2px solid #fff;z-index:1}
body.ca-ui .su-name{font-size:15px;font-weight:500;color:var(--ca-ink);word-break:break-word}
body.ca-ui .su-role{font-size:12px;color:var(--ca-muted)}
body.ca-ui .snav{flex:1;padding:6px 0}
body.ca-ui .nsec{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#bbb;padding:12px 16px 5px;display:flex;align-items:center;gap:5px}
body.ca-ui .nsec::before{content:'——';font-size:9px;color:#ddd}
body.ca-ui .ni{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:8px;padding-inline:18px 14px;
  color:var(--ca-muted);cursor:pointer;transition:background .14s,color .14s;
  border-inline-start:2px solid transparent;-webkit-user-select:none;user-select:none;
}
body.ca-ui .ni:hover{background:var(--ca-off);color:var(--ca-ink)}
body.ca-ui .ni.active{color:var(--ca-red);background:var(--ca-red-soft);border-inline-start-color:var(--ca-red);font-weight:500}
body.ca-ui .ni.soon{opacity:.4;pointer-events:none}
body.ca-ui .ni-in{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
body.ca-ui .ni-ic{font-size:13.5px;width:15px;text-align:center;flex-shrink:0}
body.ca-ui .ni-lb{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ca-ui .ni-ch{font-size:10px;color:var(--ca-muted)}
body.ca-ui .ni:hover .ni-ch{color:var(--ca-ink)}
body.ca-ui .soon-tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--ca-off);color:var(--ca-muted2);padding:1px 5px}
body.ca-ui .sfooter{padding:12px 14px;border-top:1px solid var(--ca-border)}
body.ca-ui .lout-btn{width:100%;background:transparent;border:1px solid var(--ca-border);padding:8px;font-size:12.5px;color:var(--ca-muted);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
body.ca-ui .lout-btn:hover{background:var(--ca-red-soft);color:var(--ca-red);border-color:#fca5a5}

/* --- MAIN ----------------------------------------------------------------- */
body.ca-ui .main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--ca-off);display:block}
body.ca-ui .main::-webkit-scrollbar{width:5px}
body.ca-ui .main::-webkit-scrollbar-thumb{background:#ddd}
body.ca-ui .ph{background:#fff;border-bottom:1px solid var(--ca-border);padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
body.ca-ui .ph-title{font-size:22px;font-weight:500;color:var(--ca-ink);margin:0}
body.ca-ui .cnt{padding:20px 24px}
/* A converted page that kept the theme's wrappers must not fight the shell. */
body.ca-ui .cnt > .container-fluid,body.ca-ui .main > .container-fluid{padding:0;margin:0;max-width:none}
body.ca-ui .page-wrapper{background:transparent;margin:0;padding:0;min-height:0}
body.ca-ui .footer{background:transparent;border-top:1px solid var(--ca-border);color:var(--ca-muted);font-size:12.5px;padding:14px 24px;position:static}

/* --- CARDS ---------------------------------------------------------------- */
/* COLLISION: Bootstrap .card owns the box model here (no padding of its own; its children
   .card-header/.card-body/.card-footer supply it). The prototype's padded card is the same
   class with no .card-body inside, so the padding is added by :has() below. In a browser
   without :has() the whole selector is dropped and a prototype card renders flush instead
   of padded - degraded, never broken - and .ca-pad always works. */
body.ca-ui .card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--ca-border);border-radius:var(--ca-radius);
  box-shadow:var(--ca-card-shadow);margin-bottom:16px;padding:0;word-wrap:break-word;
}
body.ca-ui .card:has(> .ch),
body.ca-ui .card:has(> .tbl),
body.ca-ui .card:not(:has(> .card-body)):not(:has(> .card-header)):not(:has(> .card-footer)):not(:has(> .list-group)):not(:has(> .table)):not(:has(> .table-responsive)):not(:has(> img)):not(:has(> .card-img-top)){padding:18px}
body.ca-ui .card.ca-pad{padding:18px}      /* explicit: a prototype card, always padded */
body.ca-ui .card.ca-flush{padding:0}       /* explicit: the content supplies its own padding */
body.ca-ui .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ca-off)}
body.ca-ui .ctr{display:flex;align-items:center;gap:8px;min-width:0}
body.ca-ui .cic{font-size:15.5px;line-height:1;flex-shrink:0}
body.ca-ui .ct{font-size:16px;font-weight:500;color:var(--ca-ink)}

/* --- GRIDS / SPACING HELPERS ---------------------------------------------- */
body.ca-ui .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.ca-ui .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.ca-ui .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body.ca-ui .s2{grid-column:span 2}
body.ca-ui .sa{grid-column:1/-1}
body.ca-ui .mb4{margin-bottom:16px}
body.ca-ui .mt12{margin-top:12px}
body.ca-ui .mb12{margin-bottom:12px}

/* --- PROTOTYPE BUTTONS ---------------------------------------------------- */
/* COLLISION: .btn is Bootstrap's too. The base is left to Bootstrap (restyled in layer C),
   and the prototype's Orbitron micro-caps treatment lives on .btn-red / .bor / .ssave, so
   <button class="btn btn-red"> copied from a mockup looks exactly like the mockup while
   <button class="btn btn-primary"> in existing markup keeps a readable, translatable label.
   The prototype's 8px caps are ported at 9px: the mockups carry invented two-word labels,
   the real pages carry translated sentences. */
body.ca-ui .btn-red{
  background:var(--ca-red);color:#fff;border:1px solid var(--ca-red);
  font-family:var(--ca-font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;border-radius:var(--ca-radius-sm);transition:all .18s;line-height:1.5;
  display:inline-block;text-align:center;
}
body.ca-ui .btn-red:hover,body.ca-ui .btn-red:focus{background:var(--ca-red-dark);border-color:var(--ca-red-dark);color:#fff}
body.ca-ui .bg{
  background:transparent;color:var(--ca-muted);border:1px solid var(--ca-border);
  font-size:12px;font-family:var(--ca-font-sans);padding:5px 12px;cursor:pointer;
  transition:all .18s;border-radius:var(--ca-radius-sm);line-height:1.5;display:inline-block;
}
body.ca-ui .bg:hover{border-color:var(--ca-ink);color:var(--ca-ink);text-decoration:none}
body.ca-ui .bg.d:hover{border-color:var(--ca-red);color:var(--ca-red);background:var(--ca-red-soft)}
body.ca-ui .bor{
  background:transparent;color:var(--ca-red);border:1px solid var(--ca-red);
  font-family:var(--ca-font-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 14px;transition:all .18s;cursor:pointer;border-radius:var(--ca-radius-sm);
  display:inline-block;line-height:1.5;text-align:center;
}
body.ca-ui .bor:hover,body.ca-ui .bor:focus{background:var(--ca-red);color:#fff;text-decoration:none}
body.ca-ui .bor.sm{padding:5px 11px;font-size:12px}
body.ca-ui .bfull{width:100%;text-align:center}
body.ca-ui .ssave{
  background:var(--ca-ink);color:#fff;border:1px solid var(--ca-ink);padding:10px 22px;
  font-family:var(--ca-font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;border-radius:var(--ca-radius-sm);line-height:1.5;
}
body.ca-ui .ssave:hover,body.ca-ui .ssave:focus{background:var(--ca-red);border-color:var(--ca-red);color:#fff}

/* --- KPI ------------------------------------------------------------------ */
body.ca-ui .krow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
body.ca-ui .kpi{background:#fff;border:1px solid var(--ca-border);padding:16px;border-top:3px solid var(--ca-border);box-shadow:var(--ca-card-shadow)}
body.ca-ui .kpi.r{border-top-color:var(--ca-red)}
body.ca-ui .kpi.g{border-top-color:var(--ca-green)}
body.ca-ui .kpi.o{border-top-color:var(--ca-orange)}
body.ca-ui .kpi.k{border-top-color:var(--ca-ink)}
body.ca-ui .kl{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ca-muted);margin-bottom:6px}
body.ca-ui .kv{font-family:var(--ca-font-num);font-size:24px;font-weight:700;line-height:1;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
body.ca-ui .kpi.r .kv{color:var(--ca-red)}
body.ca-ui .kpi.g .kv{color:var(--ca-green)}
body.ca-ui .kpi.o .kv{color:var(--ca-orange)}
body.ca-ui .kpi.k .kv{color:var(--ca-ink)}
body.ca-ui .ks{font-size:12px;color:var(--ca-muted);margin-top:5px}
body.ca-ui .kd{font-size:12px;margin-top:3px}
body.ca-ui .kd.up{color:var(--ca-green)}
body.ca-ui .kd.dn{color:var(--ca-red)}

/* --- CHIPS ---------------------------------------------------------------- */
body.ca-ui .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
body.ca-ui .chip{background:var(--ca-off);padding:9px 14px;display:flex;flex-direction:column;gap:3px;min-width:68px;border-radius:0}
body.ca-ui .cv{font-family:var(--ca-font-num);font-size:18.5px;font-weight:700;line-height:1;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
body.ca-ui .cv.r{color:var(--ca-red)}
body.ca-ui .cv.g{color:var(--ca-green)}
body.ca-ui .cv.o{color:var(--ca-orange)}
body.ca-ui .cv.k{color:var(--ca-ink)}
body.ca-ui .cl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-muted)}

/* --- PROTOTYPE TABLE ------------------------------------------------------ */
body.ca-ui .tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin:0;color:var(--ca-ink)}
body.ca-ui .tbl th{text-align:start;padding:7px 8px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-muted);border-bottom:1px solid var(--ca-border);background:var(--ca-off);vertical-align:middle}
body.ca-ui .tbl td{padding:8px;border-bottom:1px solid var(--ca-border2);color:var(--ca-ink);vertical-align:middle}
body.ca-ui .tbl tr:last-child td{border-bottom:none}
body.ca-ui .tbl tr:hover td{background:#fafafa}

/* --- BADGES --------------------------------------------------------------- */
/* Shared with Bootstrap: the shape below applies to every .badge on the page and the
   .badge-* colour classes are remapped in layer C, so old and new markup match. */
body.ca-ui .badge{display:inline-block;padding:2px 9px;font-size:12px;font-weight:500;letter-spacing:.05em;border-radius:2px;line-height:1.6;vertical-align:baseline;white-space:nowrap}
body.ca-ui .badge.red{background:var(--ca-red-tint);color:var(--ca-red)}
body.ca-ui .badge.green{background:var(--ca-green-tint);color:var(--ca-green)}
body.ca-ui .badge.orange{background:var(--ca-orange-tint);color:var(--ca-orange)}
body.ca-ui .badge.gray{background:var(--ca-off);color:var(--ca-muted)}
body.ca-ui .badge.black{background:var(--ca-ink);color:#fff}

/* --- TABS ----------------------------------------------------------------- */
body.ca-ui .tabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--ca-border);flex-wrap:wrap}
body.ca-ui .tab{padding:7px 14px;font-size:12px;background:transparent;border:none;color:var(--ca-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;cursor:pointer}
body.ca-ui .tab.active{color:var(--ca-red);border-bottom-color:var(--ca-red);font-weight:500}
body.ca-ui .tab:not(.active):hover{color:var(--ca-ink)}

/* --- BAR CHART / RING ----------------------------------------------------- */
body.ca-ui .bwrap{display:flex;align-items:flex-end;gap:5px;height:80px;margin:10px 0}
body.ca-ui .bcol{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end;gap:3px}
body.ca-ui .bar{width:100%;background:var(--ca-red);border-radius:2px 2px 0 0;transition:height .5s;min-height:2px}
body.ca-ui .bar.dim{background:#eee}
body.ca-ui .rwrap{position:relative;width:80px;height:80px;flex-shrink:0}
body.ca-ui .rwrap svg{width:100%;height:100%;transform:rotate(-90deg)}
body.ca-ui .rlabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--ca-font-display)}
body.ca-ui .rv{font-size:15px;font-weight:700;color:var(--ca-ink)}
body.ca-ui .rs{font-size:12px;color:var(--ca-muted);letter-spacing:.1em;text-transform:uppercase}

/* --- LOG ------------------------------------------------------------------ */
body.ca-ui .log{background:#0a0a0a;padding:14px 16px;border-radius:2px;font-family:var(--ca-font-mono);font-size:12px;max-height:160px;overflow-y:auto}
body.ca-ui .log::-webkit-scrollbar{width:3px}
body.ca-ui .log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}
body.ca-ui .ll{color:rgba(255,255,255,.3);padding:2px 0;display:flex;gap:8px}
body.ca-ui .ll.hi{color:#60d0ff}
body.ca-ui .ll .ok{color:#4ade80}
body.ca-ui .ll .warn{color:#fbbf24}
body.ca-ui .ll .err{color:#f87171}
body.ca-ui .lts{color:rgba(255,255,255,.18)}

/* --- PROGRESS (prototype) ------------------------------------------------- */
body.ca-ui .prow{margin-bottom:10px}
body.ca-ui .pmeta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ca-muted);margin-bottom:4px}
body.ca-ui .ptrack{height:6px;background:var(--ca-border);border-radius:3px;overflow:hidden}
body.ca-ui .pfill{height:100%;background:var(--ca-red);border-radius:3px;transition:width .8s ease}
body.ca-ui .pfill.g{background:var(--ca-green)}

/* --- SECTION TITLE / TOGGLE ROWS ------------------------------------------ */
body.ca-ui .stitle{font-size:12.5px;font-weight:500;color:var(--ca-ink);margin:14px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--ca-border);display:flex;align-items:center;gap:8px}
body.ca-ui .trow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f4f4f4}
body.ca-ui .trow:last-child{border-bottom:none}
body.ca-ui .tl2{font-size:13px;color:var(--ca-ink)}
body.ca-ui .ts2{font-size:12px;color:var(--ca-muted)}
body.ca-ui .tog{width:34px;height:18px;background:#ddd;border-radius:9px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
body.ca-ui .tog.on{background:var(--ca-green)}
body.ca-ui .tog::after{content:'';position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;top:3px;inset-inline-start:3px;transition:transform .2s}
body.ca-ui .tog.on::after{transform:translateX(16px)}

/* --- EMAIL ROWS ----------------------------------------------------------- */
body.ca-ui .em{background:var(--ca-off);padding:10px 14px;border-inline-start:3px solid var(--ca-red);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:12.5px}
body.ca-ui .esub{font-weight:500;color:var(--ca-ink);margin-bottom:2px}
body.ca-ui .efrom{color:var(--ca-muted);font-size:12px}
body.ca-ui .etime{font-size:12px;color:var(--ca-muted);white-space:nowrap}

/* --- PROTOTYPE FORMS ------------------------------------------------------ */
body.ca-ui .sf{margin-bottom:14px}
body.ca-ui .sf label{display:block;font-size:12px;font-weight:500;color:var(--ca-ink);margin-bottom:5px}
body.ca-ui .sf input,body.ca-ui .sf select,body.ca-ui .sf textarea{width:100%;border:1.5px solid var(--ca-border);padding:9px 11px;font-size:13.5px;color:var(--ca-ink);outline:none;transition:border-color .2s;background:#fff;border-radius:var(--ca-radius-sm)}
body.ca-ui .sf input:focus,body.ca-ui .sf select:focus,body.ca-ui .sf textarea:focus{border-color:var(--ca-ink)}
body.ca-ui .sf small{display:block;font-size:12px;color:var(--ca-muted);margin-top:4px}
body.ca-ui .frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* --- STATUS GRID / PHISH STATS / QUICK ACTIONS ---------------------------- */
body.ca-ui .sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
body.ca-ui .si{background:var(--ca-off);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
body.ca-ui .sl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ca-muted)}
body.ca-ui .sv{font-size:13px;font-weight:500;color:var(--ca-ink)}
body.ca-ui .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
/* .ps also matches perfect-scrollbar's .ps (harmless - it only forces overflow) and .ps.alert
   would otherwise pick up Bootstrap's .alert box. Both are neutralised here. */
body.ca-ui .ps{background:var(--ca-off);padding:14px;border:none;border-inline-start:3px solid #ddd;display:flex;flex-direction:column;gap:4px;margin:0;border-radius:0;color:inherit}
body.ca-ui .ps.alert{background:var(--ca-off);border:none;border-inline-start:3px solid var(--ca-red);color:inherit;margin:0;border-radius:0;padding:14px}
body.ca-ui .ps.safe{border-inline-start-color:var(--ca-green)}
body.ca-ui .ps.info{border-inline-start-color:var(--ca-ink)}
body.ca-ui .psv{font-family:var(--ca-font-num);font-size:21px;font-weight:700;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
body.ca-ui .ps.alert .psv{color:var(--ca-red)}
body.ca-ui .ps.safe .psv{color:var(--ca-green)}
body.ca-ui .ps.info .psv{color:var(--ca-ink)}
body.ca-ui .psl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ca-muted)}
body.ca-ui .qa{width:100%;background:var(--ca-off);border:1px solid var(--ca-border);padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ca-ink);margin-bottom:7px;cursor:pointer;transition:all .18s;text-align:start}
body.ca-ui .qa:hover{background:var(--ca-red-soft);border-color:var(--ca-red);color:var(--ca-red);text-decoration:none}
body.ca-ui .qai{font-size:16px;flex-shrink:0;line-height:1}
body.ca-ui .qal{font-weight:500}
body.ca-ui .qas{font-size:12px;color:var(--ca-muted)}
body.ca-ui .qa:hover .qas{opacity:.7}

/* --- LEADERBOARD ---------------------------------------------------------- */
body.ca-ui .lbr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--ca-off);font-size:12.5px}
body.ca-ui .lbr:last-child{border-bottom:none}
body.ca-ui .lbl{display:flex;align-items:center;gap:9px;min-width:0;margin:0;font-weight:400}
body.ca-ui .lbm{font-size:15px}
body.ca-ui .lbe{color:var(--ca-ink);overflow:hidden;text-overflow:ellipsis}
body.ca-ui .lbs{font-size:12px;color:var(--ca-muted);font-family:var(--ca-font-num);unicode-bidi:isolate}

/* --- TOAST ---------------------------------------------------------------- */
/* COLLISION: Bootstrap 4.3 ships a .toast component (opacity:0 until .show). It is used
   nowhere in this application and the prototype's toast uses the same two class names, so
   the prototype's definition wins inside body.ca-ui. */
body.ca-ui .toast{
  position:fixed;bottom:20px;inset-inline-end:20px;inset-inline-start:auto;
  background:var(--ca-ink);color:#fff;padding:11px 18px;font-size:12.5px;z-index:9999;
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;
  display:flex;align-items:center;gap:9px;border:none;border-inline-start:3px solid var(--ca-red);
  max-width:min(360px,calc(100vw - 40px));border-radius:0;box-shadow:0 8px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;
}
body.ca-ui .toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
body.ca-ui .ti{color:#4ade80;font-size:15px}

/* --- NOTIFICATION PANEL --------------------------------------------------- */
body.ca-ui .npanel{
  position:fixed;top:var(--ca-topbar-h);inset-inline-end:0;width:300px;max-width:100vw;
  background:#fff;border-inline-start:1px solid var(--ca-border);border-bottom:1px solid var(--ca-border);
  box-shadow:-8px 10px 30px rgba(0,0,0,.1);z-index:100;
  transform:translateX(310px);transition:transform .3s;max-height:480px;overflow-y:auto;
}
body.ca-ui .npanel.open{transform:translateX(0)}
body.ca-ui .nph{padding:12px 16px;border-bottom:1px solid var(--ca-border);display:flex;align-items:center;justify-content:space-between;font-family:var(--ca-font-display);font-size:12px;font-weight:700;letter-spacing:.12em}
body.ca-ui .npc{background:none;border:none;font-size:16px;color:var(--ca-muted);cursor:pointer;line-height:1}
body.ca-ui .npi{padding:12px 16px;border-bottom:1px solid #f4f4f4;display:flex;gap:10px;cursor:pointer;transition:background .15s}
body.ca-ui .npi:hover{background:var(--ca-off)}
body.ca-ui .nd{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px}
body.ca-ui .nd.r{background:var(--ca-red)}
body.ca-ui .nd.g{background:var(--ca-green)}
body.ca-ui .nd.o{background:var(--ca-orange)}
body.ca-ui .nd.k{background:var(--ca-ink)}
body.ca-ui .nt{font-size:12.5px;color:var(--ca-ink);margin-bottom:2px}
body.ca-ui .ntm{font-size:12px;color:var(--ca-muted)}

/* --- PROTOTYPE MODAL ------------------------------------------------------ */
/* COLLISION: Bootstrap's .modal is the full-screen overlay; the prototype's .modal is the
   dialog box. Bare .modal is therefore NEVER styled here - the prototype's dialog rules are
   scoped to ".modal-bg > .modal", which is exactly how the mockups nest it. Converted pages
   should prefer the page's existing Bootstrap modals (restyled to match in layer C). */
body.ca-ui .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:60px 16px;overflow-y:auto}
body.ca-ui .modal-bg.open{display:flex}
body.ca-ui .modal-bg > .modal{position:static;display:block;width:560px;max-width:100%;height:auto;overflow:visible;background:#fff;border-top:3px solid var(--ca-red);box-shadow:0 24px 80px rgba(0,0,0,.4)}
body.ca-ui .modal-h{padding:14px 18px;border-bottom:1px solid var(--ca-border);display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:500}
body.ca-ui .modal-b{padding:18px}
body.ca-ui .modal-f{padding:14px 18px;border-top:1px solid var(--ca-border);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* --- HELPERS -------------------------------------------------------------- */
body.ca-ui .muted{color:var(--ca-muted)}
body.ca-ui .mono{font-family:var(--ca-font-mono);unicode-bidi:isolate}
body.ca-ui .txt-r{color:var(--ca-red)}
body.ca-ui .txt-g{color:var(--ca-green)}
body.ca-ui .txt-o{color:var(--ca-orange)}
body.ca-ui .flex{display:flex}
body.ca-ui .gap8{gap:8px}
body.ca-ui .gap14{gap:14px}
body.ca-ui .aic{align-items:center}
body.ca-ui .jcsb{justify-content:space-between}

/* --- ANIMATIONS ----------------------------------------------------------- */
@keyframes ca-blink{50%{opacity:.25}}
@keyframes ca-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
body.ca-ui .rise{animation:ca-rise .4s ease both}
body.ca-ui .r1{animation:ca-rise .4s .05s ease both}
body.ca-ui .r2{animation:ca-rise .4s .1s ease both}
body.ca-ui .r3{animation:ca-rise .4s .15s ease both}

/* --- RESPONSIVE ----------------------------------------------------------- */
@media(max-width:900px){
  body.ca-ui .krow{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ca-ui .g3,body.ca-ui .g4{grid-template-columns:minmax(0,1fr)}
  body.ca-ui .g2{grid-template-columns:minmax(0,1fr)}
  body.ca-ui .frow{grid-template-columns:minmax(0,1fr)}
  body.ca-ui .s2{grid-column:auto}
  body.ca-ui .cnt{padding:16px}
  body.ca-ui .ph{padding:12px 16px}
}
@media(max-width:767px){
  /* Off-canvas sidebar. ui-shell.php starts it collapsed below this width and closes it again
     when a link is tapped, when the page behind it is tapped, and on Escape - a drawer that
     remembered "open" from a desktop covered the page on every single load. */
  body.ca-ui .sidebar{position:fixed;top:var(--ca-topbar-h);bottom:0;inset-inline-start:0;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.18)}
  body.ca-ui .sidebar.collapsed{box-shadow:none}
  body.ca-ui .krow{grid-template-columns:minmax(0,1fr)}
  body.ca-ui .sgrid,body.ca-ui .pgrid{grid-template-columns:minmax(0,1fr)}

  /* --- the topbar has to fit -------------------------------------------------
     It is a nowrap flex row. The impersonation banner could not shrink, so it pushed the
     actions off the edge and gave every page 176px of horizontal scroll. */
  body.ca-ui .topbar{padding-inline:12px 10px;gap:8px}
  /* The page name is already the heading immediately below it. */
  body.ca-ui .tb-pg{display:none}
  /* Keep the banner - a platform admin must be able to see whose data they are looking at -
     but let it give way. The eye icon and "Viewing as" survive; the org name truncates. */
  /* The wordmark is decoration once you are inside the app; the CA badge still marks the
     link home. Dropping it is what buys the organization name its space back. */
  body.ca-ui .tb-word{display:none}
  body.ca-ui .tb-imp{min-width:0;flex-shrink:1;overflow:hidden}
  /* Not free to collapse to nothing: an eye icon alone says "you are impersonating" but not
     WHO, and that is the one thing this badge exists to answer. */
  body.ca-ui .tb-imp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:64px}
  /* The controls never shrink: they are the only way to reach the menu and the account. */
  body.ca-ui .tb-actions{margin-inline-start:auto;flex-shrink:0;gap:8px}
  body.ca-ui .tb-logo{flex-shrink:0}
}

/* ===========================================================================
   B. RIGHT-TO-LEFT
   Layer A is written with logical properties (padding-inline, inset-inline-end,
   border-inline-start, text-align:start), so most of it mirrors on its own. What
   cannot be expressed logically is fixed here: transforms, clip-paths, directional
   box-shadows, chevron glyphs, and the Orbitron caps treatment, which is wrong for
   Arabic (Orbitron has no Arabic glyphs and letter-spacing pulls joined letters apart).

   The application renders dir="rtl" on <html> (see every page's <html> tag), so the
   selectors below are [dir="rtl"] body.ca-ui ... - specificity (0,3,1), one step above
   layer A's (0,2,1), so no !important is needed anywhere in this layer.
   =========================================================================== */

/* Sidebar on the right, content on the left: .wbody is a flex row and .topbar a flex
   row, so both reverse on their own under dir="rtl". Nothing to do but not get in the way. */

/* --- mirrored shapes and transforms --------------------------------------- */
[dir="rtl"] body.ca-ui .tb-badge{clip-path:polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%)}
[dir="rtl"] body.ca-ui .tog.on::after{transform:translateX(-16px)}
[dir="rtl"] body.ca-ui .npanel{transform:translateX(-310px);box-shadow:8px 10px 30px rgba(0,0,0,.1)}
[dir="rtl"] body.ca-ui .npanel.open{transform:translateX(0)}
/* The ring is mirrored as a whole so the arc grows in the reading direction; the label
   sitting on top of it is mirrored back so its digits stay readable. */
[dir="rtl"] body.ca-ui .rwrap{transform:scaleX(-1)}
[dir="rtl"] body.ca-ui .rlabel{transform:scaleX(-1);direction:ltr}   /* "70" over "/100", not "100/" */

/* --- directional glyphs ---------------------------------------------------- */
/* The nav chevron is a character in the markup, not CSS content, so it is mirrored
   rather than replaced - this works for any glyph the page author picks. */
[dir="rtl"] body.ca-ui .ni-ch{display:inline-block;transform:scaleX(-1)}

/* --- content that is always latin ------------------------------------------ */
/* Log lines are timestamps and machine output: force them LTR inside an RTL page so the
   line does not reorder around the punctuation. */
[dir="rtl"] body.ca-ui .log{direction:ltr;text-align:left}

/* --- arabic typography ------------------------------------------------------ */
/* Everything below carries text that comes from the language files. Orbitron's uppercase
   micro-caps is a latin device: in Arabic it buys nothing (there is no case) and the
   letter-spacing visually breaks the joins, so these get the sans stack, normal spacing
   and a size that stays readable. */
[dir="rtl"] body.ca-ui .btn-red,
[dir="rtl"] body.ca-ui .bor,
[dir="rtl"] body.ca-ui .ssave,
[dir="rtl"] body.ca-ui .nph,
[dir="rtl"] body.ca-ui .tb-pg{font-family:var(--ca-font-sans);letter-spacing:0;text-transform:none;font-size:13px}
[dir="rtl"] body.ca-ui .bor.sm{font-size:12.5px}
[dir="rtl"] body.ca-ui .kl,
[dir="rtl"] body.ca-ui .cl,
[dir="rtl"] body.ca-ui .sl,
[dir="rtl"] body.ca-ui .psl,
[dir="rtl"] body.ca-ui .rs,
[dir="rtl"] body.ca-ui .nsec,
[dir="rtl"] body.ca-ui .soon-tag,
[dir="rtl"] body.ca-ui .badge,
[dir="rtl"] body.ca-ui .tbl th{letter-spacing:0;text-transform:none;font-size:12px}
[dir="rtl"] body.ca-ui .nsec{font-size:12px}
[dir="rtl"] body.ca-ui .badge{font-size:12px}
/* .tb-logo, .tb-live, .kv, .cv, .psv, .lbs and .rv keep Orbitron: they hold the brand
   name and numerals, which are latin in both languages. */

/* ===========================================================================
   C. THE RESKIN LAYER
   Bootstrap 4.3.1, DataTables (bootstrap4 integration) and the Material Pro theme,
   restyled to the prototype WITHOUT touching a single line of page markup.
   Scoped to body.ca-ui: a page opts in, every unconverted page is untouched.
   =========================================================================== */

/* --- BUTTONS --------------------------------------------------------------- */
/* Shape, height and palette are shared with the prototype's own CTAs; the type
   treatment is not. Bootstrap's buttons carry long translated labels ("Download all
   results as CSV"), which 8px Orbitron caps cannot hold, so they stay sentence case
   in the sans stack. The prototype does the same thing internally: .bor is caps,
   .bg is sentence case. */
body.ca-ui .btn{
  font-family:var(--ca-font-sans);font-size:15px;font-weight:500;line-height:1.5;
  padding:6px 14px;border:1px solid transparent;border-radius:var(--ca-radius-sm);
  text-transform:none;letter-spacing:.01em;box-shadow:none;transition:all .18s;
}
body.ca-ui .btn:focus,body.ca-ui .btn.focus{outline:none;box-shadow:0 0 0 2px rgba(208,32,42,.18)}
body.ca-ui .btn:disabled,body.ca-ui .btn.disabled{opacity:.45;box-shadow:none}
/* The prototype's own CTA keeps its caps treatment even though the .btn base above is
   declared later in the file and at the same specificity: <button class="btn btn-red">
   is exactly the mockups' markup, so it has to win. (0,3,1) beats (0,2,1). */
body.ca-ui .btn.btn-red{font-family:var(--ca-font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px}
body.ca-ui .btn-sm{font-size:13.5px;padding:4px 10px;border-radius:var(--ca-radius-sm)}
body.ca-ui .btn-lg{font-size:16px;padding:9px 20px;border-radius:var(--ca-radius-sm)}
body.ca-ui .btn-block{width:100%}
body.ca-ui .btn i,body.ca-ui .btn .fa{font-size:.95em}

body.ca-ui .btn-primary{background:var(--ca-red);border-color:var(--ca-red);color:#fff}
body.ca-ui .btn-primary:hover,body.ca-ui .btn-primary:focus,body.ca-ui .btn-primary:active,
body.ca-ui .btn-primary:not(:disabled):not(.disabled):active{background:var(--ca-red-dark);border-color:var(--ca-red-dark);color:#fff}
body.ca-ui .btn-danger{background:var(--ca-red-dark);border-color:var(--ca-red-dark);color:#fff}
body.ca-ui .btn-danger:hover,body.ca-ui .btn-danger:focus,body.ca-ui .btn-danger:not(:disabled):not(.disabled):active{background:#8d1219;border-color:#8d1219;color:#fff}
body.ca-ui .btn-success{background:var(--ca-green);border-color:var(--ca-green);color:#fff}
body.ca-ui .btn-success:hover,body.ca-ui .btn-success:focus,body.ca-ui .btn-success:not(:disabled):not(.disabled):active{background:#12813b;border-color:#12813b;color:#fff}
body.ca-ui .btn-warning{background:var(--ca-orange);border-color:var(--ca-orange);color:#fff}
body.ca-ui .btn-warning:hover,body.ca-ui .btn-warning:focus,body.ca-ui .btn-warning:not(:disabled):not(.disabled):active{background:#c2470a;border-color:#c2470a;color:#fff}
body.ca-ui .btn-info,body.ca-ui .btn-dark{background:var(--ca-ink2);border-color:var(--ca-ink2);color:#fff}
body.ca-ui .btn-info:hover,body.ca-ui .btn-info:focus,body.ca-ui .btn-info:not(:disabled):not(.disabled):active,
body.ca-ui .btn-dark:hover,body.ca-ui .btn-dark:focus,body.ca-ui .btn-dark:not(:disabled):not(.disabled):active{background:var(--ca-red);border-color:var(--ca-red);color:#fff}
body.ca-ui .btn-secondary,body.ca-ui .btn-light{background:#fff;border-color:var(--ca-border);color:var(--ca-muted)}
body.ca-ui .btn-secondary:hover,body.ca-ui .btn-secondary:focus,body.ca-ui .btn-secondary:not(:disabled):not(.disabled):active,
body.ca-ui .btn-light:hover,body.ca-ui .btn-light:focus,body.ca-ui .btn-light:not(:disabled):not(.disabled):active{background:var(--ca-off);border-color:var(--ca-ink);color:var(--ca-ink)}
body.ca-ui .btn-link{color:var(--ca-red);border-color:transparent;background:transparent;padding-inline:4px}
body.ca-ui .btn-link:hover{color:var(--ca-red-dark);text-decoration:underline}

body.ca-ui .btn-outline-primary,body.ca-ui .btn-outline-danger{background:transparent;border-color:var(--ca-red);color:var(--ca-red)}
body.ca-ui .btn-outline-primary:hover,body.ca-ui .btn-outline-danger:hover,
body.ca-ui .btn-outline-primary:focus,body.ca-ui .btn-outline-danger:focus{background:var(--ca-red);border-color:var(--ca-red);color:#fff}
body.ca-ui .btn-outline-success{background:transparent;border-color:var(--ca-green);color:var(--ca-green)}
body.ca-ui .btn-outline-success:hover,body.ca-ui .btn-outline-success:focus{background:var(--ca-green);border-color:var(--ca-green);color:#fff}
body.ca-ui .btn-outline-warning{background:transparent;border-color:var(--ca-orange);color:var(--ca-orange)}
body.ca-ui .btn-outline-warning:hover,body.ca-ui .btn-outline-warning:focus{background:var(--ca-orange);border-color:var(--ca-orange);color:#fff}
body.ca-ui .btn-outline-secondary,body.ca-ui .btn-outline-info,body.ca-ui .btn-outline-dark,body.ca-ui .btn-outline-light{background:transparent;border-color:var(--ca-border);color:var(--ca-muted)}
body.ca-ui .btn-outline-secondary:hover,body.ca-ui .btn-outline-info:hover,body.ca-ui .btn-outline-dark:hover,body.ca-ui .btn-outline-light:hover,
body.ca-ui .btn-outline-secondary:focus,body.ca-ui .btn-outline-info:focus,body.ca-ui .btn-outline-dark:focus,body.ca-ui .btn-outline-light:focus{background:var(--ca-ink);border-color:var(--ca-ink);color:#fff}
/* theme extras */
body.ca-ui .btn-circle{border-radius:50%;padding:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
body.ca-ui .btn-rounded{border-radius:60px}
body.ca-ui .btn-group > .btn{border-radius:0}
body.ca-ui .btn-group > .btn:first-child{border-start-start-radius:var(--ca-radius-sm);border-end-start-radius:var(--ca-radius-sm)}
body.ca-ui .btn-group > .btn:last-child,body.ca-ui .btn-group > .dropdown-toggle:last-child{border-start-end-radius:var(--ca-radius-sm);border-end-end-radius:var(--ca-radius-sm)}

/* --- FORMS ----------------------------------------------------------------- */
body.ca-ui label,body.ca-ui .col-form-label{font-size:13px;font-weight:500;color:var(--ca-ink);margin-bottom:5px}
body.ca-ui .form-group{margin-bottom:14px}
/* --- small text floor: Bootstrap sizes <small>/.small as 80% of the parent, which
   compounds inside an already-stepped-down card. max() keeps the proportional idiom
   wherever it lands above the floor. */
body.ca-ui small,body.ca-ui .small{font-size:max(12px,80%)}
body.ca-ui .form-text,body.ca-ui .form-group small,body.ca-ui .help-block{font-size:12px;color:var(--ca-muted)}
body.ca-ui .form-control,body.ca-ui .custom-select{
  border:1.5px solid var(--ca-border);border-radius:var(--ca-radius-sm);
  font-size:15px;line-height:1.5;padding:8px 11px;height:auto;
  color:var(--ca-ink);background-color:#fff;box-shadow:none;transition:border-color .2s;
}
body.ca-ui .form-control:focus,body.ca-ui .custom-select:focus{border-color:var(--ca-ink);box-shadow:none;background-color:#fff;color:var(--ca-ink);outline:none}
body.ca-ui .form-control::placeholder{color:#b8b8b8;opacity:1}
body.ca-ui .form-control:disabled,body.ca-ui .form-control[readonly]{background-color:var(--ca-off);color:var(--ca-muted2)}
body.ca-ui select.form-control:not([size]):not([multiple]){height:auto}
body.ca-ui textarea.form-control{min-height:84px;line-height:1.6}
body.ca-ui .form-control-sm,body.ca-ui .custom-select-sm{font-size:13.5px;padding:5px 9px}
body.ca-ui .form-control-lg{font-size:16px;padding:10px 13px}
/* Bootstrap paints the select chevron with a background-image pinned to the right edge. */
body.ca-ui .custom-select{background-position:right .6rem center;padding-inline-end:1.8rem}
body.ca-ui .input-group-text{background:var(--ca-off);border:1.5px solid var(--ca-border);border-radius:var(--ca-radius-sm);font-size:13.5px;color:var(--ca-muted);padding:6px 11px}
body.ca-ui .input-group > .form-control:not(:last-child),body.ca-ui .input-group > .custom-select:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}
body.ca-ui .input-group > .form-control:not(:first-child),body.ca-ui .input-group > .custom-select:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}
body.ca-ui .custom-file-label{border:1.5px solid var(--ca-border);border-radius:var(--ca-radius-sm);font-size:15px;height:auto;padding:8px 11px;box-shadow:none}
body.ca-ui .custom-file-label::after{background:var(--ca-off);color:var(--ca-ink);border-inline-start:1.5px solid var(--ca-border);height:auto;padding:8px 11px;border-radius:0}
body.ca-ui .custom-file{height:auto}
/* One line instead of re-drawing every checkbox and radio. */
body.ca-ui input[type="checkbox"],body.ca-ui input[type="radio"],body.ca-ui input[type="range"],body.ca-ui progress{accent-color:var(--ca-red)}
body.ca-ui .form-check-label,body.ca-ui .custom-control-label{font-size:14px;font-weight:400;color:var(--ca-ink)}
body.ca-ui .custom-control-input:checked ~ .custom-control-label::before{background-color:var(--ca-red);border-color:var(--ca-red)}
body.ca-ui .custom-control-label::before{border-radius:2px;border:1.5px solid var(--ca-border)}
body.ca-ui .custom-switch .custom-control-label::after{border-radius:50%}
/* validation */
body.ca-ui .form-control.is-invalid,body.ca-ui .custom-select.is-invalid,body.ca-ui .was-validated .form-control:invalid{border-color:var(--ca-red);background-image:none;box-shadow:none}
body.ca-ui .form-control.is-valid,body.ca-ui .custom-select.is-valid,body.ca-ui .was-validated .form-control:valid{border-color:var(--ca-green);background-image:none;box-shadow:none}
body.ca-ui .invalid-feedback,body.ca-ui .invalid-tooltip{color:var(--ca-red);font-size:12px;background:transparent;box-shadow:none;padding:2px 0}
body.ca-ui .valid-feedback,body.ca-ui .valid-tooltip{color:var(--ca-green);font-size:12px;background:transparent;box-shadow:none;padding:2px 0}

/* --- CARDS (bootstrap parts) ----------------------------------------------- */
body.ca-ui .card-header{background:#fff;border-bottom:1px solid var(--ca-off);padding:14px 18px 12px;font-size:13.5px;font-weight:500;color:var(--ca-ink);border-radius:0}
body.ca-ui .card-header:first-child{border-start-start-radius:var(--ca-radius);border-start-end-radius:var(--ca-radius)}
body.ca-ui .card-body{padding:18px}
body.ca-ui .card-footer{background:#fff;border-top:1px solid var(--ca-border);padding:12px 18px}
body.ca-ui .card-title{font-size:13.5px;font-weight:500;color:var(--ca-ink);margin-bottom:12px;letter-spacing:0;line-height:1.5}
body.ca-ui .card-subtitle{font-size:12px;color:var(--ca-muted);font-weight:400}
body.ca-ui .card-text{font-size:14px}
body.ca-ui .card > .table,body.ca-ui .card > .table-responsive{margin-bottom:0}

/* --- MODALS ---------------------------------------------------------------- */
/* Bare .modal is Bootstrap's overlay and is deliberately left alone; everything here is
   the dialog itself, so an existing Bootstrap modal keeps working exactly as it does now
   and simply looks like the prototype's. */
body.ca-ui .modal-content{border:none;border-top:3px solid var(--ca-red);border-radius:0;box-shadow:0 24px 80px rgba(0,0,0,.4);background:#fff}
body.ca-ui .modal-header{padding:14px 18px;border-bottom:1px solid var(--ca-border);align-items:center;border-radius:0}
body.ca-ui .modal-title{font-size:15px;font-weight:500;color:var(--ca-ink);line-height:1.5}
body.ca-ui .modal-body{padding:18px;font-size:15px;color:var(--ca-ink)}
body.ca-ui .modal-footer{padding:14px 18px;border-top:1px solid var(--ca-border);gap:8px}
body.ca-ui .modal-footer > *{margin:0}   /* Bootstrap spaces children with .25rem margins; gap does it */
body.ca-ui .modal-backdrop.show{opacity:.45}
body.ca-ui .close{font-size:21px;font-weight:400;color:var(--ca-muted);opacity:1;text-shadow:none;line-height:1}
body.ca-ui .close:hover,body.ca-ui .close:focus{color:var(--ca-red);opacity:1}
/* Bootstrap's own rule is margin:-1rem -1rem -1rem auto, which puts the auto margin on the
   wrong side under dir="rtl". Logical margins put it on the inline-start side in both. */
body.ca-ui .modal-header .close{padding:14px 18px;margin:-14px;margin-inline-start:auto}

/* --- TABLES ---------------------------------------------------------------- */
body.ca-ui .table{font-size:14px;color:var(--ca-ink);margin-bottom:0;width:100%}
body.ca-ui .table thead th{
  text-align:start;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ca-muted);background:var(--ca-off);
  border-top:none;border-bottom:1px solid var(--ca-border);padding:8px 10px;vertical-align:middle;
}
body.ca-ui .table td,body.ca-ui .table th{padding:9px 10px;border-top:1px solid var(--ca-border2);vertical-align:middle}
body.ca-ui .table-hover tbody tr:hover{background-color:#fafafa;color:var(--ca-ink)}
body.ca-ui .table-striped tbody tr:nth-of-type(odd){background-color:#fbfbfb}
body.ca-ui .table-bordered,body.ca-ui .table-bordered td,body.ca-ui .table-bordered th{border-color:var(--ca-border2)}
body.ca-ui .table-bordered thead td,body.ca-ui .table-bordered thead th{border-bottom-width:1px}
body.ca-ui .table .thead-light th,body.ca-ui .table .thead-dark th{background:var(--ca-off);color:var(--ca-muted);border-color:var(--ca-border)}
body.ca-ui .table-responsive{border:none}
body.ca-ui .table-sm td,body.ca-ui .table-sm th{padding:6px 8px}

/* --- DATATABLES ------------------------------------------------------------ */
body.ca-ui .dataTables_wrapper{font-size:13.5px;color:var(--ca-ink)}
/* The bootstrap4 integration wraps the whole table in .container-fluid, which the theme
   pads by 25px - inside a card that reads as a second, wrong inset. */
body.ca-ui .dataTables_wrapper.container-fluid{padding:0}
body.ca-ui div.dataTables_wrapper div.dataTables_length label,
body.ca-ui div.dataTables_wrapper div.dataTables_filter label{font-size:12.5px;font-weight:400;color:var(--ca-muted);text-align:start;margin-bottom:10px}
body.ca-ui div.dataTables_wrapper div.dataTables_length select,
body.ca-ui div.dataTables_wrapper div.dataTables_filter input{
  border:1.5px solid var(--ca-border);border-radius:var(--ca-radius-sm);
  padding:5px 9px;font-size:13.5px;color:var(--ca-ink);background-color:#fff;height:auto;box-shadow:none;
}
body.ca-ui div.dataTables_wrapper div.dataTables_filter input{min-width:170px;margin-inline-start:.5em;margin-left:0}
body.ca-ui div.dataTables_wrapper div.dataTables_length select:focus,
body.ca-ui div.dataTables_wrapper div.dataTables_filter input:focus{border-color:var(--ca-ink);outline:none}
body.ca-ui div.dataTables_wrapper div.dataTables_info{font-size:12px;color:var(--ca-muted);padding-top:14px}
body.ca-ui div.dataTables_wrapper div.dataTables_processing{background:#fff;border:1px solid var(--ca-border);box-shadow:var(--ca-card-shadow);font-size:12.5px;color:var(--ca-ink);border-radius:var(--ca-radius-sm)}
body.ca-ui table.dataTable tbody td{border-top:1px solid var(--ca-border2)}
body.ca-ui table.dataTable.no-footer{border-bottom:1px solid var(--ca-border)}
/* sort arrows: the bootstrap4 integration draws them as ::before / ::after */
body.ca-ui table.dataTable thead .sorting:before,body.ca-ui table.dataTable thead .sorting:after,
body.ca-ui table.dataTable thead .sorting_asc:before,body.ca-ui table.dataTable thead .sorting_asc:after,
body.ca-ui table.dataTable thead .sorting_desc:before,body.ca-ui table.dataTable thead .sorting_desc:after{font-size:11px;opacity:.28;color:var(--ca-ink)}
body.ca-ui table.dataTable thead .sorting_asc:before,body.ca-ui table.dataTable thead .sorting_desc:after{opacity:1;color:var(--ca-red)}
/* pagination (bootstrap4 integration renders .page-item / .page-link) */
body.ca-ui .pagination{margin:2px 0}
body.ca-ui .page-link{border:1px solid var(--ca-border);border-radius:0;color:var(--ca-muted);font-size:12.5px;padding:5px 11px;background:#fff;margin:0;box-shadow:none}
body.ca-ui .page-link:hover{background:var(--ca-off);color:var(--ca-ink);border-color:var(--ca-border)}
body.ca-ui .page-link:focus{box-shadow:none;outline:none}
body.ca-ui .page-item.active .page-link{background:var(--ca-red);border-color:var(--ca-red);color:#fff}
body.ca-ui .page-item.disabled .page-link{color:#ccc;background:#fff;border-color:var(--ca-border)}
body.ca-ui .page-item:first-child .page-link{border-start-start-radius:var(--ca-radius-sm);border-end-start-radius:var(--ca-radius-sm)}
body.ca-ui .page-item:last-child .page-link{border-start-end-radius:var(--ca-radius-sm);border-end-end-radius:var(--ca-radius-sm)}
/* the plain (non-bootstrap) DataTables pager, in case a page loads the stock css */
body.ca-ui .dataTables_paginate .paginate_button{padding:5px 11px;font-size:12.5px;border:1px solid var(--ca-border);background:#fff;color:var(--ca-muted);border-radius:0;margin:0}
body.ca-ui .dataTables_paginate .paginate_button.current{background:var(--ca-red);border-color:var(--ca-red);color:#fff}
body.ca-ui .dataTables_paginate .paginate_button.disabled{color:#ccc}
/* export buttons: the pages also add .btn.btn-primary to these, which now matches */
body.ca-ui .dt-buttons{margin-bottom:10px}
body.ca-ui .dt-button{margin-inline-end:6px;margin-bottom:6px;font-size:13.5px;border-radius:var(--ca-radius-sm)}
body.ca-ui .dt-button:not(.btn){background:#fff;border:1px solid var(--ca-border);color:var(--ca-muted);padding:5px 12px}
body.ca-ui .dt-button:not(.btn):hover{border-color:var(--ca-ink);color:var(--ca-ink)}

/* --- ALERTS ---------------------------------------------------------------- */
body.ca-ui .alert{border:1px solid var(--ca-border);border-inline-start:3px solid var(--ca-muted);border-radius:0;font-size:14px;padding:11px 14px;color:var(--ca-ink);background:var(--ca-off)}
body.ca-ui .alert-success{background:var(--ca-green-soft);border-color:#bbf7d0;border-inline-start-color:var(--ca-green);color:#14532d}
body.ca-ui .alert-danger{background:var(--ca-red-soft);border-color:#fecaca;border-inline-start-color:var(--ca-red);color:#7f1d1d}
body.ca-ui .alert-warning{background:var(--ca-orange-tint);border-color:#fed7aa;border-inline-start-color:var(--ca-orange);color:#7c2d12}
body.ca-ui .alert-info,body.ca-ui .alert-primary{background:var(--ca-blue-tint);border-color:#bae6fd;border-inline-start-color:var(--ca-blue);color:#075985}
body.ca-ui .alert-secondary,body.ca-ui .alert-light,body.ca-ui .alert-dark{background:var(--ca-off);border-color:var(--ca-border);border-inline-start-color:var(--ca-ink);color:var(--ca-ink)}
body.ca-ui .alert-link{color:inherit;font-weight:500;text-decoration:underline}
body.ca-ui .alert-dismissible{padding-inline-end:38px}
/* Bootstrap positions the dismiss button with right:0 - logical so it mirrors. */
body.ca-ui .alert-dismissible .close{position:absolute;top:0;right:auto;inset-inline-end:0;padding:11px 14px;font-size:17px;color:inherit}

/* --- BADGES (bootstrap colours onto the prototype shape) -------------------- */
body.ca-ui .badge-primary,body.ca-ui .badge-danger{background:var(--ca-red-tint);color:var(--ca-red)}
body.ca-ui .badge-success{background:var(--ca-green-tint);color:var(--ca-green)}
body.ca-ui .badge-warning{background:var(--ca-orange-tint);color:var(--ca-orange)}
body.ca-ui .badge-info{background:var(--ca-blue-tint);color:var(--ca-blue)}
body.ca-ui .badge-secondary,body.ca-ui .badge-light{background:var(--ca-off);color:var(--ca-muted)}
body.ca-ui .badge-dark{background:var(--ca-ink);color:#fff}
body.ca-ui .badge-pill{border-radius:20px;padding-inline:9px}
body.ca-ui a.badge:hover{text-decoration:none;filter:brightness(.97)}

/* --- NAV TABS / PILLS ------------------------------------------------------ */
body.ca-ui .nav-tabs{border-bottom:1px solid var(--ca-border)}
body.ca-ui .nav-tabs .nav-link{
  border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;
  color:var(--ca-muted);font-size:13.5px;padding:7px 14px;margin-bottom:-1px;transition:all .15s;
}
body.ca-ui .nav-tabs .nav-link:hover{color:var(--ca-ink);border-color:transparent transparent var(--ca-border)}
body.ca-ui .nav-tabs .nav-link.active,body.ca-ui .nav-tabs .nav-item.show .nav-link{color:var(--ca-red);background:transparent;border-color:transparent transparent var(--ca-red);font-weight:500}
body.ca-ui .nav-pills .nav-link{border-radius:var(--ca-radius-sm);font-size:13.5px;color:var(--ca-muted);padding:6px 12px}
body.ca-ui .nav-pills .nav-link.active{background:var(--ca-red);color:#fff}
body.ca-ui .tab-content{padding-top:14px}

/* --- DROPDOWNS ------------------------------------------------------------- */
body.ca-ui .dropdown-menu{
  border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);
  box-shadow:0 6px 24px rgba(0,0,0,.1);font-size:14px;padding:4px 0;color:var(--ca-ink);
  text-align:start;background:#fff;
}
body.ca-ui .dropdown-item{padding:7px 14px;font-size:14px;color:var(--ca-ink);transition:background .15s,color .15s}
body.ca-ui .dropdown-item:hover,body.ca-ui .dropdown-item:focus{background:var(--ca-off);color:var(--ca-red)}
body.ca-ui .dropdown-item.active,body.ca-ui .dropdown-item:active{background:var(--ca-red);color:#fff}
body.ca-ui .dropdown-item.disabled{color:#c4c4c4}
body.ca-ui .dropdown-divider{border-top-color:var(--ca-border);margin:4px 0}
body.ca-ui .dropdown-header{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ca-muted);padding:8px 14px 4px}
body.ca-ui .dropdown-toggle::after{margin-inline-start:.3em;margin-left:0;vertical-align:.1em}

/* --- PROGRESS -------------------------------------------------------------- */
body.ca-ui .progress{height:6px;background:var(--ca-border);border-radius:3px;box-shadow:none;overflow:hidden;font-size:12px}
body.ca-ui .progress-bar{background-color:var(--ca-red);border-radius:3px;transition:width .8s ease}
body.ca-ui .progress-lg{height:12px}

/* --- BREADCRUMB ------------------------------------------------------------ */
body.ca-ui .breadcrumb{background:transparent;padding:0;margin:0;font-size:12px;color:var(--ca-muted);border-radius:0}
body.ca-ui .breadcrumb-item{color:var(--ca-muted)}
body.ca-ui .breadcrumb-item a{color:var(--ca-muted)}
body.ca-ui .breadcrumb-item a:hover{color:var(--ca-ink)}
body.ca-ui .breadcrumb-item.active{color:var(--ca-red);font-weight:500}
body.ca-ui .breadcrumb-item + .breadcrumb-item{padding-left:0;padding-inline-start:6px}
body.ca-ui .breadcrumb-item + .breadcrumb-item::before{content:"\203A";color:var(--ca-red);padding-right:0;padding-inline-end:6px}

/* --- MISC BOOTSTRAP / THEME CHROME ----------------------------------------- */
body.ca-ui .list-group-item{border-color:var(--ca-border2);font-size:14px;padding:10px 14px}
body.ca-ui .list-group-item.active{background:var(--ca-red);border-color:var(--ca-red)}
body.ca-ui .tooltip-inner{background:var(--ca-ink);font-size:12.5px;border-radius:2px;padding:5px 9px}
body.ca-ui .tooltip .arrow::before{border-top-color:var(--ca-ink);border-bottom-color:var(--ca-ink)}
body.ca-ui .popover{border:1px solid var(--ca-border);border-radius:var(--ca-radius-sm);font-size:14px;box-shadow:var(--ca-card-shadow)}
body.ca-ui .popover-header{background:var(--ca-off);font-size:13.5px;font-weight:500;border-bottom:1px solid var(--ca-border)}
body.ca-ui hr{border-top-color:var(--ca-border)}
body.ca-ui code{color:var(--ca-red);background:var(--ca-off);padding:1px 5px;border-radius:2px;font-family:var(--ca-font-mono);font-size:13px}
body.ca-ui pre{background:var(--ca-off);border:1px solid var(--ca-border);padding:12px;font-size:13px;font-family:var(--ca-font-mono);border-radius:var(--ca-radius-sm)}
body.ca-ui h1,body.ca-ui h2,body.ca-ui h3,body.ca-ui h4,body.ca-ui h5,body.ca-ui h6{color:var(--ca-ink);font-weight:500}
body.ca-ui h1{font-size:24.5px}body.ca-ui h2{font-size:21px}body.ca-ui h3{font-size:18.5px}
body.ca-ui h4{font-size:16px}body.ca-ui h5{font-size:15px}body.ca-ui h6{font-size:13.5px}
/* the theme's page title block, in case a converted page kept it above the new .ph */
body.ca-ui .page-titles{background:#fff;margin:0 0 16px;padding:13px 16px;box-shadow:none;border:1px solid var(--ca-border);border-radius:var(--ca-radius)}
body.ca-ui .page-titles h4,body.ca-ui .text-themecolor{color:var(--ca-ink);font-size:16px;font-weight:500}
/* Bootstrap declares its colour utilities with !important, so an override has to match it.
   That is the only reason !important appears in this file. */
body.ca-ui .text-danger{color:var(--ca-red)!important}
body.ca-ui .text-success{color:var(--ca-green)!important}
body.ca-ui .text-warning{color:var(--ca-orange)!important}
body.ca-ui .text-info,body.ca-ui .text-primary{color:var(--ca-ink)!important}
body.ca-ui .text-muted{color:var(--ca-muted)!important}
body.ca-ui .bg-danger{background-color:var(--ca-red)!important}
body.ca-ui .bg-success{background-color:var(--ca-green)!important}
body.ca-ui .bg-warning{background-color:var(--ca-orange)!important}
body.ca-ui .bg-primary,body.ca-ui .bg-info{background-color:var(--ca-ink)!important}
body.ca-ui .bg-light{background-color:var(--ca-off)!important}

/* --- C.RTL: the reskin layer, mirrored ------------------------------------- */
/* Bootstrap 4.3 and the DataTables integration are LTR-only stylesheets: they use bare
   left/right in exactly the places listed below. */
/* Layer B dropped the caps treatment for arabic; the .btn.btn-red re-assertion above is
   later in the file and equally specific, so it has to be dropped again here. */
[dir="rtl"] body.ca-ui .btn.btn-red{font-family:var(--ca-font-sans);letter-spacing:0;text-transform:none;font-size:13px}
/* Emails, URLs, numbers and codes are typed and read left to right even in an arabic form. */
[dir="rtl"] body.ca-ui input[type="email"],[dir="rtl"] body.ca-ui input[type="url"],
[dir="rtl"] body.ca-ui input[type="tel"],[dir="rtl"] body.ca-ui input[type="number"],
[dir="rtl"] body.ca-ui input[type="password"]{direction:ltr;text-align:start}
[dir="rtl"] body.ca-ui .custom-select{background-position:left .6rem center;padding-inline-end:11px;padding-inline-start:1.8rem}
[dir="rtl"] body.ca-ui .breadcrumb-item + .breadcrumb-item::before{content:"\2039"}
[dir="rtl"] body.ca-ui .dropdown-menu{text-align:start}
[dir="rtl"] body.ca-ui .modal-header .close{margin:-14px;margin-inline-start:auto}
[dir="rtl"] body.ca-ui div.dataTables_wrapper div.dataTables_filter{text-align:left}
[dir="rtl"] body.ca-ui div.dataTables_wrapper div.dataTables_paginate{text-align:left}
[dir="rtl"] body.ca-ui div.dataTables_wrapper div.dataTables_paginate ul.pagination{justify-content:flex-end}
[dir="rtl"] body.ca-ui div.dataTables_wrapper div.dataTables_filter input{margin-inline-start:.5em;margin-left:0;margin-right:0}
/* DataTables reserves 30px on the right of every sortable header for the arrows and pins
   them with right:1em / right:.5em. Both move to the inline-start edge here. */
[dir="rtl"] body.ca-ui table.dataTable thead > tr > th.sorting,
[dir="rtl"] body.ca-ui table.dataTable thead > tr > th.sorting_asc,
[dir="rtl"] body.ca-ui table.dataTable thead > tr > th.sorting_desc{padding-right:10px;padding-left:30px}
[dir="rtl"] body.ca-ui table.dataTable thead .sorting:before,
[dir="rtl"] body.ca-ui table.dataTable thead .sorting_asc:before,
[dir="rtl"] body.ca-ui table.dataTable thead .sorting_desc:before{right:auto;left:1em}
[dir="rtl"] body.ca-ui table.dataTable thead .sorting:after,
[dir="rtl"] body.ca-ui table.dataTable thead .sorting_asc:after,
[dir="rtl"] body.ca-ui table.dataTable thead .sorting_desc:after{right:auto;left:.5em}
/* Bootstrap's input-group corner radii are written in physical corners. */
[dir="rtl"] body.ca-ui .input-group > .form-control:not(:last-child),
[dir="rtl"] body.ca-ui .input-group > .custom-select:not(:last-child){border-radius:var(--ca-radius-sm) 0 0 var(--ca-radius-sm)}
[dir="rtl"] body.ca-ui .input-group > .form-control:not(:first-child),
[dir="rtl"] body.ca-ui .input-group > .custom-select:not(:first-child){border-radius:0 var(--ca-radius-sm) var(--ca-radius-sm) 0}
/* Latin values (names, emails, hashes, URLs, IPs, versions) inside an Arabic table are
   re-ordered around their own punctuation unless each cell resolves its direction from
   its own content: "Sara M." renders as "Sara .M" under a plain RTL paragraph.
   plaintext applies the first-strong rule per cell, so a latin cell reads left to right
   and an arabic cell right to left, each aligned to its own start edge. */
[dir="rtl"] body.ca-ui .table td,[dir="rtl"] body.ca-ui .tbl td{unicode-bidi:plaintext}
[dir="rtl"] body.ca-ui .mono{direction:ltr;unicode-bidi:isolate}

/* ===========================================================================
   D. PUBLIC / AUTH PAGES
   Ported from !docs/new_ui/assets/ca-public.css for the logged-out pages
   (login, 2FA, password reset, register, FAQ, legal, contact, error pages).
   Opt in with <body class="ca-auth"> (centred card on the dark ground) or
   <body class="ca-doc"> (light content page). These pages do NOT need .ca-ui.
   ca-public.css never moves the root font size, so its rem values are kept as
   written - unlike layer A, which had to be converted to px.
   =========================================================================== */

body.ca-auth,body.ca-doc{
  font-family:var(--ca-font-sans);color:var(--ca-ink);font-weight:300;
  min-height:100vh;margin:0;font-size:17px;line-height:1.5;text-align:start;
}
body.ca-auth a,body.ca-doc a{color:var(--ca-red);text-decoration:none}
body.ca-auth a:hover,body.ca-doc a:hover{text-decoration:underline}

/* --- AUTH (centred card on a dark ground) --------------------------------- */
body.ca-auth{background:var(--ca-ink);display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
body.ca-auth .lbg{position:fixed;inset:0;overflow:hidden;z-index:0}
body.ca-auth .lbg::before{content:'CA';position:absolute;inset-inline-end:-60px;bottom:-80px;font-family:var(--ca-font-display);font-size:28rem;font-weight:900;color:rgba(255,255,255,.02);line-height:1}
body.ca-auth .lgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(208,32,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(208,32,42,.05) 1px,transparent 1px);background-size:60px 60px}
body.ca-auth .lbox{position:relative;z-index:2;background:#fff;width:390px;max-width:100%;border-top:3px solid var(--ca-red);padding:44px 40px;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:ca-rise-down .5s ease both}
body.ca-auth .l-logo{display:flex;align-items:center;gap:11px;margin-bottom:30px}
body.ca-auth .l-badge{width:38px;height:38px;background:var(--ca-ink);display:flex;align-items:center;justify-content:center;font-family:var(--ca-font-display);font-size:.68rem;font-weight:900;color:#fff;clip-path:polygon(0 0,85% 0,100% 15%,100% 100%,15% 100%,0 85%);position:relative;flex-shrink:0}
body.ca-auth .l-badge::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:8px;height:8px;background:var(--ca-red)}
body.ca-auth .l-logotext{font-family:var(--ca-font-display);font-size:.95rem;font-weight:700;letter-spacing:.18em;color:var(--ca-ink)}
body.ca-auth .l-title{font-size:1.15rem;font-weight:500;color:var(--ca-ink);margin-bottom:4px}
body.ca-auth .l-sub{font-size:.78rem;color:var(--ca-muted2);margin-bottom:26px}
body.ca-auth .ff,body.ca-doc .ff{margin-bottom:16px}
body.ca-auth .ff label,body.ca-doc .ff label{display:block;font-size:.75rem;font-weight:500;letter-spacing:.05em;color:var(--ca-ink);margin-bottom:6px}
body.ca-auth .ff input,body.ca-auth .ff select,body.ca-doc .ff input,body.ca-doc .ff select,body.ca-doc .ff textarea{width:100%;border:1.5px solid #e0e0e0;padding:10px 12px;font-size:.85rem;color:var(--ca-ink);outline:none;transition:border-color .2s;font-family:inherit;background:#fff;border-radius:var(--ca-radius-sm)}
body.ca-auth .ff input:focus,body.ca-doc .ff input:focus,body.ca-doc .ff textarea:focus{border-color:var(--ca-ink)}
body.ca-auth .lerr{background:var(--ca-red-soft);border:1px solid #fca5a5;color:var(--ca-red);font-size:.75rem;padding:8px 12px;margin-bottom:14px}
body.ca-auth .lok{background:var(--ca-green-soft);border:1px solid #86efac;color:var(--ca-green);font-size:.75rem;padding:8px 12px;margin-bottom:14px}
body.ca-auth .lbtn{width:100%;background:var(--ca-red);color:#fff;border:none;padding:13px;font-family:var(--ca-font-display);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;transition:background .2s;cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
body.ca-auth .lbtn:hover{background:var(--ca-red-dark)}
body.ca-auth .lhint{font-size:.75rem;color:var(--ca-muted2);text-align:center;margin-top:18px}
body.ca-auth .lhint code{background:var(--ca-off);padding:2px 6px;color:var(--ca-ink)}
body.ca-auth .lhint a{font-weight:500}
body.ca-auth .otp{display:flex;gap:8px;justify-content:center;margin:8px 0 18px}
body.ca-auth .otp input{width:44px;height:52px;text-align:center;font-size:1.4rem;font-family:var(--ca-font-display);border:1.5px solid #e0e0e0;outline:none;color:var(--ca-ink)}
body.ca-auth .otp input:focus{border-color:var(--ca-red)}

/* --- DOC (light content pages) --------------------------------------------- */
body.ca-doc{background:#fff}
body.ca-doc .pnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 40px;height:64px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #e0e0e0}
body.ca-doc .pnav .nav-logo{display:flex;align-items:center;gap:11px;font-family:var(--ca-font-display);font-size:.95rem;font-weight:700;letter-spacing:.16em;color:var(--ca-ink)}
body.ca-doc .pnav .logo-badge{width:34px;height:34px;background:var(--ca-ink);display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:900;color:#fff;position:relative;flex-shrink:0;clip-path:polygon(0 0,86% 0,100% 14%,100% 100%,14% 100%,0 86%)}
body.ca-doc .pnav .logo-badge::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:7px;height:7px;background:var(--ca-red)}
body.ca-doc .pnav-links{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
body.ca-doc .pnav-links a{color:var(--ca-muted2);font-size:.82rem}
body.ca-doc .pnav-cta{background:var(--ca-red);color:#fff;padding:8px 18px;font-family:var(--ca-font-display);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
body.ca-doc .pnav-cta:hover{background:var(--ca-red-dark);color:#fff;text-decoration:none}
body.ca-doc .doc-wrap{max-width:860px;margin:0 auto;padding:48px 24px 80px}
body.ca-doc .doc-wrap h1{font-family:var(--ca-font-display);font-size:1.8rem;font-weight:700;margin-bottom:8px;color:var(--ca-ink)}
body.ca-doc .doc-wrap .lead{color:var(--ca-muted2);font-size:1rem;margin-bottom:32px}
body.ca-doc .doc-wrap h2{font-size:1.1rem;font-weight:500;margin:28px 0 10px;color:var(--ca-ink)}
body.ca-doc .doc-wrap p{line-height:1.7;color:#333;margin-bottom:14px;font-size:.92rem}
body.ca-doc .doc-wrap ul{margin:0 0 14px;padding-inline-start:20px;line-height:1.8;color:#333}
body.ca-doc .faq-q{border:1px solid #e0e0e0;margin-bottom:10px}
body.ca-doc .faq-q summary{padding:14px 18px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
body.ca-doc .faq-q summary::-webkit-details-marker{display:none}
body.ca-doc .faq-q summary::after{content:'+';color:var(--ca-red);font-size:1.2rem;line-height:1}
body.ca-doc .faq-q[open] summary::after{content:'\2013'}
body.ca-doc .faq-q .faq-a{padding:0 18px 16px;color:#444;line-height:1.7;font-size:.9rem}
body.ca-doc .card-form{max-width:520px;border:1px solid #e0e0e0;padding:26px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
body.ca-doc .card-form input,body.ca-doc .card-form textarea,body.ca-doc .card-form select{width:100%;border:1.5px solid #e0e0e0;padding:10px 12px;font-size:.88rem;outline:none;font-family:inherit;border-radius:var(--ca-radius-sm)}
body.ca-doc .card-form input:focus,body.ca-doc .card-form textarea:focus{border-color:var(--ca-ink)}
body.ca-doc .pfoot{border-top:1px solid #e0e0e0;padding:24px 40px;text-align:center;color:var(--ca-muted2);font-size:.78rem}

/* --- ERROR ----------------------------------------------------------------- */
body.ca-doc .err-wrap,body.ca-auth .err-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
body.ca-doc .err-code,body.ca-auth .err-code{font-family:var(--ca-font-num);font-size:8rem;font-weight:900;color:var(--ca-red);line-height:1}
body.ca-doc .err-msg,body.ca-auth .err-msg{font-size:1.2rem;margin:8px 0 6px}
body.ca-doc .err-sub,body.ca-auth .err-sub{color:var(--ca-muted2);margin-bottom:24px}
body.ca-doc .err-btn,body.ca-auth .err-btn{background:var(--ca-ink);color:#fff;padding:12px 26px;font-family:var(--ca-font-display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;display:inline-block}
body.ca-doc .err-btn:hover,body.ca-auth .err-btn:hover{background:var(--ca-red);color:#fff;text-decoration:none}

/* --- the few Bootstrap components these pages still use -------------------- */
/* login.php and friends keep their Bootstrap form markup; this is the same reskin as
   layer C, re-pointed at the public body classes (they do not carry .ca-ui). */
body.ca-auth .form-control,body.ca-doc .form-control{border:1.5px solid #e0e0e0;border-radius:var(--ca-radius-sm);font-size:.85rem;padding:10px 12px;height:auto;color:var(--ca-ink);background:#fff;box-shadow:none}
body.ca-auth .form-control:focus,body.ca-doc .form-control:focus{border-color:var(--ca-ink);box-shadow:none}
body.ca-auth .btn,body.ca-doc .btn{font-family:var(--ca-font-sans);font-size:.82rem;font-weight:500;border-radius:var(--ca-radius-sm);border:1px solid transparent;padding:9px 18px;box-shadow:none}
body.ca-auth .btn-primary,body.ca-doc .btn-primary{background:var(--ca-red);border-color:var(--ca-red);color:#fff}
body.ca-auth .btn-primary:hover,body.ca-doc .btn-primary:hover{background:var(--ca-red-dark);border-color:var(--ca-red-dark)}
body.ca-auth .alert,body.ca-doc .alert{border-radius:0;font-size:.78rem;padding:9px 12px;border:1px solid var(--ca-border);border-inline-start:3px solid var(--ca-muted)}
body.ca-auth .alert-danger,body.ca-doc .alert-danger{background:var(--ca-red-soft);border-color:#fca5a5;border-inline-start-color:var(--ca-red);color:var(--ca-red)}
body.ca-auth .alert-success,body.ca-doc .alert-success{background:var(--ca-green-soft);border-color:#86efac;border-inline-start-color:var(--ca-green);color:var(--ca-green)}
body.ca-auth label,body.ca-doc label{font-size:.75rem;font-weight:500;color:var(--ca-ink);margin-bottom:6px}

/* --- public pages, mirrored ------------------------------------------------ */
[dir="rtl"] body.ca-auth .l-badge{clip-path:polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%)}
[dir="rtl"] body.ca-doc .pnav .logo-badge{clip-path:polygon(14% 0,100% 0,100% 86%,86% 100%,0 100%,0 14%)}
[dir="rtl"] body.ca-auth .lbtn{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
[dir="rtl"] body.ca-auth .lbtn,
[dir="rtl"] body.ca-doc .err-btn,
[dir="rtl"] body.ca-doc .pnav-cta{font-family:var(--ca-font-sans);letter-spacing:0;text-transform:none;font-size:.85rem}
[dir="rtl"] body.ca-auth .l-logotext,[dir="rtl"] body.ca-doc .pnav .nav-logo{letter-spacing:.1em}
[dir="rtl"] body.ca-auth .otp{direction:ltr}   /* one-time codes are entered left to right */

@keyframes ca-rise-down{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* ===========================================================================
   E. MOTION AND PRINT
   =========================================================================== */
/* Respect the system setting. !important is required here and only here for motion:
   the blanket switch has to outrank the per-component animation and transition
   declarations above it, which are more specific than any selector this can use. */
@media (prefers-reduced-motion:reduce){
  body.ca-ui *,body.ca-ui *::before,body.ca-ui *::after,
  body.ca-auth *,body.ca-auth *::before,body.ca-auth *::after,
  body.ca-doc *,body.ca-doc *::before,body.ca-doc *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  body.ca-ui .live-dot{animation:none!important;opacity:.9}
}

@media print{
  body.ca-ui{height:auto;overflow:visible;background:#fff}
  body.ca-ui .topbar,body.ca-ui .sidebar,body.ca-ui .npanel,body.ca-ui .toast,
  body.ca-ui .dt-buttons,body.ca-ui .dataTables_filter,body.ca-ui .dataTables_length,
  body.ca-ui .dataTables_paginate{display:none}
  body.ca-ui #ws,body.ca-ui .wbody,body.ca-ui .main{display:block;height:auto;overflow:visible}
  body.ca-ui .ph{position:static;border-bottom:1px solid var(--ca-border)}
  body.ca-ui .card,body.ca-ui .kpi{box-shadow:none;break-inside:avoid}
}


/* ============================================================================================
   SIDEBAR SUBMENUS
   left-sidebar.php nested eight groups behind a click-to-expand control. The flat port made a
   forty-nine item column that had to be scrolled to read, so the nesting is back - with the
   control the prototype never drew.

   A group holding the current page is rendered open by the shell, so the sidebar can never hide
   where the user actually is.
   ============================================================================================ */
body.ca-ui .ng{width:100%;background:none;border:0;text-align:start;cursor:pointer;font:inherit}
body.ca-ui .ng .ni-ch{margin-inline-start:auto;width:14px;height:14px;flex-shrink:0;position:relative;transition:transform .18s ease}
/* A chevron drawn in CSS: no icon font dependency, and it mirrors for free in Arabic. */
body.ca-ui .ng .ni-ch::before{content:'';position:absolute;inset-inline-start:3px;top:4px;width:5px;height:5px;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg)}
body.ca-ui .ng.open .ni-ch{transform:rotate(90deg)}
[dir="rtl"] body.ca-ui .ng .ni-ch{transform:scaleX(-1)}
[dir="rtl"] body.ca-ui .ng.open .ni-ch{transform:scaleX(-1) rotate(90deg)}
body.ca-ui .ng.has-active .ni-lb{color:var(--ca-ink);font-weight:600}

/* Collapsed by height, not display:none, so it can animate and so the items stay measurable. */
body.ca-ui .nsub{overflow:hidden;max-height:0;transition:max-height .22s ease}
body.ca-ui .nsub.open{max-height:60rem}
body.ca-ui .nsub .ni{padding-inline-start:38px;font-size:13.5px}
/* A rail down the group, so a child reads as belonging to the parent above it. */
body.ca-ui .nsub{position:relative}
body.ca-ui .nsub::before{content:'';position:absolute;inset-block:2px;inset-inline-start:26px;width:1px;background:var(--ca-border)}
body.ca-ui .nsub .ni.active{font-weight:600}
@media (prefers-reduced-motion:reduce){
  body.ca-ui .nsub{transition:none}
  body.ca-ui .ng .ni-ch{transition:none}
}

body.ca-ui .snav.no-anim .nsub{transition:none}
body.ca-ui .snav.no-anim .ng .ni-ch{transition:none}


/* ============================================================================================
   F. LIGHT / DARK MODE
   --------------------------------------------------------------------------------------------
   HOW IT IS SWITCHED
     dist/php/ui-shell.php writes data-theme="dark" (or "light") on <html> from the ca_theme
     cookie, BEFORE any stylesheet link, so the first paint is already the right colour. No
     cookie at all means "follow the device", which is the @media block below and needs no JS.

       <html data-theme="dark">      explicit dark, whatever the OS says
       <html data-theme="light">     explicit light, whatever the OS says
       <html>                        no choice made -> prefers-color-scheme decides

   HOW IT IS BUILT, AND WHY IT IS BUILT THAT WAY
     Layers A-C above are token-driven but keep ~156 literal hex values, most of which are a
     light surface (#fff cards, #fafafa hover rows, #ddd rails). Those could not follow a theme.
     Rather than edit 60-odd live rules - and risk moving light mode by a shade while doing it -
     section F.1 RE-DECLARES just the offending property of each one in terms of a new token
     whose LIGHT value is the byte-identical colour it replaces. Light mode therefore computes
     exactly what it computed before this section existed; only the token values change in dark.
     Every re-declaration is later in the file and at the same or higher specificity as the
     original, so it wins without !important.

     That leaves dark mode as what it should be: one block of token values (F.2), stated twice -
     once for the explicit choice, once for the device default.

   THE TWO TOKENS THAT ARE NOT A SIMPLE FLIP
     --ca-red is the brand fill AND, in 25 other rules, a text colour. It cannot be both in dark:
     white on #D0202A is 5.35:1 and #D0202A on a dark card is 2.8:1, and the product of the two
     ratios can never let both clear 4.5:1. So --ca-red stays the fill (the buttons, badges and
     bars keep the exact brand colour) and --ca-red-fg carries red-as-text, flipping to a light
     tint at 7.35:1 in dark. --ca-green / --ca-orange / --ca-blue get the same treatment.

     --ca-ink is the text colour AND the fill of the "solid dark chip" (.ssave, .toast, the
     tooltip). Those are split into an INVERTING pair (--ca-chip-bg/--ca-chip-fg: dark-on-light
     becomes light-on-dark, which is what a primary neutral button should do in a dark theme)
     and an ALWAYS-DARK pair (--ca-solid-bg/--ca-solid-fg) for .bg-primary / .badge-dark, where
     the page - not this file - supplies the text colour and inverting would hide it.

   SCOPE
     Everything stays under body.ca-ui, and explicitly NOT under .ca-doc: two pages
     (view-training-guest.php, mpair.php) carry BOTH classes and force a white ground of their
     own, so theming their tokens would give them dark cards on a white page. .ca-auth and
     .ca-doc are unchanged by this section - the logged-out pages stay exactly as they are.
     RTL is untouched: nothing here is a left/right, a transform or a box-shadow direction.
   ============================================================================================ */

/* ---- F.1a  the new tokens, holding TODAY'S LIGHT VALUES --------------------------------- */
/* Adding names to :root changes nothing on its own; F.1b is what puts them to work. */
:root{
  --ca-surface:#fff;            /* a card / panel / dialog face                              */
  --ca-surface2:#fafafa;        /* a hovered table row                                       */
  --ca-stripe:#fbfbfb;          /* a striped table row                                       */
  --ca-rule:#f4f4f4;            /* a hairline INSIDE a card (.trow, .npi)                    */
  --ca-sidebar-surface:#fff;    /* the left sidebar (the TOPBAR is --ca-sidebar-bg)          */
  --ca-input-bg:#fff;
  --ca-input-border:#e5e5e5;    /* = --ca-border today                                       */
  --ca-placeholder:#b8b8b8;
  --ca-ink-3:#333;              /* long-form prose, a shade softer than --ca-ink ...         */
  --ca-ink-4:#444;              /* ... and two shades ...                                    */
  --ca-ink-5:#555;              /* ... and three. The digit names the light grey it holds.   */
  --ca-faint:#ddd;              /* scrollbar thumb, nav chevron, toggle track, .ps rail      */
  --ca-faint2:#eee;             /* a dimmed bar in the mini chart                            */
  --ca-dim:#aaa;
  --ca-dim2:#bbb;
  --ca-disabled:#ccc;
  --ca-disabled2:#c4c4c4;
  --ca-chip-bg:#0d0d0d;         /* INVERTING solid: this file owns the text colour too       */
  --ca-chip-bg2:#1a1a1a;
  --ca-chip-fg:#fff;
  --ca-solid-bg:#0d0d0d;        /* ALWAYS-DARK solid: the page owns the text colour          */
  --ca-solid-bg2:#1a1a1a;
  --ca-solid-fg:#fff;
  --ca-red-fg:#D0202A;          /* red as TEXT (--ca-red stays the brand FILL)               */
  --ca-red-fg2:#a5161e;         /* ... hovered                                               */
  --ca-red-bd:#fca5a5;
  --ca-green-fg:#16a34a;
  --ca-orange-fg:#ea580c;
  --ca-blue-fg:#0369a1;
  --ca-ok-bd:#bbf7d0;   --ca-ok-fg:#14532d;      /* .alert-success                           */
  --ca-err-bd:#fecaca;  --ca-err-fg:#7f1d1d;     /* .alert-danger                            */
  --ca-warn-bd:#fed7aa; --ca-warn-fg:#7c2d12;    /* .alert-warning                           */
  --ca-info-bd:#bae6fd; --ca-info-fg:#075985;    /* .alert-info / .alert-primary             */
  --ca-swal-fg:#545454;                          /* sweetalert2's own .swal2-content colour  */
  --ca-swal-title:#595959;                       /* ... and its own .swal2-title colour      */
  --ca-icon-moon:inline-block;                   /* the topbar toggle shows the moon in light */
  --ca-icon-sun:none;                            /* ... and the sun in dark                   */
}

/* ---- F.1b  the hardcoded light values, re-declared as tokens ----------------------------- */
/* EVERY value below is the same colour the rule above it already computed. Nothing in light
   mode moves. Each line names the layer-A/C rule it re-states. */

/* shell */
body.ca-ui .sidebar{background:var(--ca-sidebar-surface)}
body.ca-ui .sidebar::-webkit-scrollbar-thumb,
body.ca-ui .main::-webkit-scrollbar-thumb{background:var(--ca-faint)}
body.ca-ui .su-av{background:var(--ca-chip-bg);color:var(--ca-chip-fg)}
body.ca-ui .su-av::after{border-color:var(--ca-sidebar-surface)}
body.ca-ui .nsec{color:var(--ca-dim2)}
body.ca-ui .nsec::before{color:var(--ca-faint)}
body.ca-ui .ni.active{color:var(--ca-red-fg)}
body.ca-ui .soon-tag{color:var(--ca-dim)}
body.ca-ui .lout-btn:hover{color:var(--ca-red-fg);border-color:var(--ca-red-bd)}
body.ca-ui .ph{background:var(--ca-surface)}

/* cards, kpis, chips, prototype table */
body.ca-ui .card,body.ca-ui .kpi{background:var(--ca-surface)}
body.ca-ui .kpi.r .kv,body.ca-ui .cv.r,body.ca-ui .kd.dn,body.ca-ui .txt-r{color:var(--ca-red-fg)}
body.ca-ui .kpi.g .kv,body.ca-ui .cv.g,body.ca-ui .kd.up,body.ca-ui .txt-g{color:var(--ca-green-fg)}
body.ca-ui .kpi.o .kv,body.ca-ui .cv.o,body.ca-ui .txt-o{color:var(--ca-orange-fg)}
body.ca-ui .tbl tr:hover td{background:var(--ca-surface2)}
body.ca-ui .bar.dim{background:var(--ca-faint2)}

/* prototype buttons and badges */
body.ca-ui .bor{color:var(--ca-red-fg);border-color:var(--ca-red-fg)}
body.ca-ui .bg.d:hover{border-color:var(--ca-red-fg);color:var(--ca-red-fg)}
body.ca-ui .ssave{background:var(--ca-chip-bg);color:var(--ca-chip-fg);border-color:var(--ca-chip-bg)}
body.ca-ui .badge.red{color:var(--ca-red-fg)}
body.ca-ui .badge.green{color:var(--ca-green-fg)}
body.ca-ui .badge.orange{color:var(--ca-orange-fg)}
body.ca-ui .badge.black{background:var(--ca-solid-bg);color:var(--ca-solid-fg)}
body.ca-ui .tab.active{color:var(--ca-red-fg);border-bottom-color:var(--ca-red-fg)}
body.ca-ui .qa:hover{border-color:var(--ca-red-fg);color:var(--ca-red-fg)}

/* prototype rows, forms, phish stats */
body.ca-ui .trow{border-bottom-color:var(--ca-rule)}
body.ca-ui .tog{background:var(--ca-faint)}
body.ca-ui .sf input,body.ca-ui .sf select,body.ca-ui .sf textarea{background:var(--ca-input-bg);border-color:var(--ca-input-border)}
body.ca-ui .ps{border-inline-start-color:var(--ca-faint)}
body.ca-ui .ps.alert .psv{color:var(--ca-red-fg)}
body.ca-ui .ps.safe .psv{color:var(--ca-green-fg)}

/* toast, notification panel, prototype modal */
body.ca-ui .toast{background:var(--ca-chip-bg);color:var(--ca-chip-fg)}
body.ca-ui .npanel{background:var(--ca-surface)}
body.ca-ui .npi{border-bottom-color:var(--ca-rule)}
body.ca-ui .modal-bg > .modal{background:var(--ca-surface)}

/* bootstrap: buttons */
body.ca-ui .btn-secondary,body.ca-ui .btn-light{background:var(--ca-surface)}
body.ca-ui .btn-info,body.ca-ui .btn-dark{background:var(--ca-solid-bg2);border-color:var(--ca-solid-bg2);color:var(--ca-solid-fg)}
body.ca-ui .btn-link{color:var(--ca-red-fg)}
body.ca-ui .btn-link:hover{color:var(--ca-red-fg2)}
body.ca-ui .btn-outline-primary,body.ca-ui .btn-outline-danger{border-color:var(--ca-red-fg);color:var(--ca-red-fg)}
body.ca-ui .btn-outline-success{border-color:var(--ca-green-fg);color:var(--ca-green-fg)}
body.ca-ui .btn-outline-warning{border-color:var(--ca-orange-fg);color:var(--ca-orange-fg)}
body.ca-ui .btn-outline-secondary:hover,body.ca-ui .btn-outline-info:hover,body.ca-ui .btn-outline-dark:hover,body.ca-ui .btn-outline-light:hover,
body.ca-ui .btn-outline-secondary:focus,body.ca-ui .btn-outline-info:focus,body.ca-ui .btn-outline-dark:focus,body.ca-ui .btn-outline-light:focus{background:var(--ca-chip-bg);border-color:var(--ca-chip-bg);color:var(--ca-chip-fg)}

/* bootstrap: forms */
body.ca-ui .form-control,body.ca-ui .custom-select{background-color:var(--ca-input-bg);border-color:var(--ca-input-border)}
body.ca-ui .form-control:focus,body.ca-ui .custom-select:focus{background-color:var(--ca-input-bg)}
body.ca-ui .form-control::placeholder{color:var(--ca-placeholder)}
body.ca-ui .input-group-text{border-color:var(--ca-input-border)}
body.ca-ui .custom-file-label{background-color:var(--ca-input-bg);border-color:var(--ca-input-border);color:var(--ca-ink)}
body.ca-ui .custom-file-label::after{border-inline-start-color:var(--ca-input-border)}
/* Bootstrap draws the checkbox/radio box with its own background-color:#fff. */
body.ca-ui .custom-control-label::before{background-color:var(--ca-input-bg)}
body.ca-ui .invalid-feedback,body.ca-ui .invalid-tooltip{color:var(--ca-red-fg)}
body.ca-ui .valid-feedback,body.ca-ui .valid-tooltip{color:var(--ca-green-fg)}

/* bootstrap: cards, modals, tables */
body.ca-ui .card-header,body.ca-ui .card-footer{background:var(--ca-surface)}
body.ca-ui .modal-content{background:var(--ca-surface)}
body.ca-ui .close:hover,body.ca-ui .close:focus{color:var(--ca-red-fg)}
body.ca-ui .table-hover tbody tr:hover{background-color:var(--ca-surface2)}
body.ca-ui .table-striped tbody tr:nth-of-type(odd){background-color:var(--ca-stripe)}

/* datatables chrome */
body.ca-ui div.dataTables_wrapper div.dataTables_length select,
body.ca-ui div.dataTables_wrapper div.dataTables_filter input{background-color:var(--ca-input-bg);border-color:var(--ca-input-border)}
body.ca-ui div.dataTables_wrapper div.dataTables_processing{background:var(--ca-surface)}
body.ca-ui table.dataTable thead .sorting_asc:before,body.ca-ui table.dataTable thead .sorting_desc:after{color:var(--ca-red-fg)}
body.ca-ui .page-link{background:var(--ca-surface)}
body.ca-ui .page-item.disabled .page-link{background:var(--ca-surface);color:var(--ca-disabled)}
body.ca-ui .dataTables_paginate .paginate_button{background:var(--ca-surface)}
body.ca-ui .dataTables_paginate .paginate_button.disabled{color:var(--ca-disabled)}
body.ca-ui .dt-button:not(.btn){background:var(--ca-surface)}

/* bootstrap: alerts */
body.ca-ui .alert-success{border-color:var(--ca-ok-bd);border-inline-start-color:var(--ca-green-fg);color:var(--ca-ok-fg)}
body.ca-ui .alert-danger{border-color:var(--ca-err-bd);border-inline-start-color:var(--ca-red-fg);color:var(--ca-err-fg)}
body.ca-ui .alert-warning{border-color:var(--ca-warn-bd);border-inline-start-color:var(--ca-orange-fg);color:var(--ca-warn-fg)}
body.ca-ui .alert-info,body.ca-ui .alert-primary{border-color:var(--ca-info-bd);border-inline-start-color:var(--ca-blue-fg);color:var(--ca-info-fg)}

/* bootstrap: badges, tabs, dropdowns, lists, tooltips, utilities */
body.ca-ui .badge-primary,body.ca-ui .badge-danger{color:var(--ca-red-fg)}
body.ca-ui .badge-success{color:var(--ca-green-fg)}
body.ca-ui .badge-warning{color:var(--ca-orange-fg)}
body.ca-ui .badge-info{color:var(--ca-blue-fg)}
body.ca-ui .badge-dark{background:var(--ca-solid-bg);color:var(--ca-solid-fg)}
body.ca-ui .nav-tabs .nav-link.active,body.ca-ui .nav-tabs .nav-item.show .nav-link{color:var(--ca-red-fg);border-color:transparent transparent var(--ca-red-fg)}
body.ca-ui .dropdown-menu{background:var(--ca-surface)}
body.ca-ui .dropdown-item:hover,body.ca-ui .dropdown-item:focus{color:var(--ca-red-fg)}
body.ca-ui .dropdown-item.disabled{color:var(--ca-disabled2)}
/* Only a PLAIN item. .list-group-item-warning and friends bring their own pair of colours
   and .active is the brand red, and both are LESS specific than this - hence the two
   exclusions, which are also what keeps light mode exactly as it was. */
body.ca-ui .list-group-item:not(.active):not([class*="list-group-item-"]){background-color:var(--ca-surface)}
body.ca-ui .tooltip-inner{background:var(--ca-chip-bg);color:var(--ca-chip-fg)}
body.ca-ui .tooltip .arrow::before{border-top-color:var(--ca-chip-bg);border-bottom-color:var(--ca-chip-bg)}
body.ca-ui .popover{background-color:var(--ca-surface)}
body.ca-ui .popover-body{color:var(--ca-ink)}
body.ca-ui .breadcrumb-item.active{color:var(--ca-red-fg)}
body.ca-ui .breadcrumb-item + .breadcrumb-item::before{color:var(--ca-red-fg)}
body.ca-ui code{color:var(--ca-red-fg)}
body.ca-ui .page-titles{background:var(--ca-surface)}
body.ca-ui .text-danger{color:var(--ca-red-fg)!important}
body.ca-ui .text-success{color:var(--ca-green-fg)!important}
body.ca-ui .text-warning{color:var(--ca-orange-fg)!important}
body.ca-ui .bg-primary,body.ca-ui .bg-info{background-color:var(--ca-solid-bg)!important}

/* sweetalert2 — four pages confirm destructive actions through it, so it cannot stay white.
   --ca-swal-fg holds sweetalert2's own #545454 so light mode is unchanged. */
body.ca-ui .swal2-popup{background:var(--ca-surface)}
body.ca-ui .swal2-title{color:var(--ca-swal-title)}
body.ca-ui .swal2-content,body.ca-ui .swal2-html-container{color:var(--ca-swal-fg)}
body.ca-ui .swal2-input,body.ca-ui .swal2-textarea,body.ca-ui .swal2-select{background:var(--ca-input-bg);border-color:var(--ca-input-border);color:var(--ca-ink)}

/* ---- F.1c  surfaces declared by the CONVERTED PAGES themselves --------------------------- */
/* A converted page emits its own <style> through ca_ui_head('head' => ...), which lands AFTER
   this file, so an equally specific rule here would lose. body.ca-ui.ca-ui repeats the class to
   buy one step of specificity - still no !important, and the LIGHT value is again identical to
   the one it overrides, so these pages do not move either.
   DELIBERATELY LEFT LIGHT:
     - .mk-preview iframe, the QR boxes on profile/qr-phishing, and the whole .defanged-*
       family on reported-phishing. All three show content as its READER sees it - a training
       material, a code about to be scanned, a phishing email as it landed in the inbox.
       Re-colouring those would misrepresent the thing being previewed.
     - Self-contained chips that carry their own background AND text colour (.verdict-*,
       .priority-badge, .auth-chip, .signal-*). They stay legible on a dark card because both
       halves of the pair travel together. */
body.ca-ui.ca-ui #dash2-tray,
body.ca-ui.ca-ui .dashboard-card,
body.ca-ui.ca-ui .dash-item-tools span,
body.ca-ui.ca-ui .widget-view-buttons .btn,
body.ca-ui.ca-ui .task-column,
body.ca-ui.ca-ui .task-card,
body.ca-ui.ca-ui .task-action-btn,
body.ca-ui.ca-ui .qrm-tile,
body.ca-ui.ca-ui .email-preview,
body.ca-ui.ca-ui .vote-btn,
body.ca-ui.ca-ui .fc button,
body.ca-ui.ca-ui .ca-tk.sel,
body.ca-ui.ca-ui .gd-toc .qa.sub,
body.ca-ui.ca-ui .tm-tabs a.is-on,
body.ca-ui.ca-ui .tm-card,
body.ca-ui.ca-ui .tm-pick button,body.ca-ui.ca-ui .tm-pick a,
body.ca-ui.ca-ui .scenario-card,
body.ca-ui.ca-ui .tone-chip,
body.ca-ui.ca-ui .tpr-sample,
body.ca-ui.ca-ui .mk-block,
body.ca-ui.ca-ui .mk-preview,
body.ca-ui.ca-ui .mk-node-h code,
body.ca-ui.ca-ui .mk-act-t code,
body.ca-ui.ca-ui .vt-brand,
body.ca-ui.ca-ui .ca-faq .card-header{background:var(--ca-surface)}
body.ca-ui.ca-ui .ca-tk:hover{background:var(--ca-surface2)}
body.ca-ui.ca-ui .score-track{background:var(--ca-faint2)}
body.ca-ui.ca-ui .rp-filter select{background:var(--ca-input-bg)}
/* Long-form prose on the guide / policy / FAQ pages, set in three greys a shade softer than
   --ca-ink. The tokens carry those exact greys, so light mode is again untouched. */
body.ca-ui.ca-ui .ca-msg,
body.ca-ui.ca-ui .gd-body,
body.ca-ui.ca-ui .gd-list,
body.ca-ui.ca-ui .ca-doc p,
body.ca-ui.ca-ui .ca-doc li{color:var(--ca-ink-3)}
body.ca-ui.ca-ui .ca-faq .card-body,
body.ca-ui.ca-ui .gd-faq .card-body,
body.ca-ui.ca-ui .gd-tip,
body.ca-ui.ca-ui .gd-bp p{color:var(--ca-ink-4)}
body.ca-ui.ca-ui .signal-explain{color:var(--ca-ink-5)}

/* ---- F.2  THE DARK VALUES ---------------------------------------------------------------- */
/* Stated twice because CSS has no way to say "this selector OR that media query": once for the
   stored choice, once for a user who has never chosen. The two can never both apply - the media
   block excludes data-theme="light" - so there is no order dependency between them.

   CONTRAST, measured (WCAG 2.1 relative luminance), not eyeballed:
     #e6e8eb ink      on #16181c card      14.5:1      body text            (needs 4.5)
     #e6e8eb ink      on #0c0d0f ground    15.8:1      body text            (needs 4.5)
     #9aa1a9 muted    on #16181c card       6.8:1      secondary text       (needs 4.5)
     #9aa1a9 muted    on #0c0d0f ground     7.5:1      table headers        (needs 4.5)
     #ff8086 red-fg   on #16181c card       7.3:1      links, active nav    (needs 4.5)
     #4ade80 green-fg on #16181c card      10.2:1
     #fb923c orange   on #16181c card       7.8:1
     #60a5fa blue-fg  on #16181c card       7.0:1
     #ffffff          on #D0202A brand red  5.4:1      button labels (fill colour unchanged)
     #0f1115 chip-fg  on #e6e8eb chip      14.5:1      .ssave / .toast / tooltip, inverted
     #626870 input bd on #0f1115 field      3.4:1      control boundary     (needs 3.0)
     #86efac ok-fg    on #102516 wash      11.9:1      .alert-success
     #ffb3b7 err-fg   on #2a1114 wash       8.9:1      .alert-danger
     #fdba74 warn-fg  on #3a2110 wash       7.4:1      .alert-warning
     #93c5fd info-fg  on #10273a wash       7.5:1      .alert-info
   The topbar is NOT re-coloured: --ca-sidebar-bg stays #111 in both modes, so the brand chrome
   and its existing rgba(255,255,255,...) text keep exactly the contrast they have today. */

html[data-theme="dark"] body.ca-ui:not(.ca-doc){
  color-scheme:dark;            /* native selects, scrollbars, checkboxes follow the theme */
  --ca-off:#0c0d0f;             /* page ground, and a recessed fill on a card */
  --ca-white:#16181c;
  --ca-surface:#16181c;
  --ca-surface2:#1f2227;
  --ca-stripe:#191c20;
  --ca-rule:#262a30;
  --ca-sidebar-surface:#16181c;
  --ca-input-bg:#0f1115;
  --ca-input-border:#626870;
  --ca-placeholder:#7d848c;
  --ca-ink-3:#dfe2e6;
  --ca-ink-4:#d3d7dc;
  --ca-ink-5:#c6cbd1;
  --ca-border:#2d3138;
  --ca-border2:#23262b;
  --ca-ink:#e6e8eb;
  --ca-ink2:#f3f5f7;
  --ca-muted:#9aa1a9;
  --ca-muted2:#bcc2c8;
  --ca-faint:#3a3f46;
  --ca-faint2:#2a2e34;
  --ca-dim:#7f868e;
  --ca-dim2:#8b9299;
  --ca-disabled:#565c63;
  --ca-disabled2:#5f666e;
  --ca-chip-bg:#e6e8eb;
  --ca-chip-bg2:#d5d9de;
  --ca-chip-fg:#0f1115;
  --ca-solid-bg:#33383f;
  --ca-solid-bg2:#3b4048;
  --ca-solid-fg:#fff;
  --ca-red-soft:#2a1114;
  --ca-red-tint:#3b171b;
  --ca-red-fg:#ff8086;
  --ca-red-fg2:#ffa3a7;
  --ca-red-bd:#7a2328;
  --ca-green-tint:#16351f;
  --ca-green-soft:#102516;
  --ca-green-fg:#4ade80;
  --ca-orange-tint:#3a2110;
  --ca-orange-fg:#fb923c;
  --ca-blue-tint:#10273a;
  --ca-blue-fg:#60a5fa;
  --ca-ok-bd:#1d5132;   --ca-ok-fg:#86efac;
  --ca-err-bd:#7a2328;  --ca-err-fg:#ffb3b7;
  --ca-warn-bd:#7c4a14; --ca-warn-fg:#fdba74;
  --ca-info-bd:#1d4f70; --ca-info-fg:#93c5fd;
  --ca-swal-fg:#e6e8eb; --ca-swal-title:#f3f5f7;
  --ca-card-shadow:0 1px 2px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.4);
  --ca-icon-moon:none;
  --ca-icon-sun:inline-block;
}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) body.ca-ui:not(.ca-doc){
    color-scheme:dark;
    --ca-off:#0c0d0f;
    --ca-white:#16181c;
    --ca-surface:#16181c;
    --ca-surface2:#1f2227;
    --ca-stripe:#191c20;
    --ca-rule:#262a30;
    --ca-sidebar-surface:#16181c;
    --ca-input-bg:#0f1115;
    --ca-input-border:#626870;
    --ca-placeholder:#7d848c;
    --ca-ink-3:#dfe2e6;
    --ca-ink-4:#d3d7dc;
    --ca-ink-5:#c6cbd1;
    --ca-border:#2d3138;
    --ca-border2:#23262b;
    --ca-ink:#e6e8eb;
    --ca-ink2:#f3f5f7;
    --ca-muted:#9aa1a9;
    --ca-muted2:#bcc2c8;
    --ca-faint:#3a3f46;
    --ca-faint2:#2a2e34;
    --ca-dim:#7f868e;
    --ca-dim2:#8b9299;
    --ca-disabled:#565c63;
    --ca-disabled2:#5f666e;
    --ca-chip-bg:#e6e8eb;
    --ca-chip-bg2:#d5d9de;
    --ca-chip-fg:#0f1115;
    --ca-solid-bg:#33383f;
    --ca-solid-bg2:#3b4048;
    --ca-solid-fg:#fff;
    --ca-red-soft:#2a1114;
    --ca-red-tint:#3b171b;
    --ca-red-fg:#ff8086;
    --ca-red-fg2:#ffa3a7;
    --ca-red-bd:#7a2328;
    --ca-green-tint:#16351f;
    --ca-green-soft:#102516;
    --ca-green-fg:#4ade80;
    --ca-orange-tint:#3a2110;
    --ca-orange-fg:#fb923c;
    --ca-blue-tint:#10273a;
    --ca-blue-fg:#60a5fa;
    --ca-ok-bd:#1d5132;   --ca-ok-fg:#86efac;
    --ca-err-bd:#7a2328;  --ca-err-fg:#ffb3b7;
    --ca-warn-bd:#7c4a14; --ca-warn-fg:#fdba74;
    --ca-info-bd:#1d4f70; --ca-info-fg:#93c5fd;
    --ca-swal-fg:#e6e8eb; --ca-swal-title:#f3f5f7;
    --ca-card-shadow:0 1px 2px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.4);
    --ca-icon-moon:none;
    --ca-icon-sun:inline-block;
  }
}

/* ---- F.3  the topbar toggle -------------------------------------------------------------- */
/* Which glyph is showing is a token, not a class, so it follows prefers-color-scheme with no
   JS - a user who has never chosen still sees the icon that matches what is on screen. The
   two screen-reader labels are switched by the same pair, so the button announces the action
   it will perform rather than the state it is in. */
body.ca-ui .ca-th-moon{display:var(--ca-icon-moon)}
body.ca-ui .ca-th-sun{display:var(--ca-icon-sun)}
body.ca-ui .ca-th-lbl-dark{display:var(--ca-icon-moon)}
body.ca-ui .ca-th-lbl-light{display:var(--ca-icon-sun)}
/* .sr-only is position:absolute, so switching display does not disturb the button box. */
body.ca-ui .ca-th-lbl-dark,body.ca-ui .ca-th-lbl-light{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---- F.4  the profile control ------------------------------------------------------------ */
/* Three radio-shaped buttons: Light, Dark, Match my device. Built from .bg (the prototype's
   quiet button) so it inherits the theme it is switching. */
body.ca-ui .ca-thsw{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;border:0}
body.ca-ui .ca-thsw .ca-thsw-b{display:flex;align-items:center;gap:7px;padding:9px 14px;min-width:120px}
body.ca-ui .ca-thsw .ca-thsw-b i{font-size:13px;line-height:1}
body.ca-ui .ca-thsw .ca-thsw-b[aria-pressed="true"]{border-color:var(--ca-red-fg);color:var(--ca-red-fg);background:var(--ca-red-soft);font-weight:500}
body.ca-ui .ca-thsw .ca-thsw-b:focus-visible{outline:2px solid var(--ca-red-fg);outline-offset:2px}
body.ca-ui .ca-thsw-prev{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
body.ca-ui .ca-thsw-prev .si{min-width:150px}