<?php
require_once 'data.php';
// Perduodame kalendorių konfigūraciją ir duomenis į JS
?>
<!DOCTYPE html>
<html lang="lt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klaipėdos rajono švietimo centras - Olimpiados ir konkursai</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* --- DIZAINO SISTEMA (V3 Premium) --- */
        :root {
            --primary: #2b4e94;
            --primary-hover: #1e3a75;
            --secondary: #bd4a56;
            --secondary-hover: #9c3b46;
            
            /* Šviesaus režimo spalvos */
            --bg-body: #f8fafc;
            --bg-card: #ffffff;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --border: #e2e8f0;
            --border-hover: #cbd5e1;
            --glass-bg: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(255, 255, 255, 0.6);
            --glass-blur: 16px;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
            --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
            
            --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            
            /* Dinamiškos kalendorių spalvos iš PHP */
            <?php foreach ($CALENDARS_CONFIG as $key => $cal): ?>
            --cal-<?php echo $key; ?>: <?php echo $cal['color']; ?>;
            <?php endforeach; ?>
        }

        body.dark-mode {
            /* Tamsaus režimo spalvos */
            --bg-body: #0b0f19;
            --bg-card: #151e30;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border: #1e293b;
            --border-hover: #334155;
            --glass-bg: rgba(21, 30, 48, 0.75);
            --glass-border: rgba(255, 255, 255, 0.05);
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
        }

        body { 
            font-family: var(--font-main); 
            background: radial-gradient(circle at top right, rgba(43, 78, 148, 0.04), transparent 600px), var(--bg-body); 
            color: var(--text-main); 
            margin: 0; 
            padding: 30px 20px; 
            position: relative; 
            min-height: 100vh;
            transition: background 0.3s ease, color 0.3s ease;
        }
        
        body.dark-mode {
            background: radial-gradient(circle at top right, rgba(43, 78, 148, 0.12), transparent 700px), var(--bg-body); 
        }

        * { box-sizing: border-box; }

        .error-box { 
            background: #ffebeb; 
            color: #ef4444; 
            border: 1px solid #fee2e2; 
            padding: 15px 20px; 
            border-radius: 12px; 
            margin-bottom: 25px; 
            font-weight: 500;
            box-shadow: var(--shadow-sm);
        }
        body.dark-mode .error-box {
            background: #271c1c;
            border-color: #451a1a;
            color: #fca5a5;
        }

        /* --- ANTRAŠTĖ (Kompaktiška V3.1) --- */
        .header-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
            padding: 0 10px;
            flex-wrap: nowrap;
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .header-logo {
            height: 46px;
            width: auto;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }
        body.dark-mode .header-logo {
            background: rgba(255, 255, 255, 0.95);
            padding: 4px 8px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
        }
        .page-title {
            text-align: left;
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            line-height: 1.35;
        }
        .page-title a {
            text-decoration: none;
            transition: all 0.25s ease;
        }
        .page-title .org-link {
            color: var(--primary);
        }
        body.dark-mode .page-title .org-link {
            color: #60a5fa;
        }
        .page-title .org-link:hover {
            color: var(--primary-hover);
            opacity: 0.85;
        }
        .page-title .section-link {
            color: var(--secondary);
        }
        body.dark-mode .page-title .section-link {
            color: #f87171;
        }
        .page-title .section-link:hover {
            color: var(--secondary-hover);
            opacity: 0.85;
        }
        .page-title .separator {
            color: var(--text-muted);
            margin: 0 6px;
        }

        /* --- VIRŠUTINIAI VEIKSMAI (Kompaktiški) --- */
        .top-actions-wrapper {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-shrink: 0;
        }
        
        .action-btn {
            background: var(--bg-card);
            border: 1px solid var(--border);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--text-main);
            padding: 0;
        }
        .action-btn:hover {
            transform: translateY(-1.5px) rotate(8deg);
            background: var(--border);
            box-shadow: var(--shadow-md);
            border-color: var(--border-hover);
        }
        .action-btn:active {
            transform: translateY(0) scale(0.95);
        }
        
        .action-icon {
            width: 18px;
            height: 18px;
            fill: var(--text-main);
            transition: fill 0.3s ease;
        }
        body.dark-mode .action-icon {
            fill: #f8fafc;
        }
        
        .theme-sun { display: none; }
        .theme-moon { display: block; }
        body.dark-mode .theme-sun { display: block; }
        body.dark-mode .theme-moon { display: none; }

        /* --- FILTRAI IR VALDYMAS (Kompaktiški V3.1) --- */
        .top-controls { 
            background: var(--glass-bg); 
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            padding: 12px 18px; 
            border-radius: 12px; 
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-sm); 
            margin-bottom: 16px; 
            transition: background 0.3s, border-color 0.3s;
        }
        
        .top-row { 
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 20px;
            margin-bottom: 10px; 
            border-bottom: 1px solid var(--border); 
            padding-bottom: 10px; 
        }
        
        .years-nav { display: flex; gap: 6px; font-size: 16px; font-weight: bold; }
        .year-btn { 
            cursor: pointer; 
            color: var(--text-muted); 
            padding: 4px 12px; 
            border-radius: 20px; 
            transition: all 0.25s ease; 
            user-select: none;
            font-size: 13px;
            font-weight: 700;
            background: transparent;
            border: 1px solid transparent;
        }
        .year-btn:hover { 
            color: var(--text-main); 
            background: var(--border); 
        }
        .year-btn.active { 
            color: var(--primary); 
            background: rgba(43, 78, 148, 0.08); 
            border-color: rgba(43, 78, 148, 0.15);
        }
        body.dark-mode .year-btn.active {
            color: #60a5fa;
            background: rgba(96, 165, 250, 0.15);
            border-color: rgba(96, 165, 250, 0.25);
        }
        
        .calendar-toggles { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
        
        .toggle-item { 
            position: relative;
            cursor: pointer; 
            display: inline-flex; 
            align-items: center; 
            user-select: none; 
        }
        .toggle-checkbox { 
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-label { 
            display: inline-flex; 
            align-items: center; 
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            background: var(--bg-body);
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-sm);
        }
        .toggle-item:hover .toggle-label {
            background: var(--border);
            color: var(--text-main);
            transform: translateY(-1px);
        }
        .toggle-checkbox:checked + .toggle-label {
            background: var(--cal-color);
            color: #ffffff !important;
            border-color: var(--cal-color);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
        }
        .color-dot { 
            width: 7px; 
            height: 7px; 
            border-radius: 50%; 
            display: inline-block; 
            background: currentColor;
        }

        .months-nav { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
        
        .month-btn { 
            cursor: pointer; 
            color: var(--text-muted); 
            padding: 6px 14px; 
            border-radius: 20px; 
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
            user-select: none; 
            border: 1px solid var(--border); 
            background: var(--bg-card);
            display: inline-flex; 
            align-items: center; 
            gap: 6px;
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }
        .month-btn:hover { 
            background: var(--border); 
            color: var(--text-main);
            transform: translateY(-1px);
        }
        .month-btn.active { 
            background: var(--primary); 
            color: #ffffff !important; 
            border-color: var(--primary);
            box-shadow: 0 3px 10px rgba(43, 78, 148, 0.2);
        }
        body.dark-mode .month-btn.active {
            background: #3b82f6;
            border-color: #3b82f6;
            box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
        }

        .cal-badge {
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            min-width: 16px; 
            height: 16px; 
            border-radius: 50%; 
            font-size: 9px; 
            color: #ffffff; 
            font-weight: 800; 
            line-height: 1; 
            padding: 0 4px; 
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
        }
        .month-btn.active .cal-badge { 
            border: 1px solid rgba(255,255,255,0.4); 
            box-shadow: none;
        }

        /* --- PAGRINDINĖS KORTELĖS --- */
        .main-container { display: flex; gap: 25px; align-items: flex-start; }
        
        .calendar-wrapper { 
            flex: 2.5; 
            background: var(--glass-bg); 
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: 16px; 
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md); 
            overflow: hidden; 
            transition: background 0.3s, border-color 0.3s;
        }
        
        .list-wrapper { 
            flex: 1; 
            background: var(--glass-bg); 
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: 16px; 
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md); 
            padding: 24px; 
            min-width: 300px; 
            max-height: 800px; 
            overflow-y: auto; 
            transition: background 0.3s, border-color 0.3s;
        }
        
        .list-wrapper::-webkit-scrollbar { width: 6px; }
        .list-wrapper::-webkit-scrollbar-track { background: transparent; }
        .list-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
        .list-wrapper::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

        /* --- KALENDORIAUS GRIDAS --- */
        .cal-header-row { 
            display: grid; 
            grid-template-columns: repeat(7, minmax(0, 1fr)); 
            background: transparent; 
            color: var(--text-muted); 
            font-weight: 700; 
            text-align: center; 
            padding: 18px 0; 
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 1px;
            border-bottom: 1px solid var(--border);
        }
        .cal-grid { 
            display: grid; 
            grid-template-columns: repeat(7, minmax(0, 1fr)); 
            gap: 8px; 
            padding: 12px;
            background: transparent;
        }
        .cal-cell { 
            background: var(--bg-card); 
            min-height: 98px; 
            border-radius: 12px;
            border: 1px solid var(--border); 
            padding: 8px; 
            font-size: 13px; 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .cal-cell:hover {
            border-color: var(--text-muted);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .cal-cell.empty { 
            background: transparent; 
            border-color: transparent;
            pointer-events: none;
        }
        .cal-cell.today { 
            border: 2px solid var(--primary);
            box-shadow: 0 0 0 4px rgba(43, 78, 148, 0.15);
        }
        body.dark-mode .cal-cell.today {
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
        }
        
        .cal-cell.weekend {
            background: rgba(0, 0, 0, 0.015);
        }
        body.dark-mode .cal-cell.weekend {
            background: rgba(255, 255, 255, 0.015);
        }
        
        .day-number { 
            font-weight: 800; 
            color: var(--text-muted); 
            margin-bottom: 6px; 
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            font-size: 13px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            transition: all 0.25s ease;
        }
        .cal-cell.today .day-number {
            background: var(--primary);
            color: #ffffff !important;
        }
        body.dark-mode .cal-cell.today .day-number {
            background: #3b82f6;
        }

        /* --- RENGINIAI TINKLELYJE --- */
        .events-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 4px;
            flex: 1;
        }
        
        .grid-event { 
            color: var(--cal-text-color, var(--text-main)); 
            background-color: var(--cal-bg-color, var(--bg-body));
            border-left: 3.5px solid var(--cal-color);
            padding: 4px 8px;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.35;
            border-radius: 5px; 
            cursor: pointer; 
            display: block; 
            text-decoration: none; 
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
            position: relative;
        }
        .grid-event:hover { 
            transform: translateY(-1.5px); 
            box-shadow: var(--shadow-sm);
            opacity: 0.95;
        }
        
        /* Tooltip */
        .grid-event::after {
            content: attr(data-title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-4px);
            background: rgba(15, 23, 42, 0.95);
            color: #ffffff;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            white-space: normal;
            width: max-content;
            max-width: 220px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s ease;
            z-index: 100;
            box-shadow: var(--shadow-lg);
            border: 1px solid rgba(255,255,255,0.08);
            line-height: 1.4;
        }
        .grid-event:hover::after { 
            opacity: 1; 
            transform: translateX(-50%) translateY(0);
        }
        
        /* --- ŠONINIS RENGINIŲ SĄRAŠAS --- */
        .list-main-header {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 24px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--primary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        body.dark-mode .list-main-header {
            border-bottom-color: #3b82f6;
        }

        .list-section { 
            margin-bottom: 25px; 
        }
        
        .list-header { 
            font-size: 13px; 
            font-weight: 700; 
            margin-bottom: 16px; 
            padding: 8px 14px;
            background: var(--bg-card);
            border-radius: 8px;
            color: var(--text-main); 
            display: flex; 
            align-items: center; 
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }
        .list-header-dot { 
            width: 8px; 
            height: 8px; 
            border-radius: 50%; 
            display: inline-block; 
            margin-right: 10px; 
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
        }
        body.dark-mode .list-header-dot {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
        }
        
        .timeline-container {
            position: relative;
            padding-left: 20px;
            border-left: 2px solid var(--border);
            margin-left: 12px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .event-list-item { 
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 2px 0; 
            position: relative;
            font-size: 13px;
            line-height: 1.4;
        }
        
        .event-list-item::before {
            content: '';
            position: absolute;
            left: -26px;
            top: 7px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--bg-card);
            border: 2.5px solid var(--cal-color);
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: var(--shadow-sm);
            z-index: 2;
        }
        .event-list-item:hover::before {
            transform: scale(1.35);
            background: var(--cal-color);
            box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
        }
        body.dark-mode .event-list-item:hover::before {
            box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
        }
        
        .list-date { 
            font-weight: 700; 
            color: var(--text-muted); 
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .list-link { 
            color: var(--text-main); 
            text-decoration: none; 
            cursor: pointer; 
            font-weight: 600; 
            transition: all 0.2s ease;
            font-size: 13.5px;
        }
        .list-link:hover { 
            color: var(--cal-color) !important; 
            text-decoration: none;
        }

        /* --- MODERNUS MODALINIS LANGAS --- */
        .modal-overlay { 
            display: none; 
            position: fixed; 
            z-index: 2000; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(11, 15, 25, 0.5); 
            align-items: center; 
            justify-content: center; 
            backdrop-filter: blur(8px); 
            -webkit-backdrop-filter: blur(8px);
            opacity: 0;
            transition: opacity 0.25s ease-out;
        }
        .modal-overlay.active {
            display: flex;
            opacity: 1;
        }
        
        .modal-content { 
            background: var(--bg-card); 
            padding: 0; 
            border-radius: 24px; 
            width: 90%; 
            max-width: 520px; 
            position: relative; 
            box-shadow: var(--shadow-lg); 
            max-height: 90vh; 
            overflow: hidden; 
            display: flex;
            flex-direction: column;
            border: 1px solid var(--glass-border);
            transform: scale(0.95);
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .modal-overlay.active .modal-content {
            transform: scale(1);
        }
        
        .modal-header {
            padding: 35px 30px;
            background: linear-gradient(135deg, var(--cal-color-header, var(--primary)), rgba(15, 23, 42, 0.8));
            color: #ffffff;
            position: relative;
        }
        
        .modal-body {
            padding: 30px;
            overflow-y: auto;
            color: var(--text-main);
        }
        
        .close-btn { 
            position: absolute; 
            top: 25px; 
            right: 25px; 
            font-size: 22px; 
            cursor: pointer; 
            color: rgba(255, 255, 255, 0.8); 
            line-height: 1; 
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .close-btn:hover { 
            color: #ffffff; 
            background: rgba(255, 255, 255, 0.22);
            transform: rotate(90deg);
        }
        
        .modal-row { 
            margin-bottom: 18px; 
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 14px;
        }
        
        .modal-icon {
            width: 20px;
            height: 20px;
            fill: var(--text-muted);
            flex-shrink: 0;
        }
        
        .modal-info-content {
            color: var(--text-main);
            font-weight: 600;
        }
        
        #mDesc { 
            margin-top: 24px; 
            padding-top: 24px; 
            border-top: 1px solid var(--border); 
            color: var(--text-main); 
            line-height: 1.65; 
            white-space: pre-wrap; 
            word-wrap: break-word; 
            font-size: 14px;
        }
        #mDesc a { 
            color: var(--primary); 
            text-decoration: none; 
            font-weight: 700;
            transition: all 0.2s ease;
        }
        body.dark-mode #mDesc a {
            color: #60a5fa;
        }
        #mDesc a:hover {
            text-decoration: underline;
        }
        
        #mLoc a { 
            color: var(--primary); 
            text-decoration: none; 
            font-weight: 700;
            border-bottom: 1.5px dashed var(--primary); 
            transition: all 0.2s ease; 
        }
        body.dark-mode #mLoc a {
            color: #60a5fa;
            border-bottom-color: #60a5fa;
        }
        #mLoc a:hover { 
            color: var(--secondary); 
            border-bottom-color: var(--secondary); 
        }

        .modal-attachments { 
            margin-top: 20px; 
            display: flex; 
            flex-wrap: wrap; 
            gap: 10px; 
        }
        .att-btn { 
            display: flex; 
            align-items: center; 
            background: var(--bg-body); 
            border: 1px solid var(--border); 
            border-radius: 30px; 
            padding: 8px 16px; 
            text-decoration: none; 
            color: var(--text-main); 
            font-size: 13px; 
            font-weight: 600; 
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
            box-shadow: var(--shadow-sm);
        }
        .att-btn:hover { 
            background: var(--border); 
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .att-icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }

        @media (max-width: 960px) {
            .main-container { flex-direction: column; }
            .calendar-wrapper, .list-wrapper { width: 100%; }
            .list-wrapper { max-height: 500px; }
            .header-container { padding-right: 0; }
            .top-actions { position: relative; top: 0; right: 0; justify-content: center; margin-bottom: 20px; }
        }
    </style>
</head>
<body>

    <div class="top-actions" style="display: none;"></div>

    <?php if ($errorMsg): ?>
        <div class="error-box"><?php echo $errorMsg; ?></div>
    <?php endif; ?>

    <!-- ANTRAŠTĖ (Su integruotais veiksmais) -->
    <div class="header-container">
        <div class="header-left">
            <a href="http://krsc.lt" target="_blank" style="display: flex;">
                <img src="http://krsc.lt/images/joomlart/logo/logo.png" alt="KRŠC logotipas" class="header-logo">
            </a>
            <h1 class="page-title">
                <a href="http://krsc.lt" target="_blank" class="org-link">Klaipėdos rajono švietimo centras</a>
                <span class="separator">–</span>
                <a href="http://olimpiados.krsc.lt" target="_blank" class="section-link">Moksleivių olimpiados ir renginiai</a>
            </h1>
        </div>
        
        <div class="top-actions-wrapper">
            <button id="themeToggle" class="action-btn" title="Perjungti tamsų/šviesų režimą">
                <svg class="action-icon theme-sun" viewBox="0 0 24 24">
                    <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.01c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
                </svg>
                <svg class="action-icon theme-moon" viewBox="0 0 24 24">
                    <path d="M12.3 22c5.02 0 9.1-4.08 9.1-9.1 0-4.07-2.67-7.5-6.36-8.62-.53-.16-1.01.24-.9.79.9 4.43-.37 9.06-3.8 12.5-3.44 3.44-8.07 4.7-12.5 3.8-.55-.11-.95.37-.79.9C1.1 19.92 5.08 22 9.1 22h3.2z"/>
                </svg>
            </button>
            <a href="clear_cache.php" class="action-btn" title="Išvalyti podėlį ir atnaujinti duomenis">
                <svg class="action-icon" viewBox="0 0 24 24">
                    <path d="M19.36,2.72L20.78,4.14L15.06,9.85C16.13,11.39 16.28,13.24 15.38,14.44L9.06,8.12C10.26,7.22 12.11,7.37 13.65,8.44L19.36,2.72M5.93,17.57C3.92,15.56 2.69,13.16 2.35,10.92L7.23,8.83L14.67,16.27L12.58,21.15C10.34,20.81 7.94,19.58 5.93,17.57Z" />
                </svg>
            </a>
        </div>
    </div>

    <div class="top-controls">
        <div class="top-row">
            <div class="years-nav" id="yearNav"></div>
            <div class="calendar-toggles" id="calToggles"></div>
        </div>
        <div class="months-nav" id="monthNav"></div>
    </div>

    <div class="main-container">
        <div class="calendar-wrapper">
            <div class="cal-header-row">
                <div>Pr</div><div>An</div><div>Tr</div><div>Kt</div><div>Pn</div><div>Št</div><div>Sk</div>
            </div>
            <div id="calendarGrid" class="cal-grid"></div>
        </div>
        
        <div class="list-wrapper">
            <div id="listMainHeader" class="list-main-header"></div>
            <div id="eventListWrapper"></div>
        </div>
    </div>

    <div id="myModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header" id="mHeader">
                <span class="close-btn" onclick="closeModal()">×</span>
                <h3 id="mTitle" style="margin: 0; font-size: 18px; font-weight: 800; padding-right: 35px; line-height: 1.45;"></h3>
            </div>
            <div class="modal-body">
                <div class="modal-row">
                    <svg class="modal-icon" viewBox="0 0 24 24">
                        <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.1.8-1.2-4.5-2.7V7z"/>
                    </svg>
                    <div class="modal-info-content">
                        <span id="mDate"></span>
                    </div>
                </div>
                <div class="modal-row" id="mLocRow" style="display:none;">
                    <svg class="modal-icon" viewBox="0 0 24 24">
                        <path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5z"/>
                    </svg>
                    <div class="modal-info-content">
                        <span id="mLoc"></span>
                    </div>
                </div>
                
                <div id="mDesc"></div>
                <div id="mAttachments" class="modal-attachments" style="display:none;"></div>
            </div>
        </div>
    </div>

    <script>
        const rawEvents = <?php echo json_encode($allEvents); ?>;
        const calendarsConfig = <?php echo json_encode($CALENDARS_CONFIG); ?>;
        
        // Mėnesių pavadinimai mygtukams
        const monthNames = ['Sausis', 'Vasaris', 'Kovas', 'Balandis', 'Gegužė', 'Birželis', 'Liepa', 'Rugpjūtis', 'Rugsėjis', 'Spalis', 'Lapkritis', 'Gruodis'];
        // Mėnesių pavadinimai antraštei (Kilmininkas)
        const monthNamesGenitive = ['SAUSIO', 'VASARIO', 'KOVO', 'BALANDŽIO', 'GEGUŽĖS', 'BIRŽELIO', 'LIEPOS', 'RUGPJŪČIO', 'RUGSĖJO', 'SPALIO', 'LAPKRIČIO', 'GRUODŽIO'];
        
        let currentYear = new Date().getFullYear();
        let currentMonth = new Date().getMonth();
        let availableYears = [];
        let activeCalendars = Object.keys(calendarsConfig);

        function hexToRgba(hex, alpha) {
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }

        function getLighterColor(hex) {
            const r = Math.min(255, parseInt(hex.slice(1, 3), 16) + 120);
            const g = Math.min(255, parseInt(hex.slice(3, 5), 16) + 120);
            const b = Math.min(255, parseInt(hex.slice(5, 7), 16) + 120);
            return `rgb(${r}, ${g}, ${b})`;
        }

        function init() {
            // Dark Mode paleidimas
            if (localStorage.getItem('dark-mode') === 'true') {
                document.body.classList.add('dark-mode');
            }
            
            const themeToggle = document.getElementById('themeToggle');
            themeToggle.onclick = () => {
                document.body.classList.toggle('dark-mode');
                const isDark = document.body.classList.contains('dark-mode');
                localStorage.setItem('dark-mode', isDark ? 'true' : 'false');
                updateView();
            };

            renderToggles();
            const yearsSet = new Set();
            if (rawEvents.length > 0) {
                rawEvents.forEach(ev => yearsSet.add(parseInt(ev.start.substring(0, 4))));
                availableYears = Array.from(yearsSet).sort();
            } else {
                availableYears = [currentYear];
            }
            if (!availableYears.includes(currentYear) && availableYears.length > 0) {
                currentYear = availableYears[0];
            }
            renderYearNav();
            updateView();
        }

        function renderToggles() {
            const container = document.getElementById('calToggles');
            container.innerHTML = '';
            for (const [key, conf] of Object.entries(calendarsConfig)) {
                const label = document.createElement('label');
                label.className = 'toggle-item';
                label.style.setProperty('--cal-color', conf.color);
                
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'toggle-checkbox';
                checkbox.checked = true; 
                checkbox.dataset.cal = key;
                checkbox.onchange = (e) => {
                    if (e.target.checked) {
                        activeCalendars.push(key);
                    } else {
                        activeCalendars = activeCalendars.filter(k => k !== key);
                    }
                    updateView();
                };
                const span = document.createElement('span');
                span.className = 'toggle-label';
                span.innerHTML = `<span class="color-dot"></span> ${conf.name}`;
                
                label.appendChild(checkbox);
                label.appendChild(span);
                container.appendChild(label);
            }
        }

        function renderYearNav() {
            const container = document.getElementById('yearNav');
            container.innerHTML = '';
            availableYears.forEach(year => {
                const btn = document.createElement('div');
                btn.className = 'year-btn ' + (year === currentYear ? 'active' : '');
                btn.innerText = year;
                btn.onclick = () => { currentYear = year; renderYearNav(); updateView(); };
                container.appendChild(btn);
            });
        }

        function renderMonthNav() {
            const container = document.getElementById('monthNav');
            container.innerHTML = '';
            monthNames.forEach((name, idx) => {
                const btn = document.createElement('div');
                btn.className = 'month-btn';
                if (idx === currentMonth) btn.classList.add('active');
                
                let badgesHtml = '';
                activeCalendars.forEach(calKey => {
                    const count = rawEvents.filter(ev => {
                        const y = parseInt(ev.start.substring(0, 4));
                        const m = parseInt(ev.start.substring(5, 7)) - 1;
                        return y === currentYear && m === idx && ev.calId === calKey;
                    }).length;

                    if (count > 0) {
                        const color = calendarsConfig[calKey].color;
                        badgesHtml += `<span class="cal-badge" style="background:${color}">${count}</span>`;
                    }
                });

                btn.innerHTML = `<span>${name}</span> ${badgesHtml}`;
                btn.onclick = () => { currentMonth = idx; updateView(); };
                container.appendChild(btn);
            });
        }

        function updateView() {
            renderMonthNav(); 
            updateListHeader();
            renderCalendar();
            renderList();
        }

        function updateListHeader() {
            const el = document.getElementById('listMainHeader');
            const monthName = monthNamesGenitive[currentMonth];
            
            const now = new Date();
            const currentRealYear = now.getFullYear();
            const currentRealMonth = now.getMonth();
            
            if (currentYear === currentRealYear && currentMonth === currentRealMonth) {
                el.innerText = `ARTIMIAUSI ${currentYear} m. ${monthName} MĖNESIO RENGINIAI`;
            } else if (currentYear > currentRealYear || (currentYear === currentRealYear && currentMonth > currentRealMonth)) {
                el.innerText = `${currentYear} m. ${monthName} MĖNESIO RENGINIAI`;
            } else {
                el.innerText = `${currentYear} m. ${monthName} RENGINIŲ ARCHYVAS`;
            }
        }

        function renderCalendar() {
            const grid = document.getElementById('calendarGrid');
            grid.innerHTML = '';
            
            const firstDayObj = new Date(currentYear, currentMonth, 1);
            const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
            let startDay = firstDayObj.getDay(); 
            if (startDay === 0) startDay = 7; 

            for (let i = 1; i < startDay; i++) {
                grid.appendChild(createCell('empty'));
            }

            const todayStr = new Date().toISOString().split('T')[0];
            const isDark = document.body.classList.contains('dark-mode');

            for (let d = 1; d <= daysInMonth; d++) {
                const cell = createCell('');
                const mStr = (currentMonth + 1).toString().padStart(2, '0');
                const dStr = d.toString().padStart(2, '0');
                const dateKey = `${currentYear}-${mStr}-${dStr}`;

                if (dateKey === todayStr) cell.classList.add('today');

                const dayOfWeek = (startDay + d - 2) % 7; // 0 represents Monday, 5 is Saturday, 6 is Sunday
                if (dayOfWeek === 5 || dayOfWeek === 6) cell.classList.add('weekend');

                const num = document.createElement('span');
                num.className = 'day-number';
                num.innerText = d;
                cell.appendChild(num);

                const daysEvents = rawEvents.filter(ev => {
                    const s = ev.start.substring(0, 10);
                    return s === dateKey && activeCalendars.includes(ev.calId); 
                });

                if (daysEvents.length > 0) {
                    const evContainer = document.createElement('div');
                    evContainer.className = 'events-container';
                    
                    daysEvents.forEach(ev => {
                        const el = document.createElement('div');
                        el.className = 'grid-event';
                        
                        const bgColor = hexToRgba(ev.color, isDark ? 0.20 : 0.08);
                        const textColor = isDark ? getLighterColor(ev.color) : ev.color;
                        
                        el.style.setProperty('--cal-color', ev.color);
                        el.style.setProperty('--cal-bg-color', bgColor);
                        el.style.setProperty('--cal-text-color', textColor);
                        
                        el.innerText = ev.title;
                        el.setAttribute('data-title', ev.title);
                        el.onclick = (e) => { e.stopPropagation(); openModalFromObj(ev); };
                        evContainer.appendChild(el);
                    });
                    
                    cell.appendChild(evContainer);
                }
                
                grid.appendChild(cell);
            }
        }

        function createCell(type) {
            const div = document.createElement('div');
            div.className = 'cal-cell ' + type;
            return div;
        }

        function renderList() {
            const wrapper = document.getElementById('eventListWrapper');
            wrapper.innerHTML = '';

            const now = new Date();
            const currentRealYear = now.getFullYear();
            const currentRealMonth = now.getMonth();
            const todayStr = now.toISOString().split('T')[0];
            
            const isCurrentMonth = (currentYear === currentRealYear && currentMonth === currentRealMonth);

            activeCalendars.forEach(calKey => {
                const calConfig = calendarsConfig[calKey];
                let monthEvents = rawEvents.filter(ev => {
                    const startY = parseInt(ev.start.substring(0, 4));
                    const startM = parseInt(ev.start.substring(5, 7)) - 1;
                    return startY === currentYear && startM === currentMonth && ev.calId === calKey;
                });

                if (isCurrentMonth) {
                    monthEvents = monthEvents.filter(ev => {
                        const evDate = ev.start.substring(0, 10);
                        return evDate >= todayStr;
                    });
                }

                if (monthEvents.length > 0) {
                    const section = document.createElement('div');
                    section.className = 'list-section';
                    const header = document.createElement('div');
                    header.className = 'list-header';
                    header.innerHTML = `<span class="list-header-dot" style="background:${calConfig.color}"></span> ${calConfig.name}`;
                    section.appendChild(header);

                    const timeline = document.createElement('div');
                    timeline.className = 'timeline-container';

                    monthEvents.sort((a, b) => a.start.localeCompare(b.start));

                    monthEvents.forEach(ev => {
                        const div = document.createElement('div');
                        div.className = 'event-list-item';
                        div.style.setProperty('--cal-color', ev.color);
                        
                        let dateStr = ev.start.substring(5, 10);
                        if (!ev.isAllDay && ev.timeRange) {
                            dateStr += ' ' + ev.timeRange.split('-')[0];
                        }

                        div.innerHTML = `<span class="list-date">${dateStr}</span><a class="list-link">${ev.title}</a>`;
                        div.querySelector('a').onclick = () => openModalFromObj(ev);
                        timeline.appendChild(div);
                    });
                    
                    section.appendChild(timeline);
                    wrapper.appendChild(section);
                }
            });
            
            if (wrapper.innerHTML === '') {
                if (isCurrentMonth) {
                    wrapper.innerHTML = '<p style="color:var(--text-muted); text-align:center; padding:20px; font-size:13px; font-style:italic;">Šį mėnesį daugiau renginių nenumatyta.</p>';
                } else {
                    wrapper.innerHTML = '<p style="color:var(--text-muted); text-align:center; padding:20px; font-size:13px; font-style:italic;">Pasirinktuose kalendoriuose šį mėnesį renginių nėra.</p>';
                }
            }
        }

        const modal = document.getElementById('myModal');
        const attContainer = document.getElementById('mAttachments');
        
        function openModalFromObj(ev) {
            const titleEl = document.getElementById('mTitle');
            titleEl.innerText = ev.title;

            let dateStr = ev.start.substring(0, 10);
            if (!ev.isAllDay && ev.timeRange) {
                dateStr += ' ' + ev.timeRange;
            }
            document.getElementById('mDate').innerText = dateStr;

            const locRow = document.getElementById('mLocRow');
            if (ev.location) {
                const mapLink = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(ev.location);
                document.getElementById('mLoc').innerHTML = `<a href="${mapLink}" target="_blank">${ev.location}</a>`;
                locRow.style.display = 'flex';
            } else {
                locRow.style.display = 'none';
            }

            let desc = ev.description || 'Nėra aprašymo';
            document.getElementById('mDesc').innerHTML = desc;
            
            const descLinks = document.getElementById('mDesc').querySelectorAll('a');
            descLinks.forEach(a => {
                a.style.color = ev.color;
            });

            attContainer.innerHTML = '';
            if (ev.attachments && ev.attachments.length > 0) {
                attContainer.style.display = 'flex';
                ev.attachments.forEach(att => {
                    const btn = document.createElement('a');
                    btn.href = att.url;
                    btn.target = '_blank';
                    btn.className = 'att-btn';
                    const icon = document.createElement('img');
                    icon.src = att.icon;
                    icon.className = 'att-icon';
                    btn.appendChild(icon);
                    btn.appendChild(document.createTextNode(att.title));
                    attContainer.appendChild(btn);
                });
            } else {
                attContainer.style.display = 'none';
            }

            document.getElementById('mHeader').style.setProperty('--cal-color-header', ev.color);
            
            modal.style.display = 'flex';
            setTimeout(() => {
                modal.classList.add('active');
            }, 10);
        }

        function closeModal() { 
            modal.classList.remove('active');
            setTimeout(() => {
                modal.style.display = 'none';
            }, 250);
        }
        
        window.onclick = (e) => { if (e.target == modal) closeModal(); };

        init();
    </script>
</body>
</html>