/* ══════════════════════════════════════════════════════════════
   TRANSOM HANDLING v2.0 — Global Stylesheet
   faistune.com/mhl
   Token-driven design system. Edit :root to rebrand.
══════════════════════════════════════════════════════════════ */

/* ── THEME TOKENS (Light Mode defaults) ──────────────────────── */
:root {
  /* Brand — charcoal / gold, aviation-corporate */
  --brand-deep:   #0A1F44;
  --brand-mid:    #123367;
  --brand-light:  #1E4785;
  --brand-glow:   #3868AE;
  /* Gold accent (brass, not bright) */
  --gold:    #A6802E;
  --gold-lt: #C7A455;
  /* Surfaces */
  --surf:    #FAFAF9;
  --surf2:   #F1F1F0;
  --surf3:   #E5E5E3;
  --border:  #D9D9D6;
  /* Text */
  --text:    #131315;
  --text2:   #4B4C51;
  --text3:   #86868D;
  /* Semantic (muted, corporate) */
  --green:      #1E7B52; --green-bg:  #E7F3EC; --green-bd:  #B7DBC6;
  --orange:     #A8600A; --orange-bg: #F7EDDE;
  --red:        #A02020; --red-bg:    #F7E4E2; --red-bd:    #E3B7B2;
  --blue:       #29527C; --blue-bg:   #E7EEF4;
  --teal:       #14685C; --teal-bg:   #E5F1EE;
  --purple-bg:  #EEECE6;
  /* Shadows & shape — crisper, tighter radii */
  --sh:    0 2px 10px rgba(16,17,20,.08);
  --sh-lg: 0 16px 44px rgba(16,17,20,.20);
  --r:    10px;
  --r-sm: 7px;
  --r-xs: 4px;
  /* Dark mode toggle icon */
  --dm-icon: '🌙';
}

/* ── DARK MODE TOKENS ────────────────────────────────────────── */
[data-theme="dark"] {
  --brand-deep:  #E7E4DA;
  --brand-mid:   #D6D2C4;
  --brand-light: #B8B4A6;
  --brand-glow:  #96938A;
  --gold:    #C7A455;
  --gold-lt: #DDBD73;
  --surf:    #0A0F1C;
  --surf2:   #141416;
  --surf3:   #1D1E21;
  --border:  #2C2D31;
  --text:    #F0EFEC;
  --text2:   #B9B9B8;
  --text3:   #7C7C81;
  --green:      #4FAE82; --green-bg:  #0F1F17; --green-bd:  #1F4432;
  --orange:     #D69A4A; --orange-bg: #241A0C; --red-bd:    #4A2320;
  --red:        #D97066; --red-bg:    #23110F;
  --blue:       #7FA6CC; --blue-bg:   #0F1B26;
  --teal:       #5CB3A2; --teal-bg:   #0D1E1A;
  --purple-bg:  #1C1B17;
  --sh:    0 4px 20px rgba(0,0,0,.45);
  --sh-lg: 0 18px 50px rgba(0,0,0,.60);
  --dm-icon: '☀️';
}
[data-theme="dark"] html,
[data-theme="dark"] body { background: var(--surf); color: var(--text); }
[data-theme="dark"] .card,
[data-theme="dark"] .search-float,
[data-theme="dark"] .login-card,
[data-theme="dark"] .modal-box { background: var(--surf2); }
[data-theme="dark"] .site-header {
  background: #060C18;
  border-bottom: 1px solid #232326;
}
[data-theme="dark"] .hero {
  background: linear-gradient(165deg, #060C18 0%, #0D2A52 55%, #123367 100%);
}
[data-theme="dark"] .f-input,
[data-theme="dark"] .f-select,
[data-theme="dark"] .f-textarea,
[data-theme="dark"] .pir-input,
[data-theme="dark"] .search-input-sm { background: var(--surf3); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .login-bg {
  background: linear-gradient(165deg, #05070F 0%, #0A1F44 55%, #123367 100%);
}
[data-theme="dark"] .site-footer { background: #05070F; }
/* Components that use --brand-deep as a solid fill need a fixed dark
   surface in dark mode, since --brand-deep itself flips light there
   (it's reused as an accent text color on dark backgrounds). */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-search,
[data-theme="dark"] .login-mark,
[data-theme="dark"] .profile-avatar,
[data-theme="dark"] .team-avatar,
[data-theme="dark"] .prod-avatar { background:#0A1F44; color:#F0EFEC; border-color:var(--gold); }
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-search:hover { background:#0A1F44; box-shadow:0 6px 18px rgba(0,0,0,.5); }
[data-theme="dark"] .tl-dot.latest,
[data-theme="dark"] .act-dot.latest { background:var(--gold); box-shadow:0 0 0 3px rgba(199,164,85,.18); }
[data-theme="dark"] .tabs-bar { background: var(--surf3); }
[data-theme="dark"] .tab-btn.active { background: var(--surf2); }
[data-theme="dark"] table { background: var(--surf2); }
[data-theme="dark"] thead { background: var(--surf3); }
[data-theme="dark"] tr:hover td { background: var(--surf3); }

/* ── DARK MODE TOGGLE BUTTON ─────────────────────────────────── */
.dm-toggle {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.22);
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0; color:#fff; line-height:1;
}
.dm-toggle:hover { background:rgba(255,255,255,.22); }

/* ── RESET & BASE ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-family:'Sora',sans-serif; background:var(--surf); color:var(--text); -webkit-text-size-adjust:100%; }
body { min-height:100vh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--surf2); }
::-webkit-scrollbar-thumb { background:var(--brand-glow); border-radius:99px; }

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes toastIn { from{opacity:0;transform:translateY(10px) scale(.95)} to{opacity:1;transform:none} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.fade-up { animation:fadeUp .35s ease both; }

/* ── HEADER ──────────────────────────────────────────────────── */
.site-header {
  background:var(--brand-deep);
  border-bottom:1px solid rgba(199,164,85,.35);
  position:sticky; top:0; z-index:80; box-shadow:0 2px 20px rgba(0,0,0,.22);
}
.header-inner {
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px;
}
.logo { display:flex; align-items:center; gap:12px; cursor:pointer; }
.logo-mark {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:transparent;
  border:1.5px solid var(--gold-lt);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:var(--gold-lt); letter-spacing:.3px;
  box-shadow:none;
}
.logo-name { color:#fff; font-size:14px; font-weight:700; line-height:1.15; letter-spacing:.2px; }
.logo-tag  { color:rgba(255,255,255,.48); font-size:10px; font-weight:400; letter-spacing:.4px; text-transform:uppercase; }
.header-nav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.nav-pill {
  padding:7px 15px; border-radius:3px; font-size:11px; font-weight:600;
  letter-spacing:.3px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.72);
  background:transparent; cursor:pointer; font-family:'Sora',sans-serif;
  transition:all .18s; white-space:nowrap; display:inline-flex; align-items:center;
}
.nav-pill:hover,.nav-pill.active { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.32); }
.nav-pill.cta { background:var(--gold); border-color:var(--gold); color:#0B0B0D; }
.nav-pill.cta:hover { background:var(--gold-lt); border-color:var(--gold-lt); color:#0B0B0D; }
.nav-greeting { color:rgba(255,255,255,.5); font-size:11px; white-space:nowrap; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  background:linear-gradient(165deg,var(--brand-deep) 0%,#0D2A52 55%,#123367 100%);
  padding:64px 20px 88px; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(199,164,85,.18);
}
.hero::before {
  content:''; position:absolute; inset:0; opacity:.05;
  background-image:
    repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 44px),
    repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 44px);
}
.hero::after {
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(199,164,85,.25),transparent);
}
.hero-inner { max-width:660px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid rgba(199,164,85,.4);
  border-radius:2px; padding:6px 16px; margin-bottom:28px;
  color:var(--gold-lt); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  animation:slideDown .5s ease both;
}
.hero h1 {
  color:#fff; font-size:clamp(24px,5.5vw,44px); font-weight:700;
  line-height:1.15; margin-bottom:14px; letter-spacing:-.3px;
  animation:fadeUp .5s ease .1s both;
}
.hero h1 span { color:var(--gold-lt); font-weight:700; }
.hero-sub {
  color:rgba(255,255,255,.58); font-size:15px; line-height:1.7; margin-bottom:38px;
  animation:fadeUp .5s ease .2s both;
}

/* ── STATUS STEPPER (public page) ────────────────────────────── */
.status-stepper {
  display:flex; align-items:flex-start; justify-content:center;
  gap:0; margin:0 auto 36px; max-width:600px;
  animation:fadeUp .5s ease .25s both;
}
.stepper-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.stepper-step:not(:last-child)::after {
  content:''; position:absolute; top:13px; left:calc(50% + 13px);
  width:calc(100% - 26px); height:2px; background:rgba(255,255,255,.2); z-index:0;
}
.stepper-step.done:not(:last-child)::after { background:rgba(255,255,255,.5); }
.stepper-dot {
  width:26px; height:26px; border-radius:50%; z-index:1;
  background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:rgba(255,255,255,.5); margin-bottom:7px; transition:all .3s;
}
.stepper-step.done   .stepper-dot { background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.7); color:#fff; }
.stepper-step.active .stepper-dot {
  background:#fff; border-color:#fff; color:var(--brand-mid);
  box-shadow:0 0 0 4px rgba(255,255,255,.2);
}
.stepper-lbl {
  font-size:9px; font-weight:600; color:rgba(255,255,255,.4);
  text-align:center; line-height:1.3; max-width:70px; letter-spacing:.2px;
}
.stepper-step.done   .stepper-lbl { color:rgba(255,255,255,.65); }
.stepper-step.active .stepper-lbl { color:#fff; font-weight:700; }

/* ── SEARCH FLOAT ────────────────────────────────────────────── */
.search-float {
  background:#fff; border-radius:var(--r); padding:30px 26px 26px;
  box-shadow:var(--sh-lg); max-width:540px; margin:0 auto; position:relative;
  animation:fadeUp .5s ease .3s both; border-top:3px solid var(--gold);
}
[data-theme="dark"] .search-float { background:var(--surf2); }
.search-float::after {
  content:''; position:absolute; inset:0; border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(16,17,20,.06); pointer-events:none;
}
.field-label { display:block; font-size:11px; font-weight:700; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; margin-bottom:9px; }
.search-row { display:flex; gap:9px; }
.pir-input {
  flex:1; min-width:0; padding:13px 16px;
  border:2px solid var(--border); border-radius:var(--r-sm);
  font-size:16px; font-family:'DM Mono',monospace; font-weight:500; color:var(--text);
  background:var(--surf2); transition:border-color .2s,box-shadow .2s; outline:none; letter-spacing:.6px;
}
.pir-input::placeholder { font-family:'Sora',sans-serif; font-size:13px; color:var(--text3); letter-spacing:0; font-weight:400; }
.pir-input:focus { border-color:var(--brand-mid); background:#fff; box-shadow:0 0 0 4px rgba(16,17,20,.08); }
[data-theme="dark"] .pir-input:focus { background:var(--surf); }
.btn-search {
  padding:13px 22px; background:var(--brand-deep);
  color:#fff; border:none; border-radius:var(--r-sm); font-size:13px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  cursor:pointer; font-family:'Sora',sans-serif; transition:all .2s; white-space:nowrap;
  box-shadow:0 4px 14px rgba(16,17,20,.22); -webkit-tap-highlight-color:transparent;
}
.btn-search:hover { transform:translateY(-1px); background:#0A1F44; box-shadow:0 6px 20px rgba(16,17,20,.3); }
.btn-search:active { transform:translateY(0); }

/* ── LANG TOGGLE ─────────────────────────────────────────────── */
.lang-toggle {
  display:inline-flex; background:rgba(255,255,255,.1); border-radius:50px;
  border:1.5px solid rgba(255,255,255,.2); overflow:hidden; margin-bottom:18px;
}
.lang-btn {
  padding:6px 16px; font-size:12px; font-weight:600; cursor:pointer;
  color:rgba(255,255,255,.65); background:transparent; border:none;
  font-family:'Sora',sans-serif; transition:all .15s;
}
.lang-btn.active { background:rgba(255,255,255,.22); color:#fff; }
[lang="ar"] .hero, [lang="ar"] .content-wrap { direction:rtl; text-align:right; }
[lang="ar"] .search-row { flex-direction:row-reverse; }
[lang="ar"] .pir-hint { flex-direction:row-reverse; }
[lang="ar"] .result-header { flex-direction:row-reverse; }
[lang="ar"] .meta-grid { direction:rtl; }
[lang="ar"] .tl-row { flex-direction:row-reverse; }
[lang="ar"] .mini-tl-title { text-align:right; }

/* ── PIR HINT BOX ────────────────────────────────────────────── */
.pir-hint {
  margin-top:18px; background:var(--surf2); border-radius:var(--r-sm);
  padding:14px 16px; border:1px solid var(--border);
  display:flex; gap:12px; align-items:flex-start; text-align:left;
}
.pir-hint-icon { font-size:22px; flex-shrink:0; margin-top:1px; }
.pir-hint-title { font-size:12px; font-weight:700; color:var(--text); margin-bottom:5px; }
.pir-hint-body  { font-size:12px; color:var(--text2); line-height:1.6; }
.pir-hint-body strong { color:var(--brand-mid); }

/* ── CONTENT WRAP ────────────────────────────────────────────── */
.content-wrap  { width:100%; max-width:700px;  margin:0 auto; padding:28px 18px; }
.portal-wrap   { width:100%; max-width:1440px; margin:0 auto; padding:28px 20px; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card { background:#fff; border-radius:var(--r); border:1px solid var(--border); box-shadow:0 2px 10px rgba(16,17,20,.07); overflow:hidden; }
[data-theme="dark"] .card { background:var(--surf2); }
.card-body  { padding:24px 26px; }
.card-title { font-size:15px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.card+.card { margin-top:16px; }

/* ── STATUS PILLS ────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:50px; font-size:12px; font-weight:700; letter-spacing:.15px; white-space:nowrap; }
.pill-orange { background:var(--orange-bg); color:var(--orange); }
.pill-blue   { background:var(--blue-bg);   color:var(--blue); }
.pill-purple { background:var(--purple-bg); color:var(--brand-mid); }
.pill-teal   { background:var(--teal-bg);   color:var(--teal); }
.pill-green  { background:var(--green-bg);  color:var(--green); }
.pill-red    { background:var(--red-bg);    color:var(--red); }

/* ── RESULT CARD ─────────────────────────────────────────────── */
.result-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.claim-mono { font-family:'DM Mono',monospace; font-size:22px; font-weight:500; color:var(--brand-deep); letter-spacing:1px; }
.meta-grid  { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.meta-cell  { background:var(--surf2); border-radius:var(--r-xs); padding:12px 14px; }
.meta-lbl   { font-size:10px; font-weight:700; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; margin-bottom:5px; }
.meta-val   { font-size:14px; font-weight:600; color:var(--text); }
.meta-mono  { font-family:'DM Mono',monospace; font-size:13px; }
.comment-block { background:var(--surf2); border-left:3px solid var(--brand-light); border-radius:0 var(--r-xs) var(--r-xs) 0; padding:12px 15px; margin:14px 0; }
.comment-txt { font-size:14px; color:var(--text2); line-height:1.6; font-style:italic; }
.collection-notice {
  background:linear-gradient(135deg,var(--green-bg),#D4F5E9);
  border:1.5px solid var(--green-bd); border-radius:var(--r-sm);
  padding:18px 20px; display:flex; gap:14px; align-items:flex-start; margin-top:16px;
}
.notice-icon  { font-size:26px; flex-shrink:0; }
.notice-title { font-size:14px; font-weight:700; color:var(--green); margin-bottom:5px; }
.notice-body  { font-size:13px; color:var(--green); line-height:1.6; }

/* ── MINI TIMELINE ───────────────────────────────────────────── */
.mini-tl { margin-top:20px; padding-top:16px; border-top:1px solid var(--surf3); }
.mini-tl-title { font-size:10px; font-weight:700; color:var(--text3); letter-spacing:.6px; text-transform:uppercase; margin-bottom:12px; }
.tl-row { display:flex; align-items:flex-start; gap:11px; padding:8px 0; border-bottom:1px solid var(--surf3); }
.tl-row:last-child { border-bottom:none; }
.tl-dot { width:9px; height:9px; border-radius:50%; background:var(--brand-light); flex-shrink:0; margin-top:4px; }
.tl-dot.latest { background:var(--brand-deep); box-shadow:0 0 0 3px rgba(16,17,20,.12); }
.tl-status { font-size:13px; font-weight:600; color:var(--text); }
.tl-time   { font-size:11px; color:var(--text3); font-family:'DM Mono',monospace; margin-top:2px; }

/* ── QR SHARE ────────────────────────────────────────────────── */
.qr-share-block {
  margin-top:16px; padding:16px 18px;
  background:var(--surf2); border:1px solid var(--border);
  border-radius:var(--r-sm); text-align:center;
}
.qr-share-block canvas { margin:0 auto 10px; display:block; }
.qr-share-title { font-size:12px; font-weight:700; color:var(--text2); margin-bottom:4px; }
.qr-share-sub   { font-size:11px; color:var(--text3); }
.btn-share {
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:8px 16px; border:1.5px solid var(--border); border-radius:var(--r-xs);
  font-size:12px; font-weight:600; color:var(--text2); cursor:pointer;
  background:var(--surf); font-family:'Sora',sans-serif; transition:all .15s;
}
.btn-share:hover { background:var(--surf3); color:var(--text); }

/* ── ERROR BLOCK ─────────────────────────────────────────────── */
.error-block { text-align:center; padding:32px 24px; }
.error-icon  { font-size:38px; margin-bottom:10px; }
.error-title { font-size:16px; font-weight:700; color:var(--red); margin-bottom:7px; }
.error-body  { font-size:14px; color:var(--text2); line-height:1.6; }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert { padding:11px 15px; border-radius:var(--r-xs); font-size:13px; font-weight:500; margin-bottom:16px; }
.alert-success { background:var(--green-bg); color:var(--green); border:1px solid var(--green-bd); }
.alert-error   { background:var(--red-bg);   color:var(--red);   border:1px solid var(--red-bd); }
.alert-info    { background:var(--blue-bg);  color:var(--blue);  border:1px solid #B8D4F8; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border:none; border-radius:var(--r-sm);
  font-size:13px; font-weight:700; cursor:pointer; font-family:'Sora',sans-serif;
  transition:all .18s; text-decoration:none; -webkit-tap-highlight-color:transparent; line-height:1;
}
.btn-primary   { background:var(--brand-deep); color:#fff; box-shadow:0 2px 10px rgba(16,17,20,.18); }
.btn-primary:hover { transform:translateY(-1px); background:#0A1F44; box-shadow:0 6px 18px rgba(16,17,20,.28); color:#fff; }
.btn-secondary { background:#fff; border:1.5px solid var(--border); color:var(--text2); }
.btn-secondary:hover { background:var(--surf2); color:var(--text); border-color:var(--text3); }
.btn-danger    { background:var(--red-bg); border:1.5px solid var(--red-bd); color:var(--red); }
.btn-danger:hover { background:#f0d4d1; color:var(--red); }
.btn-gold      { background:var(--gold); border:1.5px solid var(--gold); color:#fff; }
.btn-gold:hover { background:var(--gold-lt); border-color:var(--gold-lt); color:#fff; }
.btn-sm  { padding:7px 14px; font-size:12px; border-radius:var(--r-xs); }
.btn-xs  { padding:5px 10px; font-size:11px; border-radius:4px; }
.btn-full { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }

/* ── FORMS ───────────────────────────────────────────────────── */
.form-stack { display:flex; flex-direction:column; gap:15px; }
.form-grid  { display:grid; gap:15px; }
.form-grid.g2 { grid-template-columns:1fr 1fr; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.f-label    { font-size:11px; font-weight:700; color:var(--text2); letter-spacing:.3px; text-transform:uppercase; }
.f-input,.f-select,.f-textarea {
  padding:11px 13px; border:2px solid var(--border); border-radius:var(--r-sm);
  font-size:14px; font-family:'Sora',sans-serif; color:var(--text);
  background:var(--surf2); outline:none; transition:border-color .2s,box-shadow .2s; width:100%;
}
.f-input:focus,.f-select:focus,.f-textarea:focus { border-color:var(--brand-mid); background:#fff; box-shadow:0 0 0 4px rgba(16,17,20,.08); }
[data-theme="dark"] .f-input:focus,[data-theme="dark"] .f-select:focus,[data-theme="dark"] .f-textarea:focus { background:var(--surf); }
.f-textarea { resize:vertical; min-height:88px; }
.f-select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237B78A8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:calc(100% - 13px) center; padding-right:34px;
}

/* ── LOGIN PAGE ──────────────────────────────────────────────── */
.login-bg {
  flex:1; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(165deg,var(--brand-deep) 0%,#0D2A52 55%,#123367 100%);
}
.login-card { background:#fff; border-radius:14px; padding:40px 36px; width:100%; max-width:410px; box-shadow:0 28px 72px rgba(0,0,0,.32); border-top:3px solid var(--gold); }
.login-brand { text-align:center; margin-bottom:32px; }
.login-mark {
  width:58px; height:58px; border-radius:50%; margin:0 auto 14px;
  background:var(--brand-deep); border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; color:var(--gold-lt); box-shadow:0 8px 20px rgba(16,17,20,.22);
}
.login-name { font-size:19px; font-weight:700; letter-spacing:-.2px; color:var(--brand-deep); }
.login-sub  { font-size:12px; color:var(--text3); margin-top:3px; letter-spacing:.3px; }

/* ── PORTAL HEADER ───────────────────────────────────────────── */
.portal-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.portal-title  { font-size:22px; font-weight:700; letter-spacing:-.3px; color:var(--text); }
.portal-sub    { font-size:13px; color:var(--text3); margin-top:3px; }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs-bar {
  display:flex; gap:3px; background:var(--surf2); padding:5px;
  border-radius:13px; margin-bottom:24px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab-btn {
  padding:9px 17px; border-radius:9px; border:none; font-family:'Sora',sans-serif;
  font-size:13px; font-weight:500; cursor:pointer; color:var(--text3);
  background:transparent; white-space:nowrap; transition:all .18s; flex-shrink:0;
}
.tab-btn.active { background:#fff; color:var(--brand-deep); font-weight:700; box-shadow:0 2px 10px rgba(16,17,20,.09); }
[data-theme="dark"] .tab-btn.active { background:var(--surf); }

/* ── STATS ───────────────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:22px; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); padding:18px 14px; text-align:center; }
[data-theme="dark"] .stat-card { background:var(--surf2); }
.stat-num  { font-size:28px; font-weight:800; color:var(--brand-deep); line-height:1; }
.stat-lbl  { font-size:10px; color:var(--text3); margin-top:6px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }

/* ── TABLE ───────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-sm); }
table { width:100%; border-collapse:collapse; background:#fff; min-width:560px; }
[data-theme="dark"] table { background:var(--surf2); }
thead { background:var(--surf2); }
[data-theme="dark"] thead { background:var(--surf3); }
th { padding:11px 14px; text-align:left; font-size:10px; font-weight:700; color:var(--text3); letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
td { padding:12px 14px; font-size:13px; color:var(--text); border-top:1px solid var(--surf3); vertical-align:middle; }
tr:hover td { background:var(--surf2); }
.mono { font-family:'DM Mono',monospace; font-weight:500; color:var(--brand-deep); font-size:13px; }
.td-actions { display:flex; gap:5px; flex-wrap:wrap; }
.role-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:50px; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.role-admin { background:var(--purple-bg); color:var(--brand-mid); }
.role-staff { background:var(--blue-bg);   color:var(--blue); }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(10,6,40,.6); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(5px); animation:fadeIn .2s ease;
}
.modal-box {
  background:#fff; border-radius:var(--r); width:100%; max-width:560px;
  max-height:90vh; display:flex; flex-direction:column;
  box-shadow:var(--sh-lg); animation:fadeUp .25s ease;
}
[data-theme="dark"] .modal-box { background:var(--surf2); }
.modal-head  { padding:20px 24px 16px; border-bottom:1px solid var(--surf3); display:flex; justify-content:space-between; align-items:flex-start; flex-shrink:0; }
.modal-title { font-size:16px; font-weight:700; color:var(--text); }
.modal-sub   { font-size:12px; color:var(--text3); font-family:'DM Mono',monospace; margin-top:3px; }
.modal-body  { overflow-y:auto; padding:20px 24px; flex:1; -webkit-overflow-scrolling:touch; }
.modal-close { width:30px; height:30px; border-radius:50%; background:var(--surf2); border:none; cursor:pointer; font-size:20px; color:var(--text2); display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }

/* ── HISTORY TIMELINE ────────────────────────────────────────── */
.ht-list { display:flex; flex-direction:column; }
.ht-item { display:flex; gap:14px; padding-bottom:20px; position:relative; }
.ht-item:last-child { padding-bottom:0; }
.ht-spine { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.ht-node { width:12px; height:12px; border-radius:50%; background:var(--brand-glow); border:2.5px solid #fff; box-shadow:0 0 0 2px var(--brand-glow); z-index:1; }
.ht-node.newest { background:var(--brand-deep); box-shadow:0 0 0 2px var(--brand-deep); }
.ht-line  { width:2px; flex:1; background:var(--surf3); margin-top:4px; }
.ht-content { flex:1; padding-top:0; }
.ht-ts  { font-family:'DM Mono',monospace; font-size:10px; color:var(--text3); margin-bottom:5px; }
.ht-cmt { font-size:12px; color:var(--text2); background:var(--surf2); padding:7px 11px; border-radius:7px; margin:6px 0; line-height:1.55; }
.ht-by  { font-size:11px; color:var(--text3); }

/* ── CONFIRM BOX ─────────────────────────────────────────────── */
.confirm-body    { padding:36px 28px; text-align:center; }
.confirm-icon    { font-size:44px; margin-bottom:12px; }
.confirm-title   { font-size:18px; font-weight:700; letter-spacing:-.2px; color:var(--text); margin-bottom:8px; }
.confirm-msg     { font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:24px; }
.confirm-actions { display:flex; gap:10px; justify-content:center; }

/* ── SECTION HEADER ──────────────────────────────────────────── */
.sec-head  { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.sec-title { font-size:15px; font-weight:700; color:var(--text); }

/* ── SEARCH BAR ──────────────────────────────────────────────── */
.search-sm { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.search-input-sm {
  padding:9px 13px; border:1.5px solid var(--border); border-radius:var(--r-xs);
  font-size:13px; font-family:'Sora',sans-serif; color:var(--text);
  background:var(--surf2); outline:none; transition:border-color .2s; min-width:170px;
}
.search-input-sm:focus { border-color:var(--brand-mid); background:#fff; }
[data-theme="dark"] .search-input-sm:focus { background:var(--surf); }

/* ── DATE RANGE FILTER ───────────────────────────────────────── */
.adv-filter-bar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
  background:var(--surf2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:16px;
}
.adv-filter-bar .form-field { margin:0; }
.adv-filter-bar .f-label { font-size:9px; }
.adv-filter-bar .f-input { padding:7px 10px; font-size:12px; }
.adv-filter-bar .f-select { padding:7px 28px 7px 10px; font-size:12px; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer {
  background:var(--brand-deep); color:rgba(255,255,255,.4);
  text-align:center; padding:16px 20px; font-size:11px; margin-top:auto;
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider { height:1px; background:var(--surf3); margin:18px 0; }
.text-muted { font-size:12px; color:var(--text3); }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast-stack { position:fixed; bottom:22px; right:18px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:12px 18px; border-radius:var(--r-sm); font-size:13px; font-weight:600;
  box-shadow:var(--sh-lg); animation:toastIn .3s ease;
  display:flex; align-items:center; gap:8px; min-width:220px; max-width:340px;
}
.toast-success { background:var(--brand-deep); color:#fff; }
.toast-error   { background:var(--red);  color:#fff; }
.toast-info    { background:#fff; color:var(--text); border:1px solid var(--border); }
[data-theme="dark"] .toast-info { background:var(--surf2); }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:52px 20px; color:var(--text3); }
.empty-icon  { font-size:42px; margin-bottom:12px; }
.empty-text  { font-size:14px; font-weight:500; }
.empty-sub   { font-size:12px; margin-top:5px; }

/* ── INFO CARDS (passenger page) ─────────────────────────────── */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:13px; margin-top:10px; }
.info-card { background:#fff; border-radius:var(--r-sm); border:1px solid var(--border); padding:20px 18px; text-align:center; box-shadow:0 2px 8px rgba(16,17,20,.06); }
[data-theme="dark"] .info-card { background:var(--surf2); }
.info-card-icon  { font-size:28px; margin-bottom:10px; }
.info-card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; }
.info-card-body  { font-size:12px; color:var(--text2); line-height:1.6; }

/* ── SEARCH MODE TABS ────────────────────────────────────────── */
.search-mode-tabs { display:flex; gap:6px; justify-content:center; margin-bottom:18px; }
.smt {
  padding:8px 20px; border-radius:50px; font-size:13px; font-weight:600;
  border:1.5px solid rgba(255,255,255,.25); color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.08); text-decoration:none; transition:all .18s; white-space:nowrap;
}
.smt:hover { background:rgba(255,255,255,.18); color:#fff; }
.smt-active { background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.5)!important; }

/* ── OHD NOTICES ─────────────────────────────────────────────── */
.ohd-notice { display:flex; gap:14px; align-items:flex-start; border-radius:var(--r-sm); padding:18px 20px; margin-top:16px; }
.ohd-notice-airport    { background:linear-gradient(135deg,var(--teal-bg),#D2F0EC); border:1.5px solid var(--green-bd); }
.ohd-notice-offairport { background:linear-gradient(135deg,var(--red-bg),#FCE0E0); border:1.5px solid var(--red-bd); }
.ohd-notice-airport    .notice-title { color:var(--teal); }
.ohd-notice-airport    .notice-body  { color:var(--teal); }
.ohd-notice-offairport .notice-title { color:var(--red); }
.ohd-notice-offairport .notice-body  { color:var(--red); }

/* ── OHD PORTAL ELEMENTS ─────────────────────────────────────── */
.ohd-tag-chip         { display:inline-flex; align-items:center; background:var(--surf2); border:1px solid var(--border); border-radius:6px; padding:3px 9px; font-size:11px; font-weight:600; font-family:'DM Mono',monospace; color:var(--brand-deep); white-space:nowrap; }
.ohd-tag-chip-current { background:var(--purple-bg); border-color:var(--brand-light); color:var(--brand-mid); }
.ohd-tag-chips        { display:flex; flex-wrap:wrap; gap:4px; }
.ohd-age-badge        { display:inline-flex; align-items:center; background:var(--surf2); border:1px solid var(--border); border-radius:50px; padding:2px 9px; font-size:10px; font-weight:700; color:var(--text3); }
.ohd-age-badge.ohd-age-over { background:var(--red-bg); border-color:var(--red-bd); color:var(--red); }
.ohd-auto-badge { display:inline-block; font-size:9px; font-weight:700; background:var(--surf3); color:var(--text3); padding:1px 6px; border-radius:4px; margin-left:5px; vertical-align:middle; text-transform:uppercase; letter-spacing:.3px; }
.ohd-tag-section { background:var(--surf2); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:16px 18px; margin-bottom:4px; }
.ohd-tag-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ohd-tag-grid    { display:flex; flex-direction:column; gap:8px; }
.ohd-tag-row     { display:flex; align-items:center; gap:8px; }
.ohd-tag-row.tag-hidden { display:none; }
.ohd-tag-num     { width:22px; height:22px; border-radius:50%; background:var(--brand-mid); color:#fff; font-size:10px; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ohd-tag-input   { font-family:'DM Mono',monospace; font-size:13px; letter-spacing:.4px; }
.ohd-tag-del     { flex-shrink:0; }
.ohd-tag-note    { font-size:11px; color:var(--text3); margin-top:8px; font-weight:500; }

/* ── PORTAL LAYOUT ───────────────────────────────────────────── */
.portal-main    { display:block; }
.portal-sidebar { display:none; }
.portal-content { width:100%; min-width:0; }
.tabs-bar { display:flex; gap:4px; background:var(--surf2); padding:5px; border-radius:13px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn  { padding:8px 14px; border-radius:9px; border:none; font-family:'Sora',sans-serif; font-size:12px; font-weight:500; cursor:pointer; color:var(--text3); background:transparent; white-space:nowrap; transition:all .18s; flex-shrink:0; }
.tab-btn.active { background:#fff; color:var(--brand-deep); font-weight:700; box-shadow:0 2px 10px rgba(16,17,20,.09); }
[data-theme="dark"] .tab-btn.active { background:var(--surf); }

/* ── PAGE SECTION HEADING ────────────────────────────────────── */
.page-section-hd { margin-bottom:18px; }
.page-section-hd h2 { font-size:17px; font-weight:700; letter-spacing:-.2px; color:var(--text); margin-bottom:3px; }
.page-section-hd p  { font-size:12px; color:var(--text3); }

/* ── DASHBOARD KPI ROW ───────────────────────────────────────── */
.db-section-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); margin:22px 2px 8px; }
.db-section-lbl:first-of-type { margin-top:0; }
.kpi-row  { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.kpi-card {
  background:#fff; border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:14px 14px; display:flex; align-items:center; gap:12px;
  text-decoration:none; cursor:pointer; transition:all .2s;
  box-shadow:0 2px 8px rgba(16,17,20,.04);
}
[data-theme="dark"] .kpi-card { background:var(--surf2); }
.kpi-card:hover { border-color:var(--brand-light); transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,17,20,.12); }
.kpi-icon-wrap { width:44px; height:44px; border-radius:10px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.kpi-num { font-size:24px; font-weight:800; color:var(--brand-deep); line-height:1; }
.kpi-lbl { font-size:10px; color:var(--text3); font-weight:600; letter-spacing:.4px; text-transform:uppercase; margin-top:4px; line-height:1.3; }

/* ── DASHBOARD HEADER ────────────────────────────────────────── */
.db-header       { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.db-header-title { font-size:18px; font-weight:700; letter-spacing:-.2px; color:var(--text); }
.db-header-sub   { font-size:12px; color:var(--text3); margin-top:3px; }
.dash-main       { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }

/* ── STATUS BREAKDOWN ────────────────────────────────────────── */
.breakdown-row { margin-bottom:16px; }
.breakdown-row:last-of-type { margin-bottom:0; }
.breakdown-head  { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; gap:8px; }
.breakdown-label { display:flex; align-items:center; gap:7px; text-decoration:none; min-width:0; flex:1; }
.breakdown-label:hover .breakdown-name { color:var(--brand-mid); }
.breakdown-icon  { font-size:15px; flex-shrink:0; }
.breakdown-name  { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.breakdown-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.breakdown-pct   { font-size:11px; font-weight:700; color:var(--text3); min-width:30px; text-align:right; }
.breakdown-cnt   { font-size:20px; font-weight:800; color:var(--brand-deep); min-width:28px; text-align:right; line-height:1; }
.breakdown-bar-bg   { height:8px; background:var(--surf3); border-radius:99px; overflow:hidden; }
.breakdown-bar-fill { height:100%; border-radius:99px; transition:width .7s ease; }
.pill-orange-fill { background:var(--orange); }
.pill-blue-fill   { background:var(--blue); }
.pill-purple-fill { background:var(--brand-mid); }
.pill-teal-fill   { background:var(--teal); }
.pill-green-fill  { background:var(--green); }
.breakdown-footer { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--surf3); }
.breakdown-footer-item { text-align:center; }
.breakdown-footer-lbl  { font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; display:block; margin-bottom:3px; }
.breakdown-footer-val  { font-size:18px; font-weight:800; color:var(--brand-deep); display:block; }

/* ── ACTIVITY FEED ───────────────────────────────────────────── */
.activity-feed  { display:flex; flex-direction:column; }
.activity-item  { display:flex; align-items:flex-start; gap:10px; padding:9px 0; }
.act-timeline   { display:flex; flex-direction:column; align-items:center; flex-shrink:0; padding-top:3px; }
.act-dot        { width:9px; height:9px; border-radius:50%; background:var(--brand-glow); flex-shrink:0; }
.act-dot.latest { background:var(--brand-deep); box-shadow:0 0 0 3px rgba(16,17,20,.12); }
.act-line       { width:2px; flex:1; min-height:12px; background:var(--surf3); margin-top:3px; }
.act-body       { flex:1; min-width:0; padding-bottom:9px; border-bottom:1px solid var(--surf3); }
.activity-item:last-child .act-body { border-bottom:none; padding-bottom:0; }
.act-top   { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.act-claim { font-size:12px; font-weight:700; color:var(--brand-deep); font-family:'DM Mono',monospace; text-decoration:none; }
.act-claim:hover { color:var(--brand-mid); }
.act-meta  { font-size:10px; color:var(--text3); }

/* ── TEAM GRID ───────────────────────────────────────────────── */
.team-grid   { display:grid; grid-template-columns:1fr; gap:8px; }
.team-card   { display:flex; align-items:center; gap:11px; background:var(--surf2); border-radius:var(--r-xs); padding:11px 13px; }
.team-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--brand-deep),var(--brand-light)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; letter-spacing:-.5px; }
.team-info   { flex:1; min-width:0; }
.team-name   { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-email  { font-size:11px; color:var(--text3); font-family:'DM Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── ACCOUNT PAGE ────────────────────────────────────────────── */
.account-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.profile-avatar-wrap { display:flex; justify-content:center; margin-bottom:14px; }
.profile-avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--brand-deep),var(--brand-light)); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; box-shadow:0 6px 20px rgba(16,17,20,.28); }
.profile-name   { text-align:center; font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.profile-email  { text-align:center; font-size:11px; color:var(--text3); font-family:'DM Mono',monospace; margin-bottom:10px; word-break:break-all; }
.profile-detail-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--surf3); font-size:13px; gap:8px; }
.profile-detail-row:last-child { border-bottom:none; }
.profile-detail-lbl { color:var(--text3); font-weight:500; flex-shrink:0; }
.profile-detail-val { font-weight:600; color:var(--text); text-align:right; word-break:break-all; font-size:12px; }

/* ── FILTER STRIP ────────────────────────────────────────────── */
.filter-strip { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filter-pill  {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 11px; border-radius:50px; font-size:11px; font-weight:600;
  border:1.5px solid var(--border); color:var(--text2); background:var(--surf2);
  cursor:pointer; text-decoration:none; transition:all .15s; white-space:nowrap;
}
.filter-pill:hover { background:var(--surf3); color:var(--text); }
.filter-pill.active { background:var(--brand-mid); color:#fff; border-color:var(--brand-mid); }
.filter-pill.clear-pill { color:var(--red); border-color:var(--red-bd); }
.filter-pill.clear-pill:hover { background:var(--red-bg); }

/* ── SECTION HEADER + SEARCH ─────────────────────────────────── */
.sec-head  { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px; }
.sec-title { font-size:14px; font-weight:700; color:var(--text); }
.search-sm { display:flex; gap:7px; flex-wrap:wrap; align-items:center; width:100%; }
.search-input-sm {
  flex:1; min-width:0; padding:8px 12px;
  border:1.5px solid var(--border); border-radius:var(--r-xs);
  font-size:13px; font-family:'Sora',sans-serif; color:var(--text);
  background:var(--surf2); outline:none; transition:border-color .2s;
}
.search-input-sm:focus { border-color:var(--brand-mid); background:#fff; }
[data-theme="dark"] .search-input-sm:focus { background:var(--surf); }

/* ── NOTIFY BLOCK (Ready for Collection) ─────────────────────── */
.notify-block {
  background:var(--blue-bg); border:1.5px solid #B8D4F8; border-radius:var(--r-sm);
  padding:14px 16px; margin-top:14px; display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
}
.notify-block .btn-sm { margin-top:0; }

/* ── AUDIT LOG TABLE ─────────────────────────────────────────── */
.audit-action-badge {
  display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:700;
  letter-spacing:.3px; text-transform:uppercase;
}
.audit-login   { background:var(--green-bg); color:var(--green); }
.audit-fail    { background:var(--red-bg);   color:var(--red); }
.audit-delete  { background:var(--orange-bg); color:var(--orange); }
.audit-update  { background:var(--blue-bg);  color:var(--blue); }
.audit-create  { background:var(--purple-bg); color:var(--brand-mid); }
.audit-system  { background:var(--surf3);    color:var(--text3); }

/* ── PRINT STYLES ────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .header-nav, .tabs-bar,
  .portal-sidebar, .btn, .td-actions, .filter-strip,
  .dm-toggle, .lang-toggle, .qr-share-block .btn-share,
  .search-sm, .adv-filter-bar { display:none!important; }
  .print-receipt { display:block!important; }
  body { background:#fff; }
  .card { box-shadow:none; border:1px solid #ddd; }
}
.print-receipt { display:none; }

/* ── MOBILE CARD TABLE ───────────────────────────────────────── */
@media(max-width:640px){
  .table-wrap { border:none; background:transparent; overflow:visible; }
  .table-wrap table { min-width:0!important; }
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap th,.table-wrap td,.table-wrap tr { display:block; width:100%; }
  .table-wrap thead { position:absolute; top:-9999px; left:-9999px; visibility:hidden; }
  .table-wrap tbody tr { background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:10px; padding:4px 14px; box-shadow:0 1px 4px rgba(16,17,20,.05); }
  [data-theme="dark"] .table-wrap tbody tr { background:var(--surf2); }
  .table-wrap td { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border:none; border-bottom:1px solid var(--surf3); font-size:13px; gap:8px; }
  .table-wrap td:last-child { border-bottom:none; padding-bottom:11px; }
  .table-wrap td:first-child { padding-top:11px; }
  .table-wrap td::before { content:attr(data-label); font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; white-space:nowrap; }
  .table-wrap td .td-actions { flex-wrap:wrap; justify-content:flex-end; }
  .table-wrap td[data-label="Actions"] { justify-content:flex-end; }
  .table-wrap td[data-label="Actions"]::before { margin-right:auto; }
}

/* ── RESPONSIVE BREAKPOINTS ──────────────────────────────────── */
@media(min-width:480px){
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .kpi-num { font-size:26px; }
}
@media(min-width:640px){
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .sec-head  { flex-direction:row; justify-content:space-between; align-items:center; }
  .search-sm { width:auto; }
  .search-input-sm { min-width:160px; flex:none; }
  .modal-box { max-height:94vh; border-radius:var(--r) var(--r) 0 0; align-self:flex-end; }
  .modal-backdrop { align-items:flex-end; padding:0; }
}
@media(min-width:900px){
  .portal-wrap { padding:28px 28px; }
  .portal-main { display:grid; grid-template-columns:218px 1fr; gap:22px; align-items:start; }
  .tabs-bar { display:none; }
  .portal-sidebar {
    display:flex; flex-direction:column; gap:2px;
    background:#fff; border:1px solid var(--border);
    border-radius:var(--r); padding:14px 10px;
    position:sticky; top:76px; box-shadow:0 2px 10px rgba(16,17,20,.06);
  }
  [data-theme="dark"] .portal-sidebar { background:var(--surf2); }
  .sidebar-section-lbl { font-size:9px; font-weight:700; color:var(--text3); letter-spacing:.8px; text-transform:uppercase; padding:8px 12px 4px; display:block; }
  .sidebar-tab { display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:9px; font-size:13px; font-weight:500; color:var(--text2); transition:all .15s; border:none; background:transparent; font-family:'Sora',sans-serif; text-decoration:none; width:100%; text-align:left; cursor:pointer; line-height:1.2; }
  .sidebar-tab:hover:not(.active) { background:var(--surf2); color:var(--text); }
  .sidebar-tab.active { background:var(--surf2); color:var(--brand-deep); font-weight:700; }
  .sidebar-tab.danger-link { color:var(--red); }
  .sidebar-tab.danger-link:hover { background:var(--red-bg); }
  .sidebar-divider { height:1px; background:var(--surf3); margin:8px 4px; }
  .portal-content { min-width:0; }
  .modal-box { max-height:90vh; border-radius:var(--r); align-self:auto; }
  .modal-backdrop { align-items:center; padding:16px; }
  .kpi-row { grid-template-columns:repeat(4,1fr); }
  .kpi-card { padding:18px 20px; gap:16px; }
  .kpi-icon-wrap { width:50px; height:50px; font-size:22px; border-radius:12px; }
  .kpi-num { font-size:32px; }
  .db-header-title { font-size:22px; }
  .dash-main { grid-template-columns:58% 42%; }
  .breakdown-cnt { font-size:24px; }
  .breakdown-bar-bg { height:10px; }
  .breakdown-name { font-size:13px; }
  .team-grid { grid-template-columns:repeat(3,1fr); }
  .breakdown-footer-val { font-size:22px; }
  .account-grid { grid-template-columns:280px 1fr; }
  .profile-avatar-wrap { justify-content:flex-start; }
  .profile-name,.profile-email { text-align:left; }
  .portal-title { font-size:22px; }
  .page-section-hd h2 { font-size:20px; }
  .table-wrap { border:1px solid var(--border); border-radius:var(--r-sm); overflow-x:auto; }
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap th,.table-wrap td,.table-wrap tr { display:table-row; width:auto; }
  .table-wrap thead { position:static; visibility:visible; }
  .table-wrap table { display:table; min-width:560px; }
  .table-wrap thead tr { display:table-row; }
  .table-wrap tbody tr { display:table-row; background:transparent; border:none; border-radius:0; margin:0; padding:0; box-shadow:none; }
  .table-wrap td { display:table-cell; padding:12px 14px; border:none; border-top:1px solid var(--surf3); gap:0; }
  .table-wrap td::before { display:none; }
  .table-wrap td:first-child,.table-wrap td:last-child { padding:12px 14px; }
  .table-wrap th { display:table-cell; padding:11px 14px; }
  .table-wrap tbody tr:hover td { background:var(--surf2); }
  /* Keep action buttons in one row on real desktop/laptop widths instead of
     wrapping into a tall stack when the column gets squeezed by other
     content — the table can scroll horizontally as a fallback if truly
     too narrow, rather than buttons stacking vertically. */
  .table-wrap td:last-child { white-space:nowrap; }
  .table-wrap .td-actions { flex-wrap:nowrap; }
}
@media(min-width:1100px){
  .portal-main { grid-template-columns:234px 1fr; }
  .kpi-row { grid-template-columns:repeat(5,1fr); }
  .kpi-num { font-size:34px; }
  .kpi-icon-wrap { width:54px; height:54px; font-size:24px; }
  .team-grid { grid-template-columns:repeat(4,1fr); }
  .breakdown-footer-val { font-size:24px; }
  .breakdown-cnt { font-size:26px; }
  .account-grid { grid-template-columns:300px 1fr; }
}
@media(max-width:640px){
  .f-input,.f-select,.f-textarea,.pir-input { font-size:16px!important; }
  .header-inner { height:56px; padding:0 16px; }
  .logo-tag { display:none; }
  .logo-name { font-size:13px; }
  .logo-mark { width:34px; height:34px; font-size:16px; }
  .nav-greeting { display:none; }
  .header-nav .nav-pill:not(.cta) { display:none; }
  .nav-pill.cta { padding:7px 14px; font-size:11px; }
  .hero { padding:44px 16px 68px; }
  .search-float { padding:20px 16px; }
  .search-row { flex-direction:column; }
  .btn-search { width:100%; }
  .login-card { padding:28px 20px; }
  .portal-wrap { padding:16px 14px; }
  .card-body { padding:16px 14px; }
  .meta-grid { grid-template-columns:1fr; }
  .form-grid.g2 { grid-template-columns:1fr; }
  .portal-header { gap:8px; }
  .portal-header .btn { width:100%; }
  .confirm-body { padding:24px 18px; }
  .status-stepper { display:none; }
}
@media(max-width:380px){
  .header-inner { padding:0 12px; }
  .logo-name { font-size:12px; }
  .logo-mark { width:30px; height:30px; font-size:13px; }
  .nav-pill.cta { padding:6px 11px; font-size:10px; }
  .tab-btn { font-size:10px; padding:6px 9px; }
}

/* ── DASHBOARD FILTER BAR ────────────────────────────────────── */
.dash-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--surf2); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:18px; }
.dash-filter-sel { padding:7px 12px; border:1.5px solid var(--border); border-radius:var(--r-xs); font-size:12px; font-family:'Sora',sans-serif; color:var(--text); background:#fff; cursor:pointer; min-width:130px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237B78A8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 10px) center; padding-right:28px; }
[data-theme="dark"] .dash-filter-sel { background:var(--surf3); }

/* ── PRODUCTIVITY TAB ────────────────────────────────────────── */
.prod-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.prod-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--r-sm); padding:18px 16px; text-align:center; box-shadow:0 2px 8px rgba(16,17,20,.04); }
[data-theme="dark"] .prod-card { background:var(--surf2); }
.prod-avatar { width:46px; height:46px; border-radius:50%; margin:0 auto 10px; background:linear-gradient(135deg,var(--brand-deep),var(--brand-light)); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#fff; }
.prod-name   { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; }
.prod-stats  { display:flex; gap:8px; justify-content:center; }
.prod-stat   { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:52px; }
.prod-stat-num { font-size:20px; font-weight:800; color:var(--brand-deep); line-height:1; }
.prod-stat-lbl { font-size:9px; color:var(--text3); font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
@media(min-width:640px){ .prod-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px){ .prod-grid { grid-template-columns:repeat(4,1fr); } .dash-filter-bar { padding:10px 18px; } .dash-filter-sel { min-width:150px; } }
@media(min-width:1100px){ .prod-grid { grid-template-columns:repeat(5,1fr); } }

/* ── URGENT FLAG BUTTON ───────────────────────────────────────── */
.urgent-on {
  background: var(--orange-bg) !important;
  border-color: #E8CBA0 !important;
  color: var(--orange) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4 PREMIUM POLISH
══════════════════════════════════════════════════════════════ */

/* ── TYPE SCALE ──────────────────────────────────────────────── */
:root {
  --fs-xs: 11px;  --lh-xs: 1.45;
  --fs-sm: 13px;  --lh-sm: 1.55;
  --fs-md: 15px;  --lh-md: 1.6;
  --fs-lg: 18px;  --lh-lg: 1.4;
  --fs-xl: 22px;  --lh-xl: 1.3;
  --fs-2x: 28px;  --lh-2x: 1.2;
}

/* ── LOGO ────────────────────────────────────────────────────── */
.logo-img { flex-shrink:0; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.logo:hover .logo-img { transform:rotate(-6deg) scale(1.06); }

/* ── TOP PROGRESS BAR ────────────────────────────────────────── */
.top-progress {
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  z-index:999; opacity:0; transition:width .3s ease, opacity .3s;
  box-shadow:0 0 8px rgba(229,184,74,.6);
}
.top-progress.loading { opacity:1; width:70%; transition:width 8s cubic-bezier(.1,.6,.2,1), opacity .2s; }
.top-progress.done    { opacity:0; width:100%; transition:width .25s ease, opacity .4s .25s; }

/* ── BUTTON MICRO-INTERACTIONS ───────────────────────────────── */
.btn, .btn-search, .nav-pill, .filter-pill, .tab-btn {
  transition:all .18s cubic-bezier(.25,.46,.45,.94);
}
.btn:active, .btn-search:active { transform:scale(.97); }
.btn-primary:focus-visible, .btn-search:focus-visible {
  outline:none; box-shadow:0 0 0 4px rgba(16,17,20,.25);
}
.f-input:hover:not(:focus), .f-select:hover:not(:focus),
.pir-input:hover:not(:focus), .search-input-sm:hover:not(:focus) {
  border-color:var(--brand-glow);
}

/* ── SKELETON LOADER ─────────────────────────────────────────── */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skeleton {
  background:linear-gradient(90deg,var(--surf2) 25%,var(--surf3) 50%,var(--surf2) 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite linear;
  border-radius:var(--r-xs);
  color:transparent!important; user-select:none;
}

/* ── EMPTY STATE ILLUSTRATIONS ───────────────────────────────── */
.empty-illustration { margin:0 auto 16px; display:block; opacity:.9; }
.empty-state { padding:48px 24px; }

/* ── CARD HOVER LIFT ─────────────────────────────────────────── */
.info-card { transition:transform .25s ease, box-shadow .25s ease; }
.info-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(16,17,20,.12); }

/* ── ANIMATED STEPPER FILL ───────────────────────────────────── */
@keyframes stepperFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.stepper-step.done:not(:last-child)::after {
  transform-origin:left; animation:stepperFill .5s ease both;
}
.stepper-step:nth-child(2).done::after { animation-delay:.15s; }
.stepper-step:nth-child(3).done::after { animation-delay:.3s; }
.stepper-step:nth-child(4).done::after { animation-delay:.45s; }
.stepper-step.active .stepper-dot { animation:pulse 2.4s ease infinite; }

/* ── STATUS PAGE TIMELINE HINT ───────────────────────────────── */
.eta-hint {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text3); background:var(--surf2);
  border-radius:50px; padding:4px 12px; margin-top:8px;
}

/* ── PREMIUM PRINT RECEIPT ───────────────────────────────────── */
@media print {
  .print-receipt {
    font-family:Arial,sans-serif; max-width:148mm; margin:0 auto;
    border:1px solid #ccc; border-radius:8px; padding:24px!important;
  }
  .receipt-tear {
    border-top:2px dashed #bbb; margin:16px -24px 12px; position:relative;
  }
  .receipt-tear::before {
    content:'✂'; position:absolute; left:12px; top:-11px;
    background:#fff; padding:0 6px; color:#999; font-size:13px;
  }
}

/* ── PRIVACY FOOTER LINK ─────────────────────────────────────── */
.privacy-note {
  max-width:660px; margin:8px auto 0; text-align:center;
  font-size:11px; color:var(--text3); line-height:1.7; padding:0 18px;
}

/* ── FOCUS RING (a11y, premium feel) ─────────────────────────── */
a:focus-visible, button:focus-visible {
  outline:2px solid var(--brand-light); outline-offset:2px; border-radius:4px;
}