/* ─────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────── */
:root {
  /* Surface */
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f6;

  /* Ink */
  --ink:    #101828;
  --ink-2:  #1d2939;
  --muted:  #667085;
  --muted-2:#98a2b3;

  /* Border */
  --line:   #eaecf0;
  --line-2: #d0d5dd;

  /* Sidebar */
  --nav:   #111827;
  --nav-2: #1f2937;

  /* Semantic */
  --green:       #16794f;
  --green-soft:  #e8f5ee;
  --blue:        #2563eb;
  --blue-soft:   #e8efff;
  --amber:       #b7791f;
  --amber-soft:  #fff4db;
  --red:         #c2413a;
  --red-soft:    #fff0ee;
  --teal:        #0f766e;
  --teal-soft:   #e3f5f3;
  --violet:      #6d4aff;
  --violet-soft: #f0ecff;
  --rose:        #c03a72;
  --rose-soft:   #fff0f6;

  /* Radius — restored a real scale for visual hierarchy */
  --r-xs: 5px;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 4px 12px rgba(16, 24, 40, .06);
  --shadow-md: 0 12px 28px rgba(16, 24, 40, .10);
  --focus: 0 0 0 3px rgba(37, 99, 235, .16);

  /* Card elevation (refined two-step depth for surfaces) */
  --shadow-card:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-card-hover: 0 6px 16px rgba(16, 24, 40, .10), 0 2px 4px rgba(16, 24, 40, .05);
  --ring: inset 0 0 0 1px rgba(16, 24, 40, .04);

  /* Transition — refined easing */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t:    .16s var(--ease);
  --t-lg: .26s var(--ease);

  /* Layers */
  --z-loader: 140;
  --z-modal: 100;
  --z-modal-top: 120;
  --z-toast: 160;
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

::selection { background: rgba(33, 81, 199, .14); }

::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: #c8c4ba; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #b0aca2; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Inter Variable", "Segoe UI Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fff 0, var(--bg) 260px),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

/* ─────────────────────────────────────────────
   BOOT SPLASH — cost ___word___ cl •  (brand mark)
   Theme-agnostic: the two props themes recolor
   (.app-loader background, .loader-progress span)
   are restated id-scoped below so the brand wins.
───────────────────────────────────────────── */
.app-loader {
  --loader-progress: 0%;
  --brand-ink: #f6f8fd;
  --brand-red: #ff2436;
  --brand-bg: radial-gradient(125% 125% at 28% 20%, #151d35 0%, #0b1124 47%, #070a16 100%);
  --brand-script: "Sacramento", "Snell Roundhand", "Segoe Script", cursive;
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(26px, 5vh, 46px);
  padding: 28px;
  overflow: hidden;
  color: var(--brand-ink);
}

/* id beats per-theme `.app-loader { background: var(--bg) }` */
#appLoader { background: var(--brand-bg); }

.boot-logo {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 7.4vw, 60px);
  line-height: 1;
  letter-spacing: -.012em;
  padding-right: .58em;            /* resting room for the dot, right of "cl" */
  color: var(--brand-ink);
  user-select: none;
}

.boot-line {
  display: inline-flex;
  align-items: flex-end;
  /* the dot reveals this wedge left→right on intro; the large
     y-insets leave the cascading words free to fall in/out unclipped */
  clip-path: inset(-300% 100% -300% 0);
  animation: boot-reveal 1.4s cubic-bezier(.6, .02, .16, 1) .12s forwards;
}

.boot-cost,
.boot-cl { display: inline-block; }

.boot-slot {
  position: relative;
  width: 4.7em;                    /* CONSTANT — the "____" length never changes */
  height: 1em;
  margin: 0 .14em;
}

.boot-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                       /* sits on the cost / cl baseline */
  height: max(2px, .045em);
  border-radius: 999px;
  background: var(--brand-ink);
}

.boot-words {
  position: absolute;
  inset: 0;
}

.boot-word {
  position: absolute;
  left: 50%;
  bottom: -.12em;                  /* resting baseline sits on the rule */
  white-space: nowrap;
  font-family: var(--brand-script);
  font-weight: 400;
  font-size: 1.58em;               /* cursive runs larger than cost / cl */
  line-height: 1;
  color: var(--brand-ink);
  opacity: 0;
  transform: translate(-50%, -1.8em);
  animation: boot-cascade 27.5s linear infinite;
}

.boot-word:nth-child(1)  { animation-delay: 1.7s;  }
.boot-word:nth-child(2)  { animation-delay: 4.2s;  }
.boot-word:nth-child(3)  { animation-delay: 6.7s;  }
.boot-word:nth-child(4)  { animation-delay: 9.2s;  }
.boot-word:nth-child(5)  { animation-delay: 11.7s; }
.boot-word:nth-child(6)  { animation-delay: 14.2s; }
.boot-word:nth-child(7)  { animation-delay: 16.7s; }
.boot-word:nth-child(8)  { animation-delay: 19.2s; }
.boot-word:nth-child(9)  { animation-delay: 21.7s; }
.boot-word:nth-child(10) { animation-delay: 24.2s; }
.boot-word:nth-child(11) { animation-delay: 26.7s; }

.boot-dot {
  position: absolute;
  left: 0;
  bottom: .1em;
  width: .19em;
  height: .19em;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 .55em rgba(255, 40, 60, .6), 0 0 .14em rgba(255, 40, 60, .9);
  transform: translateX(-50%);
  animation: boot-dot-sweep 1.4s cubic-bezier(.6, .02, .16, 1) .12s forwards;
}

.loader-detail {
  min-height: 20px;
  margin: 0;
  text-align: center;
  color: rgba(246, 248, 253, .6);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

.loader-progress-stage {
  position: relative;
  z-index: 2;                      /* sits in front so leaving words slide behind it */
  width: min(360px, calc(100vw - 56px));
  height: 6px;
  display: grid;
  align-items: center;
}

.loader-progress {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: #1a2236;             /* opaque so leaving words are hidden behind the bar */
}

.loader-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--loader-progress);
  min-width: 8px;
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(255,40,60,.45);
  transition: width .24s ease;
}

/* id beats per-theme `.loader-progress span { background: var(--accent) }` */
#appLoaderProgress span {
  background: linear-gradient(90deg, var(--brand-red), #ff6a4d);
}

.app-loader.indeterminate .loader-progress span {
  width: 46%;
  animation: loader-progress-run 1.1s ease-in-out infinite;
}

.app-loader.loading .loader-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: connection-shimmer 1.15s linear infinite;
}

.app-loader.is-hiding {
  pointer-events: none;
  animation: loader-fade-out .28s ease forwards;
}

@keyframes loader-progress-run {
  0% { left: -48%; width: 42%; }
  50% { left: 30%; width: 54%; }
  100% { left: 106%; width: 42%; }
}

/* Intro (plays once): the red dot appears, then sweeps right,
   revealing `cost ____ cl` in its wake. */
@keyframes boot-dot-sweep {
  0%   { left: 3%;   opacity: 0; transform: translateX(-50%) scale(.35); }
  9%   { left: 3%;   opacity: 1; transform: translateX(-50%) scale(1); }
  100% { left: 100%; opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes boot-reveal {
  0%, 9% { clip-path: inset(-300% 100% -300% 0); }
  100%   { clip-path: inset(-300% 0% -300% 0); }
}

/* Vertical reel — a continuous waterfall of words. Each word is on screen
   for 3 steps: it enters faded from ABOVE (coming), brightens to full as it
   crosses the line, then dims as it keeps falling BELOW, sliding behind the
   progress bar (going). 11 words × 2.5s = 27.5s loop; window ≈ 3/11 ≈ 27.3%,
   crossing the line at the midpoint (≈13.64%). */
@keyframes boot-cascade {
  0%           { opacity: 0;   transform: translate(-50%, -1.8em); }  /* far above, hidden */
  4%           { opacity: .34; }                                       /* coming — faded, above the line */
  13.64%       { opacity: 1;   transform: translate(-50%, 0); }        /* crossing the line — full */
  23%          { opacity: .34; }                                       /* going — faded, below / behind the bar */
  27.27%       { opacity: 0;   transform: translate(-50%, 1.8em); }    /* far below, hidden */
  27.28%, 100% { opacity: 0;   transform: translate(-50%, -1.8em); }  /* reset above, wait for next cycle */
}

@keyframes loader-fade-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 560px) {
  .app-loader {
    gap: 20px;
    padding: 20px;
  }

  .boot-logo {
    font-size: clamp(28px, 10.5vw, 46px);
  }

  .loader-progress-stage {
    width: min(300px, calc(100vw - 48px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-line,
  .boot-dot,
  .boot-word { animation: none; }
  .boot-line { clip-path: inset(-300% 0% -300% 0); }
  .boot-dot { left: 100%; opacity: 1; transform: translateX(-50%); }
  .boot-word:nth-child(1) { opacity: 1; transform: translate(-50%, 0); }
  .app-loader.indeterminate .loader-progress span { animation: none; }
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-panel {
  width: min(380px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(14, 17, 23, .08);
}

.login-panel h1 {
  margin-bottom: 4px;
  font-size: 28px;
}

.login-panel label,
.user-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.login-panel input,
.user-form input,
.user-form select {
  min-height: 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.login-panel input:focus,
.user-form input:focus,
.user-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33, 81, 199, .12);
}

.login-hint {
  margin: 0;
  color: var(--muted-2);
  font-size: 12px;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; letter-spacing: 0; }

h1 {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 760;
  color: var(--ink);
}

h2 {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
}

h3 {
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 680;
}

h4 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─────────────────────────────────────────────
   APP SHELL
───────────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
}

/* ─────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%),
    var(--nav);
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 8px 10px;
}

.brand-mark {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: none;
}

.brand-mark--viasanto {
  overflow: visible;
  padding: 0;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Rectangular logo → span the whole brand width; the title drops below it.
   (Square logos keep the compact icon-beside-title layout above.) */
.brand.is-wide-logo {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.brand.is-wide-logo .brand-mark {
  width: 100%;
  height: auto;
  max-height: 76px;
  display: block;
}
.brand.is-wide-logo .brand-mark img {
  width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  object-position: center;
}

/* Settings preview sits on a light card — give the swatch a dark tile so the
   logo (white by default, and the sidebar is dark) stays legible there. The
   tile hugs the logo width so wide logos preview at a useful size. */
.settings-logo-preview .brand-mark {
  width: auto;
  min-width: 56px;
  max-width: 220px;
  height: 56px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--nav);
}
.settings-logo-preview .brand-mark img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.brand strong {
  display: block;
  font-size: 14px;
  font-weight: 740;
  line-height: 1.1;
  color: #f9fafb;
  letter-spacing: 0;
}

.brand small {
  display: block;
  font-size: 11px;
  color: #98a2b3;
  font-weight: 520;
  margin-top: 1px;
}

.nav-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 6px;
  position: relative;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 4px 10px 0;
  margin-right: -4px;
  scrollbar-color: rgba(148, 163, 184, .34) transparent;
  scrollbar-width: thin;
}

.nav-list::-webkit-scrollbar {
  width: 6px;
}

.nav-list::-webkit-scrollbar-track {
  background: transparent;
}

.nav-list::-webkit-scrollbar-thumb {
  border: 2px solid var(--nav);
  border-radius: 999px;
  background: rgba(148, 163, 184, .42);
}

.nav-list::-webkit-scrollbar-thumb:hover {
  background: rgba(203, 213, 225, .58);
}

.nav-group {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nav-group-toggle {
  width: 100%;
  min-height: 31px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.035);
  color: #e5e8ef;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  text-align: left;
  font: inherit;
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--t),
    border-color var(--t),
    color var(--t),
    transform .18s cubic-bezier(.22, 1, .36, 1);
}

.nav-group-toggle:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}

.nav-group-toggle:active {
  transform: translateY(1px);
}

.nav-group-plus {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  transform: rotate(0deg) scale(1);
  transition:
    background var(--t),
    box-shadow var(--t),
    transform .24s cubic-bezier(.22, 1, .36, 1);
}

.nav-group-toggle:hover .nav-group-plus {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.nav-group-plus::before,
.nav-group-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition:
    transform .22s cubic-bezier(.22, 1, .36, 1),
    opacity .16s ease;
}

.nav-group-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.nav-group[data-collapsed="false"] .nav-group-plus {
  background: rgba(255,255,255,.13);
  transform: rotate(180deg) scale(1);
}

.nav-group[data-collapsed="false"] .nav-group-plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.nav-group-body {
  display: grid;
  gap: 3px;
  overflow: hidden;
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  transform-origin: top;
  transition:
    max-height .26s cubic-bezier(.22, 1, .36, 1),
    opacity .18s ease,
    transform .24s cubic-bezier(.22, 1, .36, 1);
  will-change: max-height, opacity, transform;
}

.nav-group[data-collapsed="true"] .nav-group-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
}

.nav-item {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: #a4adbc;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0;
  transition: background var(--t), color var(--t), border-color var(--t);
  user-select: none;
  touch-action: manipulation;
  cursor: grab;
}

.nav-item:active {
  cursor: grabbing;
}

.nav-item svg {
  opacity: .7;
  transition: opacity var(--t);
}

.nav-item:hover {
  background: rgba(255,255,255,.07);
  color: #f2f4f7;
}

.nav-item:hover svg { opacity: .9; }

.nav-item.active {
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--shadow-xs);
}

.nav-item.active svg {
  opacity: 1;
  color: #0c0e13;
}

.nav-list--reordering {
  cursor: grabbing;
}

.nav-list--reordering .nav-item:not(.nav-item--dragging):not([hidden]) {
  animation: sidebarWiggle .17s ease-in-out infinite alternate;
}

.nav-list--reordering .nav-item:nth-child(2n):not(.nav-item--dragging):not([hidden]) {
  animation-delay: -.08s;
}

.nav-item--dragging {
  position: relative;
  z-index: 3;
  cursor: grabbing;
  animation: none !important;
  transform: scale(1.025) rotate(0deg) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}

@keyframes sidebarWiggle {
  from {
    transform: rotate(-.7deg) translateY(0);
  }
  to {
    transform: rotate(.7deg) translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-list--reordering .nav-item {
    animation: none;
  }

  .nav-group-toggle,
  .nav-group-plus,
  .nav-group-plus::before,
  .nav-group-plus::after,
  .nav-group-body {
    transition: none;
  }

  .connection-state.loading .connection-progress span::after {
    animation: none;
  }

  .connection-state.indeterminate .connection-progress span {
    animation: none;
  }

  .connection-task-panel,
  .connection-task,
  .connection-task-pulse {
    animation: none !important;
    transition: none !important;
  }

  .import-progress.indeterminate span,
  .import-progress.indeterminate span::after {
    animation: none;
  }

  .app-loader,
  .app-loader *,
  .loader-progress span {
    animation: none !important;
    transition: none !important;
  }

  .daily-task-card,
  .daily-task-summary,
  .daily-task-chevron,
  .daily-task-body {
    transition: none !important;
  }
}

.sidebar-foot {
  flex: none;
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)),
    rgba(15, 23, 42, .72);
  color: #cbd5e1;
  display: grid;
  gap: 9px;
  font-size: 12px;
  font-weight: 550;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.user-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.connection-state {
  --connection-progress: 0%;
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.connection-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#connectionLabel {
  color: #e5e7eb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-percent {
  color: #e5e7eb;
  font-size: 10.5px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.connection-progress {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.18);
}

.connection-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--connection-progress);
  border-radius: inherit;
  background:
    linear-gradient(90deg, #4ade80, #22d3ee 58%, #60a5fa),
    #4ade80;
  box-shadow: 0 0 14px rgba(34,211,238,.35);
  transition: width .24s ease;
}

.sidebar-settings-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px 0 0 12px;
  background: rgba(255,255,255,.055);
  color: #e5e7eb;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.sidebar-settings-button:hover,
.sidebar-settings-button.active {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

.sidebar-settings-button svg {
  display: block;
  width: 17px;
  height: 17px;
}

.sidebar-settings-button span {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  line-height: 0;
}

.connection-state.indeterminate .connection-progress span {
  width: 44%;
  animation: connection-indeterminate 1.1s ease-in-out infinite;
}

.connection-state.loading .status-dot {
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(158,95,8,.2);
}

.connection-state.loading .connection-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: connection-shimmer 1.15s linear infinite;
}

.connection-task-panel {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: calc(100% + 8px);
  max-height: 190px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.98)),
    var(--nav-2);
  box-shadow: 0 -14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scaleY(.94);
  transform-origin: bottom;
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.22, 1, .36, 1);
}

.connection-state.loading .connection-task-panel,
.connection-state.has-tasks .connection-task-panel {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.connection-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.connection-task-head strong {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #06141b;
  background: #bae6fd;
  font-size: 10px;
}

.connection-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.connection-task {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
  color: #e5e7eb;
  animation: connection-task-rise .24s cubic-bezier(.22, 1, .36, 1) both;
}

.connection-task-pulse {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 0 rgba(56,189,248,.34);
  animation: connection-task-pulse 1.05s ease-out infinite;
}

.connection-task strong,
.connection-task small,
.connection-task em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-task strong {
  font-size: 11.5px;
  font-weight: 760;
}

.connection-task small {
  margin-top: 1px;
  color: #93a4b8;
  font-size: 10.5px;
  font-weight: 620;
}

.connection-task em {
  margin-top: 2px;
  color: #cbd5e1;
  font-size: 9.8px;
  font-style: normal;
  font-weight: 620;
  opacity: .78;
}

.connection-task time {
  align-self: start;
  padding: 2px 5px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 999px;
  color: #bae6fd;
  background: rgba(14,165,233,.09);
  font-size: 9.5px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.connection-task--done .connection-task-pulse {
  background: #4ade80;
  animation: none;
  box-shadow: 0 0 0 2px rgba(74,222,128,.18);
}

.connection-task--done small {
  color: #bbf7d0;
}

.connection-task--done time {
  color: #bbf7d0;
  background: rgba(34,197,94,.1);
}

@keyframes connection-shimmer {
  to { transform: translateX(100%); }
}

@keyframes connection-task-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes connection-task-pulse {
  to {
    box-shadow: 0 0 0 8px rgba(56,189,248,0);
  }
}

@keyframes connection-indeterminate {
  0% {
    left: -48%;
    width: 42%;
  }
  50% {
    left: 34%;
    width: 52%;
  }
  100% {
    left: 106%;
    width: 42%;
  }
}

.user-state {
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 9px;
}

.user-identity {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #f3f4f6;
}

.user-identity svg {
  width: 15px;
  height: 15px;
  color: #94a3b8;
}

.user-identity strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-foot-actions {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 34px;
}

.sidebar-foot-actions .table-action {
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(255,255,255,.12);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.05);
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 750;
}

.sidebar-foot-actions .table-action:hover:not(:disabled) {
  background: rgba(255,255,255,.11);
  color: #fff;
}

/* ── Sidebar brand · "cost ___ cl •" — the product wordmark (matches the boot
   loader + the cost.cl site). Sits below the footer box. Uses currentColor so
   it adapts per theme; light-sidebar themes re-ink it (.sidebar-brand color). */
.sidebar-brand {
  display: flex;
  justify-content: center;
  padding: 13px 12px 5px;
  color: rgba(255, 255, 255, .42);   /* default: light wordmark for the dark rail */
}
.sidebar-brand .brandmark {
  --bm-red: #ff2436;
  display: inline-flex;
  align-items: flex-end;
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
  user-select: none;
}
.sidebar-brand .bm-cost,
.sidebar-brand .bm-cl {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sidebar-brand .bm-slot { position: relative; flex: none; width: 3em; height: 1em; margin: 0 .16em; }
.sidebar-brand .bm-rule { position: absolute; left: 0; right: 0; bottom: .03em; height: max(1.5px, .045em); background: currentColor; border-radius: 99px; opacity: .9; }
.sidebar-brand .bm-words { position: absolute; inset: 0; }
.sidebar-brand .bm-word {
  position: absolute; left: 50%; bottom: -.24em; transform: translateX(-50%);
  font-family: "Sacramento", cursive; font-weight: 400; font-size: 1.5em; line-height: 1;
  white-space: nowrap; opacity: 0; animation: bm-rotate 15s linear infinite;
}
.sidebar-brand .bm-word:nth-child(1) { animation-delay: 0s;  }
.sidebar-brand .bm-word:nth-child(2) { animation-delay: 3s;  }
.sidebar-brand .bm-word:nth-child(3) { animation-delay: 6s;  }
.sidebar-brand .bm-word:nth-child(4) { animation-delay: 9s;  }
.sidebar-brand .bm-word:nth-child(5) { animation-delay: 12s; }
.sidebar-brand .bm-dot { flex: none; align-self: flex-end; width: .2em; height: .2em; border-radius: 50%; background: var(--bm-red); margin: 0 0 .12em .4em; }
@keyframes bm-rotate {
  0%   { opacity: 0; transform: translate(-50%, .14em); }
  2.5% { opacity: 1; transform: translate(-50%, 0); }
  18%  { opacity: 1; transform: translate(-50%, 0); }
  20%  { opacity: 0; transform: translate(-50%, -.14em); }
  100% { opacity: 0; transform: translate(-50%, -.14em); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-brand .bm-word { animation: none !important; opacity: 0; transform: translateX(-50%); }
  .sidebar-brand .bm-word:first-child { opacity: 1; }
}

.status-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.status-dot.ok  { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,.2); }
.status-dot.bad { background: var(--red); }

/* ─────────────────────────────────────────────
   WORKSPACE
───────────────────────────────────────────── */
.workspace {
  min-width: 0;
  padding: 24px 28px 48px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   PAGE HEADER (full-bleed, per-view)
───────────────────────────────────────────── */
.page-header {
  position: relative;
  isolation: isolate;
  margin: -24px -28px 24px;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}

.page-header::before,
.page-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.page-header::before {
  display: none;
}

.page-header::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.94));
}

.page-header[data-view="recipes"]::before {
  background:
    repeating-radial-gradient(circle, rgba(158,95,8,.16) 0 1px, transparent 1px 28px),
    conic-gradient(from 34deg, transparent 0 16%, rgba(37,111,74,.18) 16% 20%, transparent 20% 44%, rgba(33,81,199,.11) 44% 48%, transparent 48% 100%);
}

.page-header[data-view="reports"]::before,
.page-header[data-view="mom"]::before,
.page-header[data-view="prices"]::before {
  background:
    repeating-linear-gradient(90deg, rgba(33,81,199,.12) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(37,111,74,.09) 0 1px, transparent 1px 38px),
    radial-gradient(circle at 58% 42%, rgba(33,81,199,.12), transparent 42%);
}

.page-header[data-view="reconciliation"]::before {
  background:
    repeating-conic-gradient(from 0deg, rgba(33,81,199,.12) 0 8deg, transparent 8deg 22deg),
    repeating-radial-gradient(circle, rgba(37,111,74,.13) 0 1px, transparent 1px 36px);
}

.page-header[data-view="inventory"]::before,
.page-header[data-view="book"]::before,
.page-header[data-view="import"]::before {
  background:
    repeating-linear-gradient(132deg, rgba(14,17,23,.08) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 62% 36%, rgba(37,111,74,.14), transparent 44%);
}

.page-header[data-view="users"]::before {
  background:
    repeating-radial-gradient(circle, rgba(33,81,199,.12) 0 1px, transparent 1px 32px),
    conic-gradient(from 90deg, transparent 0 22%, rgba(14,17,23,.08) 22% 25%, transparent 25% 100%);
}

.page-header[data-view="calendar"],
.page-header[data-view="daily"] {
  display: none;
}

.ph-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px 20px;
}

.ph-title-group {
  min-width: 0;
  position: relative;
  padding-left: 0;
}

.ph-title-group::before {
  display: none;
}

.ph-title-group::after {
  display: none;
}

.ph-eyebrow {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}

.ph-title {
  font-size: 30px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
}

.top-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

.page-header .icon-button {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}

.ph-stats {
  position: relative;
  z-index: 1;
  display: flex;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  background: #fff;
}

.ph-stats:empty {
  display: none;
}

.ph-stat {
  flex: 1;
  min-width: 156px;
  padding: 13px 22px 15px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ph-stat:last-child {
  border-right: 0;
}

.ph-stat-value {
  display: block;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-stat--green .ph-stat-value { color: var(--green); }
.ph-stat--amber .ph-stat-value { color: var(--amber); }
.ph-stat--red   .ph-stat-value { color: var(--red); }

.ph-stat-label {
  display: block;
  font-size: 11.5px;
  font-weight: 560;
  color: var(--muted);
  line-height: 1.3;
}

.ph-stat-sub {
  display: block;
  font-size: 10.5px;
  color: var(--muted-2);
  line-height: 1.3;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.primary-action,
.secondary-action,
.icon-button,
.table-action {
  outline: none;
  border-radius: var(--r);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), color var(--t), transform var(--t);
  letter-spacing: 0;
}

.primary-action,
.secondary-action,
.icon-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 680;
}

.primary-action {
  padding: 0 16px;
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
  box-shadow: var(--shadow-xs);
}

.primary-action:hover:not(:disabled) {
  background: #12653f;
  border-color: #12653f;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.primary-action:focus-visible {
  box-shadow: var(--focus);
}

.secondary-action {
  padding: 0 14px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-xs);
}

.secondary-action:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: #b9c1cc;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.secondary-action.danger {
  color: var(--red);
  border-color: #e0b8b8;
}

.secondary-action.danger:hover:not(:disabled) {
  background: var(--red-soft);
  border-color: #d99393;
}

.recipe-delete-db-check {
  margin-right: auto;
  color: var(--red);
  font-weight: 650;
}

.secondary-action:focus-visible {
  box-shadow: var(--focus);
  border-color: var(--blue);
}

.icon-button {
  width: 38px;
  padding: 0;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-xs);
}

.icon-button:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: #b9c1cc;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.icon-button:focus-visible {
  box-shadow: var(--focus);
}

.table-action {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 660;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}

.table-action:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: #b9c1cc;
}

.table-action.danger {
  color: var(--red);
  border-color: #e0b8b8;
}

.table-action.danger:hover {
  background: var(--red-soft);
}

.wide { width: 100%; }

/* ─────────────────────────────────────────────
   FORM ELEMENTS
───────────────────────────────────────────── */
label {
  display: grid;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 660;
  color: var(--muted);
  letter-spacing: 0;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  background: #fff;
  font-weight: 450;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

input,
select { height: 40px; padding: 0 11px; }

textarea {
  min-height: 80px;
  padding: 10px 11px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus), var(--shadow-xs);
}

.mini-input { height: 33px; }

.table-inline-field {
  min-width: 108px;
  height: 32px;
  padding: 0 8px;
  font-size: 12.5px;
}

.table-inline-number {
  min-width: 74px;
  max-width: 86px;
  text-align: right;
}

.table-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.date-range-filter {
  min-width: 230px;
}

.date-range-trigger {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--shadow-xs);
  text-align: left;
}

.date-range-trigger:hover {
  background: var(--surface-2);
  border-color: #b9c1cc;
  box-shadow: var(--shadow-sm);
}

.date-range-trigger:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus);
}

.date-range-trigger-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.date-range-trigger-text small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1;
}

.date-range-trigger-text strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 740;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-range-popover {
  position: fixed;
  z-index: calc(var(--z-toast) - 5);
  width: min(560px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.date-range-quick-list {
  display: grid;
  gap: 5px;
  align-content: start;
  padding-right: 12px;
  border-right: 1px solid var(--line);
}

.date-range-quick-list button,
.date-range-day,
.date-range-month-choice,
.date-range-title-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  border-radius: var(--r-sm);
}

.date-range-quick-list button {
  min-height: 30px;
  padding: 0 9px;
  text-align: left;
  font-size: 12px;
  font-weight: 660;
}

.date-range-quick-list button:hover,
.date-range-day:hover,
.date-range-month-choice:hover,
.date-range-title-button:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.date-range-pane {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.date-range-popover-head {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
}

.date-range-title-button {
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 780;
  color: var(--ink);
}

.date-range-selected-summary {
  min-height: 28px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.date-range-weekdays,
.date-range-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.date-range-weekdays span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  text-align: center;
}

.date-range-day {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
}

.date-range-day.is-muted {
  color: var(--muted-2);
}

.date-range-day.is-in-range {
  background: var(--blue-soft);
  border-color: var(--blue-soft);
  color: var(--blue);
}

.date-range-day.is-edge {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.date-range-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0 4px;
}

.date-range-month-choice {
  min-height: 54px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 720;
  text-transform: capitalize;
}

.date-range-month-choice.is-current {
  border-color: var(--line-2);
  background: var(--surface-2);
}

.date-range-month-choice.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.date-range-popover-head--custom {
  grid-template-columns: 32px 1fr;
}

.date-range-custom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.date-range-custom-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.date-range-custom-grid input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.date-range-custom-grid input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33,81,199,.16);
}

.date-range-month-jump {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 680;
  color: var(--muted);
}

.date-range-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.consumption-section {
  min-height: calc(100vh - 150px);
}

.consumption-filter-strip {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr) minmax(150px, .6fr) auto minmax(0, 1fr);
  align-items: end;
}

.consumption-advanced-filters {
  min-width: 0;
}

.consumption-advanced-filters[open] {
  grid-column: 1 / -1;
}

.consumption-advanced-filters summary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 760;
  box-shadow: var(--shadow-xs);
  list-style: none;
}

.consumption-advanced-filters summary::-webkit-details-marker {
  display: none;
}

.consumption-advanced-filters summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 820;
}

.consumption-advanced-filters[open] summary::after {
  content: "−";
}

.consumption-advanced-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.consumption-sales-type {
  grid-column: 1 / -1;
}

.consumption-kpis {
  margin-top: 14px;
}

.consumption-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  margin-top: 16px;
  min-height: 560px;
}

.consumption-table-panel,
.consumption-side-panel {
  min-height: 560px;
}

.consumption-table {
  min-height: 480px;
  height: 100%;
}

.consumption-unmapped-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.consumption-unmapped-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.consumption-unmapped-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
}

.consumption-unmapped-row span,
.consumption-unmapped-row small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.consumption-unmapped-row b {
  grid-column: 2;
  grid-row: 1;
  font-size: 12.5px;
}

.menu-section {
  margin-top: 0;
  min-width: 0;
}

.menu-section > *,
.menu-dashboard > *,
.menu-table-section {
  min-width: 0;
}

.menu-section .report-board-head {
  flex-wrap: wrap;
}

.menu-tools {
  flex: 1 1 560px;
  min-width: 0;
  justify-content: flex-end;
}

.menu-filter-strip {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) minmax(170px, 220px) minmax(260px, 1fr);
}

.menu-exclusion-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.menu-exclusion-control label {
  min-width: 0;
}

.menu-exclusion-control .secondary-action {
  min-height: 34px;
  padding-inline: 11px;
}

.menu-exclusion-control .secondary-action[hidden] {
  display: none;
}

.menu-exclusion-chips {
  grid-column: 1 / -1;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.menu-exclusion-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 3px 7px;
  border: 1px solid #dac9a3;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.menu-exclusion-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-exclusion-chip b {
  font-size: 12px;
  line-height: 1;
}

.menu-exclusion-empty {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 650;
}

.menu-kpis {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.menu-dashboard {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  grid-template-areas:
    "chart side"
    "chart quadrants";
  gap: 8px;
}

.menu-chart-panel {
  grid-area: chart;
  min-height: 590px;
}

.menu-side-panel {
  grid-area: side;
  min-height: 300px;
}

.menu-quadrant-panel {
  grid-area: quadrants;
  min-height: 270px;
}

.menu-chart {
  min-height: 500px;
}

.menu-opportunity-list,
.menu-quadrant-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.menu-opportunity {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.menu-opportunity:last-child {
  border-bottom: 0;
}

.menu-opportunity div {
  min-width: 0;
}

.menu-opportunity span,
.menu-opportunity small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 690;
}

.menu-opportunity strong {
  display: block;
  margin: 2px 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.22;
}

.menu-recommendations-panel {
  margin-top: 8px;
}

.menu-recommendations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 10px;
}

.menu-recommendation-brief {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.menu-recommendation-brief strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.menu-recommendation-brief span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
}

.menu-recommendation-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
}

.menu-recommendation-card--star { border-left-color: var(--green); }
.menu-recommendation-card--volume { border-left-color: var(--amber); }
.menu-recommendation-card--puzzle { border-left-color: var(--blue); }
.menu-recommendation-card--drain { border-left-color: var(--muted); }

.menu-recommendation-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.menu-recommendation-main div {
  min-width: 0;
}

.menu-recommendation-main span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.menu-recommendation-main strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.18;
}

.menu-recommendation-main p,
.menu-recommendation-rationale {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 610;
  line-height: 1.35;
}

.menu-recommendation-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.menu-recommendation-metrics small {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
}

.menu-recommendation-metrics small:last-child {
  border-right: 0;
}

.menu-recommendation-metrics b {
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.menu-recommendation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.menu-recommendation-tags span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 730;
}

.menu-recommendation-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menu-recommendation-columns div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.menu-recommendation-columns b {
  color: var(--ink-2);
  font-size: 11px;
}

.menu-recommendation-columns small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.menu-quadrant-card {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.menu-quadrant-card:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
}

.menu-quadrant-card span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-quadrant-card strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 20px;
  line-height: 1;
}

.menu-quadrant-card small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-quadrant-card--star { border-left: 3px solid var(--green); }
.menu-quadrant-card--volume { border-left: 3px solid var(--amber); }
.menu-quadrant-card--puzzle { border-left: 3px solid var(--blue); }
.menu-quadrant-card--drain { border-left: 3px solid var(--muted); }
.menu-quadrant-card--uncosted { border-left: 3px solid var(--red); }
.menu-quadrant-card--excluded { border-left: 3px solid var(--amber); }

.menu-quadrant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 190px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 790;
  line-height: 1.1;
  white-space: nowrap;
}

.menu-quadrant-badge--star { background: var(--green-soft); color: var(--green); }
.menu-quadrant-badge--volume { background: var(--amber-soft); color: var(--amber); }
.menu-quadrant-badge--puzzle { background: var(--blue-soft); color: var(--blue); }
.menu-quadrant-badge--drain { background: var(--surface-3); color: var(--muted); }
.menu-quadrant-badge--uncosted { background: var(--red-soft); color: var(--red); }
.menu-quadrant-badge--excluded { background: var(--amber-soft); color: var(--amber); }

.menu-class-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 58px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 790;
  line-height: 1.1;
  white-space: nowrap;
}

.menu-class-pill--high {
  background: var(--green-soft);
  color: var(--green);
}

.menu-class-pill--low {
  background: var(--amber-soft);
  color: var(--amber);
}

.menu-class-pill--uncosted {
  background: var(--red-soft);
  color: var(--red);
}

.menu-class-pill--excluded {
  background: var(--amber-soft);
  color: var(--amber);
}

.menu-row--excluded td {
  color: var(--muted);
  background: rgba(158, 95, 8, .045);
}

.menu-row--excluded:hover td {
  background: rgba(158, 95, 8, .08);
}

.menu-excluded-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 10px;
  font-weight: 780;
  vertical-align: middle;
  white-space: nowrap;
}

.menu-wrap {
  max-height: 520px;
}

.menu-table {
  min-width: 1900px;
  table-layout: fixed;
}

.menu-table th,
.menu-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-table .numeric {
  white-space: nowrap;
}

.menu-table .item-cell {
  min-width: 230px;
}

.resizable-column-head {
  padding-right: 18px;
  user-select: none;
}

.column-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  z-index: 4;
}

.column-resize-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 4px;
  bottom: 8px;
  width: 1px;
  background: transparent;
}

.resizable-column-head:hover .column-resize-handle::after,
.table-column-resizing .column-resize-handle::after {
  background: var(--line-2);
}

.table-column-resizing,
.table-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.tone-good  { color: var(--green); font-weight: 700; }
.tone-bad   { color: var(--red); font-weight: 700; }
.tone-warn  { color: var(--amber); font-weight: 700; }
.tone-muted { color: var(--muted); }

.price-variation {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}

.price-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 780;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.price-link:hover {
  color: var(--ink);
}

.price-link.tone-good { color: var(--green); }
.price-link.tone-bad { color: var(--red); }
.price-link.tone-warn { color: var(--amber); }
.price-link.tone-muted { color: var(--muted); }

.price-savings {
  font-variant-numeric: tabular-nums;
}

.book-row-focus {
  background: var(--blue-soft) !important;
  outline: 2px solid rgba(33,81,199,.28);
  outline-offset: -2px;
}

.benchmark-detail-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 14px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.benchmark-detail-context span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.benchmark-detail-key {
  display: inline-block;
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
}

.benchmark-detail-key--price { background: var(--blue); }
.benchmark-detail-key--best { background: var(--green); }

.benchmark-detail-key--saving {
  width: 10px;
  height: 10px;
  background: var(--red);
}

.report-chart.benchmark-detail-chart {
  height: clamp(500px, 56vh, 560px);
  min-height: 500px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.benchmark-detail-markers {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.benchmark-marker-row {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(180px, 1.2fr) repeat(3, minmax(100px, .6fr));
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.benchmark-marker-row strong,
.benchmark-marker-row b {
  color: var(--ink);
}

.benchmark-marker-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.reconciliation-note {
  margin: 8px 0 0;
  max-width: 760px;
}

.reco-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .01em;
  white-space: nowrap;
}

.reco-badge.ok {
  background: var(--green-soft);
  color: var(--green);
}

.reco-badge.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.reco-badge.bad {
  background: var(--red-soft);
  color: var(--red);
}

.reco-badge.info {
  background: var(--blue-soft);
  color: var(--blue);
}

.reco-badge.muted {
  background: #eeeceb;
  color: var(--muted);
}

.reconciliation-layout {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.reconciliation-calendar-panel {
  width: 100%;
}

.reconciliation-cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.reconciliation-nav-arrow {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.reconciliation-today-btn {
  margin-left: auto;
  font-size: 12px;
}

.reconciliation-month-pill {
  flex: 1;
  justify-content: center;
  text-transform: capitalize;
  pointer-events: none;
}

.reconciliation-shift-rule-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .02em;
  color: var(--muted);
}

.reconciliation-calendar-head {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.reconciliation-calendar-head span {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.reconciliation-calendar-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.reconciliation-day,
.reconciliation-day--blank {
  min-height: 116px;
  border-radius: var(--r);
}

.reconciliation-day {
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
  text-align: left;
  display: grid;
  gap: 6px;
  align-content: start;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.reconciliation-day:hover {
  border-color: #b8c4d8;
  box-shadow: 0 8px 20px rgba(12, 19, 36, .07);
  transform: translateY(-1px);
}

.reconciliation-day.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(18, 24, 37, .12), 0 4px 12px rgba(0,0,0,.08);
}

.reconciliation-day.is-today {
  background: linear-gradient(160deg, #fffbf0 0%, #fff 100%);
  border-color: #e8c84a;
}

.reconciliation-day.is-today.is-selected {
  border-color: var(--ink);
}

.reconciliation-day--blank {
  background: transparent;
}

.reconciliation-day-number {
  font-size: 20px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: 0;
}

.reconciliation-day small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 680;
}

.reconciliation-day-shifts {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.reconciliation-day-shift {
  display: block;
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #eeeceb;
  color: var(--muted);
}

.reconciliation-day-shift.ok {
  background: var(--green-soft);
  color: var(--green);
}

.reconciliation-day-shift.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.reconciliation-day-shift.bad {
  background: var(--red-soft);
  color: var(--red);
}

.reconciliation-day-shift.info {
  background: var(--blue-soft);
  color: var(--blue);
}

.reconciliation-day-shift.muted {
  background: #eeeceb;
  color: var(--muted);
}

.reconciliation-calendar-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
}

.reconciliation-detail-head {
  align-items: flex-start;
}

.reconciliation-shift-picker {
  align-self: center;
  height: 42px;
}

.reconciliation-shift-picker button {
  height: 36px;
  font-size: 13.5px;
  font-weight: 680;
  padding: 0 20px;
  letter-spacing: .01em;
}

.reconciliation-empty-state {
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, #f8f5ef 0%, #fbfaf8 100%);
  padding: 24px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 560;
}

.reconciliation-empty-state p {
  max-width: 420px;
  margin: 0;
}

.reconciliation-shift-content {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.reconciliation-shift-status {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(135deg, #fffdf8 0%, #f6f8fc 100%);
}

.reconciliation-shift-status strong {
  display: block;
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: 0;
}

.reconciliation-shift-status p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.reconciliation-shift-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reconciliation-shift-metrics article {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  background: rgba(255,255,255,.86);
}

.reconciliation-shift-metrics small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.reconciliation-shift-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 820;
}

.reconciliation-entry-panel {
  padding: 18px;
  margin-top: 12px;
}

.reconciliation-manual-table {
  min-width: 100%;
}

.reconciliation-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}

.reconciliation-subhead h3 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
}

.reconciliation-cash-subhead {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.reconciliation-add-movement {
  width: 36px;
  flex: 0 0 36px;
  font-size: 22px;
  line-height: 1;
}

.reconciliation-cash-movement-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reconciliation-movement-table {
  min-width: 100%;
}

.reconciliation-movement-table .table-action {
  min-width: 0;
  white-space: nowrap;
}

.reconciliation-comment-field {
  min-width: 220px;
}

.reconciliation-amount-input {
  min-width: 108px;
  max-width: 124px;
  height: 44px;
  padding: 0 10px;
  font-size: 16px;
}

.reconciliation-amount-input::placeholder {
  color: var(--muted);
  opacity: .65;
}

.reconciliation-amount-input::-webkit-outer-spin-button,
.reconciliation-amount-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.reconciliation-keypad {
  position: fixed;
  z-index: calc(var(--z-toast) - 4);
  width: 316px;
  max-width: calc(100vw - 20px);
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.reconciliation-keypad-display {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 21px;
  font-weight: 760;
  text-align: right;
}

.reconciliation-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reconciliation-keypad button {
  min-height: 52px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
  cursor: pointer;
  touch-action: manipulation;
}

.reconciliation-keypad button:hover:not(:disabled),
.reconciliation-keypad button:focus-visible {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.reconciliation-keypad button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.reconciliation-keypad .is-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.reconciliation-form-note {
  margin: 0;
}

.search-box {
  height: 40px;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 0 12px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t), box-shadow var(--t);
}

.search-box:focus-within {
  border-color: var(--blue);
  box-shadow: var(--focus);
}

.search-box input {
  border: 0;
  padding: 0;
  height: auto;
  background: transparent;
  box-shadow: none;
}

.search-box input:focus { box-shadow: none; border: 0; }

.compact-search { min-width: 220px; }

.upload-zone {
  position: relative;
  display: grid;
  gap: 12px;
}

.upload-zone input[type="file"] {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(50%);
}

.upload-zone > label {
  min-height: 148px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-2);
  padding: 20px;
  box-shadow: none;
  font-weight: 550;
  transition: background var(--t), border-color var(--t);
}

.upload-zone > label:hover {
  background: #fff;
  border-color: #a0a8b8;
}

.upload-zone > label svg {
  width: 30px;
  height: 30px;
  color: var(--blue);
  margin-bottom: 4px;
}

.upload-zone > label small {
  display: block;
  color: var(--muted);
  font-weight: 490;
  margin-top: 3px;
}

/* ─────────────────────────────────────────────
   LAYOUT CONTAINERS
───────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 12px;
  margin-bottom: 12px;
}

.reconciliation-grid { align-items: start; }
.wide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-table-section { margin-top: 12px; }

.tool-panel,
.table-section,
.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}

.tool-panel,
.table-section {
  padding: 18px;
}

.table-section { margin-top: 12px; }

#view-import > .tool-panel { margin-bottom: 12px; }

.import-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.45fr) repeat(2, minmax(220px, .92fr));
  grid-template-areas:
    "purchases sales items"
    "purchases recipes recipes";
  gap: 14px;
  align-items: start;
}

.import-column {
  --import-accent: var(--green);
  --import-accent-rgb: 37, 111, 74;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.import-column--purchases { grid-area: purchases; --import-accent: var(--green); --import-accent-rgb: 37, 111, 74; }
.import-column--sales     { grid-area: sales;     --import-accent: var(--blue);  --import-accent-rgb: 33, 81, 199; }
.import-column--items     { grid-area: items;     --import-accent: var(--amber); --import-accent-rgb: 158, 95, 8; }
.import-column--recipes   { grid-area: recipes;   --import-accent: var(--teal);  --import-accent-rgb: 15, 110, 113; }

.import-column-head {
  position: relative;
  isolation: isolate;
  min-height: 64px;
  overflow: hidden;
  padding: 12px 14px 13px;
  border-left: 3px solid var(--import-accent);
  border-bottom: 1px solid rgba(var(--import-accent-rgb), .2);
  background:
    linear-gradient(90deg, rgba(var(--import-accent-rgb), .11), rgba(var(--import-accent-rgb), .035) 52%, transparent 78%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.26));
}

.import-column-head::before,
.import-column-head::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.import-column-head::before {
  inset: 0 0 0 auto;
  width: 46%;
  background:
    linear-gradient(132deg, transparent 0 43%, rgba(var(--import-accent-rgb), .17) 43% 43.6%, transparent 43.6% 100%),
    linear-gradient(132deg, transparent 0 65%, rgba(14,17,23,.05) 65% 65.35%, transparent 65.35% 100%);
  opacity: .9;
}

.import-column-head::after {
  inset: 0;
  background:
    repeating-linear-gradient(132deg, rgba(var(--import-accent-rgb), .08) 0 1px, transparent 1px 24px),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 64%);
  opacity: .75;
}

.import-column-head > * {
  position: relative;
  z-index: 1;
}

.import-column-head h2 {
  font-size: 20px;
  line-height: 1.1;
}

.import-column .tool-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 100%;
  padding: 16px;
  border-color: rgba(var(--import-accent-rgb), .18);
  box-shadow: 0 1px 2px rgba(14,17,23,.04);
}

.import-column .tool-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 190px;
  height: 112px;
  background:
    repeating-linear-gradient(0deg, rgba(var(--import-accent-rgb), .1) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(90deg, rgba(var(--import-accent-rgb), .07) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, rgba(var(--import-accent-rgb), .12), transparent 62%);
  opacity: .55;
  pointer-events: none;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.import-column .tool-panel > * {
  position: relative;
  z-index: 1;
}

#view-import .tool-panel .section-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

#view-import .form-grid,
#view-import .catalog-actions,
#view-import .ocr-hints {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#view-import .catalog-actions {
  margin-top: 0;
}

#view-import .button-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-items: stretch;
}

#view-import .secondary-action,
#view-import .primary-action {
  width: 100%;
}

#view-import .inline-status {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: center;
  overflow-wrap: anywhere;
}

.import-progress {
  --import-progress: 0%;
  grid-column: 1 / -1;
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--import-accent-rgb), .11);
  box-shadow: inset 0 1px 1px rgba(14,17,23,.08);
}

.import-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--import-progress);
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--import-accent-rgb), .92), rgba(33,81,199,.84)),
    var(--import-accent);
  box-shadow: 0 0 14px rgba(var(--import-accent-rgb), .22);
  transition: width .24s ease;
}

.import-progress.indeterminate span {
  width: 44%;
  animation: import-indeterminate 1.05s ease-in-out infinite;
}

.import-progress.indeterminate span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  transform: translateX(-100%);
  animation: connection-shimmer 1s linear infinite;
}

.import-progress.ok span {
  background: linear-gradient(90deg, var(--green), #4ade80);
}

.import-progress.bad {
  background: var(--red-soft);
}

.import-progress.bad span {
  background: linear-gradient(90deg, var(--red), #ef7777);
}

@keyframes import-indeterminate {
  0% {
    left: -48%;
    width: 42%;
  }
  50% {
    left: 34%;
    width: 52%;
  }
  100% {
    left: 106%;
    width: 42%;
  }
}

#view-import .catalog-actions input[type="file"] {
  min-height: 38px;
  padding: 6px;
  background: rgba(255,255,255,.86);
}

#view-import input[type="file"]::file-selector-button {
  min-height: 26px;
  margin-right: 8px;
  padding: 0 9px;
  border: 1px solid rgba(var(--import-accent-rgb), .26);
  border-radius: var(--r-xs);
  background: rgba(var(--import-accent-rgb), .08);
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

#view-import .upload-zone > label {
  min-height: 112px;
  border-radius: var(--r);
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(var(--import-accent-rgb), .06), transparent 70%),
    var(--surface-2);
  border-color: rgba(var(--import-accent-rgb), .32);
}

#view-import .upload-zone > label svg {
  color: var(--import-accent);
}

#view-import .manual-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 12px;
}

#view-import .ocr-zone {
  padding-top: 0;
  border-top: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

#view-import .recipe-upload-note {
  margin: 4px 0 0;
}

.import-column--recipes .catalog-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.import-column--recipes .catalog-actions button,
.import-column--recipes .catalog-actions .inline-status {
  grid-column: 1 / -1;
}

#view-import .debug-box {
  max-height: 210px;
}

.tool-panel.compact { min-height: 160px; }

/* ─────────────────────────────────────────────
   TOOLBAR GROUPS
───────────────────────────────────────────── */
.book-head,
.sales-head,
.recipe-head,
.reports-head,
.benchmark-head { align-items: flex-start; }

.book-tools,
.sales-tools,
.report-tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.benchmark-tools {
  width: min(100%, 1280px);
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(190px, .9fr) minmax(160px, .72fr) minmax(150px, .65fr) minmax(170px, .72fr) auto;
  align-items: start;
  justify-content: end;
  gap: 10px;
}

.book-tools label,
.sales-tools label,
.report-tools label { width: 136px; }

.sales-tools .search-box { min-width: 200px; }
.benchmark-field {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 14px 46px minmax(30px, auto);
  align-items: start;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.benchmark-field--search { min-width: 230px; }
.benchmark-field--period { min-width: 190px; }

.benchmark-field .search-box,
.benchmark-field .date-range-filter,
.benchmark-field select {
  width: 100%;
  min-width: 0;
}

.benchmark-field .search-box,
.benchmark-field .date-range-trigger,
.benchmark-field select {
  min-height: 46px;
}

.benchmark-field-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.benchmark-field small {
  display: block;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 560;
  line-height: 1.2;
  text-transform: none;
}

.benchmark-refresh {
  align-self: start;
  margin-top: 19px;
  min-height: 46px;
  white-space: nowrap;
}

.receivables-section {
  padding: 0;
  overflow: hidden;
}

.receivables-head {
  align-items: flex-start;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.96), var(--surface));
}

.receivables-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: 0;
}

.receivables-tools {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(218px, auto) auto auto auto;
  justify-content: stretch;
  align-items: end;
  gap: 8px;
}

.receivables-tools .segmented-control {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
}

.receivables-tools .segmented-control button {
  flex: 1 1 0;
}

.receivables-tools .search-box {
  min-width: 0;
  width: 100%;
}

.receivables-tools .date-range-filter {
  min-width: 218px;
}

.receivables-tools .secondary-action {
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   SEGMENTED CONTROL
───────────────────────────────────────────── */
.segmented-control {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: inset 0 1px 1px rgba(16, 24, 40, .03);
}

.segmented-control button {
  height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 630;
  white-space: nowrap;
  letter-spacing: 0;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}

.segmented-control button:hover:not(.active) {
  color: var(--ink);
  background: #fff;
}

.segmented-control button.active {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 680;
  box-shadow: var(--shadow-xs);
}

/* ─────────────────────────────────────────────
   KPI SUMMARY CARDS
───────────────────────────────────────────── */
.book-summary,
.sales-summary,
.report-kpis {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
}

.book-summary article,
.sales-summary article,
.report-kpis article {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.report-kpis article.attention { border-color: #e8c98a; background: #fffcf5; }

.book-summary small,
.sales-summary small,
.report-kpis small,
.report-kpis span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: .01em;
}

.book-summary strong,
.sales-summary strong,
.report-kpis strong {
  display: block;
  margin-top: 5px;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.supplier-summary-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 13px;
  display: grid;
  gap: 12px;
}

.supplier-summary-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.supplier-summary-head h3 {
  font-size: 16px;
  letter-spacing: 0;
}

.supplier-summary-head .search-box {
  min-width: 240px;
}

.supplier-summary-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.supplier-summary-list {
  min-width: 0;
  max-height: 384px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 7px;
  padding-right: 3px;
}

.supplier-summary-row {
  width: 100%;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  text-align: left;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

.supplier-summary-row:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}

.supplier-summary-row.active {
  border-color: rgba(33, 81, 199, .55);
  background: #f6f8ff;
  box-shadow: inset 3px 0 0 var(--blue);
}

.supplier-summary-rank {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 760;
}

.supplier-summary-main,
.supplier-summary-metric {
  min-width: 0;
  display: block;
}

.supplier-summary-main strong,
.supplier-summary-main small,
.supplier-summary-metric strong,
.supplier-summary-metric small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-summary-main strong {
  font-size: 13px;
  font-weight: 780;
}

.supplier-summary-main small,
.supplier-summary-metric small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 540;
}

.supplier-summary-bar {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.supplier-summary-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.supplier-summary-metric {
  text-align: right;
}

.supplier-summary-metric strong {
  font-size: 13px;
  font-weight: 820;
}

.receivables-rule-panel {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(132px, 156px) minmax(0, 1fr);
  gap: 9px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  padding: 12px 18px;
}

.receivables-rule-panel h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.receivables-rule-form {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(220px, 360px) auto;
  justify-content: start;
  gap: 8px;
  align-items: center;
}

.receivables-rule-form select,
.receivables-rule-form input {
  min-width: 0;
  height: 38px;
}

.receivables-rule-list {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ar-rule-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
}

.ar-rule-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 720;
}

.ar-rule-chip:hover {
  border-color: var(--line-2);
  background: #fff;
}

.ar-rule-chip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.ar-rule-chip strong {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-rule-chip b {
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.receivables-dashboard {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 12px;
  align-items: stretch;
}

.receivables-aging,
.receivables-customers {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 13px;
  box-shadow: var(--shadow-xs);
}

.receivables-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.receivables-panel-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.ar-aging-bars,
.ar-customer-list {
  display: grid;
  gap: 8px;
}

.ar-aging-row {
  display: grid;
  grid-template-columns: 72px minmax(90px, 1fr) 124px;
  gap: 10px;
  align-items: center;
  min-height: 30px;
}

.ar-aging-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 690;
}

.ar-aging-row i,
.ar-customer-row i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.ar-aging-row i b,
.ar-customer-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.ar-aging-row--green i b { background: var(--green); }
.ar-aging-row--blue i b { background: var(--blue); }
.ar-aging-row--amber i b { background: var(--amber); }
.ar-aging-row--orange i b { background: #c0642a; }
.ar-aging-row--red i b { background: var(--red); }

.ar-aging-row strong {
  text-align: right;
  font-size: 12.5px;
}

.ar-customer-list {
  max-height: 252px;
  overflow: auto;
  padding-right: 3px;
}

.ar-customer-row {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  text-align: left;
}

.ar-customer-row:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}

.ar-customer-row span,
.ar-customer-row strong,
.ar-customer-row small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-customer-row strong {
  font-size: 12.5px;
  font-weight: 780;
}

.ar-customer-row small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 540;
}

.ar-customer-row i {
  width: 100%;
  max-width: 100%;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.ar-customer-row b {
  font-size: 12.5px;
  white-space: nowrap;
}

.supplier-summary-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.supplier-detail-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.supplier-detail-head > div {
  min-width: 0;
}

.supplier-detail-head small,
.supplier-detail-head strong,
.supplier-detail-head span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-detail-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.supplier-detail-head strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 820;
}

.supplier-detail-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

.supplier-detail-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.supplier-detail-kpis article {
  min-width: 0;
}

.supplier-detail-kpis small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .01em;
}

.supplier-detail-kpis strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-detail-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1fr);
  gap: 12px;
}

.supplier-detail-block {
  min-width: 0;
}

.supplier-detail-block h4 {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.supplier-class-list,
.supplier-item-list {
  display: grid;
  gap: 7px;
}

.supplier-class-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.supplier-class-row span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-class-row i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.supplier-class-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.supplier-class-row.ops b      { background: var(--green); }
.supplier-class-row.services b { background: var(--teal); }
.supplier-class-row.banking b  { background: var(--amber); }
.supplier-class-row.other b    { background: var(--muted-2); }

.supplier-class-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.supplier-item-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.supplier-item-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.supplier-item-row span,
.supplier-item-row strong,
.supplier-item-row small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-item-row strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 760;
}

.supplier-item-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.supplier-item-row b {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   INTEGRAL OVERVIEW
───────────────────────────────────────────── */
.overview-dashboard {
  display: grid;
  gap: 14px;
}

.overview-command-bar {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(14, 17, 23, .04);
}

.overview-command-bar > div:first-child {
  min-width: 0;
}

.overview-command-bar h2 {
  font-size: 20px;
  letter-spacing: 0;
}

.overview-command-bar span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.overview-tools {
  flex: 0 0 auto;
}

.overview-tools .date-range-filter {
  min-width: 260px;
}

.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}

.overview-kpi {
  min-width: 0;
  min-height: 126px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(14, 17, 23, .045);
}

.overview-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--blue);
}

.overview-kpi--green::before { background: var(--green); }
.overview-kpi--teal::before  { background: var(--teal); }
.overview-kpi--amber::before { background: var(--amber); }
.overview-kpi--red::before   { background: var(--red); }

.overview-kpi > div,
.overview-kpi .overview-spark {
  position: relative;
  z-index: 1;
}

.overview-kpi > div {
  min-width: 0;
}

.overview-kpi small {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
}

.overview-kpi strong {
  display: block;
  white-space: nowrap;
  color: var(--ink);
  font-size: 25px;
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: 0;
}

.overview-kpi span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 570;
  line-height: 1.25;
}

.overview-spark {
  flex: 0 0 76px;
  width: 76px;
  height: 42px;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
  gap: 12px;
  align-items: stretch;
}

.overview-panel {
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(14, 17, 23, .04);
}

.overview-panel--wide {
  min-height: 392px;
}

.overview-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.overview-panel-head > div {
  min-width: 0;
}

.overview-panel-head h2 {
  font-size: 17px;
  letter-spacing: 0;
}

.overview-panel-head .eyebrow {
  margin-bottom: 3px;
}

.overview-chart {
  min-width: 0;
  flex: 1;
  min-height: 268px;
}

.overview-chart--main { height: 330px; }
.overview-chart--donut { height: 268px; }

.overview-money-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.overview-money-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 8px 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.overview-money-card:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
  transform: translateY(-1px);
}

.overview-money-card > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 820;
}

.overview-money-card--green > span { background: var(--green-soft); color: var(--green); }
.overview-money-card--amber > span { background: var(--amber-soft); color: var(--amber); }
.overview-money-card--red > span   { background: var(--red-soft); color: var(--red); }

.overview-money-card div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.overview-money-card strong,
.overview-money-card small,
.overview-money-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-money-card strong {
  font-size: 13.5px;
  font-weight: 820;
}

.overview-money-card small,
.overview-money-card em {
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 560;
}

.overview-money-card b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 860;
  white-space: nowrap;
}

.overview-money-card i {
  grid-column: 3;
  justify-self: end;
  align-self: end;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
  text-transform: uppercase;
}

.overview-money-mini-list {
  display: grid;
  gap: 7px;
  align-content: start;
}

.overview-money-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.overview-money-row:last-child {
  border-bottom: 0;
}

.overview-money-row:hover strong {
  color: var(--blue);
}

.overview-money-row div {
  min-width: 0;
}

.overview-money-row strong,
.overview-money-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-money-row strong {
  font-size: 13px;
  font-weight: 760;
}

.overview-money-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.overview-money-row b {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 820;
  white-space: nowrap;
}

.overview-money-total {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--amber-soft);
  border-radius: var(--r);
  background: #fffbf2;
}

.overview-money-total span,
.overview-money-total small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.overview-money-total strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 860;
}

.overview-alert-list,
.overview-rank-list,
.overview-mix-list,
.overview-activity-list {
  display: grid;
  gap: 8px;
}

.overview-alert {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.overview-alert:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
  transform: translateY(-1px);
}

.overview-alert > span {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: var(--blue-soft);
  position: relative;
}

.overview-alert > span::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--blue);
}

.overview-alert--green > span { background: var(--green-soft); }
.overview-alert--green > span::after { background: var(--green); }
.overview-alert--amber > span { background: var(--amber-soft); }
.overview-alert--amber > span::after { background: var(--amber); }
.overview-alert--red > span { background: var(--red-soft); }
.overview-alert--red > span::after { background: var(--red); }

.overview-alert div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.overview-alert strong,
.overview-alert small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-alert strong {
  font-size: 13px;
  font-weight: 780;
}

.overview-alert small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 540;
}

.overview-alert b {
  color: var(--muted-2);
  font-size: 20px;
  font-weight: 520;
  text-align: right;
}

.overview-rank-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.overview-rank-row:last-child {
  border-bottom: 0;
}

.overview-rank-row > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.overview-rank-row div {
  min-width: 0;
}

.overview-rank-row strong,
.overview-rank-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-rank-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.overview-rank-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.overview-rank-row i {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.overview-rank-row i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.overview-rank-row b {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 780;
  white-space: nowrap;
}

.overview-mix-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.overview-mix-row:last-child {
  border-bottom: 0;
}

.overview-mix-row div {
  min-width: 0;
}

.overview-mix-row strong,
.overview-mix-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-mix-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.overview-mix-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.overview-mix-row b {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 780;
  white-space: nowrap;
}

.overview-mix-row i {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.overview-mix-row i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.overview-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.overview-module {
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  text-align: left;
  color: var(--ink);
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.overview-module:hover:not(:disabled) {
  background: #fff;
  border-color: var(--line-2);
  transform: translateY(-1px);
}

.overview-module strong,
.overview-module span,
.overview-module small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-module strong {
  font-size: 12.5px;
  font-weight: 780;
}

.overview-module span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 830;
  line-height: 1.05;
}

.overview-module small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 540;
}

.overview-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.overview-activity-row:last-child {
  border-bottom: 0;
}

.overview-activity-row div {
  min-width: 0;
}

.overview-activity-row strong,
.overview-activity-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-activity-row strong {
  font-size: 13px;
  font-weight: 760;
}

.overview-activity-row small {
  color: var(--muted);
  font-size: 11.5px;
}

.overview-activity-row > span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 830;
  line-height: 1;
  white-space: nowrap;
}

.overview-activity-row > small {
  grid-column: 2;
  text-align: right;
}

/* ─────────────────────────────────────────────
   TABLES
───────────────────────────────────────────── */
.view { display: none; }
.view.active {
  display: block;
  position: relative;
}

.view.active.view-loading::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 25;
  display: block;
  height: 3px;
  margin: -3px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--green), var(--accent), transparent);
  background-size: 220% 100%;
  animation: view-load-sweep 1.05s ease-in-out infinite;
}

@keyframes view-load-sweep {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

.table-wrap {
  width: 100%;
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: var(--surface);
}

th {
  background: var(--surface-2);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 11px;
  padding: 9px 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

td {
  border-bottom: 1px solid var(--line);
  padding: 10px 11px;
  vertical-align: middle;
  font-size: 13px;
}

tbody tr:hover td { background: var(--surface-2); }
tr:last-child td  { border-bottom: 0; }

.numeric { text-align: right; }

td.empty {
  color: var(--muted-2);
  text-align: center;
  padding: 26px;
  font-size: 13px;
  font-weight: 580;
}

.empty:not(td),
.coffee-dashboard-empty,
.table-empty {
  position: relative;
  min-height: 128px;
  display: grid;
  place-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background:
    linear-gradient(0deg, rgba(255,255,255,.76), rgba(255,255,255,.76)),
    repeating-radial-gradient(circle at 78% 12%, rgba(33,81,199,.11) 0 1px, transparent 1px 24px),
    linear-gradient(132deg, transparent 0 60%, rgba(37,111,74,.08) 60% 60.35%, transparent 60.35% 100%);
  color: var(--muted);
  text-align: center;
  padding: 24px;
  font-size: 13px;
  font-weight: 620;
}

.empty:not(td)::before,
.coffee-dashboard-empty::before,
.table-empty::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 1px solid rgba(33,81,199,.18);
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px rgba(37,111,74,.06);
}

.empty.tight {
  min-height: 0;
  padding: 12px;
}

.empty.tight::before { display: none; }

.book-wrap,
.sales-wrap,
.recipe-wrap {
  max-height: calc(100vh - 320px);
}

.book-table,
.sales-table,
.recipe-table {
  min-width: 2280px;
  font-size: 12px;
}

.sales-table { min-width: 1700px; }
.receivables-table { min-width: 1360px; }
.recipe-table { min-width: 1820px; }
.recipe-admin-table { min-width: 1180px; }

.book-table th,
.sales-table th,
.recipe-table th { padding: 8px 10px; }

.book-table td,
.sales-table td,
.recipe-table td { padding: 7px 10px; }

.supplier-cell { min-width: 200px; }
.receivables-table th:first-child,
.receivables-table td:first-child {
  min-width: 230px;
}

.receivables-table .supplier-cell { min-width: 230px; }
.receivables-table .select-col {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
}

.row-check {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  vertical-align: middle;
}

.row-check:disabled {
  cursor: not-allowed;
}

.receivables-table th:last-child,
.receivables-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--line);
}

.receivables-table th:last-child {
  z-index: 3;
  background: var(--surface-2);
}

.receivables-table tbody tr:hover td:last-child {
  background: var(--surface-2);
}
.item-cell { min-width: 300px; font-weight: 650; }
.item-cell small,
.supplier-cell small,
.recipe-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 520;
}

.receivables-section #arStatus {
  margin: 10px 18px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.receivables-wrap {
  margin: 0 18px 18px;
  max-height: calc(100vh - 330px);
}

.ar-input {
  width: 100%;
  min-width: 104px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 580;
  letter-spacing: 0;
}

.ar-input:focus {
  outline: 0;
  border-color: rgba(37, 99, 235, .5);
  box-shadow: var(--focus);
}

.ar-input--wide { min-width: 170px; }
.ar-input--date { min-width: 132px; }
.ar-input--money { min-width: 112px; text-align: right; }
.ar-input--status { min-width: 108px; }
.ar-input--invoice { min-width: 148px; }

.ar-input:disabled {
  background: var(--surface-2);
  color: var(--muted);
}

.ar-invoice-meta {
  display: block;
  max-width: 190px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.ar-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-top: 5px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 760;
  background: var(--surface-3);
  color: var(--muted);
  white-space: nowrap;
}

.ar-status-pill--paid {
  background: var(--green-soft);
  color: var(--green);
}

.ar-status-pill--partial,
.ar-status-pill--in_review {
  background: var(--amber-soft);
  color: var(--amber);
}

.ar-status-pill--cancelled {
  background: var(--red-soft);
  color: var(--red);
}

.ar-status-pill--pending {
  background: var(--blue-soft);
  color: var(--blue);
}
.recipe-map-select { min-width: 320px; }
.recipe-category-row td {
  position: sticky;
  top: 33px;
  z-index: 1;
  padding: 0;
  background: #eeeae0;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.recipe-category-toggle {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(180px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-transform: none;
}

.recipe-category-toggle:hover {
  background: rgba(255,255,255,.42);
}

.recipe-category-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.recipe-category-toggle > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 820;
  line-height: 1;
}

.recipe-category-toggle strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 830;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-category-toggle small {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.recipe-ingredient-cell {
  min-width: 190px;
  font-weight: 650;
}
.recipe-ingredient-cell small {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-ingredient-cell .table-action {
  margin-top: 6px;
}
.recipe-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.recipe-tab-panel[hidden] { display: none; }
.recipe-yield-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px auto auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.recipe-yield-source {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
  margin-top: 3px;
}
.recipe-edit-modal {
  width: min(1240px, calc(100vw - 36px));
  max-height: calc(100vh - 42px);
  overflow: auto;
}
.recipe-edit-table {
  margin-top: 12px;
  max-height: 54vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.recipe-edit-table .empty {
  margin: 0;
  border: 0;
}
.recipe-edit-table-inner {
  min-width: 1220px;
  font-size: 12px;
}
.recipe-edit-table-inner th,
.recipe-edit-table-inner td {
  padding: 8px 10px;
}
.recipe-edit-table-inner input.numeric {
  width: 110px;
  text-align: right;
}
.recipe-edit-catalog {
  min-width: 260px;
}
.recipe-edit-item-cell small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.recipe-price-status {
  display: block;
  min-width: 118px;
}
.recipe-price-status small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}
.recipe-ingredient-form {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 132px minmax(260px, 1.5fr) minmax(112px, .5fr) minmax(112px, .5fr) minmax(150px, .65fr) auto;
  gap: 10px;
  align-items: end;
}

.recipe-technical-modal {
  width: min(1100px, calc(100vw - 36px));
  max-height: calc(100vh - 42px);
  overflow: auto;
}

.recipe-technical-body {
  margin-top: 12px;
}

.recipe-technical-sheet {
  color: var(--ink);
  background: #fff;
}

.recipe-technical-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  align-items: stretch;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.recipe-technical-header h1 {
  margin: 5px 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.02;
  letter-spacing: 0;
}

.recipe-technical-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 680;
}

.recipe-technical-photo {
  min-height: 170px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 760;
}

.recipe-technical-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.recipe-technical-kpis article {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 10px 12px;
  background: var(--surface);
}

.recipe-technical-kpis small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.recipe-technical-kpis strong {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.1;
}

.recipe-technical-section,
.recipe-technical-box {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: #fff;
}

.recipe-technical-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.recipe-technical-section-head h2,
.recipe-technical-box h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.recipe-technical-section-head span {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.recipe-technical-section-head span.ok {
  background: #e7f5ef;
  color: #1f6b4a;
}

.recipe-technical-section-head span.warn {
  background: #fff2d8;
  color: #9a5b00;
}

.recipe-technical-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.recipe-technical-table th,
.recipe-technical-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.recipe-technical-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.recipe-technical-table td strong,
.recipe-technical-table td small {
  display: block;
}

.recipe-technical-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.recipe-technical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.recipe-technical-box {
  padding: 12px 14px;
}

.recipe-technical-box p {
  min-height: 34px;
  margin: 8px 0 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
}

.recipe-ingredient-mode-field {
  min-width: 0;
}

/* ─────────────────────────────────────────────
   USERS
───────────────────────────────────────────── */
.users-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.user-form {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.permission-check {
  min-height: 30px;
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.permission-check input {
  min-height: 0;
  width: 14px;
  height: 14px;
  padding: 0;
}

.users-wrap { margin-top: 0; }
.users-table { min-width: 760px; }
.users-table small { color: var(--muted); font-weight: 560; }
.users-table .table-action-row { justify-content: flex-start; }

.user-form .check-line {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  min-height: 56px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
}

.user-form .check-line input {
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #d9d6cd;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  transition: background var(--t), border-color var(--t);
}

.user-form .check-line input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform var(--t);
}

.user-form .check-line input:checked {
  background: var(--green);
  border-color: var(--green);
}

.user-form .check-line input:checked::before {
  transform: translateX(18px);
}

.user-role,
.user-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 760;
}

.user-role {
  background: var(--surface-3);
  color: var(--muted);
}

.user-role.admin {
  background: var(--green-soft);
  color: var(--green);
}

.user-status.ok {
  background: var(--green-soft);
  color: var(--green);
}

.user-status.off {
  background: var(--surface-3);
  color: var(--muted);
}

.user-permissions {
  max-width: 420px;
  white-space: normal;
}

/* ─────────────────────────────────────────────
   UTILITY COMPONENTS
───────────────────────────────────────────── */
.muted {
  color: var(--muted);
  margin: 8px 0 16px;
  font-weight: 490;
  font-size: 13px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
  letter-spacing: 0;
}

.inline-status {
  font-size: 12.5px;
  font-weight: 680;
  color: var(--muted);
}

.inline-status.ok  { color: var(--green); }
.inline-status.bad { color: var(--red); }

.doc-type { font-weight: 700; }

/* Badges */
.credit-badge,
.expense-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.credit-badge         { background: #eeeceb; color: var(--muted); }
.credit-badge.warn    { background: var(--amber-soft); color: var(--amber); }
.credit-badge.danger  { background: var(--red-soft); color: var(--red); }
.credit-badge.credit  { background: var(--blue-soft); color: var(--blue); }

.credit-badge + small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.expense-badge.ops      { background: var(--green-soft); color: var(--green); }
.expense-badge.services { background: var(--teal-soft); color: var(--teal); }
.expense-badge.banking  { background: var(--amber-soft); color: var(--amber); }
.expense-badge.other    { background: #eeeceb; color: var(--muted); }

/* Run list (import log) */
.run-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}

.run-list div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  font-size: 13px;
}

.run-list dt { color: var(--muted); font-weight: 540; }
.run-list dd { margin: 0; font-weight: 720; }

/* Debug box */
.debug-box {
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid #252d3a;
  background: #0d1118;
  color: #d8dee9;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
}

/* Toast */
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 400px;
  padding: 12px 15px;
  border-radius: var(--r);
  background: #1a1f2b;
  color: #e8eaf0;
  border: 1px solid #2c3343;
  box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.12);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: var(--z-toast);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: #5c1a1a;
  border-color: #7a2424;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10,12,15,.38);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal-backdrop[hidden] { display: none; }
.modal-backdrop--top { z-index: var(--z-modal-top); }

.modal-panel {
  width: min(720px, 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.07);
}

.modal-panel.recipe-edit-modal {
  width: min(1240px, calc(100vw - 36px));
}

.modal-panel.benchmark-detail-modal {
  width: min(1240px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.modal-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.check-line {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-line input { width: auto; height: auto; }

.line-rescan-box {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.line-rescan-box strong {
  display: block;
  font-size: 13px;
}

.line-rescan-box small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.35;
}

/* ─────────────────────────────────────────────
   INLINE FORMS
───────────────────────────────────────────── */
.inline-form,
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px)) minmax(170px, auto);
  gap: 10px;
  align-items: end;
}

.stack-form { display: grid; gap: 14px; }

.button-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto minmax(180px, auto);
  gap: 10px;
  align-items: end;
}

.recipe-upload-note {
  margin-top: 4px;
}

.field-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 520;
}

.catalog-field { margin: 11px 0 7px; }

.catalog-picker-actions {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 8px;
}

.catalog-preview {
  min-height: 18px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 590;
}

.catalog-preview.ok  { color: var(--green); }
.catalog-preview.bad { color: var(--red); }

.ocr-zone {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ocr-hints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manual-upload-grid { display: grid; gap: 16px; }

/* ─────────────────────────────────────────────
   REVIEW ROWS
───────────────────────────────────────────── */
.review-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.review-bulk-bar {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.review-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
  color: var(--ink);
}

.review-select-all input,
.review-check-cell input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.review-bulk-bar .secondary-action { margin-left: auto; }

.review-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.2fr) 100px 110px minmax(180px, .8fr) 90px 130px 140px auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 11px;
  transition: border-color var(--t);
}

.review-row:hover { border-color: var(--line-2); }

.review-row.is-selected {
  border-color: rgba(33, 81, 199, .36);
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}

.review-check-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   LEARNED RULES
───────────────────────────────────────────── */
.learned-rules-table {
  width: 100%;
  min-width: 1060px;
  table-layout: fixed;
}

.learned-rules-table th,
.learned-rules-table td {
  padding-left: 10px;
  padding-right: 10px;
}

.learned-rules-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.learned-rules-table th:nth-child(1) { width: 13%; }
.learned-rules-table th:nth-child(2) { width: 12%; }
.learned-rules-table th:nth-child(3) { width: 12%; }
.learned-rules-table th:nth-child(4) { width: 18%; }
.learned-rules-table th:nth-child(5) { width: 14%; }
.learned-rules-table th:nth-child(6) { width: 13%; }
.learned-rules-table th:nth-child(7) { width: 9%; }
.learned-rules-table th:nth-child(8) { width: 9%; }

.learned-rules-table .table-action-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.learned-rules-table .table-action {
  min-width: 0;
  padding: 7px 9px;
  white-space: nowrap;
}

.learned-rules-table .table-inline-field {
  width: 100%;
  min-width: 0;
}

.learned-rules-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.35;
}

.learned-rule-catalog {
  width: 100%;
  min-width: 0;
}

.rule-factor-grid {
  display: grid;
  grid-template-columns: minmax(46px, .85fr) minmax(64px, 1fr);
  gap: 6px;
  align-items: center;
}

.rule-risk-stack {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 190px;
}

.rule-risk {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
}

.rule-risk--ok {
  color: var(--green);
  background: var(--green-soft);
}

.rule-risk--warn {
  color: var(--amber);
  background: var(--amber-soft);
}

.rule-risk--bad {
  color: var(--red);
  background: var(--red-soft);
}

.review-title { font-weight: 700; font-size: 13.5px; }

.review-meta {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
  font-weight: 530;
}

/* ─────────────────────────────────────────────
   BAR + RANK LISTS
───────────────────────────────────────────── */
.bar-list  { display: grid; gap: 7px; }
.rank-list { display: grid; gap: 7px; }

.bar-row {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(70px, .7fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  text-align: left;
  transition: background var(--t), border-color var(--t);
}

.bar-row:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}

.bar-text strong,
.bar-text small { display: block; }

.bar-text strong { font-weight: 700; font-size: 13px; }

.bar-text small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 530;
}

.bar-track {
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.bar-row.ops      .bar-track i { background: var(--green); }
.bar-row.services .bar-track i { background: var(--teal); }
.bar-row.banking  .bar-track i { background: var(--amber); }
.bar-row.other    .bar-track i { background: var(--muted-2); }

.bar-value {
  min-width: 90px;
  text-align: right;
  font-weight: 760;
  font-size: 13px;
  letter-spacing: 0;
}

.rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(140px, auto) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 9px 11px;
  transition: background var(--t), border-color var(--t);
}

.rank-row:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}

.rank-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.rank-main strong,
.rank-main small,
.rank-metric strong,
.rank-metric small { display: block; }

.rank-main strong,
.rank-metric strong {
  font-weight: 720;
  font-size: 13px;
  letter-spacing: 0;
}

.rank-main small,
.rank-metric small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 520;
  margin-top: 2px;
}

.rank-bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.rank-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.rank-metric { text-align: right; }

/* ─────────────────────────────────────────────
   QUALITY & INSIGHTS
───────────────────────────────────────────── */
.quality-grid { display: grid; gap: 12px; }

.quality-grid h4 {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .01em;
}

.quality-row {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.quality-row span { color: var(--muted); font-weight: 530; }

.quality-row small {
  grid-column: 1 / -1;
  color: var(--muted-2);
  margin-top: -4px;
  font-size: 11px;
  font-weight: 500;
}

.insight-list { display: grid; gap: 8px; }

.insight {
  border: 1px solid var(--line);
  border-left: 2.5px solid var(--blue);
  border-radius: var(--r);
  background: var(--surface);
  padding: 11px 13px;
}

.insight.warn { border-left-color: var(--amber); }

.insight small,
.insight span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 520;
}

.insight strong {
  display: block;
  margin: 4px 0 3px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   REPORT DASHBOARD
───────────────────────────────────────────── */
.report-dashboard-section {
  height: auto;
  min-height: 0;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
}

.report-board-head,
.report-filter-strip,
.report-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.report-board-head { padding: 12px 16px; }

.report-filter-strip {
  min-height: 52px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: end;
  gap: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.report-filter-group {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.report-filter-group[hidden] { display: none; }

.report-filter-label {
  align-self: center;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.report-sales-filters label { width: 128px; }
.report-sales-filters .segmented-control { align-self: end; }

.report-dashboard {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 8px;
}

.report-main-panel,
.report-side-panel {
  grid-column: 1 / -1;
}

/* KPI Strip */
.report-kpi-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.report-kpi-strip article {
  min-width: 0;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}

.report-kpi-strip article::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line-2);
  border-radius: var(--r) var(--r) 0 0;
}

.report-kpi-strip article.warn   { border-color: #e8cda0; }
.report-kpi-strip article.warn::after   { background: var(--amber); }
.report-kpi-strip article.accent { border-color: #a8d4be; }
.report-kpi-strip article.accent::after { background: var(--green); }
.report-kpi-strip article.bad { border-color: #e4aaa5; }
.report-kpi-strip article.bad::after { background: var(--red); }

.report-kpi-strip small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-kpi-strip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  overflow: visible;
  white-space: normal;
}

.report-kpi-strip strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.05;
  font-weight: 820;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Report panel */
.report-panel {
  min-width: 0;
  min-height: 0;
  padding: 13px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.report-panel-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.report-panel-head h3 { font-size: 15px; letter-spacing: 0; }

.report-panel-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 540;
}

.report-panel-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.report-panel-actions label { width: 168px; }
.report-panel-actions .secondary-action { min-height: 36px; }

.report-chart-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.report-chart-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 11px;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.report-chart-tabs button:hover:not(.active) {
  color: var(--ink);
  background: rgba(255,255,255,.72);
}

.report-chart-tabs button.active {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1px 4px rgba(14,17,23,.16);
}

.report-chart-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.report-chart,
.report-rank-table,
.report-detail-table {
  min-height: 0;
  width: 100%;
}

.report-chart {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.report-main-panel { min-height: 640px; }
.report-side-panel { min-height: 480px; }
.report-main-chart { min-height: 560px; }

.report-rank-table { height: 100%; }

.report-fallback-row {
  width: 100%;
  min-height: 54px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 9px 11px;
  text-align: left;
  transition: background var(--t);
}

.report-fallback-row:hover { background: var(--surface-2); }

.report-fallback-row strong,
.report-fallback-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-fallback-row span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 540;
}

.report-fallback-row b {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 13px;
  font-weight: 740;
}

.report-detail-modal {
  width: min(1120px, calc(100vw - 36px));
  min-height: 500px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.report-detail-table { height: 70vh; }

/* Chart card (overview page) */
.report-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chart-card {
  min-height: 240px;
  padding: 15px;
  background: var(--surface);
}

.chart-card.wide { grid-column: span 2; }

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.chart-surface { min-height: 200px; }

.line-chart {
  display: block;
  width: 100%;
  height: auto;
}

.line-chart .axis,
.line-chart .grid-line { stroke: var(--line-2); }

.line-chart .area { fill: rgba(33,81,199,.07); }

.line-chart .series {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
}

.line-chart circle {
  fill: var(--surface);
  stroke: var(--blue);
  stroke-width: 2;
}

.line-chart text { fill: var(--muted); font-size: 11.5px; font-weight: 600; }
.line-chart .chart-max { fill: var(--ink); }

/* ─────────────────────────────────────────────
   TABULATOR OVERRIDES
───────────────────────────────────────────── */
.tabulator {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-family: inherit;
  font-size: 12.75px;
  box-shadow: var(--shadow-xs);
}

.tabulator .tabulator-header {
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
  border-radius: var(--r) var(--r) 0 0;
}

.tabulator .tabulator-header .tabulator-col {
  background: #f9fafb;
  border-right: 1px solid var(--line);
}

.tabulator .tabulator-header .tabulator-col-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.tabulator .tabulator-row.tabulator-selectable:hover {
  background: #f8fafc;
}

.tabulator .tabulator-cell {
  border-right: 1px solid var(--line);
  font-weight: 520;
  padding: 9px 11px;
}

.tabulator .tabulator-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
}

/* ─────────────────────────────────────────────
   MOM SECTION
───────────────────────────────────────────── */
.mom-section { margin-top: 0; }

.mom-kpis {
  margin: 12px 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mom-kpis article {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px;
  background: var(--surface);
}

.mom-kpis small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: .01em;
}

.mom-kpis strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 22px;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1;
}

.mom-kpis span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 530;
}

.mom-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .8fr);
  grid-auto-rows: minmax(320px, auto);
  gap: 10px;
}

.mom-chart-panel { min-height: 460px; }

.mom-chart-panel .report-panel-head {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.mom-chart-panel .report-panel-actions {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.mom-table {
  min-height: 240px;
  height: 100%;
}

/* MoM historical grid */
.mom-hist-wrap { overflow-x: auto; }
.mom-hist-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mom-hist-table thead th {
  padding: 6px 10px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mom-hist-table thead th:first-child { text-align: left; }
.mom-hist-table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mom-hist-label {
  text-align: left !important;
  font-weight: 530;
  color: var(--ink-2);
  min-width: 160px;
}
.mom-hist-pos  { color: var(--green); font-weight: 600; }
.mom-hist-neg  { color: var(--red);   font-weight: 600; }
.mom-hist-zero { color: var(--muted); }
.mom-hist-null { color: var(--muted-2); }

/* ─────────────────────────────────────────────
   COFFEE BREAKS
───────────────────────────────────────────── */
.event-hub {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: 15px;
}

.event-hub h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.event-hub-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.event-hub-steps article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 9px 10px;
}

.event-hub-steps small,
.event-hub-steps span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-hub-steps small {
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

.event-hub-steps strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.05;
}

.event-hub-steps span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 620;
}

.event-hub-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.coffee-grid { align-items: stretch; }

.coffee-grid .run-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coffee-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coffee-event-product-picker {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 10px;
}

.coffee-event-product-modes {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  width: min(520px, 100%);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}

.coffee-event-product-modes button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.coffee-event-product-modes button.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}

.coffee-event-product-add {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px minmax(150px, .45fr) auto;
  gap: 8px;
  align-items: end;
}

.coffee-event-product-add[data-coffee-product-panel="catalog"] {
  grid-template-columns: minmax(220px, 1fr) 110px auto;
}

.coffee-event-product-list {
  display: grid;
  gap: 7px;
}

.coffee-event-products-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.coffee-event-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  padding: 8px 9px;
}

.coffee-event-product-row strong,
.coffee-event-product-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-event-product-row strong {
  font-size: 13px;
  font-weight: 760;
}

.coffee-event-product-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.coffee-event-product-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.coffee-event-product-total strong {
  color: var(--ink);
}

.coffee-catalog-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.coffee-catalog-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.coffee-catalog-summary article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 8px 10px;
}

.coffee-catalog-summary small,
.coffee-catalog-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-catalog-summary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.coffee-catalog-summary strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 820;
  line-height: 1.1;
}

.coffee-catalog-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) minmax(150px, 1fr) minmax(120px, .8fr) minmax(110px, .65fr) minmax(120px, .75fr) auto;
  gap: 9px;
  align-items: end;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.coffee-catalog-form label {
  min-width: 0;
}

.coffee-catalog-active-check {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.coffee-catalog-active-check input {
  width: auto;
  height: auto;
}

.coffee-catalog-description-field {
  grid-column: span 2;
}

.coffee-catalog-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.coffee-catalog-admin-wrap {
  max-height: min(52vh, 560px);
}

.coffee-catalog-table .table-inline-field {
  width: min(260px, 100%);
}

.coffee-catalog-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 760px) {
  .coffee-event-product-modes,
  .coffee-event-product-add,
  .coffee-event-product-add[data-coffee-product-panel="catalog"] {
    grid-template-columns: 1fr;
  }

  .coffee-event-product-total {
    display: grid;
  }

  .coffee-catalog-summary,
  .coffee-catalog-form {
    grid-template-columns: 1fr;
  }

  .coffee-catalog-description-field {
    grid-column: auto;
  }

  .coffee-catalog-form-actions {
    justify-content: stretch;
  }

  .coffee-catalog-form-actions button {
    width: 100%;
  }
}

.coffee-event-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.coffee-event-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(14, 17, 23, .08);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.coffee-event-status--confirmed,
.coffee-event-status--receivable,
.coffee-event-status--invoiced {
  background: var(--blue-soft);
  color: var(--blue);
}

.coffee-event-status--production,
.coffee-event-status--review,
.coffee-event-status--partial,
.coffee-event-status--unbilled {
  background: var(--amber-soft);
  color: var(--amber);
}

.coffee-event-status--delivered,
.coffee-event-status--paid {
  background: var(--green-soft);
  color: var(--green);
}

.coffee-event-status--draft {
  background: var(--surface-3);
  color: var(--muted);
}

.coffee-event-status--cancelled {
  background: var(--red-soft);
  color: var(--red);
}

.coffee-quote-section {
  margin-top: 14px;
}

.coffee-quote-layout {
  display: grid;
  grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr);
  gap: 16px;
  align-items: start;
}

.coffee-quote-form textarea {
  min-height: 170px;
  resize: vertical;
}

.coffee-quote-fields {
  grid-template-columns: .55fr 1fr .75fr;
}

.coffee-quote-option-fields {
  grid-template-columns: .7fr .7fr 1fr;
  align-items: end;
}

.coffee-quote-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 38px;
  align-items: center;
}

.coffee-quote-check {
  margin-top: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 11px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 720;
}

.coffee-quote-result {
  min-width: 0;
}

.coffee-quote-document {
  display: grid;
  gap: 14px;
}

.coffee-quote-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 14px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.coffee-quote-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.16;
}

.coffee-quote-title small,
.coffee-quote-summary p,
.coffee-quote-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.coffee-quote-total {
  justify-self: end;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--surface-2);
  text-align: right;
}

.coffee-quote-total span,
.coffee-quote-kpis span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.coffee-quote-total strong {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.1;
}

.coffee-quote-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 9px;
}

.coffee-quote-actions .secondary-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.coffee-quote-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.coffee-quote-kpis div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 10px;
  background: var(--surface-2);
}

.coffee-quote-kpis strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
}

.coffee-quote-summary {
  display: grid;
  gap: 6px;
}

.coffee-quote-summary p {
  margin: 0;
}

.coffee-quote-catalog-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) 110px auto;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
  background: var(--surface-2);
}

.coffee-quote-catalog-add strong,
.coffee-quote-catalog-add small {
  display: block;
}

.coffee-quote-catalog-add small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.coffee-quote-table-wrap {
  max-height: 480px;
}

.coffee-quote-table {
  min-width: 680px;
}

.coffee-quote-table th,
.coffee-quote-table td {
  vertical-align: top;
}

.coffee-quote-table td:first-child {
  min-width: 220px;
}

.coffee-quote-qty {
  display: inline-grid;
  grid-template-columns: 76px auto;
  gap: 6px;
  align-items: center;
  justify-content: end;
}

.coffee-quote-qty input {
  height: 32px;
  padding: 5px 7px;
  text-align: right;
}

.coffee-quote-qty span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.coffee-quote-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coffee-quote-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.coffee-quote-tags span,
.coffee-quote-type {
  border: 1px solid rgba(14, 17, 23, .09);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.coffee-quote-type {
  display: inline-flex;
  margin-bottom: 5px;
}

.coffee-quote-type--existing {
  border-color: rgba(37, 111, 74, .22);
  background: var(--green-soft);
  color: var(--green);
}

.coffee-quote-type--new {
  border-color: rgba(15, 92, 131, .22);
  background: var(--blue-soft);
  color: var(--blue);
}

.coffee-quote-type--savory {
  border-color: rgba(158, 95, 8, .22);
  background: var(--amber-soft);
  color: var(--amber);
}

.coffee-quote-type--sweet {
  border-color: rgba(176, 48, 48, .18);
  background: var(--red-soft);
  color: var(--red);
}

.coffee-quote-type--beverage,
.coffee-quote-type--service {
  border-color: rgba(14, 17, 23, .09);
  background: var(--surface-3);
  color: var(--ink-2);
}

.coffee-quote-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.coffee-quote-notes div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
  background: var(--surface-2);
}

.coffee-quote-notes strong,
.coffee-quote-notes span {
  display: block;
}

.coffee-quote-notes strong {
  margin-bottom: 6px;
  font-size: 12px;
}

.coffee-quote-notes span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.section-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 540;
}

.coffee-dashboard-section {
  padding-bottom: 12px;
}

.coffee-company-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  max-height: 470px;
  overflow: auto;
  margin-top: 14px;
  padding-right: 2px;
}

.coffee-company-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.coffee-company-card--ok {
  border-color: rgba(37, 111, 74, .28);
  background: linear-gradient(180deg, #fff, var(--green-soft));
}

.coffee-company-card--watch {
  border-color: rgba(158, 95, 8, .3);
  background: linear-gradient(180deg, #fff, var(--amber-soft));
}

.coffee-company-card--stale {
  border-color: rgba(176, 48, 48, .28);
  background: linear-gradient(180deg, #fff, var(--red-soft));
}

.coffee-company-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.coffee-company-card h3 {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-company-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.coffee-status-light {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--muted-2);
  box-shadow: 0 0 0 4px rgba(154, 160, 174, .14);
}

.coffee-status-light--ok {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(37, 111, 74, .14);
}

.coffee-status-light--watch {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(158, 95, 8, .16);
}

.coffee-status-light--stale {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(176, 48, 48, .14);
}

.coffee-company-metrics {
  display: grid;
  grid-template-columns: 1.15fr .95fr .55fr;
  gap: 8px;
}

.coffee-company-metrics div {
  min-width: 0;
  border-top: 1px solid rgba(14, 17, 23, .08);
  padding-top: 8px;
}

.coffee-company-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  text-transform: uppercase;
}

.coffee-company-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-company-status {
  justify-self: start;
  border: 1px solid rgba(14, 17, 23, .08);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 720;
}

.coffee-dashboard-empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 16px;
  color: var(--muted);
  background: var(--surface-2);
}

.coffee-calendar-section {
  margin-top: 0;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.coffee-calendar-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.coffee-calendar-actions {
  justify-content: flex-end;
}

.coffee-calendar-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, max-content));
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.coffee-calendar-summary article {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-xs);
}

.coffee-calendar-summary small,
.coffee-calendar-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-calendar-summary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.coffee-calendar-summary strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.05;
}

.coffee-calendar-view-mode button:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.coffee-calendar-view-mode button.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}

@keyframes calendarSurfaceIn {
  from {
    opacity: 0;
    transform: translateY(7px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes calendarChipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes calendarModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.calendar-event-modal {
  width: min(780px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  animation: calendarModalIn 180ms cubic-bezier(.2, .9, .2, 1) both;
}

.calendar-event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-event-products,
.calendar-event-notes {
  grid-column: 1 / -1;
}

.calendar-event-modal input,
.calendar-event-modal select,
.calendar-event-modal textarea {
  min-height: 44px;
}

.calendar-event-modal select:disabled {
  color: var(--muted);
  background: var(--surface-3);
}

.calendar-event-actions {
  align-items: center;
}

.calendar-event-actions .danger {
  margin-right: auto;
}

.coffee-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 0;
}

.coffee-calendar-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: calc(100vh - 138px);
  min-height: calc(100dvh - 138px);
  padding: 12px;
}

.coffee-calendar-detail-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.coffee-calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.coffee-calendar-nav-arrow {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.coffee-calendar-month-pill {
  flex: 1;
  justify-content: center;
  pointer-events: none;
}

.coffee-calendar-today-btn {
  margin-left: auto;
  font-size: 12px;
}

.coffee-calendar-head,
.coffee-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.coffee-calendar-head {
  margin-top: 10px;
}

.coffee-calendar-head span {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.coffee-calendar-grid {
  margin-top: 8px;
}

.coffee-calendar-grid:not(.coffee-calendar-grid--agenda) {
  grid-auto-rows: minmax(118px, 1fr);
}

.coffee-calendar-grid--agenda {
  display: block;
}

.coffee-calendar-agenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
}

.coffee-calendar-agenda--single {
  grid-template-columns: 1fr;
}

.coffee-calendar-agenda-day {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
  animation: calendarSurfaceIn 210ms cubic-bezier(.2, .8, .2, 1) both;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.coffee-calendar-agenda-day.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(18, 24, 37, .1);
}

.coffee-calendar-agenda-day:hover {
  border-color: #c3ccdc;
  box-shadow: 0 10px 24px rgba(12, 19, 36, .06);
}

.coffee-calendar-agenda-day-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}

.coffee-calendar-agenda-day-head:hover,
.coffee-calendar-agenda-day-head:focus-visible {
  background: #fbfcfe;
}

.coffee-calendar-agenda-day-head span,
.coffee-calendar-agenda-day-head strong,
.coffee-calendar-agenda-day-head small {
  display: block;
}

.coffee-calendar-agenda-day-head span {
  color: var(--green);
  font-size: 11px;
  font-weight: 820;
}

.coffee-calendar-agenda-day-head small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.coffee-calendar-timeline {
  --hour-count: 14;
  --slot-height: 54px;
  position: relative;
  min-height: calc(var(--hour-count) * var(--slot-height));
}

.coffee-calendar-time-slots {
  display: grid;
  grid-template-rows: repeat(var(--hour-count), var(--slot-height));
  min-height: calc(var(--hour-count) * var(--slot-height));
}

.coffee-calendar-time-slot {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  border-bottom: 1px solid rgba(14, 17, 23, .07);
  cursor: pointer;
}

.coffee-calendar-time-slot:hover .coffee-calendar-time-events {
  background: rgba(37, 99, 235, .04);
}

.coffee-calendar-time-slot:last-child {
  border-bottom: 0;
}

.coffee-calendar-time-label {
  padding: 9px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  background: rgba(255, 255, 255, .52);
}

.coffee-calendar-time-events {
  min-width: 0;
  border-left: 1px solid rgba(14, 17, 23, .04);
  transition: background 150ms ease;
}

.coffee-calendar-time-event-layer {
  position: absolute;
  inset: 0 6px 0 54px;
  pointer-events: none;
}

.coffee-calendar-time-event {
  --calendar-event-color: var(--green);
  --calendar-event-bg: var(--green-soft);
  position: absolute;
  top: var(--event-top);
  left: var(--event-left);
  width: var(--event-width);
  height: var(--event-height);
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  min-height: 34px;
  border-left: 3px solid var(--calendar-event-color);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  background: var(--calendar-event-bg);
  color: var(--calendar-event-color);
  overflow: hidden;
  pointer-events: auto;
  box-shadow: 0 8px 18px rgba(15, 118, 76, .08);
  animation: calendarChipIn 180ms cubic-bezier(.2, .85, .2, 1) both;
  transition: box-shadow 170ms ease, filter 170ms ease, transform 170ms ease;
}

.coffee-calendar-time-event:hover,
.coffee-calendar-time-event:focus-visible {
  box-shadow: 0 12px 24px rgba(12, 19, 36, .12);
  filter: saturate(1.04);
  transform: translateY(-1px);
}

.coffee-calendar-time-event:active {
  transform: translateY(0);
}

.coffee-calendar-time-event strong,
.coffee-calendar-time-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-calendar-time-event strong {
  font-size: 12px;
  font-weight: 790;
}

.coffee-calendar-time-event span {
  font-size: 11px;
  font-weight: 700;
}

.compact-date {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 720;
}

.daily-work-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.daily-task-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.daily-task-form-grid label:first-child {
  grid-column: 1 / -1;
}

.daily-work-section {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.daily-work-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.daily-date-tools {
  justify-content: flex-end;
}

.daily-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, max-content));
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.daily-summary article {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-xs);
}

.daily-summary small,
.daily-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-summary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.daily-summary strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.05;
}

.daily-task-quick-panel {
  margin-bottom: 10px;
  padding: 10px;
}

.daily-task-quick-form {
  display: grid;
  grid-template-columns:
    minmax(260px, 2fr)
    minmax(126px, .72fr)
    minmax(98px, .52fr)
    minmax(128px, .82fr)
    minmax(112px, .62fr)
    minmax(116px, .66fr)
    minmax(148px, .9fr)
    auto;
  gap: 8px;
  align-items: end;
}

.daily-task-quick-form label {
  gap: 4px;
  min-width: 0;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.daily-task-quick-form input,
.daily-task-quick-form select,
.daily-task-quick-form textarea {
  height: 36px;
  min-height: 36px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  text-transform: none;
}

.daily-task-quick-form textarea {
  resize: none;
  padding: 8px 10px;
}

.daily-task-detail-field {
  grid-column: 1 / 8;
}

.daily-task-form-actions {
  grid-column: 8;
  display: flex;
  gap: 7px;
  align-items: end;
  justify-content: flex-end;
}

.daily-task-form-actions .primary-action,
.daily-task-form-actions .secondary-action {
  min-height: 36px;
  padding: 0 11px;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .daily-work-toolbar {
    grid-template-columns: 1fr;
  }

  .daily-date-tools {
    justify-content: flex-start;
  }

  .daily-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .daily-task-quick-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .daily-task-title-field {
    grid-column: 1 / -1;
  }

  .daily-task-detail-field {
    grid-column: 1 / 4;
  }

  .daily-task-form-actions {
    grid-column: 4;
  }
}

@media (max-width: 760px) {
  .daily-work-toolbar,
  .daily-date-tools,
  .daily-summary,
  .daily-task-quick-form,
  .daily-task-form-actions {
    grid-template-columns: 1fr;
  }

  .daily-date-tools,
  .daily-task-form-actions {
    display: grid;
  }

  .daily-task-title-field,
  .daily-task-detail-field,
  .daily-task-form-actions {
    grid-column: 1;
  }
}

.daily-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.daily-column {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}

.daily-column-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.daily-column-head h3 {
  margin: 0;
  font-size: 13px;
}

.daily-column-head span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.daily-task-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.daily-event-context {
  margin-top: 12px;
}

.daily-event-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  background: var(--surface);
}

.daily-event-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.daily-event-panel-head h3 {
  margin: 0;
  font-size: 15px;
}

.daily-event-list {
  display: grid;
  gap: 8px;
}

.daily-event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px;
  background: var(--surface-2);
}

.daily-event-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.daily-event-item strong,
.daily-event-item span {
  overflow-wrap: anywhere;
}

.daily-event-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.daily-empty,
.daily-thread-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.daily-task-card {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(12, 19, 36, .05);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.daily-task-card--blocked { border-left-color: var(--red); }
.daily-task-card--doing { border-left-color: var(--green); }
.daily-task-card--done { border-left-color: #6b7280; opacity: .86; }
.daily-task-card.is-expanded {
  box-shadow: 0 12px 26px rgba(12, 19, 36, .08);
}

.daily-task-summary {
  appearance: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 0;
  padding: 10px 11px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}

.daily-task-summary:hover,
.daily-task-summary:focus-visible {
  background: rgba(37, 111, 74, .06);
}

.daily-task-summary:focus-visible {
  outline: 2px solid rgba(37, 111, 74, .28);
  outline-offset: -2px;
}

.daily-task-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.daily-task-summary strong,
.daily-task-summary span,
.daily-task-description,
.daily-comment p,
.daily-attachment a {
  overflow-wrap: anywhere;
}

.daily-task-summary strong {
  font-size: 14px;
}

.daily-task-summary span,
.daily-task-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.daily-task-summary-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.daily-task-chevron {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  transition: transform 180ms ease, background 160ms ease, color 160ms ease;
}

.daily-task-summary:hover .daily-task-chevron,
.daily-task-summary:focus-visible .daily-task-chevron {
  background: rgba(37, 111, 74, .1);
  color: var(--green);
}

.daily-task-card.is-expanded .daily-task-chevron {
  transform: rotate(180deg);
}

.daily-task-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: grid-template-rows 220ms ease, opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.daily-task-card.is-expanded .daily-task-body {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: grid-template-rows 220ms ease, opacity 180ms ease, transform 220ms ease, visibility 0s;
}

.daily-task-body-inner {
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 0 11px;
}

.daily-task-card.is-expanded .daily-task-body-inner {
  padding-bottom: 11px;
}

.daily-priority {
  align-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef2ff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 820;
  white-space: nowrap;
}

.daily-priority--urgent { background: #fee2e2; color: var(--red); }
.daily-priority--high { background: #fff7ed; color: var(--amber); }
.daily-priority--low { background: #f3f4f6; color: var(--muted); }

.daily-task-description {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.daily-linked-event,
.coffee-calendar-task-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.daily-task-meta,
.daily-task-actions,
.daily-attachment {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.daily-task-actions {
  gap: 6px;
}

.table-action.success {
  color: var(--green);
  border-color: rgba(37, 111, 74, .28);
  background: rgba(37, 111, 74, .08);
}

.daily-thread,
.daily-attachments {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.daily-thread-list,
.daily-attachment-list {
  display: grid;
  gap: 7px;
}

.daily-comment {
  display: grid;
  gap: 2px;
  border-radius: var(--r-sm);
  padding: 8px;
  background: var(--surface-2);
}

.daily-comment strong {
  font-size: 11px;
}

.daily-comment span {
  color: var(--muted);
  font-size: 10px;
}

.daily-comment p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.daily-comment-form,
.daily-attachment-form {
  display: grid;
  gap: 7px;
}

.daily-comment-form textarea {
  min-height: 58px;
}

.daily-attachment {
  justify-content: space-between;
  border-radius: var(--r-sm);
  padding: 7px;
  background: var(--surface-2);
}

.daily-attachment a {
  color: var(--blue);
  font-size: 12px;
  font-weight: 760;
}

.daily-attachment span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.coffee-calendar-task-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 12px;
  background: var(--surface-2);
  animation: calendarSurfaceIn 190ms cubic-bezier(.2, .8, .2, 1) both;
}

.coffee-calendar-task-panel > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.coffee-calendar-task-panel strong,
.coffee-calendar-task-panel span {
  overflow-wrap: anywhere;
}

.coffee-calendar-task-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.coffee-calendar-day,
.coffee-calendar-day--blank {
  min-height: 126px;
  border-radius: var(--r);
}

.coffee-calendar-day {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--line);
  padding: 9px;
  background: var(--surface);
  text-align: left;
  animation: calendarSurfaceIn 210ms cubic-bezier(.2, .8, .2, 1) both;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease, background 170ms ease;
  will-change: transform;
}

.coffee-calendar-day:nth-child(7n + 2) { animation-delay: 18ms; }
.coffee-calendar-day:nth-child(7n + 3) { animation-delay: 36ms; }
.coffee-calendar-day:nth-child(7n + 4) { animation-delay: 54ms; }
.coffee-calendar-day:nth-child(7n + 5) { animation-delay: 72ms; }
.coffee-calendar-day:nth-child(7n + 6) { animation-delay: 90ms; }
.coffee-calendar-day:nth-child(7n) { animation-delay: 108ms; }

.coffee-calendar-day:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

.coffee-calendar-day:hover {
  border-color: #b8c4d8;
  box-shadow: 0 8px 20px rgba(12, 19, 36, .07);
  transform: translateY(-1px);
}

.coffee-calendar-day:active {
  transform: translateY(0);
}

.coffee-calendar-day.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(18, 24, 37, .12), 0 4px 12px rgba(0,0,0,.08);
}

.coffee-calendar-day.is-today {
  background: linear-gradient(160deg, #fffbf0 0%, #fff 100%);
  border-color: #e8c84a;
}

.coffee-calendar-day.has-events {
  border-left: 3px solid var(--green);
}

.coffee-calendar-day--blank {
  background: transparent;
}

.coffee-calendar-day-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.coffee-calendar-day-number {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  font-weight: 820;
}

.coffee-calendar-day-top > span:last-child,
.coffee-calendar-day > small,
.coffee-calendar-day-more {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
}

.coffee-calendar-day-top > span:last-child:empty,
.coffee-calendar-day > small:empty {
  display: none;
}

.coffee-calendar-day-events {
  display: grid;
  gap: 5px;
  margin-top: auto;
}

.coffee-calendar-day-event {
  --calendar-event-color: var(--green);
  --calendar-event-bg: var(--green-soft);
  display: grid;
  gap: 1px;
  min-width: 0;
  border-radius: 8px;
  padding: 5px 6px;
  background: var(--calendar-event-bg);
  color: var(--calendar-event-color);
  cursor: pointer;
  animation: calendarChipIn 180ms cubic-bezier(.2, .85, .2, 1) both;
  transition: box-shadow 160ms ease, filter 160ms ease, transform 160ms ease;
}

.coffee-calendar-day-event:hover,
.coffee-calendar-day-event:focus-visible {
  box-shadow: 0 6px 14px rgba(12, 19, 36, .1);
  filter: saturate(1.05);
  transform: translateY(-1px);
}

.coffee-calendar-event-kind--coffee {
  --calendar-event-color: var(--green);
  --calendar-event-bg: var(--green-soft);
}

.coffee-calendar-event-kind--meeting {
  --calendar-event-color: var(--blue);
  --calendar-event-bg: var(--blue-soft);
}

.coffee-calendar-event-kind--production {
  --calendar-event-color: var(--amber);
  --calendar-event-bg: var(--amber-soft);
}

.coffee-calendar-event-kind--delivery {
  --calendar-event-color: var(--teal);
  --calendar-event-bg: var(--teal-soft);
}

.coffee-calendar-event-kind--admin {
  --calendar-event-color: #7c3aed;
  --calendar-event-bg: #f1edff;
}

.coffee-calendar-event-kind--other {
  --calendar-event-color: #4b5563;
  --calendar-event-bg: #f3f4f6;
}

.coffee-calendar-day-event strong,
.coffee-calendar-day-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-calendar-day-event strong {
  font-size: 11px;
  font-weight: 780;
}

.coffee-calendar-day-event small {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
}

.coffee-calendar-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 16px;
  color: var(--muted);
  background: var(--surface-2);
}

.coffee-calendar-detail-head {
  display: none;
}

.coffee-calendar-events {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(260px, .9fr);
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.coffee-calendar-selected-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  background: rgba(255,255,255,.74);
  color: var(--muted);
  animation: calendarSurfaceIn 190ms cubic-bezier(.2, .8, .2, 1) both;
}

.coffee-calendar-selected-empty strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.coffee-calendar-selected-empty span {
  font-size: 11px;
  font-weight: 720;
}

@media (max-width: 1180px) {
  .coffee-calendar-toolbar {
    grid-template-columns: 1fr;
  }

  .coffee-calendar-actions {
    justify-content: flex-start;
  }

  .coffee-calendar-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .coffee-calendar-section,
  .coffee-calendar-panel {
    min-height: auto;
  }

  .coffee-calendar-toolbar,
  .coffee-calendar-actions,
  .coffee-calendar-summary,
  .coffee-calendar-events {
    grid-template-columns: 1fr;
  }

  .coffee-calendar-actions {
    display: grid;
  }
}

.coffee-calendar-event-card {
  --calendar-event-color: var(--green);
  --calendar-event-bg: var(--green-soft);
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--calendar-event-color);
  border-radius: var(--r);
  padding: 12px;
  background: var(--surface-2);
  animation: calendarSurfaceIn 190ms cubic-bezier(.2, .8, .2, 1) both;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease, background 170ms ease;
}

.coffee-calendar-event-card:hover {
  border-color: #d8dee9;
  box-shadow: 0 8px 20px rgba(12, 19, 36, .05);
}

.coffee-calendar-event-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.coffee-calendar-event-head strong,
.coffee-calendar-event-head span,
.coffee-calendar-event-head b {
  display: block;
}

.coffee-calendar-event-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-calendar-event-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.coffee-calendar-event-head b {
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--calendar-event-bg);
  color: var(--calendar-event-color);
  font-size: 14px;
  font-weight: 820;
  white-space: nowrap;
}

.coffee-calendar-event-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.coffee-calendar-event-meta div {
  min-width: 0;
  border-top: 1px solid rgba(14, 17, 23, .08);
  padding-top: 7px;
}

.coffee-calendar-event-meta dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.coffee-calendar-event-meta dd {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 690;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-calendar-event-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.38;
}

.coffee-calendar-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .calendar-event-modal,
  .coffee-calendar-agenda-day,
  .coffee-calendar-time-event,
  .coffee-calendar-task-panel,
  .coffee-calendar-day,
  .coffee-calendar-day-event,
  .coffee-calendar-event-card {
    animation: none !important;
    transition: none !important;
  }

  .coffee-calendar-agenda-day:hover,
  .coffee-calendar-time-event:hover,
  .coffee-calendar-day:hover,
  .coffee-calendar-day-event:hover {
    transform: none !important;
  }
}

.compact-table-wrap {
  margin-top: 0;
  max-height: 100%;
}

/* ─────────────────────────────────────────────
   SVG ICONS
───────────────────────────────────────────── */
svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ─────────────────────────────────────────────
   FLOW PAGE
───────────────────────────────────────────── */
.flow-head { margin-bottom: 14px; }
.flow-head .icon-button { font-size: 20px; width: 36px; height: 36px; }

/* Table wrap */
.flow-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  background: var(--surface);
}

/* Table base */
.flow-table {
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 860px;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Header row */
.flow-table thead th {
  background: var(--surface-2);
  padding: 9px 12px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 2px solid var(--line-2);
  white-space: nowrap;
}

.flow-table thead th:first-child {
  text-align: left;
  width: 176px;
  min-width: 176px;
}

/* Data cells */
.flow-table td {
  padding: 7px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--ink);
}

.flow-table td:first-child {
  text-align: left;
  color: var(--ink-2);
  font-weight: 430;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  border-right: 1px solid var(--line);
}

/* Section header rows */
.flow-section-row td {
  background: var(--nav) !important;
  color: rgba(255, 255, 255, .65) !important;
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Dim rows (deductions) */
.flow-row--dim td { color: var(--muted); }
.flow-row--dim td:first-child { color: var(--muted); }

/* Subtotal rows */
.flow-row--subtotal td {
  font-weight: 660;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}

.flow-row--subtotal td:first-child { background: var(--surface-2); }

/* Total rows */
.flow-total-row td {
  font-weight: 760;
  font-size: 13px;
  background: var(--surface-2);
  border-top: 2px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
}

.flow-total-row td:first-child { background: var(--surface-2); }

/* Meta / percent rows */
.flow-row--meta td {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 4px 12px;
}

.flow-row--meta td:first-child {
  background: var(--surface-2);
  padding-left: 20px;
  font-style: italic;
}

/* Current-month column highlight */
.flow-month--current { background: rgba(37, 111, 74, .05) !important; }
.flow-table thead th.flow-month--current { color: var(--green); font-weight: 760; }

/* Semantic value colors */
.flow-val--green { color: var(--green); font-weight: 700; }
.flow-val--red   { color: var(--red);   font-weight: 700; }
.flow-val--amber { color: var(--amber); font-weight: 700; }
.flow-val--muted { color: var(--muted); font-weight: 400; }
.flow-zero       { color: var(--muted-2); font-weight: 400; }

/* Navigable cells */
.flow-nav-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  padding: 2px 4px;
  margin: -2px -4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: right;
  display: block;
  width: calc(100% + 8px);
  border-radius: var(--r-xs);
  transition: color var(--t);
}
.flow-nav-btn:hover { color: var(--blue); text-decoration: underline; }

/* Editable cells */
.flow-editable-row td { background: var(--surface); }
.flow-editable-row td:first-child { font-weight: 530; }

.flow-cell-edit-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.flow-edit-btn {
  background: none;
  border: none;
  padding: 1px 3px;
  font-size: 11px;
  color: var(--muted-2);
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
  opacity: .4;
  transition: color var(--t), background var(--t), opacity var(--t);
}

.flow-editable-row:hover .flow-edit-btn { opacity: 1; }
.flow-edit-btn:hover { color: var(--blue); background: var(--blue-soft); opacity: 1; }

.flow-cell-form {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.flow-cell-input {
  width: 84px;
  height: 26px;
  font-size: 12px;
  text-align: right;
  padding: 0 5px;
  border-radius: var(--r-xs);
}

.flow-cell-save-btn,
.flow-cell-cancel-btn {
  height: 26px;
  width: 26px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  cursor: pointer;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}

.flow-cell-save-btn   { color: var(--green); border-color: #b3d4c3; }
.flow-cell-save-btn:hover   { background: var(--green-soft); }
.flow-cell-cancel-btn { color: var(--muted); }
.flow-cell-cancel-btn:hover { background: var(--surface-2); }

/* ─────────────────────────────────────────────
   RESPONSIVE — 1180px
───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .book-summary,
  .sales-summary,
  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .supplier-summary-layout,
  .supplier-detail-grid {
    grid-template-columns: 1fr;
  }

  .supplier-summary-list {
    max-height: 300px;
  }

  .mom-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-board {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .daily-task-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .menu-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chart"
      "side"
      "quadrants";
  }

  .menu-chart-panel,
  .menu-side-panel,
  .menu-quadrant-panel {
    min-height: 0;
  }

  .menu-chart {
    min-height: 420px;
  }

  .overview-panel--wide {
    min-height: 360px;
  }

  .import-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "purchases purchases"
      "sales items"
      "recipes recipes";
  }

  .import-column--purchases .manual-upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — 980px
───────────────────────────────────────────── */
@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    height: auto;
    min-height: 64px;
    z-index: 5;
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    overflow: auto;
  }

  .brand { min-width: 170px; }

  .nav-list {
    flex: none;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    overflow: visible;
    padding: 0;
    margin-right: 0;
  }

  .nav-group {
    flex: none;
    min-width: 138px;
  }

  .nav-group-body {
    display: flex;
    gap: 2px;
  }

  .nav-group[data-collapsed="true"] {
    min-width: auto;
  }

  .nav-group[data-collapsed="true"] .nav-group-body {
    display: none;
  }

  .nav-group-toggle {
    min-height: 36px;
    white-space: nowrap;
  }

  .nav-item {
    white-space: nowrap;
    width: auto;
  }

  .sidebar-foot, .sidebar-brand { display: none; }

  .workspace { padding: 18px 18px 40px; }

  .page-header { margin: -18px -18px 22px; }
  .ph-top { padding: 18px 18px 16px; }
  .ph-title { font-size: 26px; }

  h1 { font-size: 24px; }

  .split-grid,
  .reconciliation-layout,
  .reconciliation-shift-status,
  .inline-form,
  .form-grid,
  .coffee-form-grid,
  .daily-work-grid,
  .daily-task-form-grid,
  .coffee-quote-layout,
  .coffee-quote-fields,
  .coffee-quote-option-fields,
  .coffee-quote-title,
  .coffee-quote-kpis,
  .coffee-quote-catalog-add,
  .coffee-quote-notes,
  .coffee-calendar-summary,
  .coffee-calendar-layout,
  .catalog-actions,
  .ocr-hints,
  .review-row {
    grid-template-columns: 1fr;
  }

  .coffee-quote-total {
    justify-self: stretch;
    text-align: left;
  }

  .book-head,
  .sales-head,
  .recipe-head,
  .reports-head,
  .benchmark-head {
    display: grid;
    align-items: stretch;
  }

  .book-tools,
  .sales-tools,
  .report-tools,
  .benchmark-tools { justify-content: stretch; }

  .overview-command-bar {
    display: grid;
    align-items: stretch;
  }

  .overview-tools {
    width: 100%;
  }

  .book-tools,
  .sales-tools,
  .report-tools,
  .benchmark-tools {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .benchmark-tools {
    grid-template-columns: 1fr;
  }

  .benchmark-field {
    grid-template-rows: auto auto auto;
  }

  .benchmark-refresh {
    margin-top: 0;
  }

  .book-tools label,
  .book-tools button,
  .book-tools .search-box,
  .book-tools .date-range-filter,
  .sales-tools label,
  .sales-tools button,
  .sales-tools .search-box,
  .sales-tools .date-range-filter,
  .report-tools label,
  .report-tools button,
  .report-tools .search-box,
  .report-tools .date-range-filter,
  .benchmark-tools label,
  .benchmark-tools button,
  .benchmark-tools .search-box,
  .benchmark-tools .date-range-filter { width: 100%; }

  .book-tools .segmented-control,
  .sales-tools .segmented-control,
  .report-tools .segmented-control,
  .report-panel-actions .segmented-control {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .segmented-control button { min-width: max-content; }

  .report-dashboard-section {
    height: auto;
    min-height: 0;
  }

  .report-filter-strip,
  .report-filter-group,
  .report-panel-head,
  .report-panel-actions { align-items: stretch; }

  .report-filter-strip {
    grid-template-columns: 1fr;
  }

  .report-chart-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .report-chart-tabs button {
    width: auto;
    min-width: max-content;
  }

  .report-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .report-main-panel { min-height: 520px; }
  .report-side-panel { min-height: 440px; }
  .report-main-chart { min-height: 430px; }

  .mom-dashboard { grid-template-columns: 1fr; }
  .consumption-grid { grid-template-columns: 1fr; }
  .consumption-filter-strip { grid-template-columns: 1fr; }

  .report-sales-filters label,
  .report-panel-actions label,
  .report-panel-actions button { width: 100%; }

  .benchmark-detail-context { align-items: flex-start; }
  .report-chart.benchmark-detail-chart {
    height: 420px;
    min-height: 420px;
  }
  .benchmark-marker-row { grid-template-columns: 1fr; }

  .modal-grid { grid-template-columns: 1fr; }
  .line-rescan-box { grid-template-columns: 1fr; align-items: stretch; }

  .search-box { min-width: 0; width: 100%; }

  .report-grid { grid-template-columns: 1fr; }

  .chart-card.wide { grid-column: auto; }

  .import-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "purchases purchases"
      "sales items"
      "recipes recipes";
  }

  .overview-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-money-list {
    grid-template-columns: 1fr;
  }

  .reconciliation-shift-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rank-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .rank-metric,
  .rank-row .table-action {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .flow-main-grid,
  .flow-bottom-grid { grid-template-columns: 1fr; }

  .flow-kpis { flex-wrap: wrap; }

  .flow-kpi { flex: 0 0 calc(50% - 1px); min-width: 0; }
}

@media (max-width: 640px) {
  .date-range-popover {
    grid-template-columns: 1fr;
  }

  .date-range-quick-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — 620px
───────────────────────────────────────────── */
@media (max-width: 620px) {
  .page-header::before {
    width: 360px;
    height: 360px;
    top: -218px;
    right: -160px;
  }

  .ph-top {
    align-items: flex-start;
    gap: 12px;
  }

  .top-actions {
    width: auto;
    padding-top: 0;
  }

  .primary-action { flex: 1; }

  h1 { font-size: 22px; }

  .coffee-calendar-head,
  .coffee-calendar-grid {
    gap: 4px;
  }

  .coffee-calendar-day,
  .coffee-calendar-day--blank {
    min-height: 92px;
  }

  .coffee-calendar-day {
    padding: 6px;
    gap: 4px;
  }

  .coffee-calendar-day-number {
    font-size: 17px;
  }

  .coffee-calendar-day-top {
    display: block;
  }

  .coffee-calendar-day-top > span:last-child {
    display: none;
  }

  .coffee-calendar-day.has-events .coffee-calendar-day-top > span:last-child {
    display: block;
    color: var(--green);
    font-size: 9px;
    font-weight: 820;
    line-height: 1.1;
    text-align: right;
  }

  .coffee-calendar-day > small {
    display: none;
  }

  .coffee-calendar-day-events {
    display: grid;
    gap: 3px;
  }

  .coffee-calendar-day-event {
    min-height: 22px;
    padding: 3px 4px;
  }

  .coffee-calendar-day-event strong {
    font-size: 9.5px;
  }

  .coffee-calendar-day-event small,
  .coffee-calendar-day-more,
  .coffee-calendar-task-chip {
    display: none;
  }

  .coffee-calendar-event-meta,
  .coffee-calendar-event-head {
    grid-template-columns: 1fr;
  }

  .book-tools,
  .sales-tools,
  .report-tools {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
  }

  .book-tools label,
  .book-tools button,
  .book-tools .search-box,
  .sales-tools label,
  .sales-tools button,
  .sales-tools .search-box,
  .report-tools label,
  .report-tools button,
  .report-tools .search-box {
    min-width: 0;
    max-width: 100%;
  }

  .book-tools .segmented-control,
  .sales-tools .segmented-control,
  .report-tools .segmented-control,
  .report-panel-actions .segmented-control {
    height: auto;
    min-height: 34px;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: visible;
    border-radius: var(--r-sm);
  }

  .book-tools .segmented-control button,
  .sales-tools .segmented-control button,
  .report-tools .segmented-control button,
  .report-panel-actions .segmented-control button {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
  }

  .event-hub-steps,
  .coffee-form-grid,
  .coffee-event-product-add,
  .coffee-event-product-row {
    grid-template-columns: 1fr;
  }

  .recipe-yield-form {
    grid-template-columns: 1fr;
  }

  .import-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "purchases"
      "sales"
      "items"
      "recipes";
  }

  #view-import .manual-upload-grid,
  .import-column--recipes .catalog-actions,
  #view-import .form-grid,
  #view-import .catalog-actions,
  #view-import .ocr-hints,
  #view-import .button-row {
    grid-template-columns: 1fr;
  }

  #view-import .ocr-zone {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .recipe-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .recipe-table {
    min-width: 0;
    display: block;
    background: transparent;
  }

  .recipe-table thead { display: none; }

  .recipe-table tbody {
    display: grid;
    gap: 10px;
  }

  .recipe-table tr {
    display: grid;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(14, 17, 23, .035);
  }

  .recipe-table td {
    width: 100%;
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 7px 0;
    text-align: left !important;
  }

  .recipe-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 740;
  }

  .recipe-table .item-cell,
  .recipe-ingredient-cell {
    min-width: 0;
  }

  .recipe-table .item-cell strong,
  .recipe-table td small,
  .recipe-ingredient-cell small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recipe-table td > small,
  .recipe-table .item-cell small,
  .recipe-ingredient-cell small {
    grid-column: 2;
  }

  .recipe-map-select { min-width: 0; width: 100%; }
  .recipe-edit-catalog { min-width: 0; width: 100%; }
  .recipe-yield-source { grid-column: 2; }

  .recipe-ingredient-cell .table-action {
    grid-column: 2;
    width: 100%;
    margin-top: 8px;
  }

  .recipe-table td.table-action-row .table-action {
    grid-column: 2;
    width: 100%;
  }

  .recipe-category-row {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .recipe-category-row td {
    position: static;
    display: block;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }

  .recipe-category-row td::before { content: none; }

  .recipe-category-toggle {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .recipe-category-toggle small {
    grid-column: 2;
    white-space: normal;
  }

  .book-summary,
  .sales-summary,
  .report-kpis {
    grid-template-columns: 1fr;
  }

  .supplier-summary-head,
  .supplier-detail-head {
    display: grid;
    align-items: stretch;
  }

  .supplier-summary-head .search-box,
  .supplier-detail-head .secondary-action {
    width: 100%;
  }

  .supplier-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-board {
    grid-template-columns: 1fr;
  }

  .supplier-summary-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .supplier-summary-metric {
    grid-column: 2;
    text-align: left;
  }

  .overview-kpi-grid,
  .overview-module-grid {
    grid-template-columns: 1fr;
  }

  .overview-kpi {
    min-height: 118px;
  }

  .overview-kpi strong {
    font-size: 22px;
  }

  .overview-spark {
    flex-basis: 70px;
    width: 70px;
  }

  .overview-panel {
    min-height: 0;
    padding: 14px;
  }

  .overview-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .overview-panel-head .pill,
  .overview-panel-head .table-action {
    align-self: flex-start;
  }

  .overview-chart--main,
  .overview-chart--donut {
    height: 280px;
    min-height: 260px;
  }

  .overview-alert {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
  }

  .overview-alert > span {
    width: 32px;
    height: 32px;
  }

  .overview-rank-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .overview-rank-row b {
    grid-column: 2;
    justify-self: start;
  }

  .report-kpi-strip { grid-template-columns: 1fr; }

  .mom-kpis { grid-template-columns: 1fr; }

  .bar-row { grid-template-columns: 1fr; }

  .bar-value { text-align: left; }

  .reconciliation-calendar-head,
  .reconciliation-calendar-grid {
    gap: 4px;
  }

  .reconciliation-day,
  .reconciliation-day--blank {
    min-height: 116px;
  }

  .reconciliation-day {
    padding: 8px;
  }

  .reconciliation-day-number {
    font-size: 20px;
  }

  .reconciliation-day-shift {
    padding: 4px 6px;
    font-size: 10px;
  }

  .reconciliation-keypad {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 10px !important;
    width: auto !important;
  }
}

/* ── INVENTORY ──────────────────────────────────────────────────────────── */

.inventory-head { margin-bottom: 12px; }

#inventoryContent {
  display: grid;
  gap: 14px;
}

.inv-settings-panel,
.inv-table-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(14, 17, 23, .035);
}

.inv-settings-panel {
  padding: 13px 14px;
}

.inventory-import-modal {
  width: min(760px, calc(100vw - 28px));
}

.inventory-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
  gap: 12px;
  margin-top: 14px;
}

.inventory-import-upload {
  min-height: 118px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
  font-weight: 650;
  transition: background var(--t), border-color var(--t);
}

.inventory-import-upload:hover {
  background: var(--surface);
  border-color: #a0a8b8;
}

.inventory-import-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.inventory-import-upload svg {
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.inventory-import-upload small {
  display: block;
  color: var(--muted);
  font-weight: 520;
}

.inventory-import-help {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--muted);
}

.inventory-import-help strong {
  color: var(--ink);
  font-size: 13px;
}

.inventory-import-help code {
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
}

.inventory-import-summary {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.inventory-import-summary.ok { color: var(--green); background: var(--green-soft); }
.inventory-import-summary.bad { color: var(--red); background: var(--red-soft); }

.inventory-import-preview-wrap {
  max-height: 260px;
  margin-top: 12px;
}

.inventory-import-preview-wrap table {
  min-width: 620px;
  font-size: 12.5px;
}

.inventory-import-preview-wrap td,
.inventory-import-preview-wrap th {
  padding: 7px 9px;
}

.inventory-import-status-ok { color: var(--green); font-weight: 720; }
.inventory-import-status-bad { color: var(--red); font-weight: 720; }

@media (max-width: 720px) {
  .inventory-import-grid {
    grid-template-columns: 1fr;
  }
}

.inv-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inv-settings-head h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.inv-settings-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 540;
}

.inv-settings-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.inv-subfamily-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  max-height: 142px;
  overflow: auto;
  margin-top: 12px;
  padding-right: 2px;
}

.inv-subfamily-check {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}

.inv-subfamily-check input {
  flex: none;
  width: 14px;
  height: 14px;
  accent-color: var(--green);
}

/* ── SETTINGS ───────────────────────────────────────────────────────────── */

.settings-section {
  display: grid;
  gap: 14px;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  gap: 14px;
}

.settings-panel {
  min-width: 0;
}

.settings-panel-head {
  align-items: flex-start;
  gap: 12px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.settings-kpi-row article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.settings-kpi-row small,
.settings-kpi-row span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.settings-kpi-row strong {
  display: block;
  margin: 3px 0 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.settings-brand-panel {
  display: grid;
  gap: 14px;
}

.settings-logo-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, .85fr);
  gap: 12px;
  align-items: stretch;
}

.settings-logo-preview,
.settings-logo-picker {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.settings-logo-preview {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
}

.settings-logo-preview .brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  padding: 8px;
}

.settings-logo-preview strong,
.settings-logo-preview small {
  display: block;
  min-width: 0;
}

.settings-logo-preview strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.settings-logo-preview small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-logo-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-style: dashed;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}

.settings-logo-picker:hover {
  border-color: rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .045);
  box-shadow: var(--shadow-xs);
}

.settings-logo-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-logo-picker > span[data-icon] {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--blue);
}

.settings-logo-picker > span[data-icon] svg {
  width: 17px;
  height: 17px;
}

.settings-logo-picker strong,
.settings-logo-picker small {
  display: block;
  min-width: 0;
}

.settings-logo-picker strong {
  color: var(--ink);
  font-size: 13px;
}

.settings-logo-picker small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-subfamily-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  max-height: min(58vh, 520px);
  overflow: auto;
  margin-top: 14px;
  padding-right: 3px;
}

.settings-subfamily-check {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

.settings-subfamily-check.is-included {
  border-color: rgba(37, 111, 74, .35);
  background: var(--green-soft);
  box-shadow: inset 3px 0 0 var(--green);
}

.settings-subfamily-check input {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--green);
}

.settings-subfamily-check span {
  min-width: 0;
}

.settings-subfamily-check strong,
.settings-subfamily-check small {
  display: block;
}

.settings-subfamily-check strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-subfamily-check small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 620;
}

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

  .settings-logo-row {
    grid-template-columns: 1fr;
  }
}

.inv-subfamily-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line);
  box-shadow: 0 8px 20px rgba(14, 17, 23, .035);
}

.inv-summary-strip > div {
  min-width: 0;
  padding: 13px 15px;
  background: var(--surface);
}

.inv-summary-strip > div:first-child {
  box-shadow: inset 3px 0 0 var(--green);
}

.inv-summary-strip span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.inv-summary-strip strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-subfamily-summary {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(14, 17, 23, .035);
}

.inv-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.inv-summary-title strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 790;
}

.inv-summary-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
}

.inv-summary-table-wrap {
  overflow-x: auto;
  background: var(--surface);
}

.inv-summary-tabulator {
  min-height: 0;
  background: var(--surface);
}

.inv-summary-tabulator .tabulator-header .tabulator-col-title {
  color: var(--ink);
  font-weight: 850;
}

.inv-summary-tabulator--annual {
  height: 360px;
}

.inv-tabulator {
  height: min(620px, calc(100vh - 330px));
  min-height: 330px;
}

.inv-tabulator--year {
  height: min(650px, calc(100vh - 345px));
}

.inv-tabulator .tabulator,
.inv-summary-tabulator .tabulator {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.inv-tabulator .tabulator-row .tabulator-cell,
.inv-summary-tabulator .tabulator-row .tabulator-cell {
  padding-top: 5px;
  padding-bottom: 5px;
}

.inv-summary-tabulator .tabulator-tableholder {
  min-height: 0 !important;
}

.inv-summary-tabulator .tabulator-row {
  min-height: 30px;
}

.inv-summary-detail-row .tabulator-cell {
  background: #fbfaf7;
  color: var(--muted);
  font-size: 12px;
}

.inv-summary-detail-row .tabulator-cell:first-child {
  font-weight: 650;
}

.inv-tabulator .tabulator-group {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  background: #f5f3ec;
  box-shadow: inset 3px 0 0 rgba(37, 111, 74, .55);
}

.inv-tabulator-total-row .tabulator-cell {
  border-top: 1px solid var(--line-2);
  background: #f1f7f3 !important;
  color: var(--ink);
  font-weight: 820;
}

.inv-editable-cell {
  display: block;
  min-height: 22px;
  margin: -3px -5px;
  padding: 3px 5px;
  border-radius: var(--r-xs);
}

.inv-summary-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  font-size: 12.5px;
}

.inv-summary-table th,
.inv-summary-table td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.inv-summary-table th {
  position: static;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 740;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inv-summary-table tbody tr:nth-child(even):not(.inv-summary-total) td {
  background: #fdfcf9;
}

.inv-summary-table tbody tr:hover:not(.inv-summary-total) td {
  background: #f5f7f4;
}

.inv-summary-label {
  color: var(--ink);
  font-weight: 760;
}

.inv-summary-label span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 620;
}

.inv-summary-metric {
  color: var(--muted);
  font-weight: 720;
}

.inv-summary-total td {
  border-top: 1px solid var(--line-2);
  border-bottom: 0;
  background: #f1f7f3;
  color: var(--ink);
  font-weight: 820;
}

.inv-summary-total td:first-child {
  box-shadow: inset 3px 0 0 var(--green);
}

.inv-summary-total td:last-child { border-right: 0; }

.inv-summary-table--annual {
  min-width: 1260px;
  table-layout: fixed;
}

.inv-summary-table--annual th:first-child,
.inv-summary-table--annual td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 190px;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}

.inv-summary-table--annual tbody tr:nth-child(even):not(.inv-summary-total) td:first-child {
  background: #fdfcf9;
}

.inv-summary-table--annual tbody tr:hover:not(.inv-summary-total) td:first-child {
  background: #f5f7f4;
}

.inv-summary-table--annual .inv-summary-total td:first-child {
  background: #f1f7f3;
}

.inv-summary-table--annual th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 190px;
  background: var(--surface-2);
  box-shadow: 1px 0 0 var(--line);
}

.inv-summary-table--annual th:nth-child(2),
.inv-summary-table--annual td:nth-child(2) { width: 86px; }

.inv-summary-table--annual th:not(:first-child):not(:nth-child(2)),
.inv-summary-table--annual td:not(:first-child):not(:nth-child(2)) { width: 82px; }

.inv-summary-table--annual .inv-summary-total td {
  border-top-width: 0;
  border-bottom-width: 1px;
}

.inv-summary-table--annual .inv-summary-total-start td { border-top-width: 1px; }
.inv-summary-table--annual .inv-summary-total-end td { border-bottom-width: 0; }

.inv-month-wrap,
.inv-year-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(14, 17, 23, .04);
}

.inv-month-wrap { max-height: calc(100vh - 310px); }
.inv-year-wrap { max-height: calc(100vh - 330px); }

.inv-month-table,
.inv-year-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  font-size: 12.5px;
}

.inv-month-table {
  min-width: 1120px;
  table-layout: fixed;
}

.inv-year-table { min-width: 0; }

.inv-month-table th,
.inv-month-table td,
.inv-year-table th,
.inv-year-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}

.inv-month-table th,
.inv-year-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inv-month-table tbody .inv-item-row:nth-child(even) td,
.inv-year-table tbody .inv-item-row:nth-child(even) td {
  background: #fdfcf9;
}

.inv-month-table tbody .inv-item-row:nth-child(even) .inv-name-col,
.inv-year-table tbody .inv-item-row:nth-child(even) .inv-name-col {
  background: #fdfcf9;
}

.inv-month-table td,
.inv-year-table td { vertical-align: middle; }

.inv-name-col  { width: 280px; min-width: 240px; }
.inv-unit-col  { width: 58px; }
.inv-num-col   { width: 92px; }
.inv-price-col { width: 132px; }
.inv-del-col   { width: 42px; }

.inv-year-table {
  font-size: 11.5px;
  min-width: 0;
  table-layout: fixed;
}

.inv-year-table th,
.inv-year-table td {
  padding: 4px 6px;
  line-height: 1.15;
}

.inv-year-table .inv-item-row td { height: 25px; }

.inv-year-col-name { width: 220px; }
.inv-year-col-unit { width: 44px; }
.inv-year-col-num { width: 50px; }
.inv-year-col-money { width: 70px; }

.inv-year-table .inv-name-col {
  width: 220px;
  min-width: 220px;
}

.inv-year-table .inv-unit-col { width: 44px; }
.inv-year-table .inv-item-name {
  font-size: 11.5px;
  font-weight: 650;
}

.inv-year-table .inv-unit-pill {
  min-width: 24px;
  max-width: 36px;
  padding: 1px 5px;
  font-size: 9.5px;
}

.inv-month-table .inv-name-col,
.inv-year-table .inv-name-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}

.inv-month-table thead .inv-name-col,
.inv-year-table thead .inv-name-col {
  z-index: 4;
  background: var(--surface-2);
}

.inv-year-table thead tr:first-child th { z-index: 4; }
.inv-year-table thead tr:nth-child(2) th {
  top: 34px;
  z-index: 3;
}

.inv-year-table thead .inv-name-col,
.inv-year-table thead .inv-unit-col {
  top: 0;
  z-index: 5;
}

.inv-item-row:hover td,
.inv-item-row:hover .inv-name-col { background: var(--surface-2); }

.inv-item-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-item-meta {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-unit-pill {
  display: inline-flex;
  min-width: 30px;
  max-width: 48px;
  justify-content: center;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-cat-row td {
  padding: 8px 10px;
  border-top: 1px solid var(--line-2);
  background: #f5f3ec;
  box-shadow: inset 3px 0 0 rgba(37, 111, 74, .55);
}

.inv-cat-row .inv-name-col { background: #f5f3ec; }
.inv-year-table .inv-cat-row td { padding: 6px 8px; }
.inv-year-table .inv-group-title { font-size: 11px; }

.inv-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inv-group-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-group-count {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 680;
}

.inv-cat-total {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 560;
}

.inv-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  box-shadow: 0 -1px 0 var(--line);
}

.inv-editable {
  position: relative;
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t);
}

.inv-editable:hover {
  background: var(--blue-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(33, 81, 199, .18);
}

.inv-placeholder { color: var(--muted-2); }

.inv-inline-input {
  width: min(96px, 100%);
  min-width: 72px;
  border: 1px solid var(--blue);
  border-radius: var(--r-xs);
  padding: 4px 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: right;
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 81, 199, .12);
}

.inv-neg {
  color: var(--red);
  font-weight: 680;
}

.inv-year-money {
  color: var(--ink-2);
  font-weight: 620;
}

.inv-actions {
  width: 32px;
  text-align: center;
}

.inv-delete-btn {
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.inv-delete-btn:hover {
  border-color: #e0b8b8;
  background: var(--red-soft);
  color: var(--red);
}

.inv-error {
  padding: 18px;
  color: var(--red);
}

/* Year table */
.inv-month-group {
  border-left: 1px solid var(--line-2);
  background: #f1f0eb;
  text-align: center;
}

.inv-subhdr {
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 680;
}

.inv-year-table .inv-subhdr:nth-child(4n + 1) { border-left-color: var(--line-2); }
.inv-year-table .inv-subhdr:nth-child(4n) { border-right: 1px solid var(--line-2); }
.inv-year-table tbody td:nth-child(4n + 2):not(.inv-unit-col) { border-right: 1px solid var(--line-2); }

/* Price source badges */
.inv-src-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
  vertical-align: middle;
}

.inv-src-factura { background: var(--green-soft); color: var(--green); }
.inv-src-historico { background: var(--amber-soft); color: var(--amber); }
.inv-src-manual { background: var(--blue-soft); color: var(--blue); }
.inv-src-none { background: transparent; color: var(--muted-2); }

/* ─────────────────────────────────────────────
   CATERING ANNEX
───────────────────────────────────────────── */
.annex-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(243,242,238,.96) 260px),
    var(--bg);
}

.annex-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
}

.annex-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.annex-brand span:last-child {
  display: grid;
  line-height: 1.15;
}

.annex-brand small,
.annex-product-head span,
.annex-product-totals small,
.annex-category-total small,
.annex-kpi-grid span,
.annex-match-summary small,
.annex-ingredient-table small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.annex-actions,
.annex-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.annex-shell {
  width: min(1540px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.annex-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.annex-heading h1 {
  margin: 3px 0 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.annex-status {
  max-width: 520px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.annex-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.annex-kpi-grid article,
.annex-match-summary article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.annex-kpi-grid strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}

.annex-workspace {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.annex-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.annex-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.annex-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.annex-controls input,
.annex-controls select,
.annex-match-input,
.annex-price-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}

.annex-controls input,
.annex-controls select {
  height: 36px;
  padding: 0 10px;
}

.annex-file-control input {
  height: auto;
  padding: 8px 10px;
}

.annex-file-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}

.annex-controls input:focus,
.annex-controls select:focus,
.annex-match-input:focus,
.annex-price-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33,81,199,.11);
}

.annex-match-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-top: 2px;
}

.annex-match-summary strong {
  font-size: 17px;
  line-height: 1.1;
}

.annex-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.annex-totals {
  overflow-x: auto;
}

.annex-total-table,
.annex-ingredient-table {
  width: 100%;
  border-collapse: collapse;
}

.annex-total-table th,
.annex-total-table td,
.annex-ingredient-table th,
.annex-ingredient-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.annex-total-table th,
.annex-ingredient-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.annex-total-table .numeric,
.annex-ingredient-table .numeric {
  text-align: right;
}

.annex-category {
  display: grid;
  gap: 10px;
}

.annex-category + .annex-category {
  margin-top: 14px;
}

.annex-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}

.annex-category-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.annex-category-total {
  display: grid;
  gap: 1px;
  text-align: right;
}

.annex-category-total strong {
  font-size: 17px;
}

.annex-product {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.annex-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.annex-product-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
}

.annex-product-totals {
  display: grid;
  gap: 1px;
  min-width: 128px;
  text-align: right;
}

.annex-product-totals strong {
  font-size: 18px;
}

.annex-product-grid {
  overflow-x: auto;
}

.annex-ingredient-table {
  min-width: 1120px;
}

.annex-ingredient-table tbody tr:hover {
  background: #faf9f6;
}

.annex-ingredient-table td:first-child {
  min-width: 230px;
}

.annex-ingredient-table td:first-child strong,
.annex-ingredient-table td:first-child small {
  display: block;
}

.annex-price-input {
  max-width: 104px;
  height: 31px;
  padding: 0 8px;
  text-align: right;
}

.annex-match-input {
  width: 190px;
  height: 31px;
  padding: 0 8px;
}

.annex-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.annex-badge.own {
  background: var(--green-soft);
  color: var(--green);
}

.annex-badge.manual {
  background: var(--blue-soft);
  color: var(--blue);
}

.annex-badge.excel {
  background: var(--amber-soft);
  color: var(--amber);
}

.annex-product-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.annex-product-footer span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 690;
}

.annex-empty {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

@media (max-width: 760px) {
  .users-layout { grid-template-columns: 1fr; }
  .permission-grid { grid-template-columns: 1fr; }
  .recipe-ingredient-form { grid-template-columns: 1fr; }
  .recipe-edit-table { max-height: 50vh; }
  .recipe-row-actions { grid-column: 2; }
  .recipe-technical-header,
  .recipe-technical-kpis,
  .recipe-technical-grid {
    grid-template-columns: 1fr;
  }
  .recipe-technical-photo { min-height: 130px; }
  .inv-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-month-wrap,
  .inv-year-wrap { max-height: none; }
  .event-hub {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .event-hub-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .event-hub-actions {
    justify-content: flex-start;
  }
  .receivables-head {
    display: grid;
    gap: 12px;
  }
  .receivables-tools {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .receivables-tools .segmented-control {
    grid-column: auto;
  }
  .receivables-rule-panel,
  .receivables-rule-form { grid-template-columns: 1fr; }
  .receivables-rule-list { grid-column: auto; }
  .receivables-dashboard { grid-template-columns: 1fr; }
  .receivables-wrap { max-height: none; }
  .ar-aging-row { grid-template-columns: 58px minmax(80px, 1fr) 104px; }
  .inv-name-col { width: 220px; min-width: 220px; }
  .annex-topbar,
  .annex-heading,
  .annex-product-head,
  .annex-category-head {
    align-items: stretch;
    flex-direction: column;
  }
  .annex-actions { width: 100%; }
  .annex-actions > * { flex: 1 1 130px; }
  .annex-shell { width: min(100% - 20px, 1540px); padding-top: 18px; }
  .annex-heading h1 { font-size: 24px; }
  .annex-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annex-workspace { grid-template-columns: 1fr; }
  .annex-controls { position: static; }
  .annex-product-totals,
  .annex-category-total { text-align: left; }
}

/* ─────────────────────────────────────────────
   KPI UNDERLINE SYSTEM
───────────────────────────────────────────── */
.ph-stats {
  gap: 12px;
  padding: 8px 20px 14px;
  border-top: 0;
  background: rgba(255,255,255,.78);
}

.book-summary,
.sales-summary,
.report-kpis,
.report-kpi-strip,
.mom-kpis,
.event-hub-steps,
.coffee-catalog-summary,
.coffee-calendar-summary,
.daily-summary,
.recipe-technical-kpis,
.supplier-detail-kpis,
.run-list,
.inv-summary-strip,
.annex-kpi-grid,
.coffee-quote-kpis {
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.ph-stat,
.book-summary article,
.sales-summary article,
.report-kpis article,
.report-kpi-strip article,
.mom-kpis article,
.event-hub-steps article,
.coffee-catalog-summary article,
.coffee-calendar-summary article,
.daily-summary article,
.recipe-technical-kpis article,
.supplier-detail-kpis article,
.run-list div,
.inv-summary-strip > div,
.annex-kpi-grid article,
.annex-match-summary article,
.coffee-quote-kpis div {
  --kpi-accent: var(--blue);
  min-width: 0;
  min-height: 72px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 12px 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  overflow: visible;
  transition: transform var(--t), filter var(--t);
}

.ph-stat::after,
.book-summary article::after,
.sales-summary article::after,
.report-kpis article::after,
.report-kpi-strip article::after,
.mom-kpis article::after,
.event-hub-steps article::after,
.coffee-catalog-summary article::after,
.coffee-calendar-summary article::after,
.daily-summary article::after,
.recipe-technical-kpis article::after,
.supplier-detail-kpis article::after,
.run-list div::after,
.inv-summary-strip > div::after,
.annex-kpi-grid article::after,
.annex-match-summary article::after,
.coffee-quote-kpis div::after {
  content: "";
  position: absolute;
  inset: auto auto 0 50%;
  width: min(76px, 64%);
  height: 6px;
  border-radius: 999px;
  background: var(--kpi-accent);
  box-shadow: 0 8px 18px rgba(16, 24, 40, .11);
  transform: translateX(-50%);
}

.ph-stat:hover,
.book-summary article:hover,
.sales-summary article:hover,
.report-kpis article:hover,
.report-kpi-strip article:hover,
.mom-kpis article:hover,
.event-hub-steps article:hover,
.coffee-catalog-summary article:hover,
.coffee-calendar-summary article:hover,
.daily-summary article:hover,
.recipe-technical-kpis article:hover,
.supplier-detail-kpis article:hover,
.run-list div:hover,
.inv-summary-strip > div:hover,
.annex-kpi-grid article:hover,
.annex-match-summary article:hover,
.coffee-quote-kpis div:hover {
  filter: saturate(1.04);
  transform: translateY(-1px);
}

.book-summary > :nth-child(1),
.sales-summary > :nth-child(1),
.report-kpis > :nth-child(1),
.report-kpi-strip > :nth-child(1),
.mom-kpis > :nth-child(1),
.event-hub-steps > :nth-child(1),
.coffee-catalog-summary > :nth-child(1),
.coffee-calendar-summary > :nth-child(1),
.daily-summary > :nth-child(1),
.recipe-technical-kpis > :nth-child(1),
.supplier-detail-kpis > :nth-child(1),
.run-list > :nth-child(1),
.inv-summary-strip > :nth-child(1),
.annex-kpi-grid > :nth-child(1),
.coffee-quote-kpis > :nth-child(1) { --kpi-accent: var(--green); }

.book-summary > :nth-child(2),
.sales-summary > :nth-child(2),
.report-kpis > :nth-child(2),
.report-kpi-strip > :nth-child(2),
.mom-kpis > :nth-child(2),
.event-hub-steps > :nth-child(2),
.coffee-catalog-summary > :nth-child(2),
.coffee-calendar-summary > :nth-child(2),
.daily-summary > :nth-child(2),
.recipe-technical-kpis > :nth-child(2),
.supplier-detail-kpis > :nth-child(2),
.run-list > :nth-child(2),
.inv-summary-strip > :nth-child(2),
.annex-kpi-grid > :nth-child(2),
.coffee-quote-kpis > :nth-child(2) { --kpi-accent: var(--blue); }

.book-summary > :nth-child(3),
.sales-summary > :nth-child(3),
.report-kpis > :nth-child(3),
.report-kpi-strip > :nth-child(3),
.mom-kpis > :nth-child(3),
.event-hub-steps > :nth-child(3),
.coffee-catalog-summary > :nth-child(3),
.coffee-calendar-summary > :nth-child(3),
.daily-summary > :nth-child(3),
.recipe-technical-kpis > :nth-child(3),
.supplier-detail-kpis > :nth-child(3),
.run-list > :nth-child(3),
.inv-summary-strip > :nth-child(3),
.annex-kpi-grid > :nth-child(3),
.coffee-quote-kpis > :nth-child(3) { --kpi-accent: var(--amber); }

.book-summary > :nth-child(4),
.sales-summary > :nth-child(4),
.report-kpis > :nth-child(4),
.report-kpi-strip > :nth-child(4),
.mom-kpis > :nth-child(4),
.event-hub-steps > :nth-child(4),
.coffee-catalog-summary > :nth-child(4),
.coffee-calendar-summary > :nth-child(4),
.daily-summary > :nth-child(4),
.recipe-technical-kpis > :nth-child(4),
.supplier-detail-kpis > :nth-child(4),
.run-list > :nth-child(4),
.inv-summary-strip > :nth-child(4),
.annex-kpi-grid > :nth-child(4),
.coffee-quote-kpis > :nth-child(4) { --kpi-accent: var(--teal); }

.book-summary > :nth-child(5),
.sales-summary > :nth-child(5),
.report-kpis > :nth-child(5),
.report-kpi-strip > :nth-child(5),
.mom-kpis > :nth-child(5),
.event-hub-steps > :nth-child(5),
.coffee-catalog-summary > :nth-child(5),
.coffee-calendar-summary > :nth-child(5),
.daily-summary > :nth-child(5),
.recipe-technical-kpis > :nth-child(5),
.supplier-detail-kpis > :nth-child(5),
.run-list > :nth-child(5),
.inv-summary-strip > :nth-child(5),
.annex-kpi-grid > :nth-child(5),
.coffee-quote-kpis > :nth-child(5) { --kpi-accent: var(--violet); }

.book-summary > :nth-child(6),
.sales-summary > :nth-child(6),
.report-kpis > :nth-child(6),
.report-kpi-strip > :nth-child(6),
.mom-kpis > :nth-child(6),
.event-hub-steps > :nth-child(6),
.coffee-catalog-summary > :nth-child(6),
.coffee-calendar-summary > :nth-child(6),
.daily-summary > :nth-child(6),
.recipe-technical-kpis > :nth-child(6),
.supplier-detail-kpis > :nth-child(6),
.run-list > :nth-child(6),
.inv-summary-strip > :nth-child(6),
.annex-kpi-grid > :nth-child(6),
.coffee-quote-kpis > :nth-child(6) { --kpi-accent: var(--rose); }

.ph-stat--green,
.report-kpi-strip article.accent,
.report-kpis article.accent,
.overview-kpi--green { --kpi-accent: var(--green); }

.overview-kpi--teal { --kpi-accent: var(--teal); }

.ph-stat--amber,
.report-kpi-strip article.warn,
.report-kpis article.warn,
.report-kpis article.attention,
.overview-kpi--amber { --kpi-accent: var(--amber); }

.ph-stat--red,
.report-kpi-strip article.bad,
.report-kpis article.bad,
.overview-kpi--red { --kpi-accent: var(--red); }

.ph-stat-value,
.book-summary strong,
.sales-summary strong,
.report-kpis strong,
.report-kpi-strip strong,
.mom-kpis strong,
.event-hub-steps strong,
.coffee-catalog-summary strong,
.coffee-calendar-summary strong,
.daily-summary strong,
.recipe-technical-kpis strong,
.supplier-detail-kpis strong,
.run-list dd,
.inv-summary-strip strong,
.annex-kpi-grid strong,
.annex-match-summary strong,
.coffee-quote-kpis strong {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
}

.book-summary small,
.book-summary span,
.sales-summary small,
.sales-summary span,
.report-kpis small,
.report-kpis span,
.report-kpi-strip small,
.report-kpi-strip span,
.mom-kpis small,
.mom-kpis span,
.event-hub-steps small,
.event-hub-steps span,
.coffee-catalog-summary small,
.coffee-calendar-summary small,
.daily-summary small,
.recipe-technical-kpis small,
.supplier-detail-kpis small,
.run-list dt,
.inv-summary-strip span,
.coffee-quote-kpis span,
.annex-kpi-grid small,
.annex-kpi-grid span,
.annex-match-summary small,
.annex-match-summary span {
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

.book-summary span,
.sales-summary span {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 620;
}

.book-summary strong,
.sales-summary strong {
  font-size: clamp(17px, 1.15vw, 23px);
}

.ph-stat-label,
.ph-stat-sub {
  width: 100%;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

.ph-stat-sub,
.report-kpi-strip span,
.mom-kpis span,
.event-hub-steps span {
  color: var(--muted-2);
  font-weight: 600;
}

.overview-kpi {
  min-height: 132px;
  align-items: center;
  justify-content: center;
  padding: 15px 14px 22px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

.overview-kpi::before {
  display: none;
}

.overview-kpi::after {
  content: "";
  position: absolute;
  inset: auto auto 0 50%;
  width: min(84px, 64%);
  height: 7px;
  border-radius: 999px;
  background: var(--kpi-accent);
  box-shadow: 0 8px 18px rgba(16, 24, 40, .11);
  transform: translateX(-50%);
}

.overview-kpi > div {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.overview-kpi small,
.overview-kpi strong,
.overview-kpi span {
  margin: 0;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}

.overview-spark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 0;
  opacity: .18;
  pointer-events: none;
}

.inv-summary-strip > div:first-child {
  box-shadow: none;
}

.coffee-calendar-summary,
.daily-summary {
  grid-template-columns: repeat(4, minmax(86px, max-content));
}

.coffee-calendar-summary article,
.daily-summary article,
.coffee-catalog-summary article {
  min-height: 58px;
}

.run-list div {
  grid-template-columns: 1fr;
}

@media (max-width: 680px) {
  .ph-stats,
  .book-summary,
  .sales-summary,
  .report-kpis,
  .report-kpi-strip,
  .mom-kpis,
  .event-hub-steps,
  .coffee-catalog-summary,
  .coffee-calendar-summary,
  .daily-summary,
  .recipe-technical-kpis,
  .supplier-detail-kpis,
  .run-list,
  .inv-summary-strip,
  .annex-kpi-grid,
  .coffee-quote-kpis {
    gap: 10px;
  }

  .ph-stat,
  .book-summary article,
  .sales-summary article,
  .report-kpis article,
  .report-kpi-strip article,
  .mom-kpis article,
  .event-hub-steps article,
  .coffee-catalog-summary article,
  .coffee-calendar-summary article,
  .daily-summary article,
  .recipe-technical-kpis article,
  .supplier-detail-kpis article,
  .run-list div,
  .inv-summary-strip > div,
  .annex-kpi-grid article,
  .annex-match-summary article,
  .coffee-quote-kpis div {
    min-height: 68px;
    padding-inline: 8px;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body.recipe-tech-printing {
    background: #fff;
  }

  body.recipe-tech-printing * {
    visibility: hidden !important;
  }

  body.recipe-tech-printing #recipeTechnicalSheetModal,
  body.recipe-tech-printing #recipeTechnicalSheetModal * {
    visibility: visible !important;
  }

  body.recipe-tech-printing #recipeTechnicalSheetModal {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.recipe-tech-printing .recipe-technical-modal {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.recipe-tech-printing .recipe-technical-actions {
    display: none !important;
  }

  body.recipe-tech-printing .recipe-technical-header {
    grid-template-columns: minmax(0, 1fr) 45mm;
  }

  body.recipe-tech-printing .recipe-technical-photo {
    min-height: 36mm;
  }

  body.recipe-tech-printing .recipe-technical-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  body.recipe-tech-printing .recipe-technical-section,
  body.recipe-tech-printing .recipe-technical-box,
  body.recipe-tech-printing .recipe-technical-kpis article {
    break-inside: avoid;
  }

  body.annex-page {
    background: #fff;
  }

  body.annex-page .annex-topbar,
  body.annex-page .annex-controls,
  body.annex-page .toast {
    display: none !important;
  }

  body.annex-page .annex-shell {
    width: 100%;
    padding: 0;
  }

  body.annex-page .annex-workspace {
    display: block;
  }

  body.annex-page .annex-product,
  body.annex-page .annex-category-head,
  body.annex-page .annex-kpi-grid article,
  body.annex-page .annex-panel {
    break-inside: avoid;
    box-shadow: none !important;
  }

  body.annex-page .annex-ingredient-table {
    min-width: 0;
    font-size: 10px;
  }

  body.annex-page .annex-price-input {
    border: 0;
    padding: 0;
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN REFRESH · v117  (appended override layer)
   ── Delivered real type, gave KPIs true cards, restored depth & radius
      hierarchy, sharpened tables, added tasteful motion. Reuses existing
      --kpi-accent / nth-child colour machinery so palette is preserved.
   ═══════════════════════════════════════════════════════════════════════ */

:root { --font-display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif; }

/* — Typography delivery ————————————————————————————————————————— */
body {
  font-family: "Inter", "Inter Variable", ui-sans-serif, system-ui,
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Display cut + optical tightening for titles and headline numbers */
.ph-title,
.login-panel h1,
.loader-copy h1,
.brand-text strong,
.overview-kpi strong,
.book-summary strong,
.sales-summary strong,
.report-kpis strong,
.report-kpi-strip strong,
.mom-kpis strong,
.ph-stat-value {
  font-family: var(--font-display);
  letter-spacing: -.018em;
}

/* Tabular figures — align every column of money. The pro move for finance UIs. */
.ph-stat-value,
.overview-kpi strong,
.book-summary strong, .sales-summary strong, .report-kpis strong,
.report-kpi-strip strong, .mom-kpis strong, .recipe-technical-kpis strong,
.supplier-detail-kpis strong, .inv-summary-strip strong, .annex-kpi-grid strong,
.coffee-quote-kpis strong, .coffee-catalog-summary strong,
.coffee-calendar-summary strong, .daily-summary strong, .event-hub-steps strong,
.tabulator, .tabulator .tabulator-cell,
.amount, .money, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* — KPI strips → real metric cards ——————————————————————————————— */
.ph-stat,
.book-summary article, .sales-summary article, .report-kpis article,
.report-kpi-strip article, .mom-kpis article, .event-hub-steps article,
.coffee-catalog-summary article, .coffee-calendar-summary article,
.daily-summary article, .recipe-technical-kpis article,
.supplier-detail-kpis article, .run-list div, .inv-summary-strip > div,
.annex-kpi-grid article, .annex-match-summary article,
.coffee-quote-kpis div, .overview-kpi {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 16px 16px 17px !important;
  overflow: hidden !important;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t) !important;
}

/* Accent moves from a detached bottom pill to a crisp full-width top rule */
.ph-stat::after,
.book-summary article::after, .sales-summary article::after,
.report-kpis article::after, .report-kpi-strip article::after,
.mom-kpis article::after, .event-hub-steps article::after,
.coffee-catalog-summary article::after, .coffee-calendar-summary article::after,
.daily-summary article::after, .recipe-technical-kpis article::after,
.supplier-detail-kpis article::after, .run-list div::after,
.inv-summary-strip > div::after, .annex-kpi-grid article::after,
.annex-match-summary article::after, .coffee-quote-kpis div::after,
.overview-kpi::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: var(--kpi-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: .92;
  transition: height var(--t), opacity var(--t) !important;
}

/* Lift on hover; accent thickens slightly */
.ph-stat:hover,
.book-summary article:hover, .sales-summary article:hover,
.report-kpis article:hover, .report-kpi-strip article:hover,
.mom-kpis article:hover, .event-hub-steps article:hover,
.coffee-catalog-summary article:hover, .coffee-calendar-summary article:hover,
.daily-summary article:hover, .recipe-technical-kpis article:hover,
.supplier-detail-kpis article:hover, .run-list div:hover,
.inv-summary-strip > div:hover, .annex-kpi-grid article:hover,
.annex-match-summary article:hover, .coffee-quote-kpis div:hover,
.overview-kpi:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--line-2) !important;
  filter: none !important;
}
.ph-stat:hover::after,
.overview-kpi:hover::after,
.book-summary article:hover::after, .sales-summary article:hover::after,
.report-kpis article:hover::after, .report-kpi-strip article:hover::after {
  height: 4px !important;
  opacity: 1;
}

/* The little overview sparkline now reads as a quiet card watermark */
.overview-spark { opacity: .12 !important; }

/* — Tables: cleaner separators, calmer header, clearer hover ————————— */
.tabulator {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
  background: var(--surface-2);
}
.tabulator .tabulator-header .tabulator-col { border-right-color: transparent; }
.tabulator .tabulator-cell { border-right-color: transparent; }
.tabulator .tabulator-row { transition: background var(--t); }
.tabulator .tabulator-row.tabulator-selectable:hover { background: var(--blue-soft); }

/* — Controls: secondary buttons get the same lift as the rest ———————— */
.table-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* — Surfaces: feature panels pick up the larger radius & refined depth —— */
.report-panel,
.report-side-panel,
.overview-priority,
.overview-consumption {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* — Motion: a tasteful staggered entrance for metric cards ——————————— */
@keyframes lc-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .overview-kpi-grid > *,
  .book-summary > *, .sales-summary > *,
  .report-kpis > *, .report-kpi-strip > *, .mom-kpis > * {
    animation: lc-rise .44s var(--ease) both;
  }
  .overview-kpi-grid > :nth-child(2), .book-summary > :nth-child(2), .sales-summary > :nth-child(2), .report-kpis > :nth-child(2), .report-kpi-strip > :nth-child(2), .mom-kpis > :nth-child(2) { animation-delay: .05s; }
  .overview-kpi-grid > :nth-child(3), .book-summary > :nth-child(3), .sales-summary > :nth-child(3), .report-kpis > :nth-child(3), .report-kpi-strip > :nth-child(3), .mom-kpis > :nth-child(3) { animation-delay: .10s; }
  .overview-kpi-grid > :nth-child(4), .book-summary > :nth-child(4), .sales-summary > :nth-child(4), .report-kpis > :nth-child(4), .report-kpi-strip > :nth-child(4), .mom-kpis > :nth-child(4) { animation-delay: .15s; }
  .overview-kpi-grid > :nth-child(5), .book-summary > :nth-child(5), .sales-summary > :nth-child(5), .report-kpis > :nth-child(5), .report-kpi-strip > :nth-child(5), .mom-kpis > :nth-child(5) { animation-delay: .20s; }
  .overview-kpi-grid > :nth-child(6), .book-summary > :nth-child(6), .sales-summary > :nth-child(6), .report-kpis > :nth-child(6), .report-kpi-strip > :nth-child(6), .mom-kpis > :nth-child(6) { animation-delay: .25s; }
  .overview-kpi-grid > :nth-child(7), .book-summary > :nth-child(7), .sales-summary > :nth-child(7) { animation-delay: .30s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FILTER SYSTEM · v117  (unified toolbars, dropdowns & controls)
   ── One control height, one radius, custom dropdown chevron, tidy spacing
      and consistent caption labels across every view's filter bar.
   ═══════════════════════════════════════════════════════════════════════ */

:root { --control-h: 40px; }

/* — All toolbar/filter containers share the same rhythm ————————————— */
.book-tools, .sales-tools, .report-tools, .menu-tools, .overview-tools,
.report-filter, .report-filter-strip, .report-sales-filters,
.consumption-filter-strip, .consumption-advanced-filters,
.menu-filter-strip, .daily-date-tools, .benchmark-tools, .receivables-tools,
.annex-controls {
  gap: 10px;
  align-items: end;
}

/* — Custom dropdowns: kill the OS chrome, add a crisp chevron —————————— */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: var(--control-h);
  padding: 0 34px 0 12px;
  font-weight: 540;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select:hover { border-color: var(--line-2); background-color: var(--surface-2); }
select:focus { background-color: #fff; }

/* — Shared control height so every box lines up on one baseline ————————— */
input, select { height: var(--control-h); }
.search-box,
.date-range-trigger,
.segmented-control { height: var(--control-h); min-height: var(--control-h); }
.primary-action, .secondary-action, .icon-button { min-height: var(--control-h); }
.icon-button { width: var(--control-h); }

/* — Search & date controls: trimmer footprint, same skin as the rest ——— */
.search-box { min-width: 200px; }
.date-range-filter { min-width: 200px; }
.search-box:hover,
.date-range-trigger:hover { border-color: var(--line-2); }

/* In flexible filter rows the search field absorbs the slack (no dead space) */
.sales-tools .search-box,
.report-sales-filters .search-box,
.report-filter .search-box,
.consumption-filter-strip .search-box { flex: 1 1 220px; }

/* — Segmented control: tighter, crisper, consistent with the box radius —— */
.segmented-control { padding: 4px; border-radius: var(--r); gap: 3px; }
.segmented-control button { height: 32px; border-radius: var(--r-sm); font-weight: 620; }
.segmented-control button.active { box-shadow: var(--shadow-xs); }

/* — Captions: tiny, uppercase, uniform across every filter ————————————— */
.book-tools > label, .sales-tools > label, .report-tools > label,
.menu-tools > label, .report-filter > label, .report-filter-strip > label,
.report-sales-filters > label, .consumption-filter-strip > label,
.consumption-advanced-filters > label, .menu-filter-strip > label,
.benchmark-tools > label, .receivables-tools > label, .daily-date-tools > label,
.menu-exclusion-control > label {
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Consistent labelled-dropdown column width in the main flex toolbars */
.book-tools > label, .sales-tools > label, .report-tools > label { width: 148px; }

/* Focus ring parity for the custom controls */
.search-box:focus-within,
.date-range-trigger:focus-visible,
.segmented-control button:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus);
}

/* ─────────────────────────────────────────────────────────────────────────
   KPI v120 — strips adapt to their (now leaner) card count instead of fixed
   6/4-column grids, so 2-4 KPIs always fill the row evenly.
   ───────────────────────────────────────────────────────────────────────── */
.book-summary, .sales-summary, .report-kpis, .report-kpi-strip,
.menu-kpis, .consumption-kpis, .mom-kpis, .inv-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

/* ── KPIs in the page-header title row · compact, single row (no extra height) ─
   High-specificity (#phStats lives inside .ph-top) so it wins in every theme. */
.ph-top { align-items: center; }
.ph-top > .ph-title-group { flex: 1 1 auto; min-width: 0; }
.ph-top > .ph-period { flex: 0 0 auto; }
.ph-top > .ph-stats {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  overflow-x: auto;
}
.ph-top > .ph-stats .ph-stat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ph-top > .ph-stats .ph-stat::before,
.ph-top > .ph-stats .ph-stat::after { display: none !important; }
.ph-top > .ph-stats .ph-stat-value { font-size: 15px; line-height: 1.05; margin: 0; white-space: nowrap; }
.ph-top > .ph-stats .ph-stat-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; margin: 0; white-space: nowrap; }
.ph-top > .ph-stats .ph-stat-sub { display: none; }

/* These views now show their KPIs in the header → hide the redundant in-view strips. */
#view-book .book-summary,
#view-sales .sales-summary,
#view-menu #menuKpis,
#view-reconciliation .book-summary,
#view-mom #momKpis,
#view-reports #reportKpiStrip,
#view-consumption #consumptionKpis,
#view-inventory .inv-summary-strip { display: none !important; }

/* Period (date-range) control relocated into the header top bar */
.ph-period { display: flex; align-items: center; flex: 0 0 auto; }
.ph-period .date-range-filter { margin: 0; }
.ph-period:empty { display: none; }

/* Header top bar must never clip its KPIs/controls at the frame edge. */
.ph-top { overflow: visible; padding-right: 40px; gap: 16px; }
.ph-top > .ph-stats { overflow: visible; gap: 16px; }
.ph-top .icon-button,
.ph-top .date-range-trigger { box-shadow: none !important; }

/* Header KPI = compact chip with a uniform striking outline + glow + a light
   flowing around the border. Recolor everything from one place: --ph-kpi (RGB). */
:root { --ph-kpi: 6, 182, 212; }            /* striking color — change RGB here to recolor every KPI outline */

.ph-top > .ph-stats .ph-stat {
  position: relative !important;
  padding: 6px 15px !important;
  border: 1.5px solid rgba(var(--ph-kpi), .85) !important;
  border-radius: 12px !important;
  background: var(--surface, #fff) !important;
  box-shadow: 0 0 9px -2px rgba(var(--ph-kpi), .45) !important;
  overflow: visible !important;
}
.ph-top > .ph-stats .ph-stat::before,
.ph-top > .ph-stats .ph-stat::after { display: none !important; }

/* Eventos / Agenda: their KPIs now live in the header → hide the in-view strips
   (the Eventos "Centro del flujo" hub keeps its title + Catálogo/Agenda/Cobranza buttons). */
#view-coffee .event-hub-steps,
#view-calendar .coffee-calendar-summary { display: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   Header KPI pills — thicker, multi-colour swirl border (CLASSIC theme only)
   Scoped to html[data-theme="default"] so the eccentric/calm themes are
   untouched. The pill's ::after top line is hidden in the .ph-top layout, so
   the visible accent is the BORDER — turn it into a thicker, animated rainbow
   via the padding-box + border-box double-background trick (this keeps the
   rounded corners, which a plain border-image would square off).
   Only .ph-stat (page-header KPIs) is targeted — Resumen (.overview-kpi) and
   the in-page summary strips are deliberately left alone.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-theme="default"] .ph-top > .ph-stats .ph-stat {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(90deg,
      var(--green), var(--teal), var(--blue), var(--violet),
      var(--rose), var(--amber), var(--green)
    ) border-box !important;
  background-size: 100% 100%, 150% 100% !important;
  box-shadow: 0 1px 7px -2px rgba(16, 24, 40, .18) !important;
  animation: phStatSwirl 4.5s linear infinite;
}
@keyframes phStatSwirl {
  from { background-position: 0 0,   0% 50%; }
  to   { background-position: 0 0, 150% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="default"] .ph-top > .ph-stats .ph-stat { animation: none !important; }
}