/* ==================== GSS - Spotify-inspired Theme ==================== */

/* ==================== Custom DaisyUI Theme ==================== */
[data-theme="spotify"] {
  color-scheme: dark;

  /* Primary: Spotify Green */
  --p: 68.5% 0.169 152.5;
  --pc: 14% 0.05 152;

  /* Secondary: Warm grey */
  --s: 37% 0.01 260;
  --sc: 95% 0 0;

  /* Accent: Spotify pink-red */
  --a: 62% 0.2 15;
  --ac: 98% 0 0;

  /* Neutral: Dark greys */
  --n: 23% 0.005 260;
  --nf: 19% 0.005 260;
  --nc: 90% 0 0;

  /* Base: True dark backgrounds */
  --b1: 18% 0.005 260;      /* #181818 - cards, surfaces */
  --b2: 14% 0.003 260;      /* #121212 - main background */
  --b3: 11% 0.003 260;      /* #0a0a0a - deepest */
  --bc: 93% 0 0;            /* near-white text */

  /* Status colors */
  --in: 70% 0.14 240;       /* blue info */
  --inc: 98% 0 0;
  --su: 68.5% 0.169 152.5;  /* green success (same as primary) */
  --suc: 14% 0.05 152;
  --wa: 82% 0.17 80;        /* amber warning */
  --wac: 14% 0.04 80;
  --er: 62% 0.22 25;        /* red error */
  --erc: 98% 0 0;

  /* Radii: Spotify uses rounded, pill-shaped buttons */
  --rounded-box: 0.75rem;
  --rounded-btn: 1.5rem;
  --rounded-badge: 1rem;

  /* Animation */
  --animation-btn: 0.15s;
  --animation-input: 0.15s;
  --btn-focus-scale: 0.97;
  --border-btn: 0px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ==================== Global Font ==================== */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}


/* ==================== Custom Scrollbar (dark theme) ==================== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Apply custom scrollbar globally to overflow areas */
aside,
.overflow-y-auto,
.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

aside::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

aside::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}


/* ==================== Sidebar ==================== */
aside {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: oklch(11% 0.005 260) !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}


/* ==================== Navbar ==================== */
.navbar {
  background: oklch(14% 0.003 260) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* ==================== Cards: Spotify elevated surface look ==================== */
.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: oklch(18% 0.005 260);
}

.card:hover {
  background: oklch(20% 0.005 260);
}


/* ==================== Buttons: Spotify pill style ==================== */
.btn-primary {
  background: oklch(68.5% 0.169 152.5);
  color: oklch(14% 0.05 152);
  border: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-primary:hover {
  background: oklch(73% 0.18 152.5);
  transform: scale(1.02);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline {
  border-color: rgba(255, 255, 255, 0.2);
  color: oklch(90% 0 0);
}

.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: oklch(98% 0 0);
}


/* ==================== Inputs: Subtle dark fields ==================== */
.input,
.select,
.textarea {
  background: oklch(14% 0.003 260);
  border-color: rgba(255, 255, 255, 0.1);
  color: oklch(93% 0 0);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: oklch(68.5% 0.169 152.5);
  box-shadow: 0 0 0 2px oklch(68.5% 0.169 152.5 / 0.2);
  outline: none;
}

.input::placeholder {
  color: oklch(55% 0 0);
}


/* ==================== Tables: Dark rows ==================== */
.table {
  --tw-bg-opacity: 1;
}

.table thead tr {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.table tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.table tbody tr.hover:hover {
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color 0.15s ease;
}


/* ==================== Badges ==================== */
.badge {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.badge-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: oklch(80% 0 0);
}


/* ==================== Alerts ==================== */
.alert {
  border: 1px solid rgba(255, 255, 255, 0.06);
}


/* ==================== Breadcrumbs ==================== */
.breadcrumbs li::before {
  opacity: 0.3;
}

.breadcrumbs a {
  color: oklch(70% 0 0);
}

.breadcrumbs a:hover {
  color: oklch(93% 0 0);
}


/* ==================== Dividers ==================== */
.divider::before,
.divider::after {
  background-color: rgba(255, 255, 255, 0.06);
}


/* ==================== Steps indicator ==================== */
.steps .step::after {
  background: oklch(23% 0.005 260);
}

.steps .step-primary::after {
  background: oklch(68.5% 0.169 152.5);
}


/* ==================== Footer ==================== */
footer {
  background: oklch(11% 0.005 260) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}


/* ==================== Toast slide-in animation ==================== */
@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast .alert {
  animation: toast-slide-in 0.3s ease-out;
}


/* ==================== Chart container responsive sizing ==================== */
canvas {
  max-width: 100%;
  max-height: 100%;
}

.chart-container {
  position: relative;
  width: 100%;
  min-height: 200px;
}

@media (min-width: 640px) {
  .chart-container {
    min-height: 280px;
  }
}

@media (min-width: 1024px) {
  .chart-container {
    min-height: 320px;
  }
}


/* ==================== File upload drag-over state ==================== */
.drag-over {
  border-color: oklch(68.5% 0.169 152.5);
  background-color: oklch(68.5% 0.169 152.5 / 0.08);
  transform: scale(1.01);
}


/* ==================== HTMX loading indicators ==================== */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}


/* ==================== Line clamp utilities ==================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==================== Smooth page transitions ==================== */
main {
  animation: page-fade-in 0.2s ease-out;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==================== Badge pulse for notifications ==================== */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.badge-pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}


/* ==================== Stats card number animation ==================== */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-value {
  animation: count-up 0.4s ease-out;
}


/* ==================== Flatpickr dark theme overrides ==================== */
.flatpickr-calendar {
  background: oklch(18% 0.005 260);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4),
              0 8px 10px -6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: oklch(90% 0 0);
}

.flatpickr-day {
  color: oklch(90% 0 0);
}

.flatpickr-day:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: oklch(68.5% 0.169 152.5);
  border-color: oklch(68.5% 0.169 152.5);
  color: oklch(14% 0.05 152);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: transparent;
  color: oklch(70% 0 0);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: oklch(90% 0 0);
}


/* ==================== Join / button group ==================== */
.join .btn {
  border-color: rgba(255, 255, 255, 0.1);
}


/* ==================== Checkbox / Radio ==================== */
.checkbox,
.radio {
  border-color: rgba(255, 255, 255, 0.2);
}


/* ==================== Link styling ==================== */
.link-primary {
  color: oklch(68.5% 0.169 152.5);
}

.link-primary:hover {
  color: oklch(75% 0.18 152.5);
}


/* ==================== Print styles ==================== */
@media print {
  aside,
  nav.navbar,
  footer,
  .btn,
  .toast {
    display: none !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid #333;
  }
}