/* Global Styles */
:root {
    --primary-color: #6c5ce7;
    --secondary-color: #00cec9;
    --accent-color: #fdcb6e;
    --text-color: #2d3436;
    --bg-color: #f5f6fa;
    --sidebar-width: 300px;
}

body {
    background-color: var(--bg-color);
    font-family: 'Comic Neue', cursive;
    /* Fallback if font fails to load */
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* Reusable KidzLearning logo */
.kl-logo {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    /* Default size – override via inline style or parent font-size */
    font-size: 2rem;
}

.kl-logo i {
    margin-right: 0.4em; /* Scales with font size */
    color: #dc3545; /* Brand red for rocket */
}

/* Automatic Letter Coloring (8-color cycle) */
.kl-logo span:nth-child(8n+1) { color: #dc3545; } /* Red */
.kl-logo span:nth-child(8n+2) { color: #0d6efd; } /* Blue */
.kl-logo span:nth-child(8n+3) { color: #198754; } /* Green */
.kl-logo span:nth-child(8n+4) { color: #fd7e14; } /* Orange */
.kl-logo span:nth-child(8n+5) { color: #6f42c1; } /* Purple */
.kl-logo span:nth-child(8n+6) { color: #d63384; } /* Pink */
.kl-logo span:nth-child(8n+7) { color: #0dcaf0; } /* Cyan */
.kl-logo span:nth-child(8n+8) { color: #ffc107; } /* Yellow */

@media print {
    .kl-logo,
    .kl-logo i,
    .kl-logo .letters span {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* App Layout */
.app-container {
    display: flex;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
    /* Spacer for fixed header */
    width: 100%;
}

/* Sidebar Controls */
.sidebar {
    width: var(--sidebar-width);
    background: white;
    padding: 20px;
    border-right: 1px solid #dfe6e9;
    border-right: 1px solid #dfe6e9;
    position: fixed;
    top: 60px;
    /* Below Navbar */
    height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 10;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

.section-card {
    background: transparent;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.section-title {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Range Slider - Use Bootstrap defaults */

/* Standardize Sidebar Buttons */
.sidebar .btn {
    margin-bottom: 8px;
}

.sidebar .btn-primary,
.sidebar .btn-warning,
.sidebar .btn-success {
    color: white;
    font-weight: 600;
}

.sidebar .btn-outline-primary,
.sidebar .btn-outline-success,
.sidebar .btn-outline-secondary {
    border-width: 2px;
    font-weight: 600;
}

/* Breadcrumb Container - Positioned next to sidebar */
.breadcrumb-container {
    position: fixed;
    top: 60px;
    left: var(--sidebar-width);
    padding: 0 20px;
    background-color: white;
    z-index: 5;
    border-bottom: 1px solid #dfe6e9;
    height: 60px;
    display: flex;
    align-items: center;
    width: calc(100% - var(--sidebar-width));
    box-sizing: border-box;
}

/* Preview Area */
.preview-area {
    margin-left: var(--sidebar-width);
    flex-grow: 1;
    padding: 30px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #dfe6e9;
    /* Darker bg to pop the paper */
}

/* ============================================
   STANDARD A4 LAYOUT - One layout for all activities
   Each .a4-sheet = exactly one A4 page (210×297mm).
   Sections: .sheet-header | .sheet-title | .sheet-content | .sheet-footer
   Multiple .a4-sheet = multiple pages (scroll on screen, page break in print).
   ============================================ */

/* Wrapper for all sheets (stack of pages) */
.activity-sheets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

/* One A4 page - fixed dimensions, never grow */
.a4-sheet {
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    max-height: 297mm;
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 10mm 15mm;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Standard sections - same order on every sheet */
.a4-sheet .sheet-header {
    flex-shrink: 0;
}

.a4-sheet .sheet-title {
    flex-shrink: 0;
}

.a4-sheet .sheet-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.a4-sheet .sheet-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Enhanced Header on Sheet (standard section) */
.sheet-header.activity-header {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    border-top: 3px solid #6c5ce7;
}

.activity-header-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Standard logo (rainbow letters + red rocket) – don’t override .kl-logo colors */
.activity-header-brand .kl-logo {
    color: inherit;
}
.activity-header-brand .kl-logo i {
    color: #dc3545;
    font-size: 1.2rem;
}

.activity-header-title {
    font-family: var(--font-fun);
}

.activity-header-fields {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-header-fields > div {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: #2d3436;
    font-size: 0.95rem;
}

.name-trace {
    font-family: 'Codystar', cursive;
    color: #6c5ce7;
    font-size: 1.5rem;
    min-width: 150px;
    display: inline-block;
    border-bottom: 2px dashed #a29bfe;
    padding-bottom: 2px;
    font-weight: 700;
}

.date-trace {
    color: #00cec9;
    border-bottom-color: #00cec9;
}

/* Activity Page Title Section (standard section) */
.sheet-title.activity-title-section {
    text-align: center;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    border-left: 4px solid #6c5ce7;
}

/* Theme-based gradient backgrounds for activity title sections */
.activity-title-section.theme-math {
    background: linear-gradient(45deg, #fdcb6e, #ffeaa7);
}

.activity-title-section.theme-math h1 {
    color: #2d3436;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.activity-title-section.theme-math p {
    color: #2d3436;
}

.activity-title-section.theme-lang {
    background: linear-gradient(45deg, #00cec9, #55efc4);
}

.activity-title-section.theme-lang h1 {
    color: #2d3436;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.activity-title-section.theme-lang p {
    color: #2d3436;
}

.activity-title-section.theme-arts {
    background: linear-gradient(45deg, #e17055, #fdcb6e);
}

.activity-title-section.theme-arts h1 {
    color: #2d3436;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.activity-title-section.theme-arts p {
    color: #2d3436;
}

.activity-title-section.theme-science {
    background: linear-gradient(45deg, #0984e3, #74b9ff);
}

.activity-title-section.theme-science h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.activity-title-section.theme-science p {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.activity-title-section.theme-game {
    background: linear-gradient(45deg, #6c5ce7, #a29bfe);
}

.activity-title-section.theme-game h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.activity-title-section.theme-game p {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.activity-icon-label {
    font-family: var(--font-fun, 'Comic Neue', cursive);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.activity-title-section h1 {
    font-family: var(--font-fun);
    font-size: 2.2rem;
    margin: 0 0 10px 0;
}

.activity-title-section p {
    font-size: 1rem;
    margin: 0;
    font-style: italic;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    margin: 0;
    padding: 0;
    background: transparent;
    border-left: 4px solid #6c5ce7;
    padding-left: 12px;
    width: fit-content;
    line-height: 1.5;
    display: inline-block;
}

.breadcrumb-nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.breadcrumb-nav li:not(:last-child)::after {
    content: '›';
    margin-left: 8px;
    color: #b2bec3;
    font-weight: bold;
}

.breadcrumb-nav a {
    color: #6c5ce7;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover {
    color: #a29bfe;
    text-decoration: underline;
}

.breadcrumb-nav .active {
    color: #636e72;
    font-weight: 600;
}

/* Decorative Footer */
.sheet-footer {
    margin-top: 12px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    border-bottom: 3px solid #00cec9;
}

.sheet-footer-content {
    position: relative;
    z-index: 1;
    color: #636e72;
    font-size: 0.85rem;
    font-style: italic;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 30px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sheet-footer-content i {
    color: #6c5ce7;
    margin: 0 5px;
}

/* Category-specific color themes */
.theme-math .activity-header {
    border-top-color: #fdcb6e;
}

.theme-math .activity-title-section {
    border-left-color: #fdcb6e;
}

.theme-lang .activity-header {
    border-top-color: #00cec9;
}

.theme-lang .activity-title-section {
    border-left-color: #00cec9;
}

.theme-arts .activity-header {
    border-top-color: #e17055;
}

.theme-arts .activity-title-section {
    border-left-color: #e17055;
}

.theme-science .activity-header {
    border-top-color: #0984e3;
}

.theme-science .activity-title-section {
    border-left-color: #0984e3;
}

.theme-game .activity-header {
    border-top-color: #6c5ce7;
}

.theme-game .activity-title-section {
    border-left-color: #6c5ce7;
}

/* Page hero (consistent across Shop, My Downloads, About, Privacy, Terms, Dashboard, Subscription) */
.page-hero {
    padding: 50px 1rem 70px;
    color: white;
    text-align: center;
    border-radius: 0 0 40% 40% / 40px;
    margin-bottom: 0;
}
.page-hero h1 {
    font-family: var(--font-fun);
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.page-hero .page-hero-sub {
    opacity: 0.95;
    margin-bottom: 0;
    font-size: 1.05rem;
}
.page-hero--shop {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}
.page-hero--downloads {
    background: linear-gradient(135deg, #00b894 0%, #55efc4 100%);
}
.page-hero--about {
    background: linear-gradient(135deg, #e17055 0%, #fdcb6e 100%);
}
.page-hero--legal {
    background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
}
.page-hero--dashboard {
    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
}
.page-hero--subscription {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}
.page-hero--admin {
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
}
@media (max-width: 576px) {
    .page-hero h1 { font-size: 1.75rem; }
    .page-hero { padding: 40px 1rem 55px; }
}

/* Print Hide Utility */
.print-hide {
    /* Elements with this class will be hidden in print */
}

/* Print Handling - Single consistent block for all pages */
@media print {
    /* No animations in print (only exception: static appearance) */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .print-hide {
        display: none !important;
    }
    @page {
        size: A4;
        margin: 5mm 0 0 0; /* Small top margin on all pages */
    }

    /* Force color printing only where needed (reuse one rule) */
    .a4-sheet,
    .activity-title-section,
    .activity-header,
    .sheet-footer,
    .sheet-footer-content,
    .kl-logo,
    .kl-logo i,
    .kl-logo .letters span {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    /* Remove any spacer divs */
    body > div[style*="height"] {
        display: none !important;
    }

    .navbar,
    .navbar-nav,
    .navbar-brand,
    .profile-dropdown {
        display: none !important;
    }

    .sidebar {
        display: none !important;
    }

    /* Ensure printable area is in normal flow and visible (fixes blank pages / only-header) */
    .app-container {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .preview-area {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: white !important;
    }

    .activity-sheets {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Each .a4-sheet = one printed page (standard layout) */
    .a4-sheet {
        box-shadow: none;
        margin: 0 !important;
        padding: 5mm 10mm !important;
        width: 100% !important;
        height: 297mm !important;
        min-height: 297mm !important;
        max-height: 297mm !important;
        page-break-after: always;
        border: none;
        background: white;
        background-image: none;
        position: relative;
        overflow: hidden;
        display: flex !important;
        flex-direction: column !important;
    }

    .a4-sheet:last-child {
        page-break-after: avoid !important;
    }

    /* Keep sheet content in flow so it prints (no fixed footer = no blank content) */
    .a4-sheet .sheet-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        visibility: visible !important;
    }
    
    /* Prevent unwanted page breaks inside sections */
    .a4-sheet .sheet-header,
    .a4-sheet .sheet-title,
    .a4-sheet .sheet-footer {
        page-break-inside: avoid;
    }
    
    .a4-sheet .sheet-content > * {
        page-break-inside: avoid;
    }
    
    /* Allow page breaks only between major sections if needed */
    .sheet-header,
    .activity-title-section {
        page-break-after: avoid;
    }

    /* Hide decorative elements in print */
    .a4-sheet::before,
    .a4-sheet::after {
        display: none;
    }

    .breadcrumb-container,
    .breadcrumb-nav {
        display: none !important;
    }

    /* Hide toast notifications in print */
    #toast-container,
    .kidz-toast {
        display: none !important;
    }

    .activity-header {
        background: white;
        border: 1px solid #ddd;
        border-radius: 0;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        padding: 8px 12px !important;
    }

    .activity-header-brand {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 8px;
        font-weight: 700;
        font-size: 0.9rem !important;
    }

    /* Logo in print: no animation (disabled above), keep FA icon + rainbow letters */
    .activity-header-brand .kl-logo,
    .activity-header-brand .kl-logo i,
    .activity-header-brand .kl-logo .letters span {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .activity-header-brand .kl-logo i {
        font-size: 1rem !important;
        color: #dc3545 !important;
    }

    .activity-header-fields {
        display: flex;
        justify-content: space-between;
    }

    .activity-title-section {
        /* Keep gradients in print for colorful output */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
        border: 1px solid #ddd;
        border-radius: 0;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
    }
    
    /* Prevent page breaks inside content blocks */
    .number-row,
    .flag-row,
    .activity-item,
    .activity-grid,
    .sheet-footer,
    .sheet-header,
    .activity-title-section {
        page-break-inside: avoid;
    }
    
    /* Reduce spacing in print for number-row */
    .number-row {
        margin-bottom: 8px !important;
        padding: 10px !important;
    }
    
    /* Prevent breaking between header and title */
    .activity-header + .activity-title-section {
        page-break-before: avoid;
    }
    
    /* Allow page breaks between rows if needed, but avoid breaking inside */
    .number-row + .number-row,
    .flag-row + .flag-row {
        page-break-before: auto;
    }
    
    /* Ensure proper text contrast in print */
    .activity-title-section.theme-math h1,
    .activity-title-section.theme-lang h1,
    .activity-title-section.theme-arts h1 {
        color: #2d3436 !important;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
    }
    
    .activity-title-section.theme-science h1,
    .activity-title-section.theme-game h1 {
        color: white !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    .activity-title-section.theme-math p,
    .activity-title-section.theme-lang p,
    .activity-title-section.theme-arts p {
        color: #2d3436 !important;
    }
    
    .activity-title-section.theme-science p,
    .activity-title-section.theme-game p {
        color: white !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    /* Footer stays in flow at bottom of each sheet (fixes blank pages; one footer per printed page) */
    .sheet-footer {
        flex-shrink: 0 !important;
        margin-top: auto !important;
        position: static !important;
        width: auto !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        text-align: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .sheet-footer-content {
        color: #b2bec3 !important;
        font-size: 8pt !important;
        font-style: italic !important;
        font-family: sans-serif !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    .sheet-footer-content i {
        color: #b2bec3 !important;
        margin: 0 3px !important;
        font-size: 8pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* Premium print code styling - horizontal on bottom right */
    .print-footer-code {
        position: static !important;
        font-size: 7pt !important;
        color: #95a5a6 !important;
        text-align: right !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: normal !important;
        font-style: normal !important;
        font-family: monospace !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Premium print code styling (screen view) */
.print-footer-code {
    font-size: 9px;
    color: #999;
    text-align: right;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    font-family: monospace;
    writing-mode: horizontal-tb;
}