/* ════════════════════════════════════════════════════════════════════
   MAJEDAR TEA — Brand theme overlay (v3.23)
   Neutral cream base + WHITE surfaces. Yellow & red used SPARINGLY as
   accents only (nav band, header strips, action buttons, active states).
   Visual layer only — no markup, nav, tab, or form names changed.
   Fonts are linked from base.html (non-blocking), with safe fallbacks so
   the page never renders blank if web fonts are unavailable offline.
   ──────────────────────────────────────────────────────────────────── */
:root {
  --paper:    #f6f3ec;   /* page background — soft cream, NOT yellow */
  --surface:  #ffffff;   /* cards / nav */
  --ink:      #23211c;
  --ink2:     #6b6456;
  --ink3:     #9a927f;
  --line:     #e2dcce;
  --yellow:   #e8b923;   /* brand gold — accent only */
  --yellow-soft: #fdf4d6;
  --red:      #c0201d;   /* brand red — primary action */
  --red2:     #a31a17;
  --red-soft: #fbe9e7;
  --green-ok: #1d7a3a;   /* keep success green for stock states */

  /* Original app fonts (system stack) — no web-font dependency */
  --serif: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans:  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Full-viewport cream so there's never a white patch below short content.
   Set on html so it always fills the window regardless of content height. */
html:not([data-theme="dark"]) {
  background: var(--paper) !important;
  min-height: 100%;
}
html:not([data-theme="dark"]) body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  min-height: 100vh;
}
html:not([data-theme="dark"]) a { color: var(--red); }

/* ── leaf corners (kept) ── */
.tea-leaf { position: fixed; pointer-events: none; z-index: 0; color: var(--yellow); width: 280px; height: 280px; opacity: .10; }
.tea-leaf--tl { top: -70px; left: -70px; transform: rotate(-25deg); }
.tea-leaf--tr { top: -70px; right: -70px; transform: rotate(115deg); }
.tea-leaf--bl { bottom: -70px; left: -70px; transform: rotate(-115deg); }
.tea-leaf--br { bottom: -70px; right: -70px; transform: rotate(25deg); }
.tea-sprig { position: fixed; pointer-events: none; z-index: 0; color: var(--yellow); opacity: .07; width: 100px; height: 150px; }
.tea-sprig--1 { top: 35%; left: -10px; transform: rotate(-18deg); }
.tea-sprig--2 { bottom: 25%; right: -20px; transform: rotate(22deg); }
@media (max-width: 720px) { .tea-leaf { opacity: .06; width: 200px; height: 200px; } .tea-sprig { display: none; } }
.topnav, .container, main, .login-box { position: relative; z-index: 1; }
html[data-theme="dark"] .tea-leaf, html[data-theme="dark"] .tea-sprig { display: none; }

/* ── TOP NAV: white bar with a thin yellow top accent + red brand underline ── */
html:not([data-theme="dark"]) .topnav {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: 3px solid var(--yellow) !important;   /* sparing yellow accent */
}
html:not([data-theme="dark"]) .nav-links li a {
  color: var(--ink2) !important; font-weight: 500; border-radius: 7px;
}
html:not([data-theme="dark"]) .nav-links li a:hover {
  background: var(--yellow-soft) !important; color: var(--ink) !important;
}
/* +Blend stays a red action button (label/position unchanged) */
html:not([data-theme="dark"]) .nav-links li a.action-link {
  background: var(--red) !important; color: #fff !important;
}
html:not([data-theme="dark"]) .nav-links li a.action-link:hover { background: var(--red2) !important; }
html:not([data-theme="dark"]) .nav-links .datetime-display { color: var(--ink2) !important; font-size: 13px; }
html:not([data-theme="dark"]) .nav-links .user { color: var(--ink2) !important; }

.container { max-width: 1480px; }

/* ── page header: serif italic title, thin yellow rule under it ── */
html:not([data-theme="dark"]) .page-header {
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 8px;
}
html:not([data-theme="dark"]) .page-header h1 {
  font-weight: 700; color: var(--ink); font-size: 24px;
}

/* ── cards: white, soft border, serif headings ── */
html:not([data-theme="dark"]) .card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 12px; box-shadow: 0 1px 2px rgba(35,33,28,.03);
}
html:not([data-theme="dark"]) .card h2, html:not([data-theme="dark"]) .card h3 {
  font-weight: 600; color: var(--ink);
}

/* ── stat tiles: white, red numbers (accent), thin yellow left edge ── */
html:not([data-theme="dark"]) .stat {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-left: 3px solid var(--yellow) !important; border-radius: 10px;
}
html:not([data-theme="dark"]) .stat .label { color: var(--ink2); }
html:not([data-theme="dark"]) .stat .value { font-weight: 700; color: var(--red); }

/* ── buttons ── */
html:not([data-theme="dark"]) .btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px;
}
html:not([data-theme="dark"]) .btn:hover { background: var(--yellow-soft); }
html:not([data-theme="dark"]) .btn-primary { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
html:not([data-theme="dark"]) .btn-primary:hover { background: var(--red2) !important; }
html:not([data-theme="dark"]) .btn-success { background: var(--green-ok) !important; border-color: var(--green-ok) !important; color:#fff !important; }
html:not([data-theme="dark"]) .btn-danger { background: var(--red) !important; border-color: var(--red) !important; color:#fff !important; }
html:not([data-theme="dark"]) .btn-tea { background: var(--red) !important; border-color: var(--red) !important; color:#fff !important; }
html:not([data-theme="dark"]) .btn-tea:hover { background: var(--red2) !important; }

/* ── tables: yellow-tinted header strip (the "bar" accent) ── */
html:not([data-theme="dark"]) table.data th {
  font-size: 11px; font-weight: 600;
  color: var(--ink) !important; letter-spacing: .03em; text-transform: uppercase;
  background: var(--yellow-soft) !important; border-bottom: 2px solid var(--yellow);
}
html:not([data-theme="dark"]) table.data td { border-bottom: 1px solid #f0ece1; }
html:not([data-theme="dark"]) table.data tr:hover td { background: #fdfbf4 !important; }
html:not([data-theme="dark"]) table.data tfoot td { background: var(--yellow-soft) !important; border-top: 2px solid var(--yellow); font-weight: 600; }

/* recipe table header strip too */
html:not([data-theme="dark"]) .recipe-table th { background: var(--yellow-soft) !important; color: var(--ink) !important; }

/* ── flash ── */
html:not([data-theme="dark"]) .flash-success { background: #eaf5ec; color: var(--green-ok); border-color: #b6dfba; }
html:not([data-theme="dark"]) .flash-error { background: var(--red-soft); color: var(--red2); border-color: #f0b8b5; }
html:not([data-theme="dark"]) .flash-warning { background: var(--yellow-soft); color: #8a6d00; border-color: #f0d98a; }

/* ── login: white card, serif title, thin yellow top accent ── */
html:not([data-theme="dark"]) .login-box {
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--yellow);
  border-radius: 16px; box-shadow: 0 20px 50px -25px rgba(35,33,28,.25);
}
html:not([data-theme="dark"]) .login-box h1, html:not([data-theme="dark"]) .login-box h2 {
  font-weight: 700; color: var(--ink);
}

/* ════════ END BRAND THEME OVERLAY ════════ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1a2238;
  background: #f4f6fa;
}
a { color: #1659a3; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Top nav --- */
.topnav {
  background: white;
  border-bottom: 2px solid #e3e6ee;
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 56px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 40px; width: auto; display: block; }
.menu-toggle {
  display: none;
  background: transparent;
  color: #1a2238;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  margin-left: auto;
  padding: 4px 8px;
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 28px;
  padding: 0;
  flex: 1;
}
.nav-links li a {
  color: #45506b;
  padding: 8px 12px;
  border-radius: 6px;
  display: block;
  font-weight: 500;
}
.nav-links li a:hover { background: #f4f6fa; text-decoration: none; }
.nav-links li a.action-link {
  background: #c8221d;
  color: white;
}
.nav-links li a.action-link:hover { background: #a51b17; }
.nav-links .spacer { flex: 1; }
.nav-links .user { color: #687286; padding: 0 12px; font-size: 13px; font-weight: 500; }
.nav-links .datetime-display { color: #2a5c98; padding: 0 12px; font-size: 13px; font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .topnav { flex-wrap: wrap; }
  .menu-toggle { display: inline-block; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin: 8px 0 0 0;
    display: none;
    border-top: 1px solid #e3e6ee;
    padding: 8px 0 0;
  }
  .nav-links.open { display: flex; }
  .nav-links li a { padding: 12px 16px; border-radius: 0; }
}

/* --- Container --- */
.container { max-width: 1200px; margin: 0 auto; padding: 18px; }

/* --- Flash --- */
.flash {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  font-size: 13px;
}
.flash-success { background: #e3f4e6; color: #1f5f30; border: 1px solid #b6dfba; }
.flash-error   { background: #fbe6e6; color: #82211c; border: 1px solid #f0b8b5; }
.flash-warning { background: #fdf0d8; color: #7a4d00; border: 1px solid #f0d199; }

/* --- Cards --- */
.card {
  background: white;
  border-radius: 10px;
  border: 1px solid #e3e6ee;
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { margin-top: 0; margin-bottom: 12px; font-size: 17px; }

/* --- Page header --- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-header h1 { margin: 0; font-size: 22px; }

/* --- Stat grid --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.stat {
  background: white;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #e3e6ee;
}
.stat .label { font-size: 12px; color: #687286; text-transform: uppercase; letter-spacing: .03em; }
.stat .value { font-size: 26px; font-weight: 600; margin-top: 4px; color: #14233f; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  background: white;
  color: #1659a3;
  border: 1px solid #d0d6df;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
}
.btn:hover { background: #f4f7ff; text-decoration: none; }
.btn-primary { background: #1659a3; color: white; border-color: #1659a3; }
.btn-primary:hover { background: #11487f; color: white; }
.btn-success { background: #1d7a3a; color: white; border-color: #1d7a3a; }
.btn-success:hover { background: #156429; color: white; }
.btn-danger { background: #a32d2d; color: white; border-color: #a32d2d; }
.btn-danger:hover { background: #872323; color: white; }
.btn-tea { background: #c8221d; color: white; border-color: #c8221d; }
.btn-tea:hover { background: #a51b17; color: white; }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Forms --- */
label { display: block; font-size: 12px; color: #4f586e; margin-bottom: 4px; font-weight: 500; }
input[type=text], input[type=number], input[type=password], input[type=date],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d6df;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: white;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1659a3;
  box-shadow: 0 0 0 3px rgba(22,89,163,0.15);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f4f7fc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #1a2238;
  margin-bottom: 0;
}
.check-grid input { width: auto; margin: 0; }

/* --- Tables --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e3e6ee;
}
table.data th, table.data td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid #eef0f4;
  font-size: 13px;
}
table.data th {
  background: #f5f7fc;
  font-weight: 600;
  color: #3e475c;
}
table.data tr:hover td { background: #fafbfd; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }
table.data td.center, table.data th.center { text-align: center; font-variant-numeric: tabular-nums; }
table.data tfoot td { background: #f5f7fc; font-weight: 600; border-top: 2px solid #d0d6df; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  background: #eef2fa;
  color: #1659a3;
  border-radius: 10px;
  font-size: 11px;
  margin-right: 4px;
}
.badge-grade { background: #fdf0d8; color: #7a4d00; }
.badge-ok { background: #e3f4e6; color: #1f5f30; }
.badge-low { background: #fdf0d8; color: #7a4d00; }
.badge-out { background: #fbe6e6; color: #82211c; }
.badge-info { background: #eef2fa; color: #1659a3; }

/* --- Login --- */
.login-box {
  max-width: 360px;
  margin: 60px auto;
  background: white;
  padding: 28px;
  border-radius: 10px;
  border: 1px solid #e3e6ee;
}
.login-box .logo-wrap {
  text-align: center;
  margin-bottom: 16px;
}
.login-box .logo-wrap img { max-width: 200px; height: auto; }

/* --- Godown stacks --- */
.stacks-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.stack {
  background: white;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  overflow: hidden;
}
.stack-head {
  padding: 8px 12px;
  background: #f5f7fc;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e3e6ee;
  gap: 8px;
}
.stack-head form { display: inline; }
.stack-item {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f2f6;
}
.stack-item:last-child { border-bottom: 0; }
.stack-item.front { background: #eef9e8; }
.stack-item.blocked { background: #fdf0d8; }
.stack-item.back { background: #fbe6e6; }
.stack-pos-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 2px;
}
.stack-item.front .stack-pos-label { color: #1d7a3a; }
.stack-item.blocked .stack-pos-label { color: #7a4d00; }
.stack-item.back .stack-pos-label { color: #82211c; }
.stack-item-name { font-weight: 500; font-size: 13px; }
.stack-item-meta { font-size: 12px; color: #687286; margin-top: 2px; }
.stack-item-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.handle {
  cursor: grab;
  color: #aab1c2;
  user-select: none;
  font-size: 16px;
}

/* --- Detail rows --- */
dl.detail { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0; }
dl.detail dt { color: #687286; font-size: 13px; }
dl.detail dd { margin: 0; font-size: 13px; }

/* --- Filter bar --- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 14px;
}
.filter-bar > div { min-width: 120px; }
.filter-bar select, .filter-bar input { padding: 6px 10px; }

/* --- Recipe slot rows --- */
.recipe-table { width: 100%; border-collapse: collapse; background: white;
  border-radius: 8px; overflow: hidden; border: 1px solid #e3e6ee; }
.recipe-table th, .recipe-table td {
  padding: 8px 10px;
  font-size: 13px;
  border-bottom: 1px solid #eef0f4;
  text-align: left;
  vertical-align: top;
}
.recipe-table th {
  background: #f5f7fc;
  font-weight: 600;
}
.recipe-slot-row {}
.recipe-alt-row { background: #fafbfd; }
.recipe-alt-row td:first-child::before {
  content: "↳";
  margin-right: 6px;
  color: #aab1c2;
}

/* --- Blend plan rows --- */
.plan-row { padding: 12px; border: 1px solid #e3e6ee; border-radius: 8px;
  background: white; margin-bottom: 10px; }
.plan-row.ok { border-left: 4px solid #1d7a3a; }
.plan-row.short { border-left: 4px solid #a32d2d; background: #fef7f6; }
.plan-row.partial { border-left: 4px solid #c87f00; background: #fefaf2; }

.muted { color: #687286; }
.text-sm { font-size: 12px; }
.text-right { text-align: right; }
hr { border: 0; border-top: 1px solid #e3e6ee; margin: 16px 0; }


/* ============= DARK MODE (revamped) ============= */
/* Color palette:
   bg deep:     #0f1419
   bg surface:  #1a212b
   bg raised:   #232c38
   bg hover:    #2a3340
   border:      #2e3744
   text bright: #e5e9ef
   text dim:    #a6b0bf
   text muted:  #7a8493
   accent blue: #5b9eff
   accent ok:   #5dd49b
   accent warn: #ffc657
   accent err:  #ff7b75
*/

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body {
  background: #0f1419 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .container,
html[data-theme="dark"] main,
html[data-theme="dark"] main.container { background: transparent !important; }

/* Nav */
html[data-theme="dark"] nav.topnav {
  background: #1a212b !important;
  border-bottom: 1px solid #2e3744 !important;
}
html[data-theme="dark"] .nav-links a {
  color: #a6b0bf !important;
}
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active {
  color: #e5e9ef !important;
}
html[data-theme="dark"] .nav-links .user { color: #7a8493 !important; }
html[data-theme="dark"] .nav-links .datetime-display { color: #5b9eff !important; }
html[data-theme="dark"] .topnav .brand,
html[data-theme="dark"] .topnav .brand a { color: #e5e9ef !important; }
html[data-theme="dark"] .theme-toggle { color: #e5e9ef !important; }
html[data-theme="dark"] .theme-toggle:hover { background: #2a3340 !important; }

/* Cards & containers */
html[data-theme="dark"] .card {
  background: #1a212b !important;
  border: 1px solid #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .page-header { color: #e5e9ef !important; }

/* Headings */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] strong { color: #e5e9ef !important; }
html[data-theme="dark"] .muted, html[data-theme="dark"] .text-muted {
  color: #7a8493 !important;
}

/* Form controls */
html[data-theme="dark"] label { color: #a6b0bf !important; }
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="file"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #232c38 !important;
  color: #e5e9ef !important;
  border: 1px solid #2e3744 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7a8493 !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #5b9eff !important;
  outline: 1px solid #5b9eff !important;
}
html[data-theme="dark"] input[disabled] {
  background: #1a212b !important;
  color: #7a8493 !important;
}

/* Buttons */
html[data-theme="dark"] .btn {
  background: #2a3340 !important;
  color: #e5e9ef !important;
  border: 1px solid #2e3744 !important;
}
html[data-theme="dark"] .btn:hover { background: #364252 !important; }
html[data-theme="dark"] .btn-primary {
  background: #2563c9 !important;
  color: #ffffff !important;
  border-color: #2563c9 !important;
}
html[data-theme="dark"] .btn-primary:hover { background: #2c75e8 !important; }
html[data-theme="dark"] .btn-tea {
  background: #c4231e !important;
  color: #ffffff !important;
  border-color: #c4231e !important;
}
html[data-theme="dark"] .btn-tea:hover { background: #e02b25 !important; }
html[data-theme="dark"] .btn-danger {
  background: #8a2421 !important;
  color: #ffe5e3 !important;
  border-color: #a02c28 !important;
}
html[data-theme="dark"] .btn-danger:hover { background: #a02c28 !important; }
html[data-theme="dark"] .btn-success {
  background: #1d6f43 !important;
  color: #ffffff !important;
  border-color: #1d6f43 !important;
}
html[data-theme="dark"] .btn-success:hover { background: #248752 !important; }

/* Links */
html[data-theme="dark"] a { color: #5b9eff !important; }
html[data-theme="dark"] a:hover { color: #82b6ff !important; }
html[data-theme="dark"] a.btn { color: inherit !important; }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-tea,
html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .btn-success {
  color: white !important;
}

/* Tables */
html[data-theme="dark"] table.data,
html[data-theme="dark"] table.recipe-table { background: transparent !important; }
html[data-theme="dark"] table.data th,
html[data-theme="dark"] table.recipe-table th {
  background: #232c38 !important;
  color: #a6b0bf !important;
  border-bottom: 1px solid #2e3744 !important;
}
html[data-theme="dark"] table.data td,
html[data-theme="dark"] table.recipe-table td {
  border-bottom-color: #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] table.data tr:hover td { background: #232c38 !important; }
html[data-theme="dark"] table.data tfoot td {
  background: #232c38 !important;
  color: #e5e9ef !important;
  border-top: 2px solid #2e3744 !important;
}
html[data-theme="dark"] .recipe-slot-row td { background: #1a212b !important; }
html[data-theme="dark"] .recipe-alt-row td { background: #161c25 !important; }

/* Badges (avoid blue clashes) */
html[data-theme="dark"] .badge {
  background: #2a3340 !important;
  color: #e5e9ef !important;
  border: 1px solid #2e3744 !important;
}
html[data-theme="dark"] .badge-grade { background: #3a3000 !important; color: #ffc657 !important; }
html[data-theme="dark"] .badge-ok { background: #143d2a !important; color: #5dd49b !important; border-color: #1d6f43 !important; }
html[data-theme="dark"] .badge-low { background: #4a3000 !important; color: #ffc657 !important; border-color: #6e4a00 !important; }
html[data-theme="dark"] .badge-out { background: #5a1c1c !important; color: #ff9e9e !important; border-color: #80332f !important; }
html[data-theme="dark"] .badge-warn { background: #4a3000 !important; color: #ffc657 !important; border-color: #6e4a00 !important; }

/* Flash messages */
html[data-theme="dark"] .flash {
  background: #232c38 !important;
  color: #e5e9ef !important;
  border-color: #2e3744 !important;
}
html[data-theme="dark"] .flash-success {
  background: #143d2a !important;
  color: #d4f7e1 !important;
  border-color: #1d6f43 !important;
}
html[data-theme="dark"] .flash-error {
  background: #4a1818 !important;
  color: #ffd7d6 !important;
  border-color: #80332f !important;
}
html[data-theme="dark"] .flash-warning {
  background: #4a3000 !important;
  color: #fff0c8 !important;
  border-color: #6e4a00 !important;
}

/* Stats */
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-grid > div {
  background: #232c38 !important;
  border: 1px solid #2e3744 !important;
}
html[data-theme="dark"] .stat .label { color: #7a8493 !important; }
html[data-theme="dark"] .stat .value { color: #e5e9ef !important; }

/* Picker modal */
html[data-theme="dark"] .picker-box {
  background: #1a212b !important;
  border: 1px solid #2e3744 !important;
}
html[data-theme="dark"] .picker-head,
html[data-theme="dark"] .picker-search {
  border-bottom-color: #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .picker-row {
  border-bottom-color: #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .picker-row:hover { background: #232c38 !important; }
html[data-theme="dark"] .picker-row .name { color: #e5e9ef !important; }
html[data-theme="dark"] .picker-row .meta-tag { color: #a6b0bf !important; }
html[data-theme="dark"] #createNewBox { background: #1c2638 !important; }

/* Picked-item display in recipe editor */
html[data-theme="dark"] .picked-item {
  background: #232c38 !important;
  border-color: #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .picked-empty {
  background: #3a1818 !important;
  border-color: #80332f !important;
}

/* Recipe chips */
html[data-theme="dark"] .recipe-chip {
  background: #2a3340 !important;
  color: #a6b0bf !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .recipe-chip:hover { background: #364252 !important; }
html[data-theme="dark"] .recipe-chip.is-active {
  background: #143d2a !important;
  color: #5dd49b !important;
}
html[data-theme="dark"] .recipe-chip.active {
  background: #2563c9 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .recipe-chip.active.is-active {
  background: #1d6f43 !important;
  color: white !important;
}
html[data-theme="dark"] .recipe-chip .active-tag {
  background: rgba(255,255,255,0.18) !important;
  color: #e5e9ef !important;
}

/* Login splash & box */
html[data-theme="dark"] .login-box {
  background: #1a212b !important;
  border: 1px solid #2e3744 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] #splashScreen {
  background: linear-gradient(135deg, #0f1419 0%, #1a212b 50%, #232c38 100%) !important;
}
html[data-theme="dark"] .splash-title { color: #ff5b56 !important; }
html[data-theme="dark"] .splash-subtitle { color: #a6b0bf !important; }
html[data-theme="dark"] .splash-logo-wrap {
  background: #f8f8f8 !important;
}
html[data-theme="dark"] .brand-subtitle { color: #a6b0bf !important; }

/* Godown stacks */
html[data-theme="dark"] .stack {
  background: #1a212b !important;
  border-color: #2e3744 !important;
}
html[data-theme="dark"] .stack-head {
  background: #232c38 !important;
  border-bottom-color: #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .stack-item {
  background: #1a212b !important;
  border-bottom: 1px solid #232c38 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .stack-item.front { background: #143d2a !important; }
html[data-theme="dark"] .stack-item.blocked { background: #2a201a !important; }
html[data-theme="dark"] .stack-item-name { color: #e5e9ef !important; }
html[data-theme="dark"] .stack-item-meta { color: #a6b0bf !important; }
html[data-theme="dark"] .stack-pos-label { color: #7a8493 !important; }

/* Plan row in blend */
html[data-theme="dark"] .plan-row {
  background: #1a212b !important;
  border-color: #2e3744 !important;
  color: #e5e9ef !important;
}
html[data-theme="dark"] .plan-row.ok { border-left-color: #1d6f43 !important; }
html[data-theme="dark"] .plan-row.short {
  background: #2a201a !important;
  border-left-color: #ff7b75 !important;
}

/* Details > summary */
html[data-theme="dark"] details > summary { color: #e5e9ef !important; }
html[data-theme="dark"] details[open] > summary { color: #5b9eff !important; }

/* Misc */
html[data-theme="dark"] hr {
  border-color: #2e3744 !important;
  background: #2e3744 !important;
}
html[data-theme="dark"] code, html[data-theme="dark"] pre {
  background: #232c38 !important;
  color: #ffc657 !important;
  border-color: #2e3744 !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none; border: 1px solid transparent; padding: 4px 10px;
  border-radius: 16px; cursor: pointer; font-size: 14px;
  color: inherit;
}
.theme-toggle:hover { background: rgba(0,0,0,0.05); }

/* ===== list-toolbar.js print rules (v3.35) ===== */
@media print {
  /* A4 page setup. Default landscape — gives more horizontal room.
     Pages with few columns will still print fine; pages with many cols
     scale-fit via the lt-table sizing rules below. */
  @page {
    size: A4 landscape;
    margin: 8mm 10mm;
  }
  /* If a wrap explicitly opts into portrait, honor it */
  .lt-wrap[data-print-orient="portrait"] { page-break-before: auto; }
  .lt-wrap[data-print-orient="portrait"] ~ * { page-break-after: avoid; }

  .lt-toolbar,
  .lt-cols-panel,
  .lt-filters-panel,
  .lt-tb-row,
  .no-print,
  nav, .page-header .btn-row, .btn-row, .navbar,
  .flash-messages, .filter-bar {
    display: none !important;
  }
  .lt-wrap { border: 0; padding: 0; margin: 0; }
  body { background: white !important; color: black !important; font-size: 10px !important; }
  .card { border: 0 !important; box-shadow: none !important; padding: 4px 0 !important; background: white !important; }

  /* Make the table use the full page width and force columns to fit */
  table.lt-table, table.data {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-radius: 0 !important;       /* round corners clip the outer border in print */
    overflow: visible !important;
    border: 1px solid #444 !important; /* outer frame */
    font-size: 9px !important;
  }
  table.lt-table th, table.lt-table td,
  table.data th, table.data td {
    border: 1px solid #888 !important;
    padding: 2px 4px !important;
    word-break: break-word !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  /* Force every cell — including the visually first / last — to have a full
     box border, not just bottom. Some screen rules set border-bottom only;
     when border-collapse merges them, the outer left/right can vanish. */
  table.lt-table th:first-child, table.lt-table td:first-child,
  table.data th:first-child, table.data td:first-child {
    border-left: 1px solid #444 !important;
  }
  table.lt-table th:last-child, table.lt-table td:last-child,
  table.data th:last-child, table.data td:last-child {
    border-right: 1px solid #444 !important;
  }
  table.lt-table tr:last-child td, table.data tr:last-child td {
    border-bottom: 1px solid #444 !important;
  }
  table.lt-table thead tr th, table.data thead tr th {
    border-top: 1px solid #444 !important;
  }
  /* Hide buttons/inputs inside action cells in print (just the content, NOT
     the cell itself — otherwise column alignment breaks because <th> and
     <td> hide independently. The empty cells render harmlessly. */
  table.lt-table .btn, table.lt-table a.btn,
  table.lt-table input[type="checkbox"],
  table.lt-table input[type="number"],
  table.lt-table select {
    display: none !important;
  }
  table.lt-table thead, table.data thead { background: #eee !important; }
  /* Repeat the header row on every printed page */
  table.lt-table thead { display: table-header-group !important; }
  table.lt-table tbody tr { page-break-inside: avoid; }
  /* Hide the empty action column (no header label) on print */
  table.lt-table th[data-no-hide][data-no-sort],
  table.lt-table tbody td:last-child:has(> a.btn),
  table.lt-table tfoot td:last-child { display: none !important; }

  /* Hide bag-of-link buttons inside cells (Edit, View etc.) */
  .lt-table .btn, .lt-table a.btn { display: none !important; }
  /* But keep text content of cells visible */

  h1, h2 { color: black !important; margin: 0 0 6px; }
  h1 { font-size: 14px !important; }
  h2 { font-size: 12px !important; }

  /* Hide the page-header outer ROW that's not in the print, but keep the title */
  .page-header { border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; }

  /* Page count */
  @page :first { margin-top: 8mm; }
}

/* Toolbar table header indicators */
.lt-wrap .lt-table thead th { user-select: none; }
.lt-wrap .lt-table thead th:hover:not([data-no-sort]) { background: #f3eccc; }