/* ===========================================================================
   Pryvate portals - brand stylesheet
   Served at /static/brand/brand.css

   Colours are sampled, not guessed:
     #0068DF / #0052B1   logo artwork (the app's mark reads #0064D4)
     #34D27E #3B82F8 #9B6BFF #F2A33C #E7B24C   iOS app accents
     #06182E #0F1E3B    iOS app page / card

   Dark mode is a token swap on :root[data-theme="dark"], not the per-element
   class toggling the header used to do.
   =========================================================================== */

:root {
  /* brand */
  --pry-blue:#0068DF; --pry-blue-hover:#0057BC; --pry-blue-deep:#0052B1;
  --pry-blue-100:#D2E6FD; --pry-blue-050:#EAF3FE;
  --pry-gradient:linear-gradient(135deg,#0068DF 0%,#0052B1 100%);

  /* accents, shared with the app */
  --a-call:#34D27E; --a-chat:#3B82F8; --a-meet:#9B6BFF;
  --a-mail:#F2A33C; --a-gold:#E7B24C; --a-bad:#F0563D; --a-mute:#7C8AA5;

  /* surfaces - light */
  --pry-bg:#F5F8FC; --pry-card:#FFFFFF; --pry-ink:#0F1B2D; --pry-muted:#5A6C86;
  --pry-line:#DFE6F0; --pry-input:#FFFFFF; --pry-tint:1F;
  --pry-shell:#EDF2F9;   /* the container the cards sit on: page < shell < card */
  --pry-shadow:0 1px 2px rgba(16,32,58,.06),0 8px 24px -12px rgba(16,32,58,.18);

  --pry-radius:12px; --pry-radius-sm:9px;

  /* shape: one family. Six different radii were in use on a single page
     (6 / 4 / 5 / 25 / 12 / 0px) with pill buttons next to 6px inputs. */
  --r-card:14px; --r-control:10px; --r-pill:999px;

  /* type scale. h4 used to compute to 17.6px against a 16px body - 1.6px of
     hierarchy between a section heading and ordinary text. */
  /* sized to how the markup is actually written: h4 is the de-facto card
     title across these templates, so it carries real weight in the scale */
  --t-page:30px; --t-section:24px; --t-card:21px; --t-sub:19px; --t-meta:12.5px;
  /* VLT-04: ordinary text used to inherit Bootstrap's 14px (and smaller in
     tables) - the review called it out as too small. One token, used below. */
  --t-body:15px;

  /* status surfaces - badges, note bars, stat tiles */
  --s-ok:#0F7B3E;    --s-ok-bg:#E7F4EC;   --s-ok-line:#BFE3CD;
  --s-warn:#D9A441;  --s-warn-bg:#FFFAF0; --s-warn-line:#F3E3BD; --s-warn-ink:#5B4C2A;
  --s-bad:#B42318;   --s-bad-bg:#FEF3F2;  --s-bad-line:#F5C9C4;  --s-bad-ink:#7A271A;
  --s-neutral-bg:#F2F4F7;
  --s-bad-solid:#B42318; --s-bad-solid-hover:#8F1C13;   /* white text sits on these */
  --pry-surface-2:#F6F8FC;   /* stat tiles, hover rows, disabled inputs */
  --pry-faint:#98A2B3;
  --pry-icon-empty:#C3CAD8;

  /* label/message boxes - a clearly different shade from content cards */
  --pry-label-bg:#DEEDFE; --pry-label-line:#AFD2FA; --pry-label-ink:#33517A;

  /* VDK-01 surface ladder, levels 2 and 5 (light theme layers by shadow,
     so nav sits just off the page and modals stay white + elevated) */
  --pry-nav:#FBFCFE; --pry-modal:#FFFFFF;
  --pry-modal-shadow:0 8px 20px rgba(16,32,58,.14),0 24px 60px -12px rgba(16,32,58,.28);
}

:root[data-theme="dark"] {
  /* VDK-02/03/06: measured, stepped surfaces instead of near-identical navies.
     Old ratios: page/card 1.08, card/tile 1.09, input/card 1.01, border 1.97.
     Now: page/card 1.24, card/tile 1.18, input 1.19 below card, border 3.06:1
     (WCAG non-text minimum), muted text 7.0:1. */
  --pry-bg:#050F1F; --pry-card:#14243F; --pry-ink:#E7EDF6; --pry-muted:#9DB0CB;
  --pry-line:#4C6FA8; --pry-input:#081428; --pry-tint:26;
  --pry-shell:#0A1C33;
  --pry-blue-050:#12294A; --pry-blue-100:#1B3A63;
  --pry-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);

  /* status surfaces - deep tints, light ink, so a badge sits *in* the card
     rather than glowing on top of it */
  --s-ok:#4ADE80;    --s-ok-bg:#0E2A1C;   --s-ok-line:#1E5A3C;
  --s-warn:#E7B24C;  --s-warn-bg:#2A2214; --s-warn-line:#574327; --s-warn-ink:#F0D9A8;
  --s-bad:#FF7A66;   --s-bad-bg:#2E1410;  --s-bad-line:#6B2A1E;  --s-bad-ink:#FFC2B5;
  --s-neutral-bg:#16294A;
  --s-bad-solid:#C0392B; --s-bad-solid-hover:#A32C20;
  --pry-surface-2:#1C3054;
  --pry-faint:#8B9AB5;
  --pry-icon-empty:#3A5480;

  /* label/message boxes: 1.58x the card surface - a visible step, where the
     old blue-050 tint sat at ~1.05x and disappeared into the cards */
  --pry-label-bg:#24427A; --pry-label-line:#3E62A6; --pry-label-ink:#BBD3F0;

  /* VDK-01: the full five-level ladder, each step measured:
     1 page #050F1F -> 2 nav #0C1A31 (1.10x) -> 3 card #14243F (1.12x)
     -> 4 tile #1C3054 (1.18x) -> 5 modal #25396A (1.17x) */
  --pry-nav:#0C1A31; --pry-modal:#25396A;
  --pry-modal-shadow:0 8px 24px rgba(0,0,0,.55),0 28px 70px -12px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* --- type scale -----------------------------------------------------------
   brand.css is the last stylesheet in the head on every page, so these win
   ties against Bootstrap's element rules without needing !important.
   -------------------------------------------------------------------------- */
/* VLT-04: readable body text everywhere - paragraphs, table cells, form
   controls and labels all sit on the body token instead of Bootstrap's 14px. */
body { font-size:var(--t-body); }
.table, .table td, .table th { font-size:var(--t-body); }
.form-control, .form-select, label { font-size:var(--t-body); }
p, li, td { line-height:1.5; }

h1 { font-size:var(--t-page);    font-weight:700; letter-spacing:-.02em; line-height:1.2; }
h2 { font-size:var(--t-section); font-weight:700; letter-spacing:-.01em; line-height:1.25; }
h3 { font-size:var(--t-card);    font-weight:600; line-height:1.3; }
h4 { font-size:var(--t-sub);     font-weight:600; line-height:1.35; }
h5 { font-size:15px;             font-weight:600; }
.pry-meta { font-size:var(--t-meta); font-weight:600; letter-spacing:.06em;
            text-transform:uppercase; color:var(--pry-muted); }

/* --- inline field errors --------------------------------------------------
   Validation used to interrupt with a SweetAlert modal you had to dismiss
   before you could go and fix the field it was talking about.
   -------------------------------------------------------------------------- */
.pry-fielderr { color:var(--s-bad); font-size:12.5px; font-weight:600; margin-top:6px;
                display:flex; align-items:flex-start; gap:6px; text-align:left; }
.pry-fielderr::before { content:"!"; flex:none; width:15px; height:15px; border-radius:50%;
                        background:var(--s-bad); color:#fff; font-size:10px; font-weight:700;
                        line-height:15px; text-align:center; }
.pry-invalid, .pry-invalid:focus { border-color:var(--s-bad) !important;
                                   box-shadow:0 0 0 3px var(--s-bad-bg) !important; }

/* --- pending state --------------------------------------------------------
   Nothing indicated work in progress, so a slow POST looked like a dead button
   and invited a second click - which on the payment forms means a second POST.
   -------------------------------------------------------------------------- */
.pry-spinner { display:inline-block; width:14px; height:14px; border-radius:50%;
               border:2px solid currentColor; border-top-color:transparent;
               animation:pry-spin .7s linear infinite; vertical-align:-2px; margin-right:8px; }
@keyframes pry-spin { to { transform:rotate(360deg); } }
.is-pending { opacity:.75; cursor:progress; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .pry-spinner { animation-duration:2.4s; } }

/* --- link cards -----------------------------------------------------------
   A destination as a card rather than a bare icon: the title and a line saying
   what is behind it, so you know before you click.
   -------------------------------------------------------------------------- */
.pry-linkcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
/* A section with only one card - stretching it the width of the pane just
   leaves a lot of empty card. */
.pry-linkcards--single { grid-template-columns:minmax(240px,420px); }
/* A lone tile stretched across the whole row reads as a banner, not a
   tile. Cap it to one tile's natural width - automatically, in every
   section, so no per-section modifier can drift out of step again. */
.pry-linkcards > .pry-linkcard:only-child { max-width:420px; }
/* Four subsections read better two-by-two than three across with a stray. */
.pry-linkcards--quad { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pry-linkcards[hidden] { display:none; }

/* --- choice row -----------------------------------------------------------
   A radio and the field it controls on one line, so it is obvious which input
   the choice applies to. The row you have not picked stays put and greys out
   rather than disappearing, which would leave its radio stranded.
   -------------------------------------------------------------------------- */
/* --- allocation -----------------------------------------------------------
   Was duplicated verbatim in three page-local <style> blocks
   (hostseat_allocation, offnet_allocation, remotewipe_users). Shared here so
   the Allocation panels on the account page get the same thing.
   -------------------------------------------------------------------------- */
.alloc-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
                 gap:12px; margin:4px 0 18px; }
.alloc-stat { background:var(--pry-surface-2); border:1px solid var(--pry-line);
              border-radius:var(--r-control); padding:14px 10px; text-align:center; }
.alloc-stat .n { display:block; font-size:26px; font-weight:700; color:var(--pry-ink); line-height:1.15; }
.alloc-stat .l { display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
                 color:var(--pry-muted); margin-top:4px; }
.alloc-stat.available .n, .alloc-stat.unalloc .n { color:var(--s-ok); }
.alloc-stat.available.none .n, .alloc-stat.unalloc.none .n { color:var(--s-bad); }

.seat-bar { height:8px; border-radius:var(--r-control); background:var(--pry-line);
            overflow:hidden; margin:0 0 18px; }
.seat-bar span { display:block; height:100%; background:var(--pry-blue); }

.badge-seat   { background:var(--s-ok-bg); color:var(--s-ok); border:1px solid var(--s-ok-line); }
.badge-noseat { background:var(--s-neutral-bg); color:var(--pry-muted); border:1px solid var(--pry-line); }
.badge-seat, .badge-noseat { font-size:13.5px; font-weight:700; padding:6px 12px;
                             border-radius:var(--r-pill); display:inline-block; }
.badge-ddi { font-family:ui-monospace,Menlo,monospace; font-size:13px;
             background:var(--pry-blue-050); border:1px solid var(--pry-blue-100);
             border-radius:var(--r-control); padding:3px 8px; display:inline-block; }
.badge-pending { font-size:13px; font-weight:700; background:var(--s-warn-bg); color:var(--s-warn-ink);
                 border:1px solid var(--s-warn-line); border-radius:var(--r-pill);
                 padding:4px 9px; display:inline-block; }

.amt-input { width:110px; text-align:right; font-size:14px; padding:5px 8px;
             border:1px solid var(--pry-line); border-radius:var(--r-control);
             background:var(--pry-input); color:var(--pry-ink); }
.amt-input:disabled { background:var(--pry-surface-2); color:var(--pry-faint); }

.btn-revoke, .btn-reclaim { background:var(--pry-card); border-color:var(--pry-line); color:var(--s-bad); }
.btn-revoke:hover, .btn-reclaim:hover { background:var(--s-bad-bg); color:var(--s-bad); }
.btn-sm-fixed { min-width:92px; font-size:13px; padding:5px 10px; }
/* COM-08: external-calling on/off status pill + the Deassign action (more severe
   than Reclaim, so it reads as a filled danger button rather than an outline). */
.pry-caller { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px;
              border-radius:999px; letter-spacing:.02em; }
.pry-caller--on  { color:var(--s-ok);
                   background:color-mix(in srgb, var(--pry-card) 84%, var(--s-ok));
                   border:1px solid color-mix(in srgb, var(--pry-card) 55%, var(--s-ok)); }
.pry-caller--off { color:var(--pry-muted); background:var(--pry-surface-2); border:1px solid var(--pry-line); }
.btn-deassign { background:var(--s-bad); border-color:var(--s-bad); color:#fff; }
.btn-deassign:hover { background:var(--s-bad); border-color:var(--s-bad); color:#fff; filter:brightness(.93); }

.note-bar { background:var(--s-warn-bg); border:1px solid var(--s-warn-line);
            border-left:3px solid var(--s-warn); border-radius:var(--r-control);
            padding:12px 16px; margin:0 0 16px; font-size:13.5px; color:var(--s-warn-ink); }
.actions-row { text-align:right; margin:18px 0 0; }
.alloc-stat.sent .n { color:var(--s-bad); }

/* remote wipe: destructive, so it is the one place that gets solid red */
.badge-ready { background:var(--s-neutral-bg); color:var(--pry-muted); border:1px solid var(--pry-line); }
.badge-sent  { background:var(--s-bad-bg); color:var(--s-bad); border:1px solid var(--s-bad-line); }
.badge-none  { background:var(--pry-card); color:var(--pry-faint); border:1px dashed var(--pry-line); }
.badge-ready, .badge-sent, .badge-none { font-size:13.5px; font-weight:700; padding:6px 12px;
                                         border-radius:var(--r-pill); display:inline-block; }
.btn-wipe { background:var(--s-bad-solid); border-color:var(--s-bad-solid); color:#fff; }
.btn-wipe:hover { background:var(--s-bad-solid-hover); border-color:var(--s-bad-solid-hover); color:#fff; }
.devlist { list-style:none; margin:4px 0 0; padding:0; font-size:11.5px;
           color:var(--pry-muted); line-height:1.5; text-align:left; }
.devlist li { display:block; }
.devlist li .dot { display:inline-block; width:6px; height:6px; border-radius:50%;
                   background:var(--s-ok); margin-right:6px; vertical-align:middle; }
.devlist li.done .dot { background:var(--s-bad); }
.warn-bar { background:var(--s-bad-bg); border:1px solid var(--s-bad-line);
            border-left:3px solid var(--s-bad); border-radius:var(--r-control);
            padding:12px 16px 12px 44px; margin:0 0 18px; font-size:13.5px; color:var(--s-bad-ink);
            position:relative; }
.warn-bar b { color:var(--s-bad-ink); }
.pry-warnico { width:18px; height:18px; color:var(--s-bad); }
.warn-bar > .pry-warnico { position:absolute; left:16px; top:13px; }
/* inside the SweetAlert device picker */
.swal-dev { text-align:left; margin:6px auto 0; max-width:340px; }
.swal-dev label { display:block; padding:8px 10px; border:1px solid var(--pry-line);
                  border-radius:var(--r-control); margin-bottom:6px; cursor:pointer; }
.swal-dev label:hover { background:var(--pry-surface-2); }
.swal-dev input { margin-right:8px; }
.swal-dev .muted { color:var(--pry-faint); font-size:12px; }
.alloc-runner { font-size:13px; color:var(--pry-muted); margin:14px 0 0; }
.alloc-runner.over { color:var(--s-bad); font-weight:600; }

/* An explanatory box that should read as information rather than as body copy -
   sits under a tile row to say how the pieces relate. */
.pry-notebox { background:var(--pry-blue-050); border:1px solid var(--pry-blue-100);
               border-left:3px solid var(--pry-blue); border-radius:var(--r-control);
               padding:12px 16px 12px 44px; margin:16px 0 4px; font-size:13.5px;
               line-height:1.55; color:var(--pry-ink); position:relative; }
.pry-noteico { width:18px; height:18px; color:var(--pry-blue); }
.pry-notebox > .pry-noteico { position:absolute; left:16px; top:13px; }

.pry-choicerow { display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px;
                 align-items:center; margin-bottom:12px; }
.pry-choice { display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;
              font-weight:600; color:var(--pry-ink); }
.pry-choice input { margin:0; }
.pry-choicefield { min-width:0; }
.pry-choicefield.is-off { opacity:.5; cursor:pointer; }
.pry-choicefield.is-off input { background:var(--pry-surface-2); }
/* intl-tel-input wraps the input in .iti, which is inline-block by default and
   collapses to its content width inside the grid cell */
.pry-choicefield .iti { display:block; width:100%; }
@media (max-width:640px) {
  .pry-choicerow { grid-template-columns:1fr; gap:6px; align-items:start; }
}

/* search results, lifted in under the form that produced them */
.pry-formactions[hidden] { display:none; }
#pry-mobile-change { margin-top:6px; }
/* a read-only field should not look like one you can type in */
.pry-grid2 input[readonly] { background:var(--pry-surface-2); color:var(--pry-muted); }
.pry-searchresults { margin-top:18px; }
.pry-searchresults[hidden] { display:none; }
.pry-searchresults .pry-panel { margin-top:12px; }
@media (max-width:700px){ .pry-linkcards--quad { grid-template-columns:1fr; } }
.pry-linkcard { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
                background:var(--pry-card); border:1px solid var(--pry-line);
                border-radius:var(--r-card); padding:20px; text-decoration:none;
                color:var(--pry-ink); text-align:left;
                transition:transform .18s ease, border-color .18s ease; }
.pry-linkcard > span { width:100%; }   /* else flex-start shrink-wraps the text */
.pry-linkcard:hover { text-decoration:none; color:var(--pry-ink);
                      border-color:var(--pry-blue-100); transform:translateY(-2px); }
.pry-linkcard > .pry-iconbox { width:48px; margin-bottom:12px; }
.pry-linkcard-title { font-size:var(--t-sub); font-weight:600; line-height:1.3; }
.pry-linkcard-sub { font-size:13.5px; color:var(--pry-muted); margin-top:4px; }
.pry-linkcard-go { margin-top:14px; font-size:13px; font-weight:600; color:var(--pry-blue); }
@media (prefers-reduced-motion:reduce){ .pry-linkcard:hover { transform:none; } }

/* --- expandable panels ----------------------------------------------------
   The link cards open their page inline below the row rather than navigating
   away, so you can have several open at once and compare them.
   -------------------------------------------------------------------------- */
/* Uniform section header: an icon-boxed title card + a boxed subtext, shown at
   the top of every section so they all read consistently. */
.pry-sechead { display:flex; align-items:center; gap:14px; padding:14px 18px;
               border:1px solid var(--pry-line); border-radius:var(--r-card);
               background:var(--pry-card); margin:0 0 12px; box-shadow:0 1px 3px rgba(0,0,0,.10); }
.pry-sechead .pry-iconbox { flex:none; width:44px; height:44px; border-radius:12px; }
.pry-sechead-title { flex:none; margin:0; font-size:1.4rem; font-weight:700; line-height:1.2; color:var(--pry-ink); text-align:left; }
/* subtext now sits inline on the same row as the title, muted, with a divider */
.pry-sechead-sub { flex:1 1 auto; min-width:0; margin:0; padding-left:14px;
                   border-left:1px solid var(--pry-line); color:var(--pry-muted);
                   font-size:.92em; line-height:1.4; }
@media (max-width:640px){
  .pry-sechead { flex-wrap:wrap; }
  .pry-sechead-sub { flex:1 1 100%; padding-left:0; border-left:0; }
}
/* Consistent back button for the deeper full-page reports. Always top-left,
   returns to the calling section via ?tab=. */
.pry-backbtn { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
               color:var(--pry-muted); text-decoration:none; padding:6px 12px;
               border:1px solid var(--pry-line); border-radius:var(--r-control,10px);
               background:var(--pry-card); transition:background .12s ease,color .12s ease,border-color .12s ease; }
.pry-backbtn:hover, .pry-backbtn:focus { color:var(--pry-blue); border-color:var(--pry-blue-100,#d6e6ff);
               background:var(--pry-blue-050,#eef5ff); text-decoration:none; }
.pry-backbtn span { font-size:1.1em; line-height:1; }
.pry-panelbar { display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px; }
.pry-panelbar[hidden] { display:none; }   /* display:flex beats the attribute */
.pry-panel { background:var(--pry-card); border:1px solid var(--pry-line);
             border-radius:var(--r-card); padding:20px; margin-top:14px; }
.pry-panel[hidden] { display:none; }
/* Billing payment routes: each panel washed + edged in its own accent so the
   distinct payment products read as separate cards. */
.pry-payroute { border-left-width:4px; border-left-style:solid; }
.pry-payroute--gold   { border-left-color:#E7B24C; background:var(--pry-card); background:color-mix(in srgb, var(--pry-card) 90%, #E7B24C); }
.pry-payroute--purple { border-left-color:#9B6BFF; background:var(--pry-card); background:color-mix(in srgb, var(--pry-card) 90%, #9B6BFF); }
.pry-payroute--green  { border-left-color:#34D27E; background:var(--pry-card); background:color-mix(in srgb, var(--pry-card) 90%, #34D27E); }
.pry-payroute--orange { border-left-color:#F2A33C; background:var(--pry-card); background:color-mix(in srgb, var(--pry-card) 90%, #F2A33C); }
.pry-panel .pry-cardhead { margin-bottom:12px; }
.pry-panel-loading { display:flex; align-items:center; gap:10px; color:var(--pry-muted);
                     padding:26px 0; justify-content:center; }
.pry-linkcard.is-open { border-color:var(--pry-blue); }
.pry-linkcard.is-open .pry-linkcard-go { color:var(--pry-blue); }

/* A card for something not bought yet. Still a card and still clickable - it
   takes you to the Payment tab rather than sitting there inert, which is what
   the old greyed-out tiles did. */
.pry-linkcard.is-locked { background:var(--pry-surface-2); }
.pry-linkcard.is-locked .pry-linkcard-title { color:var(--pry-muted); }
/* `.pry-linkcard > span` sets width:100% and would stretch the pill full width;
   this selector carries one more class so it wins on specificity, not order. */
.pry-linkcard > .pry-linkcard-note {
    width:auto; margin-top:10px; padding:2px 9px;
    border:1px solid var(--pry-line); border-radius:var(--r-pill);
    background:var(--s-neutral-bg); color:var(--pry-faint);
    font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

/* --- page shell + side navigation -----------------------------------------
   The outer container and the cards inside it were both var(--pry-card), so
   there was no layering - everything read as one flat slab. The shell now sits
   between the page and the cards.
   -------------------------------------------------------------------------- */
.pry-container { max-width:1280px; }
/* login_m.css declares `.card { max-width:900px; padding:30px }` and is loaded on
   twelve corp pages, so it caps every card - including this shell. Same leak as
   the .btn-primary width. Opting out here; the sheet needs scoping properly. */
.pry-shell, .pry-shell .card { max-width:none; }
/* VLT-01/03: the shell used to be a pale-grey card wrapping the white panels -
   a whole layer of framing and one level of card-in-card nesting. It is now an
   invisible layout container: panels and tiles sit directly on the page, and
   the hierarchy is simply page -> panel -> tile in both themes. */
.pry-shell { background:transparent !important; border:none !important; box-shadow:none !important; }
.pry-shell > .card-body { padding:0; }

/* nav down the left, content to the right. The nav is a slim icon rail (64px);
   on hover the whole nav COLUMN widens and the content column shrinks to match,
   so the expanded menu pushes the content rather than sitting over it. */
.pry-layout { display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; align-items:start;
              transition:grid-template-columns .18s ease; }
.pry-layout-main { min-width:0; }
/* widen the nav track while the rail is hovered (:has on the grid parent) */
.pry-layout:has(.pry-sidenav:hover) { grid-template-columns:212px minmax(0,1fr); }

/* VDK-01 level 2: the navigation sits on its own surface, distinct from both
   the page behind it and the content cards beside it */
.pry-sidenav { display:flex !important; flex-direction:column; gap:4px; position:sticky; top:78px;
               background:var(--pry-nav); border:1px solid var(--pry-line);
               border-radius:var(--r-card); padding:8px;
               width:100%; overflow:hidden; }
.pry-sidenav .nav-item { width:100%; }
.pry-sidenav .nav-link { display:flex; align-items:center; gap:10px; width:196px;
                         padding:10px 12px; border-radius:var(--r-control);
                         font-weight:600; font-size:14px; color:var(--pry-muted);
                         white-space:nowrap; overflow:hidden; }
.pry-sidenav .nav-link:hover { background:var(--pry-blue-050); color:var(--pry-blue); }
.pry-sidenav .nav-link .pry-ico { flex:none; opacity:.9; background:transparent; }
.pry-sidenav .nav-link.active { background:var(--pry-blue) !important; color:#fff !important; }
.pry-sidenav .nav-link.active .pry-ico { opacity:1; color:#fff !important; }
/* labels: hidden on the rail, revealed when the nav column is expanded */
.pry-sidenav .nav-link span { opacity:0; transition:opacity .12s ease; }
.pry-sidenav:hover .nav-link span { opacity:1; }

@media (max-width:900px){
  .pry-layout { grid-template-columns:1fr; gap:14px; }
  /* on small screens the rail becomes a normal wrapping row with labels shown */
  .pry-sidenav { flex-direction:row; flex-wrap:wrap; position:static;
                 width:auto; overflow:visible; }
  .pry-sidenav .nav-link { width:auto; }
  .pry-sidenav .nav-link span { opacity:1; }
}

/* --- page + section titles -------------------------------------------------
   These were <center><span id="access_your"><b>...</b></span></center> - a bold
   span doing a heading's job, repeated with the same id up to nine times on one
   page. No template had an h1 at all, so pages began at h4 and screen readers
   got no document outline.
   -------------------------------------------------------------------------- */
/* page header: title + subtitle on the left, primary action on the right */
.pry-pagehead { margin:4px 0 20px; display:flex; align-items:flex-start;
                justify-content:space-between; gap:20px; flex-wrap:wrap; }
.pry-pagehead > div { min-width:0; }
/* card header: section title on the left, its action on the right */
.pry-cardhead { display:flex; align-items:center; justify-content:space-between;
                gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.pry-cardhead .pry-sectiontitle { margin:0; text-align:left; display:flex; align-items:center; gap:10px; }
/* section icon sits top-left of each detail panel's title, echoing its tile */
.pry-cardhead .pry-sectiontitle .pry-iconbox { flex:none; }
/* table row actions: labelled, with the destructive one set apart. They used to
   be three bare icons in a row, distinguished only by colour - one of which
   triggers a remote wipe. */
/* login_m.css declares `.btn-primary { width:100% }` and is loaded on twelve
   corp pages, so every primary button in the portal stretches. That is why the
   payment buttons carry inline width:40% / width:30% overrides. Scoping it
   properly means touching all twelve pages, so for now the layout containers
   opt out - the rule itself is worth retiring separately. */
.pry-pagehead .btn, .pry-cardhead .btn,
.pry-formactions .btn, .pry-actions .btn,
.actions-row .btn { width:auto; }

/* explains why a control is unavailable, rather than leaving it inert and silent */
.pry-muted-note { font-size:14px; color:var(--pry-muted); margin:0 0 16px; max-width:70ch; }
.pry-gatenote { font-size:13px; color:var(--s-warn-ink); background:var(--s-warn-bg);
                border:1px solid var(--s-warn-line); border-left:3px solid var(--s-warn);
                border-radius:var(--r-control); padding:10px 12px; margin:0 0 14px; text-align:left; }
select[disabled], .btn[disabled] { opacity:.55; cursor:not-allowed; }

.pry-actions { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
/* VLT-06: row actions read as controls, not scattered links */
.pry-act { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
           padding:5px 10px; border-radius:var(--r-control); text-decoration:none;
           color:var(--pry-muted); border:1px solid transparent; white-space:nowrap; }
.pry-act { cursor:pointer; }
.pry-act:hover { background:var(--pry-blue-050); color:var(--pry-blue); text-decoration:none;
                 border-color:var(--pry-blue-100); }
.pry-act--danger { color:var(--s-bad); }
.pry-act--danger:hover { background:var(--s-bad-bg); color:var(--s-bad); border-color:var(--s-bad-line); }
.pry-act-sep { display:inline-block; width:1px; height:18px; background:var(--pry-line); margin:0 6px; }

/* Icon-only table actions: evenly spread, tappable, hover-revealed */
.pry-iconacts { display:flex; align-items:center; justify-content:center; gap:14px; }
.pry-iconact { display:inline-flex; align-items:center; justify-content:center;
               width:34px; height:34px; border-radius:var(--r-control);
               color:var(--pry-blue); border:1px solid transparent; cursor:pointer;
               text-decoration:none; font-size:14px; }
.pry-iconact:hover { background:var(--pry-blue-050); border-color:var(--pry-blue-100);
                     color:var(--pry-blue); text-decoration:none; }
.pry-iconact--danger { color:var(--s-bad); }
.pry-iconact--danger:hover { background:var(--s-bad-bg); border-color:var(--s-bad-line); color:var(--s-bad); }

/* --- tables (VLT-06) -------------------------------------------------------
   More breathing room: taller cells, middle alignment, quiet uppercase
   headers, and a soft hover so the row under the pointer is unmistakable.
   -------------------------------------------------------------------------- */
.table > :not(caption) > * > * { padding:13px 14px; vertical-align:middle; }
.table > tbody > tr > td, .table > thead > tr > th { padding:13px 14px; vertical-align:middle; }
.table thead th { font-size:12.5px; font-weight:600; letter-spacing:.05em;
                  text-transform:uppercase; color:var(--pry-muted); }
/* centred header rows: DataTables' stylesheet loads after brand.css on several
   pages and re-aligns headers, so this one needs the hammer */
.table thead th, .table thead td,
table.dataTable thead th, table.dataTable thead td,
table.dataTable > thead .sorting, table.dataTable > thead .sorting_asc,
table.dataTable > thead .sorting_desc { text-align:center !important; }
.table-hover > tbody > tr:hover > * { background-color:var(--pry-surface-2); }

/* mobile: wide tables scroll sideways inside .table-responsive - say so,
   because an invisible scroll area reads as a cut-off table */
.table-responsive { -webkit-overflow-scrolling:touch; }
@media (max-width: 700px) {
  .table-responsive::before { content:"Swipe sideways to see more columns \\2192";
    display:block; font-size:12px; color:var(--pry-muted); padding:4px 2px 6px; }
}

/* two-column form, labels above inputs, hint under - matches the prototype */
.pry-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; text-align:left; }
.pry-grid2 > .form-group { margin-bottom:0; }
.pry-grid2 .pry-span2 { grid-column:1 / -1; }
.pry-grid2 label { display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; }
.pry-grid2 .form-control { width:100%; }
.pry-hint { font-size:12.5px; color:var(--pry-muted); margin-top:5px; }
@media (max-width:820px){ .pry-grid2 { grid-template-columns:1fr; } }

.pry-formactions { display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.pry-pagehead p { margin:6px 0 0; color:var(--pry-muted); }
.pry-pagetitle { font-size:var(--t-page); font-weight:700; letter-spacing:-.02em;
                 line-height:1.2; margin:0 0 14px; text-align:left; }
.pry-pagehead .pry-pagetitle { margin:0; }
.pry-sectiontitle { font-size:22px; font-weight:700; line-height:1.3;
                    margin:0 0 12px; text-align:center; }
@media (max-width:640px){ .pry-pagetitle { font-size:24px; } }

/* --- shape ----------------------------------------------------------------- */
.card, .modal-content, .dropdown-menu { border-radius:var(--r-card); }
.btn, .form-control, .form-select, .input-group-text,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=search], select, textarea { border-radius:var(--r-control); }
.badge, .pry-badge { border-radius:var(--r-pill); }

/* --- icons ----------------------------------------------------------------
   <span class="pry-iconbox pry-i--call">
     <svg class="pry-ico"><use href="#pry-call-history"></use></svg></span>
   -------------------------------------------------------------------------- */
.pry-ico     { width:1.5em; height:1.5em; display:inline-block; vertical-align:-.3em; fill:currentColor; }
.pry-ico--sm { width:1.15em; height:1.15em; }
.pry-ico--lg { width:2em; height:2em; }

.pry-iconbox { display:inline-flex; align-items:center; justify-content:center;
               width:48px; height:48px; border-radius:14px;
               background:var(--pry-blue-050); color:var(--pry-blue); }
.pry-iconbox--lg { width:56px; height:56px; border-radius:16px; }

.pry-i--call { color:var(--a-call); background:#34D27E1F; }
.pry-i--chat { color:var(--a-chat); background:#3B82F81F; }
.pry-i--meet { color:var(--a-meet); background:#9B6BFF1F; }
.pry-i--mail { color:var(--a-mail); background:#F2A33C1F; }
.pry-i--gold { color:var(--a-gold); background:#E7B24C1F; }
.pry-i--bad  { color:var(--a-bad);  background:#F0563D1F; }
.pry-i--mute { color:var(--a-mute); background:#7C8AA51F; }
:root[data-theme="dark"] .pry-i--call { background:#34D27E26; }
:root[data-theme="dark"] .pry-i--chat { background:#3B82F826; }
:root[data-theme="dark"] .pry-i--meet { background:#9B6BFF26; }
:root[data-theme="dark"] .pry-i--mail { background:#F2A33C26; }
:root[data-theme="dark"] .pry-i--gold { background:#E7B24C26; }
:root[data-theme="dark"] .pry-i--bad  { background:#F0563D26; }
:root[data-theme="dark"] .pry-i--mute { background:#7C8AA526; }

/* --- components ----------------------------------------------------------- */
/* Summary tiles. A grid rather than flex, so tiles fill the row evenly instead
   of stranding a half-width tile on the end. Left-aligned: a column of numbers
   is easier to scan down than centred text. */
.pry-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
             gap:14px; margin:4px 0 24px; }   /* 4 across at 712px: 4*150+3*12 = 636 */
.pry-stat  { background:var(--pry-card); border:1px solid var(--pry-line);
             border-radius:var(--r-card); padding:18px 18px 16px; text-align:center;
             box-shadow:0 1px 3px rgba(0,0,0,.16); }
.pry-stat .n { display:block; font-size:34px; font-weight:700; color:var(--pry-ink);
               line-height:1.1; letter-spacing:-.02em; }
.pry-stat .n--sm { font-size:19px; line-height:1.35; }
.pry-stat .l { display:block; font-size:var(--t-meta); font-weight:600; letter-spacing:.06em;
               text-transform:uppercase; color:var(--pry-muted); margin-top:3px; }
.pry-stat .sub { display:block; font-size:13px; color:var(--pry-muted); margin-top:8px; }
.pry-stat .sub a { color:var(--pry-blue); }
.pry-stat--ok  .n { color:var(--s-ok); }
.pry-stat--bad .n { color:var(--s-bad); }
.pry-stat .pry-iconbox { margin:0 0 10px; }

/* usage meter inside a tile */
.pry-bar { height:6px; border-radius:4px; background:var(--pry-line); overflow:hidden; margin-top:12px; }
.pry-bar span { display:block; height:100%; background:var(--pry-blue); border-radius:4px; }

/* empty states - replaces "No data available in table" / "No Data" */
.pry-empty { text-align:center; padding:40px 20px; }
.pry-empty .pry-iconbox { margin:0 auto 14px; }
.pry-empty h4 { margin:0 0 6px; }
.pry-empty p  { color:var(--pry-muted); margin:0 auto 16px; max-width:420px; }

.pry-btn { display:inline-block; border:1px solid transparent; border-radius:var(--pry-radius-sm);
           padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.pry-btn--primary { background:var(--pry-blue); border-color:var(--pry-blue); color:#fff; }
.pry-btn--primary:hover { background:var(--pry-blue-hover); color:#fff; }
.pry-btn--ghost { background:var(--pry-card); border-color:var(--pry-line); color:var(--pry-ink); }
.pry-btn--danger { background:var(--pry-card); border-color:#E7C8C2; color:var(--a-bad); }

/* VLT-05: status data carries more weight - larger, bolder badges that read
   at a glance instead of blending into the row. */
.pry-badge { display:inline-block; font-size:13.5px; font-weight:700; padding:6px 14px;
             border-radius:999px; letter-spacing:.01em; white-space:nowrap; }
.pry-badge--ok  { background:var(--s-ok-bg);   color:var(--s-ok);      border:1px solid var(--s-ok-line); }
.pry-badge--off { background:var(--s-neutral-bg); color:var(--pry-muted); border:1px solid var(--pry-line); }
.pry-badge--bad { background:var(--s-bad-bg);  color:var(--s-bad);     border:1px solid var(--s-bad-line); }
.pry-badge--wait{ background:var(--s-warn-bg); color:var(--s-warn-ink);border:1px solid var(--s-warn-line); }

.pry-meter { height:8px; border-radius:5px; background:var(--pry-line); overflow:hidden;
             max-width:640px; margin:0 auto 22px; }
.pry-meter span { display:block; height:100%; background:var(--pry-blue); }

.pry-note { max-width:780px; margin:0 auto 20px; border-radius:var(--pry-radius); padding:13px 16px;
            font-size:13.5px; text-align:left; background:var(--pry-blue-050);
            border:1px solid var(--pry-blue-100); border-left:3px solid var(--pry-blue); color:var(--pry-ink); }
.pry-note--warn { background:#E7B24C1F; border-color:#E7B24C55; border-left-color:var(--a-gold); }
.pry-note--bad  { background:#F0563D1F; border-color:#F0563D55; border-left-color:var(--a-bad); }

/* --- ex-Preflight ----------------------------------------------------------
   Tailwind's Play CDN used to supply these and has been removed. Keeping the
   image rules verbatim means nothing shifts; without max-width an oversized
   upload can break out of its card.
   -------------------------------------------------------------------------- */
img, video { display:block; max-width:100%; height:auto; }

/* --- brand furniture ------------------------------------------------------- */
.navbar-brand .navbar-logo-img { height:26px; width:auto; display:block; }
@media (max-width:640px){ .navbar-brand .navbar-logo-img { height:22px; } }
.pry-splash { background:var(--pry-gradient); color:#fff; }
.pry-splash img { height:46px; }

/* --- dark surfaces ---------------------------------------------------------
   Generic so existing pages come along without editing each one.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] body { background:var(--pry-bg); color:var(--pry-ink); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .dropdown-menu { background:var(--pry-card); border-color:var(--pry-line); color:var(--pry-ink); }
/* VDK-01 level 5: modals float above everything on their own surface */
:root[data-theme="dark"] .modal-content { background:var(--pry-modal); border-color:var(--pry-line);
                                          color:var(--pry-ink); box-shadow:var(--pry-modal-shadow); }
.modal-content { box-shadow:var(--pry-modal-shadow); }
:root[data-theme="dark"] .table,
:root[data-theme="dark"] table.dataTable { color:var(--pry-ink); border-color:var(--pry-line); }
:root[data-theme="dark"] .table > :not(caption) > * > * { background-color:transparent; border-color:var(--pry-line); color:var(--pry-ink); }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color:#101E36; color:var(--pry-ink); }
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color:#22375E; }
/* Locked fields look locked: flat fill, no input-well border, muted text.
   The Organisation form (and the mobile-number gate) set readOnly until Edit
   is pressed - only then do fields take the open input styling back. */
.form-control[readonly], input[readonly], textarea[readonly] {
  background:var(--pry-surface-2) !important; border-color:transparent !important;
  color:var(--pry-muted) !important; cursor:default; box-shadow:none !important; }
.form-control[readonly]:focus, input[readonly]:focus, textarea[readonly]:focus {
  border-color:var(--pry-line) !important; box-shadow:none !important; }

/* VDK-06: a focused field is unmistakable in dark mode */
:root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus {
  border-color:var(--pry-blue) !important; box-shadow:0 0 0 3px rgba(0,104,223,.35) !important; outline:none; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background:var(--pry-input); border-color:var(--pry-line); color:var(--pry-ink); }
:root[data-theme="dark"] .form-control::placeholder { color:var(--pry-muted); }
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,:root[data-theme="dark"] h5,:root[data-theme="dark"] label,
:root[data-theme="dark"] p,:root[data-theme="dark"] td,
:root[data-theme="dark"] th { color:var(--pry-ink); }
:root[data-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper label,
:root[data-theme="dark"] .dataTables_wrapper .paginate_button { color:var(--pry-ink) !important; }
:root[data-theme="dark"] .swal2-popup { background:var(--pry-card); color:var(--pry-ink); }
/* Bootstrap text utilities resolve from --bs-body-color, which stays light-mode
   dark, and they carry !important - so they need answering in kind. */
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary { color:var(--pry-muted) !important; }
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-black { color:var(--pry-ink) !important; }
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light { background-color:var(--pry-card) !important; color:var(--pry-ink); }

/* --- Bootstrap 5.3 + SweetAlert2 components --------------------------------
   Both expose their own custom properties, so these retint by setting the
   variables rather than out-specifying their selectors. Anything not listed
   here was already correct when audited against a live page.
   -------------------------------------------------------------------------- */

/* brand blue instead of Bootstrap's #0d6efd, in both themes */
.pagination { --bs-pagination-active-bg:var(--pry-blue); --bs-pagination-active-border-color:var(--pry-blue); }
.progress   { --bs-progress-bar-bg:var(--pry-blue); }
.btn-outline-primary { --bs-btn-color:var(--pry-blue); --bs-btn-border-color:var(--pry-blue);
                       --bs-btn-hover-bg:var(--pry-blue); --bs-btn-hover-border-color:var(--pry-blue);
                       --bs-btn-active-bg:var(--pry-blue-hover); --bs-btn-active-border-color:var(--pry-blue-hover); }

:root[data-theme="dark"] .pagination {
  --bs-pagination-bg:var(--pry-card); --bs-pagination-color:var(--pry-ink);
  --bs-pagination-border-color:var(--pry-line);
  --bs-pagination-hover-bg:var(--pry-blue-050); --bs-pagination-hover-color:var(--pry-ink);
  --bs-pagination-hover-border-color:var(--pry-line);
  --bs-pagination-focus-bg:var(--pry-blue-050); --bs-pagination-focus-color:var(--pry-ink);
  --bs-pagination-disabled-bg:var(--pry-input); --bs-pagination-disabled-color:var(--pry-faint);
  --bs-pagination-disabled-border-color:var(--pry-line);
}
:root[data-theme="dark"] .list-group {
  --bs-list-group-bg:var(--pry-card); --bs-list-group-color:var(--pry-ink);
  --bs-list-group-border-color:var(--pry-line);
  --bs-list-group-action-hover-bg:var(--pry-blue-050); --bs-list-group-action-hover-color:var(--pry-ink);
}
:root[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg:var(--pry-card); --bs-dropdown-color:var(--pry-ink);
  --bs-dropdown-link-color:var(--pry-ink); --bs-dropdown-link-hover-bg:var(--pry-blue-050);
  --bs-dropdown-link-hover-color:var(--pry-ink); --bs-dropdown-border-color:var(--pry-line);
}
:root[data-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color:var(--pry-line);
  --bs-nav-tabs-link-active-bg:var(--pry-card); --bs-nav-tabs-link-active-color:var(--pry-ink);
  --bs-nav-tabs-link-active-border-color:var(--pry-line) var(--pry-line) var(--pry-card);
  --bs-nav-tabs-link-hover-border-color:var(--pry-line);
  --bs-nav-link-color:var(--pry-muted); --bs-nav-link-hover-color:var(--pry-ink);
}
:root[data-theme="dark"] .accordion {
  --bs-accordion-bg:var(--pry-card); --bs-accordion-color:var(--pry-ink);
  --bs-accordion-border-color:var(--pry-line);
  --bs-accordion-btn-bg:var(--pry-card); --bs-accordion-btn-color:var(--pry-ink);
  --bs-accordion-active-bg:var(--pry-blue-050); --bs-accordion-active-color:var(--pry-ink);
}
:root[data-theme="dark"] .progress { --bs-progress-bg:var(--pry-line); }
:root[data-theme="dark"] .input-group-text { background:var(--pry-input); border-color:var(--pry-line); color:var(--pry-muted); }
:root[data-theme="dark"] .form-check-input { background-color:var(--pry-input); border-color:var(--pry-line); }
:root[data-theme="dark"] .form-check-input:checked { background-color:var(--pry-blue); border-color:var(--pry-blue); }

:root[data-theme="dark"] .alert-primary,
:root[data-theme="dark"] .alert-info    { background:var(--pry-blue-050); border-color:var(--pry-blue-100); color:var(--pry-ink); }
:root[data-theme="dark"] .alert-success { background:var(--s-ok-bg);   border-color:var(--s-ok-line);   color:var(--s-ok); }
:root[data-theme="dark"] .alert-danger  { background:var(--s-bad-bg);  border-color:var(--s-bad-line);  color:var(--s-bad-ink); }
:root[data-theme="dark"] .alert-warning { background:var(--s-warn-bg); border-color:var(--s-warn-line); color:var(--s-warn-ink); }

/* SweetAlert2 exposes ~67 custom properties; these are the surfaces.
   VDK-01: dialogs sit on the modal layer, not the card layer - confirmations
   (including remote wipe) visibly float above the page they interrupt. */
:root[data-theme="dark"] {
  --swal2-background:var(--pry-modal); --swal2-color:var(--pry-ink);
  --swal2-border:1px solid var(--pry-line);
  --swal2-input-background:var(--pry-input); --swal2-input-border:1px solid var(--pry-line);
  --swal2-footer-background:var(--pry-modal); --swal2-footer-color:var(--pry-muted);
  --swal2-footer-border-color:var(--pry-line);
  --swal2-close-button-color:var(--pry-muted);
}

/* --- button hierarchy (VFB-02) ---------------------------------------------
   One system, four roles, both themes, both Bootstrap versions in use:
     primary      solid brand blue     - the one intended next step
     secondary    quiet outline        - everything else
     destructive  solid red            - wipe / remove only
     text action  .pry-act / .btn-link - row-level verbs
   Plain rules (not --bs-btn vars) so the BS3 pages get them too.
   -------------------------------------------------------------------------- */
.btn-primary, .btn-primary:visited {
  background-color:var(--pry-blue); border-color:var(--pry-blue); color:#fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color:var(--pry-blue-hover); border-color:var(--pry-blue-hover); color:#fff; }

.btn-secondary, .btn-outline-secondary {
  background-color:transparent; border-color:var(--pry-line); color:var(--pry-muted); }
.btn-secondary:hover, .btn-secondary:focus, .btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color:var(--pry-surface-2); border-color:var(--pry-line); color:var(--pry-ink); }

.btn-danger {
  background-color:var(--s-bad-solid); border-color:var(--s-bad-solid); color:#fff; }
.btn-danger:hover, .btn-danger:focus {
  background-color:var(--s-bad-solid-hover); border-color:var(--s-bad-solid-hover); color:#fff; }

.btn-link { color:var(--pry-blue); text-decoration:none; border:none; background:transparent; }
.btn-link:hover { color:var(--pry-blue-hover); text-decoration:underline; }

/* --- retire the old indigo -------------------------------------------------- */
.btn-assign,.btn-primary-p { background:var(--pry-blue) !important; border-color:var(--pry-blue) !important; color:#fff !important; }
.btn-assign:hover,.btn-primary-p:hover { background:var(--pry-blue-hover) !important; border-color:var(--pry-blue-hover) !important; }
.seat-bar span,.credit-bar span { background:var(--pry-blue) !important; }

/* --- footer and top-nav marks --------------------------------------------- */
.footer-logo-wrapper .footer-logo-img { height: 30px; width: auto; display: block; }
.topnav-brand img { height: 24px; width: auto; display: block; }
.topnav-links { display: flex; align-items: center; gap: 22px; }
@media (max-width: 640px) {
  .footer-logo-wrapper .footer-logo-img { height: 24px; }
  .topnav-brand img { height: 20px; }
  .topnav-links { gap: 14px; }
}
.pry-iconbox--sm { width: 32px; height: 32px; border-radius: 10px; }

/* tile icons lift on hover (replaces the old .officon:hover rule) */
.pry-iconbox { transition: transform .18s ease; }
.pry-linkcard:hover .pry-iconbox { transform: scale(1.06); }

/* TEA-08: inline member detail (DataTables child row on the Team table) */
.pry-rowdetail-wrap { padding:2px 0; }
.pry-detailcard {
  background:var(--pry-surface-2,#f5f8fc);
  border:1px solid var(--pry-line,#e3e6ec);
  border-left:4px solid var(--pry-blue,#2f6fed);
  border-radius:var(--r-card,10px);
  padding:16px 18px; margin:6px 4px;
}
.pry-detailhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.pry-detailname { margin:0; font-size:1.1em; }
.pry-detailsub { color:var(--pry-muted,#6c7378); font-size:.9em; }
.pry-detailgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 20px; margin-bottom:12px; }
.pry-detailfield { display:flex; flex-direction:column; gap:2px; }
.pry-detailfield .k { font-size:.78em; text-transform:uppercase; letter-spacing:.03em; color:var(--pry-muted,#6c7378); }
.pry-detailfield .v { font-weight:600; }
.pry-detailservices { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.pry-detailservices .k { font-size:.78em; text-transform:uppercase; letter-spacing:.03em; color:var(--pry-muted,#6c7378); margin-right:4px; }
.pry-detailactions { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--pry-line,#e3e6ec); }
tr.pry-rowopen > td { background:var(--pry-surface-2,#eef3fa) !important; }

/* TEA-08: the name cell doubles as the detail toggle */
.pry-namelink { color:inherit; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.pry-namelink:hover { color:var(--pry-blue,#2f6fed); text-decoration:none; }
.pry-caret { display:inline-block; transition:transform .15s ease; color:var(--pry-muted,#8a8f98); font-size:1.15em; line-height:1; }
tr.pry-rowopen .pry-caret { transform:rotate(90deg); color:var(--pry-blue,#2f6fed); }
#example tbody tr td:first-child { cursor:pointer; }

/* TEA-08: detail close (x) in the header */
.pry-detailclose { border:0; background:none; font-size:1.3em; line-height:1; cursor:pointer; color:var(--pry-muted,#6c7378); padding:0 4px; }
.pry-detailclose:hover { color:var(--pry-blue,#2f6fed); }

/* TEA-08: per-row kebab (⋯) actions menu on the Team table */
.pry-kebab { position:relative; display:inline-block; }
.pry-kebab-btn { width:34px; height:34px; border-radius:var(--r-control,10px); border:1px solid var(--pry-line);
  background:var(--pry-surface-2); color:var(--pry-ink); cursor:pointer;
  font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.pry-kebab-btn:hover, .pry-kebab.open .pry-kebab-btn { border-color:var(--pry-blue); color:var(--pry-blue); }
/* fixed via JS; right-aligned to the button. Hidden until open. Uses the modal
   surface token so it reads as an elevated layer in both themes. */
.pry-kebab-menu { position:fixed; display:none; min-width:210px; z-index:1000;
  background:var(--pry-modal); border:1px solid var(--pry-line);
  border-radius:var(--r-card,12px); padding:6px; box-shadow:var(--pry-modal-shadow); }
.pry-kebab.open .pry-kebab-menu { display:block; }
.pry-kebab-menu a { display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--pry-ink); padding:9px 11px; border-radius:var(--r-control,8px); font-size:13.5px; font-weight:500; white-space:nowrap; }
.pry-kebab-menu a:hover { background:var(--pry-blue-050); color:var(--pry-blue); }
.pry-kebab-menu a .pry-ico, .pry-kebab-menu a i { width:16px; flex:none; opacity:.85; }
.pry-kebab-sep { border-top:1px solid var(--pry-line); margin:5px 3px; }
.pry-kebab-danger { color:var(--s-bad) !important; }
.pry-kebab-danger:hover { background:var(--s-bad-bg) !important; color:var(--s-bad) !important; }

/* Team-section tables: all share the widest (full container) width so the
   Colleagues / queued / non-Pryvate / suspended / rejected tables line up
   instead of each sizing itself to its own column content. Paired with
   autoWidth:false on the DataTable init. */
table.pry-acttable, table.pry-acttable.dataTable { width:100% !important; }
.dataTables_wrapper { width:100%; }

/* Billing payment panels - richer product presentation */
/* Keep all panel content left-aligned so selects sit directly under their
   labels (a centred ancestor otherwise centres inline labels while the
   fixed-width selects stay flush left). */
.pry-panel p, .pry-panel .pry-featurelist, .pry-panel .pry-billgrid,
.pry-panel .pry-payhead, .pry-panel .pry-price, .pry-panel .pry-paycta,
.pry-panel #addform { text-align:left; }

.pry-featurelist { list-style:none; margin:12px 0 0; padding:0; display:grid;
                   grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:8px 14px; }
.pry-featurelist li { position:relative; padding:9px 12px 9px 40px; font-size:13.5px;
                      color:var(--pry-ink); line-height:1.35; background:var(--pry-surface-2);
                      border:1px solid var(--pry-line); border-radius:10px; }
.pry-featurelist li::before { content:"\2713"; position:absolute; left:11px; top:50%;
                              transform:translateY(-50%); width:19px; height:19px; box-sizing:border-box;
                              display:flex; align-items:center; justify-content:center;
                              background:var(--s-ok); color:#fff; font-size:11px; font-weight:800;
                              border-radius:50%; line-height:1; }
.pry-billgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
                gap:18px 26px; align-items:end; margin-top:18px; }
.pry-billgrid > div { text-align:left; }
.pry-payhead { display:block; font-size:13px; font-weight:700; text-transform:uppercase;
               letter-spacing:.03em; color:var(--pry-muted); margin:0 0 6px; text-align:left; }
.pry-price { font-size:26px; font-weight:800; color:var(--pry-ink); line-height:1.15; text-align:left; }
.pry-price .per { font-size:13px; font-weight:600; color:var(--pry-muted); margin-left:2px; }
.pry-paycta { margin-top:0; display:flex; flex-direction:column; gap:8px; align-items:stretch; }

/* ---- Payment panel: product-card treatment for the 3 checkout boxes ---- */
.pry-paypanel { display:flex; flex-direction:column; }
.pry-paypanel .pry-cardhead { align-items:flex-start; gap:14px; margin-bottom:6px; }
.pry-payhead-l { display:flex; align-items:center; gap:14px; min-width:0; }
.pry-payhead-l .pry-sectiontitle { margin:0 0 2px; }
.pry-paysub { margin:0; color:var(--pry-muted); font-size:13px; line-height:1.35; max-width:52ch; }
.pry-payhead-r { display:flex; align-items:center; gap:8px; flex:none; }
.pry-paypanel > p { margin:8px 0 2px; color:var(--pry-ink); font-size:13.5px; line-height:1.45; }

/* checkout bar: content starts at the horizontal midpoint of the box, and the
   right half is split into two EQUAL columns (choose | pay), divider between.
   The left half of the box is intentionally empty. */
.pry-payfoot { margin-top:18px; padding:16px 18px 16px 50%; background:var(--pry-surface-2);
               border:1px solid var(--pry-line); border-radius:14px;
               display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
               gap:20px; align-items:center; }
.pry-payfoot__choose, .pry-payfoot__pay { min-width:0; text-align:left; }
.pry-payfoot__rule { background:var(--pry-line); align-self:stretch; width:1px; }
.pry-payfoot__pay { display:flex; flex-direction:column; gap:10px; }
.pry-payfoot__pay .pry-price { font-size:28px; }
.pry-payprice-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pry-payprice-row .pry-muted-note { margin:0; }
/* CTA buttons in the panels must NOT stretch full width (login_m.css forces
   .btn-primary to 100%); scope-override them back to a comfortable size. */
.pry-panel .pry-paycta .btn, .pry-panel #addform .pry-paycta .btn,
.pry-panel .pry-payfoot .btn { width:100%; max-width:300px; }
.pry-payfoot .payment-buttons { flex-wrap:wrap; gap:8px; }
@media (max-width:900px){
  /* below this the half-width offset is impractical - use the full width */
  .pry-payfoot { padding-left:18px; }
}
@media (max-width:640px){
  .pry-payfoot { grid-template-columns:1fr; }
  .pry-payfoot__rule { display:none; }
  .pry-panel .pry-paycta .btn, .pry-panel .pry-payfoot .btn { max-width:none; }
}

/* ---- Settings: option cards that fill the whole panel width ---- */
.pry-setgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
               gap:16px; margin-top:14px; }
.pry-setcard { background:var(--pry-surface-2); border:1px solid var(--pry-line);
               border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:9px; }
.pry-set-title { display:flex; align-items:center; gap:10px; font-weight:700;
                 font-size:14.5px; color:var(--pry-ink); }
.pry-set-title .pry-iconbox { width:34px; height:34px; border-radius:10px; }
.pry-set-title .pry-ico { width:1.15em; height:1.15em; }
.pry-set-sub { color:var(--pry-muted); font-size:13px; line-height:1.45; }
.pry-set-control { margin-top:auto; padding-top:4px; }
/* on/off toggle switch used for the checkbox-style settings */
.pry-switch { position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.pry-switch input { position:absolute; opacity:0; width:0; height:0; }
.pry-switch .track { width:44px; height:25px; border-radius:20px; background:var(--pry-line);
                     position:relative; transition:background .18s ease; flex:none; }
.pry-switch .track::after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
                            border-radius:50%; background:#fff; transition:transform .18s ease;
                            box-shadow:0 1px 2px rgba(0,0,0,.25); }
.pry-switch input:checked + .track { background:var(--pry-blue); }
.pry-switch input:checked + .track::after { transform:translateX(19px); }
.pry-switch input:focus-visible + .track { outline:2px solid var(--pry-blue); outline-offset:2px; }
.pry-switch .pry-switch-lbl { font-size:13.5px; font-weight:600; color:var(--pry-ink); }

/* ============================================================
   Indicators: STATUS vs SERVICE vs ROLE, kept unmistakably
   distinct from buttons so nothing non-interactive reads as a
   control. Buttons are the only solid/outlined rounded rectangle.
   ============================================================ */
/* STATUS = a state (Active, Suspended, Awaiting...). Dot + label,
   no fill, no border, default cursor. Colour carries the meaning. */
.pry-status { display:inline-flex; align-items:center; gap:7px; font-size:13px;
              font-weight:600; color:var(--pry-ink); cursor:default;
              white-space:nowrap; padding:0; background:none; border:0; }
.pry-status::before { content:""; width:9px; height:9px; border-radius:50%;
                      background:var(--pry-muted); flex:none; }
.pry-status--ok::before   { background:var(--s-ok); }
.pry-status--warn::before { background:var(--s-warn); }
.pry-status--bad::before  { background:var(--s-bad); }
.pry-status--off          { color:var(--pry-muted); }
.pry-status--off::before  { background:var(--pry-muted); opacity:.55; }

/* SERVICE = a capability the account has (Secure comms, Meetings,
   External calling). Icon + label chip, tinted in the service's
   accent colour, non-interactive. The leading icon is what stops
   it reading as a button. */
.pry-service { display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
               font-weight:600; padding:5px 11px 5px 9px; border-radius:8px;
               cursor:default; border:1px solid transparent; white-space:nowrap; }
.pry-service .pry-ico { width:15px; height:15px; flex:none; }
.pry-service--comms { color:var(--a-chat); background:#3B82F81f; border-color:#3B82F833; }
.pry-service--meet  { color:var(--a-meet); background:#9B6BFF1f; border-color:#9B6BFF33; }
.pry-service--call  { color:var(--a-call); background:#34D27E1f; border-color:#34D27E33; }

/* ROLE = a classification (Admin / Manager / Member). Neutral
   outlined chip - no colour, no icon - so it's clearly neither a
   status nor a service nor a button. */
.pry-rolechip { display:inline-block; font-size:12.5px; font-weight:600;
                padding:4px 10px; border-radius:8px; border:1px solid var(--pry-line);
                color:var(--pry-muted); background:transparent; cursor:default; }
.pry-rolechip--lead { color:var(--pry-ink); border-color:var(--pry-ink); }