/* ============================================================================
   HARDTRAC UI — shared polish layer  (hardtrac-ui.css)
   ----------------------------------------------------------------------------
   Loaded on EVERY page AFTER the page's own <style>, so it refines the existing
   look without replacing it. Every page already declares the same design tokens
   (--color-primary, --color-gray-*, etc.); this layer hooks into them and adds
   sensible fallbacks so it also works on pages that name them differently.

   Goal: one consistent, calm, fast, accessible enterprise look across all 25
   pages — smoother motion, cleaner tables/inputs/buttons, better focus states,
   loading shimmers, and a unified toast/modal feel. No business logic touched.
   ============================================================================ */

:root{
  /* Fallback bridge: if a page used a different token name we still resolve. */
  --ht-primary:        var(--color-primary, var(--primary, #2563eb));
  --ht-primary-hover:  var(--color-primary-hover, var(--primary-hover, #1d4ed8));
  --ht-primary-light:  var(--color-primary-light, var(--primary-50, #eff6ff));
  --ht-success:        var(--color-success, var(--success, #10b981));
  --ht-warning:        var(--color-warning, var(--warning, #f59e0b));
  --ht-danger:         var(--color-danger, var(--danger, #ef4444));
  --ht-ink:            var(--color-gray-900, var(--ink, #0f172a));
  --ht-muted:          var(--color-gray-500, var(--muted, #64748b));
  --ht-line:           var(--border-color, var(--line, #e2e8f0));
  --ht-surface:        var(--bg-surface, var(--surface, #ffffff));
  --ht-surface-2:      var(--color-gray-50, var(--surface-2, #f8fafc));
  --ht-radius:         var(--border-radius, 8px);
  --ht-radius-sm:      var(--border-radius-sm, 5px);
  --ht-shadow-sm:      0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --ht-shadow:         0 4px 14px -4px rgba(15,23,42,.12), 0 2px 6px -2px rgba(15,23,42,.08);
  --ht-shadow-lg:      0 18px 48px -12px rgba(15,23,42,.28);
  --ht-ease:           cubic-bezier(.22,.61,.36,1);
  --ht-dur:            .18s;
}

/* ---- typography & rendering smoothing (subtle, global) ------------------- */
html{ -webkit-text-size-adjust:100%; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---- nicer, quieter scrollbars ------------------------------------------- */
*{ scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:#cbd5e1; border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
  transition:background var(--ht-dur);
}
*::-webkit-scrollbar-thumb:hover{ background:#94a3b8; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- consistent focus ring (accessibility, keyboard nav) ----------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ht-primary);
  outline-offset:2px;
  border-radius:var(--ht-radius-sm);
}

/* ---- buttons: smooth press + lift (applies to common button patterns) ---- */
button, .btn, .btn-sm, .portal-btn, input[type="button"], input[type="submit"]{
  transition:
    transform var(--ht-dur) var(--ht-ease),
    box-shadow var(--ht-dur) var(--ht-ease),
    background-color var(--ht-dur) var(--ht-ease),
    border-color var(--ht-dur) var(--ht-ease),
    color var(--ht-dur) var(--ht-ease) !important;
  will-change:transform;
}
button:not(:disabled):hover, .btn:not(:disabled):hover{ transform:translateY(-1px); }
button:not(:disabled):active, .btn:not(:disabled):active{ transform:translateY(0) scale(.985); }
button:disabled, .btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ---- inputs / selects: calmer borders + soft focus glow ------------------ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea{
  transition:border-color var(--ht-dur) var(--ht-ease),
             box-shadow var(--ht-dur) var(--ht-ease),
             background-color var(--ht-dur) var(--ht-ease) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus, textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ht-primary) 18%, transparent);
}

/* ---- tables: tighter, scannable, sticky headers, zebra hover ------------- */
table{ border-collapse:separate; border-spacing:0; }
thead th{
  position:sticky; top:0; z-index:2;
  background:var(--ht-surface-2);
  backdrop-filter:saturate(1.2);
}
tbody tr{ transition:background-color var(--ht-dur) var(--ht-ease); }
tbody tr:hover{ background:color-mix(in srgb, var(--ht-primary) 5%, transparent); }

/* ---- cards / panels: unified soft elevation ------------------------------ */
.card, .panel, .kpi, .stat-card, .ht-card{
  border-radius:var(--ht-radius);
  box-shadow:var(--ht-shadow-sm);
  transition:box-shadow var(--ht-dur) var(--ht-ease),
             transform var(--ht-dur) var(--ht-ease);
}
.card:hover, .kpi:hover, .stat-card:hover, .ht-card:hover{
  box-shadow:var(--ht-shadow);
}

/* ---- modal/overlay polish ------------------------------------------------ */
.modal, .overlay, [class*="modal-overlay"], [class*="overlay"]{
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

/* ============================================================================
   HARDTRAC UI components added by hardtrac-ui.js (toast, loader, page-enter)
   ============================================================================ */

/* page fade-in on load */
.ht-fade-in{ animation:htFadeIn .28s var(--ht-ease) both; }
@keyframes htFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* skeleton shimmer for loading states */
.ht-skeleton{
  position:relative; overflow:hidden;
  background:#eef2f7; border-radius:var(--ht-radius-sm);
}
.ht-skeleton::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:htShimmer 1.2s infinite;
}
@keyframes htShimmer{ 100%{ transform:translateX(100%); } }

/* inline spinner */
.ht-spinner{
  display:inline-block; width:16px; height:16px; vertical-align:-3px;
  border:2px solid color-mix(in srgb, var(--ht-primary) 30%, transparent);
  border-top-color:var(--ht-primary);
  border-radius:50%; animation:htSpin .7s linear infinite;
}
@keyframes htSpin{ to{ transform:rotate(360deg); } }

/* top progress bar (route/fetch activity) */
#ht-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0;
  background:linear-gradient(90deg,var(--ht-primary),var(--ht-success));
  box-shadow:0 0 8px var(--ht-primary);
  z-index:99999; transition:width .2s var(--ht-ease), opacity .3s;
  opacity:0; pointer-events:none;
}

/* toast stack */
#ht-toast-wrap{
  position:fixed; right:18px; bottom:18px; z-index:100000;
  display:flex; flex-direction:column; gap:10px; max-width:360px;
  pointer-events:none;
}
.ht-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--ht-radius);
  background:var(--ht-ink); color:#fff;
  box-shadow:var(--ht-shadow-lg);
  font:500 13px/1.4 var(--font-family,'Inter',system-ui,sans-serif);
  animation:htToastIn .26s var(--ht-ease) both;
}
.ht-toast.ht-out{ animation:htToastOut .22s var(--ht-ease) both; }
.ht-toast .ht-dot{ width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 auto; }
.ht-toast.success .ht-dot{ background:var(--ht-success); }
.ht-toast.error   .ht-dot{ background:var(--ht-danger); }
.ht-toast.info    .ht-dot{ background:var(--ht-primary); }
.ht-toast.warn    .ht-dot{ background:var(--ht-warning); }
@keyframes htToastIn{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1;transform:none;} }
@keyframes htToastOut{ to{ opacity:0; transform:translateY(8px) scale(.98);} }

/* ---- responsive: keep dense desktop UIs usable on smaller screens -------- */
@media (max-width:768px){
  #ht-toast-wrap{ left:12px; right:12px; max-width:none; }
}

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

/* ============================================================================
   PO TABLE — FIXED-HEIGHT INTERNAL SCROLL BOX  (added)
   ----------------------------------------------------------------------------
   Problem: the main PO table (#poTable) rendered at full height, so the page
   itself grew very tall and popups/footer landed far down the page.
   Fix: cap the table's wrapper to ~10 rows and scroll INSIDE the box. The
   table header is already position:sticky, so it stays pinned while the body
   scrolls. Pure CSS, no markup or logic changed, UI/UX otherwise identical.

   --ht-po-rows  : how many rows to show before the box scrolls (default 10)
   --ht-po-row-h : approximate height of one row in px (default 37)
   --ht-po-head-h: approximate height of the sticky header in px (default 40)
   Tune these in a page's :root if its rows are taller/shorter.
   ============================================================================ */
:root{
  --ht-po-rows:   10;
  --ht-po-row-h:  37px;
  --ht-po-head-h: 40px;
  --ht-po-box-h:  calc(var(--ht-po-head-h) + (var(--ht-po-rows) * var(--ht-po-row-h)));
}

/* Scope to the wrapper that actually contains the PO table, so every other
   table on the page is left completely alone. */
.table-container:has(#poTable){
  max-height: var(--ht-po-box-h);
  overflow-y: auto;
  overflow-x: auto;
  position: relative;            /* anchor for the sticky header */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* scrolling the box doesn't scroll the page */
}

/* Make sure the header stays pinned to the TOP OF THE BOX (not the page). */
.table-container:has(#poTable) #poTable thead th{
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Fallback for browsers without :has() — target the known PO wrapper class
   only when it directly wraps the data-table. Safe no-op elsewhere. */
@supports not (selector(:has(*))){
  #poTable{ display: table; }
  .table-container{
    /* leave generic containers as-is; the JS helper below adds the cap */
  }
}

/* ============================================================================
   HARDTRAC GLASS + COMPACT + MOBILE LAYER  (ht-glass-layer)
   ----------------------------------------------------------------------------
   Loaded on every page AFTER the page's own <style>. Refines the look into a
   strong light "glass" aesthetic, makes everything more compact so all data
   fits at 100% zoom, and adds mobile responsiveness. NO business logic, NO
   markup changes. Hooks the existing design tokens, with safe fallbacks.
   Disable per page if ever needed:  <html data-ht-glass="off">
   ============================================================================ */
:root{
  --htg-blur: 18px;
  --htg-glass: rgba(255,255,255,.62);
  --htg-glass-strong: rgba(255,255,255,.78);
  --htg-border: rgba(255,255,255,.65);
  --htg-ring: rgba(148,163,184,.28);
  --htg-shadow: 0 10px 30px -12px rgba(15,23,42,.22), 0 2px 8px -2px rgba(15,23,42,.10);
  --htg-shadow-lg: 0 24px 60px -18px rgba(15,23,42,.30);
}

/* A soft light background wash behind the glass (only if page bg is plain). */
html:not([data-ht-glass="off"]) body{
  background-attachment: fixed;
  background-image:
    radial-gradient(1100px 680px at 8% -8%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(1000px 620px at 105% 0%, rgba(56,189,248,.10), transparent 58%),
    linear-gradient(180deg, #f5f8fc 0%, #eef2f8 100%);
}

/* ---- Cards / panels / boxes become frosted glass ------------------------- */
html:not([data-ht-glass="off"]) .card,
html:not([data-ht-glass="off"]) .panel,
html:not([data-ht-glass="off"]) .box,
html:not([data-ht-glass="off"]) .widget,
html:not([data-ht-glass="off"]) .tile,
html:not([data-ht-glass="off"]) .section-card,
html:not([data-ht-glass="off"]) .stat-card,
html:not([data-ht-glass="off"]) .summary,
html:not([data-ht-glass="off"]) .search-box-container,
html:not([data-ht-glass="off"]) .table-container,
html:not([data-ht-glass="off"]) .filter-bar,
html:not([data-ht-glass="off"]) .toolbar{
  background: var(--htg-glass) !important;
  backdrop-filter: blur(var(--htg-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--htg-blur)) saturate(150%);
  border: 1px solid var(--htg-ring);
  box-shadow: var(--htg-shadow);
  border-radius: 14px;
}

/* ---- Login / selection page: hero glass card ----------------------------- */
html:not([data-ht-glass="off"]) .login-box,
html:not([data-ht-glass="off"]) .login-card,
html:not([data-ht-glass="off"]) .login-container,
html:not([data-ht-glass="off"]) .auth-box,
html:not([data-ht-glass="off"]) .selection-card,
html:not([data-ht-glass="off"]) .portal-card,
html:not([data-ht-glass="off"]) form[action*="login"],
html:not([data-ht-glass="off"]) .menu-grid > a,
html:not([data-ht-glass="off"]) .portal-grid > a,
html:not([data-ht-glass="off"]) .grid-link{
  background: var(--htg-glass-strong) !important;
  backdrop-filter: blur(calc(var(--htg-blur) + 6px)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--htg-blur) + 6px)) saturate(160%);
  border: 1px solid var(--htg-border);
  box-shadow: var(--htg-shadow-lg);
  border-radius: 18px;
}
/* portal/selection tiles lift on hover */
html:not([data-ht-glass="off"]) .menu-grid > a:hover,
html:not([data-ht-glass="off"]) .portal-grid > a:hover,
html:not([data-ht-glass="off"]) .portal-card:hover,
html:not([data-ht-glass="off"]) .grid-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 64px -18px rgba(15,23,42,.34);
  transition: transform .18s var(--ht-ease,ease), box-shadow .18s var(--ht-ease,ease);
}

/* ---- Sticky headers / navbars get glass too ------------------------------ */
html:not([data-ht-glass="off"]) header,
html:not([data-ht-glass="off"]) .navbar,
html:not([data-ht-glass="off"]) .topbar,
html:not([data-ht-glass="off"]) .app-header,
html:not([data-ht-glass="off"]) .page-header{
  background: rgba(255,255,255,.66) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--htg-ring);
}

/* ---- Modals / popups: frosted glass -------------------------------------- */
html:not([data-ht-glass="off"]) .modal,
html:not([data-ht-glass="off"]) .modal-content,
html:not([data-ht-glass="off"]) .popup,
html:not([data-ht-glass="off"]) .dialog,
html:not([data-ht-glass="off"]) .drawer{
  background: var(--htg-glass-strong) !important;
  backdrop-filter: blur(calc(var(--htg-blur) + 4px)) saturate(155%);
  -webkit-backdrop-filter: blur(calc(var(--htg-blur) + 4px)) saturate(155%);
  border: 1px solid var(--htg-border);
  box-shadow: var(--htg-shadow-lg);
  border-radius: 16px;
}

/* ---- Buttons: subtle glassy primary -------------------------------------- */
html:not([data-ht-glass="off"]) button:not(.close):not(.ht-info-fab),
html:not([data-ht-glass="off"]) .btn{
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
html:not([data-ht-glass="off"]) button:not(.close):not(.ht-info-fab):hover,
html:not([data-ht-glass="off"]) .btn:hover{ transform: translateY(-1px); filter: saturate(1.05); }
html:not([data-ht-glass="off"]) button:not(.close):not(.ht-info-fab):active,
html:not([data-ht-glass="off"]) .btn:active{ transform: translateY(0); }

/* ---- Inputs / selects: light frosted ------------------------------------- */
html:not([data-ht-glass="off"]) input:not([type="checkbox"]):not([type="radio"]),
html:not([data-ht-glass="off"]) select,
html:not([data-ht-glass="off"]) textarea{
  background: rgba(255,255,255,.7);
  border: 1px solid var(--htg-ring);
  border-radius: 9px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
html:not([data-ht-glass="off"]) input:focus,
html:not([data-ht-glass="off"]) select:focus,
html:not([data-ht-glass="off"]) textarea:focus{
  background: #fff;
  border-color: var(--ht-primary,#2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ---- Tables: glassy, sticky head, zebra, hover --------------------------- */
html:not([data-ht-glass="off"]) table thead th{
  background: rgba(241,245,251,.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #0b1220;
}
html:not([data-ht-glass="off"]) table tbody tr:hover > td{
  background: rgba(37,99,235,.06) !important;
}

/* ============================================================================
   COMPACT MODE — fit everything at 100% on all pages
   ============================================================================ */
:root{ --htc: 1; }
html:not([data-ht-compact="off"]) body{
  font-size: 13.5px;
  line-height: 1.42;
}
/* tighten the big data tables so more rows/cols are visible */
html:not([data-ht-compact="off"]) table.data-table,
html:not([data-ht-compact="off"]) table.table-compact,
html:not([data-ht-compact="off"]) table#poTable,
html:not([data-ht-compact="off"]) table#mainPoTable,
html:not([data-ht-compact="off"]) table#previewTable{
  font-size: 12px;
}
html:not([data-ht-compact="off"]) table.data-table th,
html:not([data-ht-compact="off"]) table.data-table td,
html:not([data-ht-compact="off"]) table.table-compact th,
html:not([data-ht-compact="off"]) table.table-compact td,
html:not([data-ht-compact="off"]) table#poTable th,
html:not([data-ht-compact="off"]) table#poTable td{
  padding: 5px 8px !important;
  line-height: 1.3;
}
/* tighten common spacing wrappers a touch */
html:not([data-ht-compact="off"]) .card,
html:not([data-ht-compact="off"]) .panel,
html:not([data-ht-compact="off"]) .section-card,
html:not([data-ht-compact="off"]) .search-box-container{
  padding: 12px 14px;
}
html:not([data-ht-compact="off"]) h1{ font-size: 1.45rem; }
html:not([data-ht-compact="off"]) h2{ font-size: 1.2rem; }
html:not([data-ht-compact="off"]) h3{ font-size: 1.02rem; }

/* ============================================================================
   MOBILE FRIENDLY
   ============================================================================ */
@media (max-width: 820px){
  html:not([data-ht-glass="off"]) body{ font-size: 13px; }
  /* stack common flex/grid rows on small screens */
  .filter-bar, .toolbar, .search-box-container, .controls, .actions-row{
    flex-wrap: wrap !important;
  }
  /* grids collapse to single / double column */
  .menu-grid, .portal-grid, .grid, .stats-grid, .cards-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* wide tables scroll horizontally inside their box instead of overflowing */
  .table-container, .table-wrap, .table-scroll{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table.data-table, table#poTable, table.table-compact{ min-width: 720px; }
  /* inputs/buttons become full-width-friendly and finger-sized */
  input, select, textarea, button, .btn{ font-size: 16px; } /* avoids iOS zoom */
  button, .btn{ min-height: 40px; }
  /* tighten page gutters */
  .container, main, .content, .page{ padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 560px){
  .menu-grid, .portal-grid, .grid, .stats-grid, .cards-grid{ grid-template-columns: 1fr !important; }
  h1{ font-size: 1.3rem; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ============================================================================
   HARDTRAC GLASS + LIGHT + COMPACT LAYER  (appended — v3)
   ----------------------------------------------------------------------------
   Requested: strong glass look, light theme, compact so everything fits at
   100% zoom, smarter/faster loaders, mobile-friendly. Pure presentation —
   no markup or business logic touched. Loads AFTER each page's own <style>.
   ============================================================================ */

/* ---- 1. STRONG GLASS surfaces -------------------------------------------- */
/* Cards, panels, modals, toolbars become frosted glass on a light base.      */
.card, .panel, .box, .widget, .tile, .stat-card, .summary, .filter-bar,
.toolbar, .search-box-container, .modal, .modal-content, .popup, .drawer,
.menu-card, .portal-card, .glass, .section-card, .data-centre-card{
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 8px 30px -12px rgba(15,23,42,0.18),
              inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* a soft light backdrop so the glass blur has something pretty to sample */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(96,165,250,0.16), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, rgba(167,139,250,0.14), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(45,212,191,0.10), transparent 60%),
    linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
}
/* Keep dark-themed pages readable: if a page sets a very dark body bg we still
   place our light wash behind glass without forcing text colour changes. */

/* glossy buttons */
button, .btn, input[type=submit], input[type=button]{
  border-radius: 10px;
  transition: transform .12s var(--ht-ease,ease), box-shadow .12s ease, background .12s ease;
}
button:hover, .btn:hover{ transform: translateY(-1px); }
button:active, .btn:active{ transform: translateY(0); }

/* frosted inputs */
input, select, textarea{
  border-radius: 9px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- 2. LOGIN / SELECTION page extra glass ------------------------------- */
.login-box, .login-card, .login-container, .auth-box, .selection,
.portal-grid, .menu-grid, .dashboard-grid{
  border-radius: 18px;
}
.login-box, .login-card, .login-container, .auth-box{
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 24px 70px -24px rgba(30,58,138,0.35) !important;
}
/* portal/menu tiles: glass cards that lift on hover */
.portal-card, .menu-card, .tile, .menu-grid > a, .portal-grid > a,
.dashboard-grid > a, .card-link{
  transition: transform .16s var(--ht-ease,ease), box-shadow .16s ease;
}
.portal-card:hover, .menu-card:hover, .tile:hover,
.menu-grid > a:hover, .portal-grid > a:hover, .card-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(30,58,138,0.3);
}

/* ---- 3. COMPACT at 100% (fit more data) ---------------------------------- */
/* Tighten spacing globally but gently, so all data shows without zooming out. */
:root{ --ht-compact: 1; }
body{ font-size: 13.5px; }
h1{ font-size: 1.45rem; margin:.4em 0; }
h2{ font-size: 1.18rem; margin:.4em 0; }
h3{ font-size: 1.02rem; }
.container, main, .content, .page, .wrap{ padding-top: 10px; padding-bottom: 10px; }
.card, .panel, .box, .widget, .summary, .section-card{ padding: 12px 14px; }

/* dense tables — show ~10+ rows without scrolling the page */
table.data-table th, table.data-table td,
table#poTable th, table#poTable td,
table.table-compact th, table.table-compact td,
table#mainPoTable th, table#mainPoTable td,
table#previewTable th, table#previewTable td{
  padding: 5px 8px !important;
  line-height: 1.25 !important;
  font-size: 12px !important;
}
table th{ white-space: nowrap; }
/* sticky headers look crisp on the glass */
thead th{ position: sticky; top: 0; }

/* ---- 4. SMART, FASTER LOADERS -------------------------------------------- */
/* faster top progress bar */
#ht-progress{ height: 3px; transition: width .18s ease, opacity .25s ease; }

/* skeleton shimmer for any element marked .ht-skeleton or [aria-busy] */
.ht-skeleton, [aria-busy="true"]{
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(226,232,240,.6) 25%, rgba(241,245,249,.9) 37%, rgba(226,232,240,.6) 63%);
  background-size: 400% 100%;
  animation: ht-shimmer 1.1s ease-in-out infinite;
  border-radius: 8px; color: transparent !important;
}
@keyframes ht-shimmer{ 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }

/* a smart, glassy spinner overlay used by the loader helper (ht-loader.js) */
.ht-load-overlay{
  position: fixed; inset: 0; z-index: 2147483400; display:flex;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background: rgba(244,247,252,0.45);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.ht-load-overlay.show{ opacity:1; pointer-events:auto; }
.ht-load-card{
  background: rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 20px 50px -20px rgba(30,58,138,0.3);
  border-radius: 16px; padding: 20px 26px; display:flex; align-items:center; gap:14px;
  color:#1e293b; font:600 13.5px -apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.ht-spin{
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(37,99,235,0.18); border-top-color:#2563eb;
  animation: ht-spin .7s linear infinite;
}
@keyframes ht-spin{ to{ transform: rotate(360deg); } }

/* ---- 5. MOBILE polish (extends earlier rules) ---------------------------- */
@media (max-width: 768px){
  body{ font-size: 13px; }
  .card, .panel, .box, .summary, .section-card{ padding: 12px; border-radius: 14px; }
  table.data-table th, table.data-table td,
  table#poTable th, table#poTable td,
  table.table-compact th, table.table-compact td{
    font-size: 11.5px !important; padding: 5px 6px !important;
  }
  /* selection grids: comfy single column with big tap targets */
  .menu-grid, .portal-grid, .dashboard-grid, .grid, .stats-grid, .cards-grid{
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  .portal-card, .menu-card, .tile{ padding: 16px !important; }
  .ht-help-panel{ width: 100vw !important; }
}
@media (max-width: 480px){
  h1{ font-size: 1.25rem; }
  .login-box, .login-card, .login-container, .auth-box{ width: 92vw !important; padding: 20px !important; }
}