/* =========================================
   BASE – zmienne, theme, globalne style
   ========================================= */

:root {
  /* Akcenty - niebieski z logo */
  --planin-accent: #2563eb;
  --planin-accent-hover: #1d4ed8;
  --planin-accent-soft: #dbeafe;
  --planin-danger: #ef4444;
  --planin-success: #22c55e;
  --planin-radius-full: 999px;

  /* DARK MODE - ciemny slate */
  --planin-body-bg: linear-gradient(135deg, #0f172a 0%, #020617 100%);
  --planin-surface-bg: #0f172a;
  --planin-surface-soft: #1e293b;
  --planin-surface-hover: #334155;
  --planin-border-subtle: rgba(148, 163, 184, 0.25);
  --planin-text-main: #f1f5f9;
  --planin-text-muted: #94a3b8;
  --planin-column-bg: #1e293b;
  --planin-column-border: rgba(148, 163, 184, 0.2);
  --planin-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="light"] {
  /* LIGHT MODE - jasny slate */
  --planin-body-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --planin-surface-bg: #ffffff;
  --planin-surface-soft: #f1f5f9;
  --planin-surface-hover: #e2e8f0;
  --planin-border-subtle: rgba(148, 163, 184, 0.4);
  --planin-text-main: #0f172a;
  --planin-text-muted: #64748b;
  --planin-column-bg: #ffffff;
  --planin-column-border: rgba(148, 163, 184, 0.3);
  --planin-card-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
}

/* BODY */
body {
  background-image: var(--planin-body-bg);
  background-attachment: fixed;
  background-size: cover;
  color: var(--planin-text-main);
}

.text-muted {
  color: var(--planin-text-muted) !important;
}

/* Light mode - text-light ma być ciemny */
[data-bs-theme="light"] .text-light {
  color: var(--planin-text-main) !important;
}

/* BUTTONS */
.btn-primary {
  border-radius: var(--planin-radius-full);
  background-color: var(--planin-accent);
  border-color: var(--planin-accent);
}

.btn-primary:hover {
  background-color: var(--planin-accent-hover);
  border-color: var(--planin-accent-hover);
}

.btn-outline-light {
  border-radius: var(--planin-radius-full);
}

/* FORMS */
.form-control {
  border-radius: var(--planin-radius-full);
  border-color: var(--planin-border-subtle);
}

/* CUSTOM SCROLLBAR - desktop only */
@media (min-width: 769px) {
  /* Webkit browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--planin-surface-hover);
    border-radius: 4px;
  }

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

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--planin-surface-hover) transparent;
  }
}