/* ============================================
   ORGANIC & EARTHY PRINT CENTER THEME
   "Portal w Portalu" - Efekt WOW
   ============================================ */

:root {
    /* Primary colors */
    --primary: #2E7D32;
    --primary-dark: #1B5E20;
    --primary-light: #4CAF50;
    --primary-glow: rgba(46, 125, 50, 0.15);

    /* Aliasy dla kompatybilności z main.css */
    --color-primary: var(--primary);
    --color-primary-light: var(--primary-light);
    --color-primary-dark: var(--primary-dark);

    /* Status colors */
    --success: #66BB6A;
    --warning: #FFB74D;
    --danger: #E57373;

    /* Background colors */
    --cream-50: #FDFCFA;
    --cream-100: #F9F7F2;
    --cream-200: #F5F0E8;
    --cream-300: #EBE4D8;
    --bg-primary: var(--cream-100);
    --bg-secondary: var(--cream-200);
    --bg-card: white;

    /* Earth/Brown tones */
    --earth-400: #8D6E63;
    --earth-500: #795548;
    --color-secondary: var(--earth-400);

    /* Text colors */
    --graphite-600: #546E7A;
    --graphite-700: #455A64;
    --graphite-800: #37474F;
    --graphite-900: #263238;
    --text-primary: var(--graphite-800);
    --text-secondary: var(--graphite-600);
    --text-muted: var(--graphite-700);

    /* Borders */
    --border-color: var(--cream-300);
}

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

/* Focus-visible for accessibility (WCAG 2.1 AA) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Accessibility - Reduced Motion (WCAG 2.1 AAA) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile inputs - minimum 16px font to prevent iOS zoom */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}

body {
    font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(145deg, #1B5E20 0%, #2E7D32 30%, #388E3C 60%, #43A047 100%);
    min-height: 100vh;
    position: relative;
}

/* Dekoracyjne tło z liśćmi */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M30 20c-5 0-10 5-10 10s5 10 10 10c-5 5-5 15 5 20-10 0-15 10-10 20 5-5 15-5 20 0-5-10 0-20 10-20-10-5-10-15-5-20-5 0-10-5-10-10z'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   PORTAL W PORTALU - Główny kontener
   ============================================ */
.config-panel {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
}

/* Zewnętrzna rama portalu */
.portal-outer {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(10px);
    border-radius: 32px;
    margin: 20px;
    padding: 4px;
    box-shadow:
        0 25px 80px rgba(0,0,0,0.3),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Wewnętrzny portal - główna treść */
.portal-inner {
    background: var(--cream-100);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}

/* ============================================
   HEADER Z WIZARD STEPS
   ============================================ */
.config-header {
    background: linear-gradient(135deg, var(--graphite-800) 0%, var(--graphite-900) 100%);
    color: white;
    padding: 28px 36px;
    position: relative;
    overflow: hidden;
}

.config-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(46,125,50,0.3) 0%, transparent 70%);
    pointer-events: none;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(46,125,50,0.4);
}

.brand-icon i {
    width: 28px;
    height: 28px;
    color: white;
}

.header-title h1 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.header-title p {
    opacity: 0.8;
    font-size: 14px;
    font-weight: 500;
}

.header-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.header-back:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

/* WIZARD STEPS - Kreator krok po kroku */
.wizard-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

.wizard-step:hover {
    background: rgba(255,255,255,0.15);
}

.wizard-step.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(46,125,50,0.4);
}

.wizard-step.completed {
    background: rgba(102, 187, 106, 0.2);
    border-color: var(--success);
    color: var(--success);
}

.wizard-step .step-num {
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.wizard-step.active .step-num {
    background: rgba(255,255,255,0.3);
}

.wizard-step.completed .step-num {
    background: var(--success);
    color: white;
}

@media (max-width: 768px) {
    .wizard-steps {
        flex-wrap: wrap;
    }
    .wizard-step span:not(.step-num) {
        display: none;
    }
}

/* ============================================
   GŁÓWNY LAYOUT - Sidebar + Preview
   ============================================ */
.config-body {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: calc(100vh - 200px);
}

@media (max-width: 1200px) {
    .config-body {
        grid-template-columns: 340px 1fr;
    }
}

@media (max-width: 1024px) {
    .config-body {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SIDEBAR - Kreator konfiguracji
   ============================================ */
.sidebar {
    background: white;
    border-right: 1px solid var(--cream-300);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.sidebar-header {
    padding: 20px 24px;
    background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
    border-bottom: 1px solid var(--cream-300);
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--graphite-800);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-header p {
    font-size: 12px;
    color: var(--earth-400);
    margin-top: 4px;
}

.sidebar-content {
    padding: 24px;
}

.sidebar-section {
    margin-bottom: 28px;
    position: relative;
}

.sidebar-section::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cream-300);
    border-radius: 3px;
    transition: background 0.3s;
}

.sidebar-section:hover::before {
    background: var(--primary-light);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.section-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.section-icon i {
    width: 16px;
    height: 16px;
}

.section-title h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--graphite-800);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.section-title p {
    font-size: 11px;
    color: var(--earth-400);
    margin-top: 2px;
}

/* TIP BOX */
.tip-box {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFF3E0 100%);
    border: 1px solid #FFE0B2;
    border-left: 3px solid #FF9800;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 11px;
    color: #E65100;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tip-box i {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Form Controls */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--graphite-700);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--cream-300);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--cream-50);
    transition: all 0.2s;
}

.form-control:hover {
    border-color: var(--cream-300);
    background: white;
}

.form-control:focus {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* WCAG 2.1 AA - focus-visible dla keyboard users (mocniejszy outline) */
.form-control:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* SZABLONY - Eleganckie karty */
.templates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.template-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--cream-50);
    border: 2px solid var(--cream-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.template-card:hover {
    border-color: var(--primary-light);
    background: white;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(46,125,50,0.1);
}

.template-card.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    box-shadow: 0 4px 15px rgba(46,125,50,0.2);
}

.template-card.active .template-icon {
    background: var(--primary);
    color: white;
}

.template-icon {
    width: 44px;
    height: 44px;
    background: var(--cream-200);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--earth-400);
    transition: all 0.2s;
}

.template-icon i {
    width: 22px;
    height: 22px;
}

.template-info h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--graphite-800);
}

.template-info p {
    font-size: 11px;
    color: var(--earth-400);
    margin-top: 3px;
}

/* FRAKCJE - Kolorowe znaczniki */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cream-50);
    border: 2px solid var(--cream-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 600;
}

.checkbox-item:hover {
    background: white;
    border-color: var(--cream-300);
}

.checkbox-item:has(input:checked) {
    background: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(46,125,50,0.15);
}

.checkbox-item input {
    accent-color: var(--primary);
    width: 20px;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
}

/* Ensure minimum touch target 44x44px for accessibility (WCAG 2.1 AA) */
.checkbox-item {
    min-height: 44px;
}

.checkbox-item .color-dot {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* STYL WYDRUKU */
.style-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.style-option {
    padding: 16px 12px;
    border: 2px solid var(--cream-200);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    background: var(--cream-50);
}

.style-option:hover {
    border-color: var(--cream-300);
    background: white;
}

.style-option.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    box-shadow: 0 4px 12px rgba(46,125,50,0.15);
}

.style-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: block;
    margin: 0 auto 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.style-option span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--graphite-700);
}

/* TOGGLE SWITCHES */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--cream-50);
    border: 1px solid var(--cream-200);
    border-radius: 10px;
    transition: all 0.2s;
}

.toggle-item:hover {
    background: white;
    border-color: var(--cream-300);
}

.toggle-item label {
    font-size: 13px;
    font-weight: 600;
    color: var(--graphite-700);
    margin: 0;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cream-300);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* ACTION BUTTONS */
.sidebar-actions {
    padding: 20px 24px;
    background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 100%);
    border-top: 1px solid var(--cream-300);
    position: sticky;
    bottom: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(46,125,50,0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(46,125,50,0.4);
}

.btn-success {
    background: linear-gradient(135deg, #43A047 0%, #66BB6A 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(67,160,71,0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(67,160,71,0.4);
}

.btn-outline {
    background: white;
    border: 2px solid var(--cream-300);
    color: var(--graphite-700);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--cream-50);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-full {
    width: 100%;
}

.btn-group {
    display: flex;
    gap: 10px;
}

.btn-group .btn {
    flex: 1;
}

/* ============================================
   LANGUAGE SELECTOR
   ============================================ */
.language-selector {
    display: flex;
    gap: 4px;
}

.lang-btn {
    min-width: 44px;  /* WCAG 2.1 AA touch target minimum */
    min-height: 44px; /* WCAG 2.1 AA touch target minimum */
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lang-btn:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}

.lang-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(46,125,50,0.4);
}

/* ============================================
   PREVIEW AREA
   ============================================ */
.preview-area {
    padding: 32px;
    background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 100%);
    overflow: auto;
    position: relative;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--graphite-800);
}

.preview-subtitle {
    font-size: 13px;
    color: var(--earth-400);
    margin-top: 2px;
}

.preview-actions {
    display: flex;
    gap: 10px;
}

.preview-frame {
    background: white;
    border-radius: 16px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.1),
        0 0 0 1px var(--cream-300);
    overflow: hidden;
    position: relative;
}

.preview-frame::before {
    content: 'Podgląd wydruku';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--graphite-800);
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    opacity: 0.8;
}

/* === STRONA DO DRUKU === */
.print-page {
    background: white;
    padding: 10mm;
    box-sizing: border-box;
    overflow: hidden; /* Zapobiega wychodzeniu zawartości */
}

.print-page.a4-portrait {
    width: 210mm;
    min-height: 297mm;
}

.print-page.a4-landscape {
    width: 297mm;
    min-height: 210mm;
}

.print-page.a5 {
    width: 210mm;
    min-height: 148mm;
}

.print-page.mini {
    width: 148mm;
    min-height: 105mm;
}

.print-page.lista {
    width: 210mm;
    min-height: auto;
}

/* Nagłówek druku */
.print-header {
    text-align: center;
    padding-bottom: 5mm;
    border-bottom: 2px solid var(--graphite-800, #37474F);
    margin-bottom: 5mm;
}

.print-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary, #37474F);
}

.print-header .subtitle {
    font-size: 13px;
    color: var(--text-secondary, #546E7A);
}

/* Legenda */
.print-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 5mm;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--cream-50, #FDFCFA);
    border-radius: 8px;
    border: 1px solid var(--cream-300, #EBE4D8);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 8px;
    font-weight: 700;
}

/* Grid miesięcy */
.months-grid {
    display: grid;
    gap: 4mm;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.months-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.months-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.months-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.months-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Pojedynczy miesiąc */
.month-box {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    page-break-inside: avoid;
    min-width: 0; /* KLUCZOWE: pozwala na kurczenie w grid */
    max-width: 100%;
    box-sizing: border-box;
}

.month-header {
    background: linear-gradient(135deg, var(--graphite-800, #37474F) 0%, var(--graphite-700, #455A64) 100%);
    color: white;
    text-align: center;
    padding: 6px 8px;
    font-weight: 700;
    font-size: 12px;
}

.month-body {
    padding: 4px;
    background: var(--bg-card, white);
    overflow: hidden; /* Zapobiega wychodzeniu zawartości poza box */
    max-width: 100%;
    box-sizing: border-box;
}

/* Dni tygodnia - DOKŁADNIE 7 kolumn */
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* minmax(0, 1fr) wymusza równe kolumny */
    text-align: center;
    font-weight: 700;
    font-size: 9px;
    padding: 4px 0;
    border-bottom: 1px solid var(--cream-300, #EBE4D8);
    color: var(--text-secondary, #546E7A);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.weekdays span:nth-child(6),
.weekdays span:nth-child(7) {
    color: var(--text-secondary, #546E7A); /* WCAG AA: 5.1:1 contrast on white */
}

/* Grid dni - DOKŁADNIE 7 kolumn */
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* minmax(0, 1fr) wymusza równe kolumny */
    gap: 1px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.day-cell {
    aspect-ratio: 1;
    min-height: 22px;
    min-width: 0; /* KLUCZOWE: pozwala na kurczenie w grid */
    max-width: 100%; /* Nie może wyjść poza kolumnę */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    font-size: 10px;
    border: 1px solid transparent;
    background: var(--bg-card, white);
    position: relative;
    overflow: hidden; /* Zapobiega wychodzeniu zawartości */
    box-sizing: border-box;
}

.day-cell.empty {
    background: transparent;
}

.day-cell.weekend {
    background: var(--cream-50, #FDFCFA);
}

.day-cell.has-pickup {
    border: 2px solid var(--primary, #2E7D32);
    background: var(--cream-100, #F9F7F2);
    border-radius: 4px;
}

.day-num {
    font-weight: 600;
    font-size: 11px;
    color: var(--text-primary, #37474F);
}

.day-cell.weekend .day-num {
    color: var(--text-secondary, #546E7A); /* WCAG AA: 5.1:1 contrast on white */
}

.day-types {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    margin-top: 1px;
    max-width: 100%;
    overflow: hidden;
}

.type-dot {
    min-width: 0; /* Usunięto min-width żeby nie powodować przepełnienia */
    width: auto;
    max-width: 100%;
    height: 14px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    flex-shrink: 1; /* Pozwala na kurczenie */
}

/* Rozmiary czcionek - usunięto min-width z type-dot aby uniknąć przepełnienia */
.font-tiny .day-num { font-size: 8px; }
.font-tiny .type-dot { height: 10px; font-size: 6px; padding: 0 2px; }
.font-tiny .day-cell { min-height: 18px; }
.font-tiny .month-header { font-size: 9px; padding: 3px; }

.font-small .day-num { font-size: 10px; }
.font-small .type-dot { height: 12px; font-size: 7px; }
.font-small .day-cell { min-height: 24px; }

.font-medium .day-num { font-size: 13px; }
.font-medium .type-dot { height: 14px; font-size: 8px; }
.font-medium .day-cell { min-height: 32px; }
.font-medium .month-header { font-size: 14px; padding: 8px; }

.font-large .day-num { font-size: 18px; }
.font-large .type-dot { height: 18px; font-size: 10px; }
.font-large .day-cell { min-height: 48px; padding: 4px; }
.font-large .month-header { font-size: 18px; padding: 12px; }
.font-large .weekdays { font-size: 12px; padding: 6px 0; }

/* SENIOR - bardzo duża czcionka dla osób starszych */
.font-senior .day-num { font-size: 22px; font-weight: 700; }
.font-senior .type-dot { height: 22px; font-size: 12px; border-radius: 4px; }
.font-senior .day-cell { min-height: 60px; padding: 6px; }
.font-senior .day-types { gap: 3px; margin-top: 4px; }
.font-senior .month-header { font-size: 22px; padding: 14px; }
.font-senior .weekdays { font-size: 14px; padding: 8px 0; }
.font-senior .print-legend { font-size: 14px; padding: 12px 20px; gap: 20px; }
.font-senior .legend-color { width: 24px; height: 24px; }
.font-senior .legend-item { gap: 10px; }

/* Stopka */
.print-footer {
    margin-top: 5mm;
    padding-top: 3mm;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 9px;
    color: #64748b;
}

/* Lista terminów */
.dates-list {
    columns: 2;
    column-gap: 20px;
}

.dates-list .date-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    break-inside: avoid;
}

.dates-list .date-day {
    font-weight: 700;
    font-size: 14px;
    min-width: 100px;
}

.dates-list .date-types {
    display: flex;
    gap: 6px;
}

.dates-list .type-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: white;
}

/* Styl czarno-biały */
.style-bw .month-header {
    background: #333;
}

.style-bw .type-dot,
.style-bw .type-badge {
    background: #333 !important;
    border: 1px solid #333;
}

.style-bw .legend-color {
    background: white !important;
    border: 2px solid #333;
}

.style-bw .day-cell.has-pickup {
    background: #f0f0f0;
    border-color: #333;
}

/* Wysoki kontrast */
.style-contrast .day-cell.has-pickup {
    background: #fef3c7;
    border: 3px solid #f59e0b;
}

.style-contrast .type-dot {
    width: 14px;
    height: 14px;
    font-size: 8px;
}

/* ============================================
   MOBILE STYLES - Portal w Portalu
   ============================================ */
@media (max-width: 1024px) {
    .portal-outer {
        margin: 10px;
        border-radius: 20px;
    }

    .portal-inner {
        border-radius: 16px;
    }

    .sidebar {
        max-height: none;
    }

    .config-body {
        grid-template-columns: 1fr;
    }

    .preview-area {
        order: -1;
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    body::before {
        display: none;
    }

    .portal-outer {
        margin: 0;
        border-radius: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .portal-inner {
        border-radius: 0;
    }

    .config-header {
        padding: 20px;
    }

    .header-top {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .header-title h1 {
        font-size: 20px;
    }

    .header-back {
        width: 100%;
        justify-content: center;
    }

    .wizard-steps {
        gap: 6px;
        margin-top: 20px;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .wizard-step {
        padding: 10px 14px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .wizard-step span:not(.step-num) {
        display: none;
    }

    .sidebar-header {
        padding: 16px 20px;
    }

    .sidebar-content {
        padding: 20px;
    }

    .sidebar-section::before {
        left: -20px;
    }

    .section-header {
        flex-wrap: wrap;
    }

    .templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .template-card {
        flex-direction: column;
        text-align: center;
        padding: 12px 8px;
        gap: 8px;
    }

    .template-icon {
        width: 36px;
        height: 36px;
    }

    .template-info p {
        display: none;
    }

    .style-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .style-option {
        padding: 12px 8px;
    }

    .style-icon {
        width: 28px;
        height: 28px;
    }

    .checkbox-group {
        gap: 6px;
    }

    .checkbox-item {
        padding: 10px 12px;
        font-size: 12px;
        min-height: 44px; /* WCAG 2.1 AA touch target */
    }

    .toggle-item {
        padding: 10px 12px;
        min-height: 44px; /* WCAG 2.1 AA touch target */
    }

    .sidebar-actions {
        padding: 16px 20px;
    }

    .btn-group {
        flex-wrap: wrap;
    }

    .preview-area {
        padding: 16px;
    }

    .preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .preview-actions {
        width: 100%;
    }

    .preview-actions .btn {
        width: 100%;
    }

    .preview-frame {
        overflow-x: auto;
        border-radius: 12px;
    }

    .preview-frame::before {
        font-size: 10px;
        padding: 4px 12px;
    }
}

/* ============================================
   DRUKOWANIE - Style
   ============================================ */
@media print {
    /* Reset globalny dla druku */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* BODY - czyste białe tło */
    html, body {
        background: white !important;
        background-color: white !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    body::before,
    body::after {
        display: none !important;
        content: none !important;
    }

    /* ==========================================
       UKRYJ ELEMENTY UI (ale NIE kontenery!)
       ========================================== */
    .skip-link,
    .config-header,
    .sidebar,
    .sidebar-header,
    .sidebar-content,
    .sidebar-actions,
    .preview-header,
    .preview-actions,
    .preview-info,
    .preview-badge,
    .preview-frame::before,
    .zoom-notification,
    .language-selector,
    .wizard-steps,
    .header-top,
    .header-brand,
    .header-title,
    .header-back,
    .btn,
    .btn-group,
    button,
    select,
    input,
    form,
    .form-control,
    .form-group,
    .templates-grid,
    .template-card,
    .checkbox-group,
    .toggle-group,
    .style-options,
    .tip-box,
    .section-header,
    .section-icon,
    .section-title,
    #savedTemplates {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* ==========================================
       KONTENERY - MUSZĄ BYĆ WIDOCZNE!
       Pełna ścieżka: body > .config-panel > .portal-outer > .portal-inner > .config-body > .preview-area > .preview-frame > .print-page
       ========================================== */
    .config-panel,
    .config-panel.no-print,
    div.config-panel,
    div.config-panel.no-print,
    #main-content {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .portal-outer,
    .portal-inner,
    .config-body,
    .preview-area,
    .preview-frame,
    #previewFrame {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        flex: none !important;
        grid: none !important;
    }

    /* ==========================================
       .print-page - GŁÓWNA ZAWARTOŚĆ DO DRUKU
       ========================================== */
    .print-page {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 auto !important;
        padding: 8mm !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        page-break-inside: avoid;
        page-break-after: always;
    }

    /* Wymiary dla różnych formatów */
    .print-page.a4-portrait {
        width: 210mm !important;
        min-height: 287mm !important; /* 297mm - marginesy */
    }

    .print-page.a4-landscape {
        width: 297mm !important;
        min-height: 200mm !important;
    }

    .print-page.a5 {
        width: 210mm !important;
        min-height: 138mm !important;
    }

    .print-page.lista {
        width: 210mm !important;
        min-height: auto !important;
    }

    .print-page:last-child {
        page-break-after: auto;
    }

    /* Zawartość - visibility */
    .print-page * {
        visibility: visible !important;
    }

    /* Nagłówek i stopka */
    .print-header {
        display: block !important;
        visibility: visible !important;
        text-align: center;
        margin-bottom: 5mm;
        page-break-after: avoid;
    }

    .print-footer {
        display: block !important;
        visibility: visible !important;
        margin-top: auto;
        padding-top: 3mm;
        font-size: 8pt;
        page-break-before: avoid;
    }

    /* Legenda - centrowana, w linii */
    .print-legend {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        visibility: visible !important;
        margin-bottom: 4mm !important;
        padding: 8px 15px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    .legend-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        visibility: visible !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .legend-color {
        width: 16px !important;
        height: 16px !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
    }

    /* Lista dat - 2 kolumny */
    .dates-list {
        display: block !important;
        visibility: visible !important;
        columns: 2 !important;
        column-gap: 15px !important;
    }

    .date-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        visibility: visible !important;
        padding: 6px 10px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .date-day {
        font-weight: 600 !important;
        min-width: 60px !important;
        flex-shrink: 0 !important;
    }

    .date-types {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        flex: 1 !important;
    }

    /* Kalendarz - siatka */
    .calendar-grid {
        display: grid !important;
        visibility: visible !important;
        page-break-inside: avoid;
    }

    .month-block {
        display: block !important;
        visibility: visible !important;
        page-break-inside: avoid;
    }

    .month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        visibility: visible !important;
    }

    .day-cell {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
    }

    .day-types {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
    }

    /* Badge'y i kolory */
    .type-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        padding: 2px 6px !important;
        border-radius: 3px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        color: white !important;
        white-space: nowrap !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .type-dot {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        min-width: 14px !important;
        height: 14px !important;
        border-radius: 3px !important;
        font-size: 7px !important;
        font-weight: 700 !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Widok roczny - 4 kolumny */
    .print-page.rok .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3mm !important;
    }

    /* Widok kwartalny - 3 kolumny */
    .print-page.kwartal .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4mm !important;
    }

    /* Widok miesięczny - 1 kolumna */
    .print-page.miesiac .calendar-grid {
        display: block !important;
    }

    /* Senior - duża czcionka */
    .print-page.senior .month-block {
        page-break-inside: avoid;
    }
}

/* Reguły @page */
@page {
    margin: 5mm;
    size: A4 portrait;
}

@page :first {
    margin-top: 8mm;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

.dark {
    /* Background colors */
    --bg-primary: #1A2E1A;
    --bg-card: #2D3F2D;
    --bg-input: #243324;
    --text-primary: #F5F5F0;
    --text-secondary: #E8F5E9;
    --border-color: #3D5A3D;

    /* Primary colors - lighter for dark mode (sync with main.css/admin.css) */
    --primary: #66BB6A;
    --primary-dark: #2E7D32;
    --primary-light: #81C784;
    --primary-glow: rgba(102, 187, 106, 0.25);

    /* Cream colors - dark versions */
    --cream-50: #243324;
    --cream-100: #2D3F2D;
    --cream-200: #3D5A3D;
    --cream-300: #4A6B4A;

    /* Earth colors - lighter for dark bg */
    --earth-400: #A1887F;
    --earth-500: #BCAAA4;

    /* Graphite colors - lighter for dark bg */
    --graphite-600: #90A4AE;
    --graphite-700: #B0BEC5;
    --graphite-800: #CFD8DC;
    --graphite-900: #ECEFF1;

    /* Status colors - adjusted for dark */
    --success: #81C784;
    --warning: #FFD54F;
    --danger: #EF9A9A;
}

/* Dark mode body - gradient uses intentionally darker variants
   for smooth visual transition (not using CSS variables) */
.dark body {
    background: linear-gradient(145deg,
        var(--primary-dark, #0D1F0D) 0%,
        #1A2E1A 50%,
        #243324 100%);
}

/* Hide decorative leaves in dark mode */
.dark body::before {
    opacity: 0.02;
}

/* Portal components */
.dark .portal-inner {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dark .sidebar {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.dark .sidebar-section__header,
.dark .section-title h3 {
    color: var(--text-primary);
}

.dark .section-title p,
.dark .sidebar-section p {
    color: var(--text-secondary);
}

/* Form controls */
.dark .form-control {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark .form-control:focus {
    border-color: var(--primary-light);
}

/* Template cards */
.dark .template-card {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.dark .template-card:hover {
    border-color: var(--primary-light);
}

.dark .template-card.selected {
    background: rgba(46, 125, 50, 0.2);
    border-color: var(--primary);
}

.dark .template-info h4 {
    color: var(--text-primary);
}

.dark .template-info p {
    color: var(--text-secondary);
}

/* Style options */
.dark .style-option {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.dark .style-option:hover {
    border-color: var(--primary-light);
}

.dark .style-option.selected {
    background: rgba(46, 125, 50, 0.2);
    border-color: var(--primary);
}

/* Checkboxes and toggles */
.dark .checkbox-item,
.dark .toggle-item {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.dark .checkbox-label,
.dark .toggle-label {
    color: var(--text-primary);
}

/* Buttons */
.dark .btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark .btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--primary-light);
}

/* Header back button */
.dark .header-back {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.dark .header-back:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Tip box - CRITICAL v30: dodano color dla dark mode */
.dark .tip-box {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.3);
    border-left-color: #FF9800;
    color: #FFB74D; /* Jasny pomarańczowy dla dark mode - WCAG AA */
}

/* Template card active state - CRITICAL v30: dark mode gradient */
.dark .template-card.active {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.25) 0%, rgba(56, 142, 60, 0.2) 100%);
    border-color: var(--primary);
}

/* Style option active state - CRITICAL v30: dark mode gradient */
.dark .style-option.active {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.25) 0%, rgba(56, 142, 60, 0.2) 100%);
    border-color: var(--primary);
}

/* Preview area */
.dark .preview-area {
    background: var(--bg-card);
}

/* Zoom notification */
.dark .zoom-notification {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Language selector */
.dark .lang-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.dark .lang-btn:hover,
.dark .lang-btn.active {
    background: var(--primary);
}