:root {
  --sscx-red: #b91c1c;
  --sscx-red-dark: #991b1b;
  --sscx-red-soft: #fee2e2;
  --sscx-red-faint: #fff6f6;
  --sscx-white: #ffffff;
  --sscx-ink: #111827;
  --sscx-muted: #64748b;
  --sscx-line: #dce4ee;
  --sscx-line-strong: #cfd8e3;
  --sscx-bg: #f3f6fa;
  --sscx-card: #ffffff;
  --sscx-card-strong: rgba(255,255,255,.96);
  --sscx-shadow: 0 14px 28px rgba(15, 23, 42, .08);
  --sscx-shadow-soft: 0 8px 18px rgba(15, 23, 42, .05);
  --sscx-radius: 16px;
  --sscx-radius-lg: 14px;
  --sscx-radius-md: 12px;
  --sscx-gap-x: 38px;
  --sscx-topbar-h: 58px;
  --sscx-navbar-h: 66px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(180deg, #fffdfd 0%, var(--sscx-bg) 220px);
  color: var(--sscx-ink);
}
a { text-decoration: none; }
.container {
  width: calc(100% - (var(--sscx-gap-x) * 2));
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
}
.topbar {
  background: linear-gradient(90deg, #7f1d1d 0%, var(--sscx-red) 100%);
  color: #fff;
  min-height: var(--sscx-topbar-h);
  padding: 14px var(--sscx-gap-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 10px 18px rgba(127, 29, 29, .16);
}
.topbar a { color: #fff; font-weight: bold; }
.navbar {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(185, 28, 28, .08);
  position: sticky;
  top: var(--sscx-topbar-h);
  z-index: 999;
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
body.public-ui .navbar,
body.login-ui .navbar {
  top: 0;
}
.navbar .container {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--sscx-navbar-h);
}
.brand {
  font-size: 26px;
  font-weight: bold;
  color: var(--sscx-red-dark);
  letter-spacing: .3px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-links a {
  color: #1f2937;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: bold;
  transition: all .2s ease;
}
.nav-links a:hover,
.nav-links a:focus {
  background: var(--sscx-red-soft);
  color: var(--sscx-red-dark);
}
.hero {
  background: linear-gradient(135deg,#7f1d1d,#dc2626);
  color: #fff;
  padding: 72px 0;
}
.hero h1 { font-size: 44px; margin: 0 0 14px; }
.hero p { font-size: 18px; max-width: 760px; line-height: 1.6; }
.hero .buttons a { display:inline-block; margin-right:12px; margin-top:20px; padding:12px 18px; border-radius:12px; }
.btn-primary { background:#ffffff; color:var(--sscx-red-dark); font-weight:bold; }
.btn-secondary { background:rgba(255,255,255,0.16); color:#fff; border:1px solid rgba(255,255,255,0.3); }
.section { padding: 26px 0 42px; }
body.admin-ui .section,
body.member-ui .section,
body.public-ui .section { padding-top: 28px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card,
.table-wrap,
.form-card,
.filter-box,
.dashboard-hero,
.report-card {
  background: var(--sscx-card);
  border-radius: var(--sscx-radius);
  box-shadow: var(--sscx-shadow);
  border: 1px solid rgba(15, 23, 42, .07);
}
.card { padding: 20px; }
.metric { font-size: 32px; font-weight: bold; margin-top: 8px; color: var(--sscx-red-dark); }
.metric-sub { color: var(--sscx-muted); font-size: 13px; margin-top: 6px; }
.kpi-label { color: var(--sscx-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.table-wrap { overflow: hidden; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px 14px; border-bottom:1px solid var(--sscx-line); text-align:left; font-size:14px; }
th { background:#fff5f5; color: var(--sscx-red-dark); position: sticky; top: 0; z-index: 1; }
.form-card { width:100%; padding:24px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.form-group { margin-bottom:14px; }
label { display:block; margin-bottom:6px; font-size:13px; color:#374151; font-weight: bold; }
input, select, textarea {
  width:100%; border:1px solid var(--sscx-line-strong); border-radius:var(--sscx-radius-md); padding:11px 12px; font-size:14px; background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}
textarea { min-height:90px; resize:vertical; }
button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--sscx-radius-md); padding:11px 16px; cursor:pointer; font-size:14px; font-weight: bold;
}
.btn-dark { background:linear-gradient(90deg, var(--sscx-red-dark), var(--sscx-red)); color:#fff; }
.btn-blue { background:#2563eb; color:#fff; }
.btn-light { background:#fff5f5; color:var(--sscx-red-dark); border:1px solid rgba(185, 28, 28, .08); }
.alert { padding:12px 14px; border-radius:12px; font-size:14px; margin-bottom:16px; }
.alert-error { background:#fee2e2; color:#991b1b; }
.alert-success { background:#dcfce7; color:#166534; }
.badge, .badge-soft {
  display:inline-block; padding:5px 10px; border-radius:999px; font-size:12px; background:#f3f4f6; color:#374151; font-weight:bold;
}
.badge-soft { background: var(--sscx-red-soft); color: var(--sscx-red-dark); }
.muted { color: var(--sscx-muted); font-size: 13px; }
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: linear-gradient(rgba(127,29,29,.72), rgba(127,29,29,.72)), url('../images/Screenshot_10.png') center/cover no-repeat;
}
.login-card { width:100%; max-width:440px; background:rgba(255,255,255,.97); border-radius:20px; box-shadow:0 20px 38px rgba(15,23,42,.15); padding:30px; }
.footer { padding:20px 0 40px; color:#6b7280; font-size:13px; }
.split { display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.page-head h1 { margin:0; font-size:30px; color: var(--sscx-red-dark); }
.dashboard-hero {
  padding: 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
}
.dashboard-hero h1 { margin:0 0 8px; font-size: 30px; color: var(--sscx-red-dark); }
.dashboard-hero p { margin:0; color: var(--sscx-muted); line-height: 1.6; }
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:16px; }
.kpi-card { padding: 20px; }
.section-title { margin: 0 0 14px; font-size: 20px; color: var(--sscx-red-dark); }
.section-block { margin-top: 18px; }
.report-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.report-card { padding: 18px; }
.report-card h3 { margin: 0 0 8px; color: var(--sscx-red-dark); font-size: 18px; }
.report-card p { margin: 0; color: var(--sscx-muted); }
.stat-pair { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin-top:8px; }
.data-table-compact th, .data-table-compact td { padding: 10px 12px; font-size: 13px; }
.sticky-actions { position: sticky; bottom: 12px; z-index: 10; }
@media (max-width: 900px) {
  :root { --sscx-gap-x: 18px; --sscx-topbar-h: 66px; --sscx-navbar-h: 76px; }
  .split { grid-template-columns:1fr; }
  .hero h1{font-size:34px;}
  .topbar, .navbar .container, .page-head { align-items:flex-start; }
  .topbar, .navbar .container, .page-head { flex-direction: column; }
  .container { width: calc(100% - (var(--sscx-gap-x) * 2)); }
}


/* ===== Stage 2 premium form/detail patch ===== */
.page-shell{position:relative;}
.page-head{margin-bottom:18px !important;}
.page-head h1{letter-spacing:.2px;}
.action-cluster,.inline-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hero-strip,.context-strip{background:linear-gradient(135deg,#ffffff 0%,#fff7f7 100%);border:1px solid rgba(15,23,42,.07);border-radius:18px;box-shadow:var(--sscx-shadow-soft);padding:18px 20px;margin:0 0 18px;}
.hero-strip .hero-title,.context-strip .hero-title{margin:0 0 6px;font-size:18px;color:var(--sscx-red-dark);}
.hero-strip .hero-note,.context-strip .hero-note{margin:0;color:var(--sscx-muted);line-height:1.6;font-size:14px;}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid rgba(185,28,28,.10);color:#374151;font-size:13px;font-weight:700;}
.help-box,.hint-box{border-radius:14px !important;padding:14px 16px !important;box-shadow:0 8px 16px rgba(15,23,42,.04);}
.form-card.premium-form,.detail-card,.info-box{position:relative;overflow:hidden;}
.form-card.premium-form::before,.detail-card::before,.info-box::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--sscx-red-dark),#ef4444,#fecaca);}
.form-card.premium-form{padding:26px;}
.form-card.premium-form .section-title{font-size:18px;margin-bottom:18px;}
.form-card.premium-form input,.form-card.premium-form select,.form-card.premium-form textarea{border-radius:14px;}
.form-card.premium-form .sticky-bar{position:sticky;top:calc(var(--sscx-topbar-h) + var(--sscx-navbar-h) + 8px) !important;z-index:20;background:rgba(255,255,255,.98) !important;backdrop-filter:blur(4px);padding:14px !important;border:1px solid rgba(15,23,42,.07);border-radius:14px;box-shadow:0 12px 24px rgba(15,23,42,.06);margin:-6px 0 20px !important;}
.summary-box.sticky-panel{position:sticky;top:calc(var(--sscx-topbar-h) + var(--sscx-navbar-h) + 12px);align-self:start;border:1px solid rgba(15,23,42,.07);box-shadow:0 16px 30px rgba(15,23,42,.07);}
.summary-box.sticky-panel .section-title{color:var(--sscx-red-dark);}
.table-wrap.soft-table{border-radius:18px;box-shadow:var(--sscx-shadow);}
.table-wrap.soft-table table tbody tr:hover{background:#fff8f8;}
.table-wrap.soft-table td:first-child,.table-wrap.soft-table th:first-child{padding-left:16px;}
.table-wrap.soft-table td:last-child,.table-wrap.soft-table th:last-child{padding-right:16px;}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px;font-size:14px;}
.kv div{padding:8px 0;border-bottom:1px dashed #e5e7eb;}
.kv div:nth-last-child(-n+2){border-bottom:none;}
.detail-card{border:1px solid rgba(15,23,42,.07);}
.detail-card h3,.info-box h3{color:var(--sscx-red-dark) !important;}
.track-item{position:relative;border:1px solid rgba(15,23,42,.07) !important;border-radius:14px !important;box-shadow:0 10px 20px rgba(15,23,42,.04);padding:14px 16px 14px 18px !important;}
.track-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--sscx-red-dark),#ef4444);border-radius:16px 0 0 16px;}
.proof-links{margin-top:10px;}
.proof-links a{color:var(--sscx-red-dark) !important;background:#fff5f5;border:1px solid rgba(185,28,28,.08);padding:7px 10px;border-radius:999px;font-weight:700;text-decoration:none;}
.stats-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 18px;}
.mini-stat{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:16px;padding:16px;box-shadow:0 10px 22px rgba(15,23,42,.05);}
.mini-stat .label{color:var(--sscx-muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.mini-stat .value{margin-top:8px;color:var(--sscx-red-dark);font-size:24px;font-weight:800;}
.mini-stat .meta{margin-top:6px;color:#4b5563;font-size:13px;}
@media (max-width: 900px){.form-card.premium-form .sticky-bar,.summary-box.sticky-panel{position:static !important;top:auto !important;}.kv{grid-template-columns:1fr;}}

/* ===== Stage 3 list/member/public polish ===== */
.page-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
.page-toolbar .toolbar-note{color:var(--sscx-muted);font-size:13px;}
.filters-premium,.hero-panel,.list-panel,.result-panel,.public-hero,.search-panel,.member-panel{background:var(--sscx-card-strong);border-radius:18px;box-shadow:var(--sscx-shadow);border:1px solid rgba(15,23,42,.07);}
.public-hero,.hero-panel{background:linear-gradient(135deg,#ffffff 0%,#fff8f8 100%);padding:24px;position:relative;overflow:hidden;}
.public-hero::after,.hero-panel::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle, rgba(239,68,68,.08) 0%, rgba(239,68,68,0) 70%);}
.public-hero h1,.hero-panel h1{margin:0 0 8px;color:var(--sscx-red-dark);font-size:30px;position:relative;z-index:1;}
.public-hero p,.hero-panel p{margin:0;color:var(--sscx-muted);line-height:1.65;position:relative;z-index:1;}
.filters-premium,.search-panel,.member-panel{padding:20px;}
.list-panel{overflow:hidden;}
.list-panel .panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(229,231,235,.9);background:#fffafb;}
.list-panel .panel-head h2{margin:0;font-size:18px;color:var(--sscx-red-dark);}
.list-panel .panel-head .sub{color:var(--sscx-muted);font-size:13px;}
.list-panel .panel-body{padding:0;}
.list-control-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid rgba(229,231,235,.9);background:#fff;}
.per-page-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.per-page-form label{margin:0;font-size:13px;color:var(--sscx-muted);font-weight:800;}
.per-page-form select{min-width:120px;height:38px;padding:8px 34px 8px 10px;}
.pagination-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;}
.pagination-summary{color:var(--sscx-muted);font-size:13px;font-weight:700;}
.pagination-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pagination-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:36px;padding:8px 11px;border-radius:8px;border:1px solid rgba(185,28,28,.12);background:#fff5f5;color:var(--sscx-red-dark);font-size:13px;font-weight:800;text-decoration:none;}
.pagination-link.current{background:linear-gradient(135deg,var(--sscx-red),var(--sscx-red-dark));color:#fff;border-color:transparent;}
.pagination-link.disabled{background:#f8fafc;color:#94a3b8;border-color:#e5e7eb;cursor:not-allowed;}
.metric-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.metric-box{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:16px;padding:16px;box-shadow:0 10px 20px rgba(15,23,42,.04);}
.metric-box .label{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--sscx-muted);font-weight:700;}
.metric-box .value{font-size:28px;color:var(--sscx-red-dark);font-weight:800;margin-top:8px;}
.metric-box .meta{font-size:13px;color:#4b5563;margin-top:6px;}
.data-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff5f5;color:var(--sscx-red-dark);font-size:12px;font-weight:800;border:1px solid rgba(15,23,42,.06);}
.status-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#fff5f5;color:var(--sscx-red-dark);font-size:12px;font-weight:800;border:1px solid rgba(15,23,42,.06);}
.table-premium{overflow-x:auto;}
.table-premium table td{vertical-align:top;}
.table-premium table tbody tr:hover{background:#fff8f8;}
.route-text{font-weight:700;color:#111827;}
.route-sub{display:block;color:var(--sscx-muted);font-size:12px;margin-top:4px;}
.empty-state{padding:28px 20px;text-align:center;color:var(--sscx-muted);}
.search-inline{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(180px,1fr)) auto;gap:14px;align-items:end;}
.search-inline.compact{grid-template-columns:minmax(220px,1fr) auto;}
.result-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0;}
.result-card{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:16px;padding:16px;box-shadow:0 10px 20px rgba(15,23,42,.04);}
.result-card .k{font-size:12px;text-transform:uppercase;color:var(--sscx-muted);font-weight:700;letter-spacing:.5px;}
.result-card .v{font-size:22px;font-weight:800;color:var(--sscx-red-dark);margin-top:6px;}
.soft-divider{height:1px;background:linear-gradient(90deg, rgba(185,28,28,0), rgba(185,28,28,.18), rgba(185,28,28,0));margin:18px 0;}
.timeline-clean{display:grid;gap:12px;}
.timeline-clean .item{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:16px;padding:16px;box-shadow:0 10px 20px rgba(15,23,42,.04);position:relative;overflow:hidden;}
.timeline-clean .item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--sscx-red-dark),#ef4444);}
.timeline-clean .time{font-size:13px;color:var(--sscx-muted);margin-bottom:6px;font-weight:700;}
.timeline-clean .status{font-size:16px;color:var(--sscx-red-dark);font-weight:800;margin-bottom:6px;}
.member-welcome{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.member-welcome .title{font-size:30px;color:var(--sscx-red-dark);margin:0 0 8px;}
.member-welcome .desc{margin:0;color:var(--sscx-muted);line-height:1.6;max-width:760px;}
@media (max-width: 900px){
  .search-inline,.search-inline.compact{grid-template-columns:1fr;}
  .list-panel .panel-head,.member-welcome{flex-direction:column;align-items:flex-start;}
}

/* Action bar modern */
.form-action-bar {
    position: sticky;
    top: 70px; /* tinggi header */
    z-index: 100;
    background: #fff;
    padding: 12px 16px;
    border-bottom: 2px solid #eee;
    display: flex;
    gap: 10px;
}

/* Tombol utama */
.btn-primary-red {
    background: #c40000;
    color: #fff;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    border: none;
}

.btn-primary-red:hover {
    background: #a80000;
}

/* Tombol secondary */
.btn-soft {
    background: #f1f1f1;
    border-radius: 8px;
    padding: 10px 18px;
}

.container-normal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-wide {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

/* =========================================================
   SSCX ERP - DASHBOARD PREMIUM UI
   Tambahkan di app.css paling bawah
   ========================================================= */

:root{
    --sscx-red:#d60000;
    --sscx-red-dark:#b30000;
    --sscx-red-soft:#fff5f5;
    --sscx-red-border:#ffd6d6;
    --sscx-text:#0f172a;
    --sscx-muted:#64748b;
    --sscx-line:#e5e7eb;
    --sscx-bg:#f4f6f8;
    --sscx-card:#ffffff;
    --sscx-shadow-sm:0 8px 24px rgba(15,23,42,.05);
    --sscx-shadow-md:0 14px 32px rgba(15,23,42,.08);
    --sscx-radius-lg:18px;
    --sscx-radius-xl:22px;
}

html, body{
    background: var(--sscx-bg);
    color: var(--sscx-text);
}

/* Container umum */
.container{
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
    padding-left: 28px;
    padding-right: 28px;
}

/* Topbar & navbar */
.topbar{
    position: sticky;
    top: 0;
    z-index: 1200;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:14px 28px;
    background: linear-gradient(135deg, var(--sscx-red-dark), var(--sscx-red));
    color:#fff;
    box-shadow: 0 10px 26px rgba(182,0,0,.18);
}

.topbar a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.topbar a:hover{
    text-decoration:underline;
}

.navbar{
    position: sticky;
    top: 56px;
    z-index: 1190;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom:1px solid #f0dede;
    box-shadow: 0 8px 22px rgba(15,23,42,.04);
}

.navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:64px;
}

.brand{
    font-size:21px;
    font-weight:800;
    color:var(--sscx-red-dark);
    letter-spacing:.2px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.nav-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    color:#1f2937;
    font-weight:700;
    transition:all .18s ease;
}

.nav-links a:hover,
.nav-links a.active{
    background:#fff0f0;
    color:var(--sscx-red-dark);
}

/* Section utama */
.section{
    padding:28px 0 36px;
}

/* Hero dashboard */
.dashboard-hero{
    background: linear-gradient(135deg, #ffffff, #fff8f8);
    border:1px solid var(--sscx-red-border);
    border-radius: var(--sscx-radius-xl);
    padding:26px 28px;
    box-shadow: var(--sscx-shadow-sm);
}

.dashboard-hero h1{
    margin:0 0 10px;
    font-size:34px;
    line-height:1.2;
    color:var(--sscx-red-dark);
    font-weight:800;
    letter-spacing:.2px;
}

.dashboard-hero p{
    margin:0;
    max-width:1020px;
    color:#5d7695;
    line-height:1.75;
    font-size:15px;
}

/* Card umum */
.card,
.form-card,
.report-card,
.chart-card{
    background: var(--sscx-card);
    border:1px solid #eceff3;
    border-radius: var(--sscx-radius-lg);
    box-shadow: var(--sscx-shadow-sm);
}

/* Filter box */
.filter-box.form-card{
    background: linear-gradient(135deg, #ffffff, #fff9f9);
    border:1px solid #f1d9d9;
    border-radius: var(--sscx-radius-xl);
    box-shadow: var(--sscx-shadow-sm);
}

.form-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:16px;
}

.form-group{
    min-width:0;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:700;
    color:#334155;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    min-height:48px;
    border-radius:14px;
    border:1px solid #cdd7e3;
    background:#fff;
    padding:0 14px;
    font-size:14px;
    color:#0f172a;
    outline:none;
    transition:all .18s ease;
}

.form-group textarea{
    min-height:110px;
    padding:12px 14px;
    resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--sscx-red);
    box-shadow:0 0 0 4px rgba(214,0,0,.08);
}

/* Tombol */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:14px;
    border:0;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:all .18s ease;
}

.btn-dark{
    background: linear-gradient(135deg, var(--sscx-red), var(--sscx-red-dark));
    color:#fff;
    box-shadow:0 10px 22px rgba(182,0,0,.16);
}

.btn-dark:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 24px rgba(182,0,0,.18);
}

.btn-light{
    background:#fff6f6;
    color:var(--sscx-red-dark);
    border:1px solid #f3cfcf;
}

.btn-light:hover{
    background:#fff1f1;
}

/* Alert */
.alert{
    margin-bottom:16px;
    padding:14px 16px;
    border-radius:14px;
    font-size:14px;
    line-height:1.6;
    font-weight:700;
}

.alert-success{
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    color:#065f46;
}

.alert-error,
.alert-danger{
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#9f1239;
}

/* KPI */
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:16px;
}

.kpi-card{
    position:relative;
    overflow:hidden;
    padding:18px 18px 16px;
    border-radius:20px;
    background:linear-gradient(135deg,#ffffff,#fff8f8);
    border:1px solid #f2dede;
    box-shadow: var(--sscx-shadow-sm);
}

.kpi-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#ff2d2d,#ff8f8f);
}

.kpi-label{
    margin-bottom:10px;
    font-size:12px;
    font-weight:800;
    color:var(--sscx-muted);
    text-transform:uppercase;
    letter-spacing:1px;
}

.metric{
    font-size:28px;
    line-height:1.15;
    font-weight:800;
    color:var(--sscx-red-dark);
    word-break:break-word;
}

.metric-sub{
    margin-top:8px;
    font-size:13px;
    line-height:1.6;
    color:var(--sscx-muted);
}

/* Section block */
.section-block{
    margin-top:18px;
    margin-bottom:18px;
}

.section-title{
    margin:0 0 14px;
    font-size:22px;
    line-height:1.3;
    font-weight:800;
    color:var(--sscx-red-dark);
}

/* Grid umum isi dashboard */
.grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.grid .card{
    padding:18px;
}

.split{
    display:grid;
    grid-template-columns:minmax(0, 2.1fr) minmax(320px, .9fr);
    gap:18px;
    align-items:start;
}

/* Report */
.report-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.report-card{
    padding:18px 18px 16px;
    background:linear-gradient(135deg,#ffffff,#fcfcfc);
    border:1px solid #eceff3;
}

.report-card h3{
    margin:0 0 8px;
    font-size:18px;
    color:var(--sscx-red-dark);
    font-weight:800;
}

.report-card p{
    margin:0 0 14px;
    color:var(--sscx-muted);
    font-size:13px;
    line-height:1.65;
}

.stat-pair{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-top:1px dashed #e5e7eb;
    font-size:14px;
}

.stat-pair:first-of-type{
    border-top:0;
    padding-top:0;
}

.stat-pair strong{
    color:var(--sscx-red-dark);
    font-size:15px;
}

/* Chart */
.chart-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-bottom:18px;
}

.chart-card{
    padding:18px;
    border-radius:20px;
    border:1px solid #ebedf1;
    box-shadow: var(--sscx-shadow-sm);
    background:linear-gradient(135deg,#ffffff,#fffdfd);
}

.chart-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.chart-title{
    margin:0;
    font-size:18px;
    line-height:1.35;
    font-weight:800;
    color:var(--sscx-red-dark);
}

.chart-sub{
    margin:4px 0 0;
    color:var(--sscx-muted);
    font-size:13px;
    line-height:1.65;
}

.chart-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    background:#fff5f5;
    border:1px solid #ffd6d6;
    color:var(--sscx-red-dark);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.chart-canvas-wrap{
    position:relative;
    height:340px;
}

/* Table */
.table-wrap{
    background:#fff;
    border:1px solid #eceff3;
    border-radius:20px;
    overflow:hidden;
    box-shadow: var(--sscx-shadow-sm);
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:960px;
}

thead th{
    background:#fff6f6;
    color:var(--sscx-red-dark);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    white-space:nowrap;
}

th, td{
    padding:14px 14px;
    border-bottom:1px solid #edf0f3;
    text-align:left;
    vertical-align:top;
    font-size:14px;
    line-height:1.55;
}

tbody tr:hover{
    background:rgba(255,0,0,.025);
}

tbody tr:last-child td{
    border-bottom:none;
}

/* Badge */
.badge-soft{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:#fff5f5;
    color:var(--sscx-red-dark);
    border:1px solid #ffdada;
    font-size:12px;
    font-weight:800;
}

/* Muted */
.muted{
    color:var(--sscx-muted);
    line-height:1.7;
}

/* Spacing helper */
.dashboard-hero,
.filter-box,
.kpi-grid,
.chart-grid,
.section-block,
.split{
    width:100%;
}

/* Responsive */
@media (max-width: 1280px){
    .kpi-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .report-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px){
    .form-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .chart-grid{
        grid-template-columns:1fr;
    }
    .split{
        grid-template-columns:1fr;
    }
    .chart-canvas-wrap{
        height:300px;
    }
}

@media (max-width: 768px){
    .container{
        padding-left:16px;
        padding-right:16px;
    }

    .topbar{
        position:static;
        flex-direction:column;
        align-items:flex-start;
        padding:12px 16px;
    }

    .navbar{
        position:static;
    }

    .navbar .container{
        flex-direction:column;
        align-items:flex-start;
        padding-top:10px;
        padding-bottom:10px;
    }

    .dashboard-hero{
        padding:18px;
    }

    .dashboard-hero h1{
        font-size:28px;
    }

    .form-grid,
    .kpi-grid,
    .grid,
    .report-grid{
        grid-template-columns:1fr;
    }

    .chart-canvas-wrap{
        height:280px;
    }

    .btn{
        width:100%;
    }

    .nav-links{
        width:100%;
    }

    .nav-links a{
        width:100%;
        justify-content:flex-start;
    }
}

.checker-panel,
.filter-panel,
.data-panel {
    background: linear-gradient(135deg, #ffffff, #fff8f8);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
    overflow: hidden;
}

.checker-panel {
    margin-bottom: 22px;
}

.panel-body {
    padding: 22px 20px;
}

.form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.filter-panel .form-grid {
    gap: 18px;
}

.filter-panel .form-grid-4 {
    align-items: end;
}

.filter-panel .form-group {
    margin: 0;
}

.filter-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: end;
    margin-top: 14px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.check-ongkir-grid {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.2fr)
        minmax(180px, 1.2fr)
        minmax(160px, 1fr)
        minmax(130px, .85fr)
        minmax(140px, .9fr)
        minmax(120px, .75fr);
    gap: 16px;
    align-items: end;
    width: 100%;
}

/* =========================================================
   SSCX EXECUTIVE DASHBOARD - SCOPED SOFT COLOR PATCH
   ========================================================= */

.dashboard-executive-page .executive-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
    gap: 18px;
    align-items: center;
    padding: 28px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #fffefe 0%, #fff6f6 100%);
    border: 1px solid #f3dede;
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.dashboard-executive-page .executive-hero__main h1 {
    margin: 0 0 10px;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
    color: #8f1111;
    letter-spacing: .2px;
}

.dashboard-executive-page .executive-hero__main p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.85;
    max-width: 920px;
}

.dashboard-executive-page .executive-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-self: stretch;
}

.dashboard-executive-page .executive-hero__actions .btn {
    width: 100%;
}

/* ===== Status Cards ===== */
.dashboard-executive-page .status-card-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-executive-page .status-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid #e8edf3;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 18px 18px 16px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-executive-page .status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.dashboard-executive-page .status-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    border-radius: 22px 22px 0 0;
}

.dashboard-executive-page .status-card__label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #475569;
    margin-bottom: 10px;
}

.dashboard-executive-page .status-card__value {
    font-size: 36px;
    line-height: 1.05;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    word-break: break-word;
}

.dashboard-executive-page .status-card__meta {
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
}

.dashboard-executive-page .status-card__actions {
    margin-top: 14px;
}

.dashboard-executive-page .status-card__actions .btn {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.55);
    color: #7f1d1d;
    backdrop-filter: blur(4px);
}

/* total */
.dashboard-executive-page .status-card--total {
    background: linear-gradient(135deg, #fff7f7 0%, #ffeaea 100%);
    border-color: #f6d4d4;
}
.dashboard-executive-page .status-card--total::before {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

/* booked */
.dashboard-executive-page .status-card--booked {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-color: #dce5ef;
}
.dashboard-executive-page .status-card--booked::before {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

/* transit */
.dashboard-executive-page .status-card--transit {
    background: linear-gradient(135deg, #fffaf0 0%, #fff2d9 100%);
    border-color: #f8e0a7;
}
.dashboard-executive-page .status-card--transit::before {
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

/* delivery */
.dashboard-executive-page .status-card--delivery {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #cfe0ff;
}
.dashboard-executive-page .status-card--delivery::before {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/* completed */
.dashboard-executive-page .status-card--completed {
    background: linear-gradient(135deg, #effcf6 0%, #dff7ec 100%);
    border-color: #c8eedb;
}
.dashboard-executive-page .status-card--completed::before {
    background: linear-gradient(90deg, #10b981, #6ee7b7);
}

/* pod kembali */
.dashboard-executive-page .status-card--podback {
    background: linear-gradient(135deg, #fff7ef 0%, #ffe9d8 100%);
    border-color: #f8d6bb;
}
.dashboard-executive-page .status-card--podback::before {
    background: linear-gradient(90deg, #f97316, #fdba74);
}

/* pod diterima */
.dashboard-executive-page .status-card--podreceived {
    background: linear-gradient(135deg, #fdf4ff 0%, #f7e8ff 100%);
    border-color: #ead4fa;
}
.dashboard-executive-page .status-card--podreceived::before {
    background: linear-gradient(90deg, #c026d3, #e879f9);
}

/* ===== Panel Ringkasan ===== */
.dashboard-executive-page .executive-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-executive-page .panel-card {
    background: linear-gradient(135deg, #ffffff 0%, #fffafa 100%);
    border: 1px solid #eceff3;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 18px;
}

.dashboard-executive-page .panel-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dashboard-executive-page .panel-card__head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #8f1111;
}

.dashboard-executive-page .mini-card-grid {
    display: grid;
    gap: 14px;
}

.dashboard-executive-page .mini-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-executive-page .mini-exec-card {
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-executive-page .mini-exec-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

/* pembayaran */
.dashboard-executive-page .executive-panel-grid .panel-card:first-child .mini-exec-card:nth-child(1) {
    background: linear-gradient(135deg, #fff7ef 0%, #ffeddc 100%);
    border-color: #f8d6bb;
}
.dashboard-executive-page .executive-panel-grid .panel-card:first-child .mini-exec-card:nth-child(2) {
    background: linear-gradient(135deg, #fdf4ff 0%, #f8eaff 100%);
    border-color: #ead4fa;
}
.dashboard-executive-page .executive-panel-grid .panel-card:first-child .mini-exec-card:nth-child(3) {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #cfe0ff;
}

/* layanan */
.dashboard-executive-page .executive-panel-grid .panel-card:last-child .mini-exec-card:nth-child(1) {
    background: linear-gradient(135deg, #fff7f7 0%, #ffeaea 100%);
    border-color: #f6d4d4;
}
.dashboard-executive-page .executive-panel-grid .panel-card:last-child .mini-exec-card:nth-child(2) {
    background: linear-gradient(135deg, #effcf6 0%, #dff7ec 100%);
    border-color: #c8eedb;
}
.dashboard-executive-page .executive-panel-grid .panel-card:last-child .mini-exec-card:nth-child(3) {
    background: linear-gradient(135deg, #fffaf0 0%, #fff2d9 100%);
    border-color: #f8e0a7;
}

.dashboard-executive-page .mini-exec-card__title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #475569;
}

.dashboard-executive-page .mini-exec-card__value {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    color: #0f172a;
}

.dashboard-executive-page .mini-exec-card__meta {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
}

.dashboard-executive-page .mini-exec-card__actions {
    margin-top: 14px;
}

.dashboard-executive-page .mini-exec-card__actions .btn {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.55);
    color: #7f1d1d;
    backdrop-filter: blur(4px);
}

/* ===== Filter ===== */
.dashboard-executive-page .executive-filter-card {
    padding: 20px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffafa 100%);
    border: 1px solid #f1d9d9;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-executive-page .executive-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.dashboard-executive-page .executive-filter-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    color: #8f1111;
}

.dashboard-executive-page .executive-filter-head p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.dashboard-executive-page .executive-form-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-executive-page .executive-filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.dashboard-executive-page .executive-filter-tip {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ef 0%, #fff1e4 100%);
    border: 1px solid #f5d4b5;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.7;
}

/* ===== Executive Chart Blocks ===== */
.dashboard-executive-page .executive-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.dashboard-executive-page .executive-chart-card {
    --period-a: #ef4444;
    --period-b: #2563eb;
    --period-soft: linear-gradient(135deg, rgba(239, 68, 68, .08) 0%, rgba(37, 99, 235, .08) 100%);
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 24px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.dashboard-executive-page .executive-chart-card::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--period-a) 0%, var(--period-b) 100%);
}

.dashboard-executive-page .executive-chart-card--monthly {
    --period-a: #2563eb;
    --period-b: #7c3aed;
    --period-soft: linear-gradient(135deg, rgba(37, 99, 235, .08) 0%, rgba(124, 58, 237, .08) 100%);
}

.dashboard-executive-page .executive-chart-card--quarterly {
    --period-a: #0891b2;
    --period-b: #059669;
    --period-soft: linear-gradient(135deg, rgba(8, 145, 178, .08) 0%, rgba(5, 150, 105, .08) 100%);
}

.dashboard-executive-page .executive-chart-card--semester {
    --period-a: #ea580c;
    --period-b: #e11d48;
    --period-soft: linear-gradient(135deg, rgba(234, 88, 12, .08) 0%, rgba(225, 29, 72, .08) 100%);
}

.dashboard-executive-page .executive-chart-card--yearly {
    --period-a: #7c3aed;
    --period-b: #ec4899;
    --period-soft: linear-gradient(135deg, rgba(124, 58, 237, .08) 0%, rgba(236, 72, 153, .08) 100%);
}

.dashboard-executive-page .executive-chart-card__hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 22px 14px;
    background: transparent;
    color: #0f172a;
}

.dashboard-executive-page .executive-chart-card__hero h3 {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #0f172a;
}

.dashboard-executive-page .executive-period-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: var(--period-soft);
    border: 1px solid rgba(148, 163, 184, .18);
    color: var(--period-a);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-executive-page .executive-chart-card__hero p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.dashboard-executive-page .executive-chart-card__total {
    min-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--period-soft);
    border: 1px solid rgba(148, 163, 184, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.dashboard-executive-page .executive-chart-card__total span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    font-weight: 800;
}

.dashboard-executive-page .executive-chart-card__total strong {
    margin-top: 6px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 900;
    color: var(--period-a);
}

.dashboard-executive-page .executive-chart-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 22px 8px;
}

.dashboard-executive-page .period-print-btn {
    background: var(--period-soft);
    color: var(--period-a);
    border-color: rgba(148, 163, 184, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.dashboard-executive-page .period-print-btn:hover {
    background: var(--period-soft);
    color: var(--period-a);
    border-color: rgba(148, 163, 184, .24);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255,255,255,.85);
}

.dashboard-executive-page .chart-canvas-wrap--executive {
    height: var(--chart-height, clamp(420px, 42vh, 560px));
    min-height: 380px;
    margin: 0 22px 22px;
    padding: 12px 12px 8px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border: 1px solid rgba(15, 23, 42, .05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.dashboard-executive-page .chart-canvas-wrap--executive canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.dashboard-executive-page .executive-chart-card--dense .chart-canvas-wrap--executive {
    min-height: 460px;
}

.dashboard-executive-page .executive-chart-card--compact .chart-canvas-wrap--executive {
    min-height: 340px;
}

.dashboard-executive-page .executive-chart-card .stats-strip {
    padding: 0 22px;
    margin-bottom: 14px;
}

.dashboard-executive-page .executive-chart-card .mini-stat {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .04);
}

.dashboard-executive-page .executive-chart-card .mini-stat .label {
    color: #64748b;
    font-weight: 800;
    letter-spacing: .08em;
}

.dashboard-executive-page .executive-chart-card .mini-stat .value {
    color: var(--period-a);
    font-weight: 900;
}

.dashboard-executive-page .monitoring-summary-card {
    background: linear-gradient(135deg, #ffffff 0%, #fffefe 100%);
}

.dashboard-executive-page .monitoring-summary-text {
    margin: 6px 0 0;
    color: #64748b;
    max-width: 760px;
}

.dashboard-executive-page .monitoring-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-executive-page .monitoring-kpi {
    border-radius: 18px;
    padding: 18px;
    border: 1px solid #eceff3;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.dashboard-executive-page .monitoring-kpi--red {
    background: linear-gradient(135deg, #fff7f7 0%, #ffe9e9 100%);
    border-color: #f6d4d4;
}

.dashboard-executive-page .monitoring-kpi--blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #cfe0ff;
}

.dashboard-executive-page .monitoring-kpi--orange {
    background: linear-gradient(135deg, #fff7ef 0%, #ffe9d8 100%);
    border-color: #f8d6bb;
}

.dashboard-executive-page .monitoring-kpi--purple {
    background: linear-gradient(135deg, #fdf4ff 0%, #f7e8ff 100%);
    border-color: #ead4fa;
}

.dashboard-executive-page .monitoring-kpi__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.dashboard-executive-page .monitoring-kpi__value {
    margin-top: 10px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #0f172a;
}

.dashboard-executive-page .monitoring-kpi__meta {
    margin-top: 8px;
    font-size: 13px;
    color: #0f172a;
    font-weight: 800;
}

.dashboard-executive-page .monitoring-kpi__submeta {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

.dashboard-executive-page .monitoring-grid {
    display: grid;
    gap: 18px;
}

.dashboard-executive-page .monitoring-card {
    background: linear-gradient(135deg, #ffffff 0%, #fffefe 100%);
    border: 1px solid #eceff3;
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.dashboard-executive-page .monitoring-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 22px 14px;
}

.dashboard-executive-page .monitoring-card__eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #991b1b;
}

.dashboard-executive-page .monitoring-card__head h3 {
    margin: 8px 0 6px;
    font-size: 24px;
    letter-spacing: -.02em;
    color: #0f172a;
}

.dashboard-executive-page .monitoring-card__head p {
    margin: 0;
    color: #64748b;
    max-width: 780px;
}

.dashboard-executive-page .monitoring-card__summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-executive-page .monitoring-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.dashboard-executive-page .monitoring-chip.soft {
    background: #fff5f5;
    color: #991b1b;
    border: 1px solid rgba(185, 28, 28, 0.12);
}

.dashboard-executive-page .monitoring-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 22px 18px;
}

.dashboard-executive-page .monitoring-perpage {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-executive-page .monitoring-perpage a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(185, 28, 28, 0.12);
    background: #fff5f5;
    color: #991b1b;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-executive-page .monitoring-perpage a.active {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #fff;
    border-color: transparent;
}

.dashboard-executive-page .monitoring-meta {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-executive-page .monitoring-table {
    margin: 0 22px 18px;
}

.dashboard-executive-page .monitoring-table table {
    min-width: 1220px;
}

.dashboard-executive-page .monitoring-trigger {
    display: grid;
    gap: 4px;
}

.dashboard-executive-page .monitoring-note {
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
}

.dashboard-executive-page .monitoring-overdue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-executive-page .monitoring-overdue.safe {
    background: #effcf6;
    color: #047857;
}

.dashboard-executive-page .monitoring-overdue.warn {
    background: #fff7ed;
    color: #c2410c;
}

.dashboard-executive-page .monitoring-overdue.critical {
    background: #fff1f2;
    color: #be123c;
}

.dashboard-executive-page .monitoring-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-executive-page .monitoring-actions .btn {
    min-height: 36px;
}

.dashboard-executive-page .monitoring-pagination {
    padding: 0 22px 22px;
}

/* ===== Responsive ===== */
@media (max-width: 1440px) {
    .dashboard-executive-page .status-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-executive-page .executive-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-executive-page .monitoring-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .dashboard-executive-page .executive-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-executive-page .executive-panel-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-executive-page .mini-card-grid--3 {
        grid-template-columns: 1fr;
    }

    .dashboard-executive-page .status-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-executive-page .executive-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-executive-page .executive-chart-card__total {
        text-align: left;
        min-width: 0;
    }

    .dashboard-executive-page .monitoring-card__head,
    .dashboard-executive-page .monitoring-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-executive-page .monitoring-card__summary {
        justify-content: flex-start;
    }

    .dashboard-executive-page .monitoring-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .dashboard-executive-page .status-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-executive-page .executive-hero__actions {
        grid-template-columns: 1fr;
    }

    .dashboard-executive-page .executive-form-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-executive-page .executive-filter-actions {
        flex-direction: column;
    }

    .dashboard-executive-page .executive-filter-actions .btn {
        width: 100%;
    }

    .dashboard-executive-page .executive-chart-card__hero {
        flex-direction: column;
    }

    .dashboard-executive-page .chart-canvas-wrap--executive {
        height: var(--chart-height-mobile, 360px);
        min-height: 320px;
        margin-left: 16px;
        margin-right: 16px;
    }

    .dashboard-executive-page .monitoring-table {
        margin-left: 16px;
        margin-right: 16px;
    }

    .dashboard-executive-page .monitoring-pagination {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 560px) {
    .dashboard-executive-page .status-card-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   BUTTON STYLE - SOFT EXECUTIVE
   ========================================================= */

.dashboard-executive-page .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 8px 14px;
    font-size: 13px;
    transition: all .2s ease;
}

/* tombol utama */
.dashboard-executive-page .btn-dark {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #fff;
    border: none;
}

.dashboard-executive-page .btn-dark:hover {
    background: linear-gradient(135deg, #991b1b, #dc2626);
}

/* tombol secondary */
.dashboard-executive-page .btn-light {
    background: #ffffffcc;
    color: #7f1d1d;
    border: 1px solid #f1d5d5;
}

.dashboard-executive-page .btn-light:hover {
    background: #fff;
    border-color: #e11d48;
    color: #b91c1c;
}

/* tombol outline */
.dashboard-executive-page .btn-outline {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.dashboard-executive-page .btn-outline:hover {
    border-color: #b91c1c;
    color: #b91c1c;
}

/* =========================================================
   BADGE STATUS - SOFT COLOR
   ========================================================= */

.badge-status {
    display: inline-block;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: .4px;
}

/* booked */
.badge-booked {
    background: #eef2f7;
    color: #475569;
}

/* transit */
.badge-transit {
    background: #fff2d9;
    color: #b45309;
}

/* delivery */
.badge-delivery {
    background: #dbeafe;
    color: #1d4ed8;
}

/* completed */
.badge-completed {
    background: #dff7ec;
    color: #047857;
}

/* pod kembali */
.badge-podback {
    background: #ffe9d8;
    color: #c2410c;
}

/* pod diterima */
.badge-podreceived {
    background: #f7e8ff;
    color: #7e22ce;
}

@page {
    size: A4 landscape;
    margin: 5mm;
}

.logo-box img {
    max-width: 150px;
    max-height: 58px;
    height: auto;
    display: block;
}

.document {
    border: 1px solid #d9dde3;
    padding: 5px 6px 4px 6px;
}

.table-primary {
    margin-top: 5px;
}

.table-primary th,
.table-primary td,
.table-sign th,
.table-sign td {
    border: 1px solid #d9dde3;
    padding: 3px 4px;
    vertical-align: top;
    word-break: break-word;
}

/* =========================================================
   SSCX UI FOUNDATION - JENIEXPRESS ALIGNMENT
   Keep this block last: it normalizes the older stacked UI layers.
   ========================================================= */

:root {
    --sscx-red: #c40000;
    --sscx-red-dark: #991b1b;
    --sscx-red-soft: #fff5f5;
    --sscx-red-border: #ffd6d6;
    --sscx-bg: #f5f6f8;
    --sscx-card: #ffffff;
    --sscx-text: #0f172a;
    --sscx-muted: #64748b;
    --sscx-line: #e8edf2;
    --sscx-shadow-sm: 0 10px 26px rgba(15, 23, 42, .06);
    --sscx-shadow-md: 0 14px 32px rgba(15, 23, 42, .08);
    --sscx-radius: 8px;
    --sscx-radius-lg: 8px;
    --sscx-radius-xl: 8px;
}

@media screen {
body {
    background: var(--sscx-bg);
    color: var(--sscx-text);
}

.topbar {
    background: linear-gradient(135deg, #7f1d1d, var(--sscx-red));
    box-shadow: 0 10px 24px rgba(127, 29, 29, .16);
}

.navbar {
    border-bottom: 1px solid rgba(185, 28, 28, .12);
}

.nav-links a,
.btn,
button,
input,
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea,
.btn-primary-red,
.btn-soft {
    border-radius: 8px;
}

.card,
.table-wrap,
.form-card,
.filter-box,
.dashboard-hero,
.report-card,
.chart-card,
.filters-premium,
.hero-panel,
.list-panel,
.result-panel,
.public-hero,
.search-panel,
.member-panel,
.checker-panel,
.filter-panel,
.data-panel,
.summary-box,
.detail-card,
.info-box,
.help-box,
.hint-box,
.mini-stat,
.metric-box,
.result-card,
.timeline-clean .item,
.track-item {
    border-radius: 8px !important;
    border-color: #eceff3;
    box-shadow: var(--sscx-shadow-sm);
}

.dashboard-hero,
.hero-strip,
.context-strip,
.public-hero,
.hero-panel,
.filter-box.form-card,
.checker-panel,
.filter-panel,
.data-panel {
    background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
}

.public-hero::after,
.hero-panel::after {
    display: none;
}

.brand,
.page-head h1,
.dashboard-hero h1,
.section-title,
.report-card h3,
.list-panel .panel-head h2,
.public-hero h1,
.hero-panel h1,
.metric,
.metric-box .value,
.result-card .v,
.timeline-clean .status {
    color: var(--sscx-red-dark);
}

.btn-dark,
.btn-primary-red {
    background: linear-gradient(135deg, var(--sscx-red), var(--sscx-red-dark));
    color: #fff;
}

.btn-light,
.btn-soft,
.badge-soft,
.data-chip,
.status-pill,
.chart-chip {
    background: var(--sscx-red-soft);
    color: var(--sscx-red-dark);
    border-color: var(--sscx-red-border);
}

thead th,
th {
    background: #fff6f6;
    color: var(--sscx-red-dark);
}

input:focus,
select:focus,
textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.section-title {
    margin: 22px 0 14px;
    font-size: 18px;
    line-height: 1.35;
    border-left: 4px solid var(--sscx-red);
    padding-left: 10px;
}

.form-card.premium-form > .section-title:first-child,
.form-action-bar + .section-title {
    margin-top: 0;
}

.inline-actions,
.action-cluster {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.form-action-bar,
.sticky-bar {
    position: sticky;
    top: calc(var(--sscx-topbar-h) + var(--sscx-navbar-h));
    z-index: 20;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 0;
    background: rgba(245, 246, 248, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(185, 28, 28, .10);
}

.summary-box {
    background: #fff;
    padding: 18px;
}

.summary-box .metric-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 14px;
}

.summary-box .metric-row:last-child {
    border-bottom: 0;
}

.summary-box .grand {
    color: var(--sscx-red-dark);
    font-size: 18px;
    font-weight: 800;
}

.readonly-soft {
    background: #f9fafb !important;
}

.two-col,
.detail-grid {
    display: grid;
    gap: 16px;
}

.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.kv {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px 12px;
    font-size: 14px;
}

.kv div {
    padding: 7px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.kv div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.track-title {
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
}

.detail-card h3 {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.35;
    border-left: 4px solid var(--sscx-red);
    padding-left: 10px;
}

.table-wrap table td {
    vertical-align: top;
}

.proof-links a {
    display: inline-block;
    margin-right: 10px;
    color: var(--sscx-red-dark);
    font-size: 13px;
    font-weight: 700;
}

.ops-spacer {
    height: 16px;
}

.page-space {
    height: 18px;
}

.form-group.flush {
    margin-bottom: 0;
}

.shipment-filter-grid {
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(170px, 1fr));
}

.metric-value-compact {
    font-size: 20px !important;
}

.summary {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    font-weight: 800;
    color: var(--sscx-red-dark);
}

@media (max-width: 900px) {
    .two-col,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .form-action-bar,
    .sticky-bar {
        position: static;
    }

    .shipment-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Operational admin pages should use the screen width with a fixed edge gap. */
body.admin-ui {
    --ops-edge-gap: 1cm;
}

body.admin-ui .container,
body.admin-ui .container-wide,
body.admin-ui .container-normal {
    width: calc(100% - (var(--ops-edge-gap) * 2));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

body.admin-ui .topbar {
    padding-left: var(--ops-edge-gap);
    padding-right: var(--ops-edge-gap);
}

@media (max-width: 900px) {
    body.admin-ui {
        --ops-edge-gap: 12px;
    }
}

.customer-deal-guide {
    margin-bottom: 18px;
}

.deal-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.deal-guide-head .section-title {
    margin-top: 0;
}

.deal-guide-filter {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(190px, 1fr)) minmax(170px, auto) minmax(140px, auto);
    gap: 14px;
    align-items: end;
    margin-bottom: 14px;
}

.deal-guide-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}

.deal-guide-count {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
}

.deal-guide-count span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}

.deal-guide-table {
    overflow-x: auto;
}

.deal-guide-table table {
    min-width: 1180px;
}

.deal-guide-table th,
.deal-guide-table td {
    font-size: 13px;
}

.deal-guide-foot {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .deal-guide-head {
        flex-direction: column;
    }

    .deal-guide-filter {
        grid-template-columns: 1fr;
    }

    .deal-guide-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .deal-guide-count {
        justify-content: flex-start;
    }
}

/* =========================================================
   OPS ADMIN FINAL PASS
   ========================================================= */
body.admin-ui {
    --ops-accent: #dc2626;
    --ops-accent-dark: #991b1b;
    --ops-accent-soft: #fff5f5;
    --ops-accent-border: rgba(220, 38, 38, .10);
    --ops-secondary: #2563eb;
    --ops-secondary-soft: #eff6ff;
    --ops-surface: #ffffff;
    --ops-surface-soft: #f8fafc;
}

body.admin-ui .topbar {
    background: linear-gradient(135deg, #7f1d1d 0%, var(--ops-accent) 100%);
    box-shadow: 0 12px 24px rgba(127, 29, 29, .16);
}

body.admin-ui .navbar {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(220, 38, 38, .10);
}

body.admin-ui .brand,
body.admin-ui .page-head h1,
body.admin-ui .dashboard-hero h1,
body.admin-ui .section-title,
body.admin-ui .list-panel .panel-head h2,
body.admin-ui .hero-panel h1,
body.admin-ui .metric-box .value {
    color: var(--ops-accent-dark);
}

body.admin-ui .nav-links a.active,
body.admin-ui .nav-links a:hover {
    color: var(--ops-accent-dark);
    background: var(--ops-accent-soft);
    border-color: rgba(220, 38, 38, .12);
}

body.admin-ui .btn-dark,
body.admin-ui button.btn-dark,
body.admin-ui input[type="submit"].btn-dark {
    background: linear-gradient(135deg, var(--ops-accent-dark), #ef4444);
    color: #fff;
    border: none;
    box-shadow: 0 12px 20px rgba(220, 38, 38, .16);
}

body.admin-ui .btn-dark:hover,
body.admin-ui button.btn-dark:hover,
body.admin-ui input[type="submit"].btn-dark:hover {
    background: linear-gradient(135deg, #7f1d1d, #dc2626);
}

body.admin-ui .btn-light {
    background: var(--ops-secondary-soft);
    color: var(--ops-secondary);
    border: 1px solid rgba(37, 99, 235, .10);
}

body.admin-ui .btn-light:hover {
    background: #fff;
    border-color: rgba(37, 99, 235, .18);
    color: #1d4ed8;
}

body.admin-ui .hero-panel,
body.admin-ui .filters-premium,
body.admin-ui .list-panel,
body.admin-ui .form-card,
body.admin-ui .customer-deal-guide,
body.admin-ui .metric-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

body.admin-ui .hero-panel::before,
body.admin-ui .filters-premium::before,
body.admin-ui .list-panel::before,
body.admin-ui .form-card::before,
body.admin-ui .customer-deal-guide::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ops-accent) 0%, var(--ops-secondary) 100%);
}

body.admin-ui .hero-panel,
body.admin-ui .filter-box.form-card,
body.admin-ui .filters-premium {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

body.admin-ui .metric-box {
    min-height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.admin-ui .metric-box .label {
    color: #64748b;
    font-weight: 800;
}

body.admin-ui .metric-box .meta {
    color: #475569;
    line-height: 1.55;
}

body.admin-ui .page-head .muted,
body.admin-ui .panel-head .sub,
body.admin-ui .toolbar-note,
body.admin-ui .deal-guide-foot {
    color: #64748b;
    line-height: 1.7;
}

body.admin-ui .data-chip,
body.admin-ui .chart-chip,
body.admin-ui .deal-guide-count span {
    background: var(--ops-secondary-soft);
    color: var(--ops-secondary);
    border-color: rgba(37, 99, 235, .12);
}

body.admin-ui .list-control-bar,
body.admin-ui .list-panel .panel-head {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-ui .table-premium,
body.admin-ui .deal-guide-table,
body.admin-ui .list-panel .panel-body,
body.admin-ui .table-wrap {
    overflow-x: auto;
}

body.admin-ui .table-premium table,
body.admin-ui .deal-guide-table table,
body.admin-ui .list-panel table,
body.admin-ui .table-wrap table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body.admin-ui .table-premium thead th,
body.admin-ui .deal-guide-table thead th,
body.admin-ui .list-panel thead th,
body.admin-ui .table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbff;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

body.admin-ui .table-premium tbody tr:nth-child(even),
body.admin-ui .deal-guide-table tbody tr:nth-child(even),
body.admin-ui .list-panel tbody tr:nth-child(even),
body.admin-ui .table-wrap tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, .58);
}

body.admin-ui .table-premium tbody tr:hover,
body.admin-ui .deal-guide-table tbody tr:hover,
body.admin-ui .list-panel tbody tr:hover,
body.admin-ui .table-wrap tbody tr:hover {
    background: #fff8f8;
}

body.admin-ui .table-premium td,
body.admin-ui .deal-guide-table td,
body.admin-ui .list-panel td,
body.admin-ui .table-wrap td {
    vertical-align: top;
    color: #0f172a;
}

body.admin-ui .empty-state {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

body.admin-ui .form-action-bar {
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 28px rgba(15,23,42,.06);
}

body.admin-ui .customer-deal-guide .section-title,
body.admin-ui .premium-form .section-title,
body.admin-ui .panel-head h2 {
    letter-spacing: -.01em;
}

@media (max-width: 900px) {
    body.admin-ui .metric-box {
        min-height: auto;
    }
}

/* ===== OPS ADMIN DETAIL PAGES ===== */
body.admin-ui.ops-tracking-page .info-box,
body.admin-ui.ops-manifest-page .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .05);
}

body.admin-ui.ops-tracking-page .stats-strip .mini-stat,
body.admin-ui.ops-manifest-page .stats-strip .mini-stat {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.admin-ui.ops-tracking-page .hero-strip,
body.admin-ui.ops-manifest-page .hero-strip {
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

body.admin-ui.ops-manifest-page .table-wrap.soft-table,
body.admin-ui.ops-tracking-page .table-wrap.soft-table {
    overflow-x: auto;
}

body.admin-ui.ops-manifest-page .table-wrap.soft-table table,
body.admin-ui.ops-tracking-page .table-wrap.soft-table table {
    min-width: 100%;
}

body.admin-ui.ops-manifest-page .table-wrap.soft-table thead th,
body.admin-ui.ops-tracking-page .table-wrap.soft-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
}

/* ===== OPS RATES PAGE ===== */
body.admin-ui.ops-rates-page {
    --danger: #dc2626;
    --danger-dark: #991b1b;
    --danger-soft: #fff5f5;
    --danger-border: rgba(220, 38, 38, .10);
    --text: #0f172a;
    --muted: #64748b;
    --bg: #f3f6fa;
}

body.admin-ui.ops-rates-page .topbar {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
    box-shadow: 0 12px 24px rgba(127, 29, 29, .16);
}

body.admin-ui.ops-rates-page .navbar-admin {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(220, 38, 38, .10);
}

body.admin-ui.ops-rates-page .admin-brand,
body.admin-ui.ops-rates-page .page-title,
body.admin-ui.ops-rates-page .panel-head h2,
body.admin-ui.ops-rates-page .metric-box .value {
    color: #991b1b;
}

body.admin-ui.ops-rates-page .nav-links a:hover,
body.admin-ui.ops-rates-page .nav-links a.active {
    background: #fff5f5;
    color: #991b1b;
}

body.admin-ui.ops-rates-page .hero-panel,
body.admin-ui.ops-rates-page .form-panel,
body.admin-ui.ops-rates-page .checker-panel,
body.admin-ui.ops-rates-page .filter-panel,
body.admin-ui.ops-rates-page .data-panel,
body.admin-ui.ops-rates-page .metric-box {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
}

body.admin-ui.ops-rates-page .hero-panel,
body.admin-ui.ops-rates-page .form-panel,
body.admin-ui.ops-rates-page .checker-panel,
body.admin-ui.ops-rates-page .filter-panel {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

body.admin-ui.ops-rates-page .hero-panel h1 {
    font-size: 32px;
    letter-spacing: -.02em;
}

body.admin-ui.ops-rates-page .panel-head,
body.admin-ui.ops-rates-page .list-control-bar {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-ui.ops-rates-page .panel-chip,
body.admin-ui.ops-rates-page .perpage-link.active {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, .12);
    color: #2563eb;
}

body.admin-ui.ops-rates-page .metric-box {
    min-height: 132px;
}

body.admin-ui.ops-rates-page .btn-danger-solid {
    background: linear-gradient(135deg, #991b1b, #ef4444);
    box-shadow: 0 12px 20px rgba(220, 38, 38, .16);
}

body.admin-ui.ops-rates-page .btn-soft {
    background: #eff6ff;
    color: #2563eb;
    border-color: rgba(37, 99, 235, .12);
}

body.admin-ui.ops-rates-page .result-item,
body.admin-ui.ops-rates-page .rate-filter-summary {
    border-radius: 18px;
    border-color: rgba(15, 23, 42, .07);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}

body.admin-ui.ops-rates-page .result-item.total {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 100%);
    border-color: rgba(220, 38, 38, .14);
}

body.admin-ui.ops-rates-page .table-wrap {
    overflow-x: auto;
}

body.admin-ui.ops-rates-page .table-wrap table {
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

body.admin-ui.ops-rates-page .table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbff;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
}

body.admin-ui.ops-rates-page .table-wrap tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, .58);
}

body.admin-ui.ops-rates-page .table-wrap tbody tr:hover {
    background: #fff8f8;
}

/* ===== OPS DETAIL PAGES ===== */
body.admin-ui.ops-shipment-detail-page .detail-card,
body.admin-ui.ops-manifest-detail-page .info-box,
body.admin-ui.ops-manifest-detail-page .detail-card,
body.admin-ui.ops-show-resi-page .hero-card,
body.admin-ui.ops-show-resi-page .summary-box,
body.admin-ui.ops-show-resi-page .summary-mini,
body.admin-ui.ops-show-resi-page .detail-card,
body.admin-ui.ops-show-resi-page .shipment-barcode {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
}

body.admin-ui.ops-shipment-detail-page .detail-card,
body.admin-ui.ops-manifest-detail-page .info-box,
body.admin-ui.ops-manifest-detail-page .detail-card,
body.admin-ui.ops-show-resi-page .hero-card {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

body.admin-ui.ops-shipment-detail-page .page-head h1,
body.admin-ui.ops-manifest-detail-page .page-head h1,
body.admin-ui.ops-show-resi-page .page-head h1,
body.admin-ui.ops-show-resi-page .resi-title h2 {
    letter-spacing: -.02em;
}

body.admin-ui.ops-shipment-detail-page .stats-strip .mini-stat,
body.admin-ui.ops-manifest-detail-page .stats-strip .mini-stat {
    min-height: 118px;
}

body.admin-ui.ops-shipment-detail-page .detail-card h3,
body.admin-ui.ops-manifest-detail-page .detail-card h3,
body.admin-ui.ops-show-resi-page .detail-card .head h3 {
    color: #991b1b;
}

body.admin-ui.ops-shipment-detail-page .track-item,
body.admin-ui.ops-show-resi-page .track-item {
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-ui.ops-manifest-detail-page .table-wrap.soft-table,
body.admin-ui.ops-shipment-detail-page .table-wrap.soft-table,
body.admin-ui.ops-show-resi-page .table-wrap.soft-table {
    overflow-x: auto;
}

body.admin-ui.ops-manifest-detail-page .table-wrap.soft-table table,
body.admin-ui.ops-shipment-detail-page .table-wrap.soft-table table,
body.admin-ui.ops-show-resi-page .table-wrap.soft-table table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body.admin-ui.ops-manifest-detail-page .table-wrap.soft-table thead th,
body.admin-ui.ops-shipment-detail-page .table-wrap.soft-table thead th,
body.admin-ui.ops-show-resi-page .table-wrap.soft-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbff;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
}

body.admin-ui.ops-show-resi-page .hero-card {
    position: relative;
    overflow: hidden;
}

body.admin-ui.ops-show-resi-page .hero-card::before,
body.admin-ui.ops-show-resi-page .detail-card::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #2563eb 100%);
}

body.admin-ui.ops-show-resi-page .detail-card {
    position: relative;
    overflow: hidden;
}

body.admin-ui.ops-show-resi-page .detail-card .head {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-ui.ops-show-resi-page .summary-box .v,
body.admin-ui.ops-show-resi-page .summary-mini .value {
    color: #0f172a;
}

body.admin-ui.ops-shipment-edit-page .form-card.premium-form,
body.admin-ui.ops-shipment-edit-page .summary-box.sticky-panel {
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .06);
}

body.admin-ui.ops-shipment-edit-page .form-card.premium-form {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

body.admin-ui.ops-shipment-edit-page .summary-box.sticky-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-ui.ops-shipment-edit-page .page-head h1,
body.admin-ui.ops-shipment-edit-page .section-title {
    letter-spacing: -.02em;
}

body.admin-ui.ops-shipment-edit-page .section-title {
    color: #991b1b;
}

body.admin-ui.ops-shipment-edit-page .metric-row {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 252, .82);
    border: 1px solid rgba(226, 232, 240, .9);
}

body.admin-ui.ops-shipment-edit-page .metric-row.grand {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 100%);
    border-color: rgba(220, 38, 38, .12);
}

body.admin-ui.ops-shipment-edit-page .metric-row strong {
    color: #0f172a;
}

body.admin-ui.ops-shipment-edit-page .readonly-soft {
    background: #f8fafc;
    border-color: rgba(37, 99, 235, .10);
    color: #0f172a;
}

body.admin-ui.ops-internal-track-page .search-card,
body.admin-ui.ops-internal-track-page .result-box,
body.admin-ui.ops-internal-track-page .timeline-box,
body.admin-ui.ops-internal-track-page .summary-card,
body.admin-ui.ops-internal-track-page .timeline-card {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
}

body.admin-ui.ops-internal-track-page .search-card,
body.admin-ui.ops-internal-track-page .result-box,
body.admin-ui.ops-internal-track-page .timeline-box {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

body.admin-ui.ops-internal-track-page .page-head h1,
body.admin-ui.ops-internal-track-page .timeline-title,
body.admin-ui.ops-internal-track-page .timeline-status {
    letter-spacing: -.02em;
}

body.admin-ui.ops-internal-track-page .summary-card,
body.admin-ui.ops-internal-track-page .timeline-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.admin-ui.ops-internal-track-page .summary-card .value,
body.admin-ui.ops-internal-track-page .timeline-remark,
body.admin-ui.ops-internal-track-page .timeline-location {
    color: #0f172a;
}

body.admin-ui.ops-internal-track-page .status-pill,
body.admin-ui.ops-internal-track-page .timeline-count {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

body.admin-ui.ops-internal-track-page .timeline-item {
    border-left-color: rgba(248, 113, 113, .28);
}

body.admin-ui.ops-internal-track-page .timeline-dot {
    box-shadow:
        0 0 0 3px rgba(254, 202, 202, .8),
        0 10px 20px rgba(220, 38, 38, .18);
}

body.admin-ui.ops-internal-track-page .timeline-item.is-latest .timeline-card {
    background: linear-gradient(135deg, #fff7f7 0%, #fff1f2 100%);
}