/*
 * Multiplication Table Worksheets – V1.0 (Premium 2026)
 * Aligned with worksheet-base.css design system
 * Uses sheet-common.css for .sheet sizing and .sheet-header
 */

/* =========================================
   1. REFERENCE TABLE / FILL-IN-BLANK TABLE
   ========================================= */
.mt-ref-table-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 2mm 0;
    overflow: hidden;
}

.mt-ref-table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

.mt-ref-table th,
.mt-ref-table td {
    border: 1px solid #aaa;
    text-align: center;
    vertical-align: middle;
    padding: 4px 2px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: normal;
}

/* Corner cell (×) */
.mt-ref-table .mt-corner {
    background: #475569;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* Column headers */
.mt-ref-table .mt-col-header {
    background: #bdd4f0;
    color: #1e3a5f;
    font-weight: 700;
    font-size: 15px;
}

/* Row headers */
.mt-ref-table .mt-row-header {
    background: #bdd4f0;
    color: #1e3a5f;
    font-weight: 700;
    font-size: 15px;
}

/* Data cells — always white (printed paper, never theme-aware) */
.mt-cell {
    background: #fff;
    color: #1f2937;
}

/* Alternating row stripe for readability */
.mt-ref-table tbody tr:nth-child(even) .mt-cell {
    background: #e8ecf1;
}

/* Blank cells for fill-in-blank mode */
.mt-blank {
    background: #fefce8 !important;
    border: 1.5px dashed #d97706 !important;
}

/* Revealed answers in fill-in-blank */
.mt-revealed {
    color: #16a34a;
    font-weight: 700;
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
}

/* Answer key highlighted cells */
.mt-highlighted {
    background: #dbeafe !important;
    font-weight: 700;
    color: #1d4ed8;
}


/* =========================================
   2. PRACTICE DRILL GRID
   ========================================= */
.mt-practice-grid {
    flex: 1 1 auto;
    display: grid;
    gap: 0 4mm;
    padding: 4mm 6mm;
    align-content: space-between;
}

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

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

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

.mt-problem {
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 2mm 2mm;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 1px dotted #e5e7eb;
}

.mt-problem-num {
    color: #9ca3af;
    font-size: 11px;
    min-width: 20px;
    text-align: right;
    margin-right: 3px;
}

.mt-factor {
    font-weight: 700;
    color: #1f2937;
    min-width: 18px;
    text-align: right;
}

.mt-operator {
    color: #6b7280;
    margin: 0 1px;
}

.mt-equals {
    color: #6b7280;
    margin: 0 2px;
}

.mt-answer {
    flex: 1;
    border-bottom: 1.5px solid #d1d5db;
    min-width: 28px;
    text-align: center;
    color: transparent;
}

.mt-answer.mt-filled {
    color: #16a34a;
    font-weight: 700;
    border-bottom-color: #16a34a;
}

/* Density adjustments for high problem counts */
.mt-practice-grid:has(.mt-problem:nth-child(49)) .mt-problem {
    font-size: 13px;
    padding: 1.5mm 1.5mm;
    line-height: 1.4;
}


/* =========================================
   3. HINT TEXT
   ========================================= */
.hint-text {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--c-text-muted, #9ca3af);
    line-height: 1.4;
}


/* =========================================
   4. CONTROL PANEL: CHECKBOX + INSTRUCTION
   ========================================= */
.control-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 8px;
    margin-top: 6px;
}

.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, #6366f1);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.instruction-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: center;
    padding: 6px 16px;
    border-bottom: 1px dashed #ccc;
    font-style: italic;
}


/* =========================================
   5. TOGGLE GRID VARIANTS (3 & 4 columns)
   ========================================= */
.toggle-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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


/* =========================================
   6. PRINT OVERRIDES
   ========================================= */
@media print {

    .mt-ref-table,
    .mt-ref-table th,
    .mt-ref-table td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mt-corner,
    .mt-col-header,
    .mt-row-header,
    .mt-blank,
    .mt-revealed,
    .mt-highlighted {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mt-ref-table tbody tr:nth-child(even) .mt-cell {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mt-answer.mt-filled {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Force correct colors in print (cells hardcoded, no theme vars) */
    .mt-cell {
        background: #fff !important;
        color: #1f2937 !important;
    }

    .mt-ref-table tbody tr:nth-child(even) .mt-cell {
        background: #e8ecf1 !important;
    }

    .mt-corner {
        background: #475569 !important;
    }

    .mt-col-header,
    .mt-row-header {
        background: #bdd4f0 !important;
        color: #1e3a5f !important;
    }

    .mt-problem {
        break-inside: avoid;
    }

    .instruction-text {
        color: #555 !important;
        border-bottom-color: #ccc !important;
    }
}