@import "tailwindcss";

/* Light mode (default) */
:root {
  --panel-bg: rgba(244, 244, 245, 0.95);
  --toast-bg: rgba(255, 255, 255, 0.95);

  --text-primary: rgba(0, 0, 0, 0.9);
  --text-secondary: rgba(0, 0, 0, 0.7);
  --text-tertiary: rgba(0, 0, 0, 0.5);
  --text-muted: rgba(0, 0, 0, 0.4);
  --text-faint: rgba(0, 0, 0, 0.2);

  --border-primary: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.05);

  --hover-bg: rgba(0, 0, 0, 0.05);
  --hover-bg-strong: rgba(0, 0, 0, 0.1);

  --badge-stop-bg: rgba(34, 197, 94, 0.15);
  --badge-stop-text: #16a34a;
  --badge-notif-bg: rgba(59, 130, 246, 0.15);
  --badge-notif-text: #2563eb;
  --tray-arrow-fill: rgba(244, 244, 245, 0.95);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

  --delete-text: rgba(0, 0, 0, 0.3);
  --delete-text-hover: rgba(0, 0, 0, 0.6);
  --delete-hover-text: #ef4444;

  --toast-focus-bg: rgba(237, 233, 254, 0.95);
  --border-focus: rgba(139, 92, 246, 0.35);
  --badge-focus-bg: rgba(139, 92, 246, 0.15);
  --badge-focus-text: #7c3aed;

  --new-highlight-bg: rgba(59, 130, 246, 0.08);
  --selection-ring: inset 0 0 0 1.5px rgba(0, 0, 0, 0.15);
  --group-selection-ring:
    inset 0 0 0 1.5px rgba(8, 145, 178, 0.7), 0 0 12px rgba(8, 145, 178, 0.25);

  /* Settings UI tokens */
  --surface-card: rgba(255, 255, 255, 0.6);
  --surface-elevated: rgba(255, 255, 255, 0.95);
  --accent: #5c3a1e;
  --accent-hover: #4a2e18;
  --accent-bg: rgba(92, 58, 30, 0.1);
  --switch-track: rgba(0, 0, 0, 0.18);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px var(--border-subtle);
  --row-hover: rgba(0, 0, 0, 0.025);
  --banner-warn-bg: rgba(92, 58, 30, 0.08);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --panel-bg: rgba(28, 28, 30, 0.95);
    --toast-bg: rgba(44, 44, 46, 0.95);

    --text-primary: rgba(255, 255, 255, 0.9);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-muted: rgba(255, 255, 255, 0.4);
    --text-faint: rgba(255, 255, 255, 0.2);

    --border-primary: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.05);

    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-bg-strong: rgba(255, 255, 255, 0.1);

    --badge-stop-bg: rgba(34, 197, 94, 0.2);
    --badge-stop-text: #4ade80;
    --badge-notif-bg: rgba(59, 130, 246, 0.2);
    --badge-notif-text: #60a5fa;
    --tray-arrow-fill: rgba(28, 28, 30, 0.95);
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

    --delete-text: rgba(255, 255, 255, 0.3);
    --delete-text-hover: rgba(255, 255, 255, 0.6);
    --delete-hover-text: #f87171;

    --toast-focus-bg: rgba(55, 40, 80, 0.95);
    --border-focus: rgba(139, 92, 246, 0.4);
    --badge-focus-bg: rgba(139, 92, 246, 0.25);
    --badge-focus-text: #a78bfa;

    --new-highlight-bg: rgba(59, 130, 246, 0.12);
    --selection-ring: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
    --group-selection-ring:
      inset 0 0 0 1.5px rgba(34, 211, 238, 0.85), 0 0 14px rgba(34, 211, 238, 0.35);

    --surface-card: rgba(255, 255, 255, 0.04);
    --surface-elevated: rgba(60, 60, 62, 0.95);
    --accent: #c9956e;
    --accent-hover: #d4a586;
    --accent-bg: rgba(201, 149, 110, 0.18);
    --switch-track: rgba(255, 255, 255, 0.2);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-subtle);
    --row-hover: rgba(255, 255, 255, 0.025);
    --banner-warn-bg: rgba(201, 149, 110, 0.1);
  }
}

html,
body,
#root {
  background: transparent;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.tray-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--border-primary);
  position: relative;
  flex-shrink: 0;
}
.tray-arrow::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 1.5px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--tray-arrow-fill);
}

/* Keyboard navigation: account for group header when scrolling into view */
[data-nav-index] {
  scroll-margin-top: 32px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* New notification highlight animation */
@keyframes new-highlight {
  0% {
    background-color: var(--new-highlight-bg);
  }
  100% {
    background-color: transparent;
  }
}

.animate-new-highlight {
  animation: new-highlight 3s ease-out forwards;
}

/* Gradient fade separator between PaneCards */
.pane-separator::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-primary), transparent);
}
.pane-separator:last-child::after {
  display: none;
}

/* Hide native number input spinners (used by NumberStepper) */
input[type="number"].no-spinner::-webkit-outer-spin-button,
input[type="number"].no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].no-spinner {
  -moz-appearance: textfield;
}
