/*
 * ace_sentence_table.css
 *
 * ACE Grammar Engine
 * Flashcard display for ace_sentence_table.php
 *
 * Display policy:
 *   - Colored Arabic conjugation/token = large, centered focal item
 *   - English / Urdu / IPA / Latin / diagnostics = regular supporting text
 *   - meaning51 = English meaning
 *   - latin51   = Latin/transliteration
 *   - Forms use plain numbers: Form 1 ... Form 10
 */


/* =========================================================
   1. PAGE BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #f4f6f8;
    color: #1f2937;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.5;
}


/* =========================================================
   2. MAIN PAGE CONTAINER
   ========================================================= */

.ace-page,
.ace-container,
.sentence-table-container {
    width: min(1500px, calc(100% - 32px));
    margin: 24px auto 60px;
}

.ace-page {
    max-width: 1180px;
    padding: 20px;
}


/* =========================================================
   3. PAGE TITLE
   ========================================================= */

.ace-page-title,
.page-title {
    margin: 0 0 8px;
    text-align: center;
    color: #17324d;
    font-size: 2rem;
    font-weight: 700;
}

.ace-page-subtitle,
.page-subtitle {
    margin: 0 0 26px;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
}


/* =========================================================
   4. SELECTION / RECORD / ROOT SUMMARY
   ========================================================= */

.ace-selection-summary {
    margin: 18px 0 24px;
    padding: 12px 16px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #fafafa;
    line-height: 1.9;
}

.ace-record-summary,
.record-summary,
.root-summary {
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    text-align: center;
}

/*
 * Supporting Arabic, such as the root or other informational Arabic,
 * stays at a normal supporting size.
 */
.ace-record-summary .arabic,
.root-summary .arabic {
    direction: rtl;
    unicode-bidi: isolate;
    font-family:
        "Amiri",
        "Noto Naskh Arabic",
        "Traditional Arabic",
        "Scheherazade New",
        serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #152d44;
}

.ace-record-summary .latin,
.root-summary .latin {
    margin-top: 4px;
    font-size: 1rem;
    color: #52687d;
}

.ace-record-summary .meaning,
.root-summary .meaning {
    margin-top: 4px;
    font-size: 1rem;
    color: #374151;
}


/* =========================================================
   5. FORM SECTION
   ========================================================= */

.ace-form-section,
.form-section {
    margin: 0 0 38px;
    padding: 0;
}

.ace-form-heading,
.form-heading,
.form-title {
    margin: 0 0 16px;
    padding: 11px 18px;
    background: #17324d;
    color: #ffffff;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}


/* =========================================================
   6. TENSE SECTION
   ========================================================= */

.ace-tense-section,
.tense-section {
    margin: 0 0 24px;
}

.ace-tense-heading,
.tense-heading,
.tense-title {
    margin: 0 0 12px;
    padding: 9px 14px;
    background: #e9eef3;
    border-left: 5px solid #446987;
    border-radius: 7px;
    color: #263e52;
    font-size: 1.02rem;
    font-weight: 700;
}


/* =========================================================
   7. FLASHCARD GRID
   ========================================================= */

.ace-flashcard-grid,
.flashcard-grid,
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    align-items: stretch;
}


/* =========================================================
   8. GRID FLASHCARD
   ========================================================= */

.ace-flashcard,
.flashcard,
.sentence-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7dee6;
    border-radius: 13px;
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.05),
        0 6px 18px rgba(15, 23, 42, 0.035);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.ace-flashcard:hover,
.flashcard:hover,
.sentence-card:hover {
    transform: translateY(-2px);
    border-color: #9eb2c4;
    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.08),
        0 10px 24px rgba(15, 23, 42, 0.05);
}


/* =========================================================
   9. FOCUSED FLASHCARD
   ========================================================= */

.ace-focused-display {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 24px 0 40px;
}

.ace-card {
    width: min(900px, 100%);
    min-height: 380px;
    padding: 26px 30px;
    border: 2px solid #d9d9d9;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    text-align: center;
}

.ace-card-title {
    margin-bottom: 24px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #263746;
}


/* =========================================================
   10. CARD HEADER / ADDRESS
   ========================================================= */

.ace-card-header,
.flashcard-header,
.card-header {
    padding: 9px 12px;
    background: #f0f4f7;
    border-bottom: 1px solid #dce3e9;
    color: #4b6072;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.ace-card-address,
.card-address,
.ace-address {
    font-family: Consolas, "Courier New", monospace;
    color: #607487;
}

.ace-card-address {
    margin-bottom: 8px;
    font-size: 0.82rem;
}

.ace-address {
    font-weight: 700;
}


/* =========================================================
   11. CARD BODY
   ========================================================= */

.ace-card-body,
.flashcard-body,
.card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 20px 17px 18px;
    text-align: center;
}


/* =========================================================
   12. MAIN ARABIC DISPLAY CONTAINER
   ========================================================= */

/*
 * This is the container only.
 * The actual colored token receives the large font below.
 */
.ace-arabic,
.flashcard-arabic,
.card-arabic,
.arabic-value {
    direction: rtl;
    unicode-bidi: isolate;
    width: 100%;
    margin: 14px 0 18px;
    text-align: center;
    font-family:
        "Amiri",
        "Noto Naskh Arabic",
        "Traditional Arabic",
        "Scheherazade New",
        serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #132f46;
}


/* =========================================================
   13. COLORED ARABIC TOKEN — PRIMARY FOCAL DISPLAY
   ========================================================= */

/*
 * Expected HTML:
 *
 * <span class="ace-colored-token">
 *     <span class="result-prefix">...</span>
 *     <span class="result-stem">...</span>
 *     <span class="result-suffix">...</span>
 * </span>
 *
 * The token remains one continuous Arabic word while each
 * morphological segment keeps its own color.
 */
.ace-colored-token {
    display: inline-block;
    direction: rtl;
    unicode-bidi: isolate;
    white-space: nowrap;
    margin: 2px auto;
    text-align: center;

    font-family:
        "Amiri",
        "Noto Naskh Arabic",
        "Traditional Arabic",
        "Scheherazade New",
        serif;

    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1.7;
}

.ace-colored-token .result-prefix {
    color: #1f6feb;
}

.ace-colored-token .result-stem {
    color: #111111;
}

.ace-colored-token .result-suffix {
    color: #b42318;
}


/* =========================================================
   14. PLAIN / SUPPORTING ARABIC
   ========================================================= */

/*
 * Use these classes for Arabic that is informational rather than
 * the focal colored conjugation.
 */
.ace-plain-arabic,
.ace-supporting-arabic,
.ace-root-arabic {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-block;
    font-family:
        "Amiri",
        "Noto Naskh Arabic",
        "Traditional Arabic",
        "Scheherazade New",
        serif;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   15. LATIN / IPA
   ========================================================= */

.ace-latin,
.flashcard-latin,
.card-latin,
.latin51,
.ace-ipa {
    margin: 4px 0 8px;
    color: #53697c;
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}


/* =========================================================
   16. ENGLISH / MEANING51
   ========================================================= */

.ace-meaning,
.flashcard-meaning,
.card-meaning,
.meaning51 {
    margin: 8px auto 0;
    max-width: 95%;
    color: #263746;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}


/* =========================================================
   17. URDU
   ========================================================= */

.ace-urdu {
    direction: rtl;
    unicode-bidi: isolate;
    margin: 8px auto 0;
    max-width: 95%;
    color: #263746;
    font-family:
        "Noto Nastaliq Urdu",
        "Noto Naskh Arabic",
        "Traditional Arabic",
        serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
}


/* =========================================================
   18. OPTIONAL LABELS
   ========================================================= */

.ace-label,
.card-label,
.field-label {
    display: inline-block;
    margin-right: 5px;
    color: #8593a0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   19. DIAGNOSTIC / CARD FIELDS
   ========================================================= */

.ace-card-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.ace-diagnostic-line {
    align-items: center;
}

.ace-diagnostic-line strong {
    color: #4b5563;
    font-weight: 700;
}

.ace-separator {
    color: #b0b7bf;
}


/* =========================================================
   20. PRONOUN / INDEX DESCRIPTION
   ========================================================= */

.ace-card-description,
.flashcard-description,
.card-description,
.grammar-description {
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid #edf0f3;
    color: #71808e;
    font-size: 0.78rem;
    line-height: 1.4;
}


/* =========================================================
   21. OPTIONAL KEY / VALUE DEBUG AREA
   ========================================================= */

.ace-data-row,
.data-row {
    display: grid;
    grid-template-columns: minmax(90px, 130px) 1fr;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #edf0f2;
    text-align: left;
}

.ace-data-row:last-child,
.data-row:last-child {
    border-bottom: 0;
}

.ace-data-key,
.data-key {
    color: #758492;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.76rem;
    font-weight: 700;
}

.ace-data-value,
.data-value {
    overflow-wrap: anywhere;
    color: #273746;
    font-size: 0.86rem;
}


/* =========================================================
   22. CARD FOOTER
   ========================================================= */

.ace-card-footer,
.flashcard-footer,
.card-footer {
    min-height: 34px;
    padding: 7px 11px;
    background: #fafbfc;
    border-top: 1px solid #e6ebef;
    color: #87939e;
    font-size: 0.72rem;
    text-align: center;
}


/* =========================================================
   23. BADGES
   ========================================================= */

.ace-tense-badge,
.tense-badge {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 8px;
    background: #e8eef3;
    border-radius: 999px;
    color: #455e73;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.ace-form-badge,
.form-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #17324d;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}


/* =========================================================
   24. EMPTY / UNAVAILABLE
   ========================================================= */

.ace-empty,
.empty-value,
.unavailable {
    color: #9aa6b1;
    font-style: italic;
    font-size: 0.88rem;
}

.ace-empty {
    padding: 50px 20px;
}


/* =========================================================
   25. LINKS
   ========================================================= */

.ace-flashcard a,
.flashcard a,
.sentence-card a,
.ace-card a {
    color: #315f83;
    text-decoration: none;
}

.ace-flashcard a:hover,
.flashcard a:hover,
.sentence-card a:hover,
.ace-card a:hover {
    text-decoration: underline;
}


/* =========================================================
   26. NAVIGATION
   ========================================================= */

.ace-navigation,
.flashcard-navigation,
.page-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 24px auto;
}

.ace-navigation a,
.flashcard-navigation a,
.page-navigation a {
    display: inline-block;
    padding: 7px 13px;
    background: #ffffff;
    border: 1px solid #cdd7df;
    border-radius: 7px;
    color: #294b66;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.ace-navigation a:hover,
.flashcard-navigation a:hover,
.page-navigation a:hover {
    background: #edf3f7;
    border-color: #9eb3c3;
    text-decoration: none;
}


/* =========================================================
   27. RAW / SECONDARY INFORMATION
   ========================================================= */

.ace-secondary-data,
.secondary-data,
.raw-data {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #d8e0e6;
}


/* =========================================================
   28. TENSE COLOR GROUPS
   ========================================================= */

/* Active Perfect */
.tense-1 .ace-card-header,
.tense-1 .flashcard-header {
    border-top: 3px solid #4d7d63;
}

/* Active Imperfect Group — Tenses 2-6 */
.tense-2 .ace-card-header,
.tense-3 .ace-card-header,
.tense-4 .ace-card-header,
.tense-5 .ace-card-header,
.tense-6 .ace-card-header,
.tense-2 .flashcard-header,
.tense-3 .flashcard-header,
.tense-4 .flashcard-header,
.tense-5 .flashcard-header,
.tense-6 .flashcard-header {
    border-top: 3px solid #4d718e;
}

/* Passive Group — Tenses 7-12 */
.tense-7 .ace-card-header,
.tense-8 .ace-card-header,
.tense-9 .ace-card-header,
.tense-10 .ace-card-header,
.tense-11 .ace-card-header,
.tense-12 .ace-card-header,
.tense-7 .flashcard-header,
.tense-8 .flashcard-header,
.tense-9 .flashcard-header,
.tense-10 .flashcard-header,
.tense-11 .flashcard-header,
.tense-12 .flashcard-header {
    border-top: 3px solid #836a98;
}

/* Imperative / Prohibitive */
.tense-13 .ace-card-header,
.tense-13 .flashcard-header {
    border-top: 3px solid #b28a3a;
}

.tense-14 .ace-card-header,
.tense-14 .flashcard-header {
    border-top: 3px solid #9e5757;
}

/* Nouns / Derived Nouns — Tenses 15-24 */
.tense-15 .ace-card-header,
.tense-16 .ace-card-header,
.tense-17 .ace-card-header,
.tense-18 .ace-card-header,
.tense-19 .ace-card-header,
.tense-20 .ace-card-header,
.tense-21 .ace-card-header,
.tense-22 .ace-card-header,
.tense-23 .ace-card-header,
.tense-24 .ace-card-header,
.tense-15 .flashcard-header,
.tense-16 .flashcard-header,
.tense-17 .flashcard-header,
.tense-18 .flashcard-header,
.tense-19 .flashcard-header,
.tense-20 .flashcard-header,
.tense-21 .flashcard-header,
.tense-22 .flashcard-header,
.tense-23 .flashcard-header,
.tense-24 .flashcard-header {
    border-top: 3px solid #8b7355;
}


/* =========================================================
   29. RTL SUPPORT
   ========================================================= */

[dir="rtl"] .ace-tense-heading,
[dir="rtl"] .tense-heading {
    border-left: 0;
    border-right: 5px solid #446987;
}

[dir="rtl"] .ace-data-row,
[dir="rtl"] .data-row {
    text-align: right;
}


/* =========================================================
   30. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .ace-page,
    .ace-container,
    .sentence-table-container {
        width: calc(100% - 24px);
        margin-top: 16px;
    }

    .ace-flashcard-grid,
    .flashcard-grid,
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
        gap: 13px;
    }

    .ace-colored-token {
        font-size: 3.25rem;
    }
}


/* =========================================================
   31. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .ace-card {
        padding: 20px 16px;
    }

    .ace-colored-token {
        font-size: 2.8rem;
    }
}

@media (max-width: 600px) {

    .ace-page,
    .ace-container,
    .sentence-table-container {
        width: calc(100% - 16px);
        margin-top: 10px;
    }

    .ace-page-title,
    .page-title {
        font-size: 1.55rem;
    }

    .ace-form-heading,
    .form-heading,
    .form-title {
        padding: 9px 12px;
        font-size: 1.1rem;
    }

    .ace-tense-heading,
    .tense-heading,
    .tense-title {
        padding: 8px 11px;
        font-size: 0.94rem;
    }

    .ace-flashcard-grid,
    .flashcard-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .ace-flashcard,
    .flashcard,
    .sentence-card {
        min-height: 220px;
    }

    .ace-card-body,
    .flashcard-body,
    .card-body {
        padding: 16px 12px;
    }

    .ace-colored-token {
        font-size: 2.55rem;
    }

    .ace-latin,
    .flashcard-latin,
    .card-latin,
    .latin51,
    .ace-ipa,
    .ace-meaning,
    .flashcard-meaning,
    .card-meaning,
    .meaning51 {
        font-size: 0.94rem;
    }

    .ace-urdu {
        font-size: 1rem;
    }

    .ace-data-row,
    .data-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}


/* =========================================================
   32. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 380px) {

    .ace-colored-token {
        font-size: 2.2rem;
    }
}


/* =========================================================
   33. PRINT
   ========================================================= */

@media print {

    body {
        background: #ffffff;
    }

    .ace-page,
    .ace-container,
    .sentence-table-container {
        width: 100%;
        margin: 0;
    }

    .ace-navigation,
    .flashcard-navigation,
    .page-navigation {
        display: none;
    }

    .ace-flashcard,
    .flashcard,
    .sentence-card {
        break-inside: avoid;
        box-shadow: none;
    }

    .ace-flashcard:hover,
    .flashcard:hover,
    .sentence-card:hover {
        transform: none;
        box-shadow: none;
    }

    .ace-colored-token {
        font-size: 3rem;
    }
}
/* =============================================
   CENTER ENGLISH / URDU INFORMATION
   ============================================= */

.ace-centered-info {
    width: 100%;
    text-align: center;
    margin: 8px auto;
}

.ace-centered-info strong {
    margin-right: 5px;
}

.ace-centered-info span[lang="ur"] {
    display: inline-block;
    direction: rtl;
    unicode-bidi: isolate;
}
/* =====================================================
   FOCUSED FLASHCARD WRAPPER
   ===================================================== */

.ace-focused-display {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 32px auto;
    padding: 0 16px;
    box-sizing: border-box;
}


/* =====================================================
   FLASHCARD
   ===================================================== */

.ace-card {
    width: 100%;
    max-width: 900px;

    background: #ffffff;

    border: 1px solid #d9dee7;
    border-radius: 18px;

    padding: 38px 42px 26px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);

    text-align: center;

    box-sizing: border-box;
}


/* =====================================================
   LARGE COLORED ARABIC
   ===================================================== */

.ace-arabic-token {
    width: 100%;

    margin: 4px auto 14px;

    text-align: center;

    font-family:
        "Noto Naskh Arabic",
        "Traditional Arabic",
        "Scheherazade New",
        serif;

    font-size: 3.6rem;
    line-height: 1.8;

    direction: rtl;
}


/* Preserve colors already contained in colored Arabic spans */
.ace-arabic-token span {
    font-size: inherit;
}


/* =====================================================
   IPA
   ===================================================== */

.ace-ipa-line {
    margin: 2px auto 26px;

    text-align: center;

    font-size: 1.15rem;
    line-height: 1.5;
}

.ace-ipa-link {
    text-decoration: none;
    font-size: 1.25rem;
}

.ace-ipa-link:hover {
    text-decoration: underline;
}


/* =====================================================
   TRANSLATIONS
   ===================================================== */

.ace-translation {
    max-width: 760px;

    margin: 14px auto;

    text-align: center;

    font-size: 1.08rem;
    line-height: 1.75;
}

.ace-urdu {
    font-family:
        "Noto Nastaliq Urdu",
        "Noto Naskh Arabic",
        serif;

    line-height: 2;
}


/* =====================================================
   DIAGNOSTIC LINE
   ===================================================== */

.ace-diagnostic-line {
    margin-top: 28px;
    padding-top: 16px;

    border-top: 1px solid #e5e7eb;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 8px;

    font-size: 0.78rem;
    line-height: 1.5;

    color: #626b77;

    text-align: center;
}

.ace-diagnostic-line strong {
    color: #374151;
}

.ace-separator {
    color: #b2b8c1;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

    .ace-card {
        padding: 26px 18px 20px;
        border-radius: 14px;
    }

    .ace-arabic-token {
        font-size: 2.65rem;
    }

    .ace-translation {
        font-size: 1rem;
    }

    .ace-diagnostic-line {
        font-size: 0.72rem;
    }
}
.ace-arabic {
    font-size: 4rem;
    line-height: 1.8;
}