/*
 * Flashcard Maker – V1.0 (Premium 2026)
 * Aligned with worksheet-base.css design system
 * Uses sheet-common.css for .sheet sizing and .empty-state
 */

/* =========================================
   1. GRID LAYOUT
   ========================================= */
.fc-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
}

/* =========================================
   2. CARD ELEMENT
   ========================================= */
.fc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4mm;
    box-sizing: border-box;
    position: relative;
    page-break-inside: avoid;
    overflow: hidden;
    text-align: center;
}

/* Border styles */
.fc-border--solid {
    border: 1.5px solid #374151;
}

.fc-border--dashed {
    border: 1.5px dashed #9ca3af;
}

.fc-border--none {
    border: 1.5px solid transparent;
}

.fc-card--empty {
    border-color: transparent !important;
}

/* =========================================
   3. CARD CONTENT
   ========================================= */
.fc-card__number {
    position: absolute;
    top: 2mm;
    left: 2.5mm;
    font-family: 'Nunito', -apple-system, sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #9ca3af;
    line-height: 1;
}

.fc-card__term {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    word-break: break-word;
    max-width: 100%;
}

.fc-card__def {
    font-size: 14px;
    font-weight: 400;
    color: #4b5563;
    line-height: 1.35;
    margin-top: 2mm;
    word-break: break-word;
    max-width: 100%;
}

/* Separator line between term and definition */
.fc-card__term+.fc-card__def {
    padding-top: 2mm;
    border-top: 1px solid #e5e7eb;
}

/* =========================================
   4. FONT SIZE SCALING BY DENSITY
   ========================================= */
/* 8 cards: slightly smaller */
.fc-grid[style*="repeat(2, 1fr)"][style*="repeat(4, 1fr)"] .fc-card__term {
    font-size: 20px;
}

/* 9 cards */
.fc-grid[style*="repeat(3, 1fr)"][style*="repeat(3, 1fr)"] .fc-card__term {
    font-size: 19px;
}

.fc-grid[style*="repeat(3, 1fr)"][style*="repeat(3, 1fr)"] .fc-card__def {
    font-size: 12px;
}

/* 12 cards: compact */
.fc-grid[style*="repeat(3, 1fr)"][style*="repeat(4, 1fr)"] .fc-card__term {
    font-size: 17px;
}

.fc-grid[style*="repeat(3, 1fr)"][style*="repeat(4, 1fr)"] .fc-card__def {
    font-size: 11px;
}

/* =========================================
   5. TWO-SIDED MODE — LABELS
   ========================================= */
.fc-page-label {
    font-family: 'Nunito', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 2mm;
    flex-shrink: 0;
}

/* Back side cards: center definition */
.fc-card--back {
    background: #fafafa;
}

.fc-card--back .fc-card__def {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* =========================================
   6. CARD COLOR SUPPORT
   ========================================= */
.fc-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}

.fc-custom-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.fc-color-picker {
    width: 32px;
    height: 26px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    background: none;
}

.fc-color-picker::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.fc-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* Ensure colored cards print correctly */
.fc-card[style*="background-color"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* =========================================
   7. PRINT OVERRIDES
   ========================================= */
@media print {
    .fc-grid {
        color: #000 !important;
    }

    .fc-card {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .fc-border--solid {
        border-color: #000 !important;
    }

    .fc-border--dashed {
        border-color: #888 !important;
    }

    .fc-card__term {
        color: #000 !important;
    }

    .fc-card__def {
        color: #333 !important;
    }

    .fc-card__number {
        color: #999 !important;
    }

    .fc-page-label {
        color: #aaa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .fc-card--back {
        background: #f8f8f8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .fc-card__term+.fc-card__def {
        border-top-color: #ccc !important;
    }
}