/**
 * TimeQube Shipping — theme
 * Light mode: unchanged (page styles as-is)
 * Dark mode: Catppuccin Mocha (html.dark)
 */

/* ── Catppuccin Mocha tokens ───────────────────────────────────────── */
html.dark {
  color-scheme: dark;

  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
}

/* Soft transition when toggling (avoid heavy layout thrash) */
html.dark body,
html.dark .navbar,
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ── Page chrome ───────────────────────────────────────────────────── */
html.dark body,
html.dark body.bg-gray-50,
html.dark body.bg-gray-100 {
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text);
}

/* Login gradient → deep Mocha with soft mauve glow */
html.dark body.gradient-bg {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(203, 166, 247, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 90%, rgba(137, 180, 250, 0.12), transparent 50%),
    linear-gradient(160deg, var(--ctp-crust) 0%, var(--ctp-base) 45%, var(--ctp-mantle) 100%) !important;
}

html.dark .glass-effect {
  background: rgba(49, 50, 68, 0.82) !important;
  border: 1px solid var(--ctp-surface1);
  box-shadow: 0 12px 40px rgba(17, 17, 27, 0.55) !important;
  color: var(--ctp-text);
}

html.dark .input-focus:focus {
  border-color: var(--ctp-mauve) !important;
  box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.22) !important;
}

/* ── Surfaces / cards ──────────────────────────────────────────────── */
html.dark .bg-white {
  background-color: var(--ctp-mantle) !important;
}
html.dark .bg-gray-50 {
  background-color: var(--ctp-base) !important;
}
html.dark .bg-gray-100 {
  background-color: var(--ctp-surface0) !important;
}
html.dark .bg-gray-200 {
  background-color: var(--ctp-surface1) !important;
}
html.dark .bg-gray-300 {
  background-color: var(--ctp-surface2) !important;
}

/* Opacity helpers used as panels */
html.dark .bg-opacity-95 {
  --tw-bg-opacity: 0.95;
}
html.dark .bg-purple-800 {
  background-color: color-mix(in srgb, var(--ctp-mauve) 40%, var(--ctp-mantle)) !important;
}
html.dark .bg-purple-800.bg-opacity-95 {
  background-color: color-mix(in srgb, var(--ctp-mantle) 88%, var(--ctp-mauve)) !important;
}

/* Purple tints → mauve/lavender washes */
html.dark .bg-purple-50,
html.dark .bg-purple-100 {
  background-color: rgba(203, 166, 247, 0.14) !important;
}
html.dark .bg-purple-200 {
  background-color: rgba(203, 166, 247, 0.22) !important;
}
html.dark .bg-purple-300 {
  background-color: rgba(203, 166, 247, 0.35) !important;
}
html.dark .bg-purple-600,
html.dark .bg-purple-700 {
  background-color: color-mix(in srgb, var(--ctp-mauve) 78%, var(--ctp-base)) !important;
}
html.dark .bg-purple-800 {
  background-color: color-mix(in srgb, var(--ctp-mauve) 55%, var(--ctp-mantle)) !important;
}
html.dark .hover\:bg-purple-700:hover,
html.dark .hover\:bg-purple-800:hover {
  background-color: color-mix(in srgb, var(--ctp-mauve) 88%, white) !important;
}
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: var(--ctp-surface0) !important;
}
html.dark tr.hover\:bg-gray-50:hover,
html.dark .hover\:bg-purple-50:hover {
  background-color: var(--ctp-surface1) !important;
}

/* Status / semantic soft backgrounds */
html.dark .bg-green-50,
html.dark .bg-green-100 {
  background-color: rgba(166, 227, 161, 0.14) !important;
}
html.dark .bg-red-50,
html.dark .bg-red-100 {
  background-color: rgba(243, 139, 168, 0.14) !important;
}
html.dark .bg-blue-50,
html.dark .bg-blue-100 {
  background-color: rgba(137, 180, 250, 0.14) !important;
}
html.dark .bg-yellow-50,
html.dark .bg-yellow-100,
html.dark .bg-orange-50,
html.dark .bg-amber-50 {
  background-color: rgba(249, 226, 175, 0.12) !important;
}
html.dark .bg-red-500 {
  background-color: var(--ctp-red) !important;
}
html.dark .bg-green-500,
html.dark .bg-green-600 {
  background-color: var(--ctp-green) !important;
}
html.dark .bg-blue-500,
html.dark .bg-blue-600 {
  background-color: var(--ctp-blue) !important;
}
html.dark .bg-orange-500 {
  background-color: var(--ctp-peach) !important;
}

/* white / opacity chips on navbar */
html.dark .bg-white.bg-opacity-20,
html.dark .bg-white\/20 {
  background-color: rgba(205, 214, 244, 0.1) !important;
}
html.dark .hover\:bg-opacity-30:hover,
html.dark .hover\:bg-white\/30:hover {
  background-color: rgba(205, 214, 244, 0.16) !important;
}

/* ── Text ──────────────────────────────────────────────────────────── */
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: var(--ctp-text) !important;
}
html.dark .text-gray-700 {
  color: var(--ctp-subtext1) !important;
}
html.dark .text-gray-600 {
  color: var(--ctp-subtext0) !important;
}
html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: var(--ctp-overlay1) !important;
}
html.dark .text-gray-300 {
  color: var(--ctp-overlay2) !important;
}
html.dark .text-black {
  color: var(--ctp-text) !important;
}
html.dark .text-purple-100,
html.dark .text-purple-200 {
  color: var(--ctp-lavender) !important;
}
html.dark .text-purple-300 {
  color: var(--ctp-mauve) !important;
}
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .text-purple-900 {
  color: var(--ctp-mauve) !important;
}
html.dark .hover\:text-purple-100:hover,
html.dark .hover\:text-purple-800:hover {
  color: var(--ctp-lavender) !important;
}

/* Processing cutoff hint — plain muted text on page background */
html.dark #processing-cutoff-banner {
  color: var(--ctp-subtext0) !important;
  background: transparent !important;
  border: none !important;
}
html.dark #processing-cutoff-banner strong {
  color: var(--ctp-subtext1) !important;
}
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 {
  color: var(--ctp-green) !important;
}
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800 {
  color: var(--ctp-red) !important;
}
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800 {
  color: var(--ctp-blue) !important;
}
html.dark .text-orange-500,
html.dark .text-orange-600,
html.dark .text-amber-600,
html.dark .text-yellow-700 {
  color: var(--ctp-peach) !important;
}

/* ── Borders ───────────────────────────────────────────────────────── */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
  border-color: var(--ctp-surface1) !important;
}
html.dark .border-gray-400 {
  border-color: var(--ctp-surface2) !important;
}
html.dark .border-purple-200,
html.dark .border-purple-300 {
  border-color: rgba(203, 166, 247, 0.35) !important;
}
html.dark .border-red-200,
html.dark .border-red-300 {
  border-color: rgba(243, 139, 168, 0.4) !important;
}
html.dark .border-green-200 {
  border-color: rgba(166, 227, 161, 0.35) !important;
}
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ctp-surface0) !important;
}

/* ── Forms ─────────────────────────────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
  background-color: var(--ctp-surface0) !important;
  border-color: var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--ctp-overlay0) !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--ctp-mauve) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.18);
}
html.dark option {
  background-color: var(--ctp-mantle);
  color: var(--ctp-text);
}

/* ── Tables ────────────────────────────────────────────────────────── */
html.dark thead,
html.dark thead.bg-gray-100,
html.dark .bg-gray-100 {
  background-color: var(--ctp-surface0) !important;
}
html.dark tbody {
  background-color: var(--ctp-mantle);
}
html.dark th {
  color: var(--ctp-subtext0) !important;
}
html.dark td {
  color: var(--ctp-text);
}
html.dark tr.border-t,
html.dark .border-t {
  border-color: var(--ctp-surface0) !important;
}
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow: 0 8px 28px rgba(17, 17, 27, 0.45) !important;
}

/* ── Navbar (Catppuccin soft) ──────────────────────────────────────── */
html.dark .navbar {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ctp-mantle) 70%, var(--ctp-mauve)) 0%,
    var(--ctp-base) 48%,
    color-mix(in srgb, var(--ctp-mantle) 75%, var(--ctp-lavender)) 100%
  ) !important;
  box-shadow: 0 4px 20px rgba(17, 17, 27, 0.5) !important;
  border-bottom: 1px solid rgba(203, 166, 247, 0.12);
}
html.dark .nav-link::after {
  background: var(--ctp-lavender);
}
html.dark .navbar .text-white {
  color: var(--ctp-text) !important;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--ctp-mauve, #cba6f7);
  outline-offset: 2px;
}
html.dark .theme-toggle {
  background: rgba(205, 214, 244, 0.08);
  border-color: rgba(205, 214, 244, 0.12);
  color: var(--ctp-lavender);
}
html.dark .theme-toggle:hover {
  background: rgba(203, 166, 247, 0.16);
  color: var(--ctp-mauve);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* Login page floating toggle */
.theme-toggle-login {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}
html.dark .theme-toggle-login {
  background: rgba(49, 50, 68, 0.7);
  border-color: var(--ctp-surface1);
}

/* ── Badges (orders status) ────────────────────────────────────────── */
html.dark .badge-processing {
  background-color: rgba(249, 226, 175, 0.16) !important;
  color: var(--ctp-yellow) !important;
}
html.dark .badge-completed {
  background-color: rgba(166, 227, 161, 0.16) !important;
  color: var(--ctp-green) !important;
}
html.dark .badge-pending {
  background-color: var(--ctp-surface1) !important;
  color: var(--ctp-subtext0) !important;
}

/* ── Console panel → Mocha ─────────────────────────────────────────── */
html.dark .console-panel {
  background: var(--ctp-crust) !important;
  box-shadow: -8px 0 32px rgba(17, 17, 27, 0.55);
  border-left: 1px solid var(--ctp-surface0);
}
html.dark .console-header {
  background: var(--ctp-mantle) !important;
  border-bottom-color: var(--ctp-surface0) !important;
}
html.dark .console-body {
  color: var(--ctp-subtext1) !important;
}
html.dark .console-line.info { color: var(--ctp-teal) !important; }
html.dark .console-line.success { color: var(--ctp-green) !important; }
html.dark .console-line.error { color: var(--ctp-red) !important; }
html.dark .console-line.warning { color: var(--ctp-yellow) !important; }

/* Loading spinner */
html.dark .loading {
  border-color: var(--ctp-surface1);
  border-top-color: var(--ctp-mauve);
}

/* ── Scanner modal ("Skanuj numery nadań") ─────────────────────────── */
html.dark .scanner-modal {
  background: rgba(17, 17, 27, 0.72);
  backdrop-filter: blur(6px);
}
html.dark .scanner-modal-content {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text);
  border: 1px solid var(--ctp-surface0);
  box-shadow: 0 24px 64px rgba(17, 17, 27, 0.65) !important;
}
html.dark .scanner-modal-content h2,
html.dark .scanner-modal-content .text-gray-800 {
  color: var(--ctp-text) !important;
}
html.dark .scanner-modal-content .text-gray-400 {
  color: var(--ctp-overlay1) !important;
}
html.dark .scanner-modal-content .text-gray-500 {
  color: var(--ctp-subtext0) !important;
}
html.dark .scanner-modal-content .text-gray-600,
html.dark .scanner-modal-content .text-gray-700 {
  color: var(--ctp-subtext1) !important;
}
html.dark .scanner-modal-content .hover\:text-gray-600:hover {
  color: var(--ctp-text) !important;
}
html.dark .scanner-modal-content .bg-gray-200 {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text);
}
html.dark .scanner-modal-content .hover\:bg-gray-300:hover {
  background-color: var(--ctp-surface1) !important;
}

/* Floating scanner FAB — soft mauve gradient on Mocha */
html.dark .floating-btn {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ctp-mauve) 75%, var(--ctp-base)),
    color-mix(in srgb, var(--ctp-lavender) 55%, var(--ctp-mantle))
  ) !important;
  box-shadow: 0 10px 28px rgba(17, 17, 27, 0.55), 0 0 0 1px rgba(203, 166, 247, 0.2);
  border: none;
}
html.dark .floating-btn:hover {
  box-shadow: 0 14px 36px rgba(17, 17, 27, 0.6), 0 0 0 1px rgba(203, 166, 247, 0.3);
}
html.dark .floating-btn svg {
  fill: var(--ctp-text);
}

/* Flash feedback on modal card */
html.dark .flash-success {
  animation: flashGreenDark 0.5s ease;
}
html.dark .flash-error {
  animation: flashRedDark 0.5s ease;
}
@keyframes flashGreenDark {
  0%, 100% { background-color: var(--ctp-mantle); }
  50% { background-color: rgba(166, 227, 161, 0.22); }
}
@keyframes flashRedDark {
  0%, 100% { background-color: var(--ctp-mantle); }
  50% { background-color: rgba(243, 139, 168, 0.22); }
}
html.dark .scanner-input {
  background-color: var(--ctp-surface0) !important;
  border-color: var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
}
html.dark .scanner-input::placeholder {
  color: var(--ctp-overlay0) !important;
}
html.dark .scanner-input:focus {
  border-color: var(--ctp-mauve) !important;
  box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.2) !important;
}
html.dark .scanner-status.success {
  background: rgba(166, 227, 161, 0.14) !important;
  color: var(--ctp-green) !important;
  border: 1px solid rgba(166, 227, 161, 0.35) !important;
}
html.dark .scanner-status.error {
  background: rgba(243, 139, 168, 0.14) !important;
  color: var(--ctp-red) !important;
  border: 1px solid rgba(243, 139, 168, 0.35) !important;
}
html.dark .scanner-status.empty {
  background: transparent !important;
}

/* Modals / overlays */
html.dark .fixed.bg-black,
html.dark .bg-black.bg-opacity-50,
html.dark .bg-opacity-50 {
  /* keep dim overlay; slightly cooler */
}
html.dark [class*="bg-black"].bg-opacity-50 {
  background-color: rgba(17, 17, 27, 0.72) !important;
}

/* Order cards */
html.dark .order-card:hover {
  box-shadow: 0 8px 24px rgba(17, 17, 27, 0.45);
}

/* Ring utilities used for focus/selection */
html.dark .ring-purple-500,
html.dark .focus\:ring-purple-500:focus {
  --tw-ring-color: rgba(203, 166, 247, 0.45);
}

/* Scrollbars (WebKit) */
html.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark ::-webkit-scrollbar-track {
  background: var(--ctp-mantle);
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--ctp-surface1);
  border-radius: 6px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--ctp-surface2);
}

/* Print: force light appearance */
@media print {
  html.dark,
  html.dark body {
    background: white !important;
    color: black !important;
    color-scheme: light;
  }
}