/* CSS Document */
    /* ===== RESET A ZÁKLAD ===== */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    body { 
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
        background: #f4f7fb; 
        padding: 12px;
        font-size: 1rem;
        line-height: 1.5;
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    
    /* ===== HLAVNÝ KONTAJNER ===== */
    .box { 
        background: white; 
        width: 100%;
        max-width: 520px; 
        margin: 0 auto; 
        padding: 20px 18px; 
        border-radius: 24px; 
        box-shadow: 0 8px 30px rgba(0,0,0,0.08); 
        border: 1px solid rgba(0,0,0,0.03);
    }
    
    /* ===== HEADER S INFO IKONKOU ===== */
    .header-with-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .header-with-status h3 {
        margin: 0;
        font-size: 1.45rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: #1a2639;
        display: flex;
        align-items: center;
        gap: 6px;
        line-height: 1.3;
    }
    
    /* ===== INFO IKONKA (NÁVOD) ===== */
    .info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: #0066cc;
        color: white;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 8px rgba(0,102,204,0.25);
        border: 2px solid white;
        flex-shrink: 0;
    }
    
    .info-icon:active {
        background: #004999;
        transform: scale(0.96);
    }
    
    /* ===== STATUS BADGE ===== */
    .status-badge {
        padding: 6px 14px;
        border-radius: 40px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: nowrap;
        background: #e9ecef;
        color: #495057;
        border: 1px solid rgba(0,0,0,0.05);
    }
    
    .status-aktualna {
        background: #e3f7e7;
        color: #0b4520;
        border-color: #b8e0c4;
    }
    
    .status-neaktualna {
        background: #fee9e7;
        color: #a11f1f;
        border-color: #fbc5c2;
    }
    
    /* ===== INFO A WARNING BOXY ===== */
    .info-box, .warning-box, .success-box {
        padding: 16px 14px;
        border-radius: 18px;
        margin-bottom: 24px;
        text-align: center;
        font-weight: 500;
        font-size: 0.95rem;
        border: 1px solid transparent;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    
    .info-box { 
        background: #e7f1ff; 
        color: #004085; 
        border-color: #b8daff;
    }
    
    .warning-box {
        background: #fff2df;
        color: #804d00;
        border-color: #ffe0b2;
    }
    
    .success-box {
        background: #e0f5e9;
        color: #0b4b2e;
        border-color: #b8e0c4;
    }
    
    /* ===== FORMULÁROVÉ PRVKY ===== */
    label {
        font-weight: 600;
        font-size: 0.9rem;
        color: #2c3e50;
        display: block;
        margin-bottom: 5px;
        letter-spacing: 0.3px;
    }
    
    input[type="text"], 
    input[type="date"], 
    textarea { 
        width: 100%; 
        padding: 15px 14px; 
        margin: 4px 0 16px; 
        border: 1.5px solid #e1e5e9; 
        border-radius: 18px; 
        font-size: 1rem; 
        background: #ffffff;
        transition: border 0.2s, box-shadow 0.2s;
        -webkit-appearance: none;
        appearance: none;
    }
    
    input[type="text"]:focus,
    input[type="date"]:focus,
    textarea:focus {
        border-color: #0066cc;
        outline: none;
        box-shadow: 0 0 0 4px rgba(0,102,204,0.15);
    }
    
    input[type="date"] {
        min-height: 54px;
        background: #fff;
    }
    
    textarea {
        min-height: 110px;
        resize: vertical;
        line-height: 1.5;
        border-radius: 20px;
    }
    
    /* ===== ROW SPREAD (RÁDIO TLAČIDLÁ) ===== */
    .row-spread { 
        display: flex; 
        justify-content: space-around; 
        background: #f5f7fa; 
        padding: 12px 8px; 
        border-radius: 40px; 
        margin-bottom: 20px; 
        gap: 8px;
        border: 1px solid #e9ecf0;
    }
    
    .row-spread label {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 1rem;
        font-weight: 500;
        color: #2c3e50;
        background: white;
        padding: 12px 6px;
        border-radius: 40px;
        margin: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        border: 1px solid #dee2e6;
        transition: all 0.15s;
        cursor: pointer;
    }
    
    .row-spread label:has(input:checked) {
        background: #0066cc;
        color: white;
        border-color: #0066cc;
    }
    
    .row-spread input[type="radio"] {
        margin: 0;
        width: 18px;
        height: 18px;
        accent-color: #0066cc;
    }
    
    /* ===== FARBY (SWATCH) ===== */
    .color-row { 
        display: flex; 
        gap: 12px; 
        align-items: center; 
        margin: 8px 0 20px; 
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .swatch { 
        width: 48px; 
        height: 48px; 
        border: 3px solid transparent; 
        border-radius: 24px; 
        cursor: pointer; 
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.1s, border-color 0.2s;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    
    .swatch:has(input:checked) {
        border-color: #0066cc;
        transform: scale(1.05);
    }
    
    .swatch input { 
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    
    /* ===== TLAČIDLÁ ===== */
    button { 
        width: 100%; 
        padding: 16px 12px; 
        border: none; 
        border-radius: 60px; 
        cursor: pointer; 
        font-weight: 600; 
        font-size: 1.1rem; 
        margin-bottom: 10px;
        min-height: 60px;
        transition: all 0.2s ease;
        background: #f1f3f5;
        color: #1a2639;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(0,0,0,0.03);
    }
    
    button:active {
        transform: scale(0.98);
    }
    
    .btn-preview {
        background: #ff8800;
        color: white;
        box-shadow: 0 8px 16px rgba(255,136,0,0.2);
    }
    
    .btn-preview:active { background: #e67300; }
    
    .btn-cancel {
        background: #dc3545;
        color: white;
        box-shadow: 0 8px 16px rgba(220,53,69,0.15);
    }
    
    .btn-cancel:active { background: #c82333; }
    
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 8px;
    }
    
    /* ===== MODÁLNE OKNÁ ===== */
    .modal-preview {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
        padding: 12px;
        align-items: center;
        justify-content: center;
    }
    
    .modal-preview-content {
        background-color: #ffffff;
        padding: 24px 20px;
        border-radius: 36px;
        width: 100%;
        max-width: 560px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        position: relative;
        border: 1px solid rgba(255,255,255,0.3);
    }
 
    .close-preview {
        position: absolute;
        right: 16px;
        top: 14px;
        color: #6c757d;
        font-size: 36px;
        font-weight: 400;
        cursor: pointer;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f8f9fa;
        transition: all 0.2s;
        line-height: 1;
        z-index: 10;
    }
    
    .close-preview:active { 
        background: #e9ecef;
        color: #000;
    }
    
    /* ===== NÁHĽAD TABUĽKY ===== */
    .preview-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 0.95rem;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    
    .preview-table th,
    .preview-table td {
        border: 1px solid #e9ecef;
        padding: 14px 12px;
        text-align: left;
        vertical-align: top;
    }
    
    .preview-table th {
        background: #ff8800;
        color: white;
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    .preview-table td:first-child {
        word-break: break-word;
    }
    
    .preview-table td:nth-child(2) {
        white-space: nowrap;
        text-align: center;
        background: rgba(255,136,0,0.03);
    }
    
    /* ===== NÁVOD V MODÁLNOM OKNE ===== */
    #infoBody {
        font-size: 1rem;
        line-height: 1.7;
        color: #2c3e50;
    }
    
    #infoBody h3 {
        margin: 20px 0 12px;
        color: #0066cc;
        font-size: 1.4rem;
    }
    
    #infoBody ul, #infoBody ol {
        padding-left: 24px;
        margin-bottom: 20px;
    }
    
    #infoBody li {
        margin-bottom: 10px;
    }
    
    #infoBody code {
        background: #f1f4f8;
        padding: 4px 10px;
        border-radius: 40px;
        font-size: 0.9rem;
        border: 1px solid #dde2e8;
    }
    
    /* ===== RESPONZÍVNE DOLADENIE ===== */
    @media (max-width: 400px) {
        .box { padding: 18px 14px; }
        .header-with-status h3 { font-size: 1.3rem; }
        .row-spread label { font-size: 0.9rem; padding: 10px 4px; }
        .swatch { width: 44px; height: 44px; }
        .preview-table th, 
        .preview-table td { padding: 12px 8px; }
    }
    
    @media (max-width: 360px) {
        .status-badge { font-size: 0.7rem; padding: 5px 10px; }
        .preview-table { font-size: 0.85rem; }
        .preview-table td:nth-child(2) { white-space: normal; }
    }
    
    /* ===== POMOCNÉ TRIEDY ===== */
    .date-warning {
        font-size: 0.9rem;
        color: #b65c00;
        margin-top: -10px;
        margin-bottom: 15px;
        padding: 0 4px;
    }
    
    .preview-header {
        color: #ff8800;
        margin: 0 0 18px;
        font-size: 1.9rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        padding-right: 40px;
    }
    
    .preview-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 28px;
    }
    
    .preview-actions button {
        margin-bottom: 0;
        font-size: 1.1rem;
        padding: 18px;
    }
    
    .btn-publish {
        background: #2b6e3b;
        color: white;
        box-shadow: 0 8px 16px rgba(43,110,59,0.2);
    }
    
    .btn-publish:active { background: #1f542b; }
    
    .btn-back {
        background: #5a6874;
        color: white;
    }
    
    .btn-back:active { background: #44515c; }