/* AI-generated: Dairy Suite UI standard — one place for sizes; follows the Hub day/night theme.
   Loaded LAST by every app. Sizes: text 13px · fields/tables 14px · field height 36 phone / 30 PC · table rows 30px. */
:root{
  --u-fs:13px; --u-fs-in:14px; --u-h:36px; --u-row:30px; --u-r:8px;
  --u-w-date:140px; --u-w-qty:90px; --u-w-code:80px; --u-w-name:280px; --u-w-rem:360px;
  --u-group:#6B4E2A;                         /* dark border between product groups */
}
@media (min-width:960px){ :root{ --u-h:30px; } }
html[data-theme="night"]{
  --grad-head:linear-gradient(135deg,#8B6914,#5E4506);
  --u-group:#D4A017;
  --gold-lt:#1F1A00; --u-grouptx:#111;
}

/* ── header (nav.js #dsn-hdr) — same in every app ── */
#dsn-hdr{padding:8px 12px !important;min-height:52px}
#dsn-hdr .mid b{font-size:15px !important;font-weight:700}
#dsn-hdr .mid span{font-size:11px !important}
#dsn-hdr .dsn-sec{font-size:12px !important;padding:4px 10px !important}
#dsn-hdr [data-ds-nav-btn]{width:36px !important;height:36px !important;border-radius:10px !important}
html[data-theme="night"] #dsn-hdr .dsn-sec{background:rgba(0,0,0,.35) !important;color:#F5C842 !important}

/* ── fields ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:var(--u-fs-in)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select{min-height:var(--u-h)}

/* ── night values for the PC layout (desktop.css) ── */
html[data-theme="night"]{
  --dk-in:#141414; --dk-line:#3D3D3D; --dk-line2:#2E2E2E; --dk-line3:#3D3D3D;
  --dk-head:#2A2208; --dk-headtx:#F5C842; --dk-dis:#222; --dk-zebra:#1E1E1E; --dk-zebra2:#1E1E1E;
}
html[data-theme="night"] input, html[data-theme="night"] select, html[data-theme="night"] textarea{color-scheme:dark}

/* ═════ shared base for all apps (phase 1) ═════ */
html{font-size:13px}
body{font-size:13px}
/* tables: compact, Excel-like */
table{border-collapse:collapse}
table :is(th,td){padding:3px 6px !important;height:var(--u-row);font-size:13px;line-height:1.25;vertical-align:middle}
table thead th{font-size:12px;font-weight:700;background:var(--u-head,#FFF1DA) !important;color:var(--u-headtx,#6B4E2A) !important;white-space:nowrap}
table :is(th,td){border:1px solid var(--u-line,#E8D5A3) !important}
html[data-theme="night"]{--u-head:#2A2208;--u-headtx:#F5C842;--u-line:#3D3D3D}
/* fields inside a table cell = the cell itself (no box) */
table td > :is(input:not([type=checkbox]):not([type=radio]),select){width:100% !important;min-width:44px;height:var(--u-row) !important;min-height:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding:0 4px !important;font-size:14px !important;color:inherit}
table td > :is(input,select):focus{outline:2px solid var(--b1,#E0820F) !important;outline-offset:-2px;background:var(--u-focus,#FFF6DF) !important}
html[data-theme="night"]{--u-focus:#1F1A00}
table td:has(> input:not([type=checkbox]):not([type=radio]), > select){padding:0 !important}
/* fields outside tables */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select){border-radius:6px}
textarea{font-size:14px}
/* buttons */
button{font-size:13px}

/* empty cell = whole cell grey */
:root{--u-empty:#E6E2DA}
html[data-theme="night"]{--u-empty:#2A2A2A}
td.u-empty{background:var(--u-empty) !important}

/* ═════ phase 2: data tables (class ut) — one value per cell, first column fixed, empty = grey ═════ */
.ut-wrap{overflow-x:auto;max-width:100%;width:max-content;margin:4px 0 8px;border:1px solid var(--u-line,#E8D5A3);border-radius:8px}
table.ut{border-collapse:collapse;width:auto;font-size:13px;background:var(--card,#fff)}
table.ut :is(th,td){white-space:nowrap;text-align:left}
table.ut td.n, table.ut th.n{text-align:right;font-variant-numeric:tabular-nums}
table.ut td.c, table.ut th.c{text-align:center}
table.ut tr > :first-child{position:sticky;left:0;z-index:1;background:var(--card,#fff)}
table.ut thead tr > :first-child{z-index:2;background:var(--u-head,#FFF1DA)}
table.ut tfoot td{font-weight:700;background:var(--u-head,#FFF1DA) !important}
table.ut td.b{font-weight:700}
table.ut td.neg{color:var(--err,#C0392B)}
table.ut td.act{padding:0 2px !important;text-align:center;width:30px}
table.ut td.act button{border:0;background:transparent;font-size:15px;cursor:pointer;padding:2px 4px}
table.ut tr.grp td{background:var(--u-head,#FFF1DA) !important;font-weight:700;font-size:12px}
html[data-theme="night"] table.ut, html[data-theme="night"] table.ut tr > :first-child{background:var(--card,#1A1A1A)}

/* ═════ phase 2: calculators on PC only (phone keeps the calculator look) — each input row becomes one table row:
   label on top of its own cell, the value in a borderless Excel-like cell, cells joined by thin lines ═════ */
@media(min-width:960px){
  body.ds-has-side[data-ds-page^="calc-"] .field-row{display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 !important;
    border:1px solid var(--u-line,#E8D5A3);border-radius:0;margin:0 0 -1px !important;background:var(--dk-in,#fff)}
  body.ds-has-side[data-ds-page^="calc-"] .field-row > .field{margin:0 !important;padding:0 !important;border-right:1px solid var(--u-line,#E8D5A3);min-width:0}
  body.ds-has-side[data-ds-page^="calc-"] .field-row > .field:last-child{border-right:0}
  body.ds-has-side[data-ds-page^="calc-"] .field-row > .field > label{display:block;margin:0 !important;padding:4px 8px !important;background:var(--u-head,#FFF1DA);
    border-bottom:1px solid var(--u-line,#E8D5A3);font-size:11.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ds-has-side[data-ds-page^="calc-"] .field-row > .field > :is(input,select){border:0 !important;border-radius:0 !important;box-shadow:none !important;
    width:100% !important;height:32px !important;margin:0 !important;padding:0 8px !important;background:transparent !important;font-size:14px}
  body.ds-has-side[data-ds-page^="calc-"] .field-row > .field > input:focus{outline:2px solid var(--u-group,#6B4E2A);outline-offset:-2px}
  body.ds-has-side[data-ds-page^="calc-"] .field-row > .field > :is(input,select):disabled{background:var(--u-empty) !important}
}

/* ═════ NIGHT = grey and white only (overrides every app's own night colours; this file loads last).
   Backgrounds: shades of dark grey · text: white / light grey · grid lines: dark grey · accents: mid grey.
   Red / green kept only for status (errors, negative stock, OK). ═════ */
html[data-theme="night"], html[data-theme="night"] body{
  /* backgrounds */
  --bg:#121212; --paper:#121212; --warm:#121212; --card:#1E1E1E; --panel:#1E1E1E; --cream:#1E1E1E; --card2:#262626;
  --ibg:#181818; --dbg:#1E1E1E; --obg:#262626; --hi:#2A2A2A; --goldL:#262626; --goldD:#262626; --gold-lt:#262626;
  --b4:#3A3A3A; --b5:#262626; --b6:#2E2E2E; --b7:#2A2A2A; --blue-soft:#262626; --amber-soft:#262626;
  /* text */
  --text:#EDEDED; --ink:#EDEDED; --fg:#EDEDED; --brown:#EDEDED;
  --textm:#C8C8C8; --muted:#B5B5B5; --muted2:#9A9A9A; --textl:#9A9A9A; --faint:#8A8A8A; --brown-lt:#C8C8C8; --brown-xs:#9A9A9A; --hitext:#FFFFFF;
  /* lines */
  --brd:#333333; --brd2:#3A3A3A; --border:#333333; --line:#3A3A3A; --hair:#2E2E2E; --ibrd:#3D3D3D; --dbrd:#3D3D3D; --obrd:#3D3D3D; --hibrd:#5A5A5A;
  /* accents (were gold) */
  --gold:#6E6E6E; --gold2:#8A8A8A; --gold-dk:#C8C8C8; --b1:#6E6E6E; --b2:#C8C8C8; --b3:#BDBDBD; --b8:#BDBDBD;
  --blue:#7A7A7A; --teal:#7A7A7A; --amber:#8A8A8A; --orange:#8A8A8A; --butter:#BDBDBD; --purple:#9A9A9A;
  --grad-head:linear-gradient(135deg,#3A3A3A,#262626);
  --red:#FF6B5C; --err:#FF6B5C; --rust:#FF6B5C; --green:#4CAF7D; --ok:#4CAF7D;
  /* table / grid tokens */
  --u-head:#2A2A2A; --u-headtx:#FFFFFF; --u-line:#3A3A3A; --u-focus:#2E2E2E; --u-empty:#2A2A2A;
  --u-group:#8A8A8A; --u-grouptx:#FFFFFF;
  --dk-in:#181818; --dk-line:#3A3A3A; --dk-line2:#2E2E2E; --dk-line3:#3A3A3A; --dk-head:#2A2A2A; --dk-headtx:#FFFFFF;
  --dk-dis:#242424; --dk-zebra:#1E1E1E; --dk-zebra2:#222222;
  --shad:0 2px 12px rgba(0,0,0,.5);
}
html[data-theme="night"] body{color:var(--text)}
html[data-theme="night"] #dsn-hdr .dsn-sec{color:#FFFFFF !important}
html[data-theme="night"] table :is(td,th){color:var(--text)}
html[data-theme="night"] table thead th{color:#FFFFFF !important}
html[data-theme="night"] header{background:var(--grad-head) !important}
html[data-theme="night"] table.xl tr.xl-low td{background:#2E2E2E !important}   /* Inventory low-stock rows */

/* AI-generated: opening a tab from Home (page.html#dsgo=n) — keep the page hidden until that tab is open, so the first tab (Dashboard) does not flash */
html.ds-going body > *{visibility:hidden !important}
html.ds-going body::after{content:'Loading…';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--textl,#8a8070);visibility:visible}