/* ════════════════════════════════════════════════════════════════════════
   StockBata — Light Blue theme
   ────────────────────────────────────────────────────────────────────────
   Loaded AFTER app.css. It only re-tunes the CSS colour tokens (custom
   properties) that app.css already references, so the entire UI — including
   every manufacturing page scoped to body[data-feature="mfg"] — adopts a
   fresh light-blue-on-white palette without editing the base stylesheet.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --primary:       #2f86d6;   /* sky blue */
  --primary-light: #e8f3fc;   /* pale blue tint */
  --primary-dark:  #1f6cb8;   /* deeper azure */
  --text:          #1e3346;   /* deep slate-blue */
  --text-muted:    #5b7187;
  --text-light:    #93a7bb;
  --border:        #d7e5f1;
  --bg:            #f4f9fd;    /* airy blue-white */
  --surface:       #ffffff;

  --chrome:        #1f4e79;    /* deep blue (kept for any legacy refs) */
  --chrome-text:   #e8f3fc;

  /* The header is now inside the content card (no fixed top bar), so the
     body no longer needs to reserve space for one. */
  --chrome-h:      0px;

  --success:       #2e7d5e;
  --success-bg:    #eaf5f0;
  --success-border:#b2d8c8;
  --warning:       #8a6200;
  --warning-bg:    #fdf6e3;
  --warning-border:#e8d48a;
  --danger:        #c0392b;
  --danger-bg:     #fdeeec;
  --danger-border: #f2c2bb;
}

/* ── Manufacturing section: retune the brand tokens to light blue ────────── */
body[data-feature="mfg"] {
  --primary:       #2f86d6;
  --primary-light: #e8f3fc;
  --primary-dark:  #1f6cb8;

  --ds-brand:        #2f86d6;
  --ds-brand-hover:  #1f6cb8;
  --ds-brand-text:   #1f6cb8;
  --ds-brand-tint:   #e8f3fc;
  --ds-brand-border: #c4ddf3;
  --ds-accent:        #2f86d6;
  --ds-accent-text:   #1f6cb8;
  --ds-accent-tint:   #e8f3fc;
  --ds-accent-border: #c4ddf3;

  /* Signature light-blue gradient: azure → sky → aqua */
  --mfg-grad: linear-gradient(135deg, #1f6cb8 0%, #2f86d6 50%, #5fb6ef 100%);

  /* Card-action button palette (pale blue) */
  --mfg-act-bg:     #e8f3fc;
  --mfg-act-text:   #1f6cb8;
  --mfg-act-border: #c4ddf3;
}

/* Primary button hover gradient in light-blue tones */
body[data-feature="mfg"] .btn:hover,
body[data-feature="mfg"] .btn-filter:hover,
body[data-feature="mfg"] .dashboard-btn:hover,
body[data-feature="mfg"] .empty-state .empty-action:hover {
  background: linear-gradient(135deg, #1a5fa6 0%, #2f86d6 50%, #52a9e6 100%);
  box-shadow: 0 4px 14px rgba(47, 134, 214, .32);
}
body[data-feature="mfg"] .btn,
body[data-feature="mfg"] .btn-filter,
body[data-feature="mfg"] .dashboard-btn,
body[data-feature="mfg"] .empty-state .empty-action {
  box-shadow: 0 1px 2px rgba(47, 134, 214, .20);
}
body[data-feature="mfg"] input:focus,
body[data-feature="mfg"] textarea:focus,
body[data-feature="mfg"] select:focus {
  box-shadow: 0 0 0 3px rgba(47, 134, 214, .16);
}

/* ── Dark mode ────────────────────────────────────────────────────────────
   coffee-theme.css loads AFTER app.css, and its :root{} light values above
   have the SAME specificity as app.css's [data-theme="dark"]{} block — so on a
   specificity tie the LATER file (this one) wins, which re-lit the page even in
   dark mode (the toggle appeared to "do nothing"). We must therefore re-declare
   the dark tokens HERE so dark mode actually takes effect. */
[data-theme="dark"] {
  --primary:       #5fb6ef;   /* sky blue, readable on dark */
  --primary-light: #122536;
  --primary-dark:  #8fd0f8;
  --text:          #e6eef6;
  --text-muted:    #9fb3c6;
  --text-light:    #6b8197;
  --border:        #26415a;
  --bg:            #0b1622;    /* deep navy */
  --surface:       #142637;   /* panel background */
  --chrome:        #0b1622;
  --chrome-text:   #e6eef6;

  --success:       #4ade80;
  --success-bg:    #052e16;
  --success-border:#166534;
  --warning:       #fbbf24;
  --warning-bg:    #422006;
  --warning-border:#92400e;
  --danger:        #f87171;
  --danger-bg:     #450a0a;
  --danger-border: #7f1d1d;
}

/* Dark mode: a lighter sky blue so the brand still reads on dark surfaces */
[data-theme="dark"] body[data-feature="mfg"] {
  --primary:       #7bc0f5;
  --primary-light: #122536;
  --primary-dark:  #a6d6fa;
}

/* ── Manufacturing home page: the template hard-codes a violet hover
   (#ecebfe / #c7c4f7) on its cards/rows. Re-skin those to pale blue. ────── */
body[data-feature="mfg"] .mh-card:hover,
body[data-feature="mfg"] .mh-row:hover {
  background: #e8f3fc !important;
  border-color: #c4ddf3 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   StockBata — UI Refresh (A: consistent sizing + B: modern polish)
   ────────────────────────────────────────────────────────────────────────
   Loaded last, so it fine-tunes the existing design system without touching
   app.css or any template. Two goals:
     A) Every interactive control (buttons, filters, back, pagination, card
        actions) shares ONE sizing scale so the UI reads as uniform.
     B) A light, modern finish: unified radius + softer shadow scale, smooth
        hover-lift / press feedback, consistent focus rings.
   Everything is driven by the tokens below, so it is easy to retune in one
   place and trivially reversible (delete this block).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Sizing scale (A) ──────────────────────────────────────────────────
     --ctl-h       standard control height (buttons, filters, inputs)
     --ctl-h-sm    compact height (inline card-action / table buttons)
     --ctl-pad-x   standard horizontal padding
     --ctl-font    standard label size  */
  --ctl-h:        40px;
  --ctl-h-sm:     34px;
  --ctl-pad-x:    18px;
  --ctl-pad-x-sm: 14px;
  --ctl-font:     14px;
  --ctl-font-sm:  13px;

  /* ── Shape + motion (B) ───────────────────────────────────────────────── */
  --ctl-radius:   10px;      /* unified corner radius for controls */
  --ctl-radius-sm:8px;       /* compact controls */

  /* Softer, layered shadow scale for a fresher feel */
  --elev-1: 0 1px 2px rgba(31,78,121,.08), 0 1px 3px rgba(31,78,121,.06);
  --elev-2: 0 2px 6px rgba(31,78,121,.10), 0 4px 12px rgba(31,78,121,.08);
  --elev-3: 0 6px 18px rgba(31,78,121,.14), 0 2px 6px rgba(31,78,121,.08);

  /* Focus ring (brand-tinted, consistent everywhere) */
  --focus-ring: 0 0 0 3px rgba(47,134,214,.26);

  /* One easing + duration for all interactive transitions */
  --ease:  cubic-bezier(.4,0,.2,1);
  --dur:   .16s;
}

[data-theme="dark"] {
  --elev-1: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --elev-2: 0 2px 6px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.40);
  --elev-3: 0 6px 18px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
  --focus-ring: 0 0 0 3px rgba(123,192,245,.32);
}

/* ────────────────────────────────────────────────────────────────────────
   A — ONE SIZE for every primary-level control
   These are the buttons that sit together on toolbars / filter bars / page
   headers. Giving them the same height + radius is what makes the UI look
   "all the same size". Applied for every feature (not just mfg).
   ──────────────────────────────────────────────────────────────────────── */
.btn,
.btn-filter,
.btn-add,
.btn-clear,
.btn-export,
.btn-whatsapp,
.back-btn,
.back-link,
.empty-state .empty-action,
.dashboard-btn {
  min-height: var(--ctl-h);
  border-radius: var(--ctl-radius);
  font-size: var(--ctl-font);
  font-weight: 600;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* Normalise the padding of the smaller toolbar buttons up to the shared
   horizontal rhythm so widths feel intentional, not random. */
.btn-filter,
.btn-add,
.btn-clear,
.btn-export,
.btn-whatsapp {
  padding: 8px var(--ctl-pad-x);
}

/* Inputs/selects in filter bars match the control height so a field and the
   button beside it line up perfectly. */
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="number"],
.filter-bar input[type="search"],
.filter-bar select,
.action-bar input,
.action-bar select {
  min-height: var(--ctl-h);
  border-radius: var(--ctl-radius-sm);
}

/* Compact / inline buttons share the smaller size scale */
.btn-edit,
.btn-delete,
.btn-action,
.cc-btn {
  min-height: var(--ctl-h-sm);
  border-radius: var(--ctl-radius-sm);
  font-size: var(--ctl-font-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* ────────────────────────────────────────────────────────────────────────
   B — Modern finish: unified radius, softer shadows, tactile feedback
   ──────────────────────────────────────────────────────────────────────── */

/* Container + cards: slightly larger radius and the new soft elevation */
.container { border-radius: 14px; box-shadow: var(--elev-2); }
.cc-card,
.nav-item,
.stat-card,
.table-wrap,
.filter-bar { border-radius: 14px; }
.cc-card { box-shadow: var(--elev-1); }
.cc-card:hover { box-shadow: var(--elev-2); }

/* Buttons lift gently on hover and press down on click — feels responsive
   and friendly without being flashy. */
.btn:hover,
.btn-filter:hover,
.btn-add:hover,
.btn-export:hover,
.back-btn:hover,
.back-link:hover,
.dashboard-btn:hover,
.empty-state .empty-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
.btn:active,
.btn-filter:active,
.btn-add:active,
.btn-export:active,
.back-btn:active,
.back-link:active,
.dashboard-btn:active {
  transform: translateY(0);
  box-shadow: var(--elev-1);
}

.btn-edit:hover,
.btn-delete:hover,
.btn-action:hover,
.cc-btn:hover { transform: translateY(-1px); }
.btn-edit:active,
.btn-delete:active,
.btn-action:active,
.cc-btn:active { transform: translateY(0); }

/* One consistent, visible focus ring for keyboard users across all controls */
.btn:focus-visible,
.btn-filter:focus-visible,
.btn-add:focus-visible,
.btn-clear:focus-visible,
.btn-export:focus-visible,
.btn-whatsapp:focus-visible,
.back-btn:focus-visible,
.back-link:focus-visible,
.dashboard-btn:focus-visible,
.btn-edit:focus-visible,
.btn-delete:focus-visible,
.btn-action:focus-visible,
.cc-btn:focus-visible,
.nav-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Nav list rows get the same soft lift as buttons */
.nav-item { transition: border-color var(--dur) var(--ease),
                        box-shadow var(--dur) var(--ease),
                        transform var(--dur) var(--ease); }
.nav-item:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }

/* Pagination: pill-consistent sizing + the shared radius */
.pagination a,
.pagination span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ctl-radius-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ────────────────────────────────────────────────────────────────────────
   Manufacturing section (body[data-feature="mfg"]) — the primary UI.
   app.css gives this family deliberately different heights
   (.btn 40 / .btn-filter 34 / .btn-ghost 32 / .back-btn 38). Re-align them to
   ONE scale so buttons that sit together are the same size, and apply the
   unified radius. Uses !important only because the base rules there do.
   ──────────────────────────────────────────────────────────────────────── */
body[data-feature="mfg"] .btn,
body[data-feature="mfg"] .btn-filter,
body[data-feature="mfg"] .btn-clear,
body[data-feature="mfg"] .back-btn {
  min-height: var(--ctl-h) !important;
  border-radius: var(--ctl-radius) !important;
  font-size: var(--ctl-font) !important;
}
body[data-feature="mfg"] .btn-filter,
body[data-feature="mfg"] .btn-clear {
  padding: 8px var(--ctl-pad-x) !important;
}

/* Card-action (ghost) buttons: one compact height across every mfg page */
body[data-feature="mfg"] .btn-ghost {
  min-height: var(--ctl-h-sm) !important;
  border-radius: var(--ctl-radius-sm) !important;
  font-size: var(--ctl-font-sm) !important;
}

/* Smooth lift/press for the mfg buttons too */
body[data-feature="mfg"] .btn:hover,
body[data-feature="mfg"] .btn-filter:hover,
body[data-feature="mfg"] .btn-clear:hover,
body[data-feature="mfg"] .back-btn:hover,
body[data-feature="mfg"] .dashboard-btn:hover { transform: translateY(-1px); }
body[data-feature="mfg"] .btn:active,
body[data-feature="mfg"] .btn-filter:active,
body[data-feature="mfg"] .btn-clear:active,
body[data-feature="mfg"] .back-btn:active,
body[data-feature="mfg"] .dashboard-btn:active { transform: translateY(0); }

/* Keep inputs in mfg filter bars the same height as the buttons beside them */
body[data-feature="mfg"] .filter-bar input,
body[data-feature="mfg"] .filter-bar select {
  min-height: var(--ctl-h);
  border-radius: var(--ctl-radius-sm);
}

/* ── Mobile: keep everything to one (larger, tap-friendly) scale ─────────── */
@media (max-width: 640px) {
  :root { --ctl-h: 46px; --ctl-h-sm: 42px; --ctl-font: 16px; --ctl-font-sm: 15px; }

  /* On phones a single full-width column reads cleanest; let the base
     responsive rules keep buttons full width while sharing one height. */
  body[data-feature="mfg"] .btn-filter,
  body[data-feature="mfg"] .btn-clear {
    min-height: var(--ctl-h) !important;
    font-size: var(--ctl-font) !important;
  }
}

/* Respect users who prefer reduced motion: drop the lift/press animation. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-filter, .btn-add, .btn-export, .btn-clear, .btn-whatsapp,
  .back-btn, .back-link, .dashboard-btn, .empty-state .empty-action,
  .btn-edit, .btn-delete, .btn-action, .cc-btn, .nav-item,
  body[data-feature="mfg"] .btn, body[data-feature="mfg"] .btn-filter,
  body[data-feature="mfg"] .btn-clear, body[data-feature="mfg"] .back-btn,
  body[data-feature="mfg"] .dashboard-btn {
    transition: none !important;
    transform: none !important;
  }
}