/* KaroSet design system (presentation only). Loaded after every page's own styles, so it overrides tokens and the main
   shared components without changing any behaviour. Blue-and-orange KaroSet identity; text wordmark until an approved
   logo asset exists (no invented logo). Sections: tokens, wordmark, shell, components, login, responsive. */

/* ---- Tokens ----------------------------------------------------------------------------------------------------------- */
:root {
  --ks-blue-900: #0a1f44;
  --ks-blue-800: #0d2a5c;
  --ks-blue-700: #133a7c;
  --ks-blue-600: #1a4fb0;
  --ks-blue-500: #2563d9;
  --ks-blue-100: #e6eefc;
  --ks-blue-50: #f3f7fe;
  --ks-orange-600: #e0570b;
  --ks-orange-500: #f26b1d;
  --ks-orange-100: #ffede1;
  --ks-ink: #0f172a;
  --ks-ink-2: #334155;
  --ks-muted: #64748b;
  --ks-line: #e3e8f0;
  --ks-surface: #ffffff;
  --ks-canvas: #f5f7fb;
  --ks-success: #15803d;
  --ks-danger: #c62828;
  --ks-radius: 12px;
  --ks-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .05);
  --ks-focus: 0 0 0 3px rgba(37, 99, 217, .28);
  /* Map onto the existing application tokens. */
  --bg: var(--ks-canvas);
  --card: var(--ks-surface);
  --text: var(--ks-ink);
  --muted: var(--ks-muted);
  --line: var(--ks-line);
  --nav: var(--ks-blue-900);
  --nav2: #08193a;
  --blue: var(--ks-blue-600);
  --blue2: var(--ks-blue-700);
  --orange: var(--ks-orange-500);
  --shadow: var(--ks-shadow);
  --r: var(--ks-radius);
}
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ks-ink); background: var(--ks-canvas); }

/* ---- Wordmark ----------------------------------------------------------------------------------------------------------- */
.ks-wordmark { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.ks-wordmark .ks-karo { color: inherit; }
.ks-wordmark .ks-set { color: var(--ks-orange-500); }
.ks-wordmark.ks-on-dark .ks-karo { color: #fff; }
.ks-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--ks-blue-500), var(--ks-blue-700));
  color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.04em; box-shadow: inset 0 -3px 0 var(--ks-orange-500); flex: 0 0 auto; }

/* ---- Shell: sidebar and top bar ----------------------------------------------------------------------------------------- */
.sidebar { background: linear-gradient(180deg, var(--ks-blue-900) 0%, #08193a 100%) !important; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; }
.sidebar .brand b { font-size: 18px; }
.sidebar .brand small { color: #9fb3d9; font-weight: 600; }
.sidebar .nav button { border-radius: 9px; font-weight: 600; }
.sidebar .nav button.active { background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--ks-orange-500); }
.sidebar .nav button:hover:not(.active) { background: rgba(255, 255, 255, .06); }
.sidebar .nav .group, .sidebar .nav summary.group { color: #8fa6cf; letter-spacing: .08em; }
.sidebar .help-card { background: linear-gradient(135deg, var(--ks-blue-600), var(--ks-blue-700)) !important; border: 1px solid rgba(255, 255, 255, .12); }
.top { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(6px); border-bottom: 1px solid var(--ks-line); }
.top h2, #title { font-weight: 700; letter-spacing: -.01em; }
.top .crumb { color: var(--ks-muted); font-weight: 600; }
#addProductTopBtn, .gadd-wrap > .btn.primary { background: var(--ks-orange-500) !important; color: #fff !important; }
#addProductTopBtn:hover, .gadd-wrap > .btn.primary:hover { background: var(--ks-orange-600) !important; }
.top-avatar { background: var(--ks-blue-600) !important; }

/* ---- Components --------------------------------------------------------------------------------------------------------- */
.card { border: 1px solid var(--ks-line); border-radius: var(--ks-radius); box-shadow: var(--ks-shadow); }
.card h3, .section h3 { font-weight: 700; letter-spacing: -.005em; }
.btn { border-radius: 9px; font-weight: 650; transition: background-color .12s, box-shadow .12s, border-color .12s; }
.btn.primary, .primary { background: var(--ks-blue-600); }
.btn.primary:hover, .primary:hover { background: var(--ks-blue-700); }
.btn.outline { border: 1px solid var(--ks-line); background: #fff; color: var(--ks-ink-2); }
.btn.outline:hover { border-color: #c5d3ea; background: var(--ks-blue-50); }
.btn:focus-visible, button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: none; box-shadow: var(--ks-focus); }
input:focus, select:focus, textarea:focus { border-color: var(--ks-blue-500) !important; box-shadow: var(--ks-focus) !important; }
label { color: var(--ks-ink-2); font-weight: 650; letter-spacing: .01em; }
table thead th { background: #f7f9fc; color: var(--ks-ink-2); font-weight: 650; }
table tbody tr:hover td { background: var(--ks-blue-50); }
.dash-kpi b, .stat b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
td.num, .num, .money { font-variant-numeric: tabular-nums; }
.notice.bad, .msg.bad { border-left: 3px solid var(--ks-danger); }

/* ---- Login --------------------------------------------------------------------------------------------------------------- */
.login { background: radial-gradient(circle at 12% 18%, #dfe9fb, transparent 34%), radial-gradient(circle at 88% 82%, #ffe9db, transparent 32%), #eef2f9 !important; }
.loginbrand { background: linear-gradient(150deg, var(--ks-blue-900) 0%, var(--ks-blue-700) 100%) !important; position: relative; }
.loginbrand::after { content: ""; position: absolute; left: 44px; bottom: 34px; width: 56px; height: 4px; border-radius: 2px; background: var(--ks-orange-500); }
.loginbrand .ks-login-wordmark { display: flex; font-size: 46px; margin: 26px 0 14px; }
.loginbrand h1 { font-weight: 750; letter-spacing: -.02em; }
.loginbrand p { color: #c9d6ee; }
.loginform h2 { font-weight: 750; letter-spacing: -.01em; }
.loginform .btn.primary { padding: 12px 14px; font-size: 15px; }
#loginError:not(:empty) { margin-top: 4px; padding: 9px 11px; border-radius: 8px; background: #fdecec; color: var(--ks-danger) !important; font-weight: 600; }

/* ---- Responsive -------------------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Top bar: two calm rows instead of overlapping controls. */
  .top { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px !important; height: auto !important; }
  .top .top-brand { flex: 1 1 auto; min-width: 0; }
  .top .crumb, .top .top-clock, .top .search-kbd, .top .kbdbar { display: none !important; }
  .top h2, #title { font-size: 19px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .topright { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-start; }
  .top .search-wrap { order: 10; flex: 1 1 100%; max-width: none !important; width: 100% !important; }
  .top .top-user > div:not(.top-avatar) { display: none; }
  .top .top-user { padding: 3px !important; border: 0 !important; background: transparent !important; }
  /* Dashboard and two-column content: one column, nothing clipped. */
  .dash-board-grid, .grid2, .grid3, #dailyHome .grid2, #dailyHome .dash-board-grid { grid-template-columns: 1fr !important; }
  .grid4, .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card .head { flex-wrap: wrap; gap: 8px; }
  .list .li, .li { flex-wrap: wrap; gap: 4px 10px; }
  .list .li > b, .li > b { white-space: nowrap; }
  .dash-attn .btn, .card .head .btn { white-space: nowrap; }
  .loginbrand { padding: 28px !important; }
  .loginbrand h1 { font-size: 26px !important; }
  .loginbrand .ks-login-wordmark { font-size: 34px; }
  /* Touch targets (KS-012-UI): row actions and sidebar buttons at least 36 px. */
  table td .btn, table td button { min-height: 36px; min-width: 36px; }
  #sidebar button, .sidebar button { min-height: 36px; }
  #productRows .ops-tap { min-height: 36px !important; height: auto !important; }
  #customers .party-ico, button.party-ico { min-height: 36px !important; height: 36px !important; min-width: 36px !important; width: 36px !important; }
}
@media (max-width: 359px) {
  .grid4, .dash-kpi-row { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* KS-013: phone cards for Products and Customers. The same table rows become cards at phone width (no second copy of the
   list, so every button and keyboard handler stays the same); desktop tables are unchanged. */
@media (max-width: 600px) {
  #inventory .tablewrap, #customers .tablewrap { overflow: visible !important; border: 0 !important; background: transparent !important; }
  #inventory #productTable, #customers .party-table { display: block !important; min-width: 0 !important; width: 100% !important; table-layout: auto !important; border: 0 !important; }
  #inventory #productTable thead, #customers .party-table thead { display: none !important; }
  #inventory #productTable tbody, #customers .party-table tbody { display: block !important; }
  #productRows > tr, #customerRows > tr {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0 0 10px; padding: 12px;
    border: 1px solid var(--line, #d9dee7); border-radius: 12px; background: var(--card, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  }
  #productRows > tr > td, #customerRows > tr > td {
    display: flex !important; flex-direction: column; justify-content: flex-start; min-width: 0; width: auto !important; max-width: none !important;
    position: static !important; padding: 2px 0 !important; border: 0 !important; white-space: normal !important; text-align: left !important; background: transparent !important;
  }
  #productRows > tr > td[data-label]::before, #customerRows > tr > td[data-label]::before {
    content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted, #64748b);
  }
  #productRows > tr > td.p-name, #customerRows > tr > td.p-name, #productRows > tr > td.p-act, #customerRows > tr > td.p-act,
  #productRows > tr > td.p-ratecell, #productRows > tr > td[colspan], #customerRows > tr > td[colspan] { grid-column: 1 / -1; }
  #productRows > tr > td.p-name, #customerRows > tr > td.p-name { font-size: 16px; padding-bottom: 6px !important; border-bottom: 1px solid var(--line, #eef1f5) !important; margin-bottom: 4px; }
  #productRows > tr > td.p-m-hide { display: none !important; }
  #productRows .p-rategrid { justify-content: flex-start; }
  #productRows > tr > td.p-act { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 8px !important; }
  #productRows > tr > td.p-act .ops-tap { width: auto !important; flex: 1 1 calc(50% - 8px); min-height: 44px !important; height: auto !important; }
  #customerRows > tr > td.p-act .party-acts { display: grid !important; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 8px; width: 100%; }
  #customerRows > tr > td.p-act .party-ico { width: 100% !important; min-width: 44px !important; min-height: 44px !important; height: 44px !important; }
  #customerRows > tr:focus, #customerRows > tr.party-row-active { outline: 2px solid var(--brand, #f26b1d); outline-offset: 1px; }
}
@media (max-width: 600px) {
  #productRows > tr > td, #customerRows > tr > td { align-items: flex-start; }
  #productRows > tr > td.p-name { order: -1; }
  #productRows > tr > td .badge, #customerRows > tr > td .badge, #customerRows > tr > td .party-rate { width: auto !important; }
}
@media (max-width: 600px) { #productRows .p-thumb-btn { min-width: 44px !important; min-height: 44px !important; } }

/* KS-016 phone ergonomics (390 px audit, tests/karoset_mobile_flows_audit.js). Phone width only: desktop is unchanged.
   - Text fields use 16 px text: iOS zooms the whole page into a focused field with smaller text.
   - Tap targets are at least 36 px high (row actions such as View / Print / Edit / Open were 28 px; disclosure rows 16 px;
     checkboxes 13 px).
   - The receiving header stacks into one column (its desktop columns needed 650 px), and table boxes stay inside the
     screen (a wide table scrolls in its own box). */
@media (max-width: 700px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]), select, textarea { font-size: 16px !important; }
  /* !important is needed (module rules with ids keep compact buttons at 28 px); the existing larger phone minimums
     are re-asserted right after, so they are never lowered to 36 px. */
  button, .btn, [role=button], select { min-height: 36px !important; }
  .nav button, .btn { min-height: 44px !important; }
  .qact, .ops-mobile .btn, .ops-tap { min-height: 48px !important; }
  .dd-src, .dd-crumb-btn, .dd-pager .btn, .prod-img-slot .btn, #productRows .p-thumb-btn { min-height: 44px !important; }
  /* Page layouts that become one column on a phone: the column is the screen width, not the width of the widest
     content (grid items default to min-width:auto, which made the purchase entry, opening stock and replacement intake
     forms 620-700 px wide, cut off at the right). */
  .os-split, .pu-split { grid-template-columns: minmax(0, 1fr) !important; }
  .os-split > *, .pu-split > *, .pu-stack, .pu-stack > *, .os-split .os-panel, .pu-split .pu-panel { min-width: 0 !important; max-width: 100%; }
  /* Billing is a full-screen sheet on a phone: above the app bar (which wraps to ~160 px here and covered the sheet's
     top toolbar: More Details, Save Draft, Drafts); it closes with its own ✕. */
  #billModal.fullbill { top: 0 !important; z-index: 30 !important; }
  /* ...so its own ✕ must be shown (workspace mode hides the sheet header on desktop, where the sidebar is the way out):
     only the ✕, in the free space at the right of the "New Bill" header row. */
  html body.bill-ws #billModal .mbox > .mhead { display: block !important; position: absolute; top: 6px; right: 8px; z-index: 3; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
  html body.bill-ws #billModal .mbox > .mhead > div:first-child { display: none !important; }
  html body.bill-ws #billModal .mbox > .mhead > button.close { display: inline-flex !important; align-items: center; justify-content: center; min-width: 40px !important; min-height: 40px !important; }
  #billModal .mbox { position: relative; }
  /* Icon-only close / clear buttons get a full-size target. */
  button.close { min-width: 36px !important; }
  #bProdClear { min-width: 32px !important; }
  /* Inline "+ New" (new category / sub category / brand) buttons sit over the label row on desktop; at a full-size
     target they would cover the field below, so on a phone they flow under their field. */
  .pf-with-new .pf-new, .pe-fix { position: static !important; display: inline-flex; align-items: center; margin-top: 6px; }
  .pf-with-new.pe-has-fix > label { padding-right: 0 !important; }
  summary { min-height: 36px; padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; }
  input[type=checkbox], input[type=radio] { width: 24px !important; height: 24px !important; }
  /* Admin lists (.ff-table: categories, brands, model families, locations, ...) keep readable columns and scroll
     sideways inside their own box instead of squeezing every column (names were cut to "Du…", actions cut off). */
  .ff-table { table-layout: auto; min-width: 640px; }
  #ownerAdminRow h3 a { display: inline-block; min-height: 36px; line-height: 36px; }
  #receivingModal .billhead, #receivingModal .recv-head { grid-template-columns: 1fr !important; }
  .ff-tablewrap { max-width: 100%; }
}

/* KS-016 Billing at phone width: the footer actions wrap; the four secondary actions share one row and
   "Save & Continue (F2)" takes the full width below them, always visible (it was cut off at the right edge). */
@media (max-width: 700px) {
  #billModal .bws-actions { flex-wrap: wrap !important; gap: 6px !important; }
  #billModal .bws-actions .bws-spacer { display: none !important; }
  #billModal .bws-actions .btn { flex: 1 1 0 !important; min-width: 0 !important; padding-left: 4px !important; padding-right: 4px !important; font-size: 13px !important; white-space: normal !important; line-height: 1.15 !important; }
  #billModal .bws-actions #bwsSave { flex: 1 1 100% !important; order: 10; font-size: 15px !important; min-height: 44px !important; }
}

/* KS-016 Invoice History (Sales Voucher List) at phone width: each voucher is a card (voucher no and amount, customer,
   date and status, then the item expander and the actions) instead of a 1180 px table; the filters stack. Desktop keeps
   the table. Columns hidden here (item summary, qty, unit, rate, user, modified) stay in the expanded item rows,
   the voucher view and the export. */
@media (max-width: 700px) {
  #invoices .filters { grid-template-columns: 1fr 1fr !important; }
  #invoices table.inv-hist { min-width: 0 !important; table-layout: auto !important; display: block; }
  #invoices table.inv-hist > thead { display: none; }
  #invoices table.inv-hist > tbody { display: block; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "vno vno amt" "cust cust cust" "date date status" "exp act act"; gap: 4px 10px; align-items: center; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: #fff; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td { display: block; background: transparent !important; border: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; width: auto !important; max-width: none !important; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(1) { grid-area: exp; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(2) { grid-area: date; color: var(--muted, #64748b); font-size: 13px; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(3) { grid-area: vno; font-weight: 800; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(4) { grid-area: cust; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(9) { grid-area: amt; font-weight: 800; text-align: right; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(11) { grid-area: status; justify-self: end; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(13) { grid-area: act; display: flex; flex-wrap: wrap; gap: 6px; }
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(5),
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(6),
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(7),
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(8),
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(10),
  #invoices table.inv-hist > tbody > tr:not(.inv-items) > td:nth-child(12) { display: none; }
  #invoices table.inv-hist > tbody > tr > td[colspan] { grid-area: auto !important; grid-column: 1 / -1; }
  #invoices table.inv-hist > tbody > tr.inv-items:not(.hidden) { display: block; margin: -4px 0 8px; }
  #invoices table.inv-hist > tbody > tr.inv-items > td { display: block; overflow-x: auto; }
}

/* KS-024 (Phase 7) line editors at phone width: each line of Credit Receiving (#recvRows) and Purchase Entry
   (#purchaseentry .pu-grid) is a card — product on its own row, then Qty and Rate side by side, then Amount and the
   remove button — instead of a table that scrolls sideways in its own box. No markup change; desktop keeps the tables.
   Captions come from the column order (same order as the table headers). */
@media (max-width: 600px) {
  table.recv-table, table.recv-table > tbody, #purchaseentry table.pu-grid, #purchaseentry table.pu-grid > tbody { display: block; width: 100%; min-width: 0 !important; }
  table.recv-table > thead, #purchaseentry table.pu-grid > thead { display: none; }
  .billwrap:has(> table.recv-table), #purchaseentry .pu-tablewrap { overflow-x: visible !important; }
  table.recv-table > tbody > tr, #purchaseentry table.pu-grid > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: end;
    border: 1px solid var(--line, #d7dde5); border-radius: 10px; padding: 10px; margin: 0 0 10px; background: var(--card, #fff);
  }
  table.recv-table > tbody > tr > td, #purchaseentry table.pu-grid > tbody > tr > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; width: auto !important; text-align: left; }
  table.recv-table > tbody > tr > td input, #purchaseentry table.pu-grid > tbody > tr > td input { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  /* Credit Receiving: 1 #, 2 product, 3 qty, 4 rate, 5 amount, 6 remove */
  table.recv-table > tbody > tr > td:nth-child(1) { grid-column: 1 / -1; font-weight: 800; color: var(--muted, #64748b); font-size: 12px; }
  table.recv-table > tbody > tr > td:nth-child(1)::before { content: 'Line '; }
  table.recv-table > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; }
  table.recv-table > tbody > tr > td:nth-child(3)::before { content: 'Qty (pcs)'; }
  table.recv-table > tbody > tr > td:nth-child(4)::before { content: 'Rate per piece'; }
  table.recv-table > tbody > tr > td:nth-child(5) { font-weight: 800; align-self: center; }
  table.recv-table > tbody > tr > td:nth-child(5)::before { content: 'Amount '; font-weight: 400; color: var(--muted, #64748b); }
  table.recv-table > tbody > tr > td:nth-child(6) { justify-self: end; }
  table.recv-table > tbody > tr > td:nth-child(6) button { min-width: 44px !important; min-height: 44px !important; height: auto !important; }
  /* Purchase Entry: 1 product, 2 qty, 3 rate, 4 amount, 5 remove */
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(1) { grid-column: 1 / -1; }
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(2)::before { content: 'Qty (pcs)'; }
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(3)::before { content: 'Rate per piece'; }
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(4) { font-weight: 800; align-self: center; text-align: left !important; }
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(4)::before { content: 'Amount '; font-weight: 400; color: var(--muted, #64748b); }
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(5) { justify-self: end; }
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(5) button { min-width: 44px !important; min-height: 44px !important; height: auto !important; }
  table.recv-table > tbody > tr > td:nth-child(3)::before, table.recv-table > tbody > tr > td:nth-child(4)::before,
  #purchaseentry table.pu-grid > tbody > tr > td:nth-child(2)::before, #purchaseentry table.pu-grid > tbody > tr > td:nth-child(3)::before {
    display: block; font-size: 12px; color: var(--muted, #64748b); margin-bottom: 2px;
  }
}