/* Tanzork Shop Management System — supplemental styles.
   Layout, color and type are handled by the Tailwind design tokens in includes/layout_head.php;
   this file only covers things Tailwind's utility classes can't reach. */

/* Hides the scrollbar on an internally-scrollable strip (the primary nav
   uses this as a safety net -- see includes/layout_head.php) without
   removing the ability to scroll. */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Design tokens as "R G B" triples so Tailwind's rgb(var(--x) / <alpha-value>)
   pattern keeps opacity modifiers (bg-primary/10, text-white/60, etc.) working.
   :root holds the light palette (default); [data-theme="dark"] overrides it.
   The theme attribute is set as early as possible in <head> (see the inline
   script in login.php / layout_head.php) so there is no flash of the wrong theme. */
:root {
  --color-ink: 15 23 42;
  --color-primary: 30 58 138;
  --color-primary-dark: 21 42 99;
  --color-secondary: 37 99 235;
  --color-accent: 59 130 246;
  --color-canvas: 248 250 252;
  --color-surface: 255 255 255;
  --color-border: 226 232 240;
  --color-border-strong: 203 213 225;
  --color-muted: 100 116 139;
  --color-overlay: 2 6 23;
  --color-success: 16 185 129;
  --color-success-bg: 236 253 245;
  --color-success-border: 167 243 208;
  --color-success-text: 4 120 87;
  --color-warning: 245 158 11;
  --color-warning-bg: 255 251 235;
  --color-warning-border: 253 230 138;
  --color-warning-text: 180 83 9;
  --color-danger: 244 63 94;
  --color-danger-bg: 255 241 242;
  --color-danger-border: 254 205 211;
  --color-danger-text: 190 18 60;
  --color-violet: 139 92 246;
  --color-violet-bg: 245 243 255;
  --color-violet-border: 221 214 254;
  --color-violet-text: 109 40 217;
}

[data-theme="dark"] {
  --color-ink: 226 232 240;
  --color-primary: 59 130 246;
  --color-primary-dark: 37 99 235;
  --color-secondary: 96 165 250;
  --color-accent: 96 165 250;
  --color-canvas: 2 6 23;
  --color-surface: 15 23 42;
  --color-border: 51 65 85;
  --color-border-strong: 71 85 105;
  --color-muted: 148 163 184;
  --color-overlay: 2 6 23;
  --color-success: 52 211 153;
  --color-success-bg: 6 78 59;
  --color-success-border: 6 95 70;
  --color-success-text: 110 231 183;
  --color-warning: 251 191 36;
  --color-warning-bg: 69 26 3;
  --color-warning-border: 146 64 14;
  --color-warning-text: 252 211 77;
  --color-danger: 251 113 133;
  --color-danger-bg: 76 5 25;
  --color-danger-border: 159 18 57;
  --color-danger-text: 253 164 175;
  --color-violet: 167 139 250;
  --color-violet-bg: 46 16 101;
  --color-violet-border: 91 33 182;
  --color-violet-text: 196 181 253;
}

/* Printed output (receipts, reports) always renders on the light palette --
   dark backgrounds waste thermal paper/ink and are hard to read on white paper. */
@media print {
  :root, [data-theme="dark"] {
    --color-ink: 15 23 42;
    --color-canvas: 255 255 255;
    --color-surface: 255 255 255;
    --color-border: 226 232 240;
    --color-border-strong: 203 213 225;
    --color-muted: 100 116 139;
  }
}

:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 1px;
}

/* Bare inputs/selects/textareas (no explicit bg-* utility) fall back to the
   surface token so they still adapt in dark mode; an explicit Tailwind
   bg-canvas/bg-surface class on the element overrides this as usual. */
input, select, textarea {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-ink));
}
input::placeholder, textarea::placeholder {
  color: rgb(var(--color-muted));
}

/* Custom thin scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--color-canvas));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border-strong));
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-muted));
}

/* Tabular numerals for money / SKU / quantity columns */
.tabular-nums,
.font-mono {
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}

/* Low-stock emphasis */
.pulse-alert {
  animation: pulse-alert 2s infinite;
}
@keyframes pulse-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Receipt / thermal slip preview */
.receipt-paper {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, transparent 28px);
}

/* Print styles: receipts + reports */
@media print {
  body * {
    visibility: hidden;
  }
  #printArea, #printArea * {
    visibility: visible;
  }
  #printArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  header, footer, .no-print {
    display: none !important;
  }
}