/*
 * 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
 */

/* =========================================
   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;
}

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

    /* ── 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;
    }
}