:root {
    --ink: #18232b;
    --ink-soft: #5f6d73;
    --navy: #132b38;
    --paper: #f6f7f3;
    --white: #ffffff;
    --line: #e2e7e4;
    --amber: #e5a83b;
    --amber-soft: #fff4da;
    --green: #268269;
    --green-soft: #e2f2ed;
    --red: #c4554b;
    --red-soft: #fde9e6;
    --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(229, 168, 59, .65); outline-offset: 3px; }
.hidden { display: none !important; }

.login-screen { align-items: center; background: radial-gradient(circle at 80% 20%, #254653 0, transparent 27%), var(--navy); display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 32px 20px; position: relative; }
.login-screen::before { 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: 42px 42px; content: ''; inset: 0; opacity: .6; pointer-events: none; position: absolute; }
.login-brand, .login-card, .login-footer { position: relative; z-index: 1; }
.login-brand { align-items: center; color: #f5f4ec; display: flex; font-size: 15px; font-weight: 800; gap: 10px; letter-spacing: -.02em; margin-bottom: 30px; }
.brand-mark { align-items: center; background: var(--amber); border-radius: 9px; color: var(--navy); display: inline-flex; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; height: 35px; justify-content: center; letter-spacing: -.1em; width: 35px; }
.login-card { background: var(--white); border-radius: 18px; box-shadow: 0 25px 80px rgba(0,0,0,.2); max-width: 440px; padding: 43px; width: 100%; }
.eyebrow { color: var(--green); display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.login-card h1 { font-size: 30px; letter-spacing: -.06em; line-height: 1.1; margin: 9px 0 10px; }
.login-card > p { color: var(--ink-soft); margin: 0 0 30px; }
.login-footer { color: rgba(255,255,255,.57); font-size: 11px; margin-top: 22px; }
.login-footer i { color: var(--amber); margin-right: 5px; }
.form-group { margin-bottom: 19px; }
.form-group label { color: var(--ink); display: block; font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.form-group label span { color: var(--ink-soft); font-weight: 500; }
input, select, textarea { background: var(--white); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 12px 14px; transition: border .2s, box-shadow .2s; width: 100%; }
input::placeholder, textarea::placeholder { color: #9ba5a6; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(38,130,105,.12); outline: 0; }
textarea { min-height: 125px; resize: vertical; }
.password-wrapper { position: relative; }.password-wrapper input { padding-right: 42px; }
.toggle-password { background: none; border: 0; color: var(--ink-soft); padding: 10px; position: absolute; right: 3px; top: 2px; }
.form-actions { align-items: center; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.btn { align-items: center; border: 0; border-radius: 8px; display: inline-flex; font-size: 12px; font-weight: 800; gap: 9px; justify-content: center; min-height: 43px; padding: 0 18px; transition: transform .2s, background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }.btn-primary { background: var(--amber); box-shadow: 0 7px 16px rgba(229,168,59,.18); color: var(--navy); width: 100%; }.btn-primary:hover { background: #f0b64b; }.btn-secondary { background: var(--white); border: 1px solid var(--line); color: var(--ink); }.btn-secondary:hover { border-color: var(--green); color: var(--green); }
.forgot-link, .text-link { color: var(--green); font-size: 12px; font-weight: 800; text-decoration: none; }.forgot-link:hover, .text-link:hover { text-decoration: underline; }
.feedback-msg { font-size: 12px; margin-top: 12px; text-align: center; }.feedback-msg.error { color: var(--red); }.feedback-msg.success { color: var(--green); }

.dashboard { display: flex; min-height: 100vh; }.sidebar { background: var(--navy); color: #d6e0df; display: flex; flex-direction: column; flex-shrink: 0; padding: 27px 18px 22px; width: 248px; }.sidebar-logo { align-items: center; display: flex; gap: 10px; margin: 0 13px 53px; }.sidebar-logo strong { color: #fff; display: block; font-size: 13px; }.sidebar-logo small { color: #91a4a8; display: block; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; margin-top: 2px; text-transform: uppercase; }.side-nav { display: flex; flex-direction: column; gap: 5px; }.nav-caption { color: #70898e; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; margin: 0 14px 8px; text-transform: uppercase; }.nav-caption:not(:first-child) { margin-top: 29px; }.side-link { align-items: center; border-left: 3px solid transparent; border-radius: 0 7px 7px 0; color: #a8b9ba; display: flex; font-size: 12px; font-weight: 700; gap: 13px; min-height: 44px; padding: 0 13px; text-decoration: none; }.side-link i { color: #7d9699; font-size: 14px; text-align: center; width: 16px; }.side-link b { background: var(--amber); border-radius: 20px; color: var(--navy); font-family: 'DM Mono', monospace; font-size: 9px; margin-left: auto; padding: 2px 6px; }.side-link:hover, .side-link.active { background: rgba(255,255,255,.08); color: #fff; }.side-link.active { border-left-color: var(--amber); }.side-link.active i { color: var(--amber); }.sidebar-bottom { border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding: 20px 13px 0; }.site-link, .logout-link { background: none; border: 0; color: #9db1b2; font-size: 11px; padding: 8px 0; text-align: left; text-decoration: none; }.site-link i, .logout-link i { margin-right: 9px; width: 13px; }.site-link:hover, .logout-link:hover { color: #fff; }
.dashboard-main { flex: 1; min-width: 0; padding: 0 42px 56px; }.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 108px; }.topbar-kicker { color: var(--ink-soft); font-family: 'DM Mono', monospace; font-size: 10px; }.topbar h1 { font-size: 24px; letter-spacing: -.06em; line-height: 1.2; margin: 7px 0 0; }.topbar-actions { align-items: center; display: flex; gap: 19px; }.status-dot { color: var(--green); font-family: 'DM Mono', monospace; font-size: 10px; }.status-dot i { background: #4fb490; border-radius: 50%; display: inline-block; height: 7px; margin-right: 5px; width: 7px; }.avatar { align-items: center; background: var(--navy); border-radius: 50%; color: var(--amber); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; height: 34px; justify-content: center; width: 34px; }.mobile-menu { background: none; border: 0; color: var(--navy); display: none; font-size: 19px; margin-right: 13px; }.global-feedback { min-height: 0; color: var(--green); font-size: 12px; padding-top: 14px; font-weight: 700; }.global-feedback.error { color: var(--red); }.global-feedback.warning { color: #be7b20; }.global-feedback.success { color: var(--green); }
.welcome-panel { align-items: center; background: var(--navy); border-radius: var(--radius); color: white; display: flex; justify-content: space-between; margin-top: 34px; overflow: hidden; padding: 30px 34px; position: relative; }.welcome-panel::after { border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ''; height: 240px; position: absolute; right: -65px; top: -110px; width: 240px; }.welcome-panel h2 { font-size: 25px; letter-spacing: -.06em; margin: 7px 0 3px; }.welcome-panel p { color: #b0c2c4; margin: 0; }.welcome-panel .eyebrow { color: var(--amber); }.welcome-mark { align-items: center; background: rgba(229,168,59,.13); border: 1px solid rgba(229,168,59,.25); border-radius: 50%; color: var(--amber); display: flex; font-size: 29px; height: 76px; justify-content: center; margin-right: 20px; position: relative; width: 76px; z-index: 1; }
.metric-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: 18px 0; }.metric-card, .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }.metric-card { min-height: 148px; padding: 22px 24px; }.metric-label { color: var(--ink-soft); display: block; font-size: 11px; font-weight: 700; }.metric-card strong { display: block; font-family: 'DM Mono', monospace; font-size: 36px; font-weight: 500; letter-spacing: -.08em; line-height: 1; margin: 18px 0 13px; }.metric-note { font-size: 10px; font-weight: 800; }.metric-note i { margin-right: 4px; }.metric-note.warning { color: #be7b20; }.metric-note.positive { color: var(--green); }.metric-note.neutral { color: var(--ink-soft); }
.content-grid { display: grid; gap: 18px; grid-template-columns: 1.35fr .9fr; }.panel { padding: 24px; }.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 22px; }.panel h2, .page-heading h2 { font-size: 18px; letter-spacing: -.05em; margin: 5px 0 0; }.panel-heading .text-link { margin-top: 9px; }.approval-list { display: flex; flex-direction: column; gap: 2px; }.approval-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 13px; padding: 13px 0; }.person-avatar { align-items: center; background: var(--amber-soft); border-radius: 50%; color: #a66d16; display: flex; flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 11px; height: 34px; justify-content: center; width: 34px; }.approval-row strong { display: block; font-size: 12px; }.approval-row small { color: var(--ink-soft); display: block; font-size: 10px; margin-top: 2px; }.approval-row .status-badge { margin-left: auto; }.status-badge { border-radius: 20px; display: inline-flex; font-family: 'DM Mono', monospace; font-size: 9px; padding: 4px 8px; white-space: nowrap; }.status-badge.pending { background: var(--amber-soft); color: #a66d16; }.status-badge.approved { background: var(--green-soft); color: var(--green); }.status-badge.rejected { background: var(--red-soft); color: var(--red); }
.quick-panel { padding-bottom: 13px; }.quick-action { align-items: center; background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); display: flex; gap: 12px; padding: 14px 0; text-align: left; width: 100%; }.quick-action > i:first-child { align-items: center; background: var(--green-soft); border-radius: 8px; color: var(--green); display: flex; height: 34px; justify-content: center; width: 34px; }.quick-action span { flex: 1; }.quick-action strong, .quick-action small { display: block; }.quick-action strong { font-size: 11px; }.quick-action small { color: var(--ink-soft); font-size: 10px; margin-top: 2px; }.quick-action > i:last-child { color: #9aa5a5; font-size: 10px; }.quick-action:hover strong { color: var(--green); }
.view { display: none; padding-top: 34px; }.view.active-view { display: block; }.page-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 28px; }.page-heading h2 { font-size: 28px; }.page-heading p { color: var(--ink-soft); margin: 7px 0 0; }.tabs { border-bottom: 1px solid var(--line); display: flex; gap: 25px; margin-bottom: 18px; }.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft); font-size: 12px; font-weight: 800; padding: 0 1px 13px; }.tab.active { border-bottom-color: var(--green); color: var(--ink); }.tab b { background: #e8eeeb; border-radius: 20px; color: var(--ink-soft); font-family: 'DM Mono', monospace; font-size: 9px; margin-left: 5px; padding: 2px 6px; }.tab.active b { background: var(--green-soft); color: var(--green); }
.approval-table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }.approval-table { border-collapse: collapse; min-width: 650px; width: 100%; }.approval-table th { color: var(--ink-soft); font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-align: left; text-transform: uppercase; }.approval-table th, .approval-table td { border-bottom: 1px solid var(--line); padding: 16px 19px; }.approval-table tr:last-child td { border-bottom: 0; }.driver-name { align-items: center; display: flex; gap: 10px; }.driver-name strong { font-size: 12px; }.driver-name small { color: var(--ink-soft); display: block; font-size: 10px; }.table-actions { display: flex; gap: 7px; }.icon-btn { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); display: inline-flex; height: 29px; justify-content: center; width: 31px; }.icon-btn:hover { border-color: var(--green); color: var(--green); }.icon-btn.approve:hover { background: var(--green-soft); }.icon-btn.reject:hover { background: var(--red-soft); color: var(--red); }
.driver-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.driver-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 21px; }.driver-card .driver-name { margin-bottom: 20px; }.driver-detail { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; padding-top: 13px; }.driver-detail i { color: var(--green); margin-right: 6px; width: 12px; }.driver-card .status-badge { margin-top: 14px; }
.post-editor { max-width: 820px; }.form-grid { display: grid; gap: 18px; grid-template-columns: .55fr 1.45fr; }.post-editor .btn { margin-top: 2px; }.posts-list { margin-top: 18px; }.post-item { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 14px 0; }.post-item strong { font-size: 12px; }.post-item small { color: var(--green); display: block; font-size: 10px; margin-top: 4px; }.delete-btn { background: var(--red-soft); border: 0; border-radius: 6px; color: var(--red); font-size: 10px; font-weight: 800; padding: 8px 11px; }.delete-btn:hover { background: #f8d7d3; }
.security-panel { max-width: 720px; }.security-intro { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 14px; margin-bottom: 25px; padding-bottom: 22px; }.security-icon { align-items: center; background: var(--green-soft); border-radius: 10px; color: var(--green); display: flex; font-size: 18px; height: 42px; justify-content: center; width: 42px; }.security-intro h3 { font-size: 14px; margin: 0; }.security-intro p { color: var(--ink-soft); font-size: 11px; margin: 3px 0 0; }.password-form { max-width: 420px; }.password-form .btn { margin-top: 4px; }
.loading-state, .empty-state { color: var(--ink-soft); font-size: 12px; padding: 28px 0; text-align: center; }
.modal-overlay { align-items: center; background: rgba(19, 43, 56, .78); backdrop-filter: blur(4px); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 999; }
.modal-overlay.hidden { display: none !important; }
.modal-card { animation: modalPop .2s ease-out; background: var(--white); border-radius: 18px; box-shadow: 0 25px 80px rgba(0,0,0,.28); max-height: 90vh; max-width: 560px; overflow-y: auto; padding: 32px; position: relative; width: 100%; }
@keyframes modalPop { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.tag-company { background: var(--amber-soft); color: #8e5706; border-radius: 4px; display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 7px; }
.tag-dept { background: #edf2f7; color: #475569; border-radius: 4px; display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; }
.metric-grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin: 18px 0; }
@media (max-width: 1100px) { .metric-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .sidebar { width: 218px; }.dashboard-main { padding: 0 24px 40px; }.content-grid { grid-template-columns: 1fr; }.driver-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .sidebar { box-shadow: 10px 0 30px rgba(0,0,0,.12); left: 0; position: fixed; top: 0; transform: translateX(-100%); transition: transform .25s; z-index: 10; }.sidebar.open { transform: translateX(0); }.dashboard-main { padding: 0 16px 35px; }.topbar { min-height: 82px; }.mobile-menu { display: block; }.topbar > div:nth-child(2) { margin-right: auto; }.topbar-kicker { font-size: 8px; }.topbar h1 { font-size: 19px; }.status-dot { display: none; }.welcome-panel { padding: 25px 21px; }.welcome-panel h2 { font-size: 21px; }.welcome-mark { height: 55px; margin-right: 0; width: 55px; }.metric-grid, .metric-grid-4 { gap: 9px; grid-template-columns: 1fr 1fr; }.metric-card { min-height: 118px; padding: 15px 13px; }.metric-label { font-size: 9px; line-height: 1.3; }.metric-card strong { font-size: 26px; margin: 13px 0 9px; }.metric-note { font-size: 8px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }.page-heading h2 { font-size: 23px; }.form-grid, .driver-grid { grid-template-columns: 1fr; }.login-card { padding: 31px 24px; }.modal-card { padding: 24px 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }