/* AI-generated: DESKTOP LAYOUT — only on screens 960 px and wider. The phone layout is untouched.
   Shared by every app: sidebar shell, compact density, wide content, cards flowing side by side
   (desktop.js marks the containers). Page-specific rules are at the bottom, scoped by their own ids. */
#ds-side{display:none}
.ds-break{display:none}
.ds-band,.ds-band-body{display:contents}
.ds-band-lbl{display:none}
/* Simple mode hides Advanced cards — also when they sit inside the desktop rows */
body.simple-mode .ds-band-body > .card:not(.simple-card){display:none!important}
@media (min-width:960px){
  /* ── sidebar shell: narrow Explorer-style tree ── */
  #ds-side{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:150px;z-index:400;
    background:var(--card,#fff);border-right:1px solid var(--brd,#e5e0d5);overflow-y:auto;padding:6px 4px}
  #ds-side .ds-brand{font-weight:800;font-size:13px;padding:4px 6px 8px;color:var(--gold-dk,#A07010);text-decoration:none}
  #ds-side .ds-gh{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--textl,#8a7a60);padding:6px 4px 3px;cursor:pointer;user-select:none}
  #ds-side .ds-car{display:inline-block;width:10px;transition:transform .15s}
  #ds-side .ds-grp.open .ds-car{transform:rotate(90deg)}
  #ds-side .ds-gl{display:none}
  #ds-side .ds-grp.open .ds-gl{display:block}
  #ds-side .ds-gl a{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 14px;border-radius:6px;text-decoration:none;
    color:var(--text,#3a3226);font-size:12px;font-weight:600;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #ds-side .ds-gl a:hover{background:var(--b5,#f6efe2)}
  #ds-side .ds-gl a.on{background:var(--gold,#d99b2b);color:#fff}
  /* apps with tabs: ▸ opens the app's own sections under it */
  #ds-side .ds-arow{display:flex;align-items:center}
  #ds-side .ds-arow a{flex:1;padding-left:2px !important}
  #ds-side .ds-acar{cursor:pointer;color:var(--textl,#8a7a60);font-size:10px;padding:4px 0 4px 3px;width:14px}
  #ds-side .ds-app.open > .ds-arow .ds-acar{transform:rotate(90deg)}
  #ds-side .ds-subs{display:none;margin:0 0 3px 14px;border-left:1.5px solid var(--brd,#e5e0d5)}
  #ds-side .ds-app.open .ds-subs{display:block}
  #ds-side .ds-subs a{font-size:11.5px;font-weight:500;padding:3px 6px 3px 8px}
  #ds-side .ds-subs a.on{background:var(--b5,#f6efe2);color:var(--gold-dk,#A07010);font-weight:800}
  body.ds-has-side{padding-left:150px !important}
  /* each app's own menu / tab bar moves into the sidebar on a wide screen */
  body.ds-has-side[data-ds-page="milk-collection"] #menu-btn, body.ds-has-side[data-ds-page="milk-collection"] #sidebar,
  body.ds-has-side[data-ds-page="milk-collection"] #overlay,
  body.ds-has-side[data-ds-page="dairy-inventory"] #menu-btn, body.ds-has-side[data-ds-page="dairy-inventory"] #sidebar,
  body.ds-has-side[data-ds-page="dairy-inventory"] #overlay,
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #tabbar, body.ds-has-side[data-ds-page="dairy-dispatch-app"] #disp-masters-btn,
  body.ds-has-side[data-ds-page="accounts"] .tabs,
  body.ds-has-side[data-ds-page="plan"] #reports-toggle, body.ds-has-side[data-ds-page="plan"] #masters-toggle,
  body.ds-has-side[data-ds-page="plan"] #view-manager .subtabs{display:none !important}
  body.ds-has-side .back-btn{display:none}
  /* Dispatch draws its own full-width app box — keep it beside the sidebar, not under it */
  body.ds-has-side #app{width:100% !important}

  /* ── compact density (like a shop counter screen) ── */
  html:has(body.ds-has-side){font-size:14px}
  body.ds-has-side .card{margin-bottom:8px}
  body.ds-has-side .card-body{padding:8px 10px}
  body.ds-has-side .card-header{padding:7px 10px;font-size:13px}
  body.ds-has-side input:not([type=checkbox]):not([type=radio]), body.ds-has-side select, body.ds-has-side textarea{padding-top:5px !important;padding-bottom:5px !important;min-height:0}
  body.ds-has-side .field label, body.ds-has-side label{margin-bottom:1px}
  body.ds-has-side .page-header, body.ds-has-side > header{padding-top:4px !important;padding-bottom:4px !important;min-height:0}
  body.ds-has-side .page-header h1, body.ds-has-side > header h1{font-size:16px !important;margin:0}
  body.ds-has-side table td, body.ds-has-side table th{padding-top:4px;padding-bottom:4px}

  /* ── wide content ── */
  body.ds-has-side .wrap, body.ds-has-side .page-body, body.ds-has-side #content, body.ds-has-side #main{max-width:none !important}
  body.ds-has-side .page-body, body.ds-has-side #content, body.ds-has-side #main{padding:8px 12px !important}
  body.ds-has-side .hwrap{max-width:1100px}
  /* long tables scroll inside their own panel, headers stay visible */
  body.ds-has-side .tbl-wrap{max-height:calc(100vh - 200px);overflow:auto}
  body.ds-has-side .tbl-wrap thead th, body.ds-has-side .tbl-wrap tr:first-child th{position:sticky;top:0;z-index:2}

  /* ── cards side by side: a container with several cards becomes columns (marked by desktop.js) ── */
  body.ds-has-side .ds-flow{column-width:300px;column-gap:10px}
  /* only a container that is itself a flex/grid column (e.g. .page-body) is switched to block — hidden tabs stay hidden */
  body.ds-has-side .ds-flow.ds-flex{display:block !important}
  body.ds-has-side .ds-flow > *{break-inside:avoid}
  body.ds-has-side .ds-flow > .card{margin:0 0 10px !important;width:100%}
  body.ds-has-side .ds-flow > :not(.card){column-span:all}
  /* an empty placeholder (e.g. a banner with nothing to show) must not split the columns */
  body.ds-has-side .ds-flow > :not(.card):empty{column-span:none}
  /* a card holding a table needs the full width — it spans all columns */
  body.ds-has-side .ds-flow > .card:has(table){column-span:all}
  /* long lists (Accounts Day Book) also take the full width */
  body.ds-has-side .ds-flow > .card:has(#db-list){column-span:all}
  /* the voucher entry form (Accounts) opens full width */
  body.ds-has-side .ds-flow > #vf-card{column-span:all}

  /* ═══ Planning (plan.html) ═══ */
  #sub-production.subpage.active{display:grid;grid-template-columns:minmax(340px,.85fr) 1.15fr;gap:10px;align-items:start}
  #sub-production > .card{margin:0}
  #sub-production > #plan-output-card{grid-column:1 / -1}
  /* stat tiles (Milk Collection dashboard, payments …) in one row */
  body.ds-has-side .stat-grid, body.ds-has-side .stat-grid.g3{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important}
  .ds-stock-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important}
  body.ds-has-side .overlay.open{left:190px}

  /* ═══ Accounts → Vouchers (accounts.html) ═══
     New voucher as a narrow column on the left (buttons 3 per row, taller); Sales from Dispatch and
     Milk Collection wider on the right (shorter). Form, banner, lock and Day Book take the full width. */
  body.ds-has-side #pane-v:not(.ds-grid):not([style*="none"]){display:grid !important;grid-template-columns:minmax(300px,.42fr) 1fr;
    column-gap:10px;row-gap:0;align-items:start;columns:auto}
  body.ds-has-side #pane-v:not(.ds-grid) > *{grid-column:1 / -1;margin-bottom:10px}
  body.ds-has-side #pane-v:not(.ds-grid) > .card:first-child{grid-column:1;grid-row:span 2}
  body.ds-has-side #pane-v:not(.ds-grid) > #ds-card, body.ds-has-side #pane-v:not(.ds-grid) > #mc-card{grid-column:2}
  body.ds-has-side #pane-v:not(.ds-grid) > :empty{display:none}
  /* the voucher form and the posting-errors banner come first, full width */
  body.ds-has-side #pane-v:not(.ds-grid) > #vf-card, body.ds-has-side #pane-v:not(.ds-grid) > #pe-banner{order:-1}
  body.ds-has-side #pane-v:not(.ds-grid) > .card:first-child .vgrid{grid-template-columns:repeat(3,1fr)}
  body.ds-has-side #pane-v:not(.ds-grid) > .card:first-child .vgrid button{padding:12px 4px}

  /* ═══ Calculators (calc-*.html): row 1 choices · row 2 inputs · row 3 results ═══ */
  body.ds-has-side .page-body.ds-bands{display:block !important}
  body.ds-has-side .ds-band{display:block;margin-bottom:6px}
  body.ds-has-side .ds-band-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gold-dk,#A07010);border-bottom:1.5px solid var(--brd,#e5e0d5);padding:2px 2px 3px;margin-bottom:8px}
  body.ds-has-side .ds-band-body{column-width:290px;column-gap:10px}
  body.ds-has-side .ds-band-1 .ds-band-body{column-width:230px}
  body.ds-has-side .ds-band-body > *{break-inside:avoid;margin:0 0 10px !important;width:100%}
  /* the Result card takes the full row and shows its lines in two columns */
  body.ds-has-side .ds-band-body > .ds-result{column-span:all}
  body.ds-has-side .ds-result > .card-body, body.ds-has-side .ds-result > div:not(.card-header){column-count:2;column-gap:18px}
  body.ds-has-side .ds-result > .card-body > *, body.ds-has-side .ds-result > div:not(.card-header) > *{break-inside:avoid}

  /* ═══ Arrange screen: fine grid — 12 columns, 6-px rows; each card spans its own height ═══ */
  body.ds-has-side .ds-grid:not([style*="none"]){display:grid !important;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:10px;row-gap:0;grid-auto-rows:6px;grid-auto-flow:row dense;align-items:start;columns:auto !important}
  body.ds-has-side .ds-grid > *, body.ds-has-side .ds-grid .ds-band-body > *{column-span:none !important;margin:0 !important;min-width:0;position:relative}
  /* calculators: the three rows dissolve so every card can go anywhere on the page */
  body.ds-has-side .page-body.ds-grid > .ds-band, body.ds-has-side .page-body.ds-grid .ds-band-body{display:contents !important}
  body.ds-has-side .page-body.ds-grid .ds-band-lbl{display:none !important}
  .ds-tools{display:none}
  /* the arrange bar floats over the card's top edge — it adds no height, so the layout is the same with or without it */
  body.ds-arrange .ds-tools:not(.ds-resize){display:flex;gap:4px;align-items:center;padding:4px 6px;background:rgba(217,155,43,.95);border-radius:8px;
    position:absolute;top:4px;left:4px;right:4px;z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.15)}
  body.ds-arrange .ds-tools button{border:none;background:#fff;color:var(--gold-dk,#A07010);font-weight:800;border-radius:6px;padding:2px 9px;cursor:pointer;font-size:12px}
  body.ds-arrange .ds-grip{color:#fff;font-size:13px;font-weight:800;cursor:grab;padding:3px 8px;border:1.5px solid #fff;border-radius:6px;touch-action:none;user-select:none}
  body.ds-arrange .ds-size{color:#fff;font-weight:800;margin-left:auto;font-size:12px}
  body.ds-arrange .ds-resize{display:block;position:absolute;right:0;bottom:0;width:26px;height:26px;cursor:ew-resize;touch-action:none;z-index:5;
    background:linear-gradient(135deg,transparent 50%,var(--gold,#d99b2b) 50%);border-radius:0 0 10px 0}
  body.ds-arrange .ds-grid > *, body.ds-arrange .ds-grid .ds-band-body > *{outline:2px dashed var(--gold,#d99b2b);outline-offset:2px}
  body.ds-arrange .ds-dragging{opacity:.75;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.25)}

  /* ═══ Milk Pouch layout: choices in one row · each input card is one horizontal strip
     (title on the left, its fields in a line to the right) · results side by side, wrapping — nothing cut off ═══ */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 .ds-band-body{display:flex;flex-wrap:wrap;gap:10px;columns:auto}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 .ds-band-body > *{flex:1 1 240px;min-width:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body{display:block;columns:auto;background:var(--card,#fff);
    border:1px solid var(--brd,#e5e0d5);border-radius:12px;padding:2px 12px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card{display:grid;grid-template-columns:190px minmax(0,1fr);
    column-gap:14px;align-items:start;background:none;border:none;border-bottom:1px solid var(--brd,#e5e0d5);border-radius:0;box-shadow:none;
    margin:0 !important;padding:8px 0;width:auto}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card:last-child{border-bottom:none}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card > .card-header{grid-column:1;background:none;border:none;padding:4px 0;font-size:13px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card > :not(.card-header){grid-column:2;padding:0 !important;min-width:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row{display:flex !important;flex-wrap:wrap;gap:6px 12px;align-items:flex-end}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field{flex:0 0 150px !important;width:150px !important;max-width:150px;margin:0 !important}
  /* a field holding a drop-down keeps its full text (e.g. Method: Separation (cream out)) */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field:has(select){flex:0 0 auto !important;width:auto !important;max-width:none}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field:has(select) select{width:auto;min-width:150px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row{grid-template-columns:none !important;justify-content:flex-start}
  /* milk rows (Cow / Buffalo …): sub-title on the left, fixed-width boxes in one line */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-grp{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:12px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-ttl{flex:0 0 150px;padding-bottom:8px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-row{flex:0 1 auto;justify-content:flex-start;gap:6px 12px;flex-wrap:wrap}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell{flex:0 0 135px !important;width:135px !important;max-width:135px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-grp > :not(.dsr-ttl):not(.dsr-row){flex:1 1 100%}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field > label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field select{min-width:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;columns:auto}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body > *{flex:1 1 320px;min-width:0;margin:0 !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body > .ds-result{flex:2 1 560px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body > button{flex:1 1 100%}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body > .card{overflow-x:auto}
  /* the page itself never scrolls sideways */
  body.ds-has-side{overflow-x:hidden}
  body.ds-has-side .page-body.ds-bands, body.ds-has-side .ds-band, body.ds-has-side .ds-band-body{min-width:0;max-width:100%}

  /* ═══ Milk Pouch — two panes filling the screen: inputs (scroll) left, results fixed right (~23 %) ═══ */
  /* the page scrolls like Inventory: only the top header stays; Choices and Inputs scroll away,
     Results stay in view on the right (sticky, own scroll) */
  body.ds-has-side:has(.ds-layout2:not(.ds-grid)){padding-bottom:0 !important}
  body.ds-has-side .page-body.ds-layout2:not(.ds-grid){display:grid !important;grid-template-columns:minmax(0,1fr) clamp(270px,23vw,400px);
    grid-template-rows:auto 1fr;column-gap:10px;align-items:start;padding:4px 8px 8px !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) > .ds-band-1{grid-column:1;grid-row:1;margin:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) > .ds-band-2{grid-column:1;grid-row:2;margin:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) > .ds-band-3{grid-column:2;grid-row:1 / 3;align-self:start;position:sticky;top:calc(var(--ds-hdr,52px) + 4px);
    max-height:calc(100vh - var(--ds-hdr,52px) - 8px);max-height:calc(100dvh - var(--ds-hdr,52px) - 8px);overflow-y:auto;margin:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-lbl{margin-bottom:3px;padding:0 2px 2px;font-size:10px}
  /* Save Batch: at the end of the inputs, not floating */
  body.ds-has-side .ds-layout2 #fab-save{position:static !important;display:block;width:100% !important;max-width:none !important;margin:8px 0 2px !important;transform:none !important;
    left:auto !important;right:auto !important;bottom:auto !important;box-shadow:none;padding:9px !important;font-size:13px !important}
  /* choices: one compact row */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 .ds-band-body > *{flex:1 1 200px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 .card-header{padding:3px 8px !important;font-size:11.5px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 .card-body{padding:4px 8px !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 button{padding-top:4px !important;padding-bottom:4px !important;font-size:12px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-1 .card-body > :not(:first-child){font-size:10px}
  /* inputs: desktop-size boxes — small text, tight rows, most cards in one line */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card{grid-template-columns:130px minmax(0,1fr);padding:4px 0;column-gap:8px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card > .card-header{font-size:11.5px;padding:2px 0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-cell{flex:0 0 82px !important;width:82px !important;max-width:82px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row{margin:0 0 2px;gap:3px 6px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-ttl, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-ttl{flex:0 0 100px;font-size:11px;padding-bottom:4px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-grp, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-grp{column-gap:6px;margin-bottom:1px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-row, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-row{gap:3px 6px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .card-body > *, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .card > div:not(.card-header) > *{margin-top:1px;margin-bottom:1px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 input, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 select{height:24px !important;min-height:0;font-size:11.5px !important;padding:2px 5px !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 label{font-size:9.5px !important;margin:0 !important;line-height:1.25}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 button:not(#fab-save){padding:3px 7px !important;font-size:11px !important;min-height:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .card-body, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .card > div:not(.card-header){font-size:11px}
  /* results: one narrow column, cards one under another; tables scroll inside their card */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body{display:block !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-band-body > *{width:100%;margin:0 0 8px !important;flex:none}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-result > .card-body, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .ds-result > div:not(.card-header){column-count:1}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 .card{overflow-x:auto;font-size:12px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-grp{display:flex;flex-wrap:wrap;align-items:flex-end}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-row{flex:0 1 auto;justify-content:flex-start;flex-wrap:wrap}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-grp > :not(.ds-ttl):not(.ds-row){flex:1 1 100%}

  /* ═══ Calculators — Excel-style input cells: gridlines, header label on top, value below, no gaps ═══ */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-row,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-row{gap:0 !important;padding-left:1px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-cell{display:flex !important;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 0 -1px !important;
    background:#fff;border-radius:0;gap:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field > label,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell > label,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-cell > label{display:block;background:#f7ecd6;color:#6b5332;font-weight:700;padding:2px 5px !important;
    border-bottom:1px solid #d9cdb8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field > input,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field > select,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell > input,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell > select,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-cell > input,
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-cell > select{border:none !important;border-radius:0 !important;box-shadow:none !important;width:100% !important;
    background:#fff;margin:0 !important;outline-offset:-2px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field input[type=number],
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-cell input[type=number],
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-cell input[type=number]{text-align:right}
  /* cells the app works out (read-only) are shaded */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 input[readonly], body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 input:disabled{background:#f1ede6 !important;color:#5a4a35}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 input:focus, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 select:focus{outline:2px solid var(--gold,#d99b2b)}

  /* ═══ Excel-style forms in other apps ═══
     a) cell rows — field name on top (beige header), value below, gridlines, no gaps:
        Dispatch loose / bulk milk entry and Fleet add rows; Planning product editor */
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] div[style*="flex-direction:column"]:has(> label + input, > label + select),
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(.r2,.r3,.r4) > div:has(> label){
    display:flex !important;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 0 -1px !important;background:#fff;gap:0;border-radius:0}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] div:has(> div[style*="flex-direction:column"] > label){gap:0 !important;padding-left:1px}
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(.r2,.r3,.r4){gap:0 !important;padding-left:1px;margin-bottom:6px}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] div[style*="flex-direction:column"]:has(> label + input, > label + select) > label,
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(.r2,.r3,.r4) > div:has(> label) > label{
    background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px !important;padding:2px 6px !important;margin:0 !important;border-bottom:1px solid #d9cdb8;white-space:nowrap}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] div[style*="flex-direction:column"]:has(> label + input, > label + select) > :is(input,select),
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(.r2,.r3,.r4) > div:has(> label) > :is(input,select){
    border:none !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;padding:4px 6px !important;font-size:12.5px;height:28px;background:#fff}
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(.r2,.r3,.r4) > div:has(> label) > .note{padding:2px 6px;font-size:10px}
  /* b) property sheet — label on the left, value on the right, one line each: Dispatch dealer / owner / rate forms */
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody div:has(> label + input, > label + select):not([style*="flex-direction:column"]),
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody div[style*="flex-direction:column"]:has(> label + input, > label + select){
    display:grid !important;grid-template-columns:190px minmax(0,1fr);align-items:stretch;border:1px solid #d9cdb8;margin:0 0 -1px !important;background:#fff;border-radius:0}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody div:has(> label + input, > label + select) > label{
    display:flex;align-items:center;background:#f7ecd6;color:#6b5332;font-weight:700;font-size:11.5px !important;padding:4px 8px !important;margin:0 !important;border-right:1px solid #d9cdb8;border-bottom:none}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody div:has(> label + input, > label + select) > :is(input,select){
    border:none !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;padding:5px 8px !important;font-size:13px;width:100% !important;background:#fff}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody input:disabled{background:#f1ede6 !important}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody .sec{gap:0 !important}
  /* tables inside the forms (dealer products & rates) get gridlines */
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody table{border-collapse:collapse}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody table :is(th,td){border:1px solid #d9cdb8 !important;padding:3px 6px !important}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody table thead th{background:#f7ecd6;color:#6b5332}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody table input[type=number]{border:none !important;border-radius:0 !important;width:100% !important;text-align:right;background:#fff}
  body.ds-has-side :is(input,select):focus{outline:2px solid var(--gold,#d99b2b);outline-offset:-2px}
  /* Dispatch lists (loose lots, routes, vehicles, owners, dealers, rates) as plain grids; form inputs square */
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] .card table{border-collapse:collapse}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] .card table :is(th,td){border:1px solid #d9cdb8;padding:3px 7px}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] .card table thead th{background:#f7ecd6;color:#6b5332}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody input, body.ds-has-side[data-ds-page="dairy-dispatch-app"] #saleOvBody select{border-radius:0 !important}
  /* Planning product editor: pack-size and ingredient rows square, tight */
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(input,select){border-radius:0 !important}
  body.ds-has-side[data-ds-page="plan"] .overlay .ov-body :is(input,select):not(:is(.r2,.r3,.r4) > div > *){border-color:#d9cdb8 !important}
  /* Inventory add / edit item form — Excel cells */
  body.ds-has-side[data-ds-page="dairy-inventory"] #add-product-form :is(.gr2,.gr3){gap:0 !important;padding-left:1px}
  body.ds-has-side[data-ds-page="dairy-inventory"] #add-product-form .fg{display:flex;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 -1px -1px !important;background:#fff}
  body.ds-has-side[data-ds-page="dairy-inventory"] #add-product-form .fg > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px !important;padding:2px 6px !important;margin:0 !important;border-bottom:1px solid #d9cdb8}
  body.ds-has-side[data-ds-page="dairy-inventory"] #add-product-form .fg > :is(input,select){border:none !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;padding:4px 6px !important;height:28px;font-size:12.5px;background:#fff}

  /* ═══ Milk Collection → Collect: the entry is ONE Excel row; tanks are Excel rows ═══ */
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding:8px 8px 8px 9px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card :is(.gr2,.gr3){display:contents}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg{display:flex;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 0 -1px;
    background:#fff;flex:0 0 auto;min-width:96px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg:has(#c-farmer){min-width:200px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg:has(#c-notes){flex:1 1 120px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px;
    padding:2px 6px;margin:0;border-bottom:1px solid #d9cdb8;white-space:nowrap}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg > :is(input,select){border:none !important;border-radius:0 !important;
    box-shadow:none;margin:0;padding:4px 6px;height:30px;font-size:13px;background:#fff;width:100%}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg > input[type=number]{text-align:right}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap #c-snf{background:#f1ede6 !important}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg .seg{margin:0;border-radius:0;height:30px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card .fg .seg .seg-btn{padding:2px 8px;font-size:11.5px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap .rate-preview{display:flex;margin:0 0 0 -1px;padding:0;border:1px solid #d9cdb8;border-radius:0;background:#fff}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap .rate-preview > .gr3 > div{display:flex;flex-direction:column;border-left:1px solid #d9cdb8;min-width:90px}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap .rate-preview > .gr3 > div:first-child{border-left:none}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap .rate-preview > .gr3 > div > div:first-child{background:#f7ecd6;color:#6b5332 !important;font-weight:700;font-size:10.5px !important;padding:2px 6px;border-bottom:1px solid #d9cdb8}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap .rate-preview > .gr3 > div > div:last-child{padding:3px 6px;font-size:15px !important;margin:0 !important;text-align:right;background:#f1ede6;flex:1}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card > .btn{width:auto !important;margin:0 0 0 8px;padding:0 18px;align-self:stretch}
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap > .seg + .card > #c-msg{flex:1 1 100%}
  /* the entry and today's sheet use the full width (not the card columns) */
  body.ds-has-side[data-ds-page="milk-collection"] #entry-form-wrap.ds-flow, body.ds-has-side[data-ds-page="milk-collection"] #cpanel-opening.ds-flow{columns:auto !important}
  /* opening stock: each tank one Excel row */
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row{display:flex;align-items:stretch;flex-wrap:wrap;padding:0 !important;background:none !important;border-radius:0 !important;margin:0 0 -1px !important}
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row > div:first-child{display:flex !important;flex:0 0 90px;margin:0 !important;border:1px solid #d9cdb8;background:#f7ecd6;padding:0 6px;align-items:center}
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row > div[style*="grid"]{display:contents !important}
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row > div[style*="grid"] > div{display:flex;flex-direction:column;border:1px solid #d9cdb8;margin-left:-1px;background:#fff;min-width:100px}
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row > div[style*="grid"] > div > div:first-child{background:#f7ecd6;color:#6b5332 !important;font-weight:700;padding:2px 6px;margin:0 !important;border-bottom:1px solid #d9cdb8}
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row > div[style*="grid"] > div > :is(input,select){border:none !important;border-radius:0 !important;padding:4px 6px !important;height:28px}
  body.ds-has-side[data-ds-page="milk-collection"] .os-tank-row input[type=number]{text-align:right}

  /* ═══ Milk Collection — other sections: forms as Excel cells, tables with gridlines ═══ */
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) :is(.gr2,.gr3){gap:0 !important;padding-left:1px}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) .fg{display:flex;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 -1px -1px !important;background:#fff}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) .fg > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px;padding:2px 6px;margin:0;border-bottom:1px solid #d9cdb8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) .fg > :is(input,select,textarea){border:none !important;border-radius:0 !important;box-shadow:none;margin:0;padding:4px 6px;min-height:28px;font-size:13px;background:#fff;width:100%}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) .fg > input[type=number]{text-align:right}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) .fg > input[readonly]{background:#f1ede6}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) table:not(.mc-xl){border-collapse:collapse;width:100%}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) table:not(.mc-xl) :is(th,td){border:1px solid #d9cdb8 !important;padding:3px 7px !important;font-size:12px}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) table:not(.mc-xl) thead th{background:#f7ecd6 !important;color:#6b5332 !important;position:sticky;top:0}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-rates,#s-payments,#s-ledger,#s-balance,#s-reports) table:not(.mc-xl) td input{border:none !important;border-radius:0 !important;width:100%;text-align:right;background:transparent}
  body.ds-has-side[data-ds-page="milk-collection"] #s-farmers .mc-xl-wrap, body.ds-has-side[data-ds-page="milk-collection"] #s-payments .mc-xl-wrap{margin-bottom:8px}
  body.ds-has-side[data-ds-page="milk-collection"] :is(#s-farmers,#s-payments).ds-flow{columns:auto !important}

  /* ═══ Production Plan — Excel style ═══ */
  /* Products to Plan: each product one row of cells (Brand / Standard | Target qty | unit | 🧮 | ✕) */
  body.ds-has-side[data-ds-page="plan"] .plan-prod{background:none !important;border:none !important;border-radius:0 !important;padding:0 !important;margin:0 0 -1px !important;gap:0 !important;
    grid-template-columns:minmax(0,1.6fr) 110px 46px auto auto !important;align-items:stretch !important}
  body.ds-has-side[data-ds-page="plan"] .plan-prod > div:has(> :is(input,select)){display:flex;flex-direction:column;border:1px solid #d9cdb8;margin-left:-1px;background:#fff}
  body.ds-has-side[data-ds-page="plan"] .plan-prod > div:has(> :is(input,select)) > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px;padding:2px 6px;margin:0;border-bottom:1px solid #d9cdb8;white-space:nowrap}
  body.ds-has-side[data-ds-page="plan"] .plan-prod > div > :is(input,select){border:none !important;border-radius:0 !important;box-shadow:none;margin:0;padding:4px 6px;min-height:28px;font-size:12.5px;background:#fff;width:100%}
  body.ds-has-side[data-ds-page="plan"] .plan-prod .p-qty{text-align:right}
  body.ds-has-side[data-ds-page="plan"] .plan-prod > div[style*="align-self"]{display:flex;align-items:center;justify-content:center;align-self:stretch !important;padding:0 6px;border:1px solid #d9cdb8;margin-left:-1px;background:#f1ede6}
  /* one header row only — like a sheet: the field names show on the first product, the rest are plain rows */
  body.ds-has-side[data-ds-page="plan"] .plan-prod ~ .plan-prod > div:has(> :is(input,select)) > label{display:none}
  body.ds-has-side[data-ds-page="plan"] .plan-prod > button{align-self:stretch !important;border-radius:0 !important;margin-left:-1px;border:1px solid #d9cdb8 !important}
  body.ds-has-side[data-ds-page="plan"] .plan-prod > :is(.p-ghee-method-wrap,.p-packsplit-wrap){border:1px solid #d9cdb8;border-top:none;padding:3px 6px;background:#fbf7ef;margin:0 !important}
  body.ds-has-side[data-ds-page="plan"] .p-packsplit-rows{gap:0 !important}
  body.ds-has-side[data-ds-page="plan"] .p-packsplit-rows > *{border:1px solid #d9cdb8;margin-left:-1px;border-radius:0 !important;background:#fff}
  body.ds-has-side[data-ds-page="plan"] .p-packsplit-rows input{border:none !important;border-radius:0 !important;text-align:right;width:80px}
  /* Packing schedule: pack-size boxes side by side as cells */
  body.ds-has-side[data-ds-page="plan"] .pk-sz{display:inline-flex !important;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 0 -1px !important;background:#fff;vertical-align:top;min-width:90px;border-radius:0 !important;padding:0 !important}
  body.ds-has-side[data-ds-page="plan"] :has(> .pk-sz){gap:0 !important;padding-left:1px}
  body.ds-has-side[data-ds-page="plan"] .pk-sz > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px;padding:2px 6px;margin:0;border-bottom:1px solid #d9cdb8;white-space:nowrap}
  body.ds-has-side[data-ds-page="plan"] .pk-sz > input{border:none !important;border-radius:0 !important;box-shadow:none;margin:0;padding:4px 6px;min-height:28px;font-size:12.5px;background:#fff;width:100%;text-align:right}
  body.ds-has-side[data-ds-page="plan"] .pk-sz > input:disabled{background:#f1ede6}
  body.ds-has-side[data-ds-page="plan"] .pk-sz .pk-live{font-size:10px;padding:1px 6px;color:var(--green,#2e7d32)}
  body.ds-has-side[data-ds-page="plan"] :is(.pk-src,.pk-carry) input{border-radius:0 !important;border:1px solid #d9cdb8 !important;text-align:right}
  /* every table on the page: gridlines, beige header */
  body.ds-has-side[data-ds-page="plan"] table{border-collapse:collapse}
  body.ds-has-side[data-ds-page="plan"] :is(#view-manager,#view-operator,#view-lab,.overlay) table :is(th,td){border:1px solid #d9cdb8 !important;padding:3px 7px !important;font-size:12px}
  body.ds-has-side[data-ds-page="plan"] :is(#view-manager,#view-operator,#view-lab,.overlay) table thead th{background:#f7ecd6 !important;color:#6b5332 !important}
  body.ds-has-side[data-ds-page="plan"] :is(#view-manager,#view-operator,#view-lab) table td input{border:none !important;border-radius:0 !important;text-align:right;width:100%;background:transparent}

  /* ═══ Accounts — Excel style ═══
     voucher form & ledger form: a property sheet — field name (beige) on the left, the line(s) on the right */
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body){display:grid !important;grid-template-columns:200px minmax(0,1fr);column-gap:0;row-gap:0 !important;align-items:stretch}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > *{grid-column:1 / -1}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > .vlbl{grid-column:1;background:#f7ecd6;color:#6b5332;font-weight:700;font-size:11px;padding:5px 8px !important;margin:0 0 -1px !important;
    border:1px solid #d9cdb8;display:flex;align-items:center}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > .vrow{grid-column:2;margin:0 0 -1px -1px !important;gap:0 !important;border:1px solid #d9cdb8;background:#fff;flex-wrap:nowrap !important;align-items:stretch}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > .vlbl + .vrow{grid-row:auto}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > .vrow:has(> div > .vlbl){grid-column:1 / -1;margin-left:0 !important}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow > div{display:flex;flex-direction:column;border-left:1px solid #d9cdb8}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow > div:first-child{border-left:none}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow > div > .vlbl{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:11px;padding:3px 8px;margin:0;border-bottom:1px solid #d9cdb8}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow :is(input,select){border:none !important;border-radius:0 !important;box-shadow:none;margin:0 !important;padding:5px 8px;min-height:30px;font-size:13px;background:#fff}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow > :is(input,select) + :is(input,select){border-left:1px solid #d9cdb8 !important}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow input[type=number]{text-align:right}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow input[readonly]{background:#f1ede6}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow > input[list="dl-items"]{flex:3 1 0 !important}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) .vrow > .x{border-left:1px solid #d9cdb8;border-radius:0;padding:0 10px}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > .btn{grid-column:2;justify-self:start;margin:6px 0 4px !important}
  body.ds-has-side[data-ds-page="accounts"] :is(#vf-body,#lf-box .card-body) > .muted{grid-column:2;padding:2px 8px}
  /* day book: rows like a register */
  body.ds-has-side[data-ds-page="accounts"] #db-list .dbrow{border:1px solid #d9cdb8;margin:0 0 -1px !important;border-radius:0 !important;padding:5px 10px !important;background:#fff}
  body.ds-has-side[data-ds-page="accounts"] #db-list .dbrow:nth-child(even){background:#fbf7ef}
  /* every list / report table: gridlines, beige header */
  body.ds-has-side[data-ds-page="accounts"] table.acc-list{border-collapse:collapse}
  body.ds-has-side[data-ds-page="accounts"] table.acc-list :is(th,td){border:1px solid #d9cdb8 !important;padding:3px 8px !important;font-size:12px}
  body.ds-has-side[data-ds-page="accounts"] table.acc-list th{background:#f7ecd6 !important;color:#6b5332 !important;position:sticky;top:0}
  body.ds-has-side[data-ds-page="accounts"] table.acc-list tr:nth-child(even) td{background:#fbf7ef}
  /* report filters and searches square */
  body.ds-has-side[data-ds-page="accounts"] :is(#pane-r,#pane-m,#pane-v) .srch{border-radius:0 !important;border-color:#d9cdb8 !important}

  /* ═══ Inventory (History, Paneer Ladi, Reports, Settings) · FSSAI Records · Dispatch sheets — Excel style ═══ */
  body.ds-has-side[data-ds-page="dairy-inventory"] :is(#s-history,#s-ladi,#s-reports,#s-feeds,#s-settings) :is(.gr2,.gr3){gap:0 !important;padding-left:1px}
  body.ds-has-side[data-ds-page="dairy-inventory"] :is(#s-history,#s-ladi,#s-reports,#s-feeds,#s-settings) .fg{display:flex;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 -1px -1px !important;background:#fff}
  body.ds-has-side[data-ds-page="dairy-inventory"] :is(#s-history,#s-ladi,#s-reports,#s-feeds,#s-settings) .fg > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px;padding:2px 6px;margin:0;border-bottom:1px solid #d9cdb8;white-space:nowrap}
  body.ds-has-side[data-ds-page="dairy-inventory"] :is(#s-history,#s-ladi,#s-reports,#s-feeds,#s-settings) .fg > :is(input,select){border:none !important;border-radius:0 !important;box-shadow:none;margin:0;padding:4px 6px;min-height:28px;font-size:12.5px;background:#fff;width:100%}
  body.ds-has-side[data-ds-page="dairy-inventory"] .sec table:not(.xl){border-collapse:collapse;width:100%}
  body.ds-has-side[data-ds-page="dairy-inventory"] .sec table:not(.xl) :is(th,td){border:1px solid #d9cdb8 !important;padding:3px 7px !important;font-size:12px}
  body.ds-has-side[data-ds-page="dairy-inventory"] .sec table:not(.xl) th{background:#f7ecd6 !important;color:#6b5332 !important}
  body.ds-has-side[data-ds-page="dairy-inventory"] .sec table:not(.xl) td input{border:none !important;border-radius:0 !important;width:100%;background:transparent}
  body.ds-has-side[data-ds-page="dairy-inventory"] .sec :is(input,select):not(.xl input){border-radius:0 !important}
  /* FSSAI Records: filters as cells, record tables with gridlines; entry cells borderless */
  body.ds-has-side[data-ds-page="fssai-records"] .hf{gap:0 !important;padding-left:1px}
  body.ds-has-side[data-ds-page="fssai-records"] .hf > div{display:flex;flex-direction:column;border:1px solid #d9cdb8;margin:0 0 -1px -1px !important;background:#fff}
  body.ds-has-side[data-ds-page="fssai-records"] .hf > div > label{background:#f7ecd6;color:#6b5332;font-weight:700;font-size:10.5px;padding:2px 6px;margin:0;border-bottom:1px solid #d9cdb8;white-space:nowrap}
  body.ds-has-side[data-ds-page="fssai-records"] .hf > div > :is(input,select){border:none !important;border-radius:0 !important;box-shadow:none;margin:0;padding:4px 6px;min-height:28px;font-size:12.5px;background:#fff;width:100%}
  body.ds-has-side[data-ds-page="fssai-records"] table{border-collapse:collapse}
  body.ds-has-side[data-ds-page="fssai-records"] table :is(th,td){border:1px solid #d9cdb8 !important;padding:3px 6px !important;font-size:12px}
  body.ds-has-side[data-ds-page="fssai-records"] table th{background:#f7ecd6 !important;color:#6b5332 !important;position:sticky;top:0}
  body.ds-has-side[data-ds-page="fssai-records"] table td :is(input,select,textarea){border:none !important;border-radius:0 !important;width:100%;background:transparent;padding:3px 4px !important}
  body.ds-has-side[data-ds-page="fssai-records"] :is(input,select,textarea){border-radius:0 !important}
  body.ds-has-side[data-ds-page="fssai-records"] .fitem{border:1px solid #d9cdb8;margin:0 0 -1px !important;border-radius:0 !important}
  /* Dispatch: driver / dispatch sheet tables with banded rows */
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] .card table tbody tr:nth-child(even) td{background:#fbf7ef}
  body.ds-has-side[data-ds-page="dairy-dispatch-app"] .card table td input{border:none !important;border-radius:0 !important;background:transparent;text-align:right}

  /* ═══ Arrange: inside a card — transpose (across / down / grid), field moving ═══ */
  body.ds-has-side .ds-t-across :is(.field-row,.dsr-row,.ds-row,.gr2,.gr3,.r2,.r3,.r4,.hf){display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;gap:0 !important}
  body.ds-has-side .ds-t-across :is(.field,.dsr-cell,.ds-cell,.fg){flex:0 0 auto !important;min-width:90px}
  body.ds-has-side .ds-t-down :is(.field-row,.dsr-row,.ds-row,.gr2,.gr3,.r2,.r3,.r4,.hf){display:flex !important;flex-direction:column !important;gap:0 !important}
  body.ds-has-side .ds-t-down :is(.field,.dsr-cell,.ds-cell,.fg){display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) !important;
    width:100% !important;max-width:none !important;flex:none !important;align-items:center}
  body.ds-has-side .ds-t-down :is(.field,.dsr-cell,.ds-cell,.fg) > label{border-bottom:none !important;border-right:1px solid #d9cdb8;height:100%;display:flex;align-items:center}
  body.ds-has-side .ds-t-grid :is(.field-row,.dsr-row,.ds-row,.gr2,.gr3,.r2,.r3,.r4,.hf){display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important}
  body.ds-has-side .ds-t-grid :is(.field,.dsr-cell,.ds-cell,.fg){width:auto !important;max-width:none !important;flex:none !important}
  body.ds-arrange :is(.field,.dsr-cell,.ds-cell,.fg,.pk-sz) > label{cursor:grab;outline:1px dashed var(--gold,#d99b2b);outline-offset:-1px}
  body.ds-arrange .ds-fdrag{opacity:.75;z-index:60;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  body.ds-arrange .ds-resize{cursor:nwse-resize !important}

  /* ═══ Left menu collapses to an icon strip ═══ */
  #ds-side .ds-top{display:flex;align-items:center;justify-content:space-between;gap:4px}
  #ds-side .ds-brand{display:flex;align-items:center;gap:5px}
  #ds-side .ds-mini-btn{border:1px solid var(--brd,#e5e0d5);background:var(--card,#fff);color:var(--gold-dk,#A07010);border-radius:6px;
    width:24px;height:24px;line-height:20px;padding:0;font-size:14px;font-weight:800;cursor:pointer;flex:0 0 24px}
  body.ds-has-side.ds-side-mini{padding-left:46px !important}
  body.ds-side-mini #ds-side{width:46px;padding:6px 3px;overflow-x:hidden}
  body.ds-side-mini #ds-side .ds-top{flex-direction:column}
  body.ds-side-mini #ds-side .ds-brand b, body.ds-side-mini #ds-side .ds-gh, body.ds-side-mini #ds-side .ds-subs,
  body.ds-side-mini #ds-side .ds-acar{display:none !important}
  body.ds-side-mini #ds-side .ds-gl{display:block !important}
  body.ds-side-mini #ds-side .ds-gl a{font-size:0 !important;justify-content:center;padding:6px 0 !important}
  body.ds-side-mini #ds-side .ds-gl a span{font-size:17px}
  body.ds-side-mini #ds-side .ds-grp{border-top:1px solid var(--brd,#e5e0d5);padding-top:3px;margin-top:3px}
  body.ds-side-mini #ds-side .ds-arow a{padding-left:0 !important}
  body.ds-side-mini .ds-layout2:not(.ds-grid){--ds-side-w:46px}
  /* ═══ Results: Expand widens the right panel so whole tables show ═══ */
  .ds-wide-btn{display:none}
  body.ds-has-side .ds-wide-btn{display:inline-block;margin-left:auto;float:right;border:1px solid var(--brd,#e5e0d5);background:var(--card,#fff);
    color:var(--gold-dk,#A07010);border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700;cursor:pointer;text-transform:none;letter-spacing:0}
  body.ds-has-side.ds-res-wide .page-body.ds-layout2:not(.ds-grid){grid-template-columns:minmax(300px,1fr) minmax(420px,60%)}
  body.ds-has-side.ds-res-wide .ds-layout2:not(.ds-grid) .ds-band-3 .card{overflow-x:visible}
  body.ds-has-side.ds-res-wide .ds-layout2:not(.ds-grid) .ds-band-3 table{width:100%;font-size:11.5px}
  body.ds-has-side.ds-res-wide .ds-layout2:not(.ds-grid) .ds-band-3 table :is(th,td){white-space:nowrap}
  /* inputs get narrower when results are wide: field rows wrap neatly */
  body.ds-has-side.ds-res-wide .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card{grid-template-columns:110px minmax(0,1fr)}
  body.ds-has-side.ds-res-wide .ds-layout2:not(.ds-grid) .ds-band-2 :is(.dsr-row,.ds-row,.field-row){flex-wrap:wrap !important}
  body.ds-has-side.ds-res-wide .ds-layout2:not(.ds-grid) .ds-band-2 :is(.dsr-grp,.ds-grp) > :is(.dsr-ttl,.ds-ttl){flex:1 1 100% !important;padding-bottom:2px}
}

/* AI-generated: mouse pointer dot (all screen sizes; shown only while a mouse is used) */
#ds-pointer{position:fixed;left:0;top:0;width:14px;height:14px;margin:-9px 0 0 -9px;border-radius:50%;
  background:rgba(220,30,30,.85);border:2px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.6);
  pointer-events:none;z-index:2147483647;display:none;will-change:transform
}

@media (min-width:960px){
  /* ═══ Calculators — same standard everywhere (AI-generated) ═══ */
  /* Simple: cards inside a wrapper (e.g. Paneer's Batch Details + Ingredients) are hidden too — no stale tables */
  body.simple-mode .ds-band-3 .ds-band-body > :not(.card):not(:has(.simple-card)) .card:not(.simple-card){display:none !important}
  body.simple-mode .ds-band-3 .ds-band-body > :not(.card):not(:has(.simple-card)):not(button){display:none !important}
  /* compact inputs: tight groups, one-line group titles, small hint lines */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.ds-grp,.dsr-grp){padding:3px 0 !important;margin:0 !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.ds-grp,.dsr-grp) + :is(.ds-grp,.dsr-grp){border-top:1px dashed #e8dcc6}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.ds-ttl,.dsr-ttl){flex:1 1 100% !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin:0 0 2px !important;padding:0 !important;font-size:11.5px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.ds-grp,.dsr-grp) > div:not(.ds-ttl):not(.dsr-ttl):not(.ds-row):not(.dsr-row){margin:1px 0 0 !important;font-size:10px;line-height:1.3}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card{padding:3px 0 !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card > .card-header{display:block !important;white-space:normal;line-height:1.25}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card > .card-header > *{display:inline}
  /* cells share the row width (no cut-off last column), rows sit close together */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.ds-row,.dsr-row){flex-wrap:nowrap !important;width:100%}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.ds-cell,.dsr-cell){flex:1 1 0 !important;width:auto !important;min-width:0 !important;max-width:150px !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row{margin:0 0 3px !important;row-gap:3px !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .field-row > .field:not(:has(select)){flex:0 1 150px !important;width:auto !important;min-width:80px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .ds-band-body > .card > .card-header .mr{display:block;font-size:10px}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .card-body{row-gap:4px !important;gap:4px !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .card-body > *{margin-top:0 !important;margin-bottom:0 !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 .dsr-one{margin:0 !important}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-2 :is(.snf-warn,.ds-note,.note){margin:4px 0 !important;padding:5px 8px !important}
  /* result tables: all columns visible in the normal width (small text), Expand for more room */
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 table{font-size:10.5px;width:100%}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 table :is(th,td){padding:3px 4px !important;white-space:nowrap}
  body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 table td .mr, body.ds-has-side .ds-layout2:not(.ds-grid) .ds-band-3 table td small{display:none}
}

/* AI-generated: a box the page hid (inline display:none — e.g. the old one-number combination fields
   that the four CM/BM whole/skim boxes replaced) stays hidden in the desktop layout too */
body.ds-has-side .page-body.ds-layout2 [style*="display: none"]:not(#ds-x):not(#ds-y), body.ds-has-side .page-body.ds-layout2 [style*="display:none"]:not(#ds-x):not(#ds-y){display:none !important}

/* AI-generated: Paneer's two wide pairs (Target FDM / Required milk fat, Yield % / Paneer kg) — wide enough to read */
body.ds-has-side .ds-wide-pair:not(#ds-x){display:grid !important;grid-template-columns:repeat(2,minmax(170px,250px)) !important;gap:0 !important}
body.ds-has-side .ds-wide-pair:not(#ds-x) > .field{flex:none !important;width:auto !important;max-width:none !important;min-width:0 !important}
body.ds-has-side .ds-wide-pair:not(#ds-x) > .field > label{white-space:normal !important;min-height:38px}
body.ds-has-side .ds-wide-pair:not(#ds-x) .ds-readout{border-radius:0;margin:0;padding:4px 8px;min-height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;font-size:14px}
body.ds-has-side .ds-wide-pair:not(#ds-x){align-items:stretch !important}
body.ds-has-side .ds-wide-pair:not(#ds-x) > .field{margin:0 0 0 -1px !important;display:flex !important;flex-direction:column !important}
body.ds-has-side .ds-wide-pair:not(#ds-x) > .field > :is(input,.ds-readout){flex:0 0 30px;height:30px}