/* ==============================================
   BASE.CSS — Design Tokens + Reset
   Jedyne miejsce gdzie definiujemy zmienne.
   ============================================== */

:root {
    /* Kolory tła */
    --bg-root:       #0b1120;
    --bg-primary:    #0f172a;
    --bg-secondary:  #1e293b;
    --bg-card:       #253247;
    --bg-input:      #1a2740;
    --bg-hover:      #2d3f57;

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-bg:    linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --sidebar-hover: #334155;
    --sidebar-active:#3b82f6;

    /* Tekst */
    --text-primary:  #f1f5f9;
    --text-secondary:#94a3b8;
    --text-muted:    #64748b;

    /* Akcenty */
    --accent-blue:   #3b82f6;
    --accent-purple: #9333ea;
    --accent-cyan:   #06b6d4;

    /* Obramowania */
    --border:        rgba(59, 130, 246, 0.2);
    --border-subtle: #334155;

    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Border-radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.45);

    /* Kolory wierszy tabeli — jasne pastele, czarna czcionka */
    --row-active:   #d1fae5;
    --row-warning:  #fef9c3;
    --row-orange:   #ffedd5;
    --row-danger:   #fee2e2;

    /* Kolory hover wierszy — szare tło */
    --row-active-hover:  #e5e7eb;
    --row-warning-hover: #e5e7eb;
    --row-orange-hover:  #e5e7eb;
    --row-danger-hover:  #e5e7eb;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

html, body {
    min-height: 100%;
    font-size: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(ellipse at top left, rgba(59,130,246,0.07), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(147,51,234,0.07), transparent 50%),
        var(--bg-root);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Compact UI mode — aktywowane przez body.compact-ui */
body.compact-ui {
    --sp-4: 12px;
    --sp-5: 16px;
    --sp-6: 18px;
    --sp-8: 24px;
    --r-lg: 10px;
    --r-xl: 14px;
}

/* Utility */
.text-muted    { color: var(--text-muted) !important; }
.text-secondary{ color: var(--text-secondary) !important; }
.d-flex        { display: flex; }
.align-items-center   { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; }
.ms-2 { margin-left: 8px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.text-center { text-align: center; }
.w-100 { width: 100%; }

/* Scrollbar globalna */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent-blue); border-radius: 4px; }