/* KomputerHub V20 Design System — presentation only.
   Brand remains red -> orange, dark navy and white. No gateway/order logic. */
:root {
  --kh20-navy: #0f172a;
  --kh20-ink: #16243b;
  --kh20-muted: #64748b;
  --kh20-border: #e0e7f0;
  --kh20-light: #f5f7fb;
  --kh20-red: #dc2626;
  --kh20-orange: #f97316;
  --kh20-gradient: linear-gradient(110deg,#dc2626 0%,#ef4444 50%,#f97316 100%);
  --kh20-radius: 14px;
  --kh20-shadow: 0 4px 20px rgba(15,23,42,.045);
}
@media screen {
  html { -webkit-text-size-adjust:100%; }
  body { background:var(--kh20-light); color:var(--kh20-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  *,*::before,*::after { box-sizing:border-box; }
  .kh-main, #khMain { min-width:0 !important; background:var(--kh20-light); }
  .kh-main > *, #khMain > * { min-width:0; }
  :is(.kh-main,#khMain) :is(.kh-page-header,.kh-panel-header) {gap:16px;}
  :is(.kh-main,#khMain) :is(.kh-page-header,.kh-panel,.kh-v2-card,.kh-detail-card,.kh-stat-card),
  .kh-v20-public :is(.kh-panel,.kh-detail-card) { border-color:var(--kh20-border); }
  :is(.kh-main,#khMain) :is(.kh-panel,.kh-v2-card,.kh-stat-card) { box-shadow:var(--kh20-shadow); }
  :is(.kh-main,#khMain) :is(.kh-workspace,.kh-v2-layout) { min-width:0; max-width:100%; }
  :is(.kh-main,#khMain) :is(.flex,.grid)>* { min-width:0; }
  :is(.kh-main,#khMain) :is(h1,h2,h3) { overflow-wrap:break-word; }
  :is(.kh-main,#khMain) .kh-page-title { font-size:clamp(1.45rem,2vw,2rem); line-height:1.2; letter-spacing:-.025em; }
  :is(.kh-main,#khMain) :is(.kh-modal-panel,.kh-panel,.kh-v2-card) { max-width:100%; }

  /* Shared actionable controls: spacing and feedback, without changing action types. */
  :is(.kh-main,#khMain) :is(button,input[type=submit],input[type=button],a.kh-btn,a[role=button]),
  .kh-v20-public :is(button,input[type=submit],a[role=button]) {
     max-width:100%; vertical-align:middle; border-radius:10px; line-height:1.25;
     transition:background-color .16s,border-color .16s,box-shadow .16s,opacity .16s;
  }
  :is(.kh-main,#khMain) button:focus-visible,
  :is(.kh-main,#khMain) a:focus-visible,
  .kh-v20-public :is(button,a):focus-visible {
     outline:2px solid var(--kh20-orange) !important; outline-offset:3px;
  }
  :is(.kh-main,#khMain) :is(input,textarea,select), .kh-v20-public :is(input,textarea,select) {
     font-family:inherit; max-width:100%; font-size:inherit;
  }
  :is(.kh-main,#khMain) :is(input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=datetime-local],select,textarea) {
     color:#17243a; border-radius:10px; min-width:0;
  }
  :is(.kh-main,#khMain) :is(input,select,textarea):focus-visible { outline:2px solid rgba(249,115,22,.8); outline-offset:1px; }

  /* Safe table design. Wide data remains fully accessible via horizontal scroll. */
  :is(.kh-main,#khMain) :is(.kh-table-wrap,.kh-v2-table-wrap,.overflow-x-auto,.table-responsive,.kh-modal-table-wrap),
  .kh-v20-table-scroll {
     max-width:100%; scrollbar-width:thin; scrollbar-color:#bbc6d4 transparent;
     overscroll-behavior-x:contain;
  }
  .kh-v20-table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; border-radius:12px; }
  :is(.kh-main,#khMain) table { border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
  :is(.kh-main,#khMain) table :is(th,td) { box-sizing:border-box; vertical-align:middle; }
  :is(.kh-main,#khMain) table thead :is(th,td) { line-height:1.35; }
  :is(.kh-main,#khMain) table tbody tr { transition:background-color .13s; }
  :is(.kh-main,#khMain) table tbody tr:hover { background:#fffaf7; }
  :is(.kh-main,#khMain) :is(.kh-serial-cell,[data-kh-serial],.kh-serial-no,.serial-number,.serial-value) { text-transform:uppercase; font-variant-numeric:tabular-nums; letter-spacing:.012em; }
  .kh-v20-table-scroll :is(td,th), .kh-modal-table-wrap :is(td,th) { overflow-wrap:break-word; }
  .kh-v20-scroll-note { padding:7px 11px; margin:0; color:var(--kh20-muted); font-size:11px; background:#f8fafc; border:1px solid var(--kh20-border); border-radius:9px 9px 0 0; }
  .kh-v20-scroll-note[hidden] { display:none !important; }

  /* Sidebar — compact icon launcher when collapsed, full-width input when expanded. */
  .kh-sidebar { border-right:1px solid rgba(255,255,255,.07); }
  .kh-sidebar .kh-sidebar-link { min-width:0; border-radius:11px !important; }
  .kh-sidebar .kh-sidebar-link:hover { transform:none !important; }
  .kh-sidebar .kh-sidebar-link:focus-visible { outline:2px solid #fb923c !important; outline-offset:2px; }
  .kh-nav-find-wrap { position:relative; min-width:0; padding:10px 12px 14px !important; border-bottom:1px solid rgba(255,255,255,.10); }
  .kh-nav-find-label { color:#e2e8f0 !important; margin-bottom:8px; font-size:12px !important; font-weight:750 !important; letter-spacing:.015em; }
  .kh-nav-find { appearance:none; display:block; width:100% !important; height:44px; padding:11px 12px 11px 36px !important; background:#1e293b !important; color:#fff !important; border:1px solid #475569 !important; border-radius:11px !important; font-size:13px !important; font-weight:500 !important; box-shadow:inset 0 1px 3px rgba(0,0,0,.15); }
  .kh-nav-find::placeholder { color:#a6b2c4 !important; }
  .kh-nav-find:focus { border-color:#fb923c !important; background:#152038 !important; outline:0; box-shadow:0 0 0 3px rgba(249,115,22,.2) !important; }
  .kh-nav-find-label i { color:#fda166; }
  .kh-nav-help { font-size:10px; line-height:1.5; color:#9cabbd; margin-top:8px; }
  .kh-nav-results { border-radius:12px; margin-top:10px; border:1px solid #475569; box-shadow:0 14px 26px rgba(0,0,0,.18); max-height:min(40vh,330px); overscroll-behavior:contain; }
  .kh-nav-result { padding:11px 12px !important; gap:3px !important; border-bottom:1px solid #334155; }
  .kh-nav-result strong { display:block; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
  .kh-nav-search-launch { display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.15); color:#e2e8f0; background:#1e293b; align-items:center; justify-content:center; margin:auto; cursor:pointer; }
  .kh-nav-search-launch:hover { background:linear-gradient(135deg,#dc2626,#f97316); color:#fff; border-color:transparent; }
  .kh-nav-search-launch:focus-visible { outline:2px solid #fb923c; outline-offset:2px; }
  body.kh-menu-search-open .kh-sidebar { box-shadow:24px 0 80px rgba(15,23,42,.22); }
  body.kh-menu-search-open .kh-sidebar .kh-sidebar-link { justify-content:space-between; padding-inline:1rem; }
  body.kh-menu-search-open .kh-sidebar .kh-sidebar-link > span { justify-content:flex-start; }
  body.kh-menu-search-open .kh-sidebar :is(.kh-sidebar-text,.kh-sidebar-logo-text,.kh-sidebar-role-text,.kh-sidebar-section-text) {width:auto!important; opacity:1!important; visibility:visible!important; }
  body.kh-menu-search-open .kh-sidebar .kh-sidebar-section {height:auto;min-height:1rem;margin:1.05rem .5rem .35rem;padding:0 .55rem;background:transparent;}
  body.kh-menu-search-open .kh-sidebar .p-6 {padding-inline:1.5rem;}
  body.kh-menu-search-open .kh-nav-search-launch {display:none;}
  .kh-nav-find-wrap .kh-nav-help,.kh-nav-find-wrap .kh-nav-find-label { white-space:normal; }
  .kh-sidebar [data-kh-nav-hidden="true"] { display:none !important; }
  .kh-sidebar .kh-sidebar-link[aria-current=page] { box-shadow:0 7px 20px rgba(220,38,38,.14); }

  /* A unified search bar and count label for large, currently loaded tables. */
  .kh-unified-search { display:flex !important; align-items:center; gap:10px !important; flex-wrap:wrap; margin:12px 0 !important; padding:12px !important; border:1px solid var(--kh20-border) !important; background:#fff !important; border-radius:12px !important; }
  .kh-unified-search label { font-weight:750 !important; color:#334155 !important; font-size:12px !important; }
  .kh-unified-search input { flex:1 1 220px !important; min-height:40px !important; padding:9px 12px !important; background:#f8fafc !important; font-size:13px !important; }
  .kh-unified-search output { font-size:11px; white-space:nowrap; color:#64748b; }

  /* Compact professional asset disposal table: prevent serial+price overlap. */
  #disposalTable.kh-sales-modern-table { table-layout:auto !important; min-width:1900px !important; width:100% !important; }
  #disposalTable.kh-sales-modern-table thead th,#disposalTable.kh-sales-modern-table tbody td {width:auto !important; min-width:0 !important; box-sizing:border-box; }
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(1){min-width:198px !important;max-width:244px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(2){min-width:240px !important;max-width:310px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(3){min-width:110px !important;max-width:180px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(4){min-width:205px !important;max-width:265px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(5){min-width:265px !important;max-width:290px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(8){min-width:110px !important;max-width:150px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(9){min-width:116px !important;max-width:170px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(11){min-width:195px !important;max-width:235px;}
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(12){min-width:130px !important;max-width:166px;}
  #disposalTable.kh-sales-modern-table tbody td:nth-child(5) { overflow-wrap:normal !important; }
  #disposalTable .kh-serial-cell { display:flex !important; width:100%; max-width:100%; min-width:0; align-items:center !important; gap:8px; padding:7px 9px !important; margin:0 0 5px 0 !important; border:1px solid #dae4ef; border-radius:9px; background:#f8fafc; }
  #disposalTable .kh-serial-cell i { flex:0 0 15px; color:#e45a2d; }
  #disposalTable .kh-serial-cell span { display:block; flex:1 1 auto; min-width:0; font-size:11px; font-weight:850; line-height:1.45; white-space:normal !important; overflow-wrap:anywhere; word-break:normal; text-transform:uppercase; }
  #disposalTable .kh-v20-serial-monitor { background:#f0f7ff; color:#174172; border-color:#d3e5f8; }
  #disposalTable .kh-v20-serial-monitor i { color:#336aa6; }
  #disposalTable .kh-serial-history-old { max-width:100%; overflow-wrap:anywhere; }
  #disposalTable td:nth-child(8) p { white-space:nowrap; }
  #disposalTable td:nth-child(11) input[type=datetime-local] { width:100% !important; min-width:0 !important; }
  #disposalTable .kh-sales-action-compact { display:flex; flex-wrap:nowrap; gap:8px; align-items:center; justify-content:flex-start; }
  #disposalTable .kh-row-view-btn { min-width:65px; }

  /* Comparable space for other condensed reports; do not hide report columns. */
  #showroomTable.kh-sales-modern-table { min-width:1480px !important; table-layout:auto !important; }
  #manualSalesTable.kh-sales-modern-table { min-width:1350px !important; table-layout:auto !important; }
  #showroomTable.kh-sales-modern-table td:nth-child(4) .kh-serial-cell,
  #manualSalesTable.kh-sales-modern-table td:nth-child(3) .kh-serial-cell { max-width:100%; white-space:normal !important; }
  .kh-modal.kh-inline-table .kh-modal-table-wrap { width:100%; max-width:100%; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .kh-modal.kh-inline-table .kh-modal-panel { min-width:0; }
  .kh-modal.kh-inline-table .kh-modal-search { max-width:100%; }

  @media (min-width:1024px) {
    body:not(.kh-menu-search-open) .kh-sidebar:not(:hover):not(:focus-within) .kh-nav-find-wrap {display:block !important;padding:10px !important;}
    body:not(.kh-menu-search-open) .kh-sidebar:not(:hover):not(:focus-within) .kh-nav-find-wrap > :not(.kh-nav-search-launch) {display:none !important;}
    body:not(.kh-menu-search-open) .kh-sidebar:not(:hover):not(:focus-within) .kh-nav-search-launch {display:flex !important;}
    body.kh-menu-search-open .kh-sidebar {width:var(--kh-sidebar-open) !important;}
    body.kh-menu-search-open .kh-sidebar :is(.kh-nav-find-wrap,.kh-nav-find-label,.kh-nav-find,.kh-nav-help){display:block !important;}
    .kh-sidebar:hover .kh-nav-search-launch,.kh-sidebar:focus-within .kh-nav-search-launch {display:none !important;}
    .kh-sidebar:hover .kh-nav-find-wrap > :not(.kh-nav-search-launch), .kh-sidebar:focus-within .kh-nav-find-wrap > :not(.kh-nav-search-launch) {display:block;}
  }
  @media (max-width:1023px) {
    .kh-nav-search-launch {display:none !important;}
    .kh-nav-find-wrap {padding:12px 15px 16px !important;}
    .kh-sidebar .kh-nav-find {font-size:16px !important;}
    #khSidebarToggle {width:42px;height:42px;border-radius:11px;box-shadow:0 9px 24px rgba(220,38,38,.23);}
  }
  @media (max-width:760px) {
    :is(.kh-main,#khMain) .kh-page-header {flex-wrap:wrap;gap:12px;}
    :is(.kh-main,#khMain) :is(.kh-workspace,.kh-v2-layout) { padding-inline:12px; }
    :is(.kh-main,#khMain) :is(.kh-panel,.kh-v2-card) {border-radius:12px;}
    .kh-unified-search {align-items:stretch !important; flex-direction:column !important;}
    .kh-unified-search input,.kh-unified-search label {width:100% !important;flex-basis:auto !important;}
    /* The sales summary already has its own stacked mobile cards. Maintain them. */
    #disposalTable.kh-sales-modern-table,
    #showroomTable.kh-sales-modern-table,
    #manualSalesTable.kh-sales-modern-table {display:block !important;min-width:0 !important;width:100% !important;table-layout:auto !important;}
    #disposalTable.kh-sales-modern-table thead,#showroomTable.kh-sales-modern-table thead,#manualSalesTable.kh-sales-modern-table thead {display:none !important;}
    #disposalTable.kh-sales-modern-table tbody,#showroomTable.kh-sales-modern-table tbody,#manualSalesTable.kh-sales-modern-table tbody {display:grid !important;gap:12px;}
    #disposalTable.kh-sales-modern-table tbody tr,#showroomTable.kh-sales-modern-table tbody tr,#manualSalesTable.kh-sales-modern-table tbody tr {display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border:1px solid var(--kh20-border);border-radius:14px;overflow:visible;box-shadow:0 3px 12px rgba(15,23,42,.05);background:#fff;}
    #disposalTable.kh-sales-modern-table tbody td,#showroomTable.kh-sales-modern-table tbody td,#manualSalesTable.kh-sales-modern-table tbody td {display:block !important;width:auto !important;max-width:none;min-width:0 !important;padding:12px !important;overflow-wrap:anywhere;}
    #disposalTable.kh-sales-modern-table tbody td::before,#showroomTable.kh-sales-modern-table tbody td::before,#manualSalesTable.kh-sales-modern-table tbody td::before {content:attr(data-label);display:block !important;margin-bottom:7px;font-size:10px;letter-spacing:.06em;color:#697c94;font-weight:850;text-transform:uppercase;}
    #disposalTable.kh-sales-modern-table tbody td:first-child,#disposalTable.kh-sales-modern-table tbody td:nth-child(2),#disposalTable.kh-sales-modern-table tbody td:nth-child(5),#disposalTable.kh-sales-modern-table tbody td:nth-child(11),#disposalTable.kh-sales-modern-table tbody td:last-child {grid-column:1/-1;}
    .kh-modal.kh-inline-table .kh-modal-table-wrap {overflow-x:visible !important;max-height:none !important;}
    #disposalTable .kh-serial-cell {width:100%;}
    #disposalTable .kh-sales-action-compact {justify-content:flex-start;}
  }
  @media (max-width:390px) {
    #disposalTable.kh-sales-modern-table tbody tr,#showroomTable.kh-sales-modern-table tbody tr,#manualSalesTable.kh-sales-modern-table tbody tr {grid-template-columns:minmax(0,1fr);}
    #disposalTable.kh-sales-modern-table tbody td {grid-column:1/-1;}
  }
  @media(prefers-reduced-motion:reduce) {
    :is(.kh-main,#khMain) :is(button,a),.kh-sidebar,.kh-sidebar-link {transition:none !important;}
  }
}
/* Preserve existing business-facing printed PDFs, receipts and export styles. */
@media print { .kh-nav-search-launch,.kh-v20-scroll-note,.kh-unified-search {display:none !important;} }
@media screen and (max-width:1023px) {
  /* Respect the full viewport when the navigation becomes an off-canvas drawer. */
  body .kh-main,body #khMain { margin-left:0 !important; width:100% !important; max-width:100%; }
}
@media screen and (max-width:760px) {
  #disposalTable.kh-sales-modern-table tbody tr td:nth-child(5),
  #disposalTable.kh-sales-modern-table tbody tr td:nth-child(11),
  #disposalTable.kh-sales-modern-table tbody tr td:nth-child(12) {min-width:0 !important;max-width:none !important;width:auto !important;}
  #disposalTable.kh-sales-modern-table tbody td .kh-serial-cell {width:100% !important;min-width:0 !important;max-width:100% !important;}
  #disposalTable.kh-sales-modern-table tbody td .kh-serial-cell span {white-space:normal !important;overflow-wrap:anywhere !important;}
  .kh-modal.kh-inline-table .kh-modal-panel {width:100% !important;}
}
@media screen {
  /* Keep the per-row options floating above scrollable tables, never over data cells. */
  .kh-sales-modern-table .kh-row-menu[open] > .kh-row-menu-panel {position:fixed !important; z-index:10095 !important; width:min(260px,calc(100vw - 20px)) !important;max-height:min(320px,50vh) !important;overflow-y:auto !important;}
}
@media screen {
  :is(.kh-main,#khMain) td.kh-v20-serial-column :is(code,span,strong,.kh-serial-cell),
  :is(.kh-main,#khMain) td.kh-v20-serial-column {text-transform:uppercase;}
}
@media screen {
  /* Date/time selectors need more space than plain text on reports. */
  #disposalTable.kh-sales-modern-table :is(th,td):nth-child(11) {min-width:260px !important; max-width:295px;}
  #showroomTable.kh-sales-modern-table :is(th,td):nth-child(10) {min-width:245px !important;}
  #disposalTable input[type=datetime-local],#showroomTable input[type=datetime-local]{min-height:38px !important;padding:7px 9px !important;font-size:12px !important;}
}
@media screen and (max-width:760px){
  #disposalTable.kh-sales-modern-table tbody tr td:nth-child(11),
  #showroomTable.kh-sales-modern-table tbody tr td:nth-child(10) {min-width:0 !important; max-width:none !important;}
}
@media screen and (min-width:1024px) {
  /* V20 navigation: permanently readable on desktop; no hover-only disappearing search. */
  :root {--kh-sidebar-open:17.5rem;}
  body .kh-sidebar,body .kh-sidebar:not(:hover) {width:var(--kh-sidebar-open) !important;}
  body .kh-main,body #khMain {margin-left:var(--kh-sidebar-open) !important;width:calc(100% - var(--kh-sidebar-open)) !important;}
  body .kh-sidebar :is(.kh-sidebar-text,.kh-sidebar-logo-text,.kh-sidebar-role-text,.kh-sidebar-section-text),
  body .kh-sidebar:not(:hover) :is(.kh-sidebar-text,.kh-sidebar-logo-text,.kh-sidebar-role-text,.kh-sidebar-section-text) {
     display:inline !important; opacity:1 !important; visibility:visible !important; width:auto !important; overflow:visible; white-space:normal;
  }
  body .kh-sidebar:not(:hover) .kh-sidebar-section {height:auto !important;min-height:1rem !important;margin:1.05rem .5rem .35rem !important;padding:0 .55rem !important;background:transparent !important;overflow:visible !important;}
  body .kh-sidebar:not(:hover) .kh-sidebar-link {justify-content:space-between !important;padding:11px 13px !important;}
  body .kh-sidebar:not(:hover) .kh-sidebar-link > span {justify-content:flex-start !important;}
  body .kh-sidebar:not(:hover) .kh-sidebar-badge {position:static !important;min-width:1.4rem !important;height:1.4rem !important;box-shadow:none !important;}
  body .kh-sidebar:not(:hover) .p-6 {padding:1.4rem 1.2rem !important;}
  body .kh-sidebar .kh-nav-find-wrap,body:not(.kh-menu-search-open) .kh-sidebar:not(:hover):not(:focus-within) .kh-nav-find-wrap {display:block !important;padding:10px 13px 14px !important;}
  body .kh-sidebar .kh-nav-find-wrap > :not(.kh-nav-search-launch),
  body:not(.kh-menu-search-open) .kh-sidebar:not(:hover):not(:focus-within) .kh-nav-find-wrap > :not(.kh-nav-search-launch) {display:block !important;}
  body .kh-sidebar .kh-nav-search-launch,
  body:not(.kh-menu-search-open) .kh-sidebar:not(:hover):not(:focus-within) .kh-nav-search-launch {display:none !important;}
  body .kh-sidebar .kh-nav-find-wrap label {display:flex !important;}
}