:root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --accent-color: #06b6d4;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --dark-bg: #0f172a;
            --darker-bg: #020617;
            --card-bg: #1e293b;
            --text-primary: #f8fafc;
            --text-secondary: #cbd5e1;
            --border-color: #334155;
            --hover-color: #475569;
        }

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

        body {
            background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
            color: var(--text-primary);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Animated Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
            animation: float 20s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Navbar Styles */
        .navbar {
            background: rgba(15, 23, 42, 0.95) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            position: relative; /* Potrebné pre z-index */
            z-index: 100; /* Zabezpečí, že bude nad ostatnými elementmi */            
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .navbar-nav .nav-link {
            color: var(--text-secondary) !important;
            transition: all 0.3s ease;
            position: relative;
            padding: 0.5rem 1rem !important;
        }

        .navbar-nav .nav-link:hover {
            color: var(--primary-color) !important;
            transform: translateY(-2px);
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .navbar-nav .nav-link:hover::after {
            width: 80%;
        }

        .dropdown-menu {
            background: var(--card-bg);
            border: 0px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            z-index: 1070;
        }
        .dropdown-menu.show {
            padding-right: 15px;
        }


        .card .list-group-item {
            background: none;
            color: var(--text-primary);
        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            background-color: #dddddd;
            opacity: 0.8;
        }

        .info-item {
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #211d63;
        }

        .card td, .card th {
            color: var(--text-secondary) !important;
            border: 1px solid var(--border-color);
        }

        /* Zjednocuje border farbu pre celú tabuľku v karte */
        .card table {
            border-collapse: collapse; /* Odstráni dvojité borders */
            width: 100%;
        }

        .card th, .card td {
            color: var(--text-secondary) !important;
            border: 1px solid var(--border-color); /* Tvoja existujúca definícia, ktorá je dobrá */
            padding: 12px 15px; /* Pridajme padding pre lepšie čítanie */
            text-align: left; /* Pre konzistenciu */
        }

        /* Zameriame sa na hlavičky tabuliek */
        .card th {
            background-color: rgba(30, 41, 59, 0.5); /* Mierne tmavšie pozadie pre hlavičky */
            color: var(--text-primary) !important; /* Zvýrazníme text hlavičky */
            border-bottom: 2px solid var(--border-color); /* Pridáme výraznejší spodný border na hlavičky */
            font-weight: 600;
        }

        /* Odstránime border z vrchu prvého riadku, ak už je na hlavičke */
        .card tr:first-child th {
            border-top: none;
        }

        /* Ak sa ti zdá, že aj samotný thead element má bottom border, zmeníme ho */
        .card thead {
            border-top: 2px solid var(--border-color); /* Odstránime pôvodný top border z thead */
            border-bottom: none; /* Odstránime pôvodný bottom border z thead */
        }

        .card a {
            color: var(--text-secondary);
        }

        .card a:hover {
            color: var(--text-secondary);
            text-decoration: none;
        }

        
        .card a {
        color: #60a5fa; /* Svetlejšia modrá pre tmavý režim */
        text-decoration: none;
        transition: color 0.2s ease;
        }

        .card a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 5px; /* Toto urobí ten moderný "vzdušný" vzhľad */        
        color: #93c5fd; /* Ešte svetlejšia pri hoveri */
        } 


        .ts-dropdown {
            z-index: 2100 !important;
        }
        
        /* Fix for TomSelect in Modals */
        .modal-body {
            overflow: visible !important;
        }
        
        .modal-content {
            overflow: visible !important;
        }

        .ts-wrapper.form-control {
            overflow: visible !important;
        }
        
        .card {
            background: var(--card-bg);            border: 1px solid var(--border-color);
            padding: 0rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .card-icon.primary { background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); }
        .card-icon.success { background: linear-gradient(45deg, var(--success-color), #22c55e); }
        .card-icon.warning { background: linear-gradient(45deg, var(--warning-color), #fbbf24); }
        .card-icon.danger { background: linear-gradient(45deg, var(--danger-color), #f87171); }

        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .card-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .card-description {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }


        .card .btn {
            color: var(--card-bg);
        }

        .card .btn:hover {
            color: var(--border-color);
        }
        
        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 2rem;
        }

        .action-btn {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border: none;
            padding: 1rem 2rem;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .action-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .action-btn:hover::before {
            left: 100%;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.3);
            color: white;
        }

        .action-btn.secondary {
            background: linear-gradient(45deg, var(--card-bg), var(--hover-color));
            color: var(--text-primary);
        }

        .action-btn.secondary:hover {
            color: var(--text-primary);
            box-shadow: 0 15px 30px -5px rgba(51, 65, 85, 0.3);
        }

        /* Alerts */
        .alert {
            border: none;
            border-radius: 12px;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            backdrop-filter: blur(10px);
        }

        .alert-success {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success-color);
            border-left: 4px solid var(--success-color);
        }

        .alert-warning {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
            border-left: 4px solid var(--warning-color);
        }

        .alert-danger {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            border-left: 4px solid var(--danger-color);
        }

        .alert-info {
            background: rgba(6, 182, 212, 0.1);
            color: var(--accent-color);
            border-left: 4px solid var(--accent-color);
        }



        .loading {
            animation: pulse 2s infinite;
        }

        .dashboard-grid {
            display: flex; /* Zapne Flexbox pre kontajner */
            flex-wrap: wrap; /* Umožní zalamovanie kariet na ďalší riadok na menších obrazovkách */
            gap: 20px; /* Medzera medzi kartami, môžeš si ju upraviť */
        }

        .dashboard-card {
            flex: 1; /* Kľúčová vlastnosť: každá karta sa pokúsi zabrať rovnaký priestor */
            display: flex; /* Zabezpečí, že aj obsah vo vnútri karty sa bude dať pekne zarovnať */
            flex-direction: column;
        }

        .dashboard-card .card-header {
            flex-grow: 1; /* Dovolí hlavičke karty rásť a vyplniť dostupný priestor */
        }

        .system-info-section {
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        /* ========================================================================
        Bootstrap 5 Nested Dropdown on Hover
        ======================================================================== */

        .dropdown-menu .dropend .dropdown-toggle::after {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: .255em;
            vertical-align: .255em;
            content: "";
            border-top: .3em solid transparent;
            border-right: 0;
            border-bottom: .3em solid transparent;
            border-left: .3em solid;
        }

        .dropdown-item {
            color: var(--text-secondary);
        }


        .activity-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .activity-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border: 1px solid #211d63;
            border-radius: 8px;
            gap: 1rem;
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .activity-icon.success { background-color: #28a745; }
        .activity-icon.warning { background-color: #ffc107; }
        .activity-icon.danger { background-color: #dc3545; }
        .activity-icon.primary { background-color: #007bff; }
        .activity-icon.info { background-color: #17a2b8; }

        .activity-content {
            flex: 1;
        }

        .activity-title {
            font-weight: bold;
            margin-bottom: 0.25rem;
        }

        .activity-description {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }

        .activity-time {
            color: #999;
            font-size: 0.8rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .btn-primary { background-color: #007bff; color: white; }
        .btn-success { background-color: #28a745; color: white; }
        .btn-info { background-color: #17a2b8; color: white; }
        .btn-warning { background-color: #ffc107; color: #212529; }

        .accordion-toggle {
            cursor: pointer;
        }
        .collapse {
            transition: height 0.2s ease-in-out;
        }

        .collapse.show {
            height: auto;
        }


        .page-item.disabled .page-link {
            background: none;
        }
        .page-item .page-link  {
            background: none;
        }

        /* Dark Modals */
        .modal-content {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }
        .modal-header, .modal-footer {
            border-color: var(--border-color);
        }
        /* Modals & Forms Integration */
        #ajaxModal .modal-content {
            background-color: var(--card-bg);
            color: var(--text-primary);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        #ajaxModal .modal-header {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .modal-header .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
            opacity: 0.8;
        }
        
        .modal-header .btn-close:hover {
            opacity: 1;
        }        /* FullCalendar Dark Theme Fixes */
        .fc {
            color: var(--text-primary);
        }
        .fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid {
            border-color: var(--border-color) !important;
        }
        .fc-daygrid-day-number, .fc-col-header-cell-cushion {
            color: var(--text-secondary);
            text-decoration: none;
        }
        .fc-day-today {
            background: rgba(99, 102, 241, 0.1) !important;
        }
        .fc-button-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }
        .fc-button-primary:disabled {
            background-color: var(--hover-color) !important;
            border-color: var(--border-color) !important;
        }
        .fc-list-day-cushion, .fc-list-event:hover td {
            background-color: var(--hover-color) !important;
        }
        .fc-daygrid-more-link {
            color: var(--accent-color);
        }

/*******************************************************
  RESPONSIVE PAGE
********************************************************/
        
        @media all and (min-width: 992px) {
            .navbar .nav-item .dropend:hover .dropdown-menu {
                display: block;
                margin-top: -38px; /* Jemné doladenie pozície */
                margin-left: 100%;
            }
            .navbar .nav-item .dropstart:hover .dropdown-menu {
                display: block;
                margin-top: -38px;    /* 0 alebo jemne dolad (napr. -5px) */
                margin-right: -2px;  /* TOTO MUSÍ BYŤ 0 - pripadne mierna medzera 2px */
                top: 0;
                right: 100%;
                left: auto;
            }
        }


        /* Mobile: Sticky Action Bar in Detail Views */
        @media (max-width: 991px) {
            .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 {
                position: sticky;
                top: 0;
                background: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(10px);
                z-index: 90; /* Znížené pod menu a sidebar */
                margin-left: -1rem;
                margin-right: -1rem;
                padding: 0.75rem 1rem;
                border-bottom: 1px solid var(--border-color);
            }
            .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 h1 {
                font-size: 1.1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        /* Fix pre orezávanie textu v hlavičke */
        .header-title-container {
            flex: 1;
            min-width: 0;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            #banner h1 {
                font-size: 2.5rem;
            }
            
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .action-btn {
                width: 100%;
                max-width: 300px;
            }

            /* Mobile-specific spacing adjustments (Issue 3) */
            .card {
                padding: 1rem;
                border-radius: 8px;
                margin-bottom: 1rem;
            }
            
            .card th, .card td {
                padding: 8px 10px;
                font-size: 0.9rem;
            }
            
            .card-header {
                padding: 0.75rem 1rem;
            }
            
            .card-body {
                padding: 1rem;
            }
        }

        /* Mobile: Modern Sidebar Navigation - FULL WIDTH */
        @media (max-width: 991px) {
            .navbar-collapse {
                position: fixed !important;
                top: 0 !important;
                left: -100% !important; /* Schované úplne vľavo */
                width: 100% !important; /* Na celú šírku */
                height: 100vh !important;
                background: #0f172a !important;
                display: block !important;
                transition: left 0.3s ease-in-out !important;
                z-index: 2000 !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }

            .navbar-collapse.show {
                left: 0 !important; /* Vysunuté na celú plochu */
            }

            /* We use a dedicated backdrop if needed, but standard Bootstrap collapse might not need it */
            
            .sidebar-mobile-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1.2rem 1.5rem;
                background: rgba(255,255,255,0.05);
                border-bottom: 1px solid var(--border-color);
            }

            .navbar-nav {
                width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            .navbar-nav .nav-item {
                width: 100% !important;
            }

            .navbar-nav .nav-link {
                padding: 1rem 1.5rem !important;
                color: var(--text-primary) !important;
                display: flex !important;
                align-items: center;
                border-bottom: 1px solid rgba(255,255,255,0.03);
            }

            .navbar-nav .nav-link i {
                width: 25px;
                margin-right: 12px;
                text-align: center;
                color: var(--primary-color);
            }

            /* CRITICAL: Fix for Dropdowns inside Sidebar */
            .navbar-nav .dropdown-menu {
                position: static !important;
                float: none !important;
                display: none !important; /* Bootstrap will add .show */
                width: 100% !important;
                background: rgba(0,0,0,0.2) !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                box-shadow: none !important;
                transform: none !important; /* Disable Popper.js */
            }

            .navbar-nav .dropdown-menu.show {
                display: block !important;
            }

            .dropdown-item {
                padding: 0.8rem 1.5rem 0.8rem 3.5rem !important; /* Odsadenie pre vnorenie */
                color: var(--text-secondary) !important;
                border-bottom: 1px solid rgba(255,255,255,0.02);
            }

            .navbar-nav .dropdown-toggle::after {
                display: none !important;
            }
        }

        /* Loading Animation */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

/* ========================================================================
   RESPONSIVE STACKED TABLES (Mobile Friendly) - GLOBAL
   ======================================================================== */
@media (max-width: 768px) {
    /* Apply to all standard tables in admin, unless explicitly excluded */
    .table:not(.no-responsive), 
    .table:not(.no-responsive) tbody, 
    .table:not(.no-responsive) tr, 
    .table:not(.no-responsive) td {
        display: block !important;
        width: 100% !important;
    }

    /* Disable bootstrap's table-responsive horizontal scroll when stacked */
    .table-responsive {
        overflow-x: visible !important;
    }

    .table:not(.no-responsive) thead {
        display: none !important;
    }
    
    .table:not(.no-responsive) tr {
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px;
        background: rgba(30, 41, 59, 0.3);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .table:not(.no-responsive) td {
        text-align: right !important;
        padding: 0.75rem 1rem !important;
        padding-left: 40% !important;
        position: relative;
        border: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        min-height: 2.5rem;
    }
    
    .table:not(.no-responsive) td:last-child {
        border-bottom: none !important;
        background: rgba(255, 255, 255, 0.05);
        text-align: center !important;
        padding-left: 1rem !important;
    }
    
    .table:not(.no-responsive) td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 35%;
        text-align: left;
        font-weight: 600;
        color: var(--primary-color);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* Transparent Table Card Helper */
.card-transparent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.card-transparent::before { display: none !important; }
.card-transparent .card-body { padding: 0 !important; }
.card-transparent .table { background-color: transparent !important; margin-bottom: 0; }
.card-transparent .table td, .card-transparent .table th { 
    background-color: transparent !important; 
    border-left: none !important; 
    border-right: none !important; 
    border-color: rgba(255, 255, 255, 0.05) !important; 
}
.card-transparent thead, .card-transparent thead.table-light { background-color: rgba(255, 255, 255, 0.03) !important; }
.card-transparent thead th { border-top: none !important; background: transparent !important; }