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

:root {
    --navy-950: #061936;
    --navy-900: #08234a;
    --navy-850: #0a2c59;
    --navy-800: #0d3b70;
    --ink: #122033;
    --muted: #68778a;
    --muted-2: #8b98a8;
    --line: #e3e9ef;
    --line-soft: #edf1f5;
    --surface: #ffffff;
    --canvas: #f4f7fa;
    --primary: #087db7;
    --primary-2: #159ed0;
    --primary-soft: #e7f5fb;
    --primary-rgb: 8, 125, 183;
    --accent: #f4b61b;
    --accent-rgb: 244, 182, 27;
    --accent-ink: #3b2900;
    --sidebar-mid: #082750;
    --sidebar-end: #06172f;
    --blue: #2f6fed;
    --cyan: #118da0;
    --purple: #7654d6;
    --orange: #df7a24;
    --amber: #c99012;
    --green: #159763;
    --red: #d9465b;
    --slate: #64748b;
    --shadow-sm: 0 1px 2px rgba(16, 35, 54, .04), 0 2px 8px rgba(16, 35, 54, .03);
    --shadow-md: 0 12px 34px rgba(21, 41, 61, .10), 0 2px 8px rgba(21, 41, 61, .05);
    --shadow-lg: 0 24px 64px rgba(6, 20, 38, .18);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --sidebar: 256px;
    --topbar: 68px;
}

:root[data-theme="executive_navy"] {
    --navy-950: #051326;
    --navy-900: #071b33;
    --navy-850: #0a2442;
    --navy-800: #102f52;
    --primary: #244f83;
    --primary-2: #36699f;
    --primary-soft: #edf3f9;
    --primary-rgb: 36, 79, 131;
    --accent: #d7a92e;
    --accent-rgb: 215, 169, 46;
    --accent-ink: #332400;
    --sidebar-mid: #081d36;
    --sidebar-end: #04101f;
}

:root[data-theme="modern_teal"] {
    --navy-950: #061426;
    --navy-900: #081a30;
    --navy-850: #0b213b;
    --navy-800: #0f2b4b;
    --primary: #0f6e68;
    --primary-2: #15968c;
    --primary-soft: #e5f6f3;
    --primary-rgb: 15, 110, 104;
    --accent: #b8df46;
    --accent-rgb: 184, 223, 70;
    --accent-ink: #223400;
    --sidebar-mid: #071a2e;
    --sidebar-end: #061627;
}

* { box-sizing: border-box; }
html { font-size: 15px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: 'DM Sans', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; width: 18px; height: 18px; stroke-width: 1.8; }
[hidden] { display: none !important; }

/* Authentication */
.auth-body { min-height: 100vh; background: #fff; }
.auth-layout { display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(420px, .75fr); min-height: 100vh; }
.auth-brand-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 42px 54px; color: #fff; background: radial-gradient(circle at 78% 18%, rgba(var(--primary-rgb),.26), transparent 35%), linear-gradient(145deg, var(--navy-950) 0%, var(--sidebar-mid) 60%, var(--navy-800) 100%); }
.auth-brand-panel::before { content: ''; position: absolute; width: 540px; height: 540px; right: -205px; bottom: -235px; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 50%; box-shadow: 0 0 0 80px rgba(var(--accent-rgb),.03), 0 0 0 160px rgba(var(--accent-rgb),.018); }
.auth-brand-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.auth-glow { position: absolute; border-radius: 999px; filter: blur(2px); }
.auth-glow-one { width: 8px; height: 8px; background: var(--accent); right: 25%; top: 24%; box-shadow: 0 0 28px 12px rgba(var(--accent-rgb),.17); }
.auth-glow-two { width: 5px; height: 5px; background: #44d9ca; left: 18%; bottom: 24%; box-shadow: 0 0 24px 10px rgba(68,217,202,.12); }
.auth-brand-top { position: relative; z-index: 1; display: flex; gap: 13px; align-items: center; }
.auth-brand-top strong { display: block; font-family: Manrope, sans-serif; font-size: 16px; letter-spacing: -.02em; }
.auth-brand-top small { display: block; margin-top: 3px; color: #8fa4b9; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.brand-mark { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 7px 18px rgba(2,18,42,.2); }
.brand-mark::before { content: ''; position: absolute; inset: 3px; background: url('../brand/mja-logo-mark-256.png') center/contain no-repeat; }
.brand-mark span { opacity: 0; }
.brand-mark-lg { width: 58px; height: 58px; border-radius: 15px; }
.brand-mark-lg::before { inset: 4px; }
.auth-hero { position: relative; z-index: 1; max-width: 760px; margin: auto 0; padding: 80px 0 110px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { content: ''; display: inline-block; width: 22px; height: 2px; background: currentColor; }
.eyebrow.light { color: var(--accent); }
.auth-hero h1 { max-width: 700px; margin: 22px 0 20px; font: 700 clamp(40px, 5vw, 66px)/1.08 Manrope, sans-serif; letter-spacing: -.055em; }
.auth-hero > p { max-width: 620px; margin: 0; color: #b5c3d1; font-size: 17px; line-height: 1.7; }
.auth-flow { display: flex; align-items: center; gap: 12px; margin-top: 54px; }
.auth-flow > div { min-width: 138px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.045); backdrop-filter: blur(5px); }
.auth-flow > div.active { border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.09); }
.auth-flow > div > span { color: #85a0b9; }
.auth-flow > div.active > span { color: var(--accent); }
.auth-flow strong, .auth-flow small { display: block; }
.auth-flow strong { margin-top: 18px; font-size: 13px; }
.auth-flow small { margin-top: 3px; color: #8195aa; font-size: 10px; }
.auth-flow > i { color: #547087; }
.auth-brand-bottom { position: relative; z-index: 1; display: flex; gap: 9px; align-items: center; color: #7990a6; font-size: 11px; letter-spacing: .04em; }
.auth-brand-bottom span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12); }
.auth-form-panel { display: grid; place-items: center; padding: 50px; background: #fff; }
.auth-form-wrap { width: min(410px, 100%); }
.auth-form-wrap h2 { margin: 16px 0 8px; font: 700 31px/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.auth-subtitle { margin: 0 0 36px; color: var(--muted); line-height: 1.6; }
.auth-form { display: grid; gap: 10px; }
.field-label { margin-top: 8px; color: #344357; font-size: 12px; font-weight: 700; }
.label-row { display: flex; align-items: end; justify-content: space-between; }
.text-button { padding: 0; color: var(--primary); border: 0; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.demo-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.demo-inline span { color: var(--muted-2); font-size: 9px; }
.demo-inline .text-button + .text-button { padding-left: 7px; border-left: 1px solid var(--line); }
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon > svg { position: absolute; left: 14px; color: var(--muted-2); pointer-events: none; }
.input-with-icon input { width: 100%; height: 48px; padding: 0 44px; color: var(--ink); outline: none; border: 1px solid #dbe3ea; border-radius: 10px; background: #fbfcfd; transition: .18s; }
.input-with-icon input:focus { border-color: var(--primary-2); background: #fff; box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }
.password-toggle { position: absolute; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.check-row { display: flex; gap: 9px; align-items: center; margin: 7px 0 12px; color: var(--muted); font-size: 12px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.form-alert { padding: 11px 13px; color: #a8293d; border: 1px solid #ffd0d7; border-radius: 8px; background: #fff2f4; font-size: 12px; }
.auth-help { display: flex; gap: 12px; margin-top: 30px; padding: 15px; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 10px; background: #fafcfd; }
.auth-help > svg { flex: none; color: var(--primary); }
.auth-help p { margin: 0; font-size: 11px; line-height: 1.5; }
.auth-help strong { color: #344357; }
.auth-version { display: block; margin-top: 24px; color: #a4afbb; text-align: center; }
.mobile-auth-brand { display: none; }

/* Buttons and generic controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 5px 14px rgba(var(--primary-rgb),.2); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(var(--primary-rgb),.28); }
.btn-accent { color: var(--accent-ink); background: var(--accent); }
.btn-secondary { color: #344357; border-color: var(--line); background: #fff; }
.btn-secondary:hover { border-color: #bdc9d5; background: #f9fbfc; }
.btn-danger { color: #fff; background: var(--red); }
.btn-ghost { color: var(--muted); background: transparent; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 11px; }
.btn-lg { height: 49px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; transition: .15s; }
.icon-btn:hover { color: var(--ink); border-color: #cbd5df; background: #f8fafc; }
.icon-btn.dark { color: #71869a; border-color: transparent; background: transparent; }

/* Application shell */
.app-body { min-width: 320px; overflow-x: hidden; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar); color: #d4deea; background: linear-gradient(180deg, var(--navy-950), var(--sidebar-mid) 60%, var(--sidebar-end)); box-shadow: 3px 0 18px rgba(6,20,38,.06); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; height: var(--topbar); padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; color: #fff; font: 700 15px Manrope, sans-serif; letter-spacing: -.025em; }
.brand-copy strong b { color: var(--accent); font-weight: inherit; }
.brand-copy small { color: #6e8398; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-close { display: none; margin-left: auto; }
.company-switcher { display: flex; align-items: center; gap: 10px; margin: 14px 12px 6px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); }
.company-icon { display: grid; place-items: center; flex: 0 0 31px; height: 31px; color: var(--accent); border-radius: 8px; background: rgba(var(--accent-rgb),.1); }
.company-switcher > div:nth-child(2) { min-width: 0; flex: 1; }
.company-switcher small, .company-switcher strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-switcher small { color: #71879c; font-size: 9px; }
.company-switcher strong { margin-top: 3px; color: #dce5ee; font-size: 10px; }
.company-switcher > svg { width: 14px; color: #657c92; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 10px 20px; scrollbar-width: thin; scrollbar-color: #20364a transparent; }
.nav-section { display: block; margin: 21px 10px 8px; color: #4f667c; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; height: 40px; margin: 2px 0; padding: 0 11px; color: #8fa2b5; border-radius: 8px; font-size: 12px; font-weight: 500; transition: .15s; }
.nav-item > svg { flex: none; width: 17px; }
.nav-item:hover { color: #e8eef5; background: rgba(255,255,255,.04); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(var(--primary-rgb),.25), rgba(var(--primary-rgb),.08)); }
.nav-item.active::before { content: ''; position: absolute; left: 0; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb),.4); }
.nav-item.active > svg { color: var(--accent); }
.nav-item em { margin-left: auto; min-width: 23px; padding: 2px 6px; color: #b5c3d1; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 9px; font-style: normal; text-align: center; }
.sidebar-footer { padding: 10px 12px 14px; border-top: 1px solid rgba(255,255,255,.06); }
.system-card { display: flex; align-items: center; gap: 9px; padding: 10px 9px; border-radius: 8px; background: rgba(255,255,255,.025); }
.status-pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #45cf88; box-shadow: 0 0 0 4px rgba(69,207,136,.08); }
.system-card div { min-width: 0; flex: 1; }
.system-card strong, .system-card small { display: block; }
.system-card strong { color: #aebdcb; font-size: 9px; }
.system-card small { margin-top: 2px; color: #526a7f; font-size: 8px; }
.system-percent { color: #45cf88; font-size: 8px; }
.sidebar-user { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 8px 4px 0; }
.avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #fff; border-radius: 10px; background: linear-gradient(145deg, #1d8f86, #0e5c58); font-size: 10px; font-weight: 700; }
.avatar.small { flex-basis: 31px; width: 31px; height: 31px; border-radius: 8px; font-size: 9px; }
.avatar.lg { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; font-size: 13px; }
.avatar.agent { color: #795b0b; background: #fff0c2; }
.avatar.sppg { color: #2d5faa; background: #e4efff; }
.sidebar-user > div:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: #c9d4df; font-size: 9px; }
.sidebar-user small { color: #60768a; font-size: 8px; }
.sidebar-user .icon-btn { flex: none; }
.app-main { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 40; top: 0; display: flex; align-items: center; justify-content: space-between; height: var(--topbar); padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.topbar-left, .topbar-actions, .breadcrumb, .topbar-profile { display: flex; align-items: center; }
.breadcrumb { gap: 7px; color: var(--muted-2); font-size: 11px; }
.breadcrumb svg { width: 13px; }
.breadcrumb strong { color: #334155; font-weight: 600; }
.topbar-actions { gap: 8px; }
.menu-toggle { display: none; margin-right: 10px; }
.global-search { display: flex; align-items: center; gap: 8px; width: 220px; height: 36px; padding: 0 10px; color: #8996a5; border: 1px solid var(--line); border-radius: 9px; background: #f7f9fb; font-size: 10px; cursor: pointer; }
.global-search svg { width: 15px; }
.global-search span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search kbd { margin-left: auto; padding: 2px 5px; color: #97a3af; border: 1px solid #dce3e9; border-radius: 4px; background: #fff; font: 8px inherit; }
.today-chip { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; font-size: 10px; }
.today-chip svg { width: 15px; }
.notification-btn { position: relative; }
.notification-btn em { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; color: #fff; border: 2px solid #fff; border-radius: 9px; background: var(--red); font-size: 8px; font-style: normal; line-height: 13px; }
.topbar-profile { gap: 9px; margin-left: 3px; padding: 4px 5px 4px 4px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.topbar-profile:hover { background: #f4f7f9; }
.topbar-profile div:nth-child(2) { text-align: left; }
.topbar-profile strong, .topbar-profile small { display: block; }
.topbar-profile strong { max-width: 100px; overflow: hidden; color: #2d3a4b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-profile small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.topbar-profile > svg { width: 13px; color: var(--muted-2); }
.sidebar-overlay { display: none; }
.page-container { min-height: calc(100vh - var(--topbar)); padding: 25px 27px 44px; outline: none; }

/* Page foundations */
.page-loading { display: grid; place-items: center; min-height: 55vh; color: var(--muted); }
.loading-brand { display: flex; align-items: center; gap: 12px; }
.loading-bar { width: 110px; height: 4px; overflow: hidden; border-radius: 4px; background: #dce5eb; }
.loading-bar i { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--primary); animation: loading 1.2s ease-in-out infinite alternate; }
.page-loading p { margin-top: -22vh; font-size: 11px; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-title-wrap { min-width: 0; }
.page-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--primary); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-kicker::before { content: ''; width: 18px; height: 2px; background: var(--accent); }
.page-head h1 { margin: 0; font: 700 25px/1.25 Manrope, sans-serif; letter-spacing: -.035em; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.page-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; justify-content: space-between; min-height: 57px; padding: 14px 17px; border-bottom: 1px solid var(--line-soft); }
.card-title { display: flex; align-items: center; gap: 9px; }
.card-title > span:first-child:not(.status-dot) { display: grid; place-items: center; width: 30px; height: 30px; color: var(--primary); border-radius: 8px; background: var(--primary-soft); }
.card-title h2, .card-title h3 { margin: 0; color: #243246; font: 700 13px Manrope, sans-serif; letter-spacing: -.02em; }
.card-title p { margin: 3px 0 0; color: var(--muted-2); font-size: 9px; }
.card-body { padding: 17px; }
.link-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px; color: var(--primary); border: 0; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.link-button svg { width: 13px; }
.muted { color: var(--muted); }
.small { font-size: 10px; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

/* Dashboard */
.welcome-strip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; margin-bottom: 17px; padding: 19px 21px; color: #fff; border-radius: var(--radius); background: linear-gradient(105deg, #0a2a43, #0b3d52 62%, #0e5b5d); box-shadow: 0 10px 24px rgba(8,34,57,.10); }
.welcome-strip::after { content: ''; position: absolute; width: 230px; height: 230px; right: 8%; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 50%; box-shadow: 0 0 0 44px rgba(var(--accent-rgb),.025), 0 0 0 88px rgba(var(--accent-rgb),.015); }
.welcome-copy { position: relative; z-index: 1; }
.welcome-copy small { color: #82a7b4; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.welcome-copy h2 { margin: 5px 0 4px; font: 700 17px Manrope, sans-serif; }
.welcome-copy p { margin: 0; color: #9eb5c2; font-size: 10px; }
.welcome-meta { position: relative; z-index: 1; display: flex; gap: 24px; }
.welcome-meta div { padding-left: 15px; border-left: 1px solid rgba(255,255,255,.12); }
.welcome-meta strong, .welcome-meta small { display: block; }
.welcome-meta strong { font: 700 17px Manrope, sans-serif; }
.welcome-meta small { margin-top: 3px; color: #83a0b0; font-size: 8px; text-transform: uppercase; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 13px; }
.kpi-card { position: relative; overflow: hidden; min-height: 134px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.kpi-card::after { content: ''; position: absolute; top: 0; right: 0; width: 75px; height: 75px; border-radius: 0 0 0 75px; background: var(--kpi-soft, #eef5ff); opacity: .65; }
.kpi-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--kpi-color, var(--blue)); border-radius: 9px; background: var(--kpi-soft, #eef5ff); }
.kpi-trend { display: flex; align-items: center; gap: 3px; padding: 3px 6px; color: var(--green); border-radius: 8px; background: #eaf8f1; font-size: 8px; font-weight: 700; }
.kpi-trend.warn { color: var(--orange); background: #fff3e7; }
.kpi-label { display: block; margin-top: 13px; color: var(--muted); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .045em; }
.kpi-value { display: block; margin-top: 3px; color: #152338; font: 700 24px Manrope, sans-serif; letter-spacing: -.04em; }
.kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted-2); font-size: 8px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); gap: 13px; margin-bottom: 13px; }
.dashboard-grid.equal { grid-template-columns: 1fr 1fr; }
.chart-wrap { position: relative; height: 235px; padding: 10px 7px 0; }
.chart-wrap canvas { width: 100%; height: 100%; }
.chart-legend { display: flex; gap: 15px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 2px; }
.status-list { display: grid; gap: 11px; }
.status-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; }
.status-row-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.status-row-top span:nth-child(2) { overflow: hidden; color: #3b495a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--slate)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--slate)) 12%, transparent); }
.status-count { color: #334155; font-size: 10px; font-weight: 700; }
.progress { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background: #eef2f5; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--tone, var(--primary)); }
.operational-alert { display: flex; gap: 10px; margin-top: 15px; padding: 11px; border: 1px solid #ffe0b5; border-radius: 9px; background: #fff9ef; }
.operational-alert > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; color: var(--orange); border-radius: 8px; background: #ffedcf; }
.operational-alert strong, .operational-alert small { display: block; }
.operational-alert strong { font-size: 9px; }
.operational-alert small { margin-top: 2px; color: #977048; font-size: 8px; line-height: 1.4; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { padding: 9px 10px; color: #8b98a7; border-bottom: 1px solid var(--line-soft); background: #fafbfd; font-size: 8px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.mini-table td { padding: 10px; color: #415064; border-bottom: 1px solid var(--line-soft); font-size: 9px; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table tbody tr { cursor: pointer; transition: .12s; }
.mini-table tbody tr:hover { background: #fafcfd; }
.entity-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.entity-cell > div:last-child { min-width: 0; }
.entity-cell strong, .entity-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-cell strong { color: #2a394d; font-size: 9px; }
.entity-cell small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.mini-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; color: var(--primary); border-radius: 8px; background: var(--primary-soft); font-size: 8px; font-weight: 700; }
.performance-value { color: var(--green); font-weight: 700; }
.timeline-list { display: grid; }
.activity-item { position: relative; display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; min-height: 55px; }
.activity-item:not(:last-child)::before { content: ''; position: absolute; top: 25px; bottom: 0; left: 12px; width: 1px; background: var(--line); }
.activity-icon { z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; color: var(--tone, var(--primary)); border: 1px solid #fff; border-radius: 8px; background: color-mix(in srgb, var(--tone, var(--primary)) 12%, white); }
.activity-icon svg { width: 12px; }
.activity-content strong { display: block; color: #344357; font-size: 9px; }
.activity-content p { margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.activity-time { color: #9aa6b2; font-size: 8px; white-space: nowrap; }

/* Badges and states */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 3px 8px; color: var(--badge-color, var(--slate)); border: 1px solid color-mix(in srgb, var(--badge-color, var(--slate)) 15%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--badge-color, var(--slate)) 9%, white); font-size: 8px; font-weight: 700; white-space: nowrap; }
.badge .status-dot { width: 5px; height: 5px; flex-basis: 5px; box-shadow: none; background: currentColor; }
.tone-blue { --badge-color: var(--blue); --tone: var(--blue); }
.tone-purple { --badge-color: var(--purple); --tone: var(--purple); }
.tone-orange { --badge-color: var(--orange); --tone: var(--orange); }
.tone-cyan { --badge-color: var(--cyan); --tone: var(--cyan); }
.tone-amber { --badge-color: var(--amber); --tone: var(--amber); }
.tone-green { --badge-color: var(--green); --tone: var(--green); }
.tone-red { --badge-color: var(--red); --tone: var(--red); }
.tone-slate { --badge-color: var(--slate); --tone: var(--slate); }
.priority { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 700; }
.priority i { width: 5px; height: 5px; border-radius: 50%; background: #a4afba; }
.priority.HIGH { color: var(--orange); }
.priority.HIGH i { background: var(--orange); }
.priority.URGENT { color: var(--red); }
.priority.URGENT i { background: var(--red); box-shadow: 0 0 0 3px #fde9ec; }

/* Toolbar, tables and operational board */
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 13px; }
.stat-compact { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.stat-compact > span { display: grid; place-items: center; flex: 0 0 31px; height: 31px; color: var(--tone, var(--primary)); border-radius: 8px; background: color-mix(in srgb, var(--tone, var(--primary)) 10%, white); }
.stat-compact strong, .stat-compact small { display: block; }
.stat-compact strong { font: 700 16px Manrope, sans-serif; }
.stat-compact small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 13px; border-bottom: 1px solid var(--line-soft); }
.search-control { position: relative; display: flex; align-items: center; min-width: 230px; flex: 1; max-width: 390px; }
.search-control svg { position: absolute; left: 11px; width: 15px; color: var(--muted-2); }
.control { width: 100%; height: 36px; padding: 0 11px; color: #334155; outline: none; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 10px; transition: .15s; }
.search-control .control { padding-left: 34px; }
.control:focus, textarea.control:focus { border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.09); }
select.control { min-width: 150px; padding-right: 30px; cursor: pointer; }
.toolbar-spacer { flex: 1; }
.view-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #f0f3f6; }
.view-toggle button { display: grid; place-items: center; width: 29px; height: 28px; padding: 0; color: var(--muted); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.view-toggle button.active { color: var(--primary); background: #fff; box-shadow: 0 1px 4px rgba(20,40,60,.09); }
.view-toggle svg { width: 14px; }
.table-wrap { overflow: auto; }
.data-table { width: 100%; min-width: 1010px; border-collapse: collapse; }
.data-table th { height: 38px; padding: 0 12px; color: #8492a2; border-bottom: 1px solid var(--line); background: #f8fafb; font-size: 8px; font-weight: 700; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { height: 54px; padding: 7px 12px; color: #435266; border-bottom: 1px solid var(--line-soft); font-size: 9px; vertical-align: middle; }
.data-table tbody tr { transition: background .12s; cursor: pointer; }
.data-table tbody tr:hover { background: #f9fbfc; }
.data-table tbody tr.issue-row { background: #fffafb; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.primary-cell strong, .primary-cell small { display: block; }
.primary-cell strong { color: #1e344e; font-size: 9px; font-weight: 700; }
.primary-cell small { margin-top: 3px; color: #8b98a7; font-size: 8px; }
.amount-cell strong { display: block; color: #263a51; font-size: 9px; }
.amount-cell small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.date-cell strong, .date-cell small { display: block; }
.date-cell strong { font-size: 9px; }
.date-cell small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.date-cell.overdue strong, .date-cell.overdue small { color: var(--red); }
.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.row-actions .icon-btn { width: 29px; height: 29px; border-radius: 7px; }
.row-actions svg { width: 13px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 8px 13px; color: var(--muted); border-top: 1px solid var(--line-soft); font-size: 9px; }
.board-wrap { overflow-x: auto; padding: 13px; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(245px, 1fr)); gap: 10px; min-width: 1240px; }
.kanban-column { min-height: 380px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: #f8fafb; }
.kanban-head { display: flex; align-items: center; gap: 7px; padding: 3px 3px 11px; }
.kanban-head strong { flex: 1; color: #3b4c60; font-size: 9px; }
.kanban-head em { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: var(--muted); border-radius: 10px; background: #e9eef2; font-size: 8px; font-style: normal; }
.kanban-cards { display: grid; gap: 7px; }
.order-card { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 2px 5px rgba(22,40,60,.03); cursor: pointer; transition: .15s; }
.order-card:hover { transform: translateY(-1px); border-color: #cbd7e0; box-shadow: 0 5px 12px rgba(22,40,60,.07); }
.order-card-top { display: flex; align-items: center; justify-content: space-between; }
.order-card-top strong { color: #263b53; font-size: 9px; }
.order-card h4 { overflow: hidden; margin: 9px 0 3px; color: #344357; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.order-card > small { color: var(--muted-2); font-size: 8px; }
.order-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.order-card-meta span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; }
.order-card-meta svg { width: 11px; }

/* Entity grids */
.entity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.entity-card { position: relative; overflow: hidden; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: .16s; }
.entity-card:hover { transform: translateY(-2px); border-color: #ccd7df; box-shadow: var(--shadow-md); }
.entity-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 90px; height: 90px; border-radius: 50%; background: var(--entity-soft, var(--primary-soft)); opacity: .7; }
.entity-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.entity-card-head > div:nth-child(2) { min-width: 0; flex: 1; }
.entity-card-head h3 { overflow: hidden; margin: 0; color: #27394f; font: 700 11px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-head p { margin: 3px 0 0; color: var(--muted-2); font-size: 8px; }
.entity-card-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; padding: 12px 0; border-block: 1px solid var(--line-soft); }
.entity-card-detail small, .entity-card-detail strong { display: block; }
.entity-card-detail small { color: var(--muted-2); font-size: 8px; }
.entity-card-detail strong { margin-top: 4px; color: #3b4a5c; font-size: 10px; }
.entity-progress { margin-bottom: 12px; }
.entity-progress-head { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.entity-progress-head strong { color: var(--primary); }
.entity-card-foot { display: flex; align-items: center; justify-content: space-between; }
.contact-inline { display: flex; gap: 7px; color: var(--muted); font-size: 8px; }
.contact-inline span { display: flex; align-items: center; gap: 3px; }
.contact-inline svg { width: 11px; }
.sppg-order-monitor { margin-bottom: 13px; overflow: hidden; }
.sppg-order-monitor .toolbar { border-top: 1px solid var(--line-soft); }
.sppg-order-table { min-width: 980px; }
.sppg-order-table .btn { white-space: nowrap; }
.sppg-history-drawer { width: min(760px, calc(100vw - 30px)); }
.sppg-history-drawer .operational-alert { margin-top: 14px; }
.sppg-history-list { display: grid; gap: 9px; }
.sppg-history-item { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.sppg-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); background: #f9fbfc; }
.sppg-history-head > div:first-child { min-width: 0; }
.sppg-history-head > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.sppg-history-head strong,.sppg-history-head small { display: block; }
.sppg-history-head strong { color: #293d53; font-size: 10px; }
.sppg-history-head small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.sppg-history-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 12px; }
.sppg-history-grid small,.sppg-history-grid strong { display: block; }
.sppg-history-grid small { color: var(--muted-2); font-size: 7px; }
.sppg-history-grid strong { overflow: hidden; margin-top: 4px; color: #35465a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sppg-history-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; color: var(--muted); border-top: 1px solid var(--line-soft); background: #fcfdfd; font-size: 8px; }

/* Agent portal */
.agent-portal .nav-item.active { background: linear-gradient(90deg, rgba(47,111,237,.24), rgba(var(--primary-rgb),.08)); }
.agent-portal .company-icon { color: #6fb0ff; background: rgba(47,111,237,.12); }
.agent-welcome { background: linear-gradient(105deg, var(--navy-900), var(--navy-800) 58%, var(--primary)); }
.assignment-focus { overflow: hidden; border-color: #f0d49b; }
.assignment-focus > .card-head { background: linear-gradient(90deg, #fffbf3, #fff); }
.assignment-focus .card-title > span:first-child { color: var(--orange); background: #fff0d8; }
.assignment-list { display: grid; }
.assignment-card { display: flex; align-items: center; gap: 18px; padding: 14px 17px; border-bottom: 1px solid var(--line-soft); }
.assignment-card:last-child { border-bottom: 0; }
.assignment-main { display: grid; grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(90px, .55fr)); align-items: center; gap: 14px; min-width: 0; flex: 1; }
.assignment-main > div:not(.entity-cell) small, .assignment-main > div:not(.entity-cell) strong { display: block; }
.assignment-main > div:not(.entity-cell) small { color: var(--muted-2); font-size: 8px; }
.assignment-main > div:not(.entity-cell) strong { margin-top: 4px; color: #324359; font-size: 9px; }
.assignment-actions { display: flex; gap: 6px; flex: none; }
.accept-summary { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 11px; color: #47657b; border: 1px solid #cfe4ef; border-radius: 8px; background: #f2f9fc; }
.accept-summary svg { flex: none; color: var(--cyan); }
.accept-summary p { margin: 0; font-size: 9px; line-height: 1.5; }
.confirmation-visual { display: grid; justify-items: center; margin-bottom: 18px; padding: 20px; text-align: center; border: 1px solid var(--line-soft); border-radius: 10px; background: #f9fbfc; }
.confirmation-visual > span { display: grid; place-items: center; width: 48px; height: 48px; color: var(--primary); border-radius: 14px; background: var(--primary-soft); }
.confirmation-visual > span svg { width: 23px; height: 23px; }
.confirmation-visual h3 { margin: 12px 0 5px; font: 700 13px Manrope, sans-serif; }
.confirmation-visual p { max-width: 360px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.profile-layout { display: grid; grid-template-columns: minmax(270px, .7fr) minmax(440px, 1.3fr); gap: 13px; }
.agent-profile-summary { align-self: start; overflow: hidden; }
.profile-cover { height: 88px; background: radial-gradient(circle at 75% 35%, rgba(var(--accent-rgb),.22), transparent 28%), linear-gradient(120deg, var(--navy-900), var(--primary)); }
.profile-identity { position: relative; padding: 0 18px 17px; text-align: center; }
.profile-identity .avatar { margin: -24px auto 10px; border: 4px solid #fff; }
.profile-identity h2 { margin: 0; font: 700 14px Manrope, sans-serif; }
.profile-identity p { margin: 4px 0 10px; color: var(--muted); font-size: 9px; }
.profile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line-soft); background: #fafcfd; }
.profile-metrics div { padding: 13px 8px; text-align: center; border-right: 1px solid var(--line-soft); }
.profile-metrics div:last-child { border-right: 0; }
.profile-metrics small, .profile-metrics strong { display: block; }
.profile-metrics small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; }
.profile-metrics strong { margin-top: 5px; color: #304258; font-size: 10px; }
.profile-note { margin: 14px; }
.sppg-portal .nav-item.active { background: linear-gradient(90deg, rgba(118,84,214,.22), rgba(47,111,237,.07)); }
.sppg-portal .nav-item.active > svg { color: #a78bfa; }
.sppg-portal .company-icon { color: #a78bfa; background: rgba(118,84,214,.13); }
.sppg-welcome { background: linear-gradient(105deg, #102640, #273f68 58%, #49528a); }
.gr-focus { overflow: hidden; border-color: #e8d7a9; }
.gr-focus > .card-head { background: linear-gradient(90deg, #fffaf0, #fff); }
.gr-focus .card-title > span:first-child { color: var(--amber); background: #fff2d5; }
.sppg-cover { background: radial-gradient(circle at 75% 35%, rgba(167,139,250,.25), transparent 28%), linear-gradient(120deg, #112641, #475284); }

/* Shipment tracking */
.shipment-layout { display: grid; gap: 10px; }
.shipment-card { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px 50px; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.shipment-id strong, .shipment-id small { display: block; }
.shipment-id strong { color: #24384f; font-size: 10px; }
.shipment-id small { margin-top: 4px; color: var(--muted-2); font-size: 8px; }
.route-visual { display: grid; grid-template-columns: minmax(70px, auto) 1fr minmax(70px, auto); align-items: center; gap: 8px; }
.route-point strong, .route-point small { display: block; }
.route-point strong { overflow: hidden; max-width: 120px; color: #3c4c60; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.route-point small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.route-line { position: relative; height: 2px; background: #dce4ea; }
.route-line::before, .route-line::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px var(--primary); transform: translateY(-50%); }
.route-line::before { left: 0; }
.route-line::after { right: 0; background: var(--line); box-shadow: 0 0 0 1px #b9c5cf; }
.route-line i { position: absolute; left: 2px; top: 0; width: var(--route-progress, 0%); height: 100%; background: var(--primary); }
.route-line.complete::after { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.shipment-driver { display: flex; align-items: center; gap: 8px; }
.shipment-driver strong, .shipment-driver small { display: block; }
.shipment-driver strong { font-size: 9px; }
.shipment-driver small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }

/* Finance / reports / documents */
.summary-banner { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 13px; overflow: hidden; color: #fff; border-radius: var(--radius); background: linear-gradient(115deg, #09213a, #0d4654); }
.summary-banner > div { padding: 18px; border-right: 1px solid rgba(255,255,255,.09); }
.summary-banner > div:last-child { border-right: 0; }
.summary-banner small, .summary-banner strong { display: block; }
.summary-banner small { color: #8ba7b6; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.summary-banner strong { margin-top: 7px; font: 700 19px Manrope, sans-serif; }
.summary-banner em { display: block; margin-top: 5px; color: #73cfbd; font-size: 8px; font-style: normal; }
.document-type { display: flex; align-items: center; gap: 9px; }
.doc-icon { display: grid; place-items: center; flex: 0 0 31px; height: 34px; color: var(--tone, var(--blue)); border-radius: 7px; background: color-mix(in srgb, var(--tone, var(--blue)) 10%, white); }
.doc-icon svg { width: 14px; }
.document-type strong, .document-type small { display: block; }
.document-type strong { font-size: 9px; }
.document-type small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 13px; }
.payment-donut-wrap { display: flex; align-items: center; justify-content: center; gap: 25px; min-height: 230px; }
.donut { position: relative; width: 145px; height: 145px; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--paid), var(--amber) var(--paid) var(--invoiced), var(--red) var(--invoiced) var(--overdue), #dbe4eb var(--overdue) 100%); }
.donut::after { content: ''; position: absolute; inset: 25px; border-radius: 50%; background: #fff; }
.donut-center { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center strong { font: 700 17px Manrope, sans-serif; }
.donut-center small { color: var(--muted); font-size: 8px; }
.donut-legend { display: grid; gap: 10px; }
.donut-legend div { display: grid; grid-template-columns: 8px minmax(80px, 1fr) auto; gap: 7px; align-items: center; color: var(--muted); font-size: 8px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; }
.donut-legend strong { color: #344357; font-size: 9px; }

/* Full management reports */
.report-page { display:block; }
.report-filter-card { margin-bottom:13px; }
.report-filter-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-soft); background:linear-gradient(90deg,#f7fafc,#fff); }
.report-filter-head > div { display:flex; align-items:center; gap:10px; }
.report-filter-head > div > span { display:grid; width:32px; height:32px; color:var(--primary); border-radius:8px; background:var(--primary-soft); place-items:center; }
.report-filter-head svg { width:15px; }
.report-filter-head strong,.report-filter-head small { display:block; }
.report-filter-head strong { color:#2f4055; font-size:10px; }
.report-filter-head small { margin-top:2px; color:var(--muted-2); font-size:8px; }
.report-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:11px; align-items:end; padding:14px 16px 16px; }
.report-filter-submit { min-width:145px; }
.report-period-note { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 12px; color:#536579; border:1px solid #dbe7ef; border-radius:9px; background:#f7fbfd; font-size:9px; }
.report-period-note svg { width:14px; color:var(--primary); }
.report-period-note strong { color:#304258; }
.report-period-note small { margin-left:auto; color:var(--muted-2); }
.report-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.report-kpi { --report-tone:var(--blue); display:flex; align-items:center; gap:12px; min-height:100px; padding:15px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.report-kpi.tone-green { --report-tone:var(--green); }.report-kpi.tone-red { --report-tone:var(--red); }.report-kpi.tone-purple { --report-tone:var(--purple); }.report-kpi.tone-cyan { --report-tone:var(--cyan); }.report-kpi.tone-orange { --report-tone:var(--orange); }
.report-kpi > span { display:grid; flex:0 0 42px; width:42px; height:44px; color:var(--report-tone); border-radius:11px; background:color-mix(in srgb,var(--report-tone) 11%,white); place-items:center; }
.report-kpi > span svg { width:19px; }
.report-kpi div { min-width:0; }
.report-kpi small,.report-kpi strong,.report-kpi em { display:block; }
.report-kpi small { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.report-kpi strong { overflow:hidden; margin-top:5px; color:#27394e; font:750 18px Manrope,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.report-kpi em { margin-top:4px; color:var(--report-tone); font-size:8px; font-style:normal; }
.report-score-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:13px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.report-score-strip div { min-width:0; padding:12px 13px; border-right:1px solid var(--line-soft); }
.report-score-strip div:last-child { border-right:0; }
.report-score-strip small,.report-score-strip strong { display:block; }
.report-score-strip small { overflow:hidden; color:var(--muted-2); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.report-score-strip strong { overflow:hidden; margin-top:5px; color:#304258; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.report-main-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.65fr); gap:13px; margin-bottom:13px; }
.report-secondary-grid { grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); }
.report-chart-legend { display:flex; justify-content:flex-end; gap:13px; margin-bottom:8px; color:var(--muted); font-size:7px; }
.report-chart-legend span { display:flex; align-items:center; gap:5px; }
.report-chart-legend i { width:8px; height:8px; border-radius:2px; background:var(--primary); }
.report-chart-legend i.paid { background:var(--green); }.report-chart-legend i.margin { background:var(--purple); }
.report-chart-scroll { overflow-x:auto; padding-bottom:4px; }
.report-trend-chart { display:grid; grid-template-columns:repeat(var(--points),minmax(52px,1fr)); width:max(100%,calc(var(--points) * 62px)); min-height:245px; }
.report-trend-point { display:grid; grid-template-rows:200px auto auto; align-items:end; min-width:0; text-align:center; }
.report-bars { display:flex; align-items:flex-end; justify-content:center; gap:3px; height:192px; margin:0 3px; padding-top:8px; border-bottom:1px solid #d9e2e9; }
.report-bars i { display:block; width:8px; min-height:0; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--primary-2),var(--primary)); }
.report-bars i.paid { width:6px; background:var(--green); }.report-bars i.margin { width:5px; background:var(--purple); }
.report-trend-point > strong { margin-top:7px; color:#59687a; font-size:7px; font-weight:600; }
.report-trend-point > small { margin-top:2px; color:#95a0ac; font-size:6px; }
.report-payment { min-height:275px; }
.report-status-list { display:grid; gap:11px; }
.report-status-list > div { display:grid; grid-template-columns:minmax(145px,1fr) auto; gap:4px 10px; align-items:center; }
.report-status-list > div > strong { color:#304258; font-size:9px; }
.report-status-list > div > small { grid-column:1/-1; color:var(--muted-2); font-size:7px; }
.report-status-list > div > i { grid-column:1/-1; height:4px; overflow:hidden; border-radius:5px; background:#edf1f4; }
.report-status-list > div > i b { display:block; height:100%; border-radius:inherit; background:var(--primary); }
.report-section-card { margin-bottom:13px; }
.report-anchor-section { scroll-margin-top:78px; }
.report-navigation { display:flex; gap:7px; margin:-2px 0 10px; padding:8px; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-sm); scrollbar-width:thin; }
.report-navigation button { display:flex; flex:0 0 auto; align-items:center; gap:6px; padding:8px 10px; color:#476076; border:1px solid #dbe5ec; border-radius:8px; background:#f8fbfd; font:650 8px Manrope,sans-serif; cursor:pointer; }
.report-navigation button:hover { color:var(--primary); border-color:#b9d9ea; background:var(--primary-soft); }
.report-navigation svg { width:13px; }
.report-action-center { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:10px; }
.report-action-card { --action-tone:var(--primary); display:flex; align-items:center; gap:10px; min-width:0; padding:12px; text-align:left; border:1px solid color-mix(in srgb,var(--action-tone) 22%,#dce5eb); border-radius:11px; background:linear-gradient(135deg,color-mix(in srgb,var(--action-tone) 7%,white),#fff); box-shadow:var(--shadow-sm); cursor:pointer; }
.report-action-card.tone-red { --action-tone:var(--red); }.report-action-card.tone-orange { --action-tone:var(--orange); }.report-action-card.tone-purple { --action-tone:var(--purple); }.report-action-card.tone-cyan { --action-tone:var(--cyan); }
.report-action-card > span { display:grid; flex:0 0 34px; width:34px; height:34px; color:var(--action-tone); border-radius:9px; background:color-mix(in srgb,var(--action-tone) 11%,white); place-items:center; }
.report-action-card svg { width:16px; }
.report-action-card div { min-width:0; }
.report-action-card small,.report-action-card strong,.report-action-card em { display:block; }
.report-action-card small { color:#728397; font-size:7px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.report-action-card strong { margin-top:3px; color:#2d4055; font:750 14px Manrope,sans-serif; }
.report-action-card em { overflow:hidden; margin-top:2px; color:var(--action-tone); font-size:7px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.report-section-note { display:flex; align-items:flex-start; gap:8px; margin:0 13px 12px; padding:9px 11px; color:#526b7e; border:1px solid #cce3ef; border-radius:8px; background:#f3faff; font-size:8px; line-height:1.5; }
.report-section-note svg { flex:0 0 14px; width:14px; color:var(--primary); }
.report-section-note p { margin:0; }
.report-sppg-table { min-width:1780px; }
.report-inactive-table { min-width:1760px; }
.report-active-table { min-width:2050px; }
.report-receivable-table { min-width:1450px; }
.report-readiness { min-width:76px; }
.report-readiness strong { color:#304258; font-size:9px; }
.report-readiness i { display:block; width:76px; height:4px; margin-top:5px; overflow:hidden; border-radius:5px; background:#e5ecf1; }
.report-readiness b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--green)); }
.report-aging-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:13px; border-bottom:1px solid var(--line-soft); background:#f8fafc; }
.report-aging-grid article { --aging-tone:var(--slate); min-width:0; padding:11px; border:1px solid color-mix(in srgb,var(--aging-tone) 20%,#dbe4eb); border-radius:9px; background:#fff; }
.report-aging-grid article.tone-green { --aging-tone:var(--green); }.report-aging-grid article.tone-amber { --aging-tone:var(--amber); }.report-aging-grid article.tone-orange { --aging-tone:var(--orange); }.report-aging-grid article.tone-red { --aging-tone:var(--red); }
.report-aging-grid small,.report-aging-grid strong,.report-aging-grid em { display:block; }
.report-aging-grid small { overflow:hidden; color:#738296; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.report-aging-grid strong { overflow:hidden; margin-top:5px; color:#304258; font:750 12px Manrope,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.report-aging-grid em { margin-top:3px; color:var(--aging-tone); font-size:7px; font-style:normal; }
.report-wide-table { min-width:1120px; }
.report-table { min-width:830px; }
.report-transaction-table { min-width:1720px; }
.report-rank { display:grid; width:23px; height:23px; color:#436078; border-radius:7px; background:#edf4f8; font-size:8px; font-weight:700; place-items:center; }
.card-meta { color:var(--muted-2); font-size:8px; }
.report-disclaimer { padding:5px 8px; color:#8a6412; border:1px solid #f1dc9d; border-radius:6px; background:#fff9e8; font-size:7px; }
.btn-report-excel { color:#fff; border-color:#137a4f; background:linear-gradient(135deg,#159763,#0f7148); box-shadow:0 7px 16px rgba(21,151,99,.18); }
.btn-report-excel:hover { color:#fff; border-color:#0f7148; background:linear-gradient(135deg,#128658,#0b603d); }
.btn-report-pdf { color:#a92e40; border:1px solid #efc7cd; background:#fff4f5; }
.btn-report-pdf:hover { color:#8f2031; border-color:#e7aab4; background:#ffecee; }
.report-detail-head { gap:15px; }
.report-transaction-search { min-width:260px; max-width:340px; }
.table-subtext { display:block; margin-top:3px; color:var(--muted-2); font-size:7px; white-space:nowrap; }
.text-danger { color:var(--red)!important; }
.data-table td > .empty-state { min-height:125px; }

@media (max-width:1200px) {
    .report-filter-grid { grid-template-columns:repeat(3,minmax(145px,1fr)); }
    .report-action-center { grid-template-columns:1fr 1fr; }
    .report-score-strip { grid-template-columns:repeat(3,1fr); }
    .report-score-strip div:nth-child(3) { border-right:0; }
    .report-score-strip div:nth-child(-n+3) { border-bottom:1px solid var(--line-soft); }
}

@media (max-width:960px) {
    .report-main-grid,.report-secondary-grid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
    .report-filter-grid { grid-template-columns:1fr 1fr; }
    .report-filter-submit { width:100%; min-width:0; }
    .report-period-note { align-items:flex-start; flex-wrap:wrap; }
    .report-period-note small { width:100%; margin-left:22px; }
    .report-kpi-grid { grid-template-columns:1fr 1fr; }
    .report-kpi { min-height:92px; padding:12px; }
    .report-score-strip { grid-template-columns:1fr 1fr; }
    .report-score-strip div,.report-score-strip div:nth-child(3) { border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
    .report-score-strip div:nth-child(even) { border-right:0; }
    .report-score-strip div:nth-last-child(-n+2) { border-bottom:0; }
    .report-detail-head { align-items:flex-start; flex-direction:column; }
    .report-transaction-search { width:100%; min-width:100%; max-width:none; }
    .report-disclaimer { display:none; }
    .report-aging-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:470px) {
    .report-filter-grid,.report-kpi-grid { grid-template-columns:1fr; }
    .report-action-center,.report-aging-grid { grid-template-columns:1fr; }
    .report-filter-head { align-items:flex-start; }
    .report-filter-head .link-button { white-space:nowrap; }
    .report-kpi strong { font-size:17px; }
}

@media print {
    @page { size:A4 landscape; margin:8mm; }
    .sidebar,.topbar,.sidebar-overlay,.report-filter-card,.report-navigation,.report-page .page-actions,.report-transaction-search,.report-page .row-actions,.report-transaction-table .icon-btn { display:none!important; }
    .app-main { margin:0!important; }
    .page-container { padding:0!important; }
    .report-page .page-head { margin-bottom:5mm; }
    .report-page .card,.report-kpi,.report-score-strip { box-shadow:none!important; }
    .report-page .table-wrap { overflow:visible; }
    .report-page .data-table { width:100%; min-width:0; font-size:6px; }
    .report-page .data-table th,.report-page .data-table td { padding:4px; }
    .report-kpi-grid { grid-template-columns:repeat(3,1fr); }
    .report-kpi { min-height:25mm; }
    .report-main-grid,.report-secondary-grid { grid-template-columns:1.65fr .75fr; break-inside:avoid; }
    .report-section-card { break-before:auto; }
    .report-transaction-table { font-size:5.5px!important; }
}

/* Modal, drawer, popovers */
.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; background: rgba(5,17,30,.52); backdrop-filter: blur(2px); }
.modal-backdrop { z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal { width: min(610px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 15px; background: #fff; box-shadow: var(--shadow-lg); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font: 700 15px Manrope, sans-serif; }
.modal-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.modal-head .icon-btn { width: 31px; height: 31px; }
.modal-body { padding: 19px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 19px; border-top: 1px solid var(--line); background: #fafbfd; }
.document-preview-modal { display: grid; grid-template-rows: auto minmax(0,1fr); width: min(1180px, 100%); height: min(90vh, 860px); overflow: hidden; }
.document-preview-modal .modal-head { gap: 16px; }
.document-preview-actions { display: flex; align-items: center; gap: 7px; }
.document-preview-frame { display: block; width: 100%; min-height: 0; height: 100%; border: 0; background: #e9edf2; }
.signature-capture-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.signature-capture-meta > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; }
.signature-capture-meta small, .signature-capture-meta strong { display: block; }
.signature-capture-meta small { margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.signature-capture-meta strong { color: var(--navy); font-size: 11px; }
.signature-existing { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #b9dfd2; border-radius: 10px; background: #f1fbf7; }
.signature-existing img { width: 120px; height: 50px; object-fit: contain; border-bottom: 1px solid #9fb4aa; }
.signature-existing strong, .signature-existing small { display: block; }
.signature-existing small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.signature-pad-shell { position: relative; overflow: hidden; border: 1px dashed #7f9ab3; border-radius: 12px; background: linear-gradient(#fff,#fbfdff); }
.signature-pad-shell::after { position: absolute; right: 24px; bottom: 42px; left: 24px; height: 1px; background: #bdc9d4; content: ''; pointer-events: none; }
.signature-pad { position: relative; z-index: 1; display: block; width: 100%; height: 210px; cursor: crosshair; touch-action: none; }
.signature-pad-hint { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; color: var(--muted); border-top: 1px solid var(--line); background: #f8fafc; font-size: 9px; }
.signature-pad-hint button { padding: 0; color: var(--blue); border: 0; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.signature-consent { margin-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.driver-notification-state { display:flex; align-items:center; gap:9px; margin:11px 0; padding:9px 11px; border:1px solid #b9e5d1; border-radius:9px; background:#f0fbf6; color:#147a51; }
.driver-notification-state.warning { border-color:#f2d7aa; background:#fff8ed; color:#a45d12; }
.driver-notification-state > span { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border-radius:8px; background:#fff; }
.driver-notification-state svg { width:14px; height:14px; }
.driver-notification-state strong,.driver-notification-state small { display:block; }
.driver-notification-state strong { font-size:9px; }
.driver-notification-state small { margin-top:2px; color:var(--muted); font-size:8px; }
.clickable-document-row { cursor: pointer; }
.clickable-document-row:hover td { background: #f5f9fc; }
.clickable-document-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-group { display: grid; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { color: #405064; font-size: 9px; font-weight: 700; }
.form-group label sup { color: var(--red); }
.form-group textarea.control { height: 74px; padding-top: 9px; resize: vertical; }
.form-hint { color: var(--muted-2); font-size: 8px; }
.datetime-id-control { display:grid; grid-template-columns:minmax(105px,1.35fr) auto minmax(62px,.72fr) auto; align-items:center; gap:7px; }
.datetime-id-control .control { min-width:0; font-variant-numeric:tabular-nums; }
.datetime-id-date { letter-spacing:.02em; }
.datetime-id-time { text-align:center; letter-spacing:.05em; }
.datetime-id-pukul,.datetime-id-zone { color:var(--muted); font-size:8px; font-weight:700; white-space:nowrap; }
.datetime-id-zone { color:var(--primary); }
.date-id-control { position:relative; }
.date-id-control > .control { padding-right:36px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.date-id-control > button { position:absolute; z-index:2; top:1px; right:1px; bottom:1px; display:grid; width:34px; padding:0; color:var(--muted-2); border:0; border-radius:0 7px 7px 0; background:transparent; cursor:pointer; place-items:center; }
.date-id-control > button:hover,.date-id-control > button:focus-visible { color:var(--primary); background:var(--primary-soft); outline:none; }
.date-id-control > button svg { width:14px; height:14px; }
.date-id-control > .native-date-picker { position:absolute; right:2px; bottom:2px; width:1px; height:1px; padding:0; opacity:0; border:0; pointer-events:none; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 10px; top: 50%; color: var(--muted); font-size: 9px; transform: translateY(-50%); }
.input-prefix .control { padding-left: 28px; }
.drawer-backdrop { z-index: 100; display: flex; justify-content: flex-end; }
.drawer { width: min(610px, calc(100vw - 30px)); height: 100%; overflow-y: auto; background: #fff; box-shadow: -18px 0 50px rgba(5,17,30,.18); animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-head { position: sticky; z-index: 3; top: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.drawer-head h2 { margin: 7px 0 3px; font: 700 16px Manrope, sans-serif; }
.drawer-head p { margin: 0; color: var(--muted); font-size: 9px; }
.drawer-body { padding: 18px 20px 85px; }
.detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; }
.detail-summary div { padding: 12px; border-right: 1px solid var(--line); }
.detail-summary div:last-child { border-right: 0; }
.detail-summary small, .detail-summary strong { display: block; }
.detail-summary small { color: var(--muted-2); font-size: 8px; }
.detail-summary strong { margin-top: 5px; color: #304258; font-size: 10px; }
.detail-section { margin-top: 18px; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.detail-section-head h3 { margin: 0; color: #304258; font: 700 11px Manrope, sans-serif; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-box { padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fafcfd; }
.detail-box small, .detail-box strong { display: block; }
.detail-box small { color: var(--muted-2); font-size: 8px; }
.detail-box strong { overflow: hidden; margin-top: 4px; color: #35465a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow { display: flex; align-items: flex-start; margin: 14px 0 19px; }
.workflow-step { position: relative; flex: 1; text-align: center; }
.workflow-step:not(:last-child)::before { content: ''; position: absolute; top: 10px; left: 50%; right: -50%; height: 2px; background: var(--line); }
.workflow-step.done:not(:last-child)::before { background: var(--primary); }
.workflow-step i { position: relative; z-index: 1; display: grid; place-items: center; width: 21px; height: 21px; margin: 0 auto; color: #99a5b0; border: 2px solid #dce3e9; border-radius: 50%; background: #fff; font-size: 8px; font-style: normal; }
.workflow-step.done i { color: #fff; border-color: var(--primary); background: var(--primary); }
.workflow-step.current i { color: var(--primary); border-color: var(--accent); background: #f8ffe9; box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12); }
.workflow-step span { display: block; margin-top: 7px; color: var(--muted-2); font-size: 7px; }
.workflow-step.current span { color: var(--ink); font-weight: 700; }
.document-list { display: grid; gap: 6px; }
.document-item { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 8px; }
.document-item > span { display: grid; place-items: center; width: 29px; height: 31px; color: var(--red); border-radius: 6px; background: #fff0f2; }
.document-item > div { min-width: 0; flex: 1; }
.document-item strong, .document-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-item strong { font-size: 9px; }
.document-item small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.drawer-actions { position: sticky; z-index: 2; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); }
.popover { position: fixed; z-index: 90; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-md); }
.notification-popover { top: 61px; right: 84px; width: min(380px, calc(100vw - 20px)); max-height: 470px; overflow: auto; }
.popover-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.popover-head strong { font-size: 11px; }
.notification-item { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.notification-item.unread { background: #f8fcfb; }
.notification-symbol { display: grid; place-items: center; width: 29px; height: 29px; color: var(--tone, var(--primary)); border-radius: 8px; background: color-mix(in srgb, var(--tone, var(--primary)) 10%, white); }
.notification-symbol svg { width: 13px; }
.notification-item strong { display: block; color: #334155; font-size: 9px; }
.notification-item p { margin: 3px 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.notification-item time { color: #a0aab5; font-size: 7px; }
.profile-popover { top: 61px; right: 24px; width: 230px; padding: 7px; }
.profile-popover-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; padding: 9px; border-bottom: 1px solid var(--line-soft); }
.profile-popover-head strong, .profile-popover-head small { display: block; }
.profile-popover-head strong { font-size: 9px; }
.profile-popover-head small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.profile-popover a { display: flex; align-items: center; gap: 8px; padding: 9px; color: #536174; border-radius: 7px; font-size: 9px; }
.profile-popover a:hover { background: #f5f7f9; }
.profile-popover a svg { width: 14px; }
.profile-popover .danger-link { color: var(--red); }
.toast-stack { position: fixed; z-index: 150; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(340px, calc(100vw - 40px)); }
.toast { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 12px; color: #fff; border-radius: 10px; background: #112c43; box-shadow: var(--shadow-lg); animation: toast-in .2s ease-out; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.toast > span { display: grid; place-items: center; width: 29px; height: 29px; color: var(--accent); border-radius: 8px; background: rgba(255,255,255,.08); }
.toast strong { display: block; font-size: 9px; }
.toast p { margin: 2px 0 0; color: #adc0cf; font-size: 8px; }
.toast button { color: #8da3b5; border: 0; background: transparent; cursor: pointer; }
.empty-state { display: grid; place-items: center; min-height: 250px; padding: 30px; color: var(--muted); text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 50px; height: 50px; color: var(--primary); border-radius: 14px; background: var(--primary-soft); }
.empty-state h3 { margin: 12px 0 4px; color: #344357; font: 700 12px Manrope, sans-serif; }
.empty-state p { margin: 0; font-size: 9px; }
.skeleton { position: relative; overflow: hidden; border-radius: 6px; background: #edf1f4; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Digital Surat Jalan & Delivery Control */
.control-hero { display:grid; grid-template-columns:minmax(240px,1.1fr) minmax(190px,.8fr) 1.4fr; align-items:center; gap:24px; margin-bottom:13px; padding:22px 24px; color:#fff; border-radius:14px; background:linear-gradient(120deg,var(--navy-950),var(--navy-800) 60%,var(--primary)); box-shadow:var(--shadow-md); }
.control-hero span { color:#9fc0d0; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.control-hero > div > strong { display:block; margin:4px 0; font:800 30px Manrope,sans-serif; }
.control-hero p { margin:0; color:#b6cad5; font-size:9px; }
.control-hero-meter { height:9px; overflow:hidden; border-radius:20px; background:rgba(255,255,255,.13); }
.control-hero-meter i { display:block; width:var(--compliance); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--primary-2)); box-shadow:0 0 18px rgba(var(--accent-rgb),.45); }
.control-hero-flags { display:grid; grid-template-columns:repeat(3,1fr); }
.control-hero-flags div { padding:4px 18px; border-left:1px solid rgba(255,255,255,.13); }
.control-hero-flags div strong { font-size:19px; }
.control-hero-flags div small { display:block; color:#a8c0cd; font-size:7px; }
.control-table { min-width:1180px; }
.control-code { display:block; margin-top:6px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:7px; }
.delivery-verification { border:1px solid #bee0db; border-radius:10px; background:#f3fbf9; }

.driver-body,.verification-body { min-height:100vh; color:#12263a; background:#eef3f7; font-family:Inter,Arial,sans-serif; }
.driver-topbar { position:sticky; z-index:10; top:0; display:flex; justify-content:space-between; align-items:center; min-height:68px; padding:10px max(18px,calc((100vw - 760px)/2)); color:#fff; background:var(--navy-950); box-shadow:0 4px 20px rgba(7,27,51,.15); }
.public-brand { display:flex; align-items:center; gap:10px; }
.public-brand .brand-mark { width:38px; height:38px; }
.public-brand strong { display:block; font:800 13px Manrope,sans-serif; }
.public-brand strong b { color:var(--accent); }
.public-brand small { display:block; margin-top:2px; color:#8099ac; font-size:6px; letter-spacing:.12em; text-transform:uppercase; }
.secure-link { padding:6px 9px; color:#8be4c5; border:1px solid rgba(139,228,197,.25); border-radius:20px; background:rgba(29,161,116,.1); font-size:7px; font-weight:700; text-transform:uppercase; }
.driver-shell { display:grid; gap:13px; width:min(760px,100%); margin:0 auto; padding:22px 18px 48px; }
.driver-loading,.driver-error { display:grid; place-items:center; min-height:65vh; color:#607286; text-align:center; }
.driver-loading span { width:32px; height:32px; margin-bottom:12px; border:3px solid #d9e2e9; border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.driver-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; padding:22px; color:#fff; border-radius:16px; background:linear-gradient(125deg,var(--navy-900),var(--navy-800)); box-shadow:var(--shadow-md); }
.public-kicker { display:block; margin-bottom:5px; color:var(--primary); font-size:7px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.driver-hero .public-kicker { color:#8cd9cc; }
.driver-hero h1 { margin:0; font:800 20px Manrope,sans-serif; }
.driver-hero p { margin:6px 0 0; color:#b9ced8; font-size:9px; line-height:1.5; }
.driver-status { flex:0 0 auto; padding:7px 9px; color:#fff; border-radius:20px; background:rgba(255,255,255,.12); font-size:7px; font-weight:700; }
.driver-status.tone-green { background:#159763; }.driver-status.tone-amber { background:#c99012; }.driver-status.tone-cyan { background:#118da0; }.driver-status.tone-red { background:#d9465b; }.driver-status.tone-purple { background:#7654d6; }
.driver-route-card,.driver-action-card,.driver-history,.driver-sj-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
.driver-route-point { display:flex; align-items:flex-start; gap:11px; }
.driver-route-point > span { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; color:#fff; border-radius:50%; background:var(--primary); font:800 9px Manrope,sans-serif; }
.driver-route-point.destination > span { color:#071b33; background:var(--accent); }
.driver-route-point small,.driver-summary-grid small,.verification-grid small { display:block; color:#8190a0; font-size:7px; text-transform:uppercase; letter-spacing:.06em; }
.driver-route-point strong { display:block; margin:3px 0; font-size:10px; }
.driver-route-point p { margin:0; color:#68798b; font-size:8px; }
.driver-route-card > i { display:block; width:2px; height:22px; margin:2px 0 2px 13px; background:linear-gradient(var(--primary),var(--accent)); }
.driver-contact-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft); }
.driver-contact-row a { display:flex; justify-content:center; align-items:center; gap:6px; padding:9px; color:var(--primary); border-radius:8px; background:var(--primary-soft); font-size:8px; font-weight:700; text-decoration:none; }
.driver-contact-row svg,.driver-primary svg,.driver-done svg { width:15px; height:15px; }
.driver-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); }
.driver-summary-grid div { min-width:0; padding:14px; border-right:1px solid var(--line-soft); }
.driver-summary-grid div:last-child { border:0; }
.driver-summary-grid strong { display:block; overflow:hidden; margin-top:5px; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.driver-sj-card { display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; border-color:#b9dcd6; background:linear-gradient(130deg,#fff,#f0faf8); }
.driver-qr img { display:block; width:120px; height:120px; padding:5px; border:1px solid #d6e5e2; border-radius:8px; background:#fff; }
.driver-sj-card h2 { margin:0 0 5px; font:800 16px Manrope,sans-serif; }
.driver-sj-card code,.verification-code { display:inline-block; padding:5px 7px; color:var(--primary); border-radius:5px; background:var(--primary-soft); font-size:8px; font-weight:700; }
.driver-sj-card p { margin:8px 0; color:#66788a; font-size:8px; }
.driver-sj-card a { color:var(--primary); font-size:8px; font-weight:800; text-decoration:none; }
.driver-action-card h2,.driver-history h2 { margin:2px 0 6px; font:800 15px Manrope,sans-serif; }
.driver-action-card > p { margin:0 0 14px; color:#64768a; font-size:9px; line-height:1.55; }
.driver-action-card.ready { border-color:#b6dfcf; background:#f3fbf7; }.driver-action-card.transit { border-color:#b6dce6; background:#f2fafc; }.driver-action-card.arrived { border-color:#d8ceef; background:#f8f5fd; }.driver-action-card.complete { border-color:#b6dfcf; background:#f3fbf7; }
.driver-action-card label { display:block; margin:10px 0; color:#526579; font-size:8px; font-weight:700; }
.driver-action-card input:not([type=checkbox]) { width:100%; height:42px; margin-top:5px; padding:0 12px; color:#173047; border:1px solid #d7e0e7; border-radius:8px; background:#fff; font:600 10px Inter,sans-serif; outline:none; }
.driver-check { display:flex!important; align-items:flex-start; gap:8px; padding:10px; border-radius:8px; background:#f5f8fa; line-height:1.45; }
.driver-check input { margin-top:2px; accent-color:var(--primary); }
.driver-signature-pad { margin:6px 0 10px; border-color:#9bb2c5; }
.driver-signature-pad .signature-pad { height:160px; background:rgba(255,255,255,.72); }
.driver-signature-pad .signature-pad-hint { font-size:8px; }
.driver-primary { display:flex; justify-content:center; align-items:center; gap:7px; width:100%; min-height:44px; margin-top:13px; color:#fff; border:0; border-radius:9px; background:var(--primary); box-shadow:0 8px 20px rgba(var(--primary-rgb),.2); font:800 9px Inter,sans-serif; cursor:pointer; }
.driver-primary:disabled { opacity:.55; cursor:wait; }
.driver-done { display:flex; align-items:center; gap:7px; padding:10px; color:var(--primary); border-radius:8px; background:var(--primary-soft); font-size:9px; font-weight:800; }
.driver-section-head { display:flex; justify-content:space-between; align-items:center; }
.driver-section-head button { display:grid; place-items:center; width:34px; height:34px; color:var(--primary); border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }.driver-section-head svg { width:15px; }
.driver-event-list { margin-top:12px; }
.driver-event { position:relative; display:grid; grid-template-columns:16px 1fr; gap:8px; padding-bottom:14px; }
.driver-event > span { position:relative; z-index:1; width:9px; height:9px; margin-top:3px; border:2px solid #fff; border-radius:50%; background:var(--primary); box-shadow:0 0 0 2px rgba(var(--primary-rgb),.28); }
.driver-event:not(:last-child)::before { content:''; position:absolute; top:11px; bottom:-1px; left:4px; width:1px; background:#dce8e5; }
.driver-event strong { display:block; font-size:9px; }.driver-event p { margin:3px 0; color:#65778a; font-size:8px; }.driver-event small { color:#94a0ac; font-size:7px; }
.driver-toast { position:fixed; z-index:30; right:18px; bottom:18px; left:18px; max-width:500px; margin:auto; padding:12px 14px; color:#fff; border-radius:9px; background:var(--primary); box-shadow:var(--shadow-lg); font-size:9px; font-weight:700; }.driver-toast.danger { background:#ba3448; }
.driver-error span { display:grid; place-items:center; width:52px; height:52px; color:#fff; border-radius:50%; background:#d9465b; font-size:24px; }.driver-error h1 { margin:14px 0 5px; }.driver-error p { max-width:420px; margin:0; }.driver-error button { margin-top:15px; padding:9px 14px; border:0; border-radius:8px; cursor:pointer; }

.verification-shell { width:min(720px,100%); margin:0 auto; padding:30px 18px 50px; }
.verification-shell > .public-brand { margin-bottom:22px; color:var(--navy-900); }
.verification-card { padding:28px; text-align:center; border:1px solid var(--line); border-top:4px solid #159763; border-radius:16px; background:#fff; box-shadow:var(--shadow-md); }
.verification-card.invalid { border-top-color:#d9465b; }
.verification-symbol { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 13px; color:#fff; border-radius:50%; background:#159763; font-size:28px; font-weight:800; }.verification-card.invalid .verification-symbol { background:#d9465b; }
.verification-card h1 { margin:3px 0 7px; font:800 23px Manrope,sans-serif; }.verification-card > p { margin:0 0 13px; color:#64768a; font-size:9px; }
.verification-code { margin-bottom:18px; }
.verification-grid { display:grid; grid-template-columns:repeat(2,1fr); overflow:hidden; margin-top:8px; text-align:left; border:1px solid var(--line); border-radius:10px; }
.verification-grid div { padding:13px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }.verification-grid div:nth-child(even){border-right:0}.verification-grid div:nth-last-child(-n+2){border-bottom:0}.verification-grid strong { display:block; margin-top:4px; font-size:9px; }
.public-footer { padding:18px 0; color:#8a98a7; text-align:center; font-size:7px; }

/* SOP adoption, task inbox & assisted operations */
.task-inbox-card { margin:13px 0; overflow:hidden; }
.task-inbox-list { display:grid; }
.task-inbox-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid var(--line-soft); background:#fff; }
.task-inbox-item.overdue { background:linear-gradient(90deg,rgba(217,70,91,.055),#fff 35%); }
.task-tone { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; }
.task-tone svg { width:16px; height:16px; }
.task-tone.tone-red { color:var(--red); background:#fff0f2; }
.task-tone.tone-amber { color:var(--amber); background:#fff7df; }
.task-tone.tone-green { color:var(--green); background:#eaf8f1; }
.task-copy { min-width:0; }
.task-copy > div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.task-copy strong { font:800 10px Manrope,sans-serif; }
.task-copy p { margin:4px 0; color:var(--muted); font-size:8px; line-height:1.45; }
.task-copy small { color:var(--muted-2); font-size:7px; }
.task-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.adoption-table { min-width:980px; }
.adoption-table td:first-child { min-width:285px; }
.adoption-table .task-actions { min-width:250px; }
.check-row.full { grid-column:1/-1; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--canvas); }
.operational-alert.warning { border-color:#f1d38a; background:#fff9e9; }
.operational-alert.danger { border-color:#f0bbc3; background:#fff3f5; }

/* Agent Pro: next actions, readiness, fleet, evidence, SOP and pricing */
.agent-next-center { margin:13px 0; overflow:hidden; border-color:#d8e4f3; }
.agent-next-center.clear { border-color:#cbe8da; }
.agent-next-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; background:#f8fafc; }
.agent-next-card { position:relative; overflow:hidden; padding:14px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:11px; background:#fff; box-shadow:var(--shadow-sm); }
.agent-next-card.tone-amber { border-left-color:var(--amber); }.agent-next-card.tone-green { border-left-color:var(--green); }.agent-next-card.tone-purple { border-left-color:var(--purple); }.agent-next-card.tone-cyan { border-left-color:var(--cyan); }.agent-next-card.tone-red { border-left-color:var(--red); }
.agent-next-head { display:flex; align-items:center; gap:9px; }.agent-next-head > span { display:grid; place-items:center; width:32px; height:32px; flex:none; color:var(--primary); border-radius:9px; background:var(--primary-soft); }.agent-next-head svg { width:15px; }
.agent-next-head div { min-width:0; }.agent-next-head strong,.agent-next-head small { display:block; }.agent-next-head strong { color:#263a50; font:800 10px Manrope,sans-serif; }.agent-next-head small { margin-top:3px; overflow:hidden; color:var(--muted-2); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.agent-next-card > p { min-height:27px; margin:9px 0; color:var(--muted); font-size:8px; line-height:1.55; }
.agent-next-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--line-soft); }.agent-next-foot > span { color:var(--muted-2); font-size:7px; }.agent-next-foot > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.readiness-inline > div { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; color:var(--muted); font-size:8px; }.readiness-inline strong { color:var(--primary); }.readiness-inline > i { display:block; overflow:hidden; height:5px; border-radius:8px; background:#e6edf4; }.readiness-inline > i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--cyan)); transition:width .25s; }
.readiness-detail { padding:14px; border:1px solid #d5e3f5; border-radius:11px; background:linear-gradient(145deg,#f8fbff,#fff); }.readiness-detail .detail-section-head { margin-bottom:11px; }.readiness-detail .detail-section-head small { display:block; margin-top:3px; color:var(--muted-2); font-size:7px; }.readiness-score { color:var(--primary); font:800 17px Manrope,sans-serif; }
.readiness-stepper { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0; }.readiness-stepper > div { display:flex; align-items:center; gap:5px; min-width:0; padding:8px; color:var(--muted); border:1px solid var(--line); border-radius:8px; background:#fff; }.readiness-stepper > div.complete { color:var(--green); border-color:#c9e7d8; background:#f0faf5; }.readiness-stepper svg { width:13px; flex:none; }.readiness-stepper small { overflow:hidden; font-size:7px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.readiness-blockers { display:grid; gap:5px; margin-top:9px; }.readiness-blockers span { display:flex; align-items:center; gap:6px; color:#8e5b14; font-size:7px; }.readiness-blockers svg { width:12px; flex:none; }.readiness-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.agent-performance-card { margin-top:13px; }.agent-performance-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; padding:1px; background:var(--line-soft); }.agent-performance-item { position:relative; overflow:hidden; min-height:96px; padding:13px; background:#fff; }.agent-performance-item::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--primary); }.agent-performance-item.tone-green::before { background:var(--green); }.agent-performance-item.tone-purple::before { background:var(--purple); }.agent-performance-item.tone-cyan::before { background:var(--cyan); }.agent-performance-item.tone-orange::before,.agent-performance-item.tone-amber::before { background:var(--orange); }
.agent-performance-item small,.agent-performance-item strong,.agent-performance-item span { display:block; }.agent-performance-item small { color:var(--muted-2); font-size:7px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.agent-performance-item strong { margin:9px 0 5px; color:#263a50; font:800 18px Manrope,sans-serif; }.agent-performance-item span { color:var(--muted); font-size:7px; line-height:1.45; }
.fleet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.fleet-grid .card { overflow:hidden; }.fleet-table { min-width:650px; }.table-subtext { display:block; margin-top:4px; color:var(--muted-2); font-size:7px; }
.compliance-check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.compliance-check-grid .check-row { margin:0; padding:9px; border:1px solid var(--line); border-radius:8px; background:#fafcfd; }.compliance-check-grid .check-row:has(input:checked) { color:#24704e; border-color:#c6e4d5; background:#eff9f4; }
.evidence-overview { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; padding:11px; border:1px solid #d8e4f3; border-radius:9px; background:#f7faff; }.evidence-overview .readiness-inline { flex:1; }.evidence-overview > span { flex:none; color:var(--muted); font-size:8px; }
.evidence-list { display:grid; gap:7px; margin-bottom:13px; }.evidence-list.compact { margin-bottom:0; }.evidence-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:9px; border:1px solid var(--line-soft); border-radius:9px; background:#fff; }.evidence-item > div { min-width:0; }.evidence-item strong,.evidence-item small { display:block; }.evidence-item strong { font-size:9px; }.evidence-item small { margin-top:3px; overflow:hidden; color:var(--muted-2); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.evidence-upload-box { display:grid; grid-template-columns:40px minmax(0,1fr); gap:11px; padding:14px; border:1px dashed #b9ccdf; border-radius:11px; background:#f8fbff; }.evidence-upload-box > span { display:grid; place-items:center; width:38px; height:38px; color:var(--primary); border-radius:10px; background:var(--primary-soft); }.evidence-upload-box > div:nth-child(2) strong,.evidence-upload-box > div:nth-child(2) small { display:block; }.evidence-upload-box > div:nth-child(2) strong { font-size:10px; }.evidence-upload-box > div:nth-child(2) small { margin-top:3px; color:var(--muted-2); font-size:7px; }.evidence-upload-box .form-grid,.evidence-upload-box > button { grid-column:1/-1; }
.sop-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px; background:linear-gradient(135deg,#102b48,#174979); }.sop-hero > div:first-child { display:flex; align-items:center; gap:13px; color:#fff; }.sop-hero > div:first-child > span { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); }.sop-hero small { color:#b8d1e8; font-size:7px; letter-spacing:.1em; }.sop-hero h2 { margin:4px 0; color:#fff; font:800 14px Manrope,sans-serif; }.sop-hero p { margin:0; color:#c5d7e7; font-size:8px; }.sop-progress { min-width:180px; }.sop-progress strong { display:block; margin-bottom:6px; color:#fff; text-align:right; font:800 17px Manrope,sans-serif; }.sop-progress i { display:block; overflow:hidden; height:7px; border-radius:10px; background:rgba(255,255,255,.18); }.sop-progress b { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.sop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:13px; }.sop-card { padding:16px; }.sop-card.acknowledged { border-color:#cbe7d9; }.sop-card-head { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; }.sop-number { display:grid; place-items:center; width:32px; height:32px; color:var(--primary); border-radius:9px; background:var(--primary-soft); font-weight:800; }.sop-card-head small { color:var(--muted-2); font-size:7px; }.sop-card-head h3 { margin:3px 0 0; font:800 11px Manrope,sans-serif; }.sop-card > p { color:var(--muted); font-size:8px; line-height:1.55; }.sop-card ol { margin:10px 0; padding-left:19px; color:#43566b; font-size:8px; line-height:1.65; }.sop-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:11px; border-top:1px solid var(--line-soft); }.sop-card-foot small { color:var(--muted-2); font-size:7px; }
.agent-price-contract { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px; padding:14px; border:1px solid #d4e2f0; border-radius:11px; background:linear-gradient(135deg,#f7faff,#fff); }.agent-price-contract small,.agent-price-contract strong,.agent-price-contract span { display:block; }.agent-price-contract small { color:var(--muted-2); font-size:7px; letter-spacing:.08em; }.agent-price-contract strong { margin:5px 0; color:#203a55; font:800 16px Manrope,sans-serif; }.agent-price-contract strong em { color:var(--muted); font-size:8px; font-style:normal; }.agent-price-contract span { color:var(--muted); font-size:7px; }.price-history-card { margin-top:13px; overflow:hidden; }
.agent-price-approval { margin-bottom:13px; overflow:hidden; border-color:#eed6a5; }.agent-price-approval.clear { border-color:#cce7d9; }.agent-price-approval .data-table { min-width:980px; }.price-reason { display:block; overflow:hidden; max-width:240px; text-overflow:ellipsis; white-space:nowrap; }.price-review-summary { display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; gap:10px; margin-bottom:13px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; }.price-review-summary > span { color:var(--primary); }.price-review-summary small,.price-review-summary strong { display:block; }.price-review-summary small { color:var(--muted-2); font-size:8px; }.price-review-summary strong { margin-top:5px; color:#243b54; font:800 15px Manrope,sans-serif; }
.admin-readiness-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }.admin-readiness-meta > div { padding:10px; border:1px solid var(--line-soft); border-radius:8px; background:#fff; }.admin-readiness-meta small,.admin-readiness-meta strong,.admin-readiness-meta span { display:block; }.admin-readiness-meta small { color:var(--muted-2); font-size:7px; text-transform:uppercase; }.admin-readiness-meta strong { margin:5px 0 3px; color:#33495f; font-size:9px; }.admin-readiness-meta span { color:var(--muted); font-size:7px; }

/* Company branding & theme settings */
.branding-layout { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(520px,1.6fr); gap:14px; align-items:start; }
.brand-preview-card { position:sticky; top:82px; overflow:hidden; }
.brand-preview-hero { position:relative; display:grid; place-items:center; min-height:245px; padding:28px; background:radial-gradient(circle at 50% 45%,rgba(var(--primary-rgb),.2),transparent 38%),linear-gradient(145deg,var(--navy-950),var(--sidebar-mid)); }
.brand-preview-hero::after { content:''; position:absolute; inset:18px; border:1px solid rgba(var(--accent-rgb),.2); border-radius:18px; }
.brand-preview-hero img { position:relative; z-index:1; width:170px; height:170px; object-fit:contain; filter:drop-shadow(0 16px 24px rgba(0,0,0,.2)); }
.brand-preview-hero span { position:absolute; z-index:2; right:16px; bottom:15px; padding:5px 8px; color:var(--accent-ink); border-radius:20px; background:var(--accent); font-size:7px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.brand-preview-copy { padding:20px; }
.brand-preview-copy small { color:var(--primary); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.brand-preview-copy h2 { margin:7px 0 5px; color:var(--navy-900); font:800 19px/1.25 Manrope,sans-serif; }
.brand-preview-copy strong { color:var(--primary); font-size:11px; }
.brand-preview-copy p { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.brand-preview-card .operational-alert { margin:0 20px 20px; }
.brand-signature-card { margin:0 20px 20px; padding:14px; border:1px solid var(--line); border-radius:11px; background:#f8fafc; }
.brand-signature-card.active { border-color:#b9dfd2; background:#f1fbf7; }
.brand-signature-head { display:flex; align-items:flex-start; gap:9px; }
.brand-signature-head > span { display:grid; place-items:center; flex:0 0 30px; height:30px; color:var(--primary); border-radius:8px; background:#e7f4fa; }
.brand-signature-card.active .brand-signature-head > span { color:#07815e; background:#dbf4ea; }
.brand-signature-head strong,.brand-signature-head small { display:block; }
.brand-signature-head strong { color:var(--navy); font-size:10px; }
.brand-signature-head small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.45; }
.brand-signature-card > img { display:block; width:150px; height:58px; margin:12px auto; object-fit:contain; border-bottom:1px solid #aab9c5; }
.brand-signature-card > .btn { width:100%; margin-top:12px; }
.signature-auto-apply { display:flex; align-items:flex-start; gap:10px; margin-top:13px; }
.signature-auto-apply input { margin-top:2px; accent-color:var(--primary); }
.signature-auto-apply span,.signature-auto-apply strong,.signature-auto-apply small { display:block; }
.signature-auto-apply small { margin-top:3px; color:var(--muted); font-size:9px; }
.branding-form .card-body { padding-top:18px; }
.theme-section { margin-top:24px; padding-top:22px; border-top:1px solid var(--line-soft); }
.theme-section .detail-section-head { margin-bottom:13px; }
.theme-section h3 { margin:0; font:800 13px Manrope,sans-serif; }
.theme-section p { margin:4px 0 0; color:var(--muted); font-size:9px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.theme-card { position:relative; display:flex; flex-direction:column; min-height:170px; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:.18s; }
.theme-card:hover { transform:translateY(-2px); border-color:#bccbd8; box-shadow:var(--shadow-sm); }
.theme-card.selected { border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1); }
.theme-card input { position:absolute; opacity:0; pointer-events:none; }
.theme-swatch { display:grid; grid-template-columns:repeat(5,1fr); height:48px; overflow:hidden; margin-bottom:13px; border-radius:8px; }
.theme-swatch i { display:block; }
.theme-card strong { font:800 11px Manrope,sans-serif; }
.theme-card small { flex:1; margin-top:6px; color:var(--muted); font-size:8px; line-height:1.45; }
.theme-card em { align-self:flex-start; margin-top:10px; padding:4px 7px; color:var(--primary); border-radius:20px; background:var(--primary-soft); font-size:7px; font-style:normal; font-weight:800; }
.theme-card.selected em { color:var(--accent-ink); background:var(--accent); }

/* Automatic document numbering */
.control-readonly { display:flex; align-items:center; color:var(--muted); background:var(--surface-soft); }
.numbering-flow { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr; align-items:center; gap:9px; margin-bottom:16px; padding:14px; color:#fff; border-radius:var(--radius); background:linear-gradient(125deg,var(--navy),var(--primary)); box-shadow:var(--shadow-sm); }
.numbering-flow > svg { width:18px; justify-self:center; opacity:.55; }
.numbering-flow > div { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; column-gap:9px; }
.numbering-flow > div > span { grid-row:1/3; display:grid; width:30px; height:30px; place-items:center; color:var(--navy); border-radius:50%; background:var(--accent); font:800 10px Manrope,sans-serif; }
.numbering-flow strong { font:800 10px Manrope,sans-serif; }
.numbering-flow small { margin-top:2px; color:rgba(255,255,255,.7); font-size:8px; }
.numbering-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.numbering-card { min-width:0; }
.number-preview { margin-bottom:16px; padding:13px; border:1px dashed rgba(var(--primary-rgb),.35); border-radius:10px; background:var(--primary-soft); }
.number-preview small { display:block; margin-bottom:5px; color:var(--muted); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.number-preview strong { overflow-wrap:anywhere; color:var(--primary); font:800 14px Manrope,sans-serif; }
.numbering-audit { display:flex; align-items:flex-start; gap:8px; margin-top:12px; color:var(--muted); }
.numbering-audit svg { flex:0 0 auto; width:15px; color:var(--green); }
.numbering-audit small { font-size:8px; line-height:1.55; }
.numbering-help { margin-top:14px; }
.numbering-help .card-body { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.numbering-help strong { font:800 11px Manrope,sans-serif; }
.numbering-help p { margin:5px 0 0; color:var(--muted); font-size:9px; }
.numbering-help code { padding:2px 4px; color:var(--primary); border-radius:4px; background:var(--primary-soft); font-weight:800; }

/* Project instalasi gas */
.installation-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:13px; }
.installation-kpi { --installation-tone:var(--blue); display:flex; align-items:center; gap:12px; min-height:86px; padding:14px 16px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(115deg,color-mix(in srgb,var(--installation-tone) 7%,white),#fff 68%); box-shadow:var(--shadow-sm); }
.installation-kpi.tone-green { --installation-tone:var(--green); }.installation-kpi.tone-slate { --installation-tone:var(--slate); }.installation-kpi.tone-orange { --installation-tone:var(--orange); }.installation-kpi.tone-cyan { --installation-tone:var(--cyan); }.installation-kpi.tone-red { --installation-tone:var(--red); }
.installation-kpi > span { display:grid; flex:0 0 40px; width:40px; height:42px; color:var(--installation-tone); border-radius:11px; background:color-mix(in srgb,var(--installation-tone) 12%,white); place-items:center; }
.installation-kpi > span svg { width:19px; }
.installation-kpi small,.installation-kpi strong,.installation-kpi em { display:block; }
.installation-kpi small { color:#526176; font-size:8px; font-weight:750; }
.installation-kpi strong { margin-top:3px; color:var(--installation-tone); font:800 21px Manrope,sans-serif; }
.installation-kpi em { margin-top:2px; color:var(--muted-2); font-size:7px; font-style:normal; }
.installation-project-card { overflow:hidden; }
.installation-toolbar { border-bottom:1px solid var(--line-soft); }
.installation-toolbar .search-control { flex:1; max-width:none; }
.installation-toolbar > select { width:auto; min-width:155px; }
.installation-status-groups { display:grid; gap:9px; padding:12px; background:#f8fafc; }
.installation-status-group { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(25,45,65,.035); }
.installation-status-group > summary { display:grid; grid-template-columns:30px minmax(0,1fr) auto 18px; align-items:center; gap:9px; padding:10px 13px; cursor:pointer; list-style:none; background:linear-gradient(90deg,#fbfcfd,#fff); }
.installation-status-group > summary::-webkit-details-marker { display:none; }
.installation-status-group > summary > strong { color:#304158; font-size:10px; }
.installation-status-group > summary > em { color:var(--muted); font-size:8px; font-style:normal; }
.installation-status-group > summary > svg { width:14px; color:var(--muted-2); transition:transform .18s; }
.installation-status-group[open] > summary > svg { transform:rotate(180deg); }
.installation-group-icon { display:grid; width:28px; height:28px; border-radius:8px; place-items:center; }
.installation-group-icon svg { width:14px; }
.installation-table { min-width:1250px; border-top:1px solid var(--line-soft); }
.mini-avatar.installation { color:#087b87; background:#e8f7f8; }
.installation-address { display:flex; min-width:180px; max-width:280px; flex-direction:column; gap:5px; }
.installation-address > span { overflow:hidden; color:#475569; font-size:8px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.installation-address > a { display:inline-flex; align-items:center; gap:4px; width:max-content; color:var(--primary); font-size:8px; font-weight:750; text-decoration:none; }
.installation-address svg { width:11px; }
.installation-master-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px; }
.installation-master-grid > section { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#fbfcfd; }
.installation-master-head { padding:13px 14px; border-bottom:1px solid var(--line-soft); background:#fff; }
.installation-master-head h3 { margin:0; color:#304158; font:750 11px Manrope,sans-serif; }
.installation-master-head small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.installation-master-list { display:grid; max-height:210px; overflow:auto; }
.installation-master-row { display:grid; grid-template-columns:31px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line-soft); background:#fff; }
.installation-master-row strong,.installation-master-row small { display:block; }
.installation-master-row strong { color:#34455a; font-size:9px; }
.installation-master-row small { margin-top:2px; color:var(--muted-2); font-size:7px; }
.installation-master-form { display:grid; gap:9px; padding:13px; }
.installation-master-form h4 { margin:0; color:#34455a; font:750 9px Manrope,sans-serif; }
.installation-master-form .btn { justify-self:start; }
.installation-drawer { width:min(720px,95vw); }
.installation-progress { display:grid; grid-template-columns:repeat(5,1fr); margin-bottom:16px; padding:13px 8px; border:1px solid var(--line); border-radius:10px; background:#f9fbfc; }
.installation-progress > div { position:relative; display:grid; justify-items:center; gap:6px; text-align:center; }
.installation-progress > div:not(:last-child)::after { content:''; position:absolute; z-index:0; top:12px; left:60%; width:80%; height:2px; background:#dfe6eb; }
.installation-progress span { position:relative; z-index:1; display:grid; width:25px; height:25px; color:#748399; border:1px solid #d8e0e6; border-radius:50%; background:#fff; place-items:center; font:750 8px Manrope,sans-serif; }
.installation-progress span svg { width:12px; }
.installation-progress small { color:var(--muted); font-size:7px; line-height:1.3; }
.installation-progress .complete span,.installation-progress .current span { color:#fff; border-color:var(--green); background:var(--green); }
.installation-progress .current span { border-color:var(--primary); background:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.installation-progress .complete:not(:last-child)::after { background:var(--green); }
.installation-project-note { margin:0; padding:12px; color:#536579; border:1px solid var(--line-soft); border-radius:9px; background:#f9fbfc; font-size:9px; line-height:1.65; }

/* Database maintenance */
.maintenance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.maintenance-card { display:flex; min-width:0; flex-direction:column; }
.maintenance-card form { display:flex; flex:1; flex-direction:column; }
.maintenance-card .card-body { flex:1; }
.maintenance-card .card-body > p { margin:0 0 14px; color:var(--muted); font-size:10px; line-height:1.65; }
.maintenance-card .modal-foot { border-radius:0 0 var(--radius) var(--radius); }
.maintenance-card.danger-zone { border-color:#f2c8c8; }
.maintenance-card.danger-zone .card-head { background:#fff9f9; }
.maintenance-card.danger-zone .card-title > span { color:var(--danger); background:#fff0f0; }

/* Responsive */
@media (max-width: 1180px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .entity-grid { grid-template-columns: repeat(2, 1fr); }
    .shipment-card { grid-template-columns: 155px minmax(0, 1fr) 150px 40px; }
    .auth-layout { grid-template-columns: 1fr 430px; }
    .task-inbox-item { grid-template-columns:34px minmax(0,1fr); }
    .task-inbox-item .task-actions { grid-column:2; justify-content:flex-start; }
    .auth-brand-panel { padding-inline: 40px; }
    .branding-layout { grid-template-columns:1fr; }
    .numbering-grid { grid-template-columns:1fr; }
    .maintenance-grid { grid-template-columns:1fr; }
    .brand-preview-card { position:static; }
    .auth-flow > div { min-width: 120px; }
}

@media (max-width: 960px) {
    :root { --sidebar: 252px; }
    .sidebar { transform: translateX(-101%); transition: transform .22s ease; }
    .app-shell.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-close { display: grid; color: #8195a8; border-color: rgba(255,255,255,.08); background: transparent; }
    .sidebar-overlay { position: fixed; z-index: 49; inset: 0; background: rgba(5,17,30,.48); backdrop-filter: blur(2px); }
    .app-shell.sidebar-open .sidebar-overlay { display: block; }
    .app-main { margin-left: 0; }
    .menu-toggle { display: grid; }
    .dashboard-grid, .dashboard-grid.equal, .report-grid { grid-template-columns: 1fr; }
    .shipment-card { grid-template-columns: 155px minmax(0, 1fr) 145px 35px; }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-brand-panel { display: none; }
    .mobile-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 45px; }
    .mobile-auth-brand strong { font: 700 15px Manrope, sans-serif; }
    .assignment-card { align-items: flex-start; flex-direction: column; }
    .assignment-main { width: 100%; }
    .assignment-actions { align-self: flex-end; }
    .profile-layout { grid-template-columns: 1fr; }
    .theme-grid { grid-template-columns:1fr; }
    .numbering-flow { grid-template-columns:1fr; }
    .numbering-flow > svg { transform:rotate(90deg); }
    .agent-performance-grid { grid-template-columns:repeat(3,1fr); }
    .fleet-grid { grid-template-columns:1fr; }
    .installation-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
    html { font-size: 14px; }
    .topbar { padding: 0 14px; }
    .breadcrumb span, .breadcrumb svg, .global-search span:nth-child(2), .global-search kbd, .today-chip, .topbar-profile div:nth-child(2), .topbar-profile > svg { display: none; }
    .global-search { width: 36px; padding: 0; justify-content: center; border: 0; background: transparent; }
    .global-search svg { width: 18px; }
    .topbar-profile { padding: 0; }
    .page-container { padding: 18px 14px 35px; }
    .page-head { align-items: center; }
    .page-head h1 { font-size: 21px; }
    .page-head p { max-width: 420px; }
    .page-actions .btn-secondary span.btn-label { display: none; }
    .welcome-strip { align-items: flex-start; padding: 16px; }
    .welcome-meta { display: none; }
    .kpi-grid { gap: 9px; }
    .kpi-card { min-height: 126px; padding: 13px; }
    .kpi-value { font-size: 20px; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .toolbar { flex-wrap: wrap; }
    .search-control { min-width: 100%; max-width: none; }
    .toolbar select.control { flex: 1; min-width: 130px; }
    .entity-grid { grid-template-columns: 1fr; }
    .shipment-card { grid-template-columns: 1fr auto; gap: 12px; }
    .shipment-card .route-visual { grid-column: 1 / -1; grid-row: 2; }
    .shipment-card .shipment-driver { grid-column: 1; grid-row: 3; }
    .summary-banner { grid-template-columns: 1fr 1fr; }
    .summary-banner > div:nth-child(2) { border-right: 0; }
    .summary-banner > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); }
    .assignment-main { grid-template-columns: 1fr 1fr; }
    .assignment-main .entity-cell { grid-column: 1 / -1; }
    .assignment-actions { width: 100%; overflow-x: auto; }
    .assignment-actions .btn { flex: 1; }
    .form-grid { grid-template-columns: 1fr; }
    .numbering-help .card-body { align-items:flex-start; flex-direction:column; }
    .form-group.full { grid-column: auto; }
    .agent-next-grid,.sop-grid { grid-template-columns:1fr; }
    .agent-performance-grid { grid-template-columns:repeat(2,1fr); }
    .readiness-stepper { grid-template-columns:repeat(2,1fr); }
    .compliance-check-grid { grid-template-columns:1fr; }
    .sop-hero { align-items:flex-start; flex-direction:column; }
    .sop-progress { width:100%; min-width:0; }
    .agent-next-foot { align-items:flex-start; flex-direction:column; }
    .agent-next-foot > div { justify-content:flex-start; }
    .installation-toolbar > select { flex:1; min-width:140px; }
    .installation-master-grid { grid-template-columns:1fr; }
    .installation-progress { overflow-x:auto; grid-template-columns:repeat(5,minmax(90px,1fr)); }
    .notification-popover { right: 10px; }
    .profile-popover { right: 10px; }
}

@media (max-width: 470px) {
    .auth-form-panel { align-items: start; padding: 28px 22px; }
    .mobile-auth-brand { margin-bottom: 38px; }
    .auth-form-wrap h2 { font-size: 27px; }
    .page-head { align-items: flex-start; }
    .page-head p { display: none; }
    .page-actions { gap: 5px; }
    .page-actions .btn { width: 36px; padding: 0; }
    .page-actions .btn span:not([data-icon]) { display: none; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kpi-card { min-height: 116px; }
    .kpi-label { white-space: nowrap; font-size: 7px; }
    .kpi-value { font-size: 17px; }
    .kpi-foot { display: none; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .stat-compact { padding: 10px; }
    .card-head { padding: 12px; }
    .card-body { padding: 12px; }
    .summary-banner strong { font-size: 15px; }
    .summary-banner > div { padding: 14px; }
    .payment-donut-wrap { flex-direction: column; }
    .detail-summary { grid-template-columns: 1fr 1fr; }
    .detail-summary div:nth-child(2) { border-right: 0; }
    .detail-summary div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
    .detail-grid { grid-template-columns: 1fr; }
    .drawer { width: 100vw; }
    .drawer-head, .drawer-body { padding-inline: 14px; }
    .sppg-history-grid { grid-template-columns: 1fr 1fr; }
    .sppg-history-head { align-items:flex-start; flex-direction:column; }
    .sppg-history-head > div:last-child { justify-content:flex-start; }
    .workflow-step span { display: none; }
    .profile-metrics { grid-template-columns: 1fr; }
    .profile-metrics div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .profile-metrics div:last-child { border-bottom: 0; }
    .agent-performance-grid { grid-template-columns:1fr 1fr; }
    .agent-price-contract { align-items:flex-start; flex-direction:column; }
    .installation-kpi-grid { grid-template-columns:1fr 1fr; }
    .installation-kpi { min-height:78px; padding:11px; }
    .installation-kpi > span { width:34px; height:36px; flex-basis:34px; }
    .installation-kpi strong { font-size:17px; }
    .installation-kpi em { display:none; }
    .evidence-overview { align-items:flex-start; flex-direction:column; }
    .evidence-overview .readiness-inline { width:100%; }
    .evidence-item { grid-template-columns:32px minmax(0,1fr) auto; }
    .evidence-item > .icon-btn:last-child { grid-column:3; }
    .sop-card-head { grid-template-columns:32px minmax(0,1fr); }
    .sop-card-head > .badge { grid-column:2; justify-self:start; }
    .modal-backdrop { padding: 8px; }
    .modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    .document-preview-modal { width: 100%; height: calc(100vh - 16px); height: calc(100dvh - 16px); }
    .document-preview-modal .modal-head { align-items:flex-start; gap:8px; padding:10px 11px; }
    .document-preview-modal .modal-head > div:first-child { min-width:0; overflow:hidden; }
    .document-preview-modal .modal-head h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .document-preview-modal .modal-head p { display:none; }
    .document-preview-actions { flex:0 0 auto; gap:4px; }
    .document-preview-actions .btn { justify-content:center; width:34px; height:34px; padding:0; }
    .document-preview-actions .btn-label { display: none; }
}

@media (max-width:720px) {
    .control-hero { grid-template-columns:1fr; gap:14px; padding:18px; }
    .control-hero-flags div:first-child { border-left:0; padding-left:0; }
    .driver-topbar { padding-inline:16px; }
    .driver-shell { padding:14px 12px 35px; }
    .driver-hero { flex-direction:column; padding:18px; }
    .driver-summary-grid { grid-template-columns:1fr 1fr; }
    .driver-summary-grid div:nth-child(2) { border-right:0; }
    .driver-summary-grid div:nth-child(-n+2) { border-bottom:1px solid var(--line-soft); }
    .driver-sj-card { grid-template-columns:90px 1fr; gap:12px; padding:14px; }
    .driver-qr img { width:90px; height:90px; }
    .verification-card { padding:22px 14px; }
}

/* SPPG performance assessment */
.sppg-performance-filter .report-filter-head { padding: 16px 18px; }
.sppg-performance-filter .report-filter-head strong { font-size: 12px; }
.sppg-performance-filter .report-filter-head small { font-size: 10px; }
.sppg-performance-filter .report-filter-grid { padding: 16px 18px 18px; }
.sppg-performance-filter .form-group label { font-size: 10px; }
.sppg-performance-filter .control { height: 40px; font-size: 11px; }
.sppg-performance-stats .report-kpi { min-height: 112px; padding: 17px; }
.sppg-performance-stats .report-kpi small { font-size: 10px; }
.sppg-performance-stats .report-kpi strong { font-size: 22px; }
.sppg-performance-stats .report-kpi em { font-size: 9px; }
.sppg-performance-filter { margin-bottom: 13px; }
.sppg-performance-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 13px; }
.sppg-performance-overview { margin-bottom: 13px; }
.sppg-performance-overview > .card { min-width: 0; }
.sppg-performance-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 0 16px; }
.sppg-performance-method > div { display: flex; min-height: 116px; padding: 15px; border: 1px solid var(--line-soft); border-radius: 10px; flex-direction: column; gap: 7px; background: #fbfcfd; }
.sppg-performance-method strong { color: var(--ink); font-size: 12px; }
.sppg-performance-method span { color: var(--primary); font: 700 22px 'DM Sans', sans-serif; }
.sppg-performance-method small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.sppg-performance-focus { display: flex; flex-direction: column; gap: 12px; padding: 5px 0 8px; }
.sppg-performance-focus > div { display: grid; grid-template-columns: 78px 1fr; gap: 4px 10px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); }
.sppg-performance-focus > div:last-child { border-bottom: 0; }
.sppg-performance-focus span { width: fit-content; padding: 5px 8px; border-radius: 5px; font-size: 9px; font-weight: 800; }
.sppg-performance-focus strong { color: var(--ink); font-size: 21px; }
.sppg-performance-focus small { grid-column: 2; color: var(--muted); font-size: 10px; }
.sppg-performance-legend { margin-bottom: 13px; overflow: hidden; }
.sppg-performance-legend .card-head { gap: 12px; }
.sppg-performance-legend .card-title, .sppg-performance-table-card .card-title { min-width: 0; }
.sppg-performance-legend .card-title > div, .sppg-performance-table-card .card-title > div { min-width: 0; }
.sppg-performance-legend .card-title p { line-height: 1.4; }
.sppg-performance-legend .badge { flex: none; }
.sppg-performance-legend-body { display: grid; gap: 14px; padding: 15px 17px 17px; }
.sppg-legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sppg-legend-item { --legend-tone: var(--primary); min-width: 0; padding: 13px; border: 1px solid var(--line-soft); border-top: 3px solid var(--legend-tone); border-radius: 10px; background: #fbfcfd; }
.sppg-legend-item.tone-blue { --legend-tone: var(--blue); }
.sppg-legend-item.tone-cyan { --legend-tone: var(--cyan); }
.sppg-legend-item.tone-orange { --legend-tone: var(--orange); }
.sppg-legend-label { display: flex; align-items: center; gap: 7px; }
.sppg-legend-label > span { display: grid; width: 24px; height: 24px; color: #fff; border-radius: 7px; background: var(--legend-tone); font-size: 8px; font-weight: 800; place-items: center; }
.sppg-legend-label strong { color: var(--ink); font-size: 11px; }
.sppg-legend-label b { margin-left: auto; color: var(--legend-tone); font-size: 10px; white-space: nowrap; }
.sppg-legend-item p { min-height: 32px; margin: 11px 0 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sppg-legend-formula { min-height: 36px; padding: 9px; color: #40546a; border-radius: 7px; background: #f1f6f8; font-size: 9px; font-weight: 700; line-height: 1.45; }
.sppg-legend-item > small { display: block; margin-top: 8px; color: var(--muted-2); font-size: 9px; line-height: 1.5; }
.sppg-score-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 1px; }
.sppg-score-legend > div { --legend-tone: var(--slate); display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--legend-tone) 18%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--legend-tone) 5%, white); }
.sppg-score-legend > div.tone-green { --legend-tone: var(--green); }
.sppg-score-legend > div.tone-cyan { --legend-tone: var(--cyan); }
.sppg-score-legend > div.tone-orange { --legend-tone: var(--orange); }
.sppg-score-legend > div.tone-red { --legend-tone: var(--red); }
.sppg-score-legend > div > span { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--legend-tone); }
.sppg-score-legend strong, .sppg-score-legend small { display: block; }
.sppg-score-legend strong { color: var(--legend-tone); font-size: 11px; }
.sppg-score-legend small { margin-top: 2px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.sppg-performance-legend-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; color: #536579; border: 1px solid #dbe7ef; border-radius: 8px; background: #f7fbfd; font-size: 9px; line-height: 1.55; }
.sppg-performance-legend-note > span { flex: 0 0 14px; color: var(--primary); }
.sppg-performance-legend-note p { margin: 0; }
.sppg-performance-legend-note strong { color: #304258; }
.sppg-performance-table-card { overflow: hidden; }
.sppg-performance-table-card .card-head { gap: 14px; }
.sppg-performance-table-card .card-meta { flex: none; margin-top: 4px; white-space: nowrap; }
.sppg-performance-table { min-width: 960px; table-layout: fixed; }
.sppg-performance-table th:first-child { width: 25%; }
.sppg-performance-table th:nth-child(2), .sppg-performance-table th:nth-child(3), .sppg-performance-table th:nth-child(4) { width: 15%; }
.sppg-performance-table th:nth-child(5) { width: 13%; }
.sppg-performance-table th:nth-child(6) { width: 10%; }
.sppg-performance-table th:last-child { width: 42px; }
.sppg-performance-table tr[data-action] { cursor: pointer; }
.sppg-performance-table tr[data-action]:hover { background: #f8fbfc; }
.sppg-performance-table th { font-size: 9px; }
.sppg-performance-table td { height: 64px; font-size: 10px; vertical-align: middle; }
.sppg-performance-table .entity-cell strong { font-size: 10px; }
.sppg-performance-table .entity-cell small { font-size: 9px; }
.sppg-performance-score { display: inline-flex; min-width: 84px; padding: 6px 8px; border-radius: 7px; flex-direction: column; gap: 2px; }
.sppg-performance-score strong { font-size: 17px; }
.sppg-performance-score small { font-size: 9px; }
.sppg-performance-score.tone-green { color: #127d57; background: #e9f8f0; }
.sppg-performance-score.tone-cyan { color: #087d83; background: #e4f8f7; }
.sppg-performance-score.tone-orange { color: #a45b15; background: #fff2e3; }
.sppg-performance-score.tone-red { color: #b02a3c; background: #fff0f2; }
.sppg-performance-score.tone-slate { color: #647487; background: #f0f3f6; }
.sppg-performance-trend { font-weight: 800; white-space: nowrap; }
.sppg-performance-trend.up { color: #138454; }
.sppg-performance-trend.down { color: #b52d40; }
.sppg-performance-trend.flat { color: #7b8997; }
.sppg-detail-indicators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sppg-performance-indicator { padding: 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfcfd; }
.sppg-indicator-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sppg-indicator-head > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(21,150,140,.1); }
.sppg-indicator-head small { color: var(--muted); font-size: 9px; font-weight: 800; }
.sppg-performance-indicator > strong { color: var(--ink); font-size: 24px; }
.sppg-performance-indicator p { margin: 4px 0 12px; color: var(--muted); font-size: 10px; }
.sppg-performance-indicator .progress { height: 6px; margin-bottom: 8px; }
.sppg-performance-indicator .progress i { background: var(--primary); }
.sppg-performance-indicator > small { color: var(--muted); font-size: 9px; }
.sppg-performance-recommendation { padding: 13px; border-left: 3px solid var(--primary); border-radius: 7px; background: #f6fafb; }
.sppg-performance-recommendation strong { color: var(--ink); font-size: 12px; }
.sppg-performance-recommendation p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sppg-performance-drawer { width: min(940px, calc(100vw - 30px)); max-width: 940px; }
.sppg-history-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.sppg-history-metrics > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: #f8fbfc; }
.sppg-history-metrics small, .sppg-history-metrics strong, .sppg-history-metrics span { display: block; }
.sppg-history-metrics small { color: var(--muted-2); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sppg-history-metrics strong { margin-top: 5px; color: var(--ink); font: 800 16px Manrope, sans-serif; }
.sppg-history-metrics span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.sppg-detail-subsection { margin-top: 10px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.sppg-detail-subsection-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 13px; border-bottom: 1px solid var(--line-soft); background: #fbfcfd; }
.sppg-detail-subsection-head h4 { margin: 0; color: #304258; font: 700 10px Manrope, sans-serif; }
.sppg-detail-subsection-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.sppg-detail-subsection-head .badge { flex: none; }
.sppg-detail-table-wrap { overflow-x: auto; }
.sppg-detail-table { width: 100%; min-width: 650px; border-collapse: collapse; }
.sppg-detail-table th { padding: 9px 11px; color: #8492a2; border-bottom: 1px solid var(--line); background: #f8fafb; font-size: 7px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.sppg-detail-table td { height: 42px; padding: 7px 11px; color: #435266; border-bottom: 1px solid var(--line-soft); font-size: 9px; vertical-align: middle; white-space: nowrap; }
.sppg-detail-table tr:last-child td { border-bottom: 0; }
.sppg-detail-table td strong, .sppg-detail-table td small { display: block; }
.sppg-detail-table td strong { color: #2d4055; font-size: 9px; }
.sppg-detail-table td small { margin-top: 2px; color: var(--muted-2); font-size: 7px; }
.sppg-detail-table td > .empty-state { min-height: 100px; white-space: normal; }
.sppg-detail-loading { padding: 24px; color: var(--muted); border: 1px dashed #cbdbe4; border-radius: 9px; background: #f8fbfd; font-size: 9px; text-align: center; }

@media (max-width: 900px) {
    .sppg-performance-stats, .sppg-legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sppg-history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sppg-performance-method, .sppg-detail-indicators { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .sppg-performance-legend .card-head { align-items: flex-start; }
    .sppg-performance-legend .badge { display: none; }
    .sppg-performance-table-card .card-head { align-items: flex-start; flex-wrap: wrap; }
    .sppg-score-legend { grid-template-columns: 1fr 1fr; }
    .sppg-performance-table { min-width: 650px; }
    .sppg-performance-table th:nth-child(2), .sppg-performance-table td:nth-child(2), .sppg-performance-table th:nth-child(3), .sppg-performance-table td:nth-child(3) { display: none; }
    .sppg-performance-table th, .sppg-performance-table td { padding-inline: 7px; }
}

@media (max-width: 470px) {
    .sppg-performance-stats, .sppg-legend-grid, .sppg-score-legend { grid-template-columns: 1fr; }
    .sppg-performance-legend-body { padding-inline: 12px; }
    .sppg-history-metrics { grid-template-columns: 1fr 1fr; }
    .sppg-performance-drawer { width: 100vw; }
    .sppg-performance-table-card .card-head { align-items: flex-start; flex-direction: column; }
    .sppg-performance-table-card .card-meta { margin-top: 0; }
}