/*
 * global.css
 * ─────────────────────────────────────────────
 * Purpose: Design tokens, CSS reset, base typography,
 *          and shared utility classes used across ALL pages.
 *
 * Tokens defined here:
 *   --color-bg, --color-surface, --color-border
 *   --color-text, --color-text-muted
 *   --color-primary, --color-primary-dark
 *   --color-success, --color-warning, --color-danger
 *   --radius, --shadow, --transition
 *
 * Shared components defined here:
 *   .btn-primary, .btn-ghost, .btn-danger
 *   .data-table
 *   .modal, .modal-box, .modal-header, .modal-close
 *   .field-group, .field-row
 *   .error-msg, .warning-msg, .empty-state
 *   .hidden
 */

:root {
  /* Explicitly declare the scheme per-theme (see [data-theme="dark"] below).
     Declaring this — light OR dark — is what stops mobile browsers'
     "force dark" from auto-inverting plain inputs; it only misbehaves
     when color-scheme is left undeclared. */
  color-scheme: light;

  /* Palette — Warm Light Mode */
  --color-bg:           #FAFAF8;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F3F4F6;
  --color-border:       #E5E7EB;
  --color-text:         #374151;
  --color-text-muted:   #6B7280;

  --color-primary:      #15803D;
  --color-primary-dark: #14532D;
  --color-accent:       #EAB308;
  --color-accent-dark:  #A16207;
  --color-success:      #16A34A;
  --color-warning:      #D97706;
  --color-danger:       #DC2626;

  /* Liquid-glass hover highlight — a white glint reads as "light on glass"
     on dark surfaces, but disappears on light-mode's near-white buttons.
     Light mode uses a cool, low-opacity dark sheen instead, so the glass
     effect still shows up as a highlight rather than vanishing. */
  --glass-highlight: rgba(15, 23, 42, 0.18);
  --glass-highlight-soft: rgba(15, 23, 42, 0.10);
  --glass-shine: rgba(15, 23, 42, 0.24);

  /* Spacing & shape */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 4px 24px rgba(0,0,0,0.08);
  --transition:  0.18s ease;

  /* Typography */
  --font-body:  'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
}

/* Palette — Dark Mode
   Applied when <html data-theme="dark">, set by js/theme.js either from
   the browser's prefers-color-scheme or the user's manual toggle choice. */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:           #16181D;
  --color-surface:      #1E2128;
  --color-surface-2:    #262A33;
  --color-border:       #343A46;
  --color-text:         #E5E7EB;
  --color-text-muted:   #9CA3AF;

  --color-primary:      #22C55E;
  --color-primary-dark: #16A34A;
  --color-accent:       #EAB308;
  --color-accent-dark:  #FACC15;
  --color-success:      #22C55E;
  --color-warning:      #F59E0B;
  --color-danger:       #F87171;

  --shadow: 0 4px 24px rgba(0,0,0,0.35);
}

/* Smooth crossfade instead of an abrupt flip when the theme changes */
body, .sidebar, .modal-box, .data-table, input, select, textarea,
.toast, .custom-date__panel, .search-dropdown {
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Liquid glass hover (all buttons) ──
   Applies to native buttons/inputs plus any element with "btn" in its
   class name (.btn-primary, .btn-ghost, .action-btn, .page-btn, the
   sidebar's .hamburger-btn / .signout-btn, etc.) so every button in the
   app gets it automatically — no per-page markup needed.

   Two layers:
   1. A soft specular highlight (::before) that tracks the pointer via
      --glass-x/--glass-y, set by js/theme.js on pointermove. Looks like
      light glinting off curved glass as your cursor moves over it.
   2. A gentle lift + squish on hover/press, like the button is a soft
      liquid-glass pill rather than a flat rectangle. */
button,
input[type="button"],
input[type="submit"],
[class*="btn"]:not(.action-btns),
.sidebar-nav a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

button::before,
input[type="button"]::before,
input[type="submit"]::before,
[class*="btn"]:not(.action-btns)::before,
.sidebar-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  /* A blended highlight (not the default "normal" blend) is what reads as
     glass/water instead of a coat of paint: it lightens where the button
     is already light and darkens where it's already dark, the way real
     refracted light interacts with a surface, rather than flatly tinting
     everything the same shade regardless of what's underneath.
     Light theme's button colors (#15803D green, #DC2626 red) are already
     deeply saturated, so the punchier "overlay" blend clips into a harsh,
     slightly muddy hot spot here — "soft-light" nudges lightness instead
     of pushing to the extremes, so it reads as a soft sheen. Dark mode
     overrides this back to overlay below, where the darker base colors
     have more headroom before clipping and can take the stronger blend. */
  mix-blend-mode: soft-light;
  background: radial-gradient(
    var(--glass-radius, 150px) circle at var(--glass-x, 50%) var(--glass-y, 50%),
    var(--glass-shine),
    var(--glass-highlight-soft) 45%,
    transparent 75%
  );
  transition: opacity 0.35s ease;
}

/* Dark theme's button colors have more headroom before clipping, so the
   glint can use the punchier overlay blend instead of light theme's
   gentler soft-light (see the comment on mix-blend-mode above). */
[data-theme="dark"] button::before,
[data-theme="dark"] input[type="button"]::before,
[data-theme="dark"] input[type="submit"]::before,
[data-theme="dark"] [class*="btn"]:not(.action-btns)::before,
[data-theme="dark"] .sidebar-nav a::before {
  mix-blend-mode: overlay;
}

button:hover::before,
input[type="button"]:hover::before,
input[type="submit"]:hover::before,
[class*="btn"]:not(.action-btns):hover::before,
.sidebar-nav a:hover::before {
  opacity: 1;
  /* Same turbulence trick as the text ripple below, applied to the shine
     itself: the highlight's edge wobbles slightly instead of sitting
     perfectly still, which is what sells "light moving on a liquid
     surface" rather than "a gradient someone drew". */
  filter: url(#sw-glass-shimmer);
}

/* Small pill buttons (row actions like Edit/Delete) get a proportionally
   smaller specular core — at the default 130px radius the highlight is
   wider than the whole button, so instead of a glint it reads as a flat
   wash of color regardless of how translucent it is. */
.action-btn,
.page-btn,
.pagination-btn {
  --glass-radius: 64px;
}

@media (prefers-reduced-motion: reduce) {
  button:hover::before, input[type="button"]:hover::before, input[type="submit"]:hover::before,
  [class*="btn"]:not(.action-btns):hover::before, .sidebar-nav a:hover::before {
    filter: none !important;
  }
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
[class*="btn"]:not(.action-btns):hover,
.sidebar-nav a:hover {
  transform: translateY(-1px) scale(1.02);
  filter: saturate(1.1) brightness(1.04);
  box-shadow:
    0 8px 18px -8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 var(--glass-highlight);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
[class*="btn"]:not(.action-btns):active,
.sidebar-nav a:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 0.15s;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
[class*="btn"]:not(.action-btns):disabled,
[class*="btn"]:not(.action-btns)[aria-disabled="true"] {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
button:disabled::before,
input[type="button"]:disabled::before,
input[type="submit"]:disabled::before,
[class*="btn"]:not(.action-btns):disabled::before,
[class*="btn"]:not(.action-btns)[aria-disabled="true"]::before {
  opacity: 0 !important;
}

/* Every button — solid-colored ones (Save, Delete) included — shares the
   same neutral glass-shine tokens the sidebar links use (light theme's
   cool dark sheen, dark theme's white one). No per-button color tinting:
   the sidebar's "Settings" hover is the reference look, and that's a
   plain neutral sheen, not a color-matched one, so every button now reads
   the same way instead of the colored ones looking like a different
   effect. */

@media (prefers-reduced-motion: reduce) {
  button, input[type="button"], input[type="submit"], [class*="btn"]:not(.action-btns), .sidebar-nav a {
    transition: none !important;
  }
  button:hover, input[type="button"]:hover, input[type="submit"]:hover, [class*="btn"]:not(.action-btns):hover, .sidebar-nav a:hover {
    transform: none !important;
  }
}

/* ── Water-ripple text reveal — light mode only ──
   js/theme.js wraps each button/link's text in <span class="glass-text">
   and injects a shared SVG turbulence filter. In light mode, hovering
   attaches that filter so the label looks like it's rippling into view
   through water. Dark mode keeps the plain glass shine instead. */
html:not([data-theme="dark"]) button:hover .glass-text,
html:not([data-theme="dark"]) [class*="btn"]:not(.action-btns):hover .glass-text,
html:not([data-theme="dark"]) .sidebar-nav a:hover .glass-text {
  filter: url(#sw-water-ripple);
  display: inline-block;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover  { background: var(--color-primary-dark); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.btn-ghost:hover { color: var(--color-text); border-color: transparent; background: var(--color-surface-2); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-danger:hover { background: rgba(220,38,38,0.08); }

.btn-export-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.btn-export-pdf:hover  { opacity: 0.88; }
.btn-export-pdf:active { opacity: 0.75; }
.btn-export-pdf:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tables ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  padding: 10px 14px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: var(--color-surface-2); }
.data-table tbody td {
  padding: 11px 14px;
  color: var(--color-text);
}
.data-table tbody tr:last-child { border-bottom: none; }

/* ── Forms ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.field-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field-group input,
.field-group select,
.field-group textarea {
  padding: 9px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 13px;
  font-family: var(--font-body);
  transition: border-color var(--transition);
  outline: none;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--color-primary);
}
.field-group input[readonly] {
  color: var(--color-text-muted);
  cursor: default;
}
.field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Modal ── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: min(560px, 95vw);
  padding: 28px;
  box-shadow: var(--shadow);
}
.modal-box--wide { width: min(760px, 95vw); }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.modal-close:hover { color: var(--color-text); }
.modal-form { display: flex; flex-direction: column; gap: 16px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ── Status / Feedback ── */
.success-msg {
  color: var(--color-success);
  font-size: 12px;
  padding: 8px 12px;
  background: rgba(22,163,74,0.08);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-success);
}

.status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.status-pill--pending { background: rgba(217,119,6,0.12); color: #B45309; }
.status-pill--active  { background: rgba(22,163,74,0.12); color: var(--color-success); }
.status-pill--inactive { background: rgba(217,119,6,0.10); color: var(--color-warning); }

.error-msg {
  color: var(--color-danger);
  font-size: 12px;
  padding: 8px 12px;
  background: rgba(220,38,38,0.06);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-danger);
}
.warning-msg {
  color: var(--color-warning);
  font-size: 12px;
  padding: 8px 12px;
  background: rgba(217,119,6,0.06);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-warning);
}
.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 48px 24px;
  font-size: 14px;
}
.hidden { display: none !important; }

/* ── Misc ── */
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Shared segmented toggle (used by Reports usage ranking, Dashboard chart range) ── */
.usage-toggle {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.usage-toggle-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.usage-toggle-btn:hover { color: var(--color-text); }
.usage-toggle-btn.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 10px rgba(21,128,61,0.45);
}

/* ── Chart tooltip (used by Dashboard Stock Movement chart) ── */
.chart-tooltip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  min-width: 150px;
}
.chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.chart-tooltip-date {
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}
.chart-tooltip-row + .chart-tooltip-row { margin-top: 2px; }
.chart-tooltip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}
.chart-tooltip-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}