/* ═══════════════════════════════════════════════════════════════════════════
   IBETECH — Unified Design System v6  "Carbon Pro"
   Every class used across all 55 files is defined exactly once here.
   One system. One source of truth.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  1. DESIGN TOKENS                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root {
  /* Surface layers */
  --bg1: #07080a;
  --bg2: #0e1014;
  --bg3: #14171d;
  --bg4: #1c2028;
  --bg5: #252b35;

  /* Borders */
  --border:    rgba(255,255,255,0.07);
  --border-lt: rgba(255,255,255,0.12);

  /* Foreground */
  --fg:          #eef0f4;
  --fg-soft:     #9aa3af;
  --muted:       #5f6876;
  --placeholder: #404957;

  /* Brand — electric amber-orange */
  --brand:        #f59e0b;
  --brand-dark:   #d97706;
  --brand-light:  #fbbf24;
  --brand-glow:   rgba(245,158,11,0.08);
  --brand-glow2:  rgba(245,158,11,0.16);

  /* Semantic */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;
  --purple:  #a78bfa;
  --cyan:    #22d3ee;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.9);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.7);
  --shadow:    0 4px 16px rgba(0,0,0,.7);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.8);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.9);

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Layout */
  --sidebar-w: 252px;
  --topbar-h:  62px;

  /* Motion */
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --spring: cubic-bezier(0.175,0.885,0.32,1.275);
  --dur:    0.18s;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  2. RESET                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:hidden; font-size:15px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:-0.01em;
  background:var(--bg1); color:var(--fg); line-height:1.6;
  min-height:100vh; overflow-x:hidden;
}
a { color:var(--brand); text-decoration:none; transition:color .14s; }
a:hover { color:var(--brand-light); }
img { max-width:100%; display:block; }
button,input,select,textarea { font-family:inherit; }
hr { border:none; height:1px; background:var(--border); margin:1rem 0; }
p  { margin:0; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  3. LAYOUT SHELL                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Sidebar */
.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg, var(--bg2) 0%, #080a0d 100%);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  z-index:1100;
  transition:transform .28s var(--ease);
  overflow-y:auto; overflow-x:hidden;
}
.sidebar::after {
  content:''; position:absolute; top:0; left:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,rgba(245,158,11,.2),transparent);
  pointer-events:none;
}

/* Main content */
.content {
  margin-left:var(--sidebar-w);
  padding:calc(var(--topbar-h) + 1.6rem) 1.8rem 3rem;
  box-sizing:border-box;
  width:calc(100% - var(--sidebar-w));min-width:0;overflow-x:hidden;
}

/* Topbar */
.topbar {
  position:fixed; top:0;
  left:var(--sidebar-w); right:0;
  height:var(--topbar-h);
  background:rgba(7,8,10,.9);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem;
  padding:0 1.5rem;
  z-index:1000;
}

/* Mobile overlay */
.overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  z-index:1050;
}
.overlay.open { display:block; }

/* ── Sidebar internals ── */
.sidebar-brand {
  padding:1.2rem 1.1rem .9rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.brand-logo {
  display:block; font-family:'Orbitron',monospace;
  font-size:1.05rem; font-weight:900; letter-spacing:.08em;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-sub {
  display:block; font-size:.6rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.14em; margin-top:.16rem;
}

.nav-list { list-style:none; padding:.5rem .65rem; flex:1; }

.nav-section-label {
  font-size:.57rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.18em;
  padding:.85rem .52rem .28rem;
}
.nav-link {
  display:flex; align-items:center; gap:.65rem;
  padding:.5rem .7rem; border-radius:var(--r-sm);
  color:var(--fg-soft); font-size:.83rem; font-weight:500;
  transition:background var(--dur),color var(--dur); white-space:nowrap;
}
.nav-link:hover { background:rgba(255,255,255,.05); color:var(--fg); text-decoration:none; }
.nav-link.active {
  background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(245,158,11,.05));
  color:var(--brand); font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand);
}
.nav-link i { width:16px; text-align:center; font-size:.86rem; flex-shrink:0; }

.sidebar-footer { padding:.65rem; border-top:1px solid var(--border); flex-shrink:0; }
.nav-link-logout { color:#f43f5e; }
.nav-link-logout:hover { background:rgba(244,63,94,.08); color:#f43f5e; text-decoration:none; }

/* ── Topbar internals ── */
.hamburger {
  background:transparent; border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--fg-soft);
  width:34px; height:34px; display:none;
  align-items:center; justify-content:center;
  cursor:pointer; font-size:.9rem; flex-shrink:0;
  transition:background var(--dur),border-color var(--dur);
}
.hamburger:hover { background:var(--bg4); border-color:var(--border-lt); }

.topbar-title {
  font-weight:700; font-size:.88rem; color:var(--fg-soft);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-right { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.topbar-user {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:600; color:var(--fg-soft);
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:.26rem .7rem .26rem .32rem;
}
.no-wrap { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  4. AVATAR                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
.avatar {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Orbitron',monospace; font-size:.78rem; font-weight:900;
  color:#000; flex-shrink:0;
}
.avatar-sm { width:28px; height:28px; font-size:.66rem; border-radius:6px; }
.avatar-lg { width:50px; height:50px; font-size:1rem; border-radius:var(--r); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  5. PAGE HEADER                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem; margin-bottom:1.35rem;
}
.page-header-left  { flex:1; min-width:0; }
.page-header-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.page-header h1,
.page-title {
  font-size:1.2rem; font-weight:800;
  display:flex; align-items:center; gap:.5rem; letter-spacing:-.02em;
}
.page-header h1 i,
.page-title i { color:var(--brand); }
.page-header p,
.page-subtitle { font-size:.74rem; color:var(--muted); margin-top:.12rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  6. CARDS                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
.card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color var(--dur);
}
.card:hover { border-color:rgba(255,255,255,.1); }

.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.82rem 1.1rem;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.016);
  flex-wrap:wrap; gap:.5rem;
}
.card-title {
  font-weight:700; font-size:.85rem;
  display:flex; align-items:center; gap:.4rem;
}
.card-body { padding:1.1rem; }

/* Table-card variant — card wrapping a table */
.table-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.table-card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.82rem 1.1rem; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.016); flex-wrap:wrap; gap:.5rem;
}
.table-card-title { font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:.4rem; }

/* "t-card" — public-facing track page card (same structure, different name) */
.t-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:1.1rem; }
.t-card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.82rem 1.1rem; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.016); flex-wrap:wrap; gap:.5rem;
}
.t-card-title { font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:.4rem; }
.t-card-body  { padding:1.1rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  7. STAT CARDS                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:.72rem;
}
.stat-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:.9rem 1rem .82rem; display:flex; align-items:center; gap:.75rem;
  position:relative; overflow:hidden;
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);
  cursor:default;
}
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--stat-color,var(--brand)); opacity:.75;
}
.stat-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top left,var(--stat-color,var(--brand)),transparent 65%);
  opacity:.04; pointer-events:none;
}
.stat-card:hover { border-color:var(--border-lt); box-shadow:0 4px 20px rgba(0,0,0,.45); transform:translateY(-1px); }
.stat-icon {
  width:38px; height:38px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0; position:relative; z-index:1;
}
.stat-info { flex:1; min-width:0; position:relative; z-index:1; }
.stat-value {
  font-weight:800; font-size:clamp(.76rem,2.5vw,1.02rem);
  font-family:'Orbitron',monospace; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat-label {
  font-size:.6rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-top:.08rem;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  8. BUTTONS                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.btn {
  display:inline-flex; align-items:center; gap:.36rem;
  padding:.43rem .9rem; border-radius:var(--r-sm);
  font-size:.82rem; font-weight:600; border:1px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:all .14s var(--ease);
  position:relative; overflow:hidden; user-select:none; line-height:1.4;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:scale(.96); }
.btn:disabled,.btn.disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }

.btn-primary {
  background:linear-gradient(155deg,var(--brand-light),var(--brand),var(--brand-dark));
  color:#000; border-color:var(--brand-dark);
  box-shadow:0 2px 8px rgba(245,158,11,.28),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { box-shadow:0 4px 16px rgba(245,158,11,.42); background:linear-gradient(155deg,#fcd34d,var(--brand-light),var(--brand)); }

.btn-success  { background:var(--success); color:#fff; border-color:#16a34a; }
.btn-success:hover { box-shadow:0 3px 12px rgba(34,197,94,.35); }
.btn-warning  { background:var(--warning); color:#000; border-color:#ca8a04; }
.btn-danger   { background:var(--danger);  color:#fff; border-color:#dc2626; }
.btn-danger:hover { box-shadow:0 3px 12px rgba(239,68,68,.35); }
.btn-info     { background:var(--info);    color:#fff; border-color:#2563eb; }

.btn-secondary { background:var(--bg4); color:var(--fg-soft); border-color:var(--border-lt); }
.btn-secondary:hover { background:var(--bg5); color:var(--fg); }

.btn-ghost { background:transparent; color:var(--muted); border-color:var(--border); }
.btn-ghost:hover { background:rgba(255,255,255,.05); color:var(--fg); border-color:var(--border-lt); }

.btn-brand { background:var(--brand-glow2); color:var(--brand); border-color:rgba(245,158,11,.38); }
.btn-brand:hover { background:rgba(245,158,11,.24); }

.btn-sm  { padding:.24rem .62rem; font-size:.73rem; gap:.26rem; }
.btn-lg  { padding:.62rem 1.45rem; font-size:.9rem; }
.btn-block { width:100%; justify-content:center; }
.btn-icon  { padding:.36rem; width:30px; height:30px; justify-content:center; border-radius:var(--r-sm); }

.btn-loading { pointer-events:none; opacity:.7; }
.btn-loading::before {
  content:''; width:12px; height:12px;
  border:2px solid rgba(255,255,255,.25); border-top-color:currentColor;
  border-radius:50%; animation:spin .6s linear infinite; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  9. FORMS                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
.form-group { margin-bottom:.95rem; }
.form-label {
  display:block; font-size:.75rem; font-weight:600;
  color:var(--fg-soft); margin-bottom:.32rem; letter-spacing:.1px;
}
.form-label .req { color:var(--danger); margin-left:2px; }

.form-control,
.form-select {
  width:100%;
  background:var(--bg3); border:1.5px solid var(--border-lt);
  border-radius:var(--r-sm); color:var(--fg);
  padding:.48rem .82rem; font-size:.83rem;
  transition:border-color .15s,box-shadow .15s,background .15s;
  appearance:none; -webkit-appearance:none;
}
.form-control:focus,
.form-select:focus {
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(245,158,11,.15);
  background:var(--bg4);
}
.form-control::placeholder { color:var(--placeholder); }
.form-control:read-only { opacity:.48; cursor:not-allowed; }
textarea.form-control { resize:vertical; min-height:78px; }

.form-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%235f6876' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.3rem;
}
.form-select option { background:var(--bg3); }
.form-hint  { font-size:.7rem; color:var(--muted); margin-top:.24rem; }
.form-error { font-size:.7rem; color:var(--danger); margin-top:.24rem; font-weight:600; }

.input-group { display:flex; gap:0; }
.input-group .form-control { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius:0 var(--r-sm) var(--r-sm) 0; flex-shrink:0; }

/* ── Search box ── */
.search-box { position:relative; }
.search-box .search-icon,
.search-box > i {
  position:absolute; left:.78rem; top:50%; transform:translateY(-50%);
  color:var(--placeholder); font-size:.8rem; pointer-events:none;
}
.search-box input {
  width:100%; background:var(--bg3); border:1.5px solid var(--border-lt);
  border-radius:var(--r-sm); color:var(--fg);
  padding:.46rem .8rem .46rem 2.2rem; font-size:.82rem;
  transition:border-color .15s,box-shadow .15s;
}
.search-box input:focus {
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(245,158,11,.14);
}
.search-box input::placeholder { color:var(--placeholder); }
.search-clear {
  position:absolute; right:.62rem; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:.8rem; cursor:pointer;
  transition:color .12s; text-decoration:none;
}
.search-clear:hover { color:var(--fg); }
.search-results {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--bg3); border:1px solid var(--border-lt);
  border-radius:var(--r); z-index:300;
  max-height:340px; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.search-bar { display:flex; gap:.4rem; padding:.65rem .95rem; }
.search-bar .form-control { flex:1; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  10. TOOLBAR  (filter bar above tables)                      ║
   ╚══════════════════════════════════════════════════════════════╝ */
.toolbar {
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-bottom:.85rem;
}
.toolbar .search-box { flex:1; min-width:180px; max-width:320px; }

/* ── Filter chips ── */
.filter-chips { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.filter-chip {
  display:inline-flex; align-items:center; gap:.32rem;
  padding:.28rem .75rem; border-radius:20px;
  font-size:.73rem; font-weight:600;
  border:1px solid var(--border-lt); background:var(--bg3); color:var(--fg-soft);
  text-decoration:none; white-space:nowrap; transition:all .14s; cursor:pointer;
}
.filter-chip:hover { background:var(--bg4); color:var(--fg); text-decoration:none; }
.filter-chip.active { background:var(--brand-glow2); border-color:rgba(245,158,11,.4); color:var(--brand); }
.filter-chip .count {
  background:rgba(255,255,255,.1); color:var(--fg-soft);
  font-size:.63rem; font-weight:700;
  padding:.02rem .35rem; border-radius:10px; min-width:17px; text-align:center;
}
.filter-chip.active .count { background:rgba(245,158,11,.2); color:var(--brand); }

/* ── Chip (inline status chip, no padding/height semantics) ── */
.chip {
  display:inline-flex; align-items:center; gap:.2rem;
  padding:.13rem .48rem; border-radius:12px;
  font-size:.67rem; font-weight:700; white-space:nowrap; border:1px solid;
}
.chip-tec     { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.3);  color:var(--brand); }
.chip-sec     { background:rgba(59,130,246,.1);  border-color:rgba(59,130,246,.28); color:#60a5fa; }
.chip-transit { background:rgba(234,179,8,.1);   border-color:rgba(234,179,8,.28);  color:#eab308; }
.chip-recv    { background:rgba(34,197,94,.1);   border-color:rgba(34,197,94,.28);  color:#22c55e; }
.chip-rej     { background:rgba(239,68,68,.08);  border-color:rgba(239,68,68,.28);  color:#ef4444; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  11. ALERTS                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.alert {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.7rem .95rem; border-radius:var(--r);
  font-size:.83rem; font-weight:500;
  border:1px solid transparent; margin-bottom:1rem;
}
.alert-success { background:rgba(34,197,94,.1);  border-color:rgba(34,197,94,.28);  color:#86efac; }
.alert-danger  { background:rgba(239,68,68,.1);  border-color:rgba(239,68,68,.28);  color:#fca5a5; }
.alert-warning { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.28); color:#fde68a; }
.alert-info    { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.28); color:#93c5fd; }

/* Notice (used in track.php for balance/paid status) */
.notice {
  display:flex; align-items:center; gap:.55rem;
  padding:.58rem .85rem; border-radius:var(--r-sm);
  font-size:.8rem; font-weight:600; border:1px solid;
  margin-bottom:.65rem;
}
.notice-warn { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.25); color:#fca5a5; }
.notice-ok   { background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.25);  color:#86efac; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  12. TABLES                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.table-wrap { overflow-x:auto; }
.table { width:100%; }
table { width:100%; border-collapse:collapse; font-size:.81rem; }
thead th {
  font-weight:700; font-size:.69rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  padding:.58rem .95rem; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.01); white-space:nowrap;
  text-align:left; vertical-align:middle;
}
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(245,158,11,.035); }
td { padding:.58rem .95rem; vertical-align:middle; color:var(--fg-soft); text-align:left; }

.td-mono {
  font-family:'Orbitron',monospace; font-size:.7rem;
  font-weight:700; color:var(--brand); letter-spacing:.4px;
}
.t-copy { cursor:pointer; transition:color .12s; }
.t-copy:hover { color:var(--brand); }

/* Cell user pattern */
.cell-user { display:flex; align-items:center; gap:.6rem; }
.cell-user-name { font-weight:600; font-size:.82rem; }
.cell-user-sub  { font-size:.69rem; color:var(--muted); }

/* Image thumb in tables */
.img-thumb {
  width:40px; height:40px; border-radius:var(--r-sm); object-fit:cover;
  border:1px solid var(--border); cursor:pointer;
  transition:transform .15s,border-color .15s;
}
.img-thumb:hover { transform:scale(1.06); border-color:var(--brand); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  13. BADGES                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.badge {
  display:inline-flex; align-items:center; gap:.28rem;
  padding:.2rem .58rem; border-radius:20px;
  font-size:.67rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; border:1px solid transparent;
}
.badge-dot::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex-shrink:0; display:inline-block;
}
.badge-blue    { background:rgba(59,130,246,.12);  color:#93c5fd; border-color:rgba(59,130,246,.25); }
.badge-green   { background:rgba(34,197,94,.12);   color:#86efac; border-color:rgba(34,197,94,.25); }
.badge-yellow  { background:rgba(245,158,11,.12);  color:#fde68a; border-color:rgba(245,158,11,.25); }
.badge-red     { background:rgba(239,68,68,.12);   color:#fca5a5; border-color:rgba(239,68,68,.25); }
.badge-purple  { background:rgba(167,139,250,.12); color:#c4b5fd; border-color:rgba(167,139,250,.25); }
.badge-orange  { background:rgba(245,158,11,.12);  color:#fdba74; border-color:rgba(245,158,11,.25); }
.badge-gray    { background:rgba(96,104,120,.1);   color:var(--muted); border-color:rgba(96,104,120,.2); }
.badge-brand   { background:var(--brand-glow2);    color:var(--brand); border-color:rgba(245,158,11,.3); }
.badge-success { background:rgba(34,197,94,.12);   color:#86efac; border-color:rgba(34,197,94,.25); }
.badge-warning { background:rgba(245,158,11,.12);  color:#fde68a; border-color:rgba(245,158,11,.25); }
.badge-danger  { background:rgba(239,68,68,.12);   color:#fca5a5; border-color:rgba(239,68,68,.25); }
.badge-pending { background:rgba(245,158,11,.12);  color:#fde68a; border-color:rgba(245,158,11,.25); }
.badge-cyan    { background:rgba(34,211,238,.1);   color:#67e8f9; border-color:rgba(34,211,238,.25); }

/* Status badges — used as standalone pills */
.status-pending     { @extend .badge; background:rgba(245,158,11,.12); color:#fde68a; border:1px solid rgba(245,158,11,.3);  padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-accepted    { background:rgba(59,130,246,.12);  color:#93c5fd; border:1px solid rgba(59,130,246,.3);  padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-in_progress { background:rgba(167,139,250,.1);  color:#c4b5fd; border:1px solid rgba(167,139,250,.28);padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-completed   { background:rgba(34,197,94,.12);   color:#86efac; border:1px solid rgba(34,197,94,.3);   padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-not_fixed   { background:rgba(239,68,68,.12);   color:#fca5a5; border:1px solid rgba(239,68,68,.28);  padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-collected   { background:rgba(34,211,238,.1);   color:#67e8f9; border:1px solid rgba(34,211,238,.28); padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-cancelled   { background:rgba(96,104,120,.1);   color:var(--muted); border:1px solid rgba(96,104,120,.2); padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.status-pill        { padding:.2rem .62rem; border-radius:20px; font-size:.67rem; font-weight:700; white-space:nowrap; border:1px solid transparent; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  14. MODALS                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);
  z-index:3000; display:none;
  align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open { display:flex; animation:fadeIn .18s var(--ease) both; }
/* Legacy .modal used in some files as alias for .modal-overlay */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); z-index:3000; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal.open,.modal[style*="flex"] { display:flex; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-box {
  background:var(--bg2); border:1px solid var(--border-lt);
  border-radius:var(--r-xl); box-shadow:var(--shadow-xl);
  width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  animation:slideUp .22s var(--spring) both;
}
@keyframes slideUp { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem 1.25rem; border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(245,158,11,.04),transparent);
}
.modal-title { font-size:.88rem; font-weight:800; display:flex; align-items:center; gap:.4rem; }
.modal-close {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--bg4); color:var(--muted); cursor:pointer; font-size:.82rem;
  transition:background var(--dur),color var(--dur);
}
.modal-close:hover { background:var(--bg5); color:var(--fg); }
.modal-body { padding:1.05rem 1.25rem; }
.modal-body + .modal-body { border-top:1px solid var(--border); }
.modal-footer {
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
  padding:.82rem 1.25rem; border-top:1px solid var(--border);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  15. PAGINATION                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */
.pagination,
.pagination-controls {
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
}
.pagination-info { font-size:.75rem; color:var(--muted); }
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 .48rem;
  border-radius:var(--r-sm); font-size:.76rem; font-weight:600;
  border:1px solid var(--border); color:var(--fg-soft);
  background:var(--bg3); text-decoration:none;
  transition:all var(--dur);
}
.page-btn:hover { background:var(--bg4); border-color:var(--border-lt); color:var(--fg); text-decoration:none; }
.page-btn.active { background:var(--brand); border-color:var(--brand); color:#000; }
.page-btn.disabled { opacity:.32; cursor:not-allowed; pointer-events:none; }
.page-ellipsis { color:var(--muted); font-size:.8rem; padding:0 .25rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  16. EMPTY STATE                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.empty,
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.5rem 1.5rem; text-align:center; color:var(--muted); gap:.65rem;
}
.empty i,.empty-state i { font-size:2.2rem; opacity:.18; display:block; }
.empty p,.empty-state h3 { font-size:.85rem; font-weight:600; color:var(--fg-soft); }
.empty-state p { font-size:.78rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  17. INFO GRID  (track page detail grid)                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
.info-grid  { display:grid; grid-template-columns:1fr 1fr; gap:.95rem; margin-bottom:1rem; }
.info-item  { }
.info-label { font-size:.65rem; color:var(--muted); text-transform:uppercase; font-weight:700; letter-spacing:.5px; margin-bottom:.18rem; }
.info-value { font-size:.88rem; color:var(--fg); font-weight:500; }

/* Data-meta (small inline label+value pairs in table rows) */
.data-meta { display:flex; flex-wrap:wrap; gap:.3rem .7rem; font-size:.72rem; color:var(--muted); }
.data-meta span { display:inline-flex; align-items:center; gap:.2rem; }

/* lbl / val — payment detail rows */
.lbl { color:var(--muted); font-size:.78rem; }
.val { font-weight:700; font-family:'Orbitron',monospace; font-size:.78rem; }
.val-green { color:var(--success); }
.val-red   { color:var(--danger); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  18. TIMELINE  (track.php job activity log)                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.timeline { display:flex; flex-direction:column; gap:0; }
.tl-item  { display:flex; gap:.85rem; position:relative; padding-bottom:1.15rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-line  { position:absolute; left:16px; top:36px; bottom:0; width:2px; background:var(--border); border-radius:2px; }
.tl-item:last-child .tl-line { display:none; }
.tl-content { flex:1; }
.tl-title   { font-size:.86rem; font-weight:700; color:var(--fg); }

/* Technician job-stage timeline (different markup, same concept) */
.tl-row { display:flex; gap:.58rem; padding:.48rem 0; position:relative; }
.tl-row:not(:last-child)::before { content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--border); border-radius:2px; }
.tl-dot  { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.67rem; z-index:1; }
.tl-name { font-weight:700; font-size:.81rem; }
.tl-note { font-size:.73rem; color:var(--muted); margin-top:.1rem; line-height:1.5; }
.tl-meta { font-size:.65rem; color:var(--muted); margin-top:.12rem; }
.tl-ev   { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.26rem; }
.tl-ev img { width:48px; height:48px; border-radius:8px; object-fit:cover; cursor:pointer; border:1.5px solid var(--border); transition:transform .15s,border-color .15s; }
.tl-ev img:hover { transform:scale(1.06); border-color:var(--brand); }

/* Job stage pills */
.aj-pill {
  display:inline-flex; align-items:center; gap:.36rem;
  padding:.26rem .7rem; border-radius:20px;
  border:1.5px solid var(--border); background:var(--bg3); color:var(--fg);
  font-size:.76rem; font-weight:600; text-decoration:none; transition:all .15s; white-space:nowrap;
}
.aj-pill:hover  { border-color:var(--brand); background:var(--brand-glow); text-decoration:none; }
.aj-pill.active { border-color:var(--brand); background:var(--brand-glow2); color:var(--brand); }

.sp { display:inline-flex; padding:.17rem .48rem; border-radius:12px; font-size:.7rem; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:var(--bg3); color:var(--muted); transition:all .12s; user-select:none; }
.sp:hover,.sp.sel { border-color:var(--brand); background:var(--brand-glow); color:var(--brand); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  19. REPAIR PROGRESS TRACK  (track.php)                      ║
   ╚══════════════════════════════════════════════════════════════╝ */
.repair-progress { padding:1.25rem 1.25rem .75rem; }
.progress-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.95rem; }
.progress-track { display:flex; position:relative; }
.progress-track::before { content:''; position:absolute; top:11px; left:0; right:0; height:2px; background:var(--border); z-index:0; }
.progress-step  { display:flex; flex-direction:column; align-items:center; gap:.45rem; z-index:1; position:relative; flex:1; }
.progress-dot   { width:24px; height:24px; border-radius:50%; border:2px solid var(--border); background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:.6rem; }
.progress-step.done   .progress-dot { background:var(--success); border-color:var(--success); color:#fff; }
.progress-step.active .progress-dot { background:var(--brand);   border-color:var(--brand);   color:#000; box-shadow:0 0 10px rgba(245,158,11,.4); }
.progress-step-label { font-size:.62rem; color:var(--muted); text-align:center; max-width:60px; font-weight:600; line-height:1.3; }
.progress-step-label.done   { color:var(--success); }
.progress-step-label.active { color:var(--brand); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  20. PAY ROW  (payment breakdown rows)                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.pay-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.42rem 0; border-bottom:1px solid var(--border);
  font-size:.82rem;
}
.pay-row:last-child { border-bottom:none; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  21. PARTS CHECKLIST  (edit_job.php)                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
.pt-row  { display:flex; align-items:center; gap:.52rem; padding:.38rem .18rem; border-bottom:1px solid var(--border); }
.pt-row:last-child { border-bottom:none; }
.pt-name { flex:1; font-size:.83rem; font-weight:500; }
.pt-bar  { flex:2; height:4px; background:var(--bg4); border-radius:4px; overflow:hidden; }
.pt-bar-fill { height:100%; border-radius:4px; background:var(--success); transition:width .3s; }
.pt-pill { display:inline-flex; align-items:center; gap:.18rem; padding:.13rem .42rem; border-radius:12px; font-size:.65rem; font-weight:700; }
.pt-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pt-tog  { width:34px; height:18px; border-radius:18px; background:var(--bg4); border:1px solid var(--border-lt); cursor:pointer; position:relative; transition:background .15s; flex-shrink:0; }
.pt-tog.on { background:var(--success); border-color:var(--success); }
.pt-knob { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .15s; }
.pt-tog.on .pt-knob { transform:translateX(16px); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  22. DEVICE TRACKER                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */
.poss-badge { display:inline-flex; align-items:center; gap:.26rem; padding:.2rem .58rem; border-radius:8px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.pb-transit { background:rgba(245,158,11,.1); border:1.5px solid rgba(245,158,11,.28); color:var(--warning); }
.pb-tec     { background:var(--brand-glow);  border:1.5px solid rgba(245,158,11,.28); color:var(--brand); }
.pb-sec     { background:rgba(59,130,246,.08);border:1.5px solid rgba(59,130,246,.22);color:#60a5fa; }

.trace-step { display:flex; align-items:flex-start; gap:.62rem; padding:.5rem 0; position:relative; }
.trace-line { position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--border); border-radius:2px; }
.trace-dot  { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.66rem; flex-shrink:0; z-index:1; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  23. CUSTOMERS LIST (.ccard rows)                            ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ccard {
  display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .8rem;
  padding:.65rem 1.1rem; border-bottom:1px solid var(--border);
  transition:background .12s; min-height:50px; border-left:3px solid var(--border);
}
.ccard:last-child { border-bottom:none; }
.ccard:hover { background:rgba(245,158,11,.03); }
.ccard.no-job      { border-left-color:var(--border); }
.ccard.has-active  { border-left-color:var(--warning); }
.ccard.has-balance { border-left-color:var(--danger); }
.ccard.all-done    { border-left-color:var(--success); }
.cav { width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.86rem; font-weight:900; color:#fff; font-family:'Orbitron',sans-serif; }
.cname       { font-weight:700; font-size:.83rem; white-space:nowrap; flex:0 0 auto; }
.cmeta-item  { display:inline-flex; align-items:center; gap:.18rem; font-size:.69rem; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.csep        { color:var(--border); flex-shrink:0; font-size:.72rem; }
.cstats      { display:flex; align-items:center; gap:.4rem; flex-shrink:0; font-size:.69rem; flex-wrap:nowrap; }
.cactions    { display:flex; align-items:center; gap:.32rem; flex-shrink:0; }
.c-stat      { font-size:.7rem; color:var(--muted); display:inline-flex; align-items:center; gap:.18rem; }
.cbtn        { display:inline-flex; align-items:center; gap:.26rem; padding:.2rem .56rem; border-radius:var(--r-sm); font-size:.71rem; font-weight:600; border:1px solid var(--border); background:var(--bg3); color:var(--fg-soft); text-decoration:none; transition:all .14s; }
.cbtn:hover  { background:var(--bg4); color:var(--fg); text-decoration:none; }
.cbtn-prof   { border-color:rgba(245,158,11,.35); color:var(--brand); background:var(--brand-glow); }
.cbtn-prof:hover { background:var(--brand-glow2); }
.owed  { color:var(--danger);  font-weight:700; }
.paid  { color:var(--success); font-weight:700; }

.jobs-strip { flex:1; min-width:175px; display:flex; flex-wrap:wrap; gap:.22rem; align-items:center; }
.jpill { display:inline-flex; align-items:center; gap:.2rem; padding:.16rem .52rem; border-radius:20px; font-size:.68rem; font-weight:600; border:1px solid var(--border); background:var(--bg3); color:var(--muted); cursor:pointer; transition:all .15s; text-decoration:none; white-space:nowrap; }
.jpill:hover       { border-color:var(--brand); color:var(--brand); background:var(--brand-glow); text-decoration:none; }
.jpill.active      { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.38); color:var(--brand); }
.jpill.done        { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.32); color:var(--success); }
.jpill.cancelled   { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.24); color:var(--danger); }
.jpill.no-tech     { background:rgba(96,104,120,.1); border-color:rgba(96,104,120,.22);color:#94a3b8; }
.jpill-dot         { width:4px; height:4px; border-radius:50%; flex-shrink:0; background:currentColor; }
.no-jobs-tag { display:inline-flex; align-items:center; gap:.22rem; padding:.14rem .5rem; border-radius:20px; font-size:.66rem; font-weight:600; border:1px dashed var(--border); color:var(--muted); }

/* Customer detail tabs */
.cc-tab { display:inline-flex; align-items:center; gap:.32rem; padding:.4rem .86rem; border-radius:var(--r-sm); font-size:.78rem; font-weight:600; border:1px solid var(--border); background:var(--bg3); color:var(--fg-soft); cursor:pointer; transition:all .14s; text-decoration:none; }
.cc-tab:hover  { background:var(--bg4); color:var(--fg); text-decoration:none; }
.cc-tab.active { background:var(--brand-glow2); border-color:rgba(245,158,11,.4); color:var(--brand); }
.cc-wrap       { }
.cc-avatar-ring { border:3px solid var(--brand); border-radius:50%; padding:2px; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  24. CALL LOG                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */
.cl-calls-list  { }
.cl-call-entry  { border-bottom:1px solid var(--border); padding:.62rem .95rem; transition:background .1s; }
.cl-call-entry:hover { background:rgba(255,255,255,.02); }
.cl-call-entry:last-child { border-bottom:none; }
.cl-call-time   { font-size:.66rem; color:var(--muted); }
.cl-call-note   { font-size:.8rem; margin-top:.18rem; }
.cl-expand-btn  { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.78rem; padding:.18rem .38rem; border-radius:var(--r-xs); transition:color .12s; }
.cl-expand-btn:hover { color:var(--brand); }
.cl-history-row      { display:none; }
.cl-history-row.open { display:table-row; }
.cl-inline-form { padding:.62rem .95rem; border-top:1px solid var(--border); background:rgba(255,255,255,.01); }
.cl-never       { color:var(--muted); font-style:italic; font-size:.76rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  25. JOB RETURNS                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.rj-hd    { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.rj-title { font-size:.98rem; font-weight:700; }
.rj-sub   { font-size:.72rem; color:var(--muted); }
.rj-row   { display:flex; align-items:center; gap:.62rem; padding:.52rem .88rem; text-decoration:none; border-bottom:1px solid var(--border); transition:background .1s; }
.rj-row:hover      { background:rgba(245,158,11,.03); text-decoration:none; }
.rj-row:last-child { border-bottom:none; }
.rj-chip  { font-size:.64rem; padding:.1rem .4rem; border-radius:7px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:var(--success); font-weight:700; }
.rj-orig-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:.58rem; margin-top:.5rem; }
.rj-orig-cell { background:var(--bg3); border-radius:9px; padding:.48rem .62rem; }
.rj-orig-lbl  { font-size:.59rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:.12rem; }
.rj-orig-val  { font-size:.79rem; font-weight:600; }
.rj-chain-pill { display:inline-flex; align-items:center; gap:.26rem; padding:.16rem .5rem; border-radius:20px; font-size:.67rem; font-weight:700; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  26. MEDIA RACK  (image/audio/video attachments)             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.media-rack { display:flex; flex-wrap:wrap; gap:.5rem; }
.media-pallet {
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  width:72px; cursor:pointer;
}
.media-pallet-thumb {
  width:68px; height:58px; border-radius:var(--r); overflow:hidden;
  border:1.5px solid var(--border); background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s; position:relative;
}
.media-pallet-thumb:hover { border-color:var(--brand); }
.media-pallet-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.media-pallet-audio { width:100%; }
.media-pallet-audio audio { width:100%; height:28px; }
.media-pallet-video video { width:100%; max-height:130px; }
.media-pallet-label { font-size:.62rem; color:var(--muted); text-align:center; }
.media-play-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem;
}
.media-lightbox-close {
  position:fixed; top:1rem; right:1rem; z-index:10000;
  background:rgba(0,0,0,.7); border:1px solid var(--border-lt);
  border-radius:50%; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; font-size:.9rem;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  27. NOTIFICATIONS BELL                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */
.notif-bell {
  position:relative; width:34px; height:34px;
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--fg-soft); font-size:.88rem;
  transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.notif-bell:hover { background:var(--bg5); border-color:var(--border-lt); color:var(--fg); }
.notif-dot {
  position:absolute; top:6px; right:6px;
  width:6px; height:6px; border-radius:50%;
  background:var(--brand); border:1.5px solid var(--bg2);
}
.notif-count {
  position:absolute; top:3px; right:3px;
  background:var(--brand); color:#000;
  font-size:.48rem; font-weight:800;
  padding:1px 3px; border-radius:8px; min-width:13px; text-align:center;
}
.bell-drop {
  position:absolute; top:calc(100% + 7px); right:0;
  width:300px; background:var(--bg2);
  border:1px solid var(--border-lt); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); z-index:500; overflow:hidden;
}
/* Bell dropdown — animated open/close */
.bell-drop { opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity .2s cubic-bezier(.21,1.02,.45,1), transform .22s cubic-bezier(.18,1.25,.4,1); }
.bell-drop.bd-open { opacity:1; transform:translateY(0) scale(1); }


/* Toast tray */
.jn-tray { position:fixed; top:70px; right:1rem; z-index:8888; display:flex; flex-direction:column; gap:.38rem; pointer-events:none; width:295px; }
.jn-card { background:var(--bg3); border:1px solid var(--border-lt); border-radius:var(--r-lg); padding:.75rem .95rem; box-shadow:var(--shadow-lg); pointer-events:all; animation:slideInRight .3s var(--ease) both; }
@keyframes slideInRight { from{opacity:0;transform:translateX(38px)} to{opacity:1;transform:none} }
.jn-card.out { animation:slideOutRight .24s var(--ease) both; }
@keyframes slideOutRight { to{opacity:0;transform:translateX(38px)} }

/* Lightbox */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:9999; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.lightbox-overlay.open { display:flex; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  28. RESPONSIVE GRIDS                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.grid-2col      { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.grid-3col      { display:grid; grid-template-columns:repeat(3,1fr); gap:.95rem; }
.grid-sidebar   { display:grid; grid-template-columns:1fr 310px; gap:1.2rem; align-items:start; }
.responsive-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.95rem; }
.responsive-grid-3{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.95rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  29. UTILITIES                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* Display */
.d-flex       { display:flex; }
.align-center { align-items:center; }
.gap-1 { gap:.32rem; } .gap-2 { gap:.62rem; } .gap-3 { gap:.95rem; } .gap-4 { gap:1.3rem; }
.flex-1   { flex:1; }
.flex-wrap{ flex-wrap:wrap; }
.flex-col { flex-direction:column; }
.justify-between { justify-content:space-between; }
.justify-center  { justify-content:center; }

/* Spacing */
.p-2  { padding:.62rem; }   .p-3 { padding:.88rem; } .p-4 { padding:1.2rem; } .p-5 { padding:1.5rem; }
.mb-0 { margin-bottom:0; }  .mb-1 { margin-bottom:.32rem; }
.mb-2 { margin-bottom:.62rem; } .mb-3 { margin-bottom:.95rem; } .mb-4 { margin-bottom:1.4rem; }
.mt-2 { margin-top:.62rem; }    .mt-3 { margin-top:.95rem; }    .mt-4 { margin-top:1.4rem; }

/* Text */
.text-right  { text-align:right; }
.text-center { text-align:center; }
.text-nowrap { white-space:nowrap; }
.text-sm     { font-size:.79rem; }
.text-xs     { font-size:.7rem; }
.text-muted  { color:var(--muted); }
.text-danger { color:var(--danger); }
.text-brand  { color:var(--brand); }
.text-success{ color:var(--success); }
.text-warning{ color:var(--warning); }
.fw-bold { font-weight:700; }
.fw-800  { font-weight:800; }
.icon    { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r); font-size:.9rem; flex-shrink:0; }
.timestamp { font-size:.66rem; color:var(--muted); white-space:nowrap; }
.fas { font-family:"Font Awesome 6 Free"; font-weight:900; }

/* Progress bar */
.prog-bar-wrap { background:var(--bg4); border-radius:20px; height:5px; overflow:hidden; }
.prog-bar      { height:100%; border-radius:20px; transition:width .5s var(--ease); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  30. LOGIN PAGES                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.login-page,
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:
    radial-gradient(ellipse 110% 70% at 50% -10%, rgba(245,158,11,.1), transparent),
    radial-gradient(ellipse 70% 60% at 85% 90%,  rgba(59,130,246,.06), transparent),
    var(--bg1);
}
.login-card,
.login-box {
  background:var(--bg2); border:1px solid var(--border-lt);
  border-radius:var(--r-xl); padding:2.1rem;
  width:100%; max-width:390px;
  box-shadow:var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.025);
  animation:slideUp .32s var(--ease) both;
}
.login-header  { margin-bottom:1.4rem; }
.login-logo    { display:block; font-family:'Orbitron',monospace; font-size:1.35rem; font-weight:900; background:linear-gradient(135deg,var(--brand-light),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.18rem; }
.login-subtitle{ display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.login-body    { }
.login-title   { font-weight:800; font-size:.98rem; text-align:center; margin-bottom:1.2rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.login-title i { color:var(--brand); }
.login-footer  { margin-top:1.1rem; text-align:center; font-size:.74rem; color:var(--muted); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  31. PRINT                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media print {
  .no-print      { display:none !important; }
  .print-only    { display:block !important; }
  .sidebar,.topbar { display:none !important; }
  .content       { margin-left:0 !important; padding:0 !important; }
}
.print-only   { display:none; }
.print-header { margin-bottom:1.4rem; }
.no-print     { }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  32. PUBLIC TRACK PAGE                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.track-wrap {
  min-height:100vh; padding:0 1rem 3rem;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(245,158,11,.07), transparent),
    var(--bg1);
}
.track-header {
  padding:1.6rem 1rem 1.1rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.track-logo    { font-family:'Orbitron',monospace; font-size:1.15rem; font-weight:900; background:linear-gradient(135deg,var(--brand-light),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; margin-bottom:.18rem; }
.track-tagline { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.track-trust   { font-size:.7rem; color:var(--placeholder); margin-top:.65rem; }
.track-inner   { max-width:600px; margin:0 auto; }
.track-form    { }
.track-form .form-group label { color:var(--fg-soft); }
.track-submit  {
  width:100%; padding:.6rem; border-radius:var(--r-sm); border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--brand-light),var(--brand),var(--brand-dark));
  color:#000; font-weight:700; font-size:.88rem; font-family:inherit;
  box-shadow:0 3px 12px rgba(245,158,11,.35); transition:opacity .15s,transform .12s,box-shadow .15s;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.track-submit:hover { opacity:.91; transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,158,11,.45); }
.track-submit:active { transform:translateY(0); }
.track-footer { text-align:center; padding-top:1.5rem; font-size:.71rem; color:var(--placeholder); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  33. LANDING PAGE (index.php)                                ║
   ╚══════════════════════════════════════════════════════════════╝ */
.lp-nav { position:fixed; top:0; left:0; right:0; height:62px; z-index:100; background:rgba(7,8,10,.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 2rem; }
.lp-nav-logo { font-family:'Orbitron',monospace; font-size:1.05rem; font-weight:900; letter-spacing:.08em; background:linear-gradient(135deg,var(--brand-light),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lp-nav-links { display:flex; align-items:center; gap:1.7rem; }
.lp-nav-links a { font-size:.82rem; font-weight:500; color:var(--fg-soft); text-decoration:none; transition:color .14s; }
.lp-nav-links a:hover { color:var(--fg); }
.lp-nav-right { display:flex; align-items:center; gap:.7rem; }

.lp-hero { min-height:100vh; display:flex; align-items:center; padding:6rem 2rem 4rem; background:radial-gradient(ellipse 70% 50% at 80% 40%,rgba(245,158,11,.08),transparent),radial-gradient(ellipse 50% 60% at 10% 80%,rgba(59,130,246,.05),transparent),var(--bg1); position:relative; overflow:hidden; }
.lp-hero-inner { max-width:1240px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 400px; gap:3.5rem; align-items:center; }
.lp-eyebrow { display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .88rem; border-radius:20px; background:var(--brand-glow2); border:1px solid rgba(245,158,11,.3); color:var(--brand); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.3rem; }
.lp-title { font-family:'Orbitron',monospace; font-size:clamp(1.8rem,4.5vw,3rem); font-weight:900; line-height:1.12; letter-spacing:.03em; margin-bottom:1rem; }
.lp-title span { background:linear-gradient(135deg,var(--brand-light),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lp-subtitle { font-size:.95rem; color:var(--fg-soft); line-height:1.75; max-width:460px; margin-bottom:2rem; }
.lp-cta { display:flex; gap:.8rem; flex-wrap:wrap; }

.lp-services { padding:5rem 2rem; background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.lp-section-inner { max-width:1080px; margin:0 auto; }
.lp-section-head  { text-align:center; margin-bottom:2.8rem; }
.lp-section-head h2 { font-family:'Orbitron',monospace; font-size:1.5rem; font-weight:900; margin-bottom:.45rem; }
.lp-section-head p  { color:var(--muted); font-size:.88rem; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.service-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.8rem 1.4rem; transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; }
.service-card:hover { transform:translateY(-4px); border-color:rgba(245,158,11,.25); box-shadow:0 10px 36px rgba(0,0,0,.5); }
.service-icon { width:50px; height:50px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem; }
.service-card h3 { font-weight:700; font-size:.93rem; margin-bottom:.45rem; }
.service-card p  { font-size:.8rem; color:var(--muted); line-height:1.7; }

.lp-portals { padding:5rem 2rem; background:var(--bg1); }
.portals-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:760px; margin:2rem auto 0; }
.portal-link { display:flex; align-items:center; gap:.95rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.2rem 1.3rem; text-decoration:none; color:var(--fg); transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; position:relative; overflow:hidden; }
.portal-link::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.portal-link.admin::before { background:linear-gradient(90deg,var(--brand),var(--brand-light)); }
.portal-link.sec::before   { background:linear-gradient(90deg,#3b82f6,#93c5fd); }
.portal-link.tech::before  { background:linear-gradient(90deg,#22c55e,#86efac); }
.portal-link:hover { transform:translateY(-3px); text-decoration:none; }
.portal-link.admin:hover { border-color:rgba(245,158,11,.32); box-shadow:0 8px 24px rgba(245,158,11,.1); }
.portal-link.sec:hover   { border-color:rgba(59,130,246,.32);  box-shadow:0 8px 24px rgba(59,130,246,.1); }
.portal-link.tech:hover  { border-color:rgba(34,197,94,.32);   box-shadow:0 8px 24px rgba(34,197,94,.1); }
.portal-icon-badge { width:38px; height:38px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.portal-link-info  { flex:1; }
.portal-link-name  { font-weight:700; font-size:.86rem; margin-bottom:.1rem; }
.portal-link-sub   { font-size:.69rem; color:var(--muted); }
.arrow { margin-left:auto; color:var(--muted); font-size:.78rem; flex-shrink:0; }

.lp-footer { padding:1.8rem; text-align:center; border-top:1px solid var(--border); font-size:.74rem; color:var(--muted); }
.track-card-lp { background:var(--bg2); border:1px solid var(--border-lt); border-radius:var(--r-xl); padding:1.9rem; box-shadow:var(--shadow-xl); position:relative; overflow:hidden; }
.track-card-lp::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-light)); }
.track-card-lp h3 { font-weight:800; font-size:.93rem; margin-bottom:.28rem; }
.track-card-lp p  { font-size:.74rem; color:var(--muted); margin-bottom:1.2rem; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  34. PORTAL HUB (portal.php)                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */
.wrap { width:100%; max-width:920px; }
.brand-logo { display:block; font-family:'Orbitron',monospace; font-size:1.35rem; font-weight:900; background:linear-gradient(135deg,var(--brand-light),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.08em; }
.brand-sub  { display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin-top:.35rem; }
.portals    { display:grid; grid-template-columns:repeat(3,1fr); gap:.95rem; }
.portal-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:1.6rem 1.2rem;
  text-align:center; text-decoration:none; color:var(--fg);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
  display:flex; flex-direction:column; align-items:center; gap:.62rem;
  position:relative; overflow:hidden;
}
.portal-card:hover { transform:translateY(-4px); text-decoration:none; }
.portal-card.admin:hover  { border-color:rgba(245,158,11,.4); box-shadow:0 12px 32px rgba(245,158,11,.1); }
.portal-card.sec:hover    { border-color:rgba(59,130,246,.4);  box-shadow:0 12px 32px rgba(59,130,246,.1); }
.portal-card.tech:hover   { border-color:rgba(34,197,94,.4);   box-shadow:0 12px 32px rgba(34,197,94,.1); }
.portal-icon { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; transition:transform .2s; }
.portal-card:hover .portal-icon { transform:scale(1.1) translateY(-2px); }
.portal-name  { font-weight:800; font-size:.9rem; }
.portal-desc  { font-size:.72rem; color:var(--muted); line-height:1.6; }
.portal-arrow { font-size:.7rem; color:var(--muted); transition:transform .15s; }
.portal-card:hover .portal-arrow { transform:translateX(3px); }
.portal-card.admin:hover .portal-arrow { color:var(--brand); }
.portal-card.sec:hover   .portal-arrow { color:#60a5fa; }
.portal-card.tech:hover  .portal-arrow { color:#4ade80; }

.error-msg { background:rgba(239,68,68,.09); border:1px solid rgba(239,68,68,.28); color:#fca5a5; border-radius:var(--r-sm); padding:.58rem .82rem; font-size:.79rem; margin-bottom:.95rem; display:flex; align-items:center; gap:.42rem; }
.track-note { text-align:center; font-size:.76rem; color:var(--muted); margin-top:1.1rem; }
.track-note a { color:var(--brand); font-weight:600; }
.footer { text-align:center; font-size:.7rem; color:var(--placeholder); margin-top:2rem; }

/* Pickup urgent pulse */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.pickup-urgent { animation:pulse 2s ease-in-out infinite; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  35. RESPONSIVE                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════
   RESPONSIVE UTILITIES & LAYOUT BREAKPOINTS
   ═══════════════════════════════════════════════════════ */

/* --- Responsive grid utilities (use instead of inline style grids) --- */
.rg-2   { display:grid; grid-template-columns:repeat(2,1fr);   gap:1rem; }
.rg-3   { display:grid; grid-template-columns:repeat(3,1fr);   gap:1rem; }
.rg-4   { display:grid; grid-template-columns:repeat(4,1fr);   gap:1rem; }
.rg-5   { display:grid; grid-template-columns:repeat(5,1fr);   gap:1rem; }
.rg-6   { display:grid; grid-template-columns:repeat(6,1fr);   gap:1rem; }
.rg-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }

/* --- Table horizontal scroll on all screens --- */
.table-wrap {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r);
}
.table-wrap table { min-width:560px; }

/* --- Inline form rows (label + input side-by-side on desktop) --- */
.form-row      { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.form-row-2    { display:grid; grid-template-columns:1fr 1fr;   gap:1rem; }
.form-row-3    { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }

/* --- Utility helpers --- */
.hide-xs  { }    /* hidden on <480 */
.hide-sm  { }    /* hidden on <640 */

/* ── 1280px: slight padding reduction ─────────────────── */
@media (max-width:1280px) {
  :root { --sidebar-w:220px; }
  .content { width:calc(100% - 220px); }
  .rg-6 { grid-template-columns:repeat(3,1fr); }
  .rg-5 { grid-template-columns:repeat(3,1fr); }
}

/* ── 1024px: collapse sidebar-paired grids ─────────────── */
@media (max-width:1024px) {
  .grid-sidebar   { grid-template-columns:1fr; }
  .rg-4           { grid-template-columns:repeat(2,1fr); }
  .rg-6           { grid-template-columns:repeat(2,1fr); }
  .form-row-3     { grid-template-columns:1fr 1fr; }
}

/* ── 900px: two-column stacking ────────────────────────── */
@media (max-width:900px) {
  .grid-2col         { grid-template-columns:1fr; }
  .grid-3col         { grid-template-columns:repeat(2,1fr); }
  .rg-3              { grid-template-columns:repeat(2,1fr); }
  .rg-5              { grid-template-columns:repeat(2,1fr); }
  .lp-hero-inner     { grid-template-columns:1fr; gap:2rem; }
  .services-grid     { grid-template-columns:1fr 1fr; }
  .portals-grid      { grid-template-columns:1fr; max-width:380px; }
  .portals           { grid-template-columns:1fr; }
  .lp-nav-links      { display:none; }
}

/* ── 768px: mobile — sidebar off-canvas ────────────────── */
@media (max-width:768px) {
  :root { --topbar-h:54px; }

  /* Sidebar off-canvas */
  .hamburger          { display:flex; }
  .sidebar            { transform:translateX(-100%); transition:transform .25s ease; }
  .sidebar.open       { transform:none; }
  .topbar             { left:0; }

  /* Content full-width */
  .content {
    margin-left:0;
    padding-left:1rem;
    padding-right:1rem;
    padding-top:calc(var(--topbar-h) + 1rem);
    width:100%;
    overflow-x:hidden;
  }

  /* Grids → 2 columns or 1 */
  .stats-grid         { grid-template-columns:repeat(2,1fr); }
  .rg-2               { grid-template-columns:1fr 1fr; }
  .rg-3               { grid-template-columns:1fr 1fr; }
  .rg-4               { grid-template-columns:repeat(2,1fr); }
  .rg-5               { grid-template-columns:repeat(2,1fr); }
  .rg-6               { grid-template-columns:repeat(2,1fr); }
  .grid-3col          { grid-template-columns:1fr 1fr; }
  .form-row-2         { grid-template-columns:1fr; }
  .form-row-3         { grid-template-columns:1fr; }

  /* Tables scrollable */
  .table-wrap         { overflow-x:auto; }
  .table-wrap table   { min-width:480px; }

  /* Cards full width */
  .card               { border-radius:var(--r); }

  /* Topbar user name clipped */
  .topbar-user .no-wrap { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Hide non-essential sidebar extras */
  .hide-sm            { display:none !important; }
}

/* ── 540px: phone — single column ──────────────────────── */
@media (max-width:540px) {
  .stats-grid         { grid-template-columns:1fr 1fr; }
  .rg-2               { grid-template-columns:1fr; }
  .rg-3               { grid-template-columns:1fr; }
  .rg-4               { grid-template-columns:1fr 1fr; }
  .rg-5               { grid-template-columns:1fr; }
  .rg-6               { grid-template-columns:1fr 1fr; }
  .grid-3col          { grid-template-columns:1fr; }
  .info-grid          { grid-template-columns:1fr; }
  .services-grid      { grid-template-columns:1fr; }
  .portals            { grid-template-columns:1fr; }
  .form-row           { grid-template-columns:1fr; }

  /* Page padding */
  .content            { padding-left:.75rem; padding-right:.75rem; }
  .card > .p-4,
  .card > .p-5        { padding:1rem !important; }

  /* Smaller topbar */
  .topbar-title       { font-size:.82rem; }
  .topbar-user .no-wrap { display:none; }

  /* Tables */
  .table-wrap table   { font-size:.78rem; }
  .table-wrap td,
  .table-wrap th      { padding:.4rem .5rem; }

  /* LP sections */
  .lp-hero            { padding:5rem 1rem 3rem; }
  .lp-services,
  .lp-portals         { padding:3rem 1rem; }

  .hide-xs            { display:none !important; }
}

/* ── 380px: very small phone ────────────────────────────── */
@media (max-width:380px) {
  :root { --topbar-h:50px; }
  .stats-grid         { grid-template-columns:1fr; }
  .rg-4               { grid-template-columns:1fr; }
  .rg-6               { grid-template-columns:1fr; }
  .content            { padding-left:.5rem; padding-right:.5rem; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .topbar, .sidebar, .hamburger, .overlay,
  .no-print, .btn, button:not(.print-ok) { display:none !important; }
  .content       { margin-left:0 !important; padding:0 !important; }
  .card          { box-shadow:none; border:1px solid #ccc; }
  body           { background:#fff; color:#000; }
  a              { color:#000; text-decoration:none; }
}

/* Chart + donut panel layout */
.rg-chart-panel { display:grid; grid-template-columns:1fr auto; gap:0; align-items:stretch; }
@media (max-width:640px) {
  .rg-chart-panel { grid-template-columns:1fr; }
  .rg-chart-panel > div[style*="width:180px"] { width:100% !important; border-left:none !important; border-top:1px solid var(--border); }
}

/* ── Validation badges (validate.js) ─────────────────────── */
.ibv-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: .28rem;
  padding: .22rem .55rem;
  border-radius: 5px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: opacity .2s;
}
.ibv-badge-hint {
  background: rgba(56,189,248,.08);
  color: var(--accent, #38bdf8);
  border: 1px solid rgba(56,189,248,.18);
}
.ibv-badge-error {
  background: rgba(239,68,68,.08);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.2);
}
/* Input state rings */
input.ibv-error  { border-color: #f87171 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.15); }
input.ibv-ok     { border-color: #34d399 !important; box-shadow: 0 0 0 2px rgba(52,211,153,.12); }

.ibv-badge-hint::before  { content: 'ℹ'; font-style: normal; font-size: .75rem; opacity: .8; }
.ibv-badge-error::before { content: '✕'; font-style: normal; font-size: .72rem; }