/* KomputerHub V23 — visible page-structure redesign, 2026-10-14
 * Styling/navigation only. Keep original brand navy, red→orange, white.
 * No checkout, payments, stock writes or original element handlers replaced.
 */
:root{--kh23-bg:#f3f6fa;--kh23-navy:#0f172a;--kh23-red:#dc2626;--kh23-orange:#f97316;--kh23-ink:#12213a;--kh23-muted:#657891;--kh23-border:#e5ebf3;--kh23-accent:linear-gradient(112deg,#dc2626,#ef4444 50%,#f97316);--kh23-radius:18px;--kh23-shadow:0 10px 32px rgba(17,35,61,.055)}
@media screen{
html{scroll-behavior:smooth}
body.kh-v23-app{background:var(--kh23-bg)!important;color:var(--kh23-ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
body.kh-v23-app :is(#khMain,.kh-main){background:var(--kh23-bg)!important;min-height:100vh;isolation:isolate}
body.kh-v23-app #khMain>section:not(.kh-v23-pagehero){padding-inline:clamp(16px,2.1vw,36px)!important}
body.kh-v23-app #khMain>section:not(.kh-v23-pagehero):not(.kh-v22-utilitybar){padding-top:18px!important}
/* NEW navigation with clear contrast and a visible collapse control */
body.kh-v23-app #khSidebar{background:linear-gradient(172deg,#0e1c33,#0d192c 55%,#080f1e)!important;border-right:1px solid #26354b!important;box-shadow:10px 0 28px rgba(13,28,48,.10)!important}
body.kh-v23-app #khSidebar>.p-6{border-bottom:1px solid rgba(255,255,255,.075)!important;padding:22px 19px 15px!important}
body.kh-v23-app #khSidebar .kh-sidebar-logo-text h1{font-size:20px!important;letter-spacing:-.04em}
body.kh-v23-app #khSidebar .kh-sidebar-logo-text p{font-size:10px!important;white-space:normal}
body.kh-v23-app #khSidebar .kh-sidebar-role-text{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;padding:9px 12px!important;border-radius:11px!important}
body.kh-v23-app #khSidebar .kh-nav-find-wrap{margin:9px 10px!important;padding:4px!important;background:transparent!important}
body.kh-v23-app #khSidebar .kh-nav-find{height:46px!important;border:1px solid rgba(172,192,218,.22)!important;background:#172b46!important;border-radius:11px!important;color:white!important;padding:0 10px!important;box-shadow:0 2px 6px rgba(0,0,0,.05)!important}
body.kh-v23-app #khSidebar .kh-nav-find::placeholder{color:#a0b1ca!important}
body.kh-v23-app #khSidebar .kh-nav-find:focus{outline:none!important;border-color:#fd8744!important;box-shadow:0 0 0 3px rgba(249,115,22,.18)!important}
body.kh-v23-app #khSidebar nav{padding:7px 13px 28px!important}
body.kh-v23-app #khSidebar .kh-sidebar-section{font-size:10px!important;letter-spacing:.135em!important;color:#8aa2c2!important;margin-top:21px!important;margin-bottom:9px!important}
body.kh-v23-app #khSidebar nav a.kh-sidebar-link{min-height:44px!important;border-radius:11px!important;padding:12px 13px!important;font-size:12.5px!important;line-height:1.25;position:relative}
body.kh-v23-app #khSidebar nav a.kh-sidebar-link.kh-red-gradient{background:linear-gradient(98deg,rgba(220,38,38,.34),rgba(249,115,22,.13))!important;border:1px solid rgba(249,115,22,.13);box-shadow:inset 3px 0 #f97316!important}
body.kh-v23-app #khSidebar nav a.kh-sidebar-link:not(.kh-red-gradient):hover{background:#22334b!important;transform:none!important}
body.kh-v23-app #khSidebar .kh-desktop-toggle{min-width:42px;border-radius:10px;cursor:pointer}
body.kh-v23-app #khSidebar .kh-desktop-toggle-row{border-bottom:1px solid rgba(255,255,255,.045)}
/* Top workspace bar */
body.kh-v23-app .kh-v22-utilitybar{height:70px!important;min-height:70px!important;position:sticky!important;top:0!important;z-index:45!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e5ebf3!important;padding-inline:clamp(16px,2.1vw,36px)!important;box-shadow:0 2px 15px rgba(15,23,42,.024)}
body.kh-v23-app .kh-v22-breadcrumb{font-size:11px!important;text-transform:uppercase;letter-spacing:.065em;color:#7389a6!important}
body.kh-v23-app .kh-v22-current{font-size:15px!important;font-weight:800!important}
body.kh-v23-app :is(.kh-v22-topsearch,.kh-v22-topicon,.kh-v22-role){border-radius:11px!important;min-height:42px!important}
body.kh-v23-app .kh-v22-topsearch{background:#f5f8fc!important;border:1px solid #e4ebf4!important;width:min(34vw,410px)!important;min-width:180px!important;font-size:12px!important}
/* Visible NEW module header, intentionally separate from utility bar */
body.kh-v23-app .kh-v23-pagehero{position:relative;margin:24px clamp(16px,2.1vw,36px) 14px;padding:27px 29px 25px!important;min-height:166px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid var(--kh23-border);border-radius:20px;box-shadow:var(--kh23-shadow);isolation:isolate}
body.kh-v23-app .kh-v23-pagehero::before{content:'';position:absolute;inset:0 auto 0 0;width:6px;background:var(--kh23-accent)}
body.kh-v23-app .kh-v23-pagehero::after{content:'';position:absolute;right:-72px;top:-104px;width:330px;height:330px;background:radial-gradient(circle,rgba(249,115,22,.10) 0%,rgba(220,38,38,.05) 46%,transparent 71%);z-index:-1}
.kh-v23-hero-left{position:relative;z-index:1;min-width:0;max-width:820px}
.kh-v23-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:#d9462b;font-weight:850;text-transform:uppercase;letter-spacing:.13em;margin-bottom:12px}
.kh-v23-eyebrow::before{content:'';width:7px;height:7px;background:#f97316;border-radius:50%}
.kh-v23-title{font-size:clamp(24px,2.55vw,35px);font-weight:850;line-height:1.15;letter-spacing:-.045em;color:#111b31!important;margin:0!important}
.kh-v23-description{font-size:13px;line-height:1.6;color:#697b96;max-width:710px;margin:9px 0 0!important}
.kh-v23-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;max-width:520px;position:relative;z-index:1}
.kh-v23-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none!important;white-space:nowrap;min-height:43px;padding:10px 14px;border-radius:11px;border:1px solid #e3eaf3;background:#fff;color:#233a5d!important;font-size:12px;font-weight:750;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.kh-v23-action:hover{background:#fffaf6;border-color:#f6b083;transform:translateY(-1px);box-shadow:0 7px 16px rgba(15,23,42,.055)}
.kh-v23-action.primary{background:var(--kh23-accent);border:0;color:white!important;box-shadow:0 7px 18px rgba(220,38,38,.15)}
.kh-v23-action.primary:hover{filter:brightness(.96)}
/* Old header retains ALL controls but becomes a toolbar, not a duplicate hero. */
body.kh-v23-app #khMain > header{position:relative!important;top:auto!important;margin:0 clamp(16px,2.1vw,36px) 10px!important;background:transparent!important;box-shadow:none!important;border:none!important;border-radius:0!important;z-index:2!important}
body.kh-v23-app #khMain > header > div{border:1px solid #e5ebf3!important;border-radius:14px!important;background:#fff!important;padding:11px 15px!important;box-shadow:0 3px 14px rgba(15,23,42,.025)!important}
body.kh-v23-app #khMain > header :is(h1,.kh-v2-title){font-size:15px!important;letter-spacing:-.02em!important}
body.kh-v23-app #khMain > header .kh-v2-subtitle{display:none!important}
body.kh-v23-app #khMain > header .kh-v2-eyebrow{display:none!important}
/* Make actual operational elements visibly new without changing handlers */
body.kh-v23-app #khMain :is(.bg-white.rounded-\[1\.7rem\],.bg-white.rounded-2xl,.bg-white.rounded-3xl,.kh-v2-panel,.kh-v2-card,.kh-v2-metric-card,.fp-step,.kh-v22-workcard){border:1px solid #e6ecf4!important;border-radius:17px!important;box-shadow:var(--kh23-shadow)!important;background:#fff}
body.kh-v23-app #khMain .kh-v2-metric-card{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:12px;min-height:126px;padding:20px!important;text-decoration:none!important}
body.kh-v23-app #khMain .kh-v2-metric-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--kh23-accent);opacity:.7}
body.kh-v23-app #khMain .kh-v2-metric-card p{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;color:#697d9a}
body.kh-v23-app #khMain .kh-v2-metric-card h3{font-weight:880!important;font-size:clamp(21px,2vw,30px)!important;color:#162440!important;margin-top:9px}
body.kh-v23-app #khMain .kh-v2-metric-card small{color:#71839f}
body.kh-v23-app #khMain .kh-v2-metric-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff0e9!important;color:#ee5229!important;flex-shrink:0}
body.kh-v23-app #khMain .kh-v2-attention-strip{background:#fff9f5!important;border:1px solid #f2d8c8!important;border-radius:15px!important;padding:19px!important;box-shadow:none!important}
body.kh-v23-app #khMain .kh-v2-attention-strip .kh-v2-attention-icon{border-radius:12px!important;background:#ffebe0;color:#df4327}
body.kh-v23-app #khMain .kh-v22-workhub{gap:18px!important;margin-top:18px;margin-bottom:23px!important}
body.kh-v23-app #khMain .kh-v22-workcard{padding:21px!important}
body.kh-v23-app #khMain .kh-v22-workhead h2{font-size:17px!important;letter-spacing:-.03em!important;color:#172642}
body.kh-v23-app #khMain .kh-v22-quicklink{min-height:82px!important;border:1px solid #e8edf5!important;background:#f8fafc!important;border-radius:13px!important}
body.kh-v23-app #khMain .kh-v22-quicklink:hover{border-color:#ffc8a4!important;background:#fff8f2!important}
body.kh-v23-app #khMain .kh-v22-info-link{background:#f9fbfe!important;border-radius:12px!important}
/* Other existing cards, forms and filter bars */
body.kh-v23-app #khMain :is(input[type=text],input[type=search],input[type=number],input[type=email],input[type=date],input[type=datetime-local],select,textarea):not(.kh-nav-find){min-height:39px;border-radius:10px!important;max-width:100%;}
body.kh-v23-app #khMain :is(input,select,textarea):focus-visible{outline:3px solid rgba(249,115,22,.14)!important;outline-offset:0;border-color:#ef8d59!important}
body.kh-v23-app #khMain :is(.kh-v2-button-primary,.red-gradient,button.bg-red-600,button.bg-rose-600,a.bg-red-600){border-radius:11px!important}
body.kh-v23-app #khMain :is(button,a,input[type=submit]){transition:box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
body.kh-v23-app #khMain :is(button,a,input[type=submit]):focus-visible{outline:3px solid rgba(249,115,22,.34)!important;outline-offset:3px}
/* Comprehensive tables: preserve data and prevent serial-price-action collisions */
body.kh-v23-app #khMain :is(.kh-v22-table-viewport,.kh-v23-table-scroll,.overflow-x-auto,.table-responsive){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-color:#bbcbe0 transparent;scrollbar-width:thin}
body.kh-v23-app #khMain table{border-collapse:separate!important;border-spacing:0!important;background:#fff;line-height:1.45;font-variant-numeric:tabular-nums}
body.kh-v23-app #khMain table thead th{background:#f4f7fb!important;color:#5b7295!important;text-transform:uppercase;font-size:10px!important;letter-spacing:.06em!important;min-height:43px;padding:12px 11px!important;white-space:nowrap;position:relative}
body.kh-v23-app #khMain table tbody td{padding:12px 11px!important;border-bottom:1px solid #edf1f7!important;vertical-align:middle!important;font-size:12px;overflow-wrap:normal}
body.kh-v23-app #khMain table tbody tr:hover{background:#fff8f3!important}
body.kh-v23-app #khMain table [data-kh-serial],body.kh-v23-app #khMain table .kh-serial-cell,body.kh-v23-app #khMain table .kh-v20-monitor-serial,body.kh-v23-app #khMain table .kh-v20-primary-serial{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.02em;text-transform:uppercase!important;word-break:break-all}
body.kh-v23-app #khMain :is(.kh-v2-table-wrap,.kh-v22-table-viewport) table{min-width:max(100%,990px)}
body.kh-v23-app.kh-v22-details #khMain table{min-width:1360px!important}
body.kh-v23-app.kh-v22-details #khMain table td:last-child{min-width:140px}
body.kh-v23-app.kh-v22-finance #khMain table{min-width:1060px!important}
body.kh-v23-app #khMain :is(.kh-v22-workcard,.fp-step)>div:first-child{min-width:0}
body.kh-v23-app #khMain .kh-v23-table-viewport{border-radius:14px;border:1px solid #e6ecf4;max-width:100%;overflow-x:auto}
body.kh-v23-app #khMain .kh-v23-table-viewport table{min-width:1000px}
body.kh-v23-app #khMain .kh-v23-table-viewport table tbody td{white-space:normal}
/* Module-specific feel, not one-size-fits-all */
body.kh-v23-inventory #khMain :is(#ownedTable,.leased-active-table){min-width:1150px!important}
body.kh-v23-sales #khMain :is(.kh-table,#showroomSalesProductTable){min-width:1040px!important}
body.kh-v23-bookings #khMain #bookingTable{min-width:1250px!important}
body.kh-v23-finance #khMain :is(.fp-step,.fp-summary-card){border-radius:16px!important}
body.kh-v23-clientorders #khMain table{min-width:940px}
/* standalone frontends */
body.kh-v23-public{background:#f6f8fc!important}
body.kh-v23-public :is(.product-card,.kh-product-card,.kh-v2-panel){border-radius:17px!important;box-shadow:var(--kh23-shadow)!important;border:1px solid #e6edf5!important;transition:transform .2s,box-shadow .2s}
body.kh-v23-public :is(.product-card,.kh-product-card):hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,23,42,.10)!important}
body.kh-v23-public header{backdrop-filter:blur(15px);border-bottom:1px solid #e9edf5}
body.kh-v23-public :is(a.red-gradient,button.red-gradient,button.bg-red-600){border-radius:11px!important;box-shadow:0 6px 15px rgba(220,38,38,.12)}
}
@media(max-width:1199px){body.kh-v23-app .kh-v23-pagehero{align-items:flex-start;flex-direction:column;gap:14px;min-height:0}.kh-v23-hero-actions{justify-content:flex-start;max-width:100%}body.kh-v23-app .kh-v22-topsearch{min-width:43px!important;width:43px!important}}
@media(max-width:1023px){body.kh-v23-app #khMain .kh-v23-pagehero{margin-top:14px!important}body.kh-v23-app .kh-v22-utilitybar{padding-left:68px!important}body.kh-v23-app #khMain>header{margin:0 14px 12px!important}body.kh-v23-app #khSidebar{z-index:100!important}}
@media(max-width:639px){body.kh-v23-app .kh-v23-pagehero{margin:13px 12px 10px!important;padding:18px!important;border-radius:16px;min-height:0}body.kh-v23-app .kh-v23-title{font-size:25px}.kh-v23-description{font-size:12px}.kh-v23-action{min-height:40px;font-size:11px;padding:8px 11px;flex:1 1 auto}.kh-v23-hero-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kh-v23-hero-actions .kh-v23-action{white-space:normal;text-align:center}body.kh-v23-app .kh-v22-utilitybar{padding-left:64px!important;padding-right:12px!important}body.kh-v23-app .kh-v22-utilitybar .kh-v22-current{font-size:11px!important}body.kh-v23-app #khMain>header{margin-inline:12px!important}body.kh-v23-app #khMain .kh-v2-metric-card{min-height:112px;padding:14px!important}body.kh-v23-app #khMain .kh-v22-workcard{padding:14px!important}}
@media(prefers-reduced-motion:reduce){body.kh-v23-app *,body.kh-v23-public *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{body.kh-v23-app #khMain .kh-v23-pagehero{display:none!important}body.kh-v23-app #khMain>header{margin:0!important;box-shadow:none!important}body.kh-v23-app #khMain table{min-width:0!important}body.kh-v23-app #khMain :is(.kh-v22-table-viewport,.kh-v23-table-viewport){overflow:visible!important}}