/* OctanePOS Admin Workspace — professional editorial application shell
 * Presentation-only, layered AFTER existing styles.
 * No routes, permissions, commands, data fields, or API contract are changed.
 * Client UI has no development/security commentary.
 */
:root {
  --bg:#f5f6f8; --surface:#fff; --card:#fff;
  --border:#dce1e8; --border2:#ebedf1;
  --fg:#202c3b; --fg2:#59697b; --fg3:#7b8796;
  --accent:#296cb7; --accent2:#1e568f; --blue:#296cb7;
  --green:#1d7859; --red:#af3745; --purple:#555d82;
  --mono:'Cascadia Code','Consolas','IBM Plex Mono',monospace;
  --sans: 'Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
  --radius:3px; --sidebar:244px;
  --shadow:0 1px 2px rgba(26,39,59,.04);
}
html {font-size:14px}
body {background:var(--bg);font-family:var(--sans);color:var(--fg);line-height:1.42;font-size:13px;letter-spacing:0}
button,input,select,textarea {font-family:inherit}
:focus-visible {outline:2px solid #3579c4;outline-offset:2px}
.app-layout {background:var(--bg)}
.app-main {background:var(--bg); scrollbar-gutter:auto}
.app-main::-webkit-scrollbar,.sidebar-nav::-webkit-scrollbar {width:9px}
.app-main::-webkit-scrollbar-thumb {background:#c5ccd6;border-radius:8px;border:2px solid var(--bg)}
/* NAVIGATION — compact utilitarian shell, not a tiled dashboard */
.op-modern-sidebar,.sidebar {background:#202833;border-right:1px solid #202a36;color:#e7ebf1;box-shadow:none}
.op-modern-sidebar .sidebar-brand,.sidebar-brand {background:#202833;border-bottom:1px solid #39414a;min-height:76px;padding:17px 36px 16px 17px;gap:10px}
.op-modern-sidebar .brand-icon,.sidebar-brand .brand-icon {width:39px;height:39px;flex:0 0 39px;opacity:.95}
.op-modern-sidebar .brand-name,.sidebar-brand .brand-name {font-size:17px;font-weight:650;letter-spacing:-.55px;color:#f8fafc}
.op-modern-sidebar .brand-sub,.sidebar-brand .brand-sub {font-size:10px;font-weight:500;letter-spacing:.055em;color:#9eacbd;margin-top:3px}
.op-modern-sidebar .sidebar-nav,.sidebar-nav {padding:12px 8px 18px;scrollbar-color:#566575 #202833}
.op-modern-sidebar .op-sidebar-group {margin-top:12px}
.op-modern-sidebar .op-sidebar-heading {padding:9px 11px 5px 13px;color:#8496a9;font-size:10px;letter-spacing:.075em;font-weight:600}
.op-modern-sidebar .nav-item,.sidebar-nav .nav-item {border:0;border-left:2px solid transparent;border-radius:3px;min-height:37px;margin:1px 0;padding:7px 11px;gap:10px;color:#bac5d2;font-size:12.5px;font-weight:500;transition:background-color .12s,color .12s}
.op-modern-sidebar .nav-label,.sidebar-nav .nav-label {font-size:12.5px;font-weight:500}
.op-modern-sidebar .nav-icon {color:#94a3b4;width:18px;min-width:18px}
.op-modern-sidebar .nav-icon svg {width:17px;height:17px;stroke-width:1.75px}
.op-modern-sidebar .nav-item:hover,.sidebar-nav .nav-item:hover {background:#2a3440;color:#fff}
.op-modern-sidebar .nav-item.active,.sidebar-nav .nav-item.active {background:#334357;border-left-color:#89b9ef;color:#fff}
.op-modern-sidebar .nav-item.active .nav-icon {color:#c2dcf8}
.op-modern-sidebar .sidebar-footer,.sidebar-footer {background:#1c242e;border-top:1px solid #3a4652;padding:11px 12px;min-height:63px}
.op-modern-sidebar .user-avatar,.user-avatar {background:#44586e;color:#eef5fc;border-radius:3px;width:32px;height:32px;flex:0 0 32px}
.user-name {font-size:12px;font-weight:600}
.user-role {font-size:10.5px;color:#9daec0}
.op-modern-sidebar .logout-btn,.logout-btn {background:transparent;border:1px solid #4b5a6b;border-radius:3px;color:#ced8e4}
.op-modern-sidebar .logout-btn:hover {background:#334050;border-color:#66778b}
.op-modern-sidebar .op-collapse {color:#a5b5c6;top:20px;border-radius:2px}
.op-modern-sidebar .op-collapse:hover {background:#34414f;border-color:#495b6c}
.op-modern-sidebar.op-collapsed {width:66px;min-width:66px}
.op-modern-sidebar.op-collapsed .sidebar-brand {background:#202833}
.op-modern-sidebar.op-collapsed .sidebar-nav {padding:10px 7px}
/* CONTENT RHYTHM */
.page,.dashboard-page {max-width:none;padding:24px 28px 42px}
.page-header,.dashboard-hero {margin-bottom:18px;padding:0 0 16px;border-bottom:1px solid var(--border);align-items:center}
.page-title {font-size:21px;font-weight:650;letter-spacing:-.5px;line-height:1.25;color:#202f40}
.page-sub {font-size:12px;color:#6b7a8a;margin-top:4px}
.section-title,.settings-section-title {font-size:11px;color:#4b586b;font-weight:700;letter-spacing:.045em;text-transform:uppercase;margin-top:24px}
.page-action {align-items:center}
/* compact flat panels, no decorative gradient or floating cards */
.card,.stat-card,.report-card,.fuel-card,.price-chip,.dashboard-panel,.dash-alert-v2,.settings-section {background:#fff;border:1px solid var(--border);border-radius:3px;box-shadow:var(--shadow)}
.card {overflow:hidden}
.stat-grid {gap:10px;margin-bottom:16px}
.stat-card {padding:15px 16px}
.stat-label,.price-fuel {color:#687686;font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase}
.stat-value {font-family:var(--sans);font-size:24px;font-weight:650;letter-spacing:-.8px;color:#24364b;margin-top:6px}
.stat-sub {font-size:11px;color:#7a8797}
.price-chip,.fuel-card {padding:15px 16px}
/* dashboard */
.dashboard-hero {align-items:flex-end}
.dashboard-eyebrow,.dashboard-panel-kicker {color:#708092;font-size:10px;font-weight:650;letter-spacing:.08em}
.dashboard-title {font-size:25px;font-weight:650;letter-spacing:-.8px;color:#1b2e41}
.dashboard-subtitle {color:#667586;font-size:12px}
.dashboard-live-state {background:#f1f4f7;color:#526477;border:1px solid #dce3e9;border-radius:3px;font-size:10px;font-weight:600;padding:6px 9px;min-height:30px}
.dashboard-live-dot {width:6px;height:6px}
.dashboard-kpi-grid {border:1px solid var(--border);border-radius:3px;box-shadow:none;gap:0;background:#fff;overflow:hidden;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:17px}
.dash-kpi {background:#fff;border:0;border-right:1px solid var(--border);padding:18px 19px;box-shadow:none}
.dash-kpi::before {display:none!important}
.dash-kpi-value {font-family:var(--sans);font-size:27px;font-weight:650;letter-spacing:-.8px;margin-top:6px;color:#253549}
.dash-kpi-label {font-size:11px;font-weight:600;color:#68778a}
.dash-kpi-note {font-size:11px;color:#778497;margin-top:5px}
.dashboard-main-grid {gap:13px}
.dashboard-panel {min-width:0;overflow:hidden}
.dashboard-panel-head {padding:14px 17px;border-bottom:1px solid var(--border2)}
.dashboard-panel-head h2,.dashboard-section-head h2 {font-size:14px;font-weight:650;color:#253649;letter-spacing:-.2px}
.dashboard-panel-kicker {font-size:10px;color:#8190a0}
.dashboard-price-row {min-height:59px;padding:12px 15px;border-color:var(--border2)}
.dashboard-price-row::before {display:none}
.dashboard-price-value {font-size:15px;font-weight:650;color:#26374b}
.dashboard-price-date {font-size:10px;color:#8490a0}
.dashboard-section-head {padding:13px 0 9px}
.dash-alert-grid-v2 {gap:10px}
.dash-alert-v2 {background:#fff;box-shadow:none}
.dash-alert-v2-head {padding:12px 14px}
.dash-alert-v2-body {padding:0 14px 9px}
.dashboard-clear-state {background:#fff;border:1px solid var(--border);border-radius:3px;padding:14px}
.dashboard-clear-mark {border-radius:3px}
/* tables — deliberately denser, legible, predictable */
.tbl,.dashboard-table,.vr-admin-table {font-family:var(--sans);font-size:12.5px;color:#26384c}
.tbl th,.vr-admin-table th {background:#f7f8fa;border-bottom:1px solid #d7dde5;color:#617184;font-size:10.5px;letter-spacing:.025em;font-weight:650;padding:10px 12px;white-space:nowrap}
.tbl td,.vr-admin-table td {padding:10px 12px;border-bottom:1px solid #edf0f3;color:#28394c;vertical-align:middle;background:#fff;font-size:12.5px}
.tbl tbody tr:nth-child(even) td {background:#fbfcfd}
.tbl tbody tr:hover td,.vr-admin-table tbody tr:hover td {background:#f1f5fa}
.tbl .cell-name,.tbl .dashboard-customer-cell {font-weight:600}
.tbl .cell-sub {font-size:11px;color:#758395}
.tbl .mono,.tbl .dashboard-money,.total-chip strong,.detail-stat-val {font-variant-numeric:tabular-nums;font-family:var(--sans)}
.row-voided {opacity:.72}
.table-scroll,.dashboard-table-wrap {max-width:100%;overflow-x:auto;overflow-y:auto;scrollbar-color:#b9c4d0 transparent}
/* forms/actions */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.act-btn,.pg-btn,.inp,.search-inp,.modal-box {border-radius:3px;box-shadow:none;letter-spacing:0}
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger {font-size:12px;font-weight:600;min-height:35px;padding:8px 13px}
.btn-primary {background:#2b6db3;border-color:#2b6db3;color:#fff}
.btn-primary:hover:not(:disabled) {background:#235b96;border-color:#235b96}
.btn-secondary {background:#fff;border:1px solid #c9d1db;color:#2e4761}
.btn-secondary:hover {background:#f2f5f9;border-color:#9caec1}
.btn-ghost {background:transparent;border:1px solid #d5dce4;color:#4b6074}
.btn-ghost:hover {background:#f4f6f9}
.btn-danger {background:#fff7f7;color:#aa3543;border:1px solid #dfbdc1}
.btn-danger:hover:not(:disabled) {background:#ffecee}
.act-btn,.pg-btn {min-height:28px;padding:5px 9px;background:#fff;border:1px solid #cdd6df;color:#315a7e;font-size:11.5px;font-weight:600}
.act-btn:hover,.pg-btn:hover:not(:disabled) {background:#f0f5fb;border-color:#93acc5}
.pagination {background:#fff;border-color:var(--border)}
.pg-info {color:#778594;font-size:11px}
.toolbar {gap:8px;margin:0 0 12px;align-items:center}
.filter-row {gap:11px;background:#fafbfd;border:1px solid #e4e9ef;padding:12px;border-radius:3px}
.field {gap:5px}
.field-label {font-size:11px;letter-spacing:0;font-weight:600;color:#536477}
.inp,.search-inp,select.inp,textarea.inp {font-size:12.5px;min-height:35px;padding:7px 10px;background:#fff;border:1px solid #cbd5df;color:#24384e}
.inp:focus,.search-inp:focus {outline:2px solid #bddefa;outline-offset:0;border-color:#3977bd;box-shadow:none}
.inp::placeholder,.search-inp::placeholder {color:#9aa6b5}
.inp:disabled {background:#f1f3f6;color:#788697}
input[type=checkbox],input[type=radio] {accent-color:#326eae}
/* status text stays readable; no large colorful pills */
.badge {font-size:10px;letter-spacing:0;font-weight:650;padding:3px 7px;border-radius:2px}
.badge-green {background:#ecf5f0;color:#21664e}
.badge-red {background:#fbedef;color:#9c3745}
.badge-blue {background:#edf3f9;color:#2a5b88}
.badge-default {background:#f0f2f5;color:#536275}
.totals-bar {background:#fff;border:1px solid var(--border);border-radius:3px;box-shadow:none;gap:0}
.total-chip {padding:12px 17px;border-color:#e8edf2}
.total-chip span {font-size:11px;color:#67788b}
.total-chip strong {font-size:16px;font-weight:650;color:#27384c}
.report-card {padding:17px}
.report-tabs {border-color:var(--border)}
.tab-btn {color:#627489;font-size:12px;font-weight:600;border-bottom-width:2px}
.tab-btn.active {color:#2a6dad;border-bottom-color:#2a6dad}
.settings-section {padding:19px 21px}
.settings-section-title {margin-top:0;font-size:12px}
.detail-stat,.balance-display {border-radius:3px}
.balance-display {background:#f1f6fa;border-color:#d1e0ec}
.detail-key {color:#6e7e90}
.detail-val {color:#28394c}
.alert {border-radius:3px;font-size:12px}
.empty-state {background:#fff;padding:27px}
.empty-icon {opacity:.72}
.empty-msg {font-size:13px}
.empty-sub {font-size:11.5px}
/* Overlays retain intended positions and scroll behavior */
.modal-backdrop {background:rgba(17,28,43,.55)}
.modal-box {background:#fff;box-shadow:0 22px 75px rgba(10,20,34,.20);border:1px solid #d7dfe7;max-height:94vh}
.modal-header {background:#f9fafb;border-bottom:1px solid #e1e6eb;padding:15px 18px}
.modal-header h2,.modal-title {font-size:16px;font-weight:650;letter-spacing:-.25px}
.modal-body {padding:18px 20px}
.modal-close {border-radius:2px}
/* Vehicle approvals and specialized integrations */
.vr-admin-alert {border-radius:3px;margin:15px 0 0;padding:12px 15px;background:#fff}
.vr-admin-controls {margin:15px 0;gap:15px}
.vr-admin-table td,.vr-admin-table th {padding:9px 10px}
.vr-admin-date {white-space:nowrap}
.vr-decision textarea {border-radius:3px;min-height:60px}
.vr-decision-buttons button {min-height:30px;padding:6px 9px;font-size:11.5px}
.vr-admin-pagination {font-size:11px}
/* Login: desktop software rather than marketing landing page */
.login-page {background:#eef1f5;background-image:none}
.login-card {width:min(405px,94vw);padding:32px 34px 31px;border-radius:4px;box-shadow:0 14px 45px rgba(21,35,52,.10);border:1px solid #d4dce5}
.login-icon {height:58px;width:80px;margin-bottom:9px}
.login-logo {margin-bottom:25px}
.login-title {font-size:24px;font-weight:650;letter-spacing:-.7px;color:#253749}
.login-sub {font-size:10.5px;font-weight:600;letter-spacing:.075em;color:#7a8b9c}
.login-card .field-label {font-size:11.5px;color:#4a5d71}
.login-card .inp {min-height:40px;font-size:13px}
.login-card .btn-primary {min-height:40px;font-size:13px}
@media(max-width:1400px){
 .dashboard-main-grid {grid-template-columns:minmax(0,1fr)}
 .dash-alert-grid-v2 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
 .page,.dashboard-page {padding:22px 21px 33px}
 .dashboard-kpi-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .dash-kpi:nth-child(2) {border-right:0}
 .dash-kpi:nth-child(-n+2) {border-bottom:1px solid var(--border)}
 .dashboard-price-list {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
 .app-layout {height:auto;min-height:100dvh;overflow:visible;flex-direction:column}
 .op-modern-sidebar,.op-modern-sidebar.op-collapsed,.sidebar {width:100%;min-width:0;border-right:0;border-bottom:1px solid #343e49}
 .op-modern-sidebar .sidebar-brand,.op-modern-sidebar.op-collapsed .sidebar-brand {background:#202833;min-height:57px;padding:8px 14px}
 .op-modern-sidebar .sidebar-nav,.op-modern-sidebar.op-collapsed .sidebar-nav {display:flex;overflow-x:auto;overflow-y:hidden;gap:4px;padding:7px 9px;flex-direction:row}
 .op-modern-sidebar .op-sidebar-group,.op-modern-sidebar.op-collapsed .op-sidebar-group {display:contents}
 .op-modern-sidebar .nav-item,.op-modern-sidebar.op-collapsed .nav-item {flex:0 0 auto;min-height:34px;padding:6px 10px;border:1px solid #425161;border-bottom:2px solid transparent;white-space:nowrap;gap:7px}
 .op-modern-sidebar .nav-item.active {border-color:#637e99;border-bottom-color:#96bfe5;background:#354a5f}
 .op-modern-sidebar.op-collapsed .nav-label,.op-modern-sidebar.op-collapsed .op-brand-copy {display:block}
 .op-modern-sidebar .sidebar-footer {display:none}
 .page,.dashboard-page {padding:16px 14px 28px}
 .page-header {flex-direction:column;align-items:flex-start;gap:9px}
 .app-main {overflow:visible}
 .dashboard-price-list {grid-template-columns:1fr}
 .dash-alert-grid-v2 {grid-template-columns:1fr}
 .modal-box {max-width:96vw}
}
@media(max-width:530px){
 .dashboard-kpi-grid {grid-template-columns:1fr}
 .dash-kpi {border-right:0;border-bottom:1px solid var(--border)}
 .dashboard-title {font-size:21px}
 .page-title {font-size:20px}
 .login-card {padding:27px 21px}
}
@media(prefers-reduced-motion:reduce){* {transition-duration:.01ms!important;animation-duration:.01ms!important}}