/* ==========================================================================
   Manish Trading Company — admin panel
   Design tokens follow manish-trading-company-brand/BRAND-GUIDE.md,
   rendered in the light "daylight" treatment used by the admin mockup.
   ========================================================================== */

/* ----- Fonts (self-hosted, no external requests) ----- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ----- Tokens ----- */
:root{
  /* Surfaces — warm-tinted, per brand guide */
  --bg:#EDE5E1;          /* app canvas            */
  --surface:#FFFFFF;     /* panels                */
  --surface-2:#FFFFFF;   /* sidebar, login pitch  */
  --surface-3:#FFFFFF;   /* topbar                */
  --field:#F7F1ED;       /* inputs, selects       */

  /* Ink */
  --ink:#241A18;         /* primary text          */
  --muted:#6E5B56;       /* secondary text        */
  --faint:#8A7671;       /* tertiary / labels     */
  --placeholder:#A2918C;

  /* Brand */
  --cocoa:#6B4A45;
  --accent:#A3543C;      /* terracotta, on light surfaces */
  --accent-hover:#7F3D28;
  --on-accent:#FFF6F2;   /* text on accent        */

  /* Status */
  --good:#3E7A56;
  --good-bar:#4E8F66;    /* progress fill         */
  --warn:#8A6415;
  --bad:#B0472F;

  /* Lines */
  --line:rgba(36,26,24,0.10);
  --line-soft:rgba(36,26,24,0.045);
  --line-mid:rgba(36,26,24,0.07);
  --field-line:rgba(36,26,24,0.13);
  --line-chrome:rgba(36,26,24,0.09);  /* sidebar / topbar edges */

  /* Panels sit on the canvas rather than being cut out of it, so they
     carry a hairline shadow instead of relying on a surface-value step. */
  --shadow-panel:0 1px 2px rgba(36,26,24,0.04),0 6px 18px -12px rgba(36,26,24,0.18);
  --shadow-accent:0 1px 2px rgba(163,84,60,0.06),0 6px 18px -12px rgba(163,84,60,0.24);

  /* Radius — encodes role (fields < panels < pills) */
  --r-field:7px;
  --r-btn:8px;
  --r-panel:12px;
  --r-pill:99px;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  color-scheme:light;
}

/* ----- Reset ----- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
/* Headings and copy are marked up semantically, but the mockup draws them
   at the body weight and spaces them with the surrounding flex/grid gap.
   Instrument Serif has only a 400 face, so an inherited bold would render
   as a synthetic smear rather than a real weight. */
h1,h2,h3,h4,h5,h6,p{margin:0;font-size:inherit;font-weight:inherit;}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--ink);}
input,select,textarea,button{font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)!important;}
::placeholder{color:var(--placeholder);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#D6C6C0;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
::selection{background:rgba(163,84,60,0.18);}

/* ----- Typography helpers ----- */
.serif{font-family:var(--serif);font-weight:400;}
.mono{font-family:var(--mono);}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.eyebrow{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
.num{font-family:var(--mono);}
.right{text-align:right;}

/* ==========================================================================
   Login
   ========================================================================== */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg);color:var(--ink);}
.login__pitch{background:var(--surface-2);display:flex;flex-direction:column;justify-content:space-between;padding:56px;}
.login__mark{width:96px;height:96px;}
.login__copy{display:flex;flex-direction:column;gap:18px;max-width:420px;}
.login__headline{font-family:var(--serif);font-size:52px;line-height:1.05;}
.login__sub{color:var(--muted);font-size:16px;line-height:1.6;}
.login__since{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--faint);}
.login__form{display:flex;align-items:center;justify-content:center;padding:56px;}
.login__form-inner{width:100%;max-width:360px;display:flex;flex-direction:column;gap:22px;}
.login__title{font-family:var(--serif);font-size:34px;}
.login__links{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);}
.login__links a:hover{color:var(--ink);}
@media (max-width:900px){
  .login{grid-template-columns:1fr;}
  .login__pitch{display:none;}
}

/* ----- Fields ----- */
.field{display:flex;flex-direction:column;gap:7px;}
.field__label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.input{background:var(--field);border:1px solid var(--field-line);border-radius:var(--r-btn);
  padding:12px 14px;color:var(--ink);font-size:15px;width:100%;}
.login .input{background:var(--surface);border-color:rgba(36,26,24,0.16);}
.input--invalid{border-color:var(--bad)!important;}
.field__error{color:var(--bad);font-size:12.5px;line-height:1.4;}

/* Sign-out confirmation and other one-line flashes. */
.notice{background:rgba(62,122,86,0.12);border:1px solid rgba(62,122,86,0.42);
  border-radius:var(--r-field);color:var(--good);font-size:13.5px;padding:11px 14px;}
.notice--bad{background:rgba(176,71,47,0.10);border-color:rgba(176,71,47,0.40);color:var(--bad);}

/* ----- Checkbox row ----- */
.check{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px;cursor:pointer;}
.check input{width:15px;height:15px;flex:none;accent-color:var(--accent);cursor:pointer;}
.check:hover{color:var(--ink);}

/* ----- Form layout ----- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.form-grid__wide{grid-column:1/-1;}
textarea.input{resize:vertical;min-height:64px;line-height:1.5;}
.field__hint{font-size:12px;color:var(--faint);}

/* Native select, restyled to match .input. */
select.input{appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E5B56' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;}

@media (max-width:820px){
  .form-grid{grid-template-columns:1fr;}
}

/* ----- Buttons ----- */
.btn{border-radius:var(--r-btn);font-size:14px;cursor:pointer;border:1px solid transparent;
  padding:11px 18px;font-weight:700;white-space:nowrap;transition:background .12s,color .12s,border-color .12s;}
.btn--primary{background:var(--accent);color:var(--on-accent);border:none;}
.btn--primary:hover{background:var(--accent-hover);}
.btn--block{width:100%;padding:13px;font-size:15px;}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(36,26,24,0.22);font-weight:400;}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn--soft{background:rgba(163,84,60,0.10);color:var(--accent);border-color:rgba(163,84,60,0.38);
  border-radius:var(--r-field);padding:10px 16px;}
.btn--soft:hover{background:var(--accent);color:var(--on-accent);}
.btn--quiet{background:transparent;color:var(--muted);border-color:rgba(36,26,24,0.18);
  border-radius:var(--r-field);padding:10px 16px;font-weight:400;}
.btn--quiet:hover{color:var(--ink);border-color:var(--ink);}
.btn--sm{padding:6px 10px;font-size:12px;font-weight:400;border-radius:6px;}
.btn--settle{background:transparent;color:var(--good);border-color:rgba(62,122,86,0.42);}
.btn--settle:hover{background:var(--good);color:#FFFFFF;}
.btn--disabled{background:transparent;color:#9A8681;border-color:rgba(36,26,24,0.16);cursor:not-allowed;}
.btn--closed{background:transparent;color:var(--good);border-color:rgba(62,122,86,0.42);cursor:default;}
.btn--close-ok{background:var(--good);color:#FFFFFF;border-color:var(--good);}
.btn--danger{background:transparent;color:var(--bad);border-color:rgba(176,71,47,0.40);font-weight:400;}
.btn--danger:hover{background:var(--bad);color:#FFFFFF;border-color:var(--bad);}

/* ==========================================================================
   App shell
   ========================================================================== */
.shell{display:flex;height:100vh;overflow:hidden;background:var(--bg);color:var(--ink);}

/* ----- Sidebar ----- */
.sidebar{width:250px;flex:none;background:var(--surface-2);border-right:1px solid var(--line-chrome);
  display:flex;flex-direction:column;padding:22px 0;}
.sidebar__brand{padding:0 20px 26px;display:flex;align-items:center;gap:12px;}
.sidebar__logo{width:38px;height:38px;flex:none;display:block;}
.sidebar__name{font-family:var(--serif);font-size:22px;line-height:1;color:var(--ink);}
.sidebar__since{font-family:var(--mono);font-size:9px;letter-spacing:0.22em;color:var(--faint);}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;}
.nav-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-radius:var(--r-btn);cursor:pointer;font-size:15px;color:var(--muted);
  background:transparent;border-left:3px solid transparent;}
.nav-item:hover{background:rgba(36,26,24,0.045);color:var(--ink);}
.nav-item.is-active{background:rgba(36,26,24,0.07);color:var(--ink);border-left-color:var(--accent);}
.nav-item.is-disabled{cursor:not-allowed;opacity:0.4;pointer-events:none;}
.nav-item__count{font-family:var(--mono);font-size:12px;color:var(--muted);}
.sidebar__spacer{flex:1;}
.sidebar__user{padding:16px 20px 0;margin:0 12px;border-top:1px solid var(--line-mid);
  display:flex;align-items:center;gap:12px;}
.avatar{width:38px;height:38px;flex:none;border-radius:50%;background:var(--cocoa);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:0.04em;color:var(--on-accent);}
.sidebar__user-meta{flex:1;min-width:0;}
.sidebar__user-name{font-size:14px;}
.sidebar__user-role{font-size:12px;color:var(--muted);}
.sidebar__exit{cursor:pointer;color:var(--muted);font-size:12px;font-family:var(--mono);background:none;border:none;padding:0;}
.sidebar__exit:hover{color:var(--ink);}

/* ----- Main column ----- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{flex:none;height:70px;border-bottom:1px solid var(--line-chrome);display:flex;align-items:center;
  gap:16px;padding:0 32px;background:var(--surface-3);}
.topbar > .btn,.topbar > a.btn{flex:none;}
.topbar__titles{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;}
.topbar__title{font-family:var(--serif);font-size:24px;}
.topbar__sub{font-size:13px;color:var(--muted);}
.topbar__search{flex:0 1 300px;min-width:150px;background:var(--field);border:1px solid var(--field-line);
  border-radius:var(--r-btn);padding:10px 14px;color:var(--ink);font-size:14px;}
.content{flex:1;overflow:auto;padding:28px 32px 60px;min-width:0;}
/* No minimum here: the page always fits the window, and the dense tables
   that cannot shrink scroll inside their own panel (see .table-scroll). */
.content__inner{min-width:0;}
.stack{display:flex;flex-direction:column;gap:22px;max-width:1500px;}
.page{max-width:1500px;}

/* ==========================================================================
   Panels, stat strips, tables
   ========================================================================== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--shadow-panel);overflow:hidden;}
.panel__head{padding:18px 20px;border-bottom:1px solid var(--line-mid);
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.panel__title{font-family:var(--serif);font-size:20px;}
.panel__note{font-size:12px;color:var(--faint);margin-top:3px;}
.panel__meta{font-family:var(--mono);font-size:13px;color:var(--muted);}
.panel__body{padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.panel__pad{padding:20px;display:flex;flex-direction:column;gap:12px;}

/* Under-development placeholder — centred inside an otherwise empty panel */
.pending{min-height:max(340px,58vh);padding:40px 24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;}
.pending__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint);}
.pending__title{font-family:var(--serif);font-size:26px;}
.pending__note{max-width:44ch;font-size:13.5px;line-height:1.6;color:var(--muted);}

/* Ruled stat strip — one bordered strip divided by hairlines, not four cards */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;}
.stat{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:6px;}
.stat--center{justify-content:center;gap:10px;}
.stat__label{font-size:13px;color:var(--muted);}
.stat__value{font-family:var(--mono);font-size:30px;letter-spacing:-0.02em;}
.stat__note{font-size:12px;color:var(--faint);}

/* Row grids */
.row{display:grid;gap:10px;align-items:center;}
.row--head{padding:10px 20px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid rgba(36,26,24,0.05);}
.row--body{padding:13px 20px;font-size:14px;border-bottom:1px solid var(--line-soft);}
.row--total{padding:14px 20px;font-size:14px;background:rgba(36,26,24,0.035);}
.row--entry{padding:16px 20px;border-top:1px solid var(--line-mid);}
.row__sub{font-size:12px;color:var(--faint);}

.table-head{padding:14px 22px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid rgba(36,26,24,0.05);display:grid;gap:12px;}
.table-row{padding:16px 22px;font-size:14px;border-bottom:1px solid var(--line-soft);
  display:grid;gap:12px;align-items:center;}
.table-row--link{cursor:pointer;}
.table-row--link:hover{background:rgba(36,26,24,0.04);}

/* Column templates */
.cols-daily-sale{grid-template-columns:1.6fr 0.5fr 0.9fr 0.8fr;}
.cols-daily-entry{grid-template-columns:1.6fr 0.5fr 0.9fr 0.8fr auto;}
.cols-orders{grid-template-columns:1.1fr 1.6fr 0.8fr 1fr 1fr 1fr 0.7fr;}
.cols-quotations{grid-template-columns:1.1fr 1.6fr 1fr 1fr 1fr 1.1fr;}
.cols-customers{grid-template-columns:1.3fr 1.1fr 1fr 1.5fr 1.1fr 132px;}
/* The head and each row are separate grid containers, so any track that
   sizes to its own content (auto, or an unbounded minmax) lands in a
   different place per row. Everything but the two text columns is fixed. */
.cols-catalog{grid-template-columns:minmax(140px,1fr) minmax(110px,0.8fr) 90px 90px 350px;gap:10px;}
.cols-categories{grid-template-columns:1.5fr 1.4fr 0.7fr 132px;}
.cols-lookups{grid-template-columns:1.8fr 0.7fr 132px;}
.cols-variants{grid-template-columns:1fr 132px;}
.cols-pivot{grid-template-columns:1.1fr 1.3fr 132px;}
.cols-pivot-ops{grid-template-columns:1fr 92px;}
.cols-users{grid-template-columns:1.4fr 1.5fr 1fr 0.9fr 132px;}
.cols-draft{grid-template-columns:1.5fr 1fr 0.6fr 0.6fr 0.7fr 0.7fr 0.5fr 0.8fr 0.9fr 28px;gap:8px;}
.cols-sub-item{grid-template-columns:1.6fr 1fr 0.9fr 0.7fr 0.7fr 0.5fr 0.8fr 0.9fr;}

/* A dense grid that has no room left to shrink scrolls inside its panel
   rather than pushing the whole page sideways. The head and every row sit
   in one scroller, so their columns stay aligned; --table-min is the width
   below which that particular table stops being readable.

   Only the grid rows take the floor — an empty-state message or a footer
   sharing the scroller stays as wide as the panel. */
.table-scroll{overflow-x:auto;}
.table-scroll > :is(.table-head,.table-row,.row,.sub__items-head,.sub__item,[data-lines]){
  min-width:var(--table-min,0);}
.table-scroll--orders{--table-min:920px;}
.table-scroll--customers{--table-min:960px;}
.table-scroll--users{--table-min:800px;}
.table-scroll--quotations{--table-min:880px;}
.table-scroll--catalog{--table-min:840px;}
.table-scroll--categories{--table-min:700px;}
.table-scroll--lookups{--table-min:560px;}
.table-scroll--pivot{--table-min:400px;}
.table-scroll--daily{--table-min:460px;}
.table-scroll--draft{--table-min:800px;}
.table-scroll--items{--table-min:700px;}

/* Edit / delete buttons inside a table row */
.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}

/* Splits "go to a sub-screen" from "change this row". */
.row-actions__divider{width:1px;height:16px;flex:none;background:var(--line-mid);margin:0 2px;}

/* The count riding inside an action button */
.btn__count{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:2px;}
.btn--quiet:hover .btn__count{color:var(--ink);}

/* Icon-only action, for a row where a word would crowd the figures. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border:1px solid rgba(36,26,24,0.16);border-radius:var(--r-field);
  color:var(--muted);background:transparent;cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;}
.icon-btn:hover{color:var(--accent);border-color:rgba(163,84,60,0.38);background:rgba(163,84,60,0.08);}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Search / filter strip at the top of a list panel */
.panel__filter{display:flex;gap:10px;align-items:center;padding:14px 20px;
  border-bottom:1px solid var(--line-mid);}
.panel__filter select.input--cell{width:auto;min-width:160px;}

/* New-thing button and pager, sharing the bottom of a list panel */
.panel__foot{display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:16px 20px;flex-wrap:wrap;}

.pager{display:flex;gap:14px;align-items:center;font-size:13px;}
.pager__count{color:var(--faint);font-family:var(--mono);font-size:12px;}
.pager__link{color:var(--accent);}
.pager__link:hover{color:var(--ink);}
.pager__link.is-off{color:var(--faint);}

/* Which product a sub-screen belongs to, plus its tabs */
.crumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;}
.crumb__tabs{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;}
.crumb__tab{font-size:13px;color:var(--muted);border:1px solid rgba(36,26,24,0.16);
  border-radius:var(--r-field);padding:6px 12px;}
.crumb__tab:hover{color:var(--ink);border-color:var(--ink);}
.crumb__tab.is-active{color:var(--accent);border-color:rgba(163,84,60,0.38);
  background:rgba(163,84,60,0.10);}

/* The catalogue's AJAX switches — a sliding track, not a checkbox. The
   column header names each one, so the control carries no visible text. */
.switch{display:inline-flex;align-items:center;position:relative;cursor:pointer;}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit;}
.switch__track{width:38px;height:21px;flex:none;border-radius:var(--r-pill);
  background:#D6C6C0;border:1px solid rgba(36,26,24,0.13);position:relative;
  transition:background .16s,border-color .16s;}
.switch__track::after{content:'';position:absolute;top:2px;left:2px;
  width:15px;height:15px;border-radius:50%;background:#FFFFFF;
  transition:transform .16s,background .16s;}
.switch:hover .switch__track{border-color:rgba(36,26,24,0.30);}
.switch input:checked + .switch__track{background:var(--good);border-color:var(--good);}
.switch input:checked + .switch__track::after{transform:translateX(17px);background:#FFFFFF;}
.switch input:focus-visible + .switch__track{outline:2px solid var(--accent);outline-offset:2px;}
.switch.is-locked{cursor:not-allowed;opacity:0.4;}
.switch.is-locked .switch__track{border-style:dashed;}

.center{text-align:center;}

/* A category's behaviour flags */
.pill--flag{background:rgba(163,84,60,0.18);color:var(--accent);margin-right:4px;}

.link-quiet{color:var(--muted);}
.link-quiet:hover{color:var(--accent);}

/* Multi-select, tall enough to pick from */
select[multiple].input{height:auto;padding:8px 10px;background-image:none;appearance:auto;}

@media (max-width:1100px){
  .grid-pivot{grid-template-columns:1fr;}
  .grid-daily{grid-template-columns:1fr;}
  /* Four figures across leaves each one too narrow to read at this width. */
  .stat-strip{grid-template-columns:repeat(2,1fr);}
}

/* Small inline field used inside table rows */
.input--cell{background:var(--field);border:1px solid var(--field-line);border-radius:var(--r-field);
  padding:10px 12px;color:var(--ink);font-size:14px;width:100%;}
.input--tight{padding:9px 8px;font-size:13px;}
.input--pick{padding:10px 8px;}
.input--num{text-align:right;font-family:var(--mono);}

/* Pills */
.pill{font-size:12px;padding:4px 10px;border-radius:var(--r-pill);display:inline-block;}
.pill--open{background:rgba(138,100,21,0.13);color:var(--warn);}
.pill--closed{background:rgba(62,122,86,0.12);color:var(--good);}

/* Semantic value colours */
.is-good{color:var(--good);}
.is-bad{color:var(--bad);}
.is-warn{color:var(--warn);}

/* Progress */
.progress{height:8px;border-radius:var(--r-pill);background:rgba(36,26,24,0.10);overflow:hidden;}
.progress__bar{height:100%;background:var(--good-bar);}

/* ==========================================================================
   Page-specific layout
   ========================================================================== */
.grid-daily{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;align-items:start;}
.grid-detail{display:grid;grid-template-columns:1.75fr 1fr;gap:18px;align-items:start;}
.grid-pivot{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:start;}
.col{display:flex;flex-direction:column;gap:18px;}

/* Order detail header */
.detail-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.detail-head__back{color:var(--muted);font-size:14px;padding-top:6px;}
.detail-head__back:hover{color:var(--ink);}
.detail-head__name{font-family:var(--serif);font-size:30px;}
.detail-head__line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.detail-head__meta{font-size:13px;color:var(--faint);margin-top:5px;}

/* Quick-entry panel is called out with an accent border */
.panel--accent{border-color:rgba(163,84,60,0.30);box-shadow:var(--shadow-accent);}
.panel--accent .panel__head{background:rgba(163,84,60,0.06);padding:16px 20px;}
.draft-foot{padding:16px 20px;border-top:1px solid var(--line-mid);display:flex;align-items:flex-end;
  gap:14px;flex-wrap:wrap;background:rgba(36,26,24,0.03);}
.draft-foot__total{font-family:var(--mono);font-size:24px;}
.link-add{display:inline-block;cursor:pointer;font-size:13px;color:var(--accent);}
.link-add:hover{color:var(--ink);}
.row-remove{cursor:pointer;color:var(--faint);text-align:center;font-size:16px;}
.row-remove:hover{color:var(--bad);}

/* Sub-order cards */
.sub__head{padding:15px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-mid);}
.sub__no{font-family:var(--mono);font-size:13px;color:var(--accent);}
.sub__items-head{display:grid;gap:10px;padding:10px 20px;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--faint);}
.sub__item{display:grid;gap:10px;padding:11px 20px;font-size:14px;border-top:1px solid var(--line-soft);}

/* Ledger */
.ledger-row{padding:13px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;}
.ledger-foot{padding:14px 20px;display:flex;justify-content:space-between;}
.ledger-foot--tinted{background:rgba(36,26,24,0.035);}
.ledger-foot--ruled{border-top:1px solid var(--line-mid);}

/* Tabs */
.tabs{display:flex;gap:22px;padding:16px 22px;border-bottom:1px solid var(--line-mid);}
.tab{font-size:14px;padding-bottom:4px;color:var(--faint);border-bottom:2px solid transparent;}
.tab:hover{color:var(--ink);}
.tab.is-active{color:var(--ink);border-bottom-color:var(--accent);}

/* Category list */
.cat{padding:13px 20px;display:flex;justify-content:space-between;font-size:14px;
  color:var(--muted);border-bottom:1px solid var(--line-soft);}
.cat:hover{background:rgba(36,26,24,0.045);color:var(--ink);}
.cat.is-active{background:rgba(36,26,24,0.055);color:var(--ink);}
.cat__count{font-family:var(--mono);font-size:12px;color:var(--faint);}

.flex{display:flex;}
.flex-1{flex:1;min-width:0;}
.gap-8{gap:8px;}
.gap-10{gap:10px;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}

/* ==========================================================================
   Modal — a panel raised over the screen for a short form
   ========================================================================== */
dialog.modal{margin:auto;padding:0;border:1px solid var(--line);border-radius:var(--r-panel);
  background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:88vh;
  overflow:auto;box-shadow:0 1px 2px rgba(36,26,24,0.06),0 28px 60px -28px rgba(36,26,24,0.45);}
dialog.modal::backdrop{background:rgba(36,26,24,0.38);}

.modal__head{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 15px;
  border-bottom:1px solid var(--line-mid);}
.modal__title{font-family:var(--serif);font-size:24px;}
.modal__note{font-size:13px;color:var(--muted);line-height:1.5;margin-top:5px;}
.modal__close{margin-left:auto;flex:none;background:transparent;border:none;cursor:pointer;
  color:var(--faint);font-size:22px;line-height:1;padding:2px 7px;border-radius:var(--r-field);}
.modal__close:hover{color:var(--ink);background:rgba(36,26,24,0.06);}
.modal__body{padding:20px 22px;display:flex;flex-direction:column;gap:18px;}
.modal__foot{display:flex;gap:10px;align-items:center;padding:16px 22px;
  border-top:1px solid var(--line-mid);}

/* Below this, the detail page's two columns have too little room to sit
   side by side: the ledger drops under the sub-orders instead. */
@media (max-width:1180px){
  .grid-detail{grid-template-columns:1fr;}
}

/* ==========================================================================
   Print — receipts and order sheets
   ========================================================================== */
@media print{
  /* A narrow page band, for the same reason as in receipt.css: the browser
     draws its own header (title, URL) and footer (page number, date) into
     the @page margin, and only once that band is roughly 9mm or more. The
     rest of the margin is padding on the page body. */
  @page{size:A4;margin:6mm;}
  body{padding:8mm;}

  /* Screen-only: chrome, and anything that takes input. A live form has
     no business on a sheet handed to someone. */
  .sidebar,.topbar,.btn,.icon-btn,.link-add,.row--entry,.panel--accent,.tabs,
  dialog.modal,.no-print{display:none!important;}
  html,body,.shell{height:auto;overflow:visible;background:#fff;color:#2B2226;}
  .content{overflow:visible;padding:0;}
  /* A sheet has no scrollbars: the dense grids give up their floor and
     shrink to the page instead of running off its right edge. */
  .table-scroll{overflow:visible;--table-min:0;}
  .panel{border-color:#ddd;break-inside:avoid;box-shadow:none;}
  .stat,.panel{background:#fff;}
  .muted,.faint{color:#555;}
}