/* ==========================================================================
   TIMESHEET - Core Styles, Design Tokens & 5 Color Themes
   ========================================================================== */

:root,
[data-theme="dark"] {
    /* Theme 1: Zadana Tamna (Dark Charcoal / Black + Emerald) */
    --bg-base: #0f1013;
    --bg-sidebar: #131418;
    --bg-card: #181a20;
    --bg-card-subtle: #1e2027;
    --bg-hover: #22252e;
    --bg-input: #121317;

    --border-color: #262932;
    --border-subtle: #1f2229;
    --border-highlight: #2f3340;

    --accent-green: #22c55e;
    --accent-green-bright: #34d399;
    --accent-green-dark: #15803d;
    --accent-green-bg: rgba(34, 197, 94, 0.12);
    --accent-green-glow: rgba(34, 197, 94, 0.28);
    --accent-green-border: rgba(34, 197, 94, 0.35);

    --accent-yellow: #eab308;
    --accent-yellow-bg: rgba(234, 179, 8, 0.15);
    --accent-red: #ef4444;
    --accent-red-bg: rgba(239, 68, 68, 0.15);
    --accent-blue: #3b82f6;
    --accent-blue-bg: rgba(59, 130, 246, 0.15);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-faint: #475569;

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 20px var(--accent-green-glow);
    --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.7);

    /* Fonts & Sizes */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.18s ease;
    --transition-normal: 0.25s ease;
}

[data-theme="light"] {
    /* Theme 2: Svijetla / White (Clean Slate & Pure White + Fresh Emerald) */
    --bg-base: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-subtle: #f8fafc;
    --bg-hover: #e2e8f0;
    --bg-input: #f8fafc;

    --border-color: #e2e8f0;
    --border-subtle: #edf2f7;
    --border-highlight: #cbd5e1;

    --accent-green: #16a34a;
    --accent-green-bright: #22c55e;
    --accent-green-dark: #15803d;
    --accent-green-bg: rgba(22, 163, 74, 0.1);
    --accent-green-glow: rgba(22, 163, 74, 0.2);
    --accent-green-border: rgba(22, 163, 74, 0.3);

    --accent-yellow: #d97706;
    --accent-yellow-bg: rgba(217, 119, 6, 0.12);
    --accent-red: #dc2626;
    --accent-red-bg: rgba(220, 38, 38, 0.12);
    --accent-blue: #2563eb;
    --accent-blue-bg: rgba(37, 99, 235, 0.12);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-faint: #94a3b8;

    --shadow-card: 0 4px 18px rgba(15, 23, 42, 0.06);
    --shadow-glow: 0 0 16px rgba(22, 163, 74, 0.16);
    --shadow-modal: 0 20px 50px rgba(15, 23, 42, 0.18);
}

[data-theme="midnight"] {
    /* Theme 3: Ponoćno plava (Deep Obsidian Navy + Cyan Glow) */
    --bg-base: #070d19;
    --bg-sidebar: #0b1326;
    --bg-card: #0f1a33;
    --bg-card-subtle: #142242;
    --bg-hover: #1a2c54;
    --bg-input: #091021;

    --border-color: #1e315b;
    --border-subtle: #162445;
    --border-highlight: #2a437a;

    --accent-green: #38bdf8;
    --accent-green-bright: #7dd3fc;
    --accent-green-dark: #0284c7;
    --accent-green-bg: rgba(56, 189, 248, 0.12);
    --accent-green-glow: rgba(56, 189, 248, 0.3);
    --accent-green-border: rgba(56, 189, 248, 0.35);

    --accent-yellow: #fbbf24;
    --accent-yellow-bg: rgba(251, 191, 36, 0.15);
    --accent-red: #f87171;
    --accent-red-bg: rgba(248, 113, 113, 0.15);
    --accent-blue: #60a5fa;
    --accent-blue-bg: rgba(96, 165, 250, 0.15);

    --text-primary: #f0f6fc;
    --text-secondary: #93a8d1;
    --text-muted: #627baf;
    --text-faint: #425885;

    --shadow-card: 0 8px 24px rgba(2, 6, 23, 0.6);
    --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.28);
    --shadow-modal: 0 25px 60px rgba(2, 6, 23, 0.8);
}

[data-theme="emerald"] {
    /* Theme 4: Šumska smaragd (Forest Black & Deep Emerald + Radiant Mint) */
    --bg-base: #06140f;
    --bg-sidebar: #091d17;
    --bg-card: #0d2720;
    --bg-card-subtle: #12332a;
    --bg-hover: #184236;
    --bg-input: #071712;

    --border-color: #1b493c;
    --border-subtle: #13382e;
    --border-highlight: #245f4e;

    --accent-green: #10b981;
    --accent-green-bright: #34d399;
    --accent-green-dark: #059669;
    --accent-green-bg: rgba(16, 185, 129, 0.14);
    --accent-green-glow: rgba(16, 185, 129, 0.32);
    --accent-green-border: rgba(16, 185, 129, 0.38);

    --accent-yellow: #fbbf24;
    --accent-yellow-bg: rgba(251, 191, 36, 0.15);
    --accent-red: #f87171;
    --accent-red-bg: rgba(248, 113, 113, 0.15);
    --accent-blue: #38bdf8;
    --accent-blue-bg: rgba(56, 189, 248, 0.15);

    --text-primary: #f0fdf4;
    --text-secondary: #86efac;
    --text-muted: #4ade80;
    --text-faint: #22c55e;

    --shadow-card: 0 8px 24px rgba(4, 16, 12, 0.6);
    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
    --shadow-modal: 0 25px 60px rgba(4, 16, 12, 0.8);
}

[data-theme="cyberpunk"] {
    /* Theme 5: Cyberpunk neon (Synthwave Violet / Dark Purple + Neon Fuchsia) */
    --bg-base: #0d091a;
    --bg-sidebar: #130d26;
    --bg-card: #191233;
    --bg-card-subtle: #221845;
    --bg-hover: #2c2057;
    --bg-input: #0f0a20;

    --border-color: #352569;
    --border-subtle: #261a4c;
    --border-highlight: #4a3491;

    --accent-green: #c084fc;
    --accent-green-bright: #e879f9;
    --accent-green-dark: #9333ea;
    --accent-green-bg: rgba(192, 132, 252, 0.14);
    --accent-green-glow: rgba(192, 132, 252, 0.35);
    --accent-green-border: rgba(192, 132, 252, 0.4);

    --accent-yellow: #fde047;
    --accent-yellow-bg: rgba(253, 224, 71, 0.15);
    --accent-red: #f43f5e;
    --accent-red-bg: rgba(244, 63, 94, 0.15);
    --accent-blue: #818cf8;
    --accent-blue-bg: rgba(129, 140, 248, 0.15);

    --text-primary: #faf5ff;
    --text-secondary: #d8b4fe;
    --text-muted: #a855f7;
    --text-faint: #7e22ce;

    --shadow-card: 0 8px 24px rgba(10, 4, 25, 0.6);
    --shadow-glow: 0 0 20px rgba(192, 132, 252, 0.35);
    --shadow-modal: 0 25px 60px rgba(10, 4, 25, 0.8);
}

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

html, body {
    height: 100%;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* App Wrapper Layout */
.app-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-base);
}

.main-viewport {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.content-area {
    flex: 1;
    padding: 24px 30px;
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Utility classes */
.hidden {
    display: none !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabular {
    font-variant-numeric: tabular-nums;
}