/*
 * Sheet Common Styles – V2.0 (Premium 2026)
 * Shared header, fields, and utility classes for all worksheet tools.
 *
 * DEPENDENCIES:
 *   - worksheet-base.css (provides .sheet sizing, print base, theme vars)
 *
 * Used by: graph-paper, clock-worksheets, multiplication-table,
 *          number-tracing, name-tracing, pictorial-math,
 *          fraction-worksheet
 */

/* =========================================
   1. SHEET HEADER
   ========================================= */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    margin-bottom: 12px;
    padding-bottom: 8px;
    flex-shrink: 0;
}

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

.header-brand img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.header-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.header-fields {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 20px;
    align-items: center;
}

/* Name field spans full width for the long line */
.field:first-child {
    grid-column: 1 / -1;
    justify-self: end;
}

/* Date and Score sit side-by-side below Name */

.field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Nunito', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000 !important;
    flex-shrink: 0;
}

.field-label {
    font-size: 14px;
    font-family: 'Nunito', -apple-system, sans-serif;
    color: #000 !important;
    font-weight: 500;
}

.field-line {
    width: 100px;
    min-width: 100px;
    height: 1em;
    border-bottom: 1px solid #000 !important;
    display: inline-block;
    flex-shrink: 0;
}

.field-line.long {
    width: 300px;
    min-width: 300px;
}

/* =========================================
   2. EMPTY STATE (shared)
   ========================================= */
.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-family: var(--font-ui, 'Nunito', sans-serif);
    font-size: 16px;
    color: var(--c-text-muted, #9ca3af);
    text-align: center;
    padding: 40px;
}

/* =========================================
   2b. INSTRUCTION TEXT (shared, printed)
   ========================================= */
.instruction-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: center;
    padding: 6px 16px;
    border-bottom: 1px dashed #ccc;
    font-style: italic;
}

/* =========================================
   2c. PANEL CONTROLS (shared, screen only)
   ========================================= */
.hint-text {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--c-text-muted, #9ca3af);
    line-height: 1.4;
}

.control-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 8px;
    margin-top: 6px;
}

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

.control-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-main, #555);
    cursor: pointer;
}

.control-checkbox input[type="checkbox"] {
    accent-color: var(--c-primary, #2b8ad0);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.toggle-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.toggle-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* =========================================
   3. PRINT OVERRIDES (shared across all tools)
   ========================================= */
@media print {

    .instruction-text {
        color: #333 !important;
        border-bottom-color: #999 !important;
    }

    /* ── Sheet Sizing ──────────────────────────
     * Override base padding to match JS sheetPadding (10mm).
     * worksheet-base.css uses var(--paper-padding) which is 10mm,
     * but some tools need explicit min/max-height to prevent
     * IACVT from CSS variable resolution edge cases.
     */
    .sheet.letter {
        padding: 10mm !important;
        overflow: visible !important;
        min-height: 278mm !important;
        max-height: 278mm !important;
    }

    .sheet.a4 {
        padding: 10mm !important;
        overflow: visible !important;
        min-height: 296mm !important;
        max-height: 296mm !important;
    }

    .sheet.legal {
        padding: 10mm !important;
        overflow: visible !important;
        min-height: 353mm !important;
        max-height: 353mm !important;
    }

    /* ── Sheet Header ──────────────────────────
     * Pin header to exactly 16mm total layout contribution.
     * height: 12mm (content + padding + border)
     * margin-bottom: 4mm
     * = 16mm total (matching JS HEADER_HEIGHT_MM)
     */
    .sheet-header {
        height: 12mm !important;
        max-height: 12mm !important;
        overflow: hidden !important;
        margin-bottom: 4mm !important;
        flex-shrink: 0 !important;
        border-bottom-color: #000 !important;
    }

    /* ── Color Fidelity ────────────────────────
     * Ensure header elements print with exact colors
     */
    .header-brand img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* =========================================
   4. RESPONSIVE (mobile field sizing)
   ========================================= */
@media (max-width: 600px) {
    .sheet-header {
        padding-bottom: 1%;
        margin-bottom: 2%;
    }

    .header-brand img {
        height: clamp(16px, 4vw, 32px);
    }

    .header-subtitle {
        font-size: clamp(10px, 2.5vw, 14px);
    }

    .header-fields {
        gap: 2px 8px;
    }

    .field {
        font-size: clamp(8px, 2vw, 11px);
    }

    .field-line {
        width: clamp(30px, 15vw, 80px);
        min-width: auto;
    }

    .field-line.long {
        width: clamp(60px, 30vw, 150px);
        min-width: auto;
    }
}