/* =============================================================================================
   VCOMPLIANT — "VENDORVISTA" THEME
   ---------------------------------------------------------------------------------------------
   Re-skins the existing AdminLTE / Bootstrap 3 markup to match the supplied VendorVista dashboard
   design: soft blue gradient ground, purple navigation, large rounded cards, pastel tiles,
   pill buttons and airy typography.

   Loaded ONLY when an Admin/Superadmin selects this theme. Classic and Modern are untouched;
   switching away restores the previous look exactly.

   THIS FILE IS PRESENTATION ONLY. It adds no markup, changes no control IDs, no data binding,
   no server logic and no page behaviour.

   ORGANISATION
     01  Tokens                      08  Status labels / tags
     02  Base + typography           09  Forms & controls
     03  Page shell & background     10  Buttons
     04  Header (top bar)            11  Tabs, pagination, modals, alerts
     05  Sidebar (pill nav)          12  Register pattern (.vc-*)
     06  Content shell               13  Master data-entry pattern (.vc-*)
     07  Cards / boxes / KPI tiles   14  Legacy inline-style neutralisers (site-wide)
                                     15  margin-top:20px alignment (progressive enhancement)
                                     16  Responsive
                                     17  Accessibility
                                     18  Dark mode (opt-in, NOT automatic)
   ============================================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── 01  TOKENS  (taken from the supplied design) ─────────────────────────────────────────── */
/* A theme sets FOUNDATION tokens (the single source of truth every .vc-* component in
   vc-foundation.css reads), then derives its own shorthand aliases from them with var().
   Because these override the foundation values, a .vc-btn / .vc-card / .vc-badge used anywhere
   in the app automatically becomes VendorVista-purple and round when this theme is selected. */
:root{
  /* ---------- foundation tokens (authoritative) ---------- */
  --vc-primary:#6d70eb;  --vc-primary-hover:#5058c3;  --vc-primary-active:#474fb5;
  --vc-primary-soft:#eef2ff; --vc-primary-contrast:#ffffff;
  --vc-secondary:#595fca; --vc-secondary-hover:#5058c3; --vc-secondary-soft:#eef2ff;

  --vc-bg:#e7efff;  --vc-bg-subtle:#f5f7ff;
  --vc-surface:#ffffff; --vc-surface-raised:#ffffff; --vc-surface-sunken:#f7f8fb;

  --vc-border:#e8e8f5; --vc-border-strong:#dcdcef; --vc-border-subtle:#f0f0fa;

  --vc-text:#1f2333; --vc-text-secondary:#4a5070; --vc-text-muted:#7c819f;
  --vc-disabled-text:#b0b5cc;

  --vc-success:#1d8d62; --vc-success-soft:#e7f7f0; --vc-success-border:#c6ead9;
  --vc-warning:#c3741c; --vc-warning-soft:#fff2df; --vc-warning-border:#f2dcb9;
  --vc-error:#dd5670;   --vc-error-soft:#ffe7ec;   --vc-error-border:#f7cbd5;
  --vc-info:#5c62d6;    --vc-info-soft:#eef2ff;    --vc-info-border:#d5daff;
  --vc-neutral:#7c819f; --vc-neutral-soft:#f1f2fa; --vc-neutral-border:#e0e2ef;

  /* the design is deliberately very round, and buttons are pills */
  --vc-radius-button:999px; --vc-radius-input:14px; --vc-radius-card:24px;
  --vc-radius-dialog:28px;  --vc-radius-table:24px; --vc-radius-dropdown:14px;

  --vc-shadow-sm:0 12px 28px rgba(93,104,165,.12);
  --vc-shadow-md:0 16px 38px rgba(93,104,165,.15);
  --vc-shadow-hover:0 18px 42px rgba(93,104,165,.20);
  --vc-shadow-dialog:0 24px 60px rgba(93,104,165,.18);

  --vc-font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vc-font-display:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vc-font-mono:"Cascadia Mono", ui-monospace, Consolas, Menlo, monospace;

  /* ---------- theme aliases, all derived from the tokens above ---------- */
  --vc-canvas:var(--vc-bg);
  --vc-surface-2:var(--vc-surface-sunken);
  --vc-surface-3:var(--vc-bg-subtle);
  --vc-line:var(--vc-border);
  --vc-line-strong:var(--vc-border-strong);

  --vc-ink:var(--vc-text);
  --vc-ink-2:var(--vc-text-secondary);
  --vc-ink-3:var(--vc-text-muted);
  --vc-ink-disabled:var(--vc-disabled-text);

  --vc-nav:var(--vc-secondary);
  --vc-nav-dark:#5058c3;
  --vc-purple:var(--vc-primary);
  --vc-purple-soft:#cfd0ff;
  --vc-azure:var(--vc-primary);
  --vc-azure-hover:var(--vc-primary-hover);
  --vc-azure-soft:var(--vc-primary-soft);

  --vc-good:var(--vc-success); --vc-good-soft:var(--vc-success-soft); --vc-good-line:var(--vc-success-border);
  --vc-warn:var(--vc-warning); --vc-warn-soft:var(--vc-warning-soft); --vc-warn-line:var(--vc-warning-border);
  --vc-crit:var(--vc-error);   --vc-crit-soft:var(--vc-error-soft);   --vc-crit-line:var(--vc-error-border);
  --vc-info-line:var(--vc-info-border);
  --vc-neut:var(--vc-neutral); --vc-neut-soft:var(--vc-neutral-soft); --vc-neut-line:var(--vc-neutral-border);

  /* pastel tile fills (specific to this design) */
  --vc-mint:#e9f5f3;
  --vc-pink:#ffe9f0;
  --vc-yellow:#fff1c9;
  --vc-lilac:#ece8ff;
  --vc-blue:#e7efff;

  /* accent chart hues */
  --vc-orange:#f4a06b;
  --vc-teal:#67b7a3;

  --vc-r-xs:10px;
  --vc-r-sm:var(--vc-radius-input);
  --vc-r-md:18px;
  --vc-r-lg:var(--vc-radius-card);
  --vc-r-xl:var(--vc-radius-dialog);
  --vc-r-pill:var(--vc-radius-badge);

  /* elevation aliases (derived - the authoritative values are the foundation tokens above) */
  --vc-sh-1:var(--vc-shadow-sm);
  --vc-sh-2:var(--vc-shadow-md);
  --vc-sh-3:var(--vc-shadow-dialog);
  --vc-glow:0 12px 22px rgba(89,95,202,.22);
}

/* ── 02  BASE + TYPOGRAPHY ────────────────────────────────────────────────────────────────── */
body{
  font-family:var(--vc-font) !important;
  background:linear-gradient(180deg,#cfe0ff 0%, #e7efff 52%, #eaf3ff 100%) fixed !important;
  color:var(--vc-ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--vc-font); color:var(--vc-ink); letter-spacing:-.03em; font-weight:800;}
a{color:var(--vc-azure);}
a:hover,a:focus{color:var(--vc-azure-hover);}
.table td,.table th,.small-box .inner h3,.info-box-number{font-variant-numeric:tabular-nums;}

/* ── 03  PAGE SHELL ───────────────────────────────────────────────────────────────────────── */
.wrapper{background:transparent !important;}
.content-wrapper,.right-side{background:transparent !important;}

/* ── 04  HEADER (TOP BAR) ─────────────────────────────────────────────────────────────────── */
.main-header .navbar,
.main-header .logo{
  background:linear-gradient(180deg,var(--vc-nav) 0%, var(--vc-nav-dark) 100%) !important;
  color:#fff !important;
  border:0 !important;
}
.main-header .logo{font-weight:900; letter-spacing:-.03em;}
.main-header .logo:hover{background:var(--vc-nav-dark) !important;}
.main-header .navbar .nav > li > a{color:#ebedff !important;}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > .open > a{background:rgba(255,255,255,.12) !important; color:#fff !important;}
.main-header .sidebar-toggle{color:#ebedff !important;}
.main-header .sidebar-toggle:hover{background:rgba(255,255,255,.12) !important; color:#fff !important;}

/* ── 05  SIDEBAR — rounded pill navigation with the white active indicator ────────────────── */
.main-sidebar,.left-side{
  background:linear-gradient(180deg,var(--vc-nav) 0%, var(--vc-nav-dark) 100%) !important;
  box-shadow:6px 0 22px rgba(80,88,195,.18);
}
.sidebar{padding-top:8px;}
.sidebar-menu > li.header{
  color:#c6caff !important; background:transparent !important;
  text-transform:uppercase; font-size:11px; font-weight:700;
  letter-spacing:.10em; padding:16px 20px 6px;
}
.sidebar-menu > li{margin:3px 10px;}
.sidebar-menu > li > a{
  color:#e9eaff !important;
  border-radius:var(--vc-r-md);
  padding:12px 14px;
  font-weight:600;
  border-left:0 !important;
  position:relative;
  transition:background .18s ease, color .18s ease;
}
.sidebar-menu > li > a > i:first-child{width:26px; text-align:center; margin-right:6px; font-size:16px; opacity:.92;}
.sidebar-menu > li:hover > a{background:rgba(255,255,255,.10) !important; color:#fff !important;}
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a{
  background:rgba(255,255,255,.18) !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
/* the white indicator bar on the active item */
.sidebar-menu > li.active > a::before{
  content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:4px; height:26px; border-radius:var(--vc-r-pill); background:#fff;
}
.sidebar-menu .treeview-menu{
  background:rgba(0,0,0,.12) !important; border-radius:var(--vc-r-sm);
  margin:4px 6px 8px; padding:6px 4px;
}
.sidebar-menu .treeview-menu > li > a{color:#dfe1ff !important; border-radius:var(--vc-r-xs); padding:8px 12px; display:flex; align-items:center; gap:9px; line-height:1.3;}
.sidebar-menu .treeview-menu > li > a > i:first-child{flex:0 0 18px; width:18px; text-align:center; font-size:13px; opacity:.8; margin:0;}
.sidebar-menu .treeview-menu > li > a > span{flex:1 1 auto; min-width:0;}
.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a{background:rgba(255,255,255,.14) !important; color:#fff !important;}
.sidebar-menu .treeview-menu > li.active > a > i:first-child,
.sidebar-menu .treeview-menu > li:hover > a > i:first-child{opacity:1;}
.sidebar .user-panel{
  margin:8px 12px 4px; padding:12px; border-radius:var(--vc-r-md);
  background:rgba(255,255,255,.10); border-bottom:0;
}
.sidebar .user-panel .info p,.sidebar .user-panel .info a{color:#eef0ff !important;}
.sidebar-form{border-radius:var(--vc-r-sm) !important; overflow:hidden; margin:8px 12px !important; border:0 !important;}

/* ── 06  CONTENT SHELL ────────────────────────────────────────────────────────────────────── */
.content-header{padding:20px 20px 8px;}
.content-header > h1{
  font-size:clamp(26px,3vw,38px);
  font-weight:800; letter-spacing:-.04em; margin:0; color:var(--vc-ink);
}
.content-header > h1 > small{color:var(--vc-ink-3); font-size:15px; margin-left:8px; letter-spacing:0;}
.content-header > .breadcrumb{background:transparent; padding:0; font-size:12.5px; top:26px;}
.content-header > .breadcrumb a{color:var(--vc-ink-3);}
.content-header > .breadcrumb > .active{color:var(--vc-ink-2);}

/* ── 07  CARDS / BOXES / KPI TILES ────────────────────────────────────────────────────────── */
.box,.nav-tabs-custom{
  background:var(--vc-surface);
  border:0 !important;
  border-radius:var(--vc-r-lg) !important;
  box-shadow:var(--vc-sh-1) !important;
  margin-bottom:20px;
}
.box-header{border-bottom:1px solid var(--vc-line); padding:18px 20px;}
.box-header .box-title{font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--vc-ink);}
.box-body{padding:20px;}
.box-footer{background:var(--vc-surface-3); border-top:1px solid var(--vc-line); border-radius:0 0 var(--vc-r-lg) var(--vc-r-lg);}
.box.box-solid > .box-header{background:var(--vc-surface-3) !important; color:var(--vc-ink) !important;}

/* KPI tiles: pastel fills, oversized numerals - the design's "mini-kpi" */
.small-box,.info-box{
  border:0 !important;
  border-radius:var(--vc-r-lg) !important;
  box-shadow:var(--vc-sh-1) !important;
  color:var(--vc-ink) !important;
  overflow:hidden;
  background:var(--vc-surface);
}
.small-box > .inner{padding:20px;}
.small-box h3{
  font-size:42px !important; font-weight:900; letter-spacing:-.04em;
  color:var(--vc-ink) !important; margin:6px 0 4px; line-height:1;
}
.small-box p{color:#424863 !important; font-size:14px; font-weight:700; margin:0; text-transform:none; letter-spacing:0;}
.small-box .icon{color:rgba(31,35,51,.10) !important; font-size:66px !important; top:14px; right:16px;}
.small-box:hover .icon{color:rgba(31,35,51,.14) !important;}
.small-box > .small-box-footer{
  background:rgba(255,255,255,.45) !important; color:var(--vc-ink-2) !important;
  font-size:12.5px; font-weight:600; border-top:0;
}
.small-box > .small-box-footer:hover{background:rgba(255,255,255,.75) !important; color:var(--vc-ink) !important;}

/* map AdminLTE's colour classes onto the pastel palette */
.small-box.bg-green,.small-box.bg-green-active{background:var(--vc-mint) !important;}
.small-box.bg-yellow,.small-box.bg-orange{background:var(--vc-yellow) !important;}
.small-box.bg-red,.small-box.bg-maroon{background:var(--vc-pink) !important;}
.small-box.bg-aqua,.small-box.bg-light-blue,.small-box.bg-primary{background:var(--vc-blue) !important;}
.small-box.bg-purple,.small-box.bg-navy,.small-box.bg-teal{background:var(--vc-lilac) !important;}

.info-box{background:var(--vc-surface) !important; padding:6px;}
.info-box-icon{
  border-radius:var(--vc-r-md) !important;
  background:var(--vc-azure-soft) !important; color:var(--vc-purple) !important;
}
.info-box-text{color:#424863 !important; font-size:14px; font-weight:700; text-transform:none; letter-spacing:0;}
.info-box-number{color:var(--vc-ink) !important; font-size:32px; font-weight:900; letter-spacing:-.04em;}
.progress,.progress-bar{border-radius:var(--vc-r-pill) !important;}
.progress{background:rgba(42,40,27,.10);}
.progress-bar{background:linear-gradient(90deg,var(--vc-nav) 0%, var(--vc-purple) 55%, var(--vc-teal) 100%);}

/* ── 07b  DASHBOARD — to match the VendorVista reference (preview) ─────────────────────────── */
/* Ambient background accents like the reference .content area (soft coloured light from the corners) */
.content-wrapper,.right-side{
  background:
    radial-gradient(circle at 96% 2%, rgba(111,120,235,.10), transparent 26%),
    radial-gradient(circle at 2% 4%, rgba(103,183,163,.08), transparent 22%) !important;
}

/* Dashboard cards: bigger radius + soft lift on hover, like the reference */
.content-wrapper .box{
  border-radius:var(--vc-r-xl) !important;
  box-shadow:var(--vc-sh-1) !important;
  transition:box-shadow .2s var(--vc-ease, ease), transform .2s ease;
}
.content-wrapper .box:hover{box-shadow:var(--vc-shadow-hover, 0 18px 42px rgba(93,104,165,.20)) !important;}
.content-wrapper .box-header{border-bottom:0; padding-bottom:6px;}
.content-wrapper .box-header .box-title{font-size:19px; font-weight:800; letter-spacing:-.03em;}

/* KPI tiles as the reference "mini-kpi": very round, huge number, NO faded background icon,
   a subtle coloured base rule keeping the semantic meaning of the AdminLTE colour class. */
.content-wrapper .small-box{
  border-radius:var(--vc-r-xl) !important;
  position:relative; overflow:hidden;
  box-shadow:var(--vc-sh-1) !important;
  transition:transform .18s ease, box-shadow .2s ease;
  min-height:120px;
}
.content-wrapper .small-box:hover{transform:translateY(-2px); box-shadow:var(--vc-shadow-hover, 0 18px 42px rgba(93,104,165,.18)) !important;}
.content-wrapper .small-box > .inner{padding:20px 22px;}
.content-wrapper .small-box h3{font-size:44px !important; font-weight:900; letter-spacing:-.045em; margin:2px 0 2px;}
.content-wrapper .small-box p{font-size:14px; font-weight:700; color:#4a5070 !important;}
/* the reference tiles have no big watermark icon - shrink it to a small badge in the corner */
.content-wrapper .small-box > .icon{
  font-size:26px !important; top:18px !important; right:20px !important;
  color:rgba(31,35,51,.22) !important; width:auto; height:auto;
}
.content-wrapper .small-box:hover > .icon{color:rgba(31,35,51,.30) !important;}
/* coloured base rule = keeps "which metric" legible at a glance without a saturated fill */
.content-wrapper .small-box::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;}
.content-wrapper .small-box.bg-green::after,.content-wrapper .small-box.bg-green-active::after{background:var(--vc-teal);}
.content-wrapper .small-box.bg-yellow::after,.content-wrapper .small-box.bg-orange::after{background:var(--vc-orange);}
.content-wrapper .small-box.bg-red::after,.content-wrapper .small-box.bg-maroon::after{background:#f26b7b;}
.content-wrapper .small-box.bg-aqua::after,.content-wrapper .small-box.bg-light-blue::after,.content-wrapper .small-box.bg-primary::after{background:var(--vc-purple);}
.content-wrapper .small-box.bg-purple::after,.content-wrapper .small-box.bg-navy::after,.content-wrapper .small-box.bg-teal::after{background:#8187d9;}

/* Chart cards: give the canvas breathing room and a clean rounded well */
.content-wrapper canvas{max-width:100%;}
.content-wrapper .box-warning > .box-body,
.content-wrapper .box-success > .box-body,
.content-wrapper .box-info > .box-body{background:transparent;}

/* the "Compliances Outlook" wrapper box holds the KPI tiles - let them breathe */
#EstablishmentComplianceOutlook .small-box,
[id*="ComplianceOutlook"] .small-box{margin-bottom:16px;}

/* Marquee / notices strip on the dashboard */
.content-wrapper marquee,.content-wrapper .marquee{color:var(--vc-ink-2);}

/* ── 08  STATUS LABELS / TAGS ─────────────────────────────────────────────────────────────── */
.label,.badge{
  border-radius:var(--vc-r-pill);
  font-weight:800; font-size:12px; letter-spacing:0;
  padding:6px 12px; border:0;
}
.label-success,.badge.bg-green{background:var(--vc-good-soft) !important; color:var(--vc-good) !important;}
.label-warning,.badge.bg-yellow{background:var(--vc-warn-soft) !important; color:var(--vc-warn) !important;}
.label-danger, .badge.bg-red{background:var(--vc-crit-soft) !important; color:var(--vc-crit) !important;}
.label-info,   .badge.bg-aqua,.badge.bg-blue{background:var(--vc-info-soft) !important; color:var(--vc-info) !important;}
.label-default,.badge.bg-gray{background:var(--vc-neut-soft) !important; color:var(--vc-neut) !important;}

/* ── 09  FORMS & CONTROLS ─────────────────────────────────────────────────────────────────── */
label{font-size:13px; font-weight:700; color:var(--vc-ink); margin-bottom:6px;}
.form-control,
.select2-container--default .select2-selection--single{
  border:1px solid var(--vc-line) !important;
  border-radius:var(--vc-r-sm) !important;
  box-shadow:none !important;
  background:var(--vc-surface);
  color:var(--vc-ink);
  font-size:14px;
  height:auto;
  padding:11px 15px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--vc-purple) !important;
  box-shadow:0 0 0 4px rgba(109,112,235,.14) !important;
}
.form-control[disabled],.form-control[readonly]{background:var(--vc-surface-3) !important; color:var(--vc-ink-disabled);}
.form-control::placeholder{color:#9ba3c7;}
.help-block{font-size:12.5px; color:var(--vc-ink-3);}
.has-error .form-control{border-color:var(--vc-crit) !important; box-shadow:0 0 0 4px rgba(221,86,112,.12) !important;}
.has-error .help-block,.has-error .control-label{color:var(--vc-crit);}
.has-success .form-control{border-color:var(--vc-good) !important;}
.input-group-addon{background:var(--vc-surface-3); border-color:var(--vc-line); border-radius:var(--vc-r-sm); color:var(--vc-ink-2);}

/* ── 10  BUTTONS — pill shaped, purple primary with glow ──────────────────────────────────── */
.btn{
  border-radius:var(--vc-r-pill) !important;
  font-weight:800;
  font-size:14px;
  padding:11px 20px;
  border:0;
  box-shadow:none;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary,.btn-info{background:var(--vc-nav) !important; color:#fff !important; box-shadow:var(--vc-glow) !important;}
.btn-primary:hover,.btn-info:hover,.btn-primary:focus,.btn-info:focus{background:var(--vc-nav-dark) !important;}
.btn-default{background:#eff2ff !important; color:#555cd4 !important;}
.btn-default:hover,.btn-default:focus{background:#e3e8ff !important; color:#4a51c2 !important;}
.btn-success{background:var(--vc-teal) !important; color:#fff !important;}
.btn-danger{background:#f26b7b !important; color:#fff !important;}
.btn-warning{background:#f5a44c !important; color:#fff !important;}
.btn-success:hover,.btn-danger:hover,.btn-warning:hover{filter:brightness(.94);}
.btn.disabled,.btn[disabled]{background:var(--vc-surface-3) !important; color:var(--vc-ink-disabled) !important; box-shadow:none !important; opacity:1;}
.btn-flat{border-radius:var(--vc-r-pill) !important;}

/* ── 11  TABS, PAGINATION, MODALS, ALERTS ─────────────────────────────────────────────────── */
.nav-tabs-custom{border-radius:var(--vc-r-lg); box-shadow:var(--vc-sh-1); border:0;}
.nav-tabs-custom > .nav-tabs{border-bottom:1px solid var(--vc-line);}
.nav-tabs-custom > .nav-tabs > li.active{border-top-color:var(--vc-purple) !important;}
.nav-tabs-custom > .nav-tabs > li.active > a{color:var(--vc-ink); font-weight:800;}

.pagination > li > a,.pagination > li > span{
  color:var(--vc-azure); border:1px solid var(--vc-line);
  border-radius:var(--vc-r-xs) !important; margin:0 3px; font-weight:700;
}
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover{background:var(--vc-nav) !important; border-color:var(--vc-nav) !important; color:#fff !important;}

.modal-content{border:0; border-radius:var(--vc-r-xl); box-shadow:var(--vc-sh-3);}
.modal-header{border-bottom:1px solid var(--vc-line); padding:20px 24px;}
.modal-header .modal-title{font-weight:800; font-size:20px; letter-spacing:-.03em;}
.modal-body{padding:24px; color:var(--vc-ink-2);}
.modal-footer{background:var(--vc-surface-3); border-top:1px solid var(--vc-line); padding:16px 24px; border-radius:0 0 var(--vc-r-xl) var(--vc-r-xl);}

.alert{border-radius:var(--vc-r-md); border:0; font-size:14px; padding:16px 18px; font-weight:600;}
.alert-success{background:var(--vc-good-soft); color:var(--vc-good);}
.alert-warning{background:var(--vc-warn-soft); color:var(--vc-warn);}
.alert-danger,.alert-error{background:var(--vc-crit-soft); color:var(--vc-crit);}
.alert-info{background:var(--vc-info-soft); color:var(--vc-info);}

/* theme switch control in the header */
.theme-switch{
  display:inline-flex !important; align-items:center; gap:6px;
  margin:8px 6px; padding:9px 14px;
  background:rgba(255,255,255,.16); border-radius:var(--vc-r-pill);
  color:#fff !important; font-weight:700; font-size:13px;
}
.theme-switch:hover{background:rgba(255,255,255,.28);}

/* ── 12  TABLES + REGISTER PATTERN ────────────────────────────────────────────────────────── */
.table{background:transparent; margin-bottom:0;}
.table > thead > tr > th{
  background:transparent !important;
  color:#8a90ab !important;
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  border-bottom:1px solid var(--vc-line) !important;
  border-top:0 !important;
  padding:14px 12px;
  white-space:nowrap;
}
.table > tbody > tr > td{
  border-top:1px solid var(--vc-line) !important;
  padding:16px 12px;
  color:var(--vc-ink-2);
  vertical-align:middle;
  font-size:14px;
}
.table-striped > tbody > tr:nth-of-type(odd){background:var(--vc-surface-3) !important;}
.table-hover > tbody > tr:hover{background:var(--vc-azure-soft) !important;}
.table-bordered,.table-bordered > tbody > tr > td,.table-bordered > thead > tr > th{border-color:var(--vc-line) !important;}

/* Sticky header. :not(.dataTable) is REQUIRED - 84 pages initialise DataTables with
   fixedHeader:true, which floats its own cloned header; applying position:sticky as well would
   render a doubled header, so where DataTables is present we let it own the behaviour. */
.box-body > div[style*="overflow"] .table:not(.dataTable) > thead > tr > th,
.table-responsive .table:not(.dataTable) > thead > tr > th{position:sticky; top:0; z-index:2;}

.vc-report{
  background:var(--vc-surface);
  border:0 !important;
  border-radius:var(--vc-r-lg);
  box-shadow:var(--vc-sh-1);
  overflow:hidden;
}
.vc-report-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin:0; padding:18px 20px;
  background:var(--vc-surface-3);
  border-bottom:1px solid var(--vc-line);
}
.vc-report-meta dt{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8a90ab; font-weight:800; margin:0;}
.vc-report-meta dd{margin:4px 0 0; font-size:15px; color:var(--vc-ink); font-weight:700;}

.vc-register{margin:0 !important; background:transparent;}
.vc-register > thead > tr > th{
  background:transparent !important; color:#8a90ab !important;
  border:0 !important; border-bottom:1px solid var(--vc-line) !important;
}
.vc-register:not(.dataTable) > thead > tr > th{position:sticky; top:0; z-index:2; background:var(--vc-surface) !important;}
.vc-register > tbody > tr > td,
.vc-register > tr > td{border:0 !important; border-top:1px solid var(--vc-line) !important;}
.vc-register > tbody > tr:hover > td{background:var(--vc-azure-soft);}
.vc-register .vc-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* status cell -> pill, coloured from the row class the query already emits */
.vc-register .vc-status span{
  display:inline-block; padding:6px 12px; border-radius:var(--vc-r-pill);
  font-size:12px; font-weight:800; white-space:nowrap;
  background:var(--vc-neut-soft); color:var(--vc-neut);
}
.vc-register tr.bg-red    .vc-status span{background:var(--vc-crit-soft); color:var(--vc-crit);}
.vc-register tr.bg-yellow .vc-status span{background:var(--vc-warn-soft); color:var(--vc-warn);}
.vc-register tr.bg-green  .vc-status span{background:var(--vc-good-soft); color:var(--vc-good);}

/* row state: soft tint + left stripe, replacing AdminLTE's solid fills */
.vc-register tr.bg-red   > td,
.vc-register tr.bg-yellow> td,
.vc-register tr.bg-green > td{color:var(--vc-ink) !important; font-weight:600;}
.vc-register tr.bg-red   > td{background:var(--vc-crit-soft) !important;}
.vc-register tr.bg-yellow> td{background:var(--vc-warn-soft) !important;}
.vc-register tr.bg-green > td{background:var(--vc-good-soft) !important;}
.vc-register tr.bg-red   > td:first-child{box-shadow:inset 4px 0 0 #f26b7b;}
.vc-register tr.bg-yellow> td:first-child{box-shadow:inset 4px 0 0 #f5a44c;}
.vc-register tr.bg-green > td:first-child{box-shadow:inset 4px 0 0 #39b987;}

.vc-empty{text-align:center; padding:40px 20px; color:var(--vc-ink-2);}
.vc-empty-art{
  width:64px; height:64px; margin:0 auto 16px; border-radius:var(--vc-r-md);
  background:var(--vc-azure-soft); color:var(--vc-purple); display:grid; place-items:center;
}
.vc-empty strong{display:block; font-size:18px; color:var(--vc-ink); margin-bottom:6px; letter-spacing:-.02em;}
.vc-empty p{font-size:14px; color:var(--vc-ink-3); max-width:52ch; margin:0 auto;}

/* GridView pager */
.table .GridPager a,.table .GridPager span{
  display:inline-block; min-width:32px; padding:6px 10px; margin:0 3px;
  border:1px solid var(--vc-line); border-radius:var(--vc-r-xs);
  background:var(--vc-surface); color:var(--vc-azure); text-decoration:none; font-weight:700;
}
.table .GridPager span{background:var(--vc-nav); border-color:var(--vc-nav); color:#fff;}

/* -- Register + master data-entry patterns MOVED to vc-foundation.css (section 12b).
   They are theme-agnostic and token-driven, so they now work under EVERY theme including
   Classic (which loads no theme file at all), and are defined exactly once. -- */

/* ── 14  LEGACY INLINE-STYLE NEUTRALISERS (site-wide) ─────────────────────────────────────── */
/* The slate "#5D7B9D" table treatment is hard-coded as an INLINE style attribute on ~280 of the
   387 pages. An author declaration marked !important outranks a non-important inline declaration,
   so it is neutralised here rather than by editing 280 files. No markup is touched. */
thead[style*="5D7B9D"],
thead[style*="5d7b9d"]{background:transparent !important; color:#8a90ab !important;}
thead[style*="5D7B9D"] > tr > th,
thead[style*="5d7b9d"] > tr > th{
  background:transparent !important; color:#8a90ab !important; border-color:var(--vc-line) !important;
}
[style*="solid #5D7B9D"],
[style*="solid #5d7b9d"]{
  border:0 !important; border-radius:var(--vc-r-lg);
  background:var(--vc-surface); box-shadow:var(--vc-sh-1); overflow:hidden;
}
[style*="solid #000000"]{border-color:var(--vc-line) !important;}

/* legacy fixed-width report cages: let the table scroll, never the page */
div[style*="1050px"],
div[style*="1050PX"]{
  width:100% !important; max-width:100% !important;
  height:auto !important; max-height:70vh; overflow:auto !important;
}
.table-responsive{border:0; overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ── 15  margin-top:20px ALIGNMENT (progressive enhancement) ──────────────────────────────── */
/* 54 pages lift a button level with an input using an inline margin-top:20px magic number.
   Where :has() is supported the row becomes a flex row aligned to the bottom and the magic number
   is retired - but only inside rows we actually converted. Where :has() is unsupported the whole
   block is discarded and the original behaviour remains, so there is no regression either way. */
@supports selector(:has(*)){
  .box-body .row:has(> [class*="col-"] > [style*="margin-top:20px"]){
    display:flex; flex-wrap:wrap; align-items:flex-end;
  }
  .box-body .row:has(> [class*="col-"] > [style*="margin-top:20px"])::before,
  .box-body .row:has(> [class*="col-"] > [style*="margin-top:20px"])::after{display:none;}
  .box-body .row:has(> [class*="col-"] > [style*="margin-top:20px"]) > [class*="col-"]{float:none;}
  .box-body .row:has(> [class*="col-"] > [style*="margin-top:20px"]) [style*="margin-top:20px"]{
    margin-top:0 !important;
  }
}

/* ── 16  RESPONSIVE ───────────────────────────────────────────────────────────────────────── */
@media (max-width:991px){
  .content-header{padding:16px 15px 6px;}
  .content-header > h1{font-size:26px;}
  .box{border-radius:var(--vc-r-md) !important;}
  .small-box h3{font-size:34px !important;}
  .vc-report-meta{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
  body{font-size:13.5px;}
  .content-header > h1{font-size:24px;}
  .box-body{padding:16px;}
  .box{border-radius:var(--vc-r-sm) !important; margin-bottom:14px;}
  .table{font-size:13px;}
  .table > thead > tr > th,.table > tbody > tr > td{padding:11px 9px;}
  .btn{padding:10px 16px; font-size:13.5px;}
  .small-box h3{font-size:30px !important;}
  .vc-report-meta{grid-template-columns:1fr; gap:10px; padding:14px 16px;}
  .vc-formrow .vc-actions{width:100%;}
  .vc-formrow .vc-actions .btn{flex:1 1 auto; justify-content:center;}
  .theme-switch{margin:6px 4px; padding:7px 12px; font-size:12px;}
}

/* ── 17  ACCESSIBILITY ────────────────────────────────────────────────────────────────────── */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--vc-purple) !important;
  outline-offset:2px !important;
  border-radius:var(--vc-r-xs);
}
.main-header .navbar .nav > li > a:focus-visible,
.sidebar-menu > li > a:focus-visible{outline:3px solid #fff !important; outline-offset:-3px !important;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ── 18  DARK MODE (OPT-IN ONLY) ──────────────────────────────────────────────────────────── */
/* Deliberately NOT wired to prefers-color-scheme - flipping the app dark because someone's OS is
   dark is a change nobody asked for. Set <html data-vc-dark="1"> to enable. */
html[data-vc-dark="1"]{
  --vc-canvas:#12131c;  --vc-surface:#1b1d2b;  --vc-surface-2:#20223260;  --vc-surface-3:#232539;
  --vc-line:#2c2f45;    --vc-line-strong:#3a3d57;
  --vc-ink:#eceefb;     --vc-ink-2:#b6bad6;    --vc-ink-3:#8b90b3;  --vc-ink-disabled:#5e6384;
  --vc-mint:#1c3330;    --vc-pink:#331f28;     --vc-yellow:#332c19; --vc-lilac:#26233d; --vc-blue:#1d2740;
  --vc-good:#5fc79a;  --vc-good-soft:#122c22;
  --vc-warn:#e0ae5c;  --vc-warn-soft:#2c2415;
  --vc-crit:#f08a7f;  --vc-crit-soft:#2e1815;
  --vc-info:#9ba0ff;  --vc-info-soft:#1e2140;
  --vc-neut:#93a4b6;  --vc-neut-soft:#232539;
  --vc-azure-soft:#232746;
  --vc-sh-1:0 12px 28px rgba(0,0,0,.45);
  --vc-sh-2:0 16px 38px rgba(0,0,0,.5);
  --vc-sh-3:0 24px 60px rgba(0,0,0,.6);
}
html[data-vc-dark="1"] body{background:linear-gradient(180deg,#151726 0%, #12131c 60%, #101018 100%) fixed !important;}