/* OctanePOS Admin Workspace E4a — visual refinement layered after E4.
   Styling only: existing fields, business rules, tables and actions unchanged. */
:root {
  --bg:#f1f5fa; --surface:#ffffff; --card:#ffffff;
  --border:#d9e2ed; --border2:#e7edf4;
  --fg:#15283e; --fg2:#546981; --fg3:#76899e;
  --accent:#2566bc; --accent2:#174d99; --blue:#2566bc;
  --green:#167957; --red:#b13b4c; --purple:#6e57a3;
  --radius:6px;
  --shadow:0 2px 12px rgba(25,57,93,.055);
}
body,.app-layout,.app-main {background:#f1f5fa;color:#172b42}
.app-main {background-image:linear-gradient(180deg,#f8fbff 0,#f1f5fa 170px);background-repeat:no-repeat}
/* Application navigation: dark blue, distinctly branded, not flat charcoal */
.op-modern-sidebar,.sidebar {background:#142840;border-right:1px solid #193550;box-shadow:3px 0 16px rgba(15,40,70,.08)}
.op-modern-sidebar .sidebar-brand,.sidebar-brand {background:linear-gradient(115deg,#10253d,#1a3d61);border-bottom:1px solid #2a4b68}
.op-modern-sidebar .brand-name,.sidebar-brand .brand-name {color:#ffffff;font-weight:750}
.op-modern-sidebar .brand-sub,.sidebar-brand .brand-sub {color:#a9c8e9}
.op-modern-sidebar .sidebar-nav,.sidebar-nav {scrollbar-color:#506c87 #142840}
.op-modern-sidebar .op-sidebar-heading {color:#8eb1d5;font-weight:750}
.op-modern-sidebar .nav-item,.sidebar-nav .nav-item {color:#c5d6e8;border-radius:5px;min-height:39px;margin:2px 0;transition:background-color .15s,border-color .15s,color .15s}
.op-modern-sidebar .nav-item:hover,.sidebar-nav .nav-item:hover {background:#203d5a;color:#ffffff}
.op-modern-sidebar .nav-item.active,.sidebar-nav .nav-item.active {background:#24538a;border-left:3px solid #56bfea;color:#fff;box-shadow:inset 0 0 0 1px rgba(133,201,255,.10)}
.op-modern-sidebar .nav-item.active .nav-icon {color:#a7e5f8}
.op-modern-sidebar .sidebar-footer,.sidebar-footer {background:#102238;border-top:1px solid #31506c}
.op-modern-sidebar .user-avatar,.user-avatar {background:#225286;color:#ffffff}
.op-modern-sidebar .logout-btn,.logout-btn {border-color:#517290;color:#e1ecf8}
.op-modern-sidebar .logout-btn:hover {background:#244868}
/* Page hierarchy: stronger but still restrained */
.page,.dashboard-page {padding-top:26px}
.page-header,.dashboard-hero {border-bottom:1px solid #d1ddeb;padding-bottom:18px;margin-bottom:20px}
.page-title {font-size:23px;color:#132a45;font-weight:750}
.page-sub {color:#657a91}
.dashboard-title {color:#142f4f;font-size:27px;font-weight:750}
.dashboard-eyebrow,.dashboard-panel-kicker {color:#2b6cb5;font-weight:750}
.dashboard-subtitle {color:#5f7892}
.section-title,.settings-section-title {color:#2c5683}
/* Clean surfaces, purposeful colour: no gradient inside every card */
.card,.stat-card,.report-card,.fuel-card,.price-chip,.dashboard-panel,.dash-alert-v2,.settings-section {border-color:#d8e3ee;border-radius:7px;box-shadow:0 3px 12px rgba(22,55,90,.045)}
.dashboard-kpi-grid {border:0;box-shadow:none;gap:11px;background:transparent;overflow:visible;grid-template-columns:repeat(4,minmax(0,1fr))}
.dash-kpi {position:relative;border:1px solid #dce5ef!important;border-radius:7px;background:#ffffff;padding:20px 19px 18px;box-shadow:0 3px 12px rgba(23,56,88,.05);overflow:hidden}
.dash-kpi::before {display:block!important;content:'';position:absolute;left:0;top:0;right:0;height:3px;background:#2775c7}
.dash-kpi:nth-child(4n+2)::before {background:#169a88}
.dash-kpi:nth-child(4n+3)::before {background:#d59a37}
.dash-kpi:nth-child(4n+4)::before {background:#7860b6}
.dash-kpi-value,.stat-value {color:#153355;font-weight:750}
.dash-kpi-label,.stat-label {color:#61768e;font-weight:650}
.dashboard-live-state {background:#eaf6f1;border:1px solid #c7e5d8;color:#1a765d}
.dashboard-live-dot {background:#27a47a}
.stat-card {border-top:3px solid #307acc}
.stat-card:nth-child(4n+2) {border-top-color:#159a8b}
.stat-card:nth-child(4n+3) {border-top-color:#d59938}
.stat-card:nth-child(4n+4) {border-top-color:#806cb9}
.dashboard-panel-head {background:#fbfdff;border-bottom:1px solid #e1e8f0;padding:15px 18px}
.dashboard-panel-head h2,.dashboard-section-head h2 {color:#193959;font-weight:750}
.dashboard-price-row {padding:13px 16px}
.dashboard-price-row:hover {background:#f5faff}
.dashboard-price-value {color:#204d79;font-weight:750}
.dashboard-clear-state {border-color:#d9e5f0;border-radius:7px;background:#fafdff}
/* Tables: strong header separation, precise scanning, restrained row hover */
.tbl th,.vr-admin-table th {background:#edf3f9;color:#335775;border-bottom:1px solid #ccdae8;font-weight:750;font-size:11px;padding:11px 12px}
.tbl td,.vr-admin-table td {border-bottom-color:#e8eef5}
.tbl tbody tr:nth-child(even) td {background:#fbfdff}
.tbl tbody tr:hover td,.vr-admin-table tbody tr:hover td {background:#eaf4ff}
.tbl .cell-name,.tbl .dashboard-customer-cell {color:#173a60;font-weight:700}
/* Controls: an identifiable primary action and calm secondaries */
.btn-primary {background:#256bbc;border-color:#256bbc;box-shadow:0 2px 5px rgba(35,100,179,.14);border-radius:5px}
.btn-primary:hover:not(:disabled) {background:#19579f;border-color:#19579f;box-shadow:0 3px 9px rgba(35,100,179,.20)}
.btn-secondary,.btn-ghost,.btn-danger,.act-btn,.pg-btn {border-radius:5px}
.btn-secondary {background:#f9fbfe;color:#204c7b}
.btn-ghost:hover,.act-btn:hover,.pg-btn:hover {background:#ebf5ff}
.inp,.search-inp,select.inp,textarea.inp {border-color:#c6d5e5;border-radius:5px;min-height:36px}
.inp:focus,.search-inp:focus {border-color:#236bb9;outline:2px solid #c1e1ff}
.filter-row {background:#f9fbff;border:1px solid #dce6f0;border-radius:7px}
.totals-bar {border-radius:7px;border-color:#d3e2f0;background:#fafdff}
.total-chip strong {color:#164d7e;font-weight:750}
.report-tabs {border-color:#d5e2ee}
.tab-btn.active {color:#236ab4;border-bottom-color:#236ab4}
.badge-green {background:#e7f6ef;color:#147252}
.badge-red {background:#fff0f1;color:#a12f42}
.badge-blue {background:#e8f2fd;color:#205e9c}
.balance-display {background:#edf6ff;border-color:#c4dff2;border-radius:6px}
.modal-box {border-radius:9px;box-shadow:0 24px 75px rgba(12,32,56,.24)}
.modal-header {background:#f4f8fc}
.modal-header h2,.modal-title {color:#173c64}
/* Login: subtle product identity, not a bland login form */
.login-page {background:linear-gradient(135deg,#e8f1fa 0%,#f7f9fc 55%,#eef4f9 100%)}
.login-card {border-top:4px solid #266eba;border-radius:9px;box-shadow:0 20px 55px rgba(18,52,91,.13)}
.login-title {color:#143557;font-weight:750}
/* Preserve E4 responsiveness, avoid forced wide layouts */
@media(max-width:1100px){
 .dashboard-kpi-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .dash-kpi:nth-child(n) {border:1px solid #dce5ef}
}
@media(max-width:800px){
 .op-modern-sidebar,.op-modern-sidebar.op-collapsed,.sidebar {box-shadow:none}
 .op-modern-sidebar .sidebar-brand,.op-modern-sidebar.op-collapsed .sidebar-brand {background:#142f4d}
 .op-modern-sidebar .nav-item.active {background:#26598f;border-bottom-color:#73d1e9}
 .page,.dashboard-page {padding:17px 14px 27px}
}
@media(max-width:530px){
 .dashboard-kpi-grid {grid-template-columns:1fr}
 .dashboard-title {font-size:23px}
 .page-title {font-size:21px}
}