@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--bg:#f6f7fb;--panel:#fff;--panel-soft:#fbfcff;--ink:#111827;--muted:#697386;--line:#e7eaf0;--brand:#5b4cf6;--brand-2:#7c3aed;--nav:#101321;--nav-soft:#171b2d;--success:#159947;--warning:#d97706;--danger:#dc3545;--info:#0b78d0;--shadow:0 12px 35px rgba(16,24,40,.07);--shadow-lg:0 24px 70px rgba(16,24,40,.12);--r:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:258px;padding:18px 13px;background:linear-gradient(180deg,#0d1120 0%,#12182a 100%);color:#fff;z-index:1000;overflow-y:auto;box-shadow:20px 0 55px rgba(7,10,20,.16)}.brand{display:flex;align-items:center;gap:11px;padding:5px 9px 22px}.brand-mark{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#6757ff,#8b5cf6);font:800 13px Manrope;color:#fff;box-shadow:0 12px 28px rgba(103,87,255,.35)}.brand strong{display:block;font:800 15px Manrope;letter-spacing:-.02em}.brand small{display:block;margin-top:3px;color:#8992a8;font-size:10px}.nav-label{padding:12px 11px 7px;color:#667089;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.sidebar nav{display:grid;gap:3px}.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid transparent;border-radius:12px;color:#aeb6c8;font-size:11.5px;font-weight:600;transition:.18s}.sidebar nav a .nav-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.035);color:#8993aa}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.07)}.sidebar nav a.active .nav-icon{background:linear-gradient(135deg,#635bff,#7c3aed);color:#fff;box-shadow:0 7px 18px rgba(99,91,255,.24)}.sidebar-foot{margin-top:18px;padding:13px 9px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:8px;color:#788399;font-size:10px}.sidebar-foot strong{color:#dce1eb;display:block;font-size:10px}.sidebar-foot a{color:#ff9a9a;font-weight:700}.main{margin-left:258px;min-height:100vh}.topbar{height:72px;position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:14px;padding:0 26px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.menu-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;display:grid;place-items:center;color:#4b5563}.top-title{flex:1}.top-title strong{display:block;font:800 16px Manrope;letter-spacing:-.025em}.top-title small{display:block;margin-top:2px;color:var(--muted);font-size:10px}.top-actions{display:flex;align-items:center;gap:8px}.top-pill{padding:7px 10px;border-radius:10px;background:#f1efff;color:#4f46e5;font-size:9px;font-weight:800}.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:12px;background:#fff}.user-avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eceaff;color:#5145cd;font-size:10px;font-weight:800}.user-chip strong{display:block;font-size:10px}.user-chip small{display:block;color:var(--muted);font-size:9px}.content{max-width:1680px;margin:auto;padding:25px 26px 44px}.toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:18px}.toolbar h1,.toolbar h2,.toolbar h3{margin:0;font:800 23px Manrope;letter-spacing:-.045em}.toolbar p,.muted{margin:5px 0 0;color:var(--muted);font-size:11px}.eyebrow{font-size:9px;color:#6256d9;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.card{background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}.card>h1,.card>h2,.card>h3{margin:0;padding:19px 21px;font:800 16px Manrope;border-bottom:1px solid var(--line)}.card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px;border-bottom:1px solid var(--line)}.card-header h3{margin:0;font:800 14px Manrope;letter-spacing:-.02em}.card-header p{margin:4px 0 0;color:var(--muted);font-size:10px}.card-body{padding:19px}.welcome-card{position:relative;overflow:hidden;margin-bottom:18px;padding:27px 29px;border-radius:22px;color:#fff;background:linear-gradient(120deg,#111629 0%,#302a86 45%,#6548dc 100%);box-shadow:0 22px 55px rgba(60,50,170,.2)}.welcome-card:before{content:"";position:absolute;right:-70px;top:-150px;width:330px;height:330px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.018)}.welcome-card h2{position:relative;margin:0;font:800 25px Manrope;letter-spacing:-.04em}.welcome-card p{position:relative;margin:6px 0 0;color:#c9cde0;font-size:11px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}.kpi-card,.kpi{position:relative;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.kpi-card:after{content:"";position:absolute;right:-35px;bottom:-55px;width:100px;height:100px;border-radius:50%;background:#f5f3ff}.kpi-top{display:flex;align-items:center;justify-content:space-between}.kpi-label,.kpi span{font-size:10px;color:var(--muted);font-weight:700}.kpi-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f0eeff;color:#5848e9;font-weight:800;position:relative;z-index:1}.kpi-card.success .kpi-icon{background:#e9f9ef;color:var(--success)}.kpi-card.warning .kpi-icon{background:#fff5e6;color:var(--warning)}.kpi-card.danger .kpi-icon{background:#fff0f1;color:var(--danger)}.kpi-value,.kpi strong,.metric{display:block;margin-top:12px;font:800 23px Manrope;letter-spacing:-.045em}.kpi-meta{margin-top:4px;color:#98a0b1;font-size:9px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.section-title h3{margin:0;font:800 14px Manrope}.section-title span{font-size:9px;color:#8b93a5}.quick-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}.quick-action{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:0 6px 22px rgba(16,24,40,.035);transition:.18s}.quick-action:hover{transform:translateY(-2px);border-color:#d5d1ff;box-shadow:var(--shadow)}.quick-action-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#f0eeff;color:#5a4ce7;font-weight:800}.quick-action strong{display:block;font-size:11px}.quick-action small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.dashboard-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;margin-bottom:16px}.chart{min-height:250px;display:flex;align-items:center;justify-content:center;color:#98a0b1;font-size:11px;background:linear-gradient(180deg,#fff,#fbfcff);background-image:linear-gradient(#f0f1f5 1px,transparent 1px),linear-gradient(90deg,#f0f1f5 1px,transparent 1px);background-size:100% 48px,48px 100%}.status-list{padding:16px;display:grid;gap:9px}.status-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #edf0f5;border-radius:12px;background:#fff}.status-dot{width:8px;height:8px;border-radius:50%;background:#5b4cf6}.status-info{flex:1}.status-info strong{display:block;font-size:11px}.status-info small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.status-count{font-weight:800;font-size:12px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.table-wrap,.table-wrapper{width:100%;overflow:auto}.table,.table-wrap table{width:100%;border-collapse:collapse}.table th,.table-wrap th{padding:11px 14px;background:#fafbfc;color:#7b8495;text-align:left;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line);white-space:nowrap}.table td,.table-wrap td{padding:12px 14px;border-bottom:1px solid #f0f2f5;white-space:nowrap;font-size:11px}.table tbody tr:hover td,.table-wrap tbody tr:hover td{background:#fcfcff}.table td strong{font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 13px;border:1px solid transparent;border-radius:10px;background:#eeecff;color:#4d40c7;font-size:11px;font-weight:800;transition:.18s}.btn:hover{transform:translateY(-1px)}.btn.primary,.btn-primary{color:#fff;background:linear-gradient(135deg,#5b4cf6,#7c3aed);box-shadow:0 9px 22px rgba(91,76,246,.2)}.btn.success,.btn-success{background:#159947;color:#fff}.btn.danger,.btn-danger{background:#dc3545;color:#fff}.btn.warn{background:#d97706;color:#fff}.btn.secondary,.btn-light{background:#fff;border-color:var(--line);color:#374151}.btn-sm{min-height:32px;padding:6px 10px;font-size:10px}.full{width:100%}.form{display:grid;gap:13px;padding:19px}.form label,.form-grid label{display:grid;gap:6px;color:#374151;font-size:10px;font-weight:800}.form input,.form select,.form textarea,.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.card input,.card select,.card textarea{width:100%;min-height:41px;padding:9px 11px;border:1px solid #dfe3ea;border-radius:10px;background:#fff;color:#111827;outline:none;font-size:11px;transition:.15s}.form input:focus,.form select:focus,.form textarea:focus,.card input:focus,.card select:focus,.card textarea:focus{border-color:#a59cfb;box-shadow:0 0 0 3px rgba(91,76,246,.1)}.form textarea,.card textarea{min-height:95px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:19px}.form-grid label:has(textarea){grid-column:1/-1}.alert{margin:13px 19px;padding:11px 13px;border-radius:10px;border:1px solid #dbeafe;background:#eff6ff;color:#1e40af;font-size:11px}.alert.danger{border-color:#fecaca;background:#fff1f2;color:#a51d2d}.alert.ok,.alert.success{border-color:#b9ebc9;background:#effbf3;color:#147b39}.alert.warning{border-color:#fde4ae;background:#fff8e8;color:#9a5a00}.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#eeecff;color:#4d40c7;font-size:9px;font-weight:800}.badge-success,.badge.ok{background:#ddf7e6;color:#137333}.badge-warning,.badge.warn{background:#fff0cf;color:#9a5a00}.badge-danger,.badge.danger{background:#ffe1e5;color:#a51d2d}.badge-neutral{background:#eef1f5;color:#596273}.pos-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:15px}.sticky-pos{position:sticky;top:90px;height:max-content;padding:19px}.summary{display:grid;gap:8px;padding:14px;background:#fafbfe;border:1px solid #edf0f4;border-radius:12px;margin:15px 0}.summary div{display:flex;justify-content:space-between;gap:12px;font-size:11px}.table-wrap table{min-width:700px}.inline-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.toolbar.compact{margin:13px 19px}.empty{text-align:center;padding:42px;color:#98a0b1}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.invoice{max-width:1000px;margin:auto}.invoice-head{padding:24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}.mobile-bottom{display:none}
/* Premium login */.login-page{min-height:100vh;background:#0b0e18;color:#fff;overflow:auto}.login-page:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 20%,rgba(91,76,246,.25),transparent 30%),radial-gradient(circle at 85% 75%,rgba(124,58,237,.22),transparent 32%);pointer-events:none}.login-grid{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;max-width:1280px;margin:auto;padding:30px;gap:30px;align-items:center}.login-visual{position:relative;min-height:620px;padding:46px 34px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:0 30px 100px rgba(0,0,0,.25)}.login-visual:after{content:"";position:absolute;width:480px;height:480px;right:-170px;top:-180px;border-radius:50%;border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.018)}.login-brand{display:flex;align-items:center;gap:12px}.login-brand strong{font:800 16px Manrope}.login-brand small{display:block;color:#8992a8;font-size:9px;margin-top:3px}.login-visual h1{position:relative;z-index:1;margin:75px 0 14px;font:800 clamp(42px,5.5vw,72px) Manrope;line-height:.94;letter-spacing:-.065em}.login-visual h1 span{color:#9d8cff}.login-visual>p{position:relative;z-index:1;max-width:550px;color:#9ba4b8;line-height:1.7;font-size:13px}.login-metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.login-metric{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.045)}.login-metric strong{display:block;font:800 12px Manrope}.login-metric small{display:block;color:#7e879b;margin-top:4px;font-size:9px}.login-panel{width:100%;max-width:470px;margin:auto;padding:36px;border:1px solid rgba(255,255,255,.1);border-radius:27px;background:rgba(255,255,255,.97);color:#111827;box-shadow:0 35px 100px rgba(0,0,0,.34)}.login-panel h1{margin:24px 0 6px;font:800 29px Manrope;letter-spacing:-.05em}.login-panel>p{margin:0 0 23px;color:#687386;font-size:11px}.login-panel .form{padding:0;gap:15px}.login-panel .form label{font-size:10px}.login-panel .form input{min-height:47px;background:#f8f9fc;border-color:#e1e4eb}.login-panel .btn{min-height:49px;margin-top:3px}.login-meta{display:flex;justify-content:space-between;gap:10px;margin-top:16px;color:#9098a8;font-size:9px}.login-error{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:#fff0f2;color:#a51d2d;font-size:10px}.customer-shell{min-height:100vh;background:radial-gradient(circle at 90% 0,rgba(91,76,246,.1),transparent 30%),var(--bg)}.customer-nav{height:70px;background:#101321;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,6%);box-shadow:0 10px 35px rgba(16,24,40,.15)}.customer-main{max-width:1200px;margin:auto;padding:28px}.timeline{display:grid;gap:10px;padding:18px}.timeline>div{padding:13px 15px;border-left:3px solid var(--brand);background:#fafbfe;border-radius:0 11px 11px 0}.tracking-shell{max-width:850px;margin:auto;padding:30px}.tracking-status{font:800 20px Manrope}.search{max-width:340px}.mobile-bottom{display:none}@media(max-width:1100px){.sidebar{width:235px}.main{margin-left:235px}.quick-actions{grid-template-columns:repeat(3,1fr)}.login-grid{grid-template-columns:1fr .85fr}.login-visual{min-height:570px}.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.sidebar{transform:translateX(-105%);transition:.22s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.content{padding:20px 15px 88px}.topbar{padding:0 15px}.dashboard-grid,.grid,.grid-3{grid-template-columns:1fr}.pos-grid{grid-template-columns:1fr}.sticky-pos{position:static}.login-grid{grid-template-columns:1fr;max-width:560px;padding:15px}.login-visual{display:none}.login-panel{padding:28px;border-radius:22px}.mobile-bottom{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:65px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:1100;backdrop-filter:blur(16px)}.mobile-bottom a{display:grid;place-items:center;color:#697386;font-size:8px;font-weight:800}.mobile-bottom a span{font-size:16px}.mobile-bottom .center{width:46px;height:46px;margin:auto;border-radius:50%;background:linear-gradient(135deg,#5b4cf6,#7c3aed);color:#fff;box-shadow:0 10px 25px rgba(91,76,246,.28)}}@media(max-width:560px){.kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.kpi-card,.kpi{padding:14px}.kpi-value,.kpi strong,.metric{font-size:19px}.quick-actions{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr;padding:15px}.form-grid label:has(textarea){grid-column:auto}.toolbar h1{font-size:20px}.card>h1,.card>h2,.card>h3{padding:16px;font-size:15px}.card-header{padding:14px}.customer-main,.tracking-shell{padding:17px}.login-panel{padding:23px}.user-chip div:not(.user-avatar){display:none}.top-pill{display:none}}
.status{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eeecff;color:#4d40c7;font-size:10px;font-weight:800}.section-title+section{margin-bottom:20px}.card .form-grid+.btn,.card .form+.btn{margin:0 19px 19px}.card form>.btn:last-child{margin-bottom:0}.search{border-radius:10px}

/* =========================================================
   TN75 RETAIL OS — EVER SUPPORT INSPIRED UI SYSTEM v4.1
   Larger desktop scale, editorial spacing, grouped navigation,
   collapsible sidebar and consistent visual hierarchy.
   ========================================================= */
:root{--bg:#f3f2ee;--panel:#fff;--panel-soft:#faf9f6;--ink:#11110f;--muted:#6e6d68;--line:#dddcd6;--brand:#6c5ce7;--brand-2:#8b78ff;--nav:#0b0b0a;--nav-soft:#151513;--success:#159447;--warning:#b96d0c;--danger:#c93445;--shadow:0 10px 30px rgba(18,18,15,.055);--shadow-lg:0 25px 70px rgba(18,18,15,.10);--r:20px}
body{background:var(--bg);font-size:15px;color:var(--ink)}
.sidebar{width:286px;padding:20px 15px;background:#0a0a09;box-shadow:18px 0 50px rgba(0,0,0,.12);transition:width .22s ease,transform .22s ease}
.brand{padding:4px 10px 25px;gap:13px}.brand-mark{width:48px;height:48px;border-radius:14px;background:#fff;color:#0a0a09;box-shadow:none;font:900 13px Manrope;letter-spacing:-.04em}.brand strong{font-size:16px;color:#fff}.brand small{font-size:10px;color:#8f8f89}
.sidebar-scroll{height:calc(100vh - 190px);overflow-y:auto;padding-right:3px}.sidebar-scroll::-webkit-scrollbar{width:4px}.sidebar-scroll::-webkit-scrollbar-thumb{background:#2a2a27;border-radius:9px}
.nav-section-label{padding:16px 12px 7px;color:#6e6e68;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.main-nav{display:grid;gap:3px}
.nav-link,.nav-group-toggle{width:100%;display:flex;align-items:center;gap:12px;min-height:45px;padding:7px 10px;border:1px solid transparent;border-radius:12px;color:#aaa9a3;background:transparent;font-size:13px;font-weight:700;text-align:left;transition:.18s ease}.nav-link:hover,.nav-group-toggle:hover{color:#fff;background:#151513;border-color:#242421}.nav-link.active{color:#fff;background:#1b1a27;border-color:#332f4d;box-shadow:inset 3px 0 0 var(--brand)}
.nav-icon{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#151513;color:#8d8c86;font-size:14px}.nav-link.active .nav-icon,.nav-group.is-open>.nav-group-toggle .nav-icon{background:var(--brand);color:#fff}.nav-text{min-width:0;white-space:nowrap}.nav-group{display:grid}.nav-group-toggle{cursor:pointer}.nav-chevron{margin-left:auto;color:#696963;font-size:15px;transition:transform .18s}.nav-group.is-open>.nav-group-toggle{color:#fff;background:#121210}.nav-group.is-open .nav-chevron{transform:rotate(180deg);color:#fff}.nav-submenu{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .2s ease;padding-left:42px}.nav-group.is-open .nav-submenu{grid-template-rows:1fr}.nav-submenu>*{min-height:0}.nav-sublink{position:relative;display:flex;align-items:center;gap:9px;min-height:39px;padding:7px 10px;color:#8e8d87;border-left:1px solid #292925;font-size:12px;font-weight:600}.nav-sublink:hover{color:#fff}.nav-sublink.active{color:#fff}.sub-dot{width:5px;height:5px;border-radius:50%;background:#55544e;flex:0 0 5px}.nav-sublink.active .sub-dot{background:var(--brand);box-shadow:0 0 0 4px rgba(108,92,231,.12)}
.sidebar-bottom{display:grid;gap:7px;margin-top:10px;padding:12px 2px 0;border-top:1px solid #252521}.branch-card{display:flex;align-items:center;gap:9px;padding:10px 9px;border-radius:12px;background:#121210;border:1px solid #22221e}.branch-dot{width:8px;height:8px;border-radius:50%;background:#31b96a;box-shadow:0 0 0 4px rgba(49,185,106,.1)}.branch-card strong{display:block;color:#dddcd6;font-size:11px}.branch-card small{display:block;color:#74736d;font-size:9px;margin-top:2px}.sidebar-hide,.logout-link{display:flex;align-items:center;gap:10px;width:100%;min-height:39px;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#8f8e88;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none}.sidebar-hide:hover,.logout-link:hover{background:#151513;color:#fff}.hide-icon{font-size:20px;line-height:1;width:30px;text-align:center}.logout-link{color:#c88a8a}
.main{margin-left:286px;transition:margin-left .22s ease}.topbar{height:82px;padding:0 32px;background:rgba(255,255,255,.94);border-bottom:1px solid #deddd7}.menu-btn{width:42px;height:42px;border-radius:12px;background:#fff;border-color:#d8d7d1;font-size:17px}.top-title .eyebrow{display:block;margin-bottom:2px;color:#77756e;font-size:8px;letter-spacing:.18em}.top-title strong{font-size:18px}.top-title small{font-size:10px;color:#85847e}.top-actions{gap:10px}.top-pill{padding:8px 11px;background:#f1efe8;color:#1a1a17;border:1px solid #e1dfd8;border-radius:999px;font-size:9px;letter-spacing:.08em}.user-chip{padding:5px 10px 5px 5px;border-radius:14px;border-color:#deddd7}.user-avatar{width:34px;height:34px;border-radius:10px;background:#11110f;color:#fff}.user-chip strong{font-size:11px}.user-chip small{font-size:9px}
.content{max-width:none;padding:32px 38px 52px}.toolbar{margin-bottom:24px}.toolbar h1,.toolbar h2,.toolbar h3{font-size:28px}.toolbar p,.muted{font-size:12px}.eyebrow{font-size:9px}
.welcome-card{padding:34px 36px;margin-bottom:22px;border-radius:24px;background:linear-gradient(120deg,#0e0e0c 0%,#24231f 48%,#6c5ce7 100%);box-shadow:0 20px 55px rgba(26,25,22,.12)}.welcome-card h2{font-size:31px}.welcome-card p{font-size:13px;color:#d0cfca}
.kpi-grid{gap:16px;margin-bottom:24px}.kpi-card{padding:22px;border-radius:18px;min-height:150px}.kpi-label{font-size:12px}.kpi-icon{width:42px;height:42px;border-radius:12px}.kpi-value{font-size:28px;margin-top:16px}.kpi-meta{font-size:10px}
.section-title{margin-bottom:12px}.section-title h3{font-size:16px}.section-title span{font-size:10px}.quick-actions{gap:12px;margin-bottom:24px}.quick-action{padding:16px;border-radius:15px;min-height:67px}.quick-action-icon{width:40px;height:40px}.quick-action strong{font-size:12px}.quick-action small{font-size:10px}
.dashboard-grid{gap:16px;margin-bottom:18px}.card{border-radius:20px;box-shadow:var(--shadow)}.card-header{padding:19px 22px}.card-header h3{font-size:16px}.card-header p{font-size:11px}.card-body{padding:22px}.chart{min-height:310px;font-size:12px}.status-list{padding:18px;gap:10px}.status-row{padding:14px;border-radius:13px}.status-info strong{font-size:12px}.status-info small{font-size:10px}.status-count{font-size:13px}
.table th{padding:13px 16px;font-size:10px}.table td{padding:15px 16px;font-size:12px}.btn{min-height:42px;padding:9px 15px;border-radius:11px;font-size:12px}.btn-sm{min-height:35px;font-size:10px}
.form{gap:15px;padding:22px}.form label,.form-grid label{font-size:11px}.form input,.form select,.form textarea,.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.card input,.card select,.card textarea{min-height:46px;padding:10px 13px;border-radius:11px;font-size:12px}.form textarea,.card textarea{min-height:110px}.form-grid{gap:15px;padding:22px}.alert{margin:15px 22px;padding:13px 15px;font-size:12px}.badge{padding:6px 9px;font-size:10px}.pos-grid{grid-template-columns:minmax(0,1fr) 400px;gap:18px}.sticky-pos{padding:22px;top:102px}
.invoice-head{padding:28px}.mobile-bottom{height:70px}
/* Collapsed desktop sidebar */
:root.sidebar-collapsed .sidebar{width:84px;padding-left:10px;padding-right:10px}.sidebar-collapsed .main{margin-left:84px}.sidebar-collapsed .brand{justify-content:center;padding-left:0;padding-right:0}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-text,.sidebar-collapsed .nav-section-label,.sidebar-collapsed .nav-chevron,.sidebar-collapsed .branch-card .nav-text,.sidebar-collapsed .logout-link .nav-text{display:none}.sidebar-collapsed .nav-link,.sidebar-collapsed .nav-group-toggle{justify-content:center;padding-left:6px;padding-right:6px}.sidebar-collapsed .nav-icon{margin:0}.sidebar-collapsed .nav-submenu{display:none}.sidebar-collapsed .sidebar-hide{justify-content:center}.sidebar-collapsed .hide-icon{transform:rotate(180deg)}.sidebar-collapsed .branch-card{justify-content:center}.sidebar-collapsed .logout-link{justify-content:center}
/* Large desktop scale */
@media(min-width:1500px){body{font-size:16px}.sidebar{width:300px}.main{margin-left:300px}.sidebar-collapsed .main{margin-left:86px}.content{padding-left:46px;padding-right:46px}.toolbar h1{font-size:31px}.welcome-card h2{font-size:34px}.kpi-value{font-size:30px}}
@media(max-width:1100px){.sidebar{width:270px}.main{margin-left:270px}.sidebar-collapsed .main{margin-left:84px}.content{padding:28px 24px 48px}.quick-actions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.sidebar{width:286px}.main,.sidebar-collapsed .main{margin-left:0}.content{padding:22px 16px 92px}.topbar{height:72px;padding:0 16px}.top-title strong{font-size:16px}.top-title small,.top-title .eyebrow{display:none}.welcome-card{padding:27px 24px}.welcome-card h2{font-size:26px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.quick-actions{grid-template-columns:repeat(2,1fr)}.sidebar-hide{display:none}}
@media(max-width:560px){.content{padding:18px 12px 90px}.kpi-card{min-height:125px;padding:16px}.kpi-value{font-size:22px}.quick-actions{gap:8px}.quick-action{padding:12px;min-height:60px}.quick-action-icon{width:34px;height:34px}.card-header{padding:16px}.card-body{padding:16px}.table td{font-size:11px}.pos-grid{grid-template-columns:1fr}.sticky-pos{position:static}.user-chip div:not(.user-avatar){display:none}}
.scanner-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:grid;place-items:center;padding:25px}.scanner-modal video{width:min(92vw,720px);max-height:75vh;border-radius:18px}.scanner-close{position:fixed;top:20px;right:20px;border:0;border-radius:10px;padding:10px 15px;background:#fff;color:#111;font-weight:800}

/* =========================================================
   TN75 RETAIL OS v4.2 — LARGE / SHARP DISPLAY + USER MENU
   Visual target: approximately 120–123% perceived desktop scale.
   ========================================================= */
:root{
  --bg:#f1f0ec;--panel:#fff;--panel-soft:#faf9f6;--ink:#0b0b0a;--muted:#5f5e59;
  --line:#d6d4cc;--brand:#5f4bea;--brand-2:#806cf6;--nav:#090909;--nav-soft:#161614;
  --shadow:0 12px 32px rgba(14,14,12,.075);--shadow-lg:0 28px 80px rgba(14,14,12,.13)
}
body{font-size:17px;color:var(--ink);text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.sidebar{width:320px;padding:24px 17px;box-shadow:20px 0 60px rgba(0,0,0,.14)}
.main{margin-left:320px}
.brand{padding:5px 11px 29px;gap:15px}.brand-mark{width:54px;height:54px;border-radius:16px;font-size:15px}.brand strong{font-size:19px}.brand small{font-size:11px;margin-top:4px}
.sidebar-scroll{height:calc(100vh - 200px)}
.nav-section-label{padding:19px 13px 9px;font-size:10px}.main-nav{gap:5px}
.nav-link,.nav-group-toggle{min-height:53px;padding:8px 12px;border-radius:14px;gap:14px;font-size:15px}.nav-icon{width:35px;height:35px;flex-basis:35px;border-radius:10px;font-size:16px}.nav-submenu{padding-left:49px}.nav-sublink{min-height:45px;font-size:14px;padding:8px 12px}.sub-dot{width:6px;height:6px;flex-basis:6px}
.branch-card{padding:13px 11px;border-radius:14px}.branch-card strong{font-size:13px}.branch-card small{font-size:10px}.logout-link{min-height:45px;font-size:13px;padding:9px 11px}
.topbar{height:96px;padding:0 38px;gap:18px;border-bottom-color:#cfcdc5}.top-title .eyebrow{font-size:10px}.top-title strong{font-size:22px}.top-title small{font-size:12px;margin-top:4px}.top-actions{gap:14px}.top-pill{padding:10px 14px;font-size:11px;letter-spacing:.08em;border-color:#d2d0c8;color:#151512;background:#eeece5}
.user-menu{position:relative}.user-chip{min-height:50px;padding:6px 12px 6px 6px;border-radius:15px;gap:10px;border-color:#d1cfc7;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.035)}.user-avatar{width:38px;height:38px;border-radius:11px;font-size:12px}.user-chip-copy{display:block}.user-chip strong{font-size:13px}.user-chip small{font-size:10px;margin-top:2px}.user-chevron{font-size:18px;color:#686761;line-height:1;margin-left:2px;transition:transform .18s}.user-menu.open .user-chevron{transform:rotate(180deg)}
.user-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:330px;padding:9px;border:1px solid #d5d3cb;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s ease;z-index:1200}.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-dropdown-head{display:flex;align-items:center;gap:12px;padding:11px 10px}.user-avatar.large{width:46px;height:46px;border-radius:13px}.user-dropdown-head strong{display:block;font-size:14px}.user-dropdown-head small{display:block;margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:235px}.user-dropdown-divider{height:1px;background:#e7e5df;margin:7px 4px}.user-dropdown-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 10px;border:0;border-radius:12px;background:transparent;text-align:left;color:#141411;cursor:pointer}.user-dropdown-item:hover{background:#f4f3ef}.user-dropdown-item .dropdown-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;background:#eeecff;color:#5444df;font-size:15px}.user-dropdown-item strong{display:block;font-size:12px}.user-dropdown-item small{display:block;margin-top:3px;color:#77756e;font-size:10px}.user-dropdown-item.danger{color:#a52b35}.user-dropdown-item.danger .dropdown-icon{background:#fff0f1;color:#b52d38}
.content{padding:40px 48px 60px}.toolbar{margin-bottom:26px}.toolbar h1,.toolbar h2,.toolbar h3{font-size:33px}.toolbar p,.muted{font-size:14px}.eyebrow{font-size:10px;letter-spacing:.14em}
.welcome-card{padding:42px 44px;margin-bottom:27px;border-radius:27px}.welcome-card h2{font-size:39px}.welcome-card p{font-size:15px;margin-top:9px}
.kpi-grid{gap:19px;margin-bottom:29px}.kpi-card,.kpi{padding:27px;border-radius:20px;min-height:180px}.kpi-label,.kpi span{font-size:14px}.kpi-icon{width:50px;height:50px;border-radius:14px;font-size:17px}.kpi-value,.kpi strong,.metric{font-size:34px;margin-top:20px}.kpi-meta{font-size:12px;margin-top:6px}
.section-title{margin-bottom:15px}.section-title h3{font-size:19px}.section-title span{font-size:12px}.quick-actions{gap:15px;margin-bottom:29px}.quick-action{padding:20px;border-radius:17px;min-height:84px;gap:13px}.quick-action-icon{width:48px;height:48px;border-radius:13px;font-size:16px}.quick-action strong{font-size:14px}.quick-action small{font-size:11px;margin-top:4px}
.dashboard-grid{gap:20px;margin-bottom:22px}.card{border-radius:22px;box-shadow:var(--shadow)}.card>h1,.card>h2,.card>h3{padding:24px 27px;font-size:20px}.card-header{padding:24px 27px}.card-header h3{font-size:19px}.card-header p{font-size:13px}.card-body{padding:27px}.chart{min-height:365px;font-size:14px}.status-list{padding:22px;gap:12px}.status-row{padding:18px;border-radius:15px}.status-info strong{font-size:14px}.status-info small{font-size:11px}.status-count{font-size:15px}
.table th{padding:16px 19px;font-size:11px}.table td{padding:18px 19px;font-size:14px}.btn{min-height:50px;padding:11px 18px;border-radius:12px;font-size:14px}.btn-sm{min-height:41px;font-size:12px}.form{gap:18px;padding:27px}.form label,.form-grid label{font-size:13px}.form input,.form select,.form textarea,.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.card input,.card select,.card textarea{min-height:54px;padding:12px 15px;border-radius:12px;font-size:14px}.form textarea,.card textarea{min-height:130px}.form-grid{gap:18px;padding:27px}.alert{margin:18px 27px;padding:15px 18px;font-size:14px}.badge{padding:7px 11px;font-size:11px}.pos-grid{grid-template-columns:minmax(0,1fr) 450px;gap:22px}.sticky-pos{padding:27px;top:114px}
.invoice-head{padding:34px}.mobile-bottom{height:78px}
/* Collapsed desktop state remains controlled from the user dropdown. */
:root.sidebar-collapsed .sidebar{width:92px;padding-left:11px;padding-right:11px}.sidebar-collapsed .main{margin-left:92px}.sidebar-collapsed .nav-link,.sidebar-collapsed .nav-group-toggle{min-height:53px}.sidebar-collapsed .nav-icon{width:38px;height:38px;flex-basis:38px}.sidebar-collapsed .brand-mark{width:56px;height:56px}.sidebar-collapsed .user-dropdown{right:0}
.profile-grid{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:22px;align-items:start}.profile-card{overflow:hidden}.profile-hero{display:flex;align-items:center;gap:17px;padding:28px}.profile-avatar{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;background:#11110f;color:#fff;font:800 24px Manrope;box-shadow:0 12px 25px rgba(0,0,0,.14)}.profile-hero h2{margin:0;font:800 24px Manrope;letter-spacing:-.04em}.profile-hero p{margin:6px 0 0;color:var(--muted);font-size:13px}.profile-meta{display:grid;grid-template-columns:1fr;gap:1px;background:#e6e4dd;border-top:1px solid #e6e4dd}.profile-meta>div{display:flex;justify-content:space-between;gap:18px;padding:16px 22px;background:#fff}.profile-meta span{color:#77756e;font-size:12px}.profile-meta strong{font-size:13px}.profile-status{color:#148243}.profile-form{max-width:760px}.profile-divider{height:1px;background:#e4e2db;position:relative;margin:8px 0 2px}.profile-divider span{position:absolute;top:-9px;left:0;padding-right:10px;background:#fff;font-size:12px;font-weight:800;color:#25241f}.profile-note{font-size:12px!important;margin:0!important}
@media(min-width:1700px){.sidebar{width:330px}.main{margin-left:330px}.content{padding-left:54px;padding-right:54px}.welcome-card h2{font-size:42px}.kpi-card,.kpi{min-height:190px}.sidebar-collapsed .main{margin-left:94px}}
@media(max-width:1100px){.sidebar{width:300px}.main{margin-left:300px}.content{padding:34px 30px 56px}.quick-actions{grid-template-columns:repeat(3,1fr)}.profile-grid{grid-template-columns:1fr}.pos-grid{grid-template-columns:minmax(0,1fr) 400px}}
@media(max-width:850px){.sidebar{width:300px}.main,.sidebar-collapsed .main{margin-left:0}.content{padding:27px 20px 98px}.topbar{height:82px;padding:0 20px}.top-title strong{font-size:19px}.top-title small,.top-title .eyebrow{display:none}.user-chip{min-height:46px}.user-chip-copy{display:none}.user-chevron{font-size:16px}.top-pill{padding:8px 11px;font-size:10px}.welcome-card{padding:32px 28px}.welcome-card h2{font-size:31px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.quick-actions{grid-template-columns:repeat(2,1fr)}.sidebar-hide{display:none}.user-dropdown{width:min(330px,calc(100vw - 30px))}.profile-grid{grid-template-columns:1fr}}
@media(max-width:560px){.content{padding:22px 14px 100px}.kpi-card,.kpi{min-height:145px;padding:19px}.kpi-value,.kpi strong,.metric{font-size:26px}.quick-actions{gap:10px}.quick-action{padding:14px;min-height:68px}.quick-action-icon{width:40px;height:40px}.card-header{padding:18px}.card-body{padding:18px}.table td{font-size:12px}.pos-grid{grid-template-columns:1fr}.sticky-pos{position:static}.toolbar h1{font-size:27px}.card>h1,.card>h2,.card>h3{padding:19px;font-size:17px}.user-dropdown{right:-8px}.user-dropdown-head{padding:10px}.profile-hero{padding:21px}.profile-avatar{width:62px;height:62px;font-size:20px}.profile-hero h2{font-size:20px}.profile-form{padding:21px}}


/* =========================================================
   TN75 RETAIL OS v4.3 — 125% LOGIN + 14px APP TYPOGRAPHY
   Toolbar menu control is intentionally inside the top toolbar.
   ========================================================= */
html{font-size:16px}
body:not(.login-page){font-size:16px;line-height:1.45;color:#0a0a09}
/* Application-wide readable 14px UI standard */
body:not(.login-page) .topbar,
body:not(.login-page) .sidebar,
body:not(.login-page) .content{font-size:14px}
body:not(.login-page) .top-title strong{font-size:22px}
body:not(.login-page) .top-title small{font-size:14px}
body:not(.login-page) .top-title .eyebrow{font-size:11px}
body:not(.login-page) .toolbar p,
body:not(.login-page) .toolbar .muted,
body:not(.login-page) .toolbar label,
body:not(.login-page) .toolbar .btn,
body:not(.login-page) .toolbar input,
body:not(.login-page) .toolbar select{font-size:14px}
body:not(.login-page) .toolbar h1{font-size:34px}
body:not(.login-page) .toolbar h2{font-size:28px}
body:not(.login-page) .toolbar h3{font-size:22px}
body:not(.login-page) .sidebar .nav-section-label{font-size:11px}
body:not(.login-page) .sidebar .nav-link,
body:not(.login-page) .sidebar .nav-group-toggle{font-size:15px}
body:not(.login-page) .sidebar .nav-sublink{font-size:14px}
body:not(.login-page) .sidebar .branch-card strong{font-size:14px}
body:not(.login-page) .sidebar .branch-card small{font-size:11px}
body:not(.login-page) .sidebar .logout-link{font-size:14px}
body:not(.login-page) .top-pill{font-size:11px}
body:not(.login-page) .user-chip strong{font-size:14px}
body:not(.login-page) .user-chip small{font-size:11px}

.toolbar-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:7px 13px;border:1px solid #cbc9c1;border-radius:14px;background:#fff;color:#11110f;font:700 14px 'DM Sans',system-ui,sans-serif;box-shadow:0 5px 16px rgba(0,0,0,.06);transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;white-space:nowrap}
.toolbar-menu-toggle:hover{background:#f3f2ee;border-color:#aaa79e;box-shadow:0 8px 22px rgba(0,0,0,.09);transform:translateY(-1px)}
.toolbar-menu-toggle:active{transform:translateY(0)}
.toolbar-menu-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#11110f;color:#fff;font-size:16px;line-height:1}
.toolbar-menu-label{font-weight:800}
.top-actions{gap:12px}

/* Login page: desktop visual scale equivalent to approximately 125%. */
@media(min-width:851px){
  .login-page{zoom:1.25;min-height:80vh}
  .login-grid{min-height:80vh;max-width:1280px;padding:24px;gap:24px}
  .login-visual{min-height:496px;padding:42px 34px}
  .login-panel{max-width:470px;padding:36px}
}
.login-page .login-panel .form label{font-size:13px}
.login-page .login-panel .form input{min-height:52px;padding:13px 15px;font-size:14px}
.login-page .login-panel .btn{min-height:54px;font-size:14px}
.login-page .login-panel>p{font-size:13px}
.login-page .login-meta{font-size:11px}
.login-page .login-error{font-size:12px}
.login-page .login-brand strong{font-size:18px}
.login-page .login-brand small{font-size:11px}

/* Sharper display: clearer borders and higher contrast without changing the brand direction. */
body:not(.login-page) .card,
body:not(.login-page) .kpi-card,
body:not(.login-page) .kpi,
body:not(.login-page) .quick-action{border-color:#cbc9c1}
body:not(.login-page) .table th{font-size:12px;color:#34332f}
body:not(.login-page) .table td{font-size:14px;color:#171613}
body:not(.login-page) .badge{font-size:12px}
body:not(.login-page) .btn{font-size:14px}
body:not(.login-page) .form label,
body:not(.login-page) .form-grid label{font-size:14px}
body:not(.login-page) .form input,
body:not(.login-page) .form select,
body:not(.login-page) .form textarea,
body:not(.login-page) .form-grid input,
body:not(.login-page) .form-grid select,
body:not(.login-page) .form-grid textarea,
body:not(.login-page) .inline-form input,
body:not(.login-page) .inline-form select,
body:not(.login-page) .card input,
body:not(.login-page) .card select,
body:not(.login-page) .card textarea{font-size:14px}

@media(max-width:850px){
  .topbar{height:88px;padding:0 18px}
  .top-actions{gap:8px}
  .toolbar-menu-toggle{min-height:46px;padding:6px 9px;border-radius:12px}
  .toolbar-menu-label{display:none}
  .toolbar-menu-icon{width:32px;height:32px}
  .top-title strong{font-size:20px}
  .top-title small{font-size:13px}
  .user-chip{min-height:46px}
  .login-page .login-panel .form label{font-size:14px}
  .login-page .login-panel .form input{font-size:15px;min-height:54px}
}
@media(max-width:560px){
  .toolbar-menu-toggle{min-width:46px}
  .toolbar h1{font-size:28px}
  .toolbar h2{font-size:24px}
  .toolbar h3{font-size:20px}
  .content{padding-left:16px;padding-right:16px}
}

/* V4.4 toolbar placement: navigation control sits on the left side of the toolbar,
   immediately before the page title, instead of beside the user badge. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1}
.topbar-left .top-title{min-width:0}
.topbar-left .toolbar-menu-toggle{flex:0 0 auto}
.top-actions{margin-left:auto;flex:0 0 auto}

@media(min-width:851px){
  .topbar-left{gap:18px}
  .topbar-left .toolbar-menu-toggle{min-width:138px}
}

@media(max-width:850px){
  .topbar-left{gap:10px;min-width:0}
  .topbar-left .top-title{overflow:hidden}
  .topbar-left .toolbar-menu-toggle{min-width:46px}
  .top-actions{margin-left:0}
}


/* V4.5 — Sidebar Menu category placement
   Hide/Show Menu belongs inside the navigation box, between the business brand
   and the Overview/Dashboard category. */
.sidebar-menu-control{padding:14px 12px 8px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-menu-control .nav-section-label{margin:0 10px 8px}
.sidebar-menu-toggle{width:100%;display:flex;align-items:center;gap:11px;min-height:48px;padding:7px 11px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#171716;color:#fff;font:700 14px 'DM Sans',system-ui,sans-serif;cursor:pointer;text-align:left;transition:background .16s,border-color .16s,transform .16s}
.sidebar-menu-toggle:hover{background:#222220;border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.sidebar-menu-toggle:active{transform:translateY(0)}
.sidebar-menu-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:9px;background:#6c5ce7;color:#fff;font-size:17px;line-height:1}
.sidebar-menu-toggle .nav-text{font-weight:800;white-space:nowrap}
.sidebar-menu-toggle[aria-label="Show menu"] .sidebar-menu-icon{background:#fff;color:#11110f}
.sidebar-collapsed .sidebar-menu-control{padding-left:9px;padding-right:9px}
.sidebar-collapsed .sidebar-menu-control .nav-section-label{display:none}
.sidebar-collapsed .sidebar-menu-toggle{justify-content:center;padding:7px}
.sidebar-collapsed .sidebar-menu-toggle .nav-text{display:none}
.sidebar-collapsed .sidebar-menu-icon{margin:0}
@media(max-width:850px){
  .sidebar-menu-control{padding:12px 12px 8px}
  .sidebar-menu-toggle{min-height:48px}
}
/* Remove the previous top-toolbar menu control completely. */
.topbar .toolbar-menu-toggle{display:none!important}
.topbar-left{gap:0!important}


/* =========================================================
   TN75 RETAIL OS v4.6 — NAVIGATION POLISH
   Main categories are the navigation controls; submenus stay hidden
   until a category is opened. One category is open at a time.
   ========================================================= */
.sidebar-menu-control{
  padding:12px 10px 10px;
  border-top:0;
  border-bottom:0;
}
.sidebar-menu-control .nav-section-label{
  margin:0 2px 8px;
  padding:4px 10px 3px;
  color:#73736c;
  font-size:10px;
  letter-spacing:.18em;
}
.sidebar-menu-toggle{
  min-height:50px;
  border-radius:13px;
  border:1px solid #2b2b28;
  background:#151514;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 18px rgba(0,0,0,.12);
}
.sidebar-menu-toggle:hover{background:#1d1d1b;border-color:#3a3935}
.sidebar-menu-icon{width:35px;height:35px;border-radius:10px}
.sidebar-scroll{scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.sidebar-scroll .main-nav{gap:4px}
.nav-section-label{padding-top:15px}
.nav-group-toggle{position:relative}
.nav-group-toggle:focus-visible,.sidebar-menu-toggle:focus-visible,.nav-link:focus-visible,.nav-sublink:focus-visible{
  outline:2px solid #8d7fff;
  outline-offset:2px;
}
.nav-group.is-open>.nav-group-toggle{
  border-color:transparent;
  box-shadow:none;
  background:transparent;
}
/* A main category receives the highlighted box only after the user actually clicks it.
   Route-driven open state may reveal the current submenu without looking permanently active. */
.nav-group.user-open>.nav-group-toggle{
  color:#fff;
  background:#1b1a18;
  border-color:#302d45;
  box-shadow:inset 3px 0 0 var(--brand),0 5px 16px rgba(0,0,0,.12);
}
.nav-submenu{
  visibility:hidden;
  opacity:0;
  max-height:0;
  transition:max-height .22s ease,opacity .16s ease,visibility .16s ease;
}
.nav-group.is-open .nav-submenu{
  visibility:visible;
  opacity:1;
  max-height:520px;
}
.nav-sublink{padding-left:13px}
.nav-group:not(.is-open) .nav-submenu>*{pointer-events:none}
.nav-group.is-open .nav-submenu>*{pointer-events:auto}
.sidebar-collapsed .sidebar-menu-control{padding-top:12px;padding-bottom:10px}
.sidebar-collapsed .sidebar-menu-toggle{min-height:50px}
.sidebar-collapsed .sidebar-menu-icon{width:35px;height:35px}
@media(max-width:850px){
  .sidebar-menu-control{padding:11px 10px 9px}
  .nav-section-label{padding-top:14px}
}

/* =========================================================
   TN75 RETAIL OS v4.8 — SIDEBAR MENU CONTROL MATCHES NAV ITEMS
   The Hide/Show control is a utility item, not a permanent card.
   It now uses the same icon + text treatment as normal main categories.
   ========================================================= */
.sidebar-menu-control{padding:10px 12px 8px;border:0}
.sidebar-menu-control .nav-section-label{margin:0 10px 7px;padding:0;color:#73736c;font-size:10px;letter-spacing:.18em}
.sidebar-menu-toggle{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;padding:6px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:#dcdcd7;font:700 14px 'DM Sans',system-ui,sans-serif;box-shadow:none;cursor:pointer;text-align:left;transition:background .16s,border-color .16s,color .16s,transform .16s}
.sidebar-menu-toggle:hover{background:#151514;border-color:#2b2b28;color:#fff;transform:none}
.sidebar-menu-toggle:active{background:#1b1a18;transform:none}
.sidebar-menu-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:#171716;color:#c9c8c2;border:1px solid #252522;font-size:17px;line-height:1;box-shadow:none}
.sidebar-menu-toggle:hover .sidebar-menu-icon{background:#6c5ce7;color:#fff;border-color:#6c5ce7}
.sidebar-menu-toggle[aria-label="Show menu"] .sidebar-menu-icon{background:#171716;color:#c9c8c2;border-color:#252522}
.sidebar-menu-toggle[aria-label="Show menu"]:hover .sidebar-menu-icon{background:#6c5ce7;color:#fff;border-color:#6c5ce7}
.sidebar-menu-toggle .nav-text{font-weight:700;white-space:nowrap}
.sidebar-collapsed .sidebar-menu-control{padding:10px 10px 8px}
.sidebar-collapsed .sidebar-menu-control .nav-section-label{display:none}
.sidebar-collapsed .sidebar-menu-toggle{justify-content:center;padding:6px 5px}
.sidebar-collapsed .sidebar-menu-toggle .nav-text{display:none}
.sidebar-collapsed .sidebar-menu-icon{margin:0}
@media(max-width:850px){.sidebar-menu-control{padding:9px 10px 7px}.sidebar-menu-toggle{min-height:48px}}
/* TN75 Retail OS V5 - advanced module UI */
:root{--v5-orange:#f27b21;--v5-green:#0f9d63;--v5-blue:#2878d8;--v5-red:#d64545}
.v5-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:18px 0}.v5-kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(17,17,15,.05)}.v5-kpi small{color:var(--muted);font-weight:700}.v5-kpi strong{display:block;font-size:30px;margin-top:8px}.v5-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.v5-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.v5-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 26px rgba(17,17,15,.04)}.v5-card h2,.v5-card h3{margin-top:0}.v5-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:18px}.v5-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.v5-form-grid .full{grid-column:1/-1}.v5-badge{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#f2f1ed}.v5-badge.ok{background:#e7f8ef;color:#087744}.v5-badge.warn{background:#fff2df;color:#a95c00}.v5-badge.bad{background:#ffe9e9;color:#a82d2d}.v5-badge.info{background:#eaf2ff;color:#235eaa}.v5-stat-list{display:grid;gap:10px}.v5-stat-row{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:10px 0}.v5-muted{color:var(--muted)}.v5-total{font-size:28px;font-weight:900}.v5-actionbar{display:flex;gap:10px;flex-wrap:wrap}.v5-table td,.v5-table th{vertical-align:middle}.v5-table input,.v5-table select{min-width:110px}.v5-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.v5-filter label{min-width:160px}.v5-alert{padding:13px 16px;border-radius:12px;background:#fff5e8;border:1px solid #ffd7a8;margin-bottom:16px}.v5-success{background:#eaf8f1;border-color:#bcebd2}.v5-danger{background:#ffeded;border-color:#ffc7c7}.v5-progress{height:10px;background:#eceae5;border-radius:99px;overflow:hidden}.v5-progress span{display:block;height:100%;background:var(--brand);border-radius:99px}.v5-pivot{overflow:auto}.v5-pivot table{min-width:760px}.v5-empty{padding:35px;text-align:center;color:var(--muted)}.display-shell{min-height:100vh;background:#111;color:#fff;padding:40px}.display-board{max-width:1200px;margin:auto;background:#fff;color:#111;border-radius:28px;padding:36px}.display-total{font-size:56px;font-weight:900;text-align:right}.display-line{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid #ddd;font-size:22px}@media(max-width:1000px){.v5-kpis,.v5-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.v5-kpis,.v5-grid,.v5-grid-3,.v5-form-grid{grid-template-columns:1fr}.v5-card{padding:16px}.display-shell{padding:12px}.display-board{padding:18px}.display-total{font-size:38px}.display-line{font-size:17px}}
/* V5 login scale + global readable density */
.login-page{zoom:1.25}
@supports not (zoom:1){.login-page{transform:scale(1.25);transform-origin:top left;width:80vw;min-height:80vh}}
body:not(.login-page) .content{font-size:14px}
body:not(.login-page) .content h1{font-size:32px}body:not(.login-page) .content h2{font-size:24px}body:not(.login-page) .content h3{font-size:18px}

/* =========================================================
   TN75 RETAIL OS V5.1 — HYPER POS INSPIRED DASHBOARD SHELL
   Dark command-centre dashboard, dense grouped navigation,
   readable 14px application scale, orange operational accent.
   ========================================================= */
.dashboard-page{background:#070809;color:#f4f5f6;font-size:14px}
.dashboard-page .main{background:#070809}
.dashboard-page .topbar{height:58px;padding:0 18px;background:#0b0d0f;border-bottom:1px solid #202327;color:#fff;backdrop-filter:blur(16px)}
.dashboard-page .topbar-left{display:flex;align-items:center;gap:18px;min-width:0;flex:1}
.dashboard-page .top-title{flex:0 0 auto}.dashboard-page .top-title strong{font:700 14px 'DM Sans',system-ui,sans-serif;color:#f4f5f6}
.dashboard-page .global-search{height:36px;width:min(520px,48vw);display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #25282c;border-radius:9px;background:#111316;color:#6f747b}
.dashboard-page .global-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#e7e8ea;font-size:12px}.dashboard-page .global-search input::placeholder{color:#676c73}
.dashboard-page .global-search kbd{font:10px 'DM Sans';padding:2px 5px;border:1px solid #30343a;border-radius:4px;color:#777d85;background:#16191d}
.dashboard-page .top-actions{gap:8px}.dashboard-page .top-select{position:relative;display:grid;grid-template-columns:auto 1fr auto;column-gap:7px;align-items:center;min-width:120px;height:38px;padding:3px 9px;border:1px solid #24272b;border-radius:9px;background:#0f1114;color:#9da2aa;font-size:12px}.dashboard-page .top-select small{display:block;grid-column:2;color:#666c73;font-size:8px;line-height:1;text-align:left;letter-spacing:.08em}.dashboard-page .top-select b{grid-column:2;color:#eef0f2;font-size:11px;text-align:left;line-height:1.15}.dashboard-page .top-icon{position:relative;width:38px;height:38px;border:1px solid #25282c;border-radius:9px;background:#111316;color:#d7d9dc;font-size:15px}.dashboard-page .top-icon.accent{background:#ff7815;border-color:#ff7815;color:#fff;box-shadow:0 7px 18px rgba(255,120,21,.18)}.dashboard-page .top-icon i{position:absolute;right:7px;top:6px;width:5px;height:5px;border-radius:50%;background:#ff7815}.dashboard-page .top-pill{background:#09261d;color:#34d399;border:1px solid #0e3e30;padding:6px 9px;font-size:9px}
.dashboard-page .user-chip{background:#0f1114;border-color:#25282c;color:#fff;border-radius:9px;min-height:38px}.dashboard-page .user-chip strong{color:#f4f5f6}.dashboard-page .user-chip small{color:#777d84}.dashboard-page .user-avatar{background:#24282d;color:#fff;border-radius:50%}.dashboard-page .user-chevron{color:#737981}
.dashboard-page .sidebar{width:224px;padding:8px 8px 12px;background:#0b0d0f;border-right:1px solid #202327;box-shadow:none}
.dashboard-page .main{margin-left:224px}.dashboard-page .brand{height:50px;padding:2px 7px 10px;gap:9px;border-bottom:1px solid #1d2024}.dashboard-page .brand-mark{width:43px;height:38px;border-radius:5px;background:transparent;box-shadow:none;color:#ff7815;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:.8}.dashboard-page .brand-mark strong{font:900 17px Manrope;color:#ff7815;letter-spacing:-.08em}.dashboard-page .brand-mark small{font:900 11px Manrope;color:#fff;letter-spacing:.04em}.dashboard-page .brand-copy strong{font-size:13px;color:#fff}.dashboard-page .brand-copy small{font-size:8px;color:#72777e}.dashboard-page .brand-collapse{margin-left:auto;width:24px;height:24px;border:0;background:transparent;color:#686e75;border-radius:6px;font-size:10px}.dashboard-page .brand-collapse:hover{background:#17191c;color:#fff}
.dashboard-page .sidebar-scroll{height:calc(100vh - 88px);padding:8px 0 10px}.dashboard-page .main-nav{gap:1px}.dashboard-page .nav-section-label{padding:12px 8px 6px;color:#5f656c;font-size:9px;letter-spacing:.13em}.dashboard-page .nav-link,.dashboard-page .nav-group-toggle{min-height:34px;padding:4px 7px;gap:8px;border-radius:7px;color:#aeb3ba;font-size:12px;font-weight:600}.dashboard-page .nav-icon{width:23px;height:23px;flex-basis:23px;border-radius:6px;background:transparent;color:#747a81;font-size:12px}.dashboard-page .nav-link:hover,.dashboard-page .nav-group-toggle:hover{background:#15181b;border-color:#202328;color:#fff}.dashboard-page .nav-link.active{background:#16191d;border-color:transparent;box-shadow:inset 2px 0 0 #ff7815;color:#fff}.dashboard-page .nav-link.active .nav-icon,.dashboard-page .nav-group.is-open>.nav-group-toggle .nav-icon{background:#2a1b10;color:#ff8a32;box-shadow:none}.dashboard-page .nav-group.is-open>.nav-group-toggle{background:#121518;color:#fff;border-color:#1e2226}.dashboard-page .nav-group.user-open>.nav-group-toggle{background:#16191d;border-color:#25292d;box-shadow:inset 2px 0 0 #ff7815}.dashboard-page .nav-chevron{font-size:11px;color:#62686f}.dashboard-page .nav-submenu{padding-left:29px;border-left:1px solid #22262a;margin-left:18px}.dashboard-page .nav-sublink{min-height:31px;padding:5px 8px;color:#858b92;border-left:0;font-size:11px;border-radius:5px}.dashboard-page .nav-sublink:hover{background:#14171a;color:#fff}.dashboard-page .nav-sublink.active{background:#17191d;color:#fff}.dashboard-page .sub-dot{width:4px;height:4px;flex-basis:4px;background:#4f555c}.dashboard-page .nav-sublink.active .sub-dot{background:#ff7815;box-shadow:none}
.dashboard-page .sidebar-bottom{margin-top:5px;padding:8px 0 0;border-top:1px solid #1d2024}.dashboard-page .branch-card{background:#101214;border-color:#22262a;padding:8px;border-radius:7px}.dashboard-page .branch-card strong{font-size:10px}.dashboard-page .branch-card small{font-size:8px}.dashboard-page .logout-link{min-height:31px;padding:5px 8px;font-size:10px}
.dashboard-page .content{max-width:none;margin:0;padding:25px 30px 45px;background:#070809}
.ref-dashboard{max-width:1530px;margin:0 auto}.ref-welcome{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.ref-eyebrow{color:#777c83;font-size:9px;letter-spacing:.14em;font-weight:800}.ref-welcome h1{margin:5px 0 8px;font:800 24px Manrope;letter-spacing:-.04em;color:#f5f5f5}.ref-welcome p{margin:0;color:#71767d;font-size:11px}.ref-welcome p b{color:#ff7815}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.08)}.cashier-count{color:#3ad69d}.period-control{margin-top:1px;border:1px solid #292d31;background:#101214;border-radius:8px;padding:8px 12px;color:#aeb3b9;font-size:11px}
.ref-sales-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:12px}.ref-sales-card,.ref-mini,.ref-panel,.ref-op{background:#0c0e10;border:1px solid #22262a;border-radius:11px;box-shadow:none}.ref-sales-card{padding:18px 20px;min-height:246px;overflow:hidden}.ref-card-head{display:flex;justify-content:space-between;align-items:flex-start}.ref-card-head>div>span{display:block;color:#737980;font-size:9px;text-transform:uppercase;letter-spacing:.06em}.ref-card-head strong{display:block;margin-top:6px;color:#f5f6f7;font:800 31px Manrope;letter-spacing:-.045em}.ref-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.ref-chips b{padding:5px 8px;border:1px solid #25292e;background:#111417;border-radius:999px;color:#aeb4ba;font-size:9px}.trend{padding:5px 8px;border-radius:999px;font-size:9px;background:#08261e;color:#21d19a}.ref-mini-stack{display:grid;gap:9px}.ref-mini{min-height:76px;padding:14px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden}.mini-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#241a11;color:#ff7815;font-size:14px}.ref-mini div{flex:1}.ref-mini small{display:block;color:#767c83;font-size:9px}.ref-mini strong{display:block;margin-top:3px;color:#f2f3f4;font:800 18px Manrope}.mini-trend{align-self:flex-start;padding:3px 6px;border-radius:999px;background:#08261e;color:#23c996;font-size:8px}.mini-trend.red{background:#2b1214;color:#ff6067}.ref-mini i{position:absolute;right:15px;bottom:10px;width:66px;height:18px;border-bottom:2px solid #11b890;border-right:2px solid transparent;transform:skew(-25deg)}.ref-mini i.redline{border-bottom-color:#f04e57}
.sales-chart{width:100%;height:135px;margin-top:8px}.ref-section{margin-top:25px}.ref-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.ref-section-title h2{margin:0;padding-left:10px;border-left:3px solid #ff7815;color:#f0f1f2;font:800 14px Manrope}.ref-section-title>span,.ref-section-title a{color:#6f757d;font-size:10px}.ref-section-title a{color:#ff8a32}.ref-op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.ref-op{min-height:70px;padding:12px 13px;display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;color:#fff}.ref-op>span{grid-row:1/3;width:34px;height:34px;border-radius:9px;background:#241a11;color:#ff7815;display:grid;place-items:center}.ref-op b{font:800 18px Manrope}.ref-op small{color:#737980;font-size:9px}.ref-op>a,.ref-op{transition:.15s}.ref-op:hover{border-color:#3a2a20;transform:translateY(-1px)}.ref-op.danger{border-color:#3b2427}.ref-op.danger>span{background:#2a1417;color:#ff5962}.ref-op.warn>span{background:#2b2711;color:#f5c42f}.ref-op.success>span{background:#0c2a22;color:#25d39d}
.range-tabs{display:inline-flex;gap:2px;padding:2px;border:1px solid #25292e;background:#101214;border-radius:7px}.range-tabs span,.range-tabs b{padding:5px 8px;border-radius:5px;color:#767c83;font-size:9px;font-weight:600}.range-tabs b,.range-tabs .active{background:#20242a;color:#fff}.ref-performance{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr);gap:12px}.ref-panel{overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid #22262a}.panel-head h3{margin:0;color:#eef0f2;font:700 12px Manrope}.panel-head small,.panel-head div:last-child{color:#70767e;font-size:9px}.metrics-row{display:grid;grid-template-columns:repeat(3,1fr);padding:16px 15px 7px;gap:15px}.metrics-row small{display:block;color:#646a72;font-size:8px;letter-spacing:.08em}.metrics-row strong{display:inline-block;margin-top:5px;color:#f3f4f5;font:800 21px Manrope}.metrics-row mark{margin-left:5px;padding:3px 5px;border-radius:999px;background:#08261e;color:#20c995;font-size:8px}.legend{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px 0 10px;background:#ff7815}.legend.prev{background:#34383d}.big-chart{display:block;width:100%;height:245px;padding:0 15px 15px}.category-panel{padding-bottom:12px}.donut{width:170px;height:170px;margin:18px auto 8px;border-radius:50%;background:conic-gradient(#ff7815 var(--p),#32363b 0);display:grid;place-items:center}.donut:before{content:"";position:absolute;width:118px;height:118px;border-radius:50%;background:#0c0e10}.donut>div{position:relative;text-align:center}.donut strong{display:block;color:#fff;font:800 15px Manrope}.donut small{display:block;margin-top:3px;color:#696f77;font-size:8px}.category-list{display:grid;gap:7px;padding:0 14px}.category-list>div{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;color:#8d939a;font-size:9px}.category-list b{color:#d9dce0;font-size:9px}.cat-dot{width:7px;height:7px;border-radius:50%;background:#ff7815}.cat-dot.c1{background:#5c6ee8}.cat-dot.c2{background:#10b981}.cat-dot.c3{background:#eab308}.cat-dot.c4{background:#ec4899}.cat-dot.c5{background:#64748b}.cat-dot.c6{background:#8b5cf6}.cat-dot.c7{background:#ef4444}
.ref-insights{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:12px}.list-table>div{display:grid;grid-template-columns:26px 28px 1fr auto;gap:8px;align-items:center;min-height:49px;padding:8px 13px;border-bottom:1px solid #1d2125}.list-table em{font-style:normal;color:#ff7815;font-size:8px;text-align:center}.product-thumb{width:27px;height:27px;border-radius:5px;background:#181b1e;display:grid;place-items:center;color:#777d84;font-size:10px}.list-table strong{color:#e5e7e9;font-size:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-table strong small{display:block;margin-top:3px;color:#686f77;font-size:8px;font-weight:500}.list-table b{color:#f0f1f2;font-size:10px}.list-table a{padding:5px 7px;border:1px solid #30353b;border-radius:5px;color:#d9dde1;font-size:8px}.stock-bad{color:#ff5c64!important}.activity-list>div{display:flex;gap:9px;padding:10px 13px;border-bottom:1px solid #1d2125}.activity-list>div>span{color:#70767e}.activity-list p{margin:0;color:#9ca2a9;font-size:9px}.activity-list p b{color:#e7e9eb}.activity-list small{display:block;margin-top:4px;color:#626970}.live-badge{padding:4px 7px;border-radius:999px;background:#08261e;color:#22c997;font-size:8px}.ref-bottom{display:grid;grid-template-columns:1.8fr 1fr;gap:12px}.heat-panel{min-height:300px}.heatmap{display:grid;grid-template-columns:42px repeat(24,minmax(7px,1fr));gap:5px;padding:18px 15px}.heatmap label{color:#7b8188;font-size:8px;align-self:center}.heatmap i{display:block;height:20px;border-radius:4px;background:rgba(255,120,21,var(--heat));border:1px solid rgba(255,255,255,.02)}.shift-head,.shift-table>div:not(.shift-head){display:grid;grid-template-columns:1.3fr .8fr .8fr .4fr;gap:8px;align-items:center;padding:10px 13px;border-bottom:1px solid #1d2125}.shift-head{color:#5f656d;font-size:8px}.shift-table>div:not(.shift-head){color:#cdd1d5;font-size:9px}.shift-table strong{color:#fff}.shift-status{color:#24cf99;background:#08261e;padding:3px 5px;border-radius:999px;width:max-content;font-size:8px}.shift-status.closed,.shift-status.closed_with_variance{color:#ffb35c;background:#2a1d0e}.empty-row,.empty-mini{padding:24px 14px;color:#646b73;text-align:center;font-size:9px}
.dashboard-page .mobile-bottom{background:#0d0f11;border-color:#24272b}.dashboard-page .mobile-bottom a{color:#7f858d}.dashboard-page .mobile-bottom .center{background:#ff7815;box-shadow:0 10px 24px rgba(255,120,21,.25)}
@media(max-width:1250px){.dashboard-page .top-select{min-width:90px}.dashboard-page .top-select:nth-child(2){display:none}.ref-sales-grid,.ref-performance{grid-template-columns:1fr}.ref-insights{grid-template-columns:1fr 1fr}.ref-bottom{grid-template-columns:1fr}.ref-op-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.dashboard-page .sidebar{width:300px}.dashboard-page .main{margin-left:0}.dashboard-page .content{padding:20px 16px 90px}.dashboard-page .global-search{display:none}.dashboard-page .topbar{height:62px}.dashboard-page .top-actions .top-icon:nth-of-type(1),.dashboard-page .top-actions .top-icon:nth-of-type(2){display:none}.ref-sales-grid,.ref-insights,.ref-performance,.ref-bottom{grid-template-columns:1fr}.ref-op-grid{grid-template-columns:1fr 1fr}.ref-welcome h1{font-size:22px}.metrics-row{grid-template-columns:1fr}.big-chart{height:190px}.heatmap{overflow:auto;grid-template-columns:42px repeat(24,18px);padding-bottom:20px}.heatmap i{height:18px}}
@media(max-width:560px){.dashboard-page .top-pill{display:none}.dashboard-page .user-chip-copy{display:none}.dashboard-page .top-select{display:none}.dashboard-page .top-actions{margin-left:auto}.ref-op-grid{grid-template-columns:1fr}.ref-sales-card{min-height:220px;padding:15px}.ref-card-head strong{font-size:26px}.ref-chips b{font-size:8px}.metrics-row strong{font-size:18px}.panel-head{padding:12px}.ref-section{margin-top:20px}}

/* =========================================================
   TN75 RETAIL OS V5.2 — UNIVERSAL DARK POS DESIGN SYSTEM
   Applies the Dashboard reference language to EVERY application page.
   ========================================================= */
:root{
  --bg:#070809;
  --panel:#0c0e10;
  --panel-2:#101214;
  --panel-3:#14171a;
  --ink:#f2f4f6;
  --muted:#7a8088;
  --line:#24282d;
  --brand:#ff7815;
  --brand-2:#ff9a45;
  --success:#19c894;
  --warning:#eab308;
  --danger:#ff5862;
  --info:#62a8ff;
  --shadow:0 14px 40px rgba(0,0,0,.24);
  --shadow-lg:0 26px 70px rgba(0,0,0,.34);
  --r:10px;
}
html,body{background:#070809;color:#f2f4f6}
body{font-family:'DM Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px}
button,input,select,textarea{font-family:inherit}
a{color:inherit}

/* ---------- Global shell ---------- */
.sidebar,
.dashboard-page .sidebar{
  width:198px;
  padding:8px 8px 10px;
  background:#0b0d0f;
  border-right:1px solid #202428;
  box-shadow:none;
}
.main,
.dashboard-page .main{margin-left:198px;background:#070809;min-height:100vh}
.sidebar-scroll{height:calc(100vh - 185px);padding-right:2px}
.sidebar-scroll::-webkit-scrollbar{width:4px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#2a2e33;border-radius:9px}

/* ---------- Brand ---------- */
.brand,
.dashboard-page .brand{
  height:50px;
  padding:2px 4px 9px;
  gap:8px;
  border-bottom:1px solid #202428;
}
.brand-mark,
.dashboard-page .brand-mark{
  width:38px;height:38px;border-radius:4px;background:transparent;box-shadow:none;
  color:var(--brand);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:.82;
  font:900 16px Manrope;letter-spacing:-.08em;
}
.brand-mark strong,.dashboard-page .brand-mark strong{font:900 16px Manrope;color:var(--brand);letter-spacing:-.08em}
.brand-mark small,.dashboard-page .brand-mark small{font:900 10px Manrope;color:#fff;letter-spacing:.03em}
.brand-copy strong,.dashboard-page .brand-copy strong{font:800 12px Manrope;color:#f5f6f7;line-height:1.05}
.brand-copy small,.dashboard-page .brand-copy small{font-size:7px;color:#737980;margin-top:3px}
.brand-collapse{width:22px;height:22px;border:0;background:transparent;color:#686f77;border-radius:5px;font-size:10px}
.brand-collapse:hover{background:#171a1d;color:#fff}

/* ---------- Sidebar navigation ---------- */
.nav-section-label{padding:16px 8px 6px;color:#5e656d;font-size:9px!important;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.main-nav{gap:1px}
.nav-link,.nav-group-toggle{
  width:100%;min-height:37px;padding:5px 7px;border:1px solid transparent;border-radius:7px;
  color:#9ba1a8;background:transparent;font-size:12px;font-weight:700;gap:8px;
}
.nav-link:hover,.nav-group-toggle:hover{color:#fff;background:#14171a;border-color:#22262b}
.nav-link.active{
  color:#fff;background:#171a1d;border-color:#252a2f;box-shadow:inset 2px 0 0 var(--brand)
}
.nav-icon{width:27px;height:27px;flex-basis:27px;border-radius:7px;background:#15181b;color:#7f868e;font-size:12px}
.nav-link.active .nav-icon,.nav-group.is-open>.nav-group-toggle .nav-icon{background:#241a12;color:var(--brand);box-shadow:none}
.nav-group.is-open>.nav-group-toggle{color:#fff;background:#111315;border-color:#22262b}
.nav-chevron{font-size:12px;color:#60666d}
.nav-group.is-open .nav-chevron{color:#fff}
.nav-submenu{padding-left:35px}
.nav-sublink{min-height:31px;padding:5px 7px;border-left:1px solid #292e33;color:#767d85;font-size:11px;font-weight:600;gap:7px}
.nav-sublink:hover{color:#fff}
.nav-sublink.active{color:#fff}
.sub-dot{width:4px;height:4px;flex-basis:4px;background:#4f555c}
.nav-sublink.active .sub-dot{background:var(--brand);box-shadow:0 0 0 3px rgba(255,120,21,.1)}

/* Hide/Show menu must look like a normal navigation item */
.sidebar-menu-control{padding:11px 0 4px;border:0}
.sidebar-menu-control .nav-section-label{padding:0 8px 6px;margin:0}
.sidebar-menu-toggle{
  min-height:37px!important;padding:5px 7px!important;border:1px solid transparent!important;border-radius:7px!important;
  background:transparent!important;color:#9ba1a8!important;font:700 12px 'DM Sans',sans-serif!important;
  gap:8px!important;box-shadow:none!important;transform:none!important
}
.sidebar-menu-toggle:hover{background:#14171a!important;border-color:#22262b!important;color:#fff!important}
.sidebar-menu-icon{width:27px!important;height:27px!important;flex-basis:27px!important;border-radius:7px!important;background:#15181b!important;color:#7f868e!important;font-size:12px!important}
.sidebar-menu-toggle[aria-label="Show menu"] .sidebar-menu-icon{background:#15181b!important;color:#7f868e!important}
.sidebar-menu-toggle:active{transform:none!important}

.branch-card{padding:8px 7px;border-radius:7px;background:#101214;border:1px solid #22262a}
.branch-card strong{font-size:10px;color:#dfe2e5}.branch-card small{font-size:8px;color:#737980}
.sidebar-bottom{gap:5px;margin-top:7px;padding:8px 0 0;border-top:1px solid #202428}
.logout-link{min-height:34px;padding:6px 7px;border-radius:7px;color:#8d949b;font-size:10px}
.logout-link:hover{background:#14171a;color:#fff}

/* ---------- Topbar ---------- */
.topbar,
.dashboard-page .topbar{
  height:57px;padding:0 14px 0 16px;gap:12px;background:#0b0d0f;border-bottom:1px solid #22262a;box-shadow:none
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.top-title{flex:0 0 auto;min-width:92px}
.top-title strong{font:800 15px Manrope;color:#f4f5f6;letter-spacing:-.025em}
.top-title small{font-size:8px;color:#6f757c}
.global-search{width:min(460px,42vw);height:36px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #252a2f;border-radius:8px;background:#101214;color:#6d747c}
.global-search input{border:0;outline:0;background:transparent;color:#e8eaec;min-width:0;flex:1;font-size:11px}
.global-search input::placeholder{color:#5e646b}
.global-search kbd{padding:2px 5px;border:1px solid #2c3137;border-radius:4px;color:#70777f;background:#15181b;font-size:8px}
.top-actions{gap:6px}
.top-select{min-width:102px;height:36px;padding:3px 8px;border:1px solid #24292e;border-radius:8px;background:#101214;color:#dfe2e5;display:grid;grid-template-columns:auto 1fr auto;column-gap:5px;align-items:center;font-size:10px;text-align:left}
.top-select small{font-size:7px;color:#626971;grid-column:2;line-height:1}.top-select b{font-size:10px;grid-column:2}.top-select:first-child>svg,.top-select>span{grid-row:1/3}
.top-icon{width:36px;height:36px;border:1px solid #24292e;border-radius:8px;background:#101214;color:#aab0b6;font-size:13px;display:grid;place-items:center}
.top-icon:hover{border-color:#3a4148;color:#fff}
.top-icon.accent{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 18px rgba(255,120,21,.16)}
.top-pill{padding:7px 9px;border-radius:999px;background:#08261e;color:#24ce9a;font-size:8px;font-weight:800;border:1px solid #0d3b2e}
.user-chip{height:38px;padding:3px 7px 3px 4px;border:1px solid #24292e;border-radius:8px;background:#101214;color:#f0f1f2}
.user-avatar{width:29px;height:29px;border-radius:50%;background:#22262b;color:#fff;font-size:9px}
.user-chip strong{font-size:10px}.user-chip small{font-size:8px;color:#777e86}.user-chevron{color:#777e86}
.user-dropdown{background:#101214;border:1px solid #292e34;box-shadow:0 22px 50px rgba(0,0,0,.45);color:#e8eaec;border-radius:9px}
.user-dropdown-item{color:#aeb4ba}.user-dropdown-item:hover{background:#181b1f;color:#fff}

/* ---------- Universal page canvas ---------- */
.content,.dashboard-page .content{max-width:none;margin:0;padding:25px 28px 50px;background:#070809;color:#f2f4f6}
.toolbar{margin-bottom:18px}
.toolbar h1,.toolbar h2,.toolbar h3{color:#f4f5f6;font:800 23px Manrope;letter-spacing:-.04em}
.toolbar p,.muted{color:#777e86;font-size:11px}
.eyebrow{color:#737a82;font-size:8px}

/* ---------- Universal cards/panels ---------- */
.card,.v5-card,.panel,.summary,.profile-card,.service-card,.customer-card,.report-card{
  background:#0c0e10!important;border:1px solid #24282d!important;border-radius:10px!important;box-shadow:none!important;color:#e9ebed
}
.card>h1,.card>h2,.card>h3{padding:15px 17px;color:#f0f2f4;border-bottom:1px solid #24282d;font-size:14px}
.card-header{padding:13px 16px;border-bottom:1px solid #24282d}
.card-header h3{color:#eef0f2;font-size:12px}.card-header p{color:#717880;font-size:9px}
.card-body{padding:16px}
.section-title h3{color:#eef0f2;font-size:13px}.section-title span{color:#6e757d;font-size:9px}

/* ---------- Universal forms ---------- */
.form,.form-grid{color:#e6e8ea}
.form label,.form-grid label{color:#b9bec4!important;font-size:10px}
.form input,.form select,.form textarea,.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.card input,.card select,.card textarea,
input:not([type="hidden"]),select,textarea{
  background:#101214!important;color:#e8eaec!important;border-color:#292e34!important;border-radius:8px!important;font-size:11px
}
input::placeholder,textarea::placeholder{color:#5f666e}
.form input:focus,.form select:focus,.form textarea:focus,.card input:focus,.card select:focus,.card textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:#a94e12!important;box-shadow:0 0 0 3px rgba(255,120,21,.09)!important
}
select option{background:#101214;color:#fff}

/* ---------- Universal tables ---------- */
.table-wrap,.table-wrapper{background:#0c0e10;border-radius:10px}
.table,.table-wrap table{color:#dfe2e5}
.table th,.table-wrap th{background:#101214;color:#697078;border-bottom:1px solid #24282d;font-size:8px;padding:10px 12px}
.table td,.table-wrap td{border-bottom:1px solid #1d2125;color:#c9cdd1;font-size:10px;padding:11px 12px}
.table tbody tr:hover td,.table-wrap tbody tr:hover td{background:#111417}

/* ---------- Universal buttons ---------- */
.btn,.btn.secondary,.btn-light{background:#101214!important;color:#dce0e3!important;border-color:#2a2f35!important;border-radius:7px!important;font-size:10px}
.btn.primary,.btn-primary{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important;box-shadow:0 8px 18px rgba(255,120,21,.14)!important}
.btn.success,.btn-success{background:#0b6f54!important;border-color:#0b8b68!important;color:#fff!important}
.btn.danger,.btn-danger{background:#7e2027!important;border-color:#a82c34!important;color:#fff!important}
.btn.warn{background:#725b09!important;border-color:#967b12!important;color:#fff!important}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- Universal V5 components ---------- */
.v5-toolbar{background:#0c0e10!important;border-color:#24282d!important;color:#e8eaec!important}
.v5-kpi,.kpi-card,.kpi{background:#0c0e10!important;border-color:#24282d!important;box-shadow:none!important;color:#e9ebed}
.kpi-label,.kpi span{color:#737a82!important}.kpi-value,.kpi strong,.metric{color:#f3f4f5!important}
.kpi-icon,.quick-action-icon{background:#241a11!important;color:var(--brand)!important}
.quick-action{background:#0c0e10!important;border-color:#24282d!important;box-shadow:none!important;color:#e7e9eb}
.quick-action:hover{border-color:#49301e!important;background:#101214!important}
.chart{background-color:#0c0e10;background-image:linear-gradient(#181c20 1px,transparent 1px),linear-gradient(90deg,#181c20 1px,transparent 1px);color:#676e76}
.status-row{background:#101214;border-color:#24282d;color:#e5e7e9}.status-info strong{color:#eef0f2}.status-info small{color:#70777f}
.badge,.status,.v5-badge{background:#171a1d!important;border-color:#2b3035!important;color:#c8cdd2!important}
.v5-success{color:#22cc98!important}.v5-danger{color:#ff5b64!important}.v5-muted{color:#717880!important}
.v5-alert{background:#151111!important;border-color:#4a2428!important;color:#e7d5d7!important}
.v5-filter{background:#0c0e10!important;border-color:#24282d!important;color:#d8dce0!important}
.v5-table{background:#0c0e10!important;color:#dfe2e5!important}.v5-table th{background:#101214!important;color:#687079!important}.v5-table td{border-color:#1d2125!important}
.v5-empty{background:#0c0e10!important;color:#6e757d!important}

/* ---------- POS ---------- */
.pos-grid,.pos-main,.pos-cart,.pos-panel{background:#070809;color:#e9ebed}
.pos-product,.product-card,.cart-item,.pos-summary{background:#0c0e10!important;border-color:#24282d!important;color:#e7e9eb!important}
.pos-product:hover,.product-card:hover{border-color:#4a311f!important}
.sticky-pos{background:#0c0e10!important;border-color:#24282d!important}

/* ---------- Dashboard keeps reference layout but inherits global typography ---------- */
.dashboard-page .ref-dashboard{max-width:1530px}
.dashboard-page .ref-welcome h1{font-size:28px}
.dashboard-page .ref-sales-card,.dashboard-page .ref-mini,.dashboard-page .ref-panel,.dashboard-page .ref-op{border-color:#24282d;background:#0c0e10}
.dashboard-page .ref-section-title h2{font-size:18px}

/* ---------- Login: same visual language, not a separate purple product ---------- */
.login-page{background:#070809!important;color:#f2f4f6!important}
.login-grid{background:#070809!important}
.login-visual{background:#0b0d0f!important;border-right:1px solid #24282d!important}
.login-brand .brand-mark,.login-panel>.brand-mark{background:transparent!important;color:var(--brand)!important;box-shadow:none!important}
.login-panel{background:#0c0e10!important;border:1px solid #24282d!important;color:#f1f3f5!important;box-shadow:0 25px 80px rgba(0,0,0,.35)!important}
.login-panel h1,.login-visual h1{color:#f5f6f7!important}
.login-panel p,.login-visual p,.login-meta{color:#777e86!important}
.login-panel .form label{color:#bfc4c9!important}
.login-panel .form input{background:#101214!important;border-color:#292e34!important;color:#fff!important}
.login-panel .btn.primary{background:var(--brand)!important}
.login-error{background:#281214!important;border-color:#6e2930!important;color:#ff9da2!important}

/* ---------- Responsive ---------- */
@media(max-width:1250px){
  .sidebar,.dashboard-page .sidebar{width:198px}.main,.dashboard-page .main{margin-left:198px}
  .top-select{min-width:88px}.top-select:nth-child(2){display:none}
}
@media(max-width:900px){
  .sidebar,.dashboard-page .sidebar{width:285px;transform:translateX(-105%);transition:transform .22s ease}
  .sidebar.open,.dashboard-page .sidebar.open{transform:translateX(0)}
  .main,.dashboard-page .main{margin-left:0}
  .content,.dashboard-page .content{padding:20px 15px 88px}
  .topbar,.dashboard-page .topbar{height:57px;padding:0 10px}
  .global-search{display:none}
  .top-title{min-width:0}.top-title strong{font-size:14px}
  .top-select{display:none}.top-actions{margin-left:auto}
}
@media(max-width:560px){
  .top-pill{display:none}.user-chip-copy{display:none}
  .content,.dashboard-page .content{padding:17px 11px 82px}
  .toolbar h1{font-size:20px}
  .card>h1,.card>h2,.card>h3{font-size:13px}
  .sidebar,.dashboard-page .sidebar{width:285px}
}

/* =====================================================================
   TN75 V5.3 — HYPER-POS REFERENCE VISUAL SYSTEM
   Master UI contract for Dashboard + every internal page.
   ===================================================================== */
:root{
  --tn-bg:#070809;
  --tn-panel:#0c0e10;
  --tn-panel-2:#101214;
  --tn-panel-3:#14171a;
  --tn-line:#252a2f;
  --tn-line-soft:#1d2125;
  --tn-text:#f1f3f5;
  --tn-text-2:#d2d6da;
  --tn-muted:#747b83;
  --tn-muted-2:#5f666e;
  --tn-orange:#ff7815;
  --tn-orange-2:#ff8a32;
  --tn-green:#20c995;
  --tn-red:#ff5962;
  --tn-yellow:#f2c52e;
  --tn-sidebar:224px;
  --tn-topbar:58px;
}

html{background:var(--tn-bg)}
body:not(.login-page){
  background:var(--tn-bg)!important;
  color:var(--tn-text)!important;
  font-family:'DM Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:13px;
  line-height:1.45;
}
body:not(.login-page) a{color:inherit}

/* ---------- Global shell: exact reference proportions ---------- */
.sidebar,
.dashboard-page .sidebar{
  width:var(--tn-sidebar)!important;
  padding:8px 8px 10px!important;
  background:#0b0d0f!important;
  border-right:1px solid #202428!important;
  box-shadow:none!important;
}
.main,
.dashboard-page .main{margin-left:var(--tn-sidebar)!important;min-height:100vh}
.sidebar-scroll{height:calc(100vh - 130px)!important;padding:8px 0 10px!important}
.sidebar-bottom{margin-top:auto!important}

/* ---------- Brand / sidebar ---------- */
.brand,
.dashboard-page .brand{
  height:50px!important;
  min-height:50px!important;
  padding:2px 7px 9px!important;
  gap:8px!important;
  border-bottom:1px solid #1d2024!important;
}
.brand-mark,
.dashboard-page .brand-mark{
  width:38px!important;height:38px!important;
  border-radius:6px!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  line-height:.8!important;
}
.brand-mark strong,.dashboard-page .brand-mark strong{
  font:900 16px Manrope!important;
  color:var(--tn-orange)!important;
  letter-spacing:-.08em!important;
}
.brand-mark small,.dashboard-page .brand-mark small{
  font:900 10px Manrope!important;
  color:#fff!important;
  letter-spacing:.03em!important;
}
.brand-copy strong,.dashboard-page .brand-copy strong{
  font:800 13px Manrope!important;
  color:#f5f6f7!important;
  line-height:1.05!important;
}
.brand-copy small,.dashboard-page .brand-copy small{
  margin-top:3px!important;
  color:#70767d!important;
  font-size:8px!important;
}
.brand-collapse{width:25px!important;height:25px!important;font-size:10px!important;color:#697078!important}

.nav-section-label,.dashboard-page .nav-section-label{
  padding:12px 8px 6px!important;
  color:#5f666e!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.nav-link,.nav-group-toggle,
.dashboard-page .nav-link,.dashboard-page .nav-group-toggle{
  min-height:36px!important;
  padding:5px 7px!important;
  gap:8px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  color:#aeb4ba!important;
  font-size:13px!important;
  font-weight:600!important;
}
.nav-icon,.dashboard-page .nav-icon{
  width:24px!important;height:24px!important;flex-basis:24px!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#747b83!important;
  font-size:12px!important;
}
.nav-link:hover,.nav-group-toggle:hover,
.dashboard-page .nav-link:hover,.dashboard-page .nav-group-toggle:hover{
  background:#14171a!important;
  border-color:#20252a!important;
  color:#fff!important;
}
.nav-link.active,.dashboard-page .nav-link.active{
  background:#16191d!important;
  border-color:#20252a!important;
  box-shadow:inset 2px 0 0 var(--tn-orange)!important;
  color:#fff!important;
}
.nav-link.active .nav-icon,
.nav-group.is-open>.nav-group-toggle .nav-icon,
.dashboard-page .nav-link.active .nav-icon,
.dashboard-page .nav-group.is-open>.nav-group-toggle .nav-icon{
  background:#2a1b10!important;
  color:var(--tn-orange)!important;
  box-shadow:none!important;
}
.nav-group.is-open>.nav-group-toggle,
.dashboard-page .nav-group.is-open>.nav-group-toggle{
  background:transparent!important;
  border-color:transparent!important;
  color:#c7ccd1!important;
}
.nav-chevron{font-size:10px!important;color:#626970!important}
.nav-submenu,
.dashboard-page .nav-submenu{
  padding-left:30px!important;
  margin-left:18px!important;
  border-left:1px solid #22262a!important;
}
.nav-sublink,
.dashboard-page .nav-sublink{
  min-height:32px!important;
  padding:5px 8px!important;
  border-radius:5px!important;
  color:#858c94!important;
  font-size:12px!important;
}
.nav-sublink:hover{background:#14171a!important;color:#fff!important}
.nav-sublink.active{background:#171a1d!important;color:#fff!important}
.sub-dot{width:4px!important;height:4px!important;flex-basis:4px!important;background:#555c64!important}
.nav-sublink.active .sub-dot{background:var(--tn-orange)!important}
.branch-card,.dashboard-page .branch-card{
  background:#101214!important;border-color:#22262a!important;border-radius:8px!important;padding:9px!important
}
.branch-card strong,.dashboard-page .branch-card strong{font-size:11px!important;color:#e7e9eb!important}
.branch-card small,.dashboard-page .branch-card small{font-size:8px!important;color:#6f767e!important}
.logout-link,.dashboard-page .logout-link{min-height:32px!important;font-size:11px!important;color:#8b9299!important}

/* ---------- Top toolbar ---------- */
.topbar,.dashboard-page .topbar{
  height:var(--tn-topbar)!important;
  min-height:var(--tn-topbar)!important;
  padding:0 14px 0 16px!important;
  gap:12px!important;
  background:#0b0d0f!important;
  border-bottom:1px solid #22262a!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.topbar-left{gap:12px!important}
.top-title{min-width:90px!important}
.top-title strong,.dashboard-page .top-title strong{
  font:800 16px Manrope!important;
  color:#f4f5f6!important;
  letter-spacing:-.03em!important;
}
.global-search{
  width:min(440px,42vw)!important;height:36px!important;
  padding:0 10px!important;
  border:1px solid #252a2f!important;
  border-radius:8px!important;
  background:#101214!important;
}
.global-search input{font-size:11px!important;color:#e8eaec!important}
.global-search input::placeholder{color:#5f666e!important}
.top-actions{gap:7px!important}
.top-select{
  min-width:105px!important;height:36px!important;
  border:1px solid #252a2f!important;border-radius:8px!important;
  background:#101214!important;color:#dfe2e5!important;
  font-size:10px!important;
}
.top-select small{font-size:7px!important;color:#626970!important}
.top-select b{font-size:10px!important;color:#eef0f2!important}
.top-icon{width:36px!important;height:36px!important;border-radius:8px!important;background:#101214!important;border-color:#252a2f!important}
.top-icon.accent{background:var(--tn-orange)!important;border-color:var(--tn-orange)!important;color:#fff!important}
.top-pill{padding:7px 10px!important;background:#08261e!important;color:#27ce99!important;border:1px solid #0e3e30!important;font-size:9px!important}
.user-chip{height:38px!important;border-radius:8px!important;background:#101214!important;border-color:#252a2f!important}
.user-avatar{width:29px!important;height:29px!important;background:#25292e!important}
.user-chip strong{font-size:11px!important;color:#f1f3f5!important}
.user-chip small{font-size:8px!important;color:#737a82!important}
.user-dropdown{background:#101214!important;border-color:#292e34!important;color:#e9ebed!important;border-radius:9px!important}
.user-dropdown-item{font-size:12px!important;color:#b9bec4!important}
.user-dropdown-item:hover{background:#181b1f!important;color:#fff!important}

/* ---------- Universal page canvas ---------- */
.content,.dashboard-page .content{
  max-width:none!important;
  margin:0!important;
  padding:28px 30px 50px!important;
  background:#070809!important;
  color:#f2f4f6!important;
}
.toolbar{margin-bottom:20px!important}
.toolbar h1,.toolbar h2,.toolbar h3{
  margin:0!important;
  color:#f4f5f6!important;
  font:800 25px Manrope!important;
  letter-spacing:-.045em!important;
}
.toolbar p,.toolbar .muted,.muted{font-size:12px!important;color:#777e86!important}
.eyebrow{font-size:9px!important;color:#737a82!important}

/* ---------- Universal containers ---------- */
.card,.v5-card,.panel,.summary,.profile-card,.service-card,.customer-card,.report-card,
.ref-panel,.ref-sales-card,.ref-mini,.ref-op{
  background:#0c0e10!important;
  border:1px solid #24282d!important;
  border-radius:10px!important;
  box-shadow:none!important;
  color:#e9ebed!important;
}
.card>h1,.card>h2,.card>h3{
  padding:17px 18px!important;
  font:800 15px Manrope!important;
  color:#f0f2f4!important;
  border-bottom:1px solid #24282d!important;
}
.card-header{padding:15px 18px!important;border-bottom:1px solid #24282d!important}
.card-header h3{font-size:13px!important;color:#eef0f2!important}
.card-header p{font-size:10px!important;color:#737a82!important}
.card-body{padding:18px!important}
.section-title h3{font-size:15px!important;color:#eef0f2!important}
.section-title span{font-size:10px!important;color:#70777f!important}

/* ---------- Universal forms ---------- */
.form,.form-grid{color:#e6e8ea!important}
.form label,.form-grid label{font-size:12px!important;color:#b9bec4!important;font-weight:700!important}
.form input,.form select,.form textarea,.form-grid input,.form-grid select,.form-grid textarea,
.inline-form input,.inline-form select,.card input,.card select,.card textarea,
input:not([type=hidden]),select,textarea{
  min-height:44px!important;
  padding:10px 12px!important;
  background:#101214!important;
  color:#e8eaec!important;
  border:1px solid #292e34!important;
  border-radius:8px!important;
  font-size:12px!important;
}
.form textarea,.card textarea{min-height:105px!important}
input::placeholder,textarea::placeholder{color:#60676f!important}
.form input:focus,.form select:focus,.form textarea:focus,.card input:focus,.card select:focus,.card textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:#a94e12!important;
  box-shadow:0 0 0 3px rgba(255,120,21,.09)!important;
}

/* ---------- Universal tables: readable, dense like reference ---------- */
.table-wrap,.table-wrapper,.v5-pivot{background:#0c0e10!important;border:1px solid #24282d!important;border-radius:10px!important;overflow:auto!important}
.table,.table-wrap table,.table-wrapper table,.v5-table{width:100%!important;border-collapse:collapse!important;color:#dfe2e5!important}
.table th,.table-wrap th,.table-wrapper th,.v5-table th{
  background:#101214!important;
  color:#737a82!important;
  border-bottom:1px solid #24282d!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  padding:12px 14px!important;
  white-space:nowrap!important;
}
.table td,.table-wrap td,.table-wrapper td,.v5-table td{
  background:#0c0e10!important;
  color:#cdd1d5!important;
  border-bottom:1px solid #1d2125!important;
  font-size:12px!important;
  line-height:1.4!important;
  padding:13px 14px!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
.table tbody tr:hover td,.table-wrap tbody tr:hover td,.table-wrapper tbody tr:hover td,.v5-table tbody tr:hover td{background:#111417!important}
.table td strong,.table-wrap td strong{color:#f0f2f4!important;font-weight:700!important}

/* ---------- Buttons / badges ---------- */
.btn,.btn.secondary,.btn-light{
  min-height:38px!important;
  padding:8px 13px!important;
  border-radius:7px!important;
  background:#101214!important;
  border:1px solid #2a2f35!important;
  color:#dce0e3!important;
  font-size:11px!important;
  font-weight:700!important;
}
.btn.primary,.btn-primary{background:var(--tn-orange)!important;border-color:var(--tn-orange)!important;color:#fff!important;box-shadow:0 8px 18px rgba(255,120,21,.15)!important}
.btn.success,.btn-success{background:#0b6f54!important;border-color:#0b8b68!important;color:#fff!important}
.btn.danger,.btn-danger{background:#7e2027!important;border-color:#a82c34!important;color:#fff!important}
.badge,.status,.v5-badge{font-size:10px!important}

/* ---------- Standard page toolbars / filters ---------- */
.v5-toolbar,.v5-actionbar,.v5-filter{
  background:#0c0e10!important;
  border-color:#24282d!important;
  color:#e8eaec!important;
}
.v5-toolbar{padding:13px 15px!important;border-radius:10px!important}
.v5-filter{padding:12px!important;border:1px solid #24282d!important;border-radius:10px!important}
.v5-kpi,.kpi-card,.kpi{background:#0c0e10!important;border-color:#24282d!important;box-shadow:none!important}
.kpi-label,.kpi span{font-size:10px!important;color:#737a82!important}
.kpi-value,.kpi strong,.metric{color:#f3f4f5!important}

/* ---------- Dashboard: remove centered narrow canvas; match reference geometry ---------- */
.dashboard-page .content{padding:27px 30px 50px!important}
.dashboard-page .ref-dashboard{max-width:none!important;margin:0!important}
.dashboard-page .ref-welcome{margin-bottom:23px!important}
.dashboard-page .ref-welcome h1{font-size:28px!important}
.dashboard-page .ref-welcome p{font-size:11px!important}
.dashboard-page .ref-sales-grid{grid-template-columns:minmax(0,1.42fr) minmax(360px,1fr)!important;gap:12px!important}
.dashboard-page .ref-sales-card{min-height:246px!important;padding:18px 20px!important}
.dashboard-page .ref-mini{min-height:76px!important}
.dashboard-page .ref-section{margin-top:24px!important}
.dashboard-page .ref-section-title{margin-bottom:10px!important}
.dashboard-page .ref-section-title h2{font-size:18px!important}
.dashboard-page .ref-op-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.dashboard-page .ref-performance{grid-template-columns:minmax(0,2.05fr) minmax(330px,1fr)!important;gap:12px!important}
.dashboard-page .ref-insights{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr)!important}
.dashboard-page .ref-bottom{grid-template-columns:minmax(0,1.75fr) minmax(330px,1fr)!important}
.dashboard-page .ref-card-head strong{font-size:31px!important}
.dashboard-page .panel-head h3{font-size:13px!important}
.dashboard-page .panel-head small,.dashboard-page .panel-head div:last-child{font-size:10px!important}
.dashboard-page .metrics-row strong{font-size:22px!important}
.dashboard-page .metrics-row small{font-size:9px!important}
.dashboard-page .metrics-row mark{font-size:9px!important}
.dashboard-page .list-table strong{font-size:11px!important}
.dashboard-page .list-table strong small{font-size:9px!important}
.dashboard-page .list-table b{font-size:11px!important}
.dashboard-page .activity-list p{font-size:10px!important}
.dashboard-page .category-list>div{font-size:10px!important}
.dashboard-page .category-list b{font-size:10px!important}
.dashboard-page .heatmap{gap:5px!important}
.dashboard-page .heatmap label{font-size:9px!important}
.dashboard-page .shift-table>div:not(.shift-head){font-size:10px!important}

/* ---------- Login: same font/colour contract ---------- */
.login-page{font-family:'DM Sans',Inter,system-ui,sans-serif!important}
.login-page .login-panel .form label{font-size:12px!important}
.login-page .login-panel .form input{font-size:13px!important;min-height:48px!important}
.login-page .login-panel .btn{font-size:12px!important;min-height:50px!important}

/* ---------- Responsive: preserve desktop reference until tablet ---------- */
@media(max-width:1250px){
  :root{--tn-sidebar:210px}
  .sidebar,.dashboard-page .sidebar{width:210px!important}
  .main,.dashboard-page .main{margin-left:210px!important}
  .dashboard-page .ref-sales-grid{grid-template-columns:1fr!important}
  .dashboard-page .ref-performance{grid-template-columns:1fr!important}
  .dashboard-page .ref-insights{grid-template-columns:1fr 1fr!important}
  .dashboard-page .ref-bottom{grid-template-columns:1fr!important}
}
@media(max-width:900px){
  .sidebar,.dashboard-page .sidebar{width:285px!important;transform:translateX(-105%)}
  .sidebar.open,.dashboard-page .sidebar.open{transform:translateX(0)}
  .main,.dashboard-page .main{margin-left:0!important}
  .content,.dashboard-page .content{padding:20px 16px 90px!important}
  .topbar,.dashboard-page .topbar{height:58px!important;min-height:58px!important;padding:0 10px!important}
  .global-search{display:none!important}
  .dashboard-page .ref-op-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-page .ref-insights{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .content,.dashboard-page .content{padding:17px 12px 85px!important}
  .toolbar h1,.toolbar h2,.toolbar h3{font-size:21px!important}
  .dashboard-page .ref-welcome h1{font-size:23px!important}
  .dashboard-page .ref-op-grid{grid-template-columns:1fr!important}
  .dashboard-page .ref-sales-card{min-height:220px!important;padding:15px!important}
  .dashboard-page .ref-card-head strong{font-size:27px!important}
  .table th,.table-wrap th,.table-wrapper th,.v5-table th{font-size:9px!important;padding:10px!important}
  .table td,.table-wrap td,.table-wrapper td,.v5-table td{font-size:11px!important;padding:11px 10px!important}
}

/* =====================================================================
   TN75 RETAIL OS V5.4 — HYPER POS MASTER VISUAL SYSTEM
   This is the final override layer. It intentionally normalizes EVERY
   internal page, not only the Dashboard.
   ===================================================================== */
:root{
  --tn-bg:#070809;
  --tn-panel:#0c0e10;
  --tn-panel-2:#101214;
  --tn-panel-3:#14171a;
  --tn-line:#252a2f;
  --tn-line-soft:#1c2024;
  --tn-text:#f4f5f6;
  --tn-text-2:#d6d9dc;
  --tn-muted:#737a82;
  --tn-orange:#ff7815;
  --tn-orange-2:#ff8a2a;
  --tn-green:#18c58f;
  --tn-red:#ff5962;
  --tn-yellow:#e8bf22;
  --tn-sidebar:224px;
  --tn-topbar:58px;
}

html,body{background:var(--tn-bg)!important;color:var(--tn-text)!important}
body:not(.login-page){font-family:'DM Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif!important;font-size:13px!important;line-height:1.45!important;background:var(--tn-bg)!important}

/* SHELL */
body:not(.login-page) .sidebar{width:var(--tn-sidebar)!important;background:#0a0c0e!important;color:#d9dde0!important;border-right:1px solid #202428!important;box-shadow:none!important;padding:8px 8px 10px!important}
body:not(.login-page) .main{margin-left:var(--tn-sidebar)!important;min-height:100vh!important;background:var(--tn-bg)!important}
body:not(.login-page) .content{max-width:none!important;width:100%!important;margin:0!important;padding:28px 30px 52px!important;background:var(--tn-bg)!important;color:var(--tn-text)!important}

/* SIDEBAR */
body:not(.login-page) .brand{height:50px!important;min-height:50px!important;padding:2px 6px 10px!important;gap:8px!important;border-bottom:1px solid #202428!important;background:transparent!important}
body:not(.login-page) .brand-mark{width:40px!important;height:40px!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;color:var(--tn-orange)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;line-height:.8!important}
body:not(.login-page) .brand-mark strong{font:900 17px Manrope!important;color:var(--tn-orange)!important;letter-spacing:-.08em!important}
body:not(.login-page) .brand-mark small{font:900 10px Manrope!important;color:#fff!important;margin-top:3px!important}
body:not(.login-page) .brand-copy strong{font:800 12px Manrope!important;color:#f1f3f4!important;line-height:1.05!important}
body:not(.login-page) .brand-copy small{font-size:7px!important;color:#626a72!important;margin-top:4px!important}
body:not(.login-page) .brand-collapse{margin-left:auto!important;width:24px!important;height:24px!important;border:0!important;background:transparent!important;color:#687078!important;border-radius:5px!important;font-size:10px!important}
body:not(.login-page) .brand-collapse:hover{background:#15181b!important;color:#fff!important}
body:not(.login-page) .sidebar-scroll{height:calc(100vh - 118px)!important;padding:8px 0!important;overflow-y:auto!important}
body:not(.login-page) .sidebar-scroll::-webkit-scrollbar{width:4px!important}
body:not(.login-page) .sidebar-scroll::-webkit-scrollbar-thumb{background:#2a2e33!important;border-radius:10px!important}
body:not(.login-page) .nav-label{padding:12px 8px 7px!important;color:#666e76!important;font-size:8px!important;font-weight:800!important;letter-spacing:.14em!important}
body:not(.login-page) .main-nav{gap:1px!important}
body:not(.login-page) .sidebar .nav-link,
body:not(.login-page) .sidebar .nav-group-toggle{min-height:34px!important;padding:6px 9px!important;border:1px solid transparent!important;border-radius:7px!important;background:transparent!important;color:#aeb5bc!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important}
body:not(.login-page) .sidebar .nav-link:hover,
body:not(.login-page) .sidebar .nav-group-toggle:hover{background:#111417!important;color:#f3f4f5!important}
body:not(.login-page) .sidebar .nav-link.active{background:#15181b!important;border-color:#171a1d!important;color:#fff!important;box-shadow:none!important}
body:not(.login-page) .sidebar .nav-link.active:before{content:"";width:2px;height:18px;background:var(--tn-orange);border-radius:2px;position:absolute;margin-left:-9px}
body:not(.login-page) .sidebar .nav-icon{width:18px!important;height:18px!important;background:transparent!important;color:#69727a!important;border-radius:4px!important;font-size:12px!important;flex:0 0 18px!important}
body:not(.login-page) .sidebar .nav-link.active .nav-icon,
body:not(.login-page) .sidebar .nav-group.is-open>.nav-group-toggle .nav-icon{color:var(--tn-orange)!important;background:transparent!important;box-shadow:none!important}
body:not(.login-page) .sidebar .nav-text{font-size:12px!important}
body:not(.login-page) .sidebar .nav-chevron{font-size:11px!important;color:#687078!important}
body:not(.login-page) .sidebar .nav-group.is-open>.nav-group-toggle{background:transparent!important;color:#dce0e3!important;border-color:transparent!important}
body:not(.login-page) .sidebar .nav-submenu{padding:1px 0 3px 18px!important;margin:0!important;border-left:1px solid #1f2428!important}
body:not(.login-page) .sidebar .nav-sublink{min-height:31px!important;padding:5px 8px!important;border-radius:6px!important;color:#8f979f!important;font-size:11px!important}
body:not(.login-page) .sidebar .nav-sublink.active{background:#15181b!important;color:#fff!important}
body:not(.login-page) .sidebar .nav-sublink.active:before{content:"";width:3px;height:3px;background:var(--tn-orange);border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
body:not(.login-page) .sidebar-bottom{padding:8px 0 0!important;border-top:1px solid #202428!important}
body:not(.login-page) .branch-card{background:#101214!important;border:1px solid #24282d!important;border-radius:8px!important;padding:8px!important;color:#dfe3e6!important}
body:not(.login-page) .branch-card strong{font-size:10px!important;color:#f1f3f5!important}
body:not(.login-page) .branch-card small{font-size:8px!important;color:#6f777f!important}
body:not(.login-page) .branch-dot{width:6px!important;height:6px!important;background:var(--tn-green)!important;box-shadow:0 0 0 3px rgba(24,197,143,.08)!important}
body:not(.login-page) .logout-link{font-size:10px!important;color:#777f87!important;padding:8px!important}

/* TOP BAR */
body:not(.login-page) .topbar{height:var(--tn-topbar)!important;min-height:var(--tn-topbar)!important;padding:0 14px 0 16px!important;gap:12px!important;background:#0b0d0f!important;color:#f4f5f6!important;border-bottom:1px solid #202428!important;box-shadow:none!important;backdrop-filter:none!important}
body:not(.login-page) .topbar-left{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;flex:1!important}
body:not(.login-page) .top-title{flex:0 0 auto!important;min-width:74px!important}
body:not(.login-page) .top-title strong{font:800 15px Manrope!important;color:#f4f5f6!important;letter-spacing:-.03em!important}
body:not(.login-page) .top-title small{font-size:8px!important;color:#6f757c!important}
body:not(.login-page) .global-search{width:min(450px,43vw)!important;height:36px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 9px!important;background:#101214!important;border:1px solid #252a2f!important;border-radius:8px!important;color:#69727a!important}
body:not(.login-page) .global-search input{height:30px!important;min-height:30px!important;padding:0!important;border:0!important;background:transparent!important;color:#dfe3e6!important;font-size:11px!important;outline:0!important}
body:not(.login-page) .global-search input::placeholder{color:#596169!important}
body:not(.login-page) .global-search kbd{background:#14171a!important;border:1px solid #282d32!important;color:#737b83!important;border-radius:4px!important;font-size:8px!important;padding:2px 5px!important}
body:not(.login-page) .top-actions{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important}
body:not(.login-page) .top-select{height:40px!important;min-width:105px!important;padding:4px 10px!important;border:1px solid #252a2f!important;border-radius:8px!important;background:#101214!important;color:#dfe3e6!important;font-size:9px!important;text-align:left!important;line-height:1.05!important}
body:not(.login-page) .top-select small{display:block!important;color:#69727a!important;font-size:7px!important;letter-spacing:.08em!important;margin-bottom:2px!important}
body:not(.login-page) .top-select b{font-size:10px!important;color:#f0f2f3!important}
body:not(.login-page) .top-icon{width:36px!important;height:36px!important;border-radius:8px!important;border:1px solid #282d32!important;background:#101214!important;color:#aeb5bb!important;font-size:14px!important}
body:not(.login-page) .top-icon.accent{background:var(--tn-orange)!important;border-color:var(--tn-orange)!important;color:#fff!important}
body:not(.login-page) .top-pill{padding:8px 10px!important;border-radius:999px!important;background:rgba(24,197,143,.12)!important;color:#20d29b!important;border:1px solid rgba(24,197,143,.15)!important;font-size:9px!important;font-weight:800!important}
body:not(.login-page) .user-chip{height:42px!important;min-height:42px!important;padding:4px 7px 4px 4px!important;border:1px solid #292e33!important;border-radius:9px!important;background:#101214!important;color:#fff!important}
body:not(.login-page) .user-avatar{width:32px!important;height:32px!important;border-radius:50%!important;background:#24282d!important;color:#fff!important;font-size:9px!important}
body:not(.login-page) .user-chip-copy strong{font-size:10px!important;color:#f1f3f4!important}
body:not(.login-page) .user-chip-copy small{font-size:8px!important;color:#727a82!important}
body:not(.login-page) .user-chevron{color:#697179!important;font-size:11px!important}
body:not(.login-page) .user-dropdown{background:#101214!important;border:1px solid #2a2f34!important;box-shadow:0 22px 55px rgba(0,0,0,.45)!important;color:#e9ecee!important}
body:not(.login-page) .user-dropdown-item{color:#dce0e3!important}

/* INTERNAL PAGE HEADER */
body:not(.login-page) .toolbar{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:18px!important;margin:0 0 20px!important;padding:0!important}
body:not(.login-page) .toolbar h1{font:800 23px Manrope!important;color:#f4f5f6!important;letter-spacing:-.045em!important;margin:0!important}
body:not(.login-page) .toolbar h2{font:800 18px Manrope!important;color:#f4f5f6!important;margin:0!important}
body:not(.login-page) .toolbar h3{font:800 15px Manrope!important;color:#f4f5f6!important;margin:0!important}
body:not(.login-page) .toolbar p,.toolbar .muted,.muted{color:#737a82!important;font-size:11px!important}
body:not(.login-page) .eyebrow{color:#737a82!important;font-size:8px!important;letter-spacing:.13em!important}

/* UNIVERSAL PANELS / CONTAINERS */
body:not(.login-page) .card,
body:not(.login-page) .panel,
body:not(.login-page) .v5-card,
body:not(.login-page) .profile-card,
body:not(.login-page) .service-card,
body:not(.login-page) .customer-card,
body:not(.login-page) .report-card,
body:not(.login-page) .summary-card,
body:not(.login-page) .settings-card{background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:10px!important;box-shadow:none!important;color:#dfe3e6!important}
body:not(.login-page) .card>h1,body:not(.login-page) .card>h2,body:not(.login-page) .card>h3{padding:16px 18px!important;background:#0c0e10!important;color:#f1f3f4!important;border-bottom:1px solid #252a2f!important;font:800 15px Manrope!important}
body:not(.login-page) .card-header{padding:13px 16px!important;background:#0c0e10!important;border-bottom:1px solid #252a2f!important}
body:not(.login-page) .card-header h3{font-size:13px!important;color:#f0f2f3!important}
body:not(.login-page) .card-header p{font-size:9px!important;color:#707880!important}
body:not(.login-page) .card-body{padding:16px!important}

/* FORMS */
body:not(.login-page) .form,
body:not(.login-page) .form-grid{padding:18px!important;background:#0c0e10!important;color:#dfe3e6!important}
body:not(.login-page) .form-grid{gap:16px!important}
body:not(.login-page) .form label,body:not(.login-page) .form-grid label{font-size:11px!important;color:#cdd2d6!important;font-weight:700!important;gap:6px!important}
body:not(.login-page) input:not([type=hidden]),
body:not(.login-page) select,
body:not(.login-page) textarea,
body:not(.login-page) .form input,
body:not(.login-page) .form select,
body:not(.login-page) .form textarea,
body:not(.login-page) .form-grid input,
body:not(.login-page) .form-grid select,
body:not(.login-page) .form-grid textarea,
body:not(.login-page) .card input,
body:not(.login-page) .card select,
body:not(.login-page) .card textarea{min-height:42px!important;width:100%!important;padding:9px 11px!important;background:#101214!important;border:1px solid #292e34!important;border-radius:7px!important;color:#e8ebed!important;font-size:12px!important;outline:none!important}
body:not(.login-page) textarea{min-height:100px!important}
body:not(.login-page) input::placeholder,body:not(.login-page) textarea::placeholder{color:#596169!important}
body:not(.login-page) input:focus,body:not(.login-page) select:focus,body:not(.login-page) textarea:focus{border-color:#b85b1a!important;box-shadow:0 0 0 3px rgba(255,120,21,.09)!important}

/* TABLES */
body:not(.login-page) .table-wrap,body:not(.login-page) .table-wrapper,body:not(.login-page) .v5-pivot{background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:10px!important;overflow:auto!important}
body:not(.login-page) table.table,body:not(.login-page) .table-wrap table,body:not(.login-page) .table-wrapper table,body:not(.login-page) .v5-table{width:100%!important;border-collapse:collapse!important;background:#0c0e10!important;color:#dfe3e6!important}
body:not(.login-page) .table th,body:not(.login-page) .table-wrap th,body:not(.login-page) .table-wrapper th,body:not(.login-page) .v5-table th{height:38px!important;padding:9px 13px!important;background:#101214!important;color:#737b83!important;border-bottom:1px solid #252a2f!important;font-size:9px!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;white-space:nowrap!important}
body:not(.login-page) .table td,body:not(.login-page) .table-wrap td,body:not(.login-page) .table-wrapper td,body:not(.login-page) .v5-table td{height:44px!important;padding:10px 13px!important;background:#0c0e10!important;color:#cfd4d8!important;border-bottom:1px solid #1d2125!important;font-size:12px!important;line-height:1.35!important;white-space:nowrap!important;vertical-align:middle!important}
body:not(.login-page) .table tbody tr:hover td,body:not(.login-page) .table-wrap tbody tr:hover td,body:not(.login-page) .table-wrapper tbody tr:hover td{background:#111417!important}
body:not(.login-page) .table td strong{color:#f0f2f4!important;font-weight:700!important}

/* BUTTONS */
body:not(.login-page) .btn,body:not(.login-page) button.btn{min-height:38px!important;padding:8px 13px!important;border-radius:7px!important;border:1px solid #2a2f34!important;background:#101214!important;color:#dfe3e6!important;font-size:11px!important;font-weight:700!important;box-shadow:none!important}
body:not(.login-page) .btn.primary,body:not(.login-page) .btn-primary{background:var(--tn-orange)!important;border-color:var(--tn-orange)!important;color:#fff!important;box-shadow:0 8px 20px rgba(255,120,21,.13)!important}
body:not(.login-page) .btn.success,body:not(.login-page) .btn-success{background:#0d6f56!important;border-color:#138e6e!important;color:#fff!important}
body:not(.login-page) .btn.danger,body:not(.login-page) .btn-danger{background:#7e242a!important;border-color:#a7333b!important;color:#fff!important}
body:not(.login-page) .btn.warn{background:#715c0d!important;border-color:#907717!important;color:#fff!important}
body:not(.login-page) .actions{gap:7px!important}

/* BADGES / STATUS */
body:not(.login-page) .badge,body:not(.login-page) .status,body:not(.login-page) .v5-badge{padding:4px 7px!important;border-radius:999px!important;background:#1a1e22!important;color:#aeb5bb!important;border:1px solid #282d32!important;font-size:9px!important;font-weight:800!important}
body:not(.login-page) .badge-success,body:not(.login-page) .badge.ok{background:rgba(24,197,143,.12)!important;color:#20d29b!important;border-color:rgba(24,197,143,.15)!important}
body:not(.login-page) .badge-warning,body:not(.login-page) .badge.warn{background:rgba(232,191,34,.12)!important;color:#e8c33a!important;border-color:rgba(232,191,34,.15)!important}
body:not(.login-page) .badge-danger,body:not(.login-page) .badge.danger{background:rgba(255,89,98,.12)!important;color:#ff6971!important;border-color:rgba(255,89,98,.15)!important}

/* FILTERS / ACTION BARS */
body:not(.login-page) .v5-toolbar,body:not(.login-page) .v5-actionbar,body:not(.login-page) .v5-filter,.filter-bar,.action-bar{background:#0c0e10!important;border:1px solid #252a2f!important;color:#dfe3e6!important;border-radius:10px!important}
body:not(.login-page) .v5-toolbar,body:not(.login-page) .v5-actionbar{padding:12px 14px!important}
body:not(.login-page) .v5-filter,.filter-bar{padding:11px!important}

/* DASHBOARD — reference proportions */
body.dashboard-page .content{padding:27px 30px 48px!important;background:#070809!important}
body.dashboard-page .ref-dashboard{max-width:none!important;width:100%!important;margin:0!important}
body.dashboard-page .ref-welcome{margin:0 0 23px!important}
body.dashboard-page .ref-welcome h1{font:800 25px Manrope!important;color:#f4f5f6!important;letter-spacing:-.045em!important;margin:5px 0 8px!important}
body.dashboard-page .ref-welcome p{font-size:11px!important;color:#737a82!important}
body.dashboard-page .ref-sales-grid{grid-template-columns:minmax(0,1.55fr) minmax(360px,.95fr)!important;gap:12px!important}
body.dashboard-page .ref-sales-card{min-height:246px!important;padding:18px 20px!important;background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:10px!important}
body.dashboard-page .ref-card-head strong{font:800 31px Manrope!important;color:#f4f5f6!important;letter-spacing:-.045em!important}
body.dashboard-page .ref-card-head span{font-size:9px!important;color:#737a82!important;text-transform:uppercase!important;letter-spacing:.08em!important}
body.dashboard-page .ref-mini{min-height:76px!important;background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:10px!important}
body.dashboard-page .ref-section{margin-top:23px!important}
body.dashboard-page .ref-section-title{margin-bottom:10px!important}
body.dashboard-page .ref-section-title h2{font:800 14px Manrope!important;color:#f1f3f4!important}
body.dashboard-page .ref-section-title h2:before{content:"";display:inline-block;width:3px;height:16px;background:var(--tn-orange);border-radius:2px;margin-right:8px;vertical-align:-2px}
body.dashboard-page .ref-op-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
body.dashboard-page .ref-op-card{min-height:70px!important;background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:9px!important}
body.dashboard-page .ref-performance{grid-template-columns:minmax(0,2.05fr) minmax(330px,1fr)!important;gap:12px!important}
body.dashboard-page .ref-card,.dashboard-page .ref-performance>*,.dashboard-page .ref-bottom>*{background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:10px!important;box-shadow:none!important}
body.dashboard-page .ref-performance .panel-head{padding:13px 14px!important;border-bottom:1px solid #252a2f!important}
body.dashboard-page .metrics-row strong{font:800 21px Manrope!important;color:#f4f5f6!important}
body.dashboard-page .metrics-row small{font-size:8px!important;color:#737a82!important}
body.dashboard-page .category-list{color:#bfc5ca!important}
body.dashboard-page .category-list>div{font-size:9px!important}
body.dashboard-page .heatmap i{background:#15191c!important;border:1px solid #1e2327!important}

/* COMMON REPORT / KPI / SUMMARY AREAS */
body:not(.login-page) .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
body:not(.login-page) .kpi-card,body:not(.login-page) .kpi{background:#0c0e10!important;border:1px solid #252a2f!important;border-radius:10px!important;box-shadow:none!important}
body:not(.login-page) .kpi-label,body:not(.login-page) .kpi span{color:#737a82!important;font-size:9px!important}
body:not(.login-page) .kpi-value,body:not(.login-page) .kpi strong,body:not(.login-page) .metric{color:#f4f5f6!important;font:800 23px Manrope!important}
body:not(.login-page) .summary{background:#101214!important;border:1px solid #252a2f!important;color:#dce0e3!important}

/* MODALS / DROPDOWNS / PAGINATION */
body:not(.login-page) .modal,.modal-content,.dropdown-menu{background:#101214!important;border:1px solid #2a2f34!important;color:#e8ebed!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important}
body:not(.login-page) .modal-header{border-bottom:1px solid #252a2f!important}
body:not(.login-page) .pagination a,body:not(.login-page) .pagination button{background:#101214!important;border:1px solid #292e33!important;color:#aeb5bb!important;border-radius:6px!important}
body:not(.login-page) .pagination .active{background:var(--tn-orange)!important;border-color:var(--tn-orange)!important;color:#fff!important}

/* MOBILE */
@media(max-width:900px){
 body:not(.login-page) .sidebar{width:285px!important;transform:translateX(-105%)!important}
 body:not(.login-page) .sidebar.open{transform:translateX(0)!important}
 body:not(.login-page) .main{margin-left:0!important}
 body:not(.login-page) .content{padding:20px 16px 88px!important}
 body:not(.login-page) .global-search{display:none!important}
 body:not(.login-page) .topbar{height:58px!important;padding:0 10px!important}
 body:not(.login-page) .top-select{display:none!important}
 body.dashboard-page .ref-sales-grid,body.dashboard-page .ref-performance{grid-template-columns:1fr!important}
 body.dashboard-page .ref-op-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body:not(.login-page) .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
 body:not(.login-page) .content{padding:17px 12px 82px!important}
 body:not(.login-page) .top-title strong{font-size:14px!important}
 body.dashboard-page .ref-op-grid,body:not(.login-page) .kpi-grid{grid-template-columns:1fr!important}
 body.dashboard-page .ref-welcome h1{font-size:22px!important}
 body:not(.login-page) .table th{font-size:8px!important}
 body:not(.login-page) .table td{font-size:11px!important}
}

/* ================================================================
   V5.5 — VELZON CREATIVE-INSPIRED MASTER UI
   Original TN75 implementation; inspired by the supplied Velzon
   Creative reference. No proprietary Velzon assets are bundled.
   ================================================================ */
:root{
  --vz-bg:#f3f3f9;
  --vz-surface:#ffffff;
  --vz-surface-2:#f8f9fc;
  --vz-border:#e9ebf0;
  --vz-text:#212529;
  --vz-muted:#878a99;
  --vz-primary:#405189;
  --vz-primary-soft:#eef1fb;
  --vz-purple:#6f42c1;
  --vz-success:#0ab39c;
  --vz-warning:#f7b84b;
  --vz-danger:#f06548;
  --vz-info:#299cdb;
  --vz-shadow:0 2px 6px rgba(30,32,37,.05);
  --vz-shadow-lg:0 8px 24px rgba(30,32,37,.08);
}

html,body{min-height:100%;}
body:not(.login-page){
  background:var(--vz-bg)!important;
  color:var(--vz-text)!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:14px!important;
  line-height:1.5!important;
}
body:not(.login-page) *,body:not(.login-page) button,body:not(.login-page) input,body:not(.login-page) select,body:not(.login-page) textarea{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
}

/* Application shell */
body:not(.login-page) .sidebar{
  width:250px!important;
  padding:0!important;
  background:#fff!important;
  color:#495057!important;
  border-right:1px solid var(--vz-border)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body:not(.login-page) .main{margin-left:250px!important;min-height:100vh!important;background:var(--vz-bg)!important;}
body:not(.login-page) .sidebar-scroll{height:calc(100vh - 154px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:8px 12px 18px!important;}
body:not(.login-page) .sidebar-scroll::-webkit-scrollbar{width:5px!important}
body:not(.login-page) .sidebar-scroll::-webkit-scrollbar-thumb{background:#dfe2e8!important;border-radius:10px!important}

/* Brand */
body:not(.login-page) .brand{
  height:70px!important;
  padding:0 20px!important;
  border-bottom:1px solid var(--vz-border)!important;
  background:#fff!important;
  gap:10px!important;
}
body:not(.login-page) .brand-mark{
  width:38px!important;height:38px!important;border-radius:9px!important;
  background:linear-gradient(135deg,#405189,#6678b8)!important;
  color:#fff!important;box-shadow:none!important;
  font-family:Inter!important;
}
body:not(.login-page) .brand-mark strong{font-size:12px!important;letter-spacing:-.05em!important;color:#fff!important}
body:not(.login-page) .brand-mark small{font-size:7px!important;color:rgba(255,255,255,.8)!important;margin-top:1px!important}
body:not(.login-page) .brand-copy strong{font:700 15px Inter!important;color:#343a40!important;letter-spacing:-.02em!important}
body:not(.login-page) .brand-copy small{font:400 10px Inter!important;color:#878a99!important;margin-top:2px!important}
body:not(.login-page) .brand-collapse{
  margin-left:auto!important;width:30px!important;height:30px!important;border:0!important;
  background:#f3f6f9!important;color:#878a99!important;border-radius:7px!important;font-size:12px!important;
}
body:not(.login-page) .brand-collapse:hover{background:#eef1f7!important;color:var(--vz-primary)!important}

/* Navigation */
body:not(.login-page) .main-nav{display:flex!important;flex-direction:column!important;gap:2px!important}
body:not(.login-page) .nav-section-label,
body:not(.login-page) .sidebar .nav-label{
  padding:18px 12px 7px!important;color:#adb5bd!important;font-size:10px!important;font-weight:600!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
}
body:not(.login-page) .nav-link,
body:not(.login-page) .nav-group-toggle{
  min-height:42px!important;width:100%!important;padding:7px 11px!important;
  border:0!important;border-radius:6px!important;background:transparent!important;
  color:#5f6368!important;font-size:13px!important;font-weight:500!important;
  display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;
  transition:all .16s ease!important;
}
body:not(.login-page) .nav-link:hover,
body:not(.login-page) .nav-group-toggle:hover{background:#f5f6fa!important;color:#405189!important}
body:not(.login-page) .nav-link.active,
body:not(.login-page) .nav-group.is-open>.nav-group-toggle{
  background:#eef1fb!important;color:#405189!important;font-weight:600!important;
}
body:not(.login-page) .nav-icon{
  width:25px!important;height:25px!important;flex:0 0 25px!important;display:grid!important;place-items:center!important;
  border-radius:6px!important;background:transparent!important;color:#878a99!important;font-size:15px!important;
}
body:not(.login-page) .nav-link.active .nav-icon,
body:not(.login-page) .nav-group.is-open>.nav-group-toggle .nav-icon{color:#405189!important;background:transparent!important;box-shadow:none!important}
body:not(.login-page) .nav-text{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body:not(.login-page) .nav-chevron{margin-left:auto!important;color:#adb5bd!important;font-size:14px!important;line-height:1!important;transition:transform .15s!important}
body:not(.login-page) .nav-group.is-open>.nav-group-toggle .nav-chevron{transform:rotate(180deg)!important;color:#405189!important}
body:not(.login-page) .nav-submenu{display:none!important;padding:3px 0 4px 35px!important}
body:not(.login-page) .nav-group.is-open>.nav-submenu{display:block!important}
body:not(.login-page) .nav-sublink{
  min-height:36px!important;display:flex!important;align-items:center!important;gap:8px!important;
  padding:7px 10px!important;border-radius:5px!important;color:#74788d!important;font-size:12px!important;font-weight:400!important;
}
body:not(.login-page) .nav-sublink:hover{background:#f8f9fc!important;color:#405189!important}
body:not(.login-page) .nav-sublink.active{color:#405189!important;font-weight:600!important;background:#f5f6fb!important}
body:not(.login-page) .sub-dot{width:5px!important;height:5px!important;border-radius:50%!important;background:#ced4da!important;flex:0 0 5px!important}
body:not(.login-page) .nav-sublink.active .sub-dot{background:#405189!important}

/* Sidebar bottom */
body:not(.login-page) .sidebar-bottom{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  padding:10px 12px!important;background:#fff!important;border-top:1px solid var(--vz-border)!important;
}
body:not(.login-page) .branch-card{
  display:flex!important;align-items:center!important;gap:9px!important;padding:9px 10px!important;
  background:#f8f9fc!important;border:1px solid #eef0f4!important;border-radius:7px!important;color:#495057!important;
}
body:not(.login-page) .branch-dot{width:8px!important;height:8px!important;background:var(--vz-success)!important;border-radius:50%!important;flex:0 0 8px!important}
body:not(.login-page) .branch-card strong{font-size:12px!important;color:#343a40!important}
body:not(.login-page) .branch-card small{font-size:9px!important;color:#878a99!important}
body:not(.login-page) .logout-link{display:flex!important;align-items:center!important;gap:9px!important;padding:9px 10px!important;color:#878a99!important;font-size:12px!important}
body:not(.login-page) .logout-link:hover{color:var(--vz-danger)!important}

/* Topbar */
.velzon-menu-btn{width:36px!important;height:36px!important;border:0!important;background:transparent!important;color:#878a99!important;border-radius:6px!important;display:grid!important;place-items:center!important;font-size:17px!important}
.velzon-menu-btn:hover{background:#f3f5f8!important;color:#405189!important}
body:not(.login-page) .topbar{
  height:70px!important;position:sticky!important;top:0!important;z-index:900!important;
  padding:0 24px!important;background:#fff!important;border-bottom:1px solid var(--vz-border)!important;
  box-shadow:0 1px 2px rgba(30,32,37,.02)!important;backdrop-filter:none!important;
}
body:not(.login-page) .topbar-left{gap:22px!important}
body:not(.login-page) .top-title strong{font:600 17px Inter!important;color:#343a40!important;letter-spacing:-.02em!important}
body:not(.login-page) .global-search{
  width:350px!important;height:38px!important;border:1px solid #e1e4ea!important;background:#f8f9fa!important;
  border-radius:6px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 10px!important;color:#878a99!important;
}
body:not(.login-page) .global-search input{border:0!important;outline:0!important;background:transparent!important;color:#495057!important;font-size:12px!important;min-width:0!important}
body:not(.login-page) .global-search input::placeholder{color:#adb5bd!important}
body:not(.login-page) .global-search kbd{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:4px!important;color:#878a99!important;font-size:9px!important;padding:2px 5px!important}
body:not(.login-page) .top-actions{gap:7px!important}
body:not(.login-page) .top-select{
  height:38px!important;min-width:108px!important;padding:4px 9px!important;border:1px solid var(--vz-border)!important;
  border-radius:6px!important;background:#fff!important;color:#495057!important;display:grid!important;grid-template-columns:18px 1fr auto!important;
  align-items:center!important;column-gap:5px!important;text-align:left!important;font-size:12px!important;
}
body:not(.login-page) .top-select small{font-size:8px!important;color:#adb5bd!important;grid-column:2!important;line-height:1!important}
body:not(.login-page) .top-select b{font-size:11px!important;color:#343a40!important;grid-column:2!important;line-height:1.1!important}
body:not(.login-page) .top-icon{
  width:38px!important;height:38px!important;border:1px solid var(--vz-border)!important;border-radius:6px!important;
  background:#fff!important;color:#6c757d!important;font-size:15px!important;display:grid!important;place-items:center!important;position:relative!important;
}
body:not(.login-page) .top-icon:hover{background:#f8f9fa!important;color:#405189!important}
body:not(.login-page) .top-icon.accent{background:#405189!important;border-color:#405189!important;color:#fff!important}
body:not(.login-page) .top-icon i{position:absolute!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#f7b84b!important;right:7px!important;top:6px!important}
body:not(.login-page) .top-pill{padding:6px 9px!important;border-radius:999px!important;background:#e8f8f4!important;color:#0ab39c!important;border:1px solid #d2f1e9!important;font-size:9px!important;font-weight:700!important}
body:not(.login-page) .user-chip{height:42px!important;padding:4px 7px 4px 4px!important;border:1px solid var(--vz-border)!important;border-radius:6px!important;background:#fff!important}
body:not(.login-page) .user-avatar{width:32px!important;height:32px!important;border-radius:50%!important;background:#eef1fb!important;color:#405189!important;font-size:10px!important}
body:not(.login-page) .user-chip strong{font-size:11px!important;color:#343a40!important}
body:not(.login-page) .user-chip small{font-size:9px!important;color:#878a99!important}
body:not(.login-page) .user-chevron{color:#878a99!important}

/* User dropdown */
body:not(.login-page) .user-dropdown{background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:7px!important;box-shadow:var(--vz-shadow-lg)!important;color:#343a40!important}
body:not(.login-page) .user-dropdown-head{padding:13px!important}
body:not(.login-page) .user-dropdown-head strong{color:#343a40!important;font-size:12px!important}
body:not(.login-page) .user-dropdown-head small{color:#878a99!important;font-size:10px!important}
body:not(.login-page) .user-dropdown-divider{height:1px!important;background:var(--vz-border)!important}
body:not(.login-page) .user-dropdown-item{padding:10px 13px!important;color:#495057!important}
body:not(.login-page) .user-dropdown-item:hover{background:#f8f9fa!important;color:#405189!important}
body:not(.login-page) .user-dropdown-item strong{font-size:11px!important}
body:not(.login-page) .user-dropdown-item small{font-size:9px!important;color:#878a99!important}

/* Content / page headings */
body:not(.login-page) .content{max-width:none!important;width:100%!important;margin:0!important;padding:24px 24px 40px!important;background:var(--vz-bg)!important}
body:not(.login-page) .toolbar{margin-bottom:22px!important;align-items:center!important}
body:not(.login-page) .toolbar h1{font:600 22px Inter!important;color:#343a40!important;letter-spacing:-.03em!important}
body:not(.login-page) .toolbar h2{font:600 18px Inter!important;color:#343a40!important}
body:not(.login-page) .toolbar h3{font:600 15px Inter!important;color:#343a40!important}
body:not(.login-page) .toolbar p,.muted{font-size:12px!important;color:#878a99!important}
body:not(.login-page) .eyebrow{color:#878a99!important;font-size:10px!important;letter-spacing:.07em!important}

/* Universal cards / panels */
body:not(.login-page) .card,
body:not(.login-page) .kpi-card,
body:not(.login-page) .kpi,
body:not(.login-page) .summary,
body:not(.login-page) .v5-panel,
body:not(.login-page) .panel,
body:not(.login-page) .ref-panel{
  background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:8px!important;
  box-shadow:var(--vz-shadow)!important;color:#343a40!important;
}
body:not(.login-page) .card>h1,body:not(.login-page) .card>h2,body:not(.login-page) .card>h3{
  padding:16px 20px!important;background:#fff!important;color:#343a40!important;border-bottom:1px solid var(--vz-border)!important;font:600 15px Inter!important;
}
body:not(.login-page) .card-header{padding:15px 20px!important;background:#fff!important;border-bottom:1px solid var(--vz-border)!important}
body:not(.login-page) .card-header h3{font:600 14px Inter!important;color:#343a40!important}
body:not(.login-page) .card-header p{font-size:11px!important;color:#878a99!important}
body:not(.login-page) .card-body{padding:20px!important;background:#fff!important}
body:not(.login-page) .section-title h3{font:600 15px Inter!important;color:#343a40!important}
body:not(.login-page) .section-title span{font-size:11px!important;color:#878a99!important}

/* KPI cards */
body:not(.login-page) .kpi-card,body:not(.login-page) .kpi{min-height:142px!important;padding:18px!important;box-shadow:var(--vz-shadow)!important}
body:not(.login-page) .kpi-card:after{display:none!important}
body:not(.login-page) .kpi-label,body:not(.login-page) .kpi span{font-size:11px!important;color:#878a99!important;font-weight:500!important}
body:not(.login-page) .kpi-value,body:not(.login-page) .kpi strong,body:not(.login-page) .metric{font:600 23px Inter!important;color:#343a40!important;margin-top:10px!important}
body:not(.login-page) .kpi-meta{font-size:10px!important;color:#878a99!important}
body:not(.login-page) .kpi-icon{width:38px!important;height:38px!important;border-radius:7px!important;background:#eef1fb!important;color:#405189!important}

/* Tables — Velzon/Bootstrap style */
body:not(.login-page) .table-wrap,.table-wrapper{background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:8px!important}
body:not(.login-page) .table,.table-wrap table{background:#fff!important;border-collapse:separate!important;border-spacing:0!important}
body:not(.login-page) .table th,.table-wrap th{
  padding:12px 15px!important;background:#f8f9fa!important;color:#878a99!important;
  border-bottom:1px solid var(--vz-border)!important;font-size:10px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.04em!important;
}
body:not(.login-page) .table td,.table-wrap td{
  padding:13px 15px!important;background:#fff!important;color:#495057!important;border-bottom:1px solid #f0f1f3!important;font-size:12px!important;vertical-align:middle!important;
}
body:not(.login-page) .table tbody tr:hover td,.table-wrap tbody tr:hover td{background:#f8f9fa!important}
body:not(.login-page) .table tbody tr:last-child td,.table-wrap tbody tr:last-child td{border-bottom:0!important}

/* Forms */
body:not(.login-page) .form,body:not(.login-page) .form-grid{background:#fff!important}
body:not(.login-page) .form label,body:not(.login-page) .form-grid label{font-size:11px!important;color:#495057!important;font-weight:500!important}
body:not(.login-page) .form input,body:not(.login-page) .form select,body:not(.login-page) .form textarea,
body:not(.login-page) .form-grid input,body:not(.login-page) .form-grid select,body:not(.login-page) .form-grid textarea,
body:not(.login-page) .inline-form input,body:not(.login-page) .inline-form select,
body:not(.login-page) .card input,body:not(.login-page) .card select,body:not(.login-page) .card textarea{
  min-height:40px!important;padding:8px 12px!important;background:#fff!important;border:1px solid #ced4da!important;border-radius:5px!important;color:#495057!important;font-size:12px!important;box-shadow:none!important;
}
body:not(.login-page) .form textarea,body:not(.login-page) .card textarea{min-height:95px!important}
body:not(.login-page) .form input:focus,body:not(.login-page) .form select:focus,body:not(.login-page) .form textarea:focus,
body:not(.login-page) .card input:focus,body:not(.login-page) .card select:focus,body:not(.login-page) .card textarea:focus{
  border-color:#9aa9d3!important;box-shadow:0 0 0 3px rgba(64,81,137,.08)!important;outline:0!important;
}

/* Buttons */
body:not(.login-page) .btn,body:not(.login-page) button.btn{
  min-height:38px!important;padding:8px 14px!important;border-radius:5px!important;border:1px solid transparent!important;
  font-size:12px!important;font-weight:500!important;box-shadow:none!important;
}
body:not(.login-page) .btn.primary,body:not(.login-page) .btn-primary{background:#405189!important;border-color:#405189!important;color:#fff!important}
body:not(.login-page) .btn.primary:hover,body:not(.login-page) .btn-primary:hover{background:#354577!important;border-color:#354577!important}
body:not(.login-page) .btn.secondary,body:not(.login-page) .btn-light{background:#fff!important;border-color:#ced4da!important;color:#495057!important}
body:not(.login-page) .btn.success,body:not(.login-page) .btn-success{background:#0ab39c!important;border-color:#0ab39c!important;color:#fff!important}
body:not(.login-page) .btn.danger,body:not(.login-page) .btn-danger{background:#f06548!important;border-color:#f06548!important;color:#fff!important}
body:not(.login-page) .btn.warn{background:#f7b84b!important;border-color:#f7b84b!important;color:#212529!important}

/* Badges */
body:not(.login-page) .badge,body:not(.login-page) .status,body:not(.login-page) .v5-badge{
  padding:4px 8px!important;border-radius:4px!important;border:0!important;background:#eff2f5!important;color:#6c757d!important;font-size:10px!important;font-weight:500!important;
}
body:not(.login-page) .badge-success,body:not(.login-page) .badge.ok{background:#dff7f2!important;color:#087f70!important}
body:not(.login-page) .badge-warning,body:not(.login-page) .badge.warn{background:#fff3d8!important;color:#b77905!important}
body:not(.login-page) .badge-danger,body:not(.login-page) .badge.danger{background:#fde6e2!important;color:#c8452d!important}

/* Alerts / filters / pagination */
body:not(.login-page) .alert{border-radius:6px!important;border:1px solid var(--vz-border)!important;font-size:12px!important}
body:not(.login-page) .v5-toolbar,body:not(.login-page) .v5-actionbar,body:not(.login-page) .v5-filter,.filter-bar,.action-bar{
  background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:7px!important;color:#495057!important;box-shadow:var(--vz-shadow)!important;
}
body:not(.login-page) .pagination a,body:not(.login-page) .pagination button{background:#fff!important;border:1px solid #dee2e6!important;color:#495057!important;border-radius:4px!important}
body:not(.login-page) .pagination .active{background:#405189!important;border-color:#405189!important;color:#fff!important}

/* Dashboard — recompose existing data into Velzon-like light cards */
body.dashboard-page .content{padding:24px!important;background:var(--vz-bg)!important}
body.dashboard-page .ref-dashboard{width:100%!important;max-width:100%!important}
body.dashboard-page .ref-welcome{
  padding:0!important;margin:0 0 20px!important;background:transparent!important;color:#343a40!important;border:0!important;box-shadow:none!important;
}
body.dashboard-page .ref-welcome h1{font:600 24px Inter!important;color:#343a40!important;letter-spacing:-.03em!important;margin:4px 0 6px!important}
body.dashboard-page .ref-welcome p{font-size:12px!important;color:#878a99!important}
body.dashboard-page .period-control{background:#fff!important;border:1px solid var(--vz-border)!important;color:#495057!important;border-radius:5px!important;padding:8px 11px!important;font-size:11px!important}
body.dashboard-page .ref-sales-grid{grid-template-columns:minmax(0,2.05fr) minmax(290px,.95fr)!important;gap:16px!important}
body.dashboard-page .ref-sales-card{min-height:260px!important;padding:20px!important;background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:8px!important;box-shadow:var(--vz-shadow)!important}
body.dashboard-page .ref-card-head span{font-size:10px!important;color:#878a99!important;letter-spacing:.04em!important}
body.dashboard-page .ref-card-head strong{font:600 29px Inter!important;color:#343a40!important;letter-spacing:-.03em!important}
body.dashboard-page .ref-chips b{background:#f8f9fa!important;border:1px solid #edf0f2!important;color:#6c757d!important;border-radius:4px!important;font-size:10px!important;padding:5px 7px!important}
body.dashboard-page .trend.up{background:#e8f8f4!important;color:#0ab39c!important;border-radius:4px!important}
body.dashboard-page .ref-mini{min-height:77px!important;background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:8px!important;box-shadow:var(--vz-shadow)!important}
body.dashboard-page .mini-icon{background:#eef1fb!important;color:#405189!important;border-radius:7px!important}
body.dashboard-page .mini-trend{background:#e8f8f4!important;color:#0ab39c!important;border-radius:4px!important}
body.dashboard-page .mini-trend.red{background:#fde6e2!important;color:#f06548!important}
body.dashboard-page .ref-section{margin-top:22px!important}
body.dashboard-page .ref-section-title h2{font:600 16px Inter!important;color:#343a40!important}
body.dashboard-page .ref-section-title h2:before{width:3px!important;height:17px!important;background:#405189!important;margin-right:8px!important}
body.dashboard-page .ref-section-title span,body.dashboard-page .ref-section-title a{font-size:11px!important;color:#878a99!important}
body.dashboard-page .ref-op-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
body.dashboard-page .ref-op{min-height:82px!important;padding:15px!important;background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:8px!important;color:#343a40!important;box-shadow:var(--vz-shadow)!important}
body.dashboard-page .ref-op.danger{border-color:#f0d7d2!important}
body.dashboard-page .ref-op.success{border-color:#d4eee8!important}
body.dashboard-page .ref-op>span{background:#eef1fb!important;color:#405189!important;border-radius:7px!important}
body.dashboard-page .ref-op.danger>span{background:#fde6e2!important;color:#f06548!important}
body.dashboard-page .ref-op.warn>span{background:#fff3d8!important;color:#b77905!important}
body.dashboard-page .ref-op.success>span{background:#dff7f2!important;color:#0ab39c!important}
body.dashboard-page .ref-op b{font:600 18px Inter!important;color:#343a40!important}
body.dashboard-page .ref-op small{font-size:10px!important;color:#878a99!important}
body.dashboard-page .ref-performance{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)!important;gap:16px!important}
body.dashboard-page .ref-performance>* ,body.dashboard-page .ref-bottom>* ,body.dashboard-page .ref-insights>*{
  background:#fff!important;border:1px solid var(--vz-border)!important;border-radius:8px!important;box-shadow:var(--vz-shadow)!important;color:#343a40!important;
}
body.dashboard-page .ref-performance .panel-head{padding:15px 18px!important;border-bottom:1px solid var(--vz-border)!important}
body.dashboard-page .ref-performance h3,body.dashboard-page .ref-insights h3,body.dashboard-page .ref-bottom h3{font:600 14px Inter!important;color:#343a40!important}
body.dashboard-page .ref-performance small,body.dashboard-page .ref-insights small,body.dashboard-page .ref-bottom small{font-size:10px!important;color:#878a99!important}
body.dashboard-page .metrics-row{border-bottom:1px solid var(--vz-border)!important}
body.dashboard-page .metrics-row small{font-size:9px!important;color:#878a99!important}
body.dashboard-page .metrics-row strong{font:600 21px Inter!important;color:#343a40!important}
body.dashboard-page .metrics-row mark{background:#e8f8f4!important;color:#0ab39c!important;border-radius:4px!important}
body.dashboard-page .range-tabs{background:#f8f9fa!important;border:1px solid #edf0f2!important;border-radius:5px!important;padding:2px!important}
body.dashboard-page .range-tabs>*{padding:5px 8px!important;border-radius:4px!important;color:#878a99!important;font-size:10px!important}
body.dashboard-page .range-tabs .active,body.dashboard-page .range-tabs b{background:#405189!important;color:#fff!important}
body.dashboard-page .category-panel .donut{filter:saturate(.9)!important}
body.dashboard-page .category-list>div{font-size:10px!important;color:#6c757d!important}
body.dashboard-page .category-list b{color:#343a40!important}
body.dashboard-page .cat-dot.c0{background:#405189!important}.cat-dot.c1{background:#0ab39c!important}.cat-dot.c2{background:#f7b84b!important}.cat-dot.c3{background:#f06548!important}
body.dashboard-page .list-table>div{border-bottom:1px solid #f0f1f3!important}
body.dashboard-page .list-table>div:hover{background:#f8f9fa!important}
body.dashboard-page .product-thumb{background:#f1f3f5!important;color:#405189!important;border-radius:6px!important}
body.dashboard-page .activity-list>div{border-bottom:1px solid #f0f1f3!important}
body.dashboard-page .live-badge{background:#dff7f2!important;color:#087f70!important;border-radius:999px!important}
body.dashboard-page .heatmap i{background:#f1f3f5!important;border:1px solid #e8eaed!important}
body.dashboard-page .heatmap i[style*="--heat:0.9"],body.dashboard-page .heatmap i[style*="--heat:0.8"]{background:#cbd4e9!important}
body.dashboard-page .shift-head{background:#f8f9fa!important;color:#878a99!important;border-bottom:1px solid var(--vz-border)!important}
body.dashboard-page .shift-table>div{border-bottom:1px solid #f0f1f3!important}
body.dashboard-page .shift-status{background:#dff7f2!important;color:#087f70!important;border-radius:4px!important}

/* Login — same Velzon-inspired visual system */
body.login-page{
  background:#f3f3f9!important;color:#343a40!important;font-family:Inter,system-ui,sans-serif!important;
}
body.login-page .login-grid{min-height:100vh!important;display:grid!important;grid-template-columns:minmax(420px,1.05fr) minmax(420px,.95fr)!important;background:#fff!important}
body.login-page .login-visual{background:linear-gradient(135deg,#405189 0%,#364b86 48%,#25345e 100%)!important;padding:54px 58px!important;color:#fff!important}
body.login-page .login-panel{background:#fff!important;padding:54px clamp(32px,7vw,100px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
body.login-page .login-panel .brand-mark{background:#405189!important;color:#fff!important;box-shadow:none!important}
body.login-page .login-panel h1{font:600 27px Inter!important;color:#343a40!important}
body.login-page .login-panel>p{color:#878a99!important;font-size:13px!important}
body.login-page .login-panel .form{padding:0!important;background:transparent!important}
body.login-page .login-panel .form label{font-size:12px!important;color:#495057!important;font-weight:500!important}
body.login-page .login-panel .form input{min-height:46px!important;border:1px solid #ced4da!important;border-radius:5px!important;font-size:13px!important}
body.login-page .login-panel .btn.primary{background:#405189!important;border-color:#405189!important;border-radius:5px!important;min-height:44px!important}
body.login-page .login-error{background:#fde6e2!important;color:#c8452d!important;border:1px solid #f7d0c9!important;border-radius:5px!important;padding:10px 12px!important;font-size:12px!important}
body.login-page .login-meta{color:#878a99!important;font-size:10px!important}

/* Collapsed sidebar */
html.sidebar-collapsed body:not(.login-page) .sidebar{width:70px!important}
html.sidebar-collapsed body:not(.login-page) .main{margin-left:70px!important}
html.sidebar-collapsed body:not(.login-page) .brand{padding:0 15px!important;justify-content:center!important}
html.sidebar-collapsed body:not(.login-page) .brand-copy,html.sidebar-collapsed body:not(.login-page) .brand-collapse{display:none!important}
html.sidebar-collapsed body:not(.login-page) .brand-mark{display:grid!important}
html.sidebar-collapsed body:not(.login-page) .nav-text,html.sidebar-collapsed body:not(.login-page) .nav-chevron,html.sidebar-collapsed body:not(.login-page) .nav-submenu,html.sidebar-collapsed body:not(.login-page) .nav-section-label,html.sidebar-collapsed body:not(.login-page) .branch-card .nav-text,html.sidebar-collapsed body:not(.login-page) .logout-link .nav-text{display:none!important}
html.sidebar-collapsed body:not(.login-page) .nav-link,html.sidebar-collapsed body:not(.login-page) .nav-group-toggle{justify-content:center!important;padding:7px!important}
html.sidebar-collapsed body:not(.login-page) .nav-icon{margin:0!important}
html.sidebar-collapsed body:not(.login-page) .sidebar-bottom{padding:8px!important}

@media(max-width:1100px){
  body:not(.login-page) .sidebar{width:230px!important}
  body:not(.login-page) .main{margin-left:230px!important}
  body.dashboard-page .ref-op-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body:not(.login-page) .global-search{width:270px!important}
}
@media(max-width:900px){
  body:not(.login-page) .sidebar{width:280px!important;transform:translateX(-105%)!important}
  body:not(.login-page) .sidebar.open{transform:translateX(0)!important}
  body:not(.login-page) .main{margin-left:0!important}
  body:not(.login-page) .content{padding:18px 16px 85px!important}
  body:not(.login-page) .topbar{height:62px!important;padding:0 14px!important}
  body:not(.login-page) .top-select{display:none!important}
  body:not(.login-page) .global-search{display:none!important}
  body.dashboard-page .ref-sales-grid,body.dashboard-page .ref-performance{grid-template-columns:1fr!important}
  body.dashboard-page .ref-op-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.login-page .login-grid{grid-template-columns:1fr!important}
  body.login-page .login-visual{display:none!important}
  body.login-page .login-panel{padding:35px 25px!important}
}
@media(max-width:560px){
  body.dashboard-page .ref-op-grid{grid-template-columns:1fr!important}
  body:not(.login-page) .content{padding:15px 12px 80px!important}
  body:not(.login-page) .top-actions .top-icon:not(.accent),body:not(.login-page) .top-pill{display:none!important}
  body:not(.login-page) .user-chip-copy{display:none!important}
  body:not(.login-page) .toolbar h1{font-size:20px!important}
  body:not(.login-page) .table th{font-size:9px!important}
  body:not(.login-page) .table td{font-size:11px!important}
}


/* ================================================================
   V6.1 — PREMIUM TYPOGRAPHY + CREATIVE DASHBOARD POLISH
   Reference language: Velzon Creative / Poppins / Bootstrap density.
   This is original TN75 styling; no proprietary template assets copied.
   ================================================================ */
:root{
  --vz-primary:#405189;
  --vz-primary-2:#5267a3;
  --vz-bg:#f3f3f9;
  --vz-surface:#fff;
  --vz-border:#e9ebf0;
  --vz-text:#212529;
  --vz-muted:#74788d;
  --vz-soft:#f8f9fa;
  --vz-success:#0ab39c;
  --vz-warning:#f7b84b;
  --vz-danger:#f06548;
  --vz-info:#299cdb;
  --vz-shadow:0 2px 6px rgba(30,32,37,.06);
  --vz-shadow-lg:0 8px 24px rgba(30,32,37,.10);
}
html,body{font-family:'Poppins',sans-serif!important}
body:not(.login-page){font-size:13px!important;line-height:1.5!important;background:var(--vz-bg)!important;color:var(--vz-text)!important}
body:not(.login-page) *{font-family:'Poppins',sans-serif}
body:not(.login-page) .sidebar{width:250px!important;background:#fff!important;border-right:1px solid #e9ebf0!important;box-shadow:0 0 0 0 transparent!important}
body:not(.login-page) .main{margin-left:250px!important}
body:not(.login-page) .topbar{height:70px!important;padding:0 24px!important;background:#fff!important;border-bottom:1px solid #e9ebf0!important}
body:not(.login-page) .brand{height:70px!important;padding:0 14px!important;border-bottom:1px solid #e9ebf0!important}
body:not(.login-page) .brand-copy strong{font:600 14px/1.25 'Poppins',sans-serif!important;letter-spacing:-.01em!important;color:#212529!important}
body:not(.login-page) .brand-copy small{font:400 9.5px/1.3 'Poppins',sans-serif!important;color:#878a99!important}
body:not(.login-page) .nav-section-label{font:500 10px/1.4 'Poppins',sans-serif!important;letter-spacing:.08em!important;color:#a0a4b2!important;padding:18px 14px 8px!important}
body:not(.login-page) .nav-link,body:not(.login-page) .nav-group-toggle{min-height:40px!important;padding:7px 12px!important;border-radius:5px!important;font:400 12.5px/1.4 'Poppins',sans-serif!important;color:#5b6070!important}
body:not(.login-page) .nav-link.active,body:not(.login-page) .nav-group.is-open>.nav-group-toggle{background:#f0f2fa!important;color:#405189!important;font-weight:500!important}
body:not(.login-page) .nav-sublink{min-height:34px!important;padding:6px 10px!important;font:400 11.5px/1.4 'Poppins',sans-serif!important;color:#74788d!important}
body:not(.login-page) .nav-icon{font-size:13px!important;color:#878a99!important}
body:not(.login-page) .top-title strong{font:500 16px/1.3 'Poppins',sans-serif!important;color:#212529!important}
body:not(.login-page) .global-search{height:38px!important;width:330px!important;background:#f8f9fa!important;border:1px solid #e5e7eb!important;border-radius:5px!important}
body:not(.login-page) .global-search input{font:400 12px/1.4 'Poppins',sans-serif!important;color:#495057!important}
body:not(.login-page) .top-select{height:38px!important;border-radius:5px!important;font-family:'Poppins',sans-serif!important}
body:not(.login-page) .top-select b{font:500 10.5px/1.2 'Poppins',sans-serif!important}
body:not(.login-page) .top-select small{font:400 7.5px/1.2 'Poppins',sans-serif!important}
body:not(.login-page) .top-pill{font:600 8px/1 'Poppins',sans-serif!important;letter-spacing:.02em!important}
body:not(.login-page) .user-chip strong{font:500 10.5px/1.2 'Poppins',sans-serif!important}
body:not(.login-page) .user-chip small{font:400 8.5px/1.2 'Poppins',sans-serif!important}
body:not(.login-page) .content{padding:26px 28px 42px!important;background:#f3f3f9!important}
body:not(.login-page) .toolbar h1{font:600 22px/1.35 'Poppins',sans-serif!important;letter-spacing:-.02em!important}
body:not(.login-page) .toolbar h2{font:600 18px/1.4 'Poppins',sans-serif!important}
body:not(.login-page) .toolbar h3{font:500 15px/1.4 'Poppins',sans-serif!important}
body:not(.login-page) .card,body:not(.login-page) .panel,body:not(.login-page) .ref-panel{border-radius:7px!important;border:1px solid #e9ebf0!important;box-shadow:var(--vz-shadow)!important;background:#fff!important}
body:not(.login-page) .card-header{font:500 14px/1.4 'Poppins',sans-serif!important}
body:not(.login-page) .card-header h3{font:500 13px/1.4 'Poppins',sans-serif!important}
body:not(.login-page) .table th{font:500 10px/1.4 'Poppins',sans-serif!important;letter-spacing:.03em!important}
body:not(.login-page) .table td{font:400 12px/1.5 'Poppins',sans-serif!important}
body:not(.login-page) input,body:not(.login-page) select,body:not(.login-page) textarea{font-family:'Poppins',sans-serif!important;font-size:12px!important}
body:not(.login-page) button,body:not(.login-page) .btn{font-family:'Poppins',sans-serif!important}

/* Dashboard: closer to the reference's visual rhythm and hierarchy. */
body.dashboard-page .content{padding:24px 24px 44px!important}
body.dashboard-page .ref-dashboard{max-width:1540px!important;margin:0 auto!important}
body.dashboard-page .ref-eyebrow{font:600 9px/1.4 'Poppins',sans-serif!important;letter-spacing:.12em!important;color:#878a99!important}
body.dashboard-page .ref-welcome{margin-bottom:22px!important}
body.dashboard-page .ref-welcome h1{font:500 25px/1.3 'Poppins',sans-serif!important;letter-spacing:-.025em!important;color:#212529!important;margin:5px 0 7px!important}
body.dashboard-page .ref-welcome p{font:400 11px/1.6 'Poppins',sans-serif!important;color:#878a99!important}
body.dashboard-page .period-control{font:400 10px/1.3 'Poppins',sans-serif!important;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:5px!important;color:#495057!important;box-shadow:0 1px 2px rgba(30,32,37,.03)!important}
body.dashboard-page .ref-sales-grid{grid-template-columns:minmax(0,2.05fr) minmax(320px,.95fr)!important;gap:16px!important}
body.dashboard-page .ref-sales-card{min-height:245px!important;padding:20px 21px 12px!important;background:#fff!important;border:1px solid #e9ebf0!important;border-radius:7px!important;box-shadow:var(--vz-shadow)!important}
body.dashboard-page .ref-card-head>div>span{font:500 9px/1.4 'Poppins',sans-serif!important;color:#878a99!important;letter-spacing:.06em!important}
body.dashboard-page .ref-card-head strong{font:600 29px/1.2 'Poppins',sans-serif!important;letter-spacing:-.035em!important;color:#212529!important}
body.dashboard-page .ref-chips b{font:400 9px/1.3 'Poppins',sans-serif!important;background:#f8f9fa!important;border:1px solid #edf0f2!important;border-radius:4px!important;color:#6c757d!important;padding:5px 7px!important}
body.dashboard-page .trend{font:500 9px/1.2 'Poppins',sans-serif!important;border-radius:4px!important;background:#e8f8f4!important;color:#0ab39c!important}
body.dashboard-page .sales-chart{height:130px!important;margin-top:6px!important}
body.dashboard-page .sales-chart path[stroke]{stroke:#405189!important}
body.dashboard-page .ref-mini-stack{gap:9px!important}
body.dashboard-page .ref-mini{min-height:75px!important;padding:13px!important;background:#fff!important;border:1px solid #e9ebf0!important;border-radius:7px!important;box-shadow:var(--vz-shadow)!important}
body.dashboard-page .mini-icon{width:34px!important;height:34px!important;border-radius:6px!important;background:#eef1fb!important;color:#405189!important}
body.dashboard-page .ref-mini small{font:400 9px/1.3 'Poppins',sans-serif!important;color:#878a99!important}
body.dashboard-page .ref-mini strong{font:500 17px/1.3 'Poppins',sans-serif!important;color:#343a40!important}
body.dashboard-page .mini-trend{font:500 8px/1.2 'Poppins',sans-serif!important}
body.dashboard-page .ref-section{margin-top:22px!important}
body.dashboard-page .ref-section-title h2{font:500 16px/1.4 'Poppins',sans-serif!important;color:#212529!important;letter-spacing:-.01em!important}
body.dashboard-page .ref-section-title h2:before{width:3px!important;height:18px!important;background:#405189!important;border-radius:1px!important}
body.dashboard-page .ref-section-title span,body.dashboard-page .ref-section-title a{font:400 10px/1.4 'Poppins',sans-serif!important;color:#878a99!important}
body.dashboard-page .ref-op-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px!important}
body.dashboard-page .ref-op{min-height:78px!important;padding:13px!important;background:#fff!important;border:1px solid #e9ebf0!important;border-radius:7px!important;box-shadow:var(--vz-shadow)!important;color:#212529!important}
body.dashboard-page .ref-op b{font:500 17px/1.3 'Poppins',sans-serif!important;color:#212529!important}
body.dashboard-page .ref-op small{font:400 9px/1.4 'Poppins',sans-serif!important;color:#878a99!important}
body.dashboard-page .ref-op>span{width:31px!important;height:31px!important;border-radius:6px!important;background:#eef1fb!important;color:#405189!important;font-size:12px!important}
body.dashboard-page .ref-performance{grid-template-columns:minmax(0,2.05fr) minmax(320px,1fr)!important;gap:16px!important}
body.dashboard-page .ref-performance>*,body.dashboard-page .ref-bottom>*,body.dashboard-page .ref-insights>*{background:#fff!important;border:1px solid #e9ebf0!important;border-radius:7px!important;box-shadow:var(--vz-shadow)!important}
body.dashboard-page .ref-performance .panel-head{padding:14px 16px!important;border-bottom:1px solid #eef0f2!important}
body.dashboard-page .ref-performance h3,body.dashboard-page .ref-insights h3,body.dashboard-page .ref-bottom h3{font:500 13px/1.4 'Poppins',sans-serif!important;color:#212529!important}
body.dashboard-page .ref-performance small,body.dashboard-page .ref-insights small,body.dashboard-page .ref-bottom small{font:400 9px/1.5 'Poppins',sans-serif!important;color:#878a99!important}
body.dashboard-page .metrics-row{border-bottom:1px solid #eef0f2!important;padding:15px 16px 8px!important}
body.dashboard-page .metrics-row small{font:500 8px/1.4 'Poppins',sans-serif!important;color:#878a99!important;letter-spacing:.07em!important}
body.dashboard-page .metrics-row strong{font:500 20px/1.3 'Poppins',sans-serif!important;color:#212529!important}
body.dashboard-page .metrics-row mark{font:500 8px/1.2 'Poppins',sans-serif!important;background:#e8f8f4!important;color:#0ab39c!important;border-radius:4px!important}
body.dashboard-page .range-tabs{background:#f8f9fa!important;border:1px solid #edf0f2!important;border-radius:5px!important}
body.dashboard-page .range-tabs>*{font:500 9px/1.2 'Poppins',sans-serif!important}
body.dashboard-page .range-tabs b,body.dashboard-page .range-tabs .active{background:#405189!important;color:#fff!important}
body.dashboard-page .big-chart{height:220px!important}
body.dashboard-page .big-chart g line{stroke:#e9edf2!important;stroke-width:1!important}
body.dashboard-page .big-chart path[stroke]{stroke:#405189!important}
body.dashboard-page .category-panel .donut{width:160px!important;height:160px!important;background:conic-gradient(#405189 var(--p),#e9edf3 0)!important;filter:none!important}
body.dashboard-page .category-panel .donut:before{width:110px!important;height:110px!important;background:#fff!important}
body.dashboard-page .donut strong{font:600 14px/1.2 'Poppins',sans-serif!important;color:#212529!important}
body.dashboard-page .donut small{font:500 7px/1.3 'Poppins',sans-serif!important;color:#878a99!important}
body.dashboard-page .category-list>div{font:400 9px/1.4 'Poppins',sans-serif!important;color:#74788d!important}
body.dashboard-page .category-list b{font:500 9px/1.4 'Poppins',sans-serif!important;color:#343a40!important}
body.dashboard-page .list-table>div{border-bottom:1px solid #f0f1f3!important}
body.dashboard-page .list-table>div:hover{background:#f8f9fa!important}
body.dashboard-page .product-thumb{background:#eef1fb!important;color:#405189!important;border-radius:5px!important}
body.dashboard-page .activity-list>div{border-bottom:1px solid #f0f1f3!important}
body.dashboard-page .activity-list p{font:400 10px/1.5 'Poppins',sans-serif!important;color:#5f6368!important}
body.dashboard-page .activity-list p b{font-weight:500!important;color:#343a40!important}
body.dashboard-page .activity-list small{font:400 8px/1.3 'Poppins',sans-serif!important;color:#adb5bd!important}
body.dashboard-page .live-badge{font:500 8px/1.2 'Poppins',sans-serif!important;background:#e8f8f4!important;color:#087f70!important;border-radius:999px!important}
body.dashboard-page .shift-head{background:#f8f9fa!important;color:#878a99!important;border-bottom:1px solid #e9ebf0!important;font:500 8px/1.4 'Poppins',sans-serif!important}
body.dashboard-page .shift-table>div{border-bottom:1px solid #f0f1f3!important}
body.dashboard-page .shift-status{font:500 8px/1.2 'Poppins',sans-serif!important;background:#e8f8f4!important;color:#087f70!important;border-radius:4px!important}

/* Remove the dark legacy chart language that was leaking through the V5 styles. */
body.dashboard-page .sales-performance,body.dashboard-page .category-panel,body.dashboard-page .heat-panel,body.dashboard-page .shift-panel{color:#212529!important}
body.dashboard-page .legend.prev{background:#adb5bd!important}

/* Login typography */
body.login-page,body.login-page *{font-family:'Poppins',sans-serif!important}
body.login-page .login-panel h1{font:600 27px/1.3 'Poppins',sans-serif!important}
body.login-page .login-panel>p{font:400 12px/1.6 'Poppins',sans-serif!important}
body.login-page .login-panel .form label{font:500 11px/1.4 'Poppins',sans-serif!important}
body.login-page .login-panel .form input{font:400 12px/1.4 'Poppins',sans-serif!important}
body.login-page .login-panel .btn.primary{font:500 12px/1.4 'Poppins',sans-serif!important}

@media(max-width:1250px){
  body:not(.login-page) .sidebar{width:230px!important}
  body:not(.login-page) .main{margin-left:230px!important}
  body.dashboard-page .ref-op-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* =====================================================================
   V6.2 — UNIVERSAL PREMIUM SCALE / SHARP TYPOGRAPHY / NAVY UI
   Applies to every authenticated application page.
   ===================================================================== */
:root{
  --tn-primary:#405189;
  --tn-primary-dark:#334273;
  --tn-primary-soft:#eef1fb;
  --tn-text:#202532;
  --tn-text-strong:#171c28;
  --tn-muted:#667085;
  --tn-border:#e4e7ec;
  --tn-bg:#f3f3f9;
  --tn-white:#ffffff;
  --tn-shadow:0 4px 18px rgba(30,34,45,.055),0 1px 2px rgba(30,34,45,.035);
}

/* Desktop application scale: intentionally equivalent to a 125% viewing scale,
   while keeping mobile layouts responsive. */
@media (min-width:1100px){
  body:not(.login-page){zoom:1.25;}
}

/* Strong, readable Poppins hierarchy across every page */
body:not(.login-page),
body:not(.login-page) button,
body:not(.login-page) input,
body:not(.login-page) select,
body:not(.login-page) textarea,
body:not(.login-page) table{
  font-family:'Poppins',sans-serif!important;
  color:var(--tn-text)!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}
body:not(.login-page){
  font-size:14px!important;
  line-height:1.55!important;
  background:var(--tn-bg)!important;
}

/* Sidebar */
body:not(.login-page) .sidebar{
  background:#fff!important;
  border-right:1px solid var(--tn-border)!important;
}
body:not(.login-page) .brand-copy strong{
  font-size:15px!important;font-weight:700!important;color:var(--tn-text-strong)!important;
}
body:not(.login-page) .brand-copy small{font-size:10px!important;font-weight:500!important;color:#8a92a3!important}
body:not(.login-page) .nav-section-label{
  font-size:10.5px!important;font-weight:700!important;letter-spacing:.08em!important;color:#8a92a3!important;
}
body:not(.login-page) .nav-link,
body:not(.login-page) .nav-group-toggle{
  min-height:43px!important;
  padding:8px 13px!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:500!important;
  color:#5d6678!important;
}
body:not(.login-page) .nav-link:hover,
body:not(.login-page) .nav-group-toggle:hover{color:var(--tn-primary)!important;background:#f7f8fc!important}
body:not(.login-page) .nav-link.active,
body:not(.login-page) .nav-group.is-open>.nav-group-toggle{
  color:var(--tn-primary)!important;background:var(--tn-primary-soft)!important;font-weight:650!important;
}
body:not(.login-page) .nav-sublink{
  min-height:37px!important;padding:7px 12px 7px 38px!important;font-size:12.5px!important;font-weight:500!important;color:#697386!important;
}
body:not(.login-page) .nav-sublink.active{color:var(--tn-primary)!important;font-weight:650!important;background:#f8f9fd!important}
body:not(.login-page) .nav-icon{font-size:14px!important;color:#7b8496!important}
body:not(.login-page) .nav-link.active .nav-icon,
body:not(.login-page) .nav-group.is-open>.nav-group-toggle .nav-icon{color:var(--tn-primary)!important}
body:not(.login-page) .branch-card{border:1px solid var(--tn-border)!important;background:#f8f9fc!important;border-radius:8px!important}
body:not(.login-page) .branch-card strong{font-size:12px!important;font-weight:650!important;color:var(--tn-text)!important}
body:not(.login-page) .branch-card small{font-size:9.5px!important;color:#8992a3!important}
body:not(.login-page) .logout-link{font-size:12px!important;font-weight:600!important;color:#687386!important}

/* Topbar */
body:not(.login-page) .topbar{height:72px!important;background:#fff!important;border-bottom:1px solid var(--tn-border)!important}
body:not(.login-page) .top-title strong{font-size:17px!important;font-weight:650!important;color:var(--tn-text-strong)!important}
body:not(.login-page) .global-search{height:42px!important;width:355px!important;background:#f8f9fc!important;border:1px solid #e1e5ec!important;border-radius:7px!important}
body:not(.login-page) .global-search input{font-size:13px!important;font-weight:450!important;color:#344054!important}
body:not(.login-page) .top-select{height:42px!important;background:#fff!important;border:1px solid var(--tn-border)!important;border-radius:7px!important}
body:not(.login-page) .top-select b{font-size:11px!important;font-weight:650!important;color:#344054!important}
body:not(.login-page) .top-select small{font-size:8px!important;font-weight:600!important;color:#8a92a3!important}
body:not(.login-page) .top-icon{width:40px!important;height:40px!important;border-radius:7px!important}
body:not(.login-page) .top-icon.accent{background:var(--tn-primary)!important;border-color:var(--tn-primary)!important;color:#fff!important}
body:not(.login-page) .top-pill{font-size:9px!important;font-weight:700!important;padding:8px 11px!important}
body:not(.login-page) .user-chip strong{font-size:11px!important;font-weight:650!important;color:#344054!important}
body:not(.login-page) .user-chip small{font-size:9px!important;color:#8a92a3!important}

/* Page headings and general content */
body:not(.login-page) .content{padding:30px 32px 52px!important;background:var(--tn-bg)!important}
body:not(.login-page) .toolbar{margin-bottom:22px!important}
body:not(.login-page) .toolbar h1{font-size:30px!important;line-height:1.25!important;font-weight:700!important;letter-spacing:-.025em!important;color:var(--tn-text-strong)!important}
body:not(.login-page) .toolbar h2{font-size:22px!important;font-weight:650!important;color:var(--tn-text-strong)!important}
body:not(.login-page) .toolbar h3{font-size:17px!important;font-weight:650!important;color:var(--tn-text-strong)!important}
body:not(.login-page) .toolbar p,
body:not(.login-page) .toolbar .muted,
body:not(.login-page) .muted{font-size:12.5px!important;line-height:1.55!important;color:var(--tn-muted)!important;font-weight:450!important}
body:not(.login-page) .eyebrow{font-size:10px!important;font-weight:700!important;color:var(--tn-primary)!important}

/* Universal cards/panels */
body:not(.login-page) .card,
body:not(.login-page) .panel,
body:not(.login-page) .ref-panel{
  background:#fff!important;
  border:1px solid var(--tn-border)!important;
  border-radius:9px!important;
  box-shadow:var(--tn-shadow)!important;
}
body:not(.login-page) .card>h1,
body:not(.login-page) .card>h2,
body:not(.login-page) .card>h3{
  padding:21px 23px!important;
  font-size:17px!important;
  line-height:1.4!important;
  font-weight:650!important;
  color:var(--tn-text-strong)!important;
  border-bottom:1px solid #edf0f3!important;
}
body:not(.login-page) .card-header{padding:18px 22px!important;border-bottom:1px solid #edf0f3!important}
body:not(.login-page) .card-header h3{font-size:15px!important;font-weight:650!important;color:var(--tn-text-strong)!important}
body:not(.login-page) .card-header p{font-size:11px!important;color:var(--tn-muted)!important}
body:not(.login-page) .card-body{padding:22px!important}

/* Forms — larger and sharper */
body:not(.login-page) .form,
body:not(.login-page) .form-grid{gap:16px!important;padding:22px!important}
body:not(.login-page) .form label,
body:not(.login-page) .form-grid label{
  font-size:12.5px!important;font-weight:600!important;color:#344054!important;line-height:1.4!important;
}
body:not(.login-page) .form input,
body:not(.login-page) .form select,
body:not(.login-page) .form textarea,
body:not(.login-page) .form-grid input,
body:not(.login-page) .form-grid select,
body:not(.login-page) .form-grid textarea,
body:not(.login-page) .inline-form input,
body:not(.login-page) .inline-form select,
body:not(.login-page) .card input,
body:not(.login-page) .card select,
body:not(.login-page) .card textarea{
  min-height:46px!important;
  padding:10px 13px!important;
  border:1px solid #d8dde6!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#202532!important;
  font-size:13px!important;
  font-weight:500!important;
}
body:not(.login-page) input::placeholder,
body:not(.login-page) textarea::placeholder{color:#98a1b2!important;font-weight:400!important}
body:not(.login-page) .form input:focus,
body:not(.login-page) .form select:focus,
body:not(.login-page) .form textarea:focus,
body:not(.login-page) .card input:focus,
body:not(.login-page) .card select:focus,
body:not(.login-page) .card textarea:focus{
  border-color:#8b98c5!important;box-shadow:0 0 0 3px rgba(64,81,137,.10)!important;
}

/* Buttons — eliminate legacy black styling */
body:not(.login-page) .btn,
body:not(.login-page) .btn.secondary,
body:not(.login-page) .btn-light{
  min-height:43px!important;
  padding:9px 16px!important;
  border-radius:7px!important;
  border:1px solid #d9deea!important;
  background:#f7f8fc!important;
  color:var(--tn-primary-dark)!important;
  font-size:12.5px!important;
  font-weight:650!important;
  box-shadow:none!important;
}
body:not(.login-page) .btn:hover{background:#eef1fb!important;border-color:#cbd3e7!important;color:var(--tn-primary)!important}
body:not(.login-page) .btn.primary,
body:not(.login-page) .btn-primary{
  background:var(--tn-primary)!important;
  border-color:var(--tn-primary)!important;
  color:#fff!important;
  box-shadow:0 5px 13px rgba(64,81,137,.18)!important;
}
body:not(.login-page) .btn.primary:hover,
body:not(.login-page) .btn-primary:hover{background:var(--tn-primary-dark)!important;color:#fff!important}
body:not(.login-page) .btn.success,
body:not(.login-page) .btn-success{background:#0ab39c!important;border-color:#0ab39c!important;color:#fff!important}
body:not(.login-page) .btn.danger,
body:not(.login-page) .btn-danger{background:#f06548!important;border-color:#f06548!important;color:#fff!important}
body:not(.login-page) .btn.warn{background:#f7b84b!important;border-color:#f7b84b!important;color:#fff!important}

/* Tables — navy instead of black, stronger readable text */
body:not(.login-page) .table-wrap,
body:not(.login-page) .table-wrapper{background:#fff!important;border-radius:9px!important}
body:not(.login-page) .table,
body:not(.login-page) .table-wrap table,
body:not(.login-page) .table-wrapper table{color:var(--tn-text)!important}
body:not(.login-page) .table th,
body:not(.login-page) .table-wrap th,
body:not(.login-page) .table-wrapper th,
body:not(.login-page) .v5-table th{
  padding:13px 16px!important;
  background:#3b4774!important;
  color:#fff!important;
  border-bottom:1px solid #344064!important;
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:700!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
body:not(.login-page) .table td,
body:not(.login-page) .table-wrap td,
body:not(.login-page) .table-wrapper td,
body:not(.login-page) .v5-table td{
  padding:14px 16px!important;
  background:#fff!important;
  color:#344054!important;
  border-bottom:1px solid #edf0f3!important;
  font-size:12.5px!important;
  line-height:1.5!important;
  font-weight:500!important;
}
body:not(.login-page) .table td strong,
body:not(.login-page) .table-wrap td strong{color:#1d2430!important;font-weight:700!important}
body:not(.login-page) .table tbody tr:hover td,
body:not(.login-page) .table-wrap tbody tr:hover td,
body:not(.login-page) .table-wrapper tbody tr:hover td{background:#f8f9fc!important}

/* Search/form action rows — specifically fixes the black Search block shown in the screenshot */
body:not(.login-page) .form-grid>.btn,
body:not(.login-page) .card form>.btn,
body:not(.login-page) form>.btn:not(.primary){
  background:var(--tn-primary)!important;
  border-color:var(--tn-primary)!important;
  color:#fff!important;
  min-height:46px!important;
  font-size:13px!important;
  font-weight:650!important;
}

/* Badges, alerts and status text */
body:not(.login-page) .badge{font-size:10.5px!important;font-weight:650!important;padding:6px 9px!important;border-radius:5px!important}
body:not(.login-page) .alert{font-size:12.5px!important;font-weight:500!important;border-radius:7px!important}

/* Dashboard follows the same scale — retain its composition but sharpen typography. */
body.dashboard-page .ref-eyebrow{font-size:10px!important;font-weight:700!important}
body.dashboard-page .ref-welcome h1{font-size:29px!important;font-weight:650!important;color:var(--tn-text-strong)!important}
body.dashboard-page .ref-welcome p{font-size:12px!important;font-weight:500!important;color:var(--tn-muted)!important}
body.dashboard-page .ref-card-head>div>span{font-size:10px!important;font-weight:600!important}
body.dashboard-page .ref-card-head strong{font-size:31px!important;font-weight:700!important;color:var(--tn-text-strong)!important}
body.dashboard-page .ref-chips b{font-size:10px!important;font-weight:500!important}
body.dashboard-page .ref-section-title h2{font-size:18px!important;font-weight:650!important;color:var(--tn-text-strong)!important}
body.dashboard-page .ref-op b{font-size:18px!important;font-weight:650!important}
body.dashboard-page .ref-op small{font-size:10px!important;font-weight:500!important}
body.dashboard-page .ref-performance h3,
body.dashboard-page .ref-insights h3,
body.dashboard-page .ref-bottom h3{font-size:14px!important;font-weight:650!important;color:var(--tn-text-strong)!important}

/* Prevent legacy dark V5/V5.4 colors from appearing anywhere in the app. */
body:not(.login-page) .table-wrap,
body:not(.login-page) .table-wrapper,
body:not(.login-page) .v5-pivot{background:#fff!important;color:var(--tn-text)!important}
body:not(.login-page) .table-wrap th,
body:not(.login-page) .table-wrapper th,
body:not(.login-page) .v5-table th{background:#3b4774!important;color:#fff!important}
body:not(.login-page) .table-wrap td,
body:not(.login-page) .table-wrapper td,
body:not(.login-page) .v5-table td{background:#fff!important;color:#344054!important}

/* Desktop compactness at smaller screens; mobile never receives the 125% zoom. */
@media(max-width:1099px){
  body:not(.login-page){zoom:1!important}
  body:not(.login-page) .content{padding:24px 20px 44px!important}
}
@media(max-width:700px){
  body:not(.login-page) .content{padding:20px 14px 80px!important}
  body:not(.login-page) .toolbar h1{font-size:25px!important}
  body:not(.login-page) .table th{font-size:10px!important}
  body:not(.login-page) .table td{font-size:12px!important}
}