/* ==========================================================
   R32.72_SITEWIDE_UI_CONTRACT

   Purpose:
   - prevent text collision
   - prevent Persian word fragmentation
   - keep text inside assigned containers
   - normalize flex/grid shrinking
   - establish readable light/dark surface contracts

   No Hero geometry.
   No business logic.
   ========================================================== */


/* ----------------------------------------------------------
   1. BOX MODEL
   ---------------------------------------------------------- */

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   2. FLEX / GRID SAFETY

   One of the most common causes of text collision is the
   default min-width:auto of flex/grid children.
   ---------------------------------------------------------- */

:where(
    .grid,
    .layout-2,
    .layout-3,
    .quick-access-grid,
    .account-quick-grid,
    .student-grid,
    .student-grid2,
    .student-kpis,
    .r3271-grid,
    .r3268-grid,
    .r21p5-role-grid
) > * {

    min-width: 0;
    max-width: 100%;
}


:where(
    .panel,
    .card,
    article,
    section,
    form,
    fieldset
) {

    min-width: 0;
}


/* ----------------------------------------------------------
   3. PERSIAN TEXT FIT

   IMPORTANT:
   Do NOT use word-break:break-all or overflow-wrap:anywhere
   globally. Persian words must remain intact.
   ---------------------------------------------------------- */

body :where(
    h1,h2,h3,h4,h5,h6,
    p,
    span,
    small,
    b,
    strong,
    label,
    legend,
    th,
    td,
    li,
    dt,
    dd
) {

    max-width: 100%;

    white-space: normal;

    word-break: normal;

    overflow-wrap: break-word;

    hyphens: none;

    text-overflow: clip;
}


/* Long machine identifiers may break if absolutely necessary. */

body :where(
    code,
    pre,
    .username,
    .user-name,
    .national-id,
    .personnel-code,
    .student-code,
    .account-id,
    .reference-id
) {

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ----------------------------------------------------------
   4. TYPOGRAPHIC RHYTHM
   ---------------------------------------------------------- */

body :where(
    p,
    li,
    td,
    label,
    small
) {
    line-height: 1.8;
}


body :where(
    h1,h2,h3,h4,h5,h6,
    b,
    strong,
    th
) {
    line-height: 1.65;
}


/* Prevent tiny unreadable text. */

body :where(
    .panel,
    .card,
    article
) small {

    font-size: max(
        11px,
        .72rem
    );
}


/* ----------------------------------------------------------
   5. FORM CONTROLS
   ---------------------------------------------------------- */

body :where(
    input,
    select,
    textarea,
    button
) {

    min-width: 0;
    max-width: 100%;

    font: inherit;

    line-height: 1.55;
}


body :where(
    input,
    select,
    textarea
) {

    width: 100%;

    background: #ffffff;
    color: #17384d;
}


body button {

    height: auto;

    min-height: 38px;

    white-space: normal;

    word-break: normal;

    overflow-wrap: break-word;
}


/* ----------------------------------------------------------
   6. LINKS / BUTTON LABEL FIT
   ---------------------------------------------------------- */

body :where(
    a,
    .btn,
    button
) {

    text-align: center;

    white-space: normal;

    word-break: normal;

    overflow-wrap: break-word;
}


/* ----------------------------------------------------------
   7. TABLE SAFETY
   ---------------------------------------------------------- */

body table {

    width: 100%;

    max-width: 100%;

    border-collapse: collapse;
}


body :where(
    th,
    td
) {

    min-width: 0;

    vertical-align: middle;

    white-space: normal;

    word-break: normal;

    overflow-wrap: break-word;
}


body th {

    font-size: clamp(
        11.5px,
        .95vw,
        13.5px
    );
}


/* ----------------------------------------------------------
   8. ACCOUNT REGISTRY

   The header must never fragment Persian words.
   ---------------------------------------------------------- */

.r8-account-head,
.r8-account-row {

    min-width: 0;

    max-width: 100%;
}


.r8-account-head > *,
.r8-account-row > * {

    min-width: 0;

    max-width: 100%;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

    line-height: 1.7 !important;
}


.r8-account-head {

    color: #17384d !important;
}


.r8-account-head * {

    color: #17384d !important;
}


/* ----------------------------------------------------------
   9. LIGHT SURFACE CONTRACT
   ---------------------------------------------------------- */

:where(
    .panel,
    .card,
    .r3271-tile,
    .r3271-welcome-main,
    .r3271-news-item,
    .r3268-card,
    .r3268-event,
    .r3268-option,
    .r3253-candidate,
    .guidance-manager-card,
    .r8-account-row,
    .student-grid2 > section
) {

    color: #17384d;
}


:where(
    .panel,
    .card,
    .r3271-tile,
    .r3271-welcome-main,
    .r3271-news-item,
    .r3268-card,
    .r3268-event,
    .r3268-option,
    .r3253-candidate,
    .guidance-manager-card,
    .r8-account-row,
    .student-grid2 > section
)
:where(
    h1,h2,h3,h4,h5,h6,
    b,strong,label,legend
) {

    color: #17384d;
}


:where(
    .panel,
    .card,
    .r3271-tile,
    .r3271-welcome-main,
    .r3271-news-item,
    .r3268-card,
    .r3268-event,
    .r3268-option,
    .r3253-candidate,
    .guidance-manager-card,
    .r8-account-row,
    .student-grid2 > section
)
:where(
    p,
    small,
    .hint,
    .muted
) {

    color: #557184;
}


/* ----------------------------------------------------------
   10. DARK SURFACE CONTRACT
   ---------------------------------------------------------- */

:where(
    .sidebar,
    .topbar,
    .parent-top,
    .executive-top,
    .student-welcome,
    .login-story,
    .auth-brand,
    .student-login-visual,
    .r3268-topbar,
    .r3268-hero,
    .r3269-vote-dock,
    .r32711-home-vote-card,
    .r3268-home-entry,
    .r21p5-role-card
) {

    color: #ffffff;
}


:where(
    .sidebar,
    .topbar,
    .parent-top,
    .executive-top,
    .student-welcome,
    .login-story,
    .auth-brand,
    .student-login-visual,
    .r3268-topbar,
    .r3268-hero,
    .r3269-vote-dock,
    .r32711-home-vote-card,
    .r3268-home-entry,
    .r21p5-role-card
)
:where(
    h1,h2,h3,h4,h5,h6,
    b,strong,label
) {

    color: #ffffff;
}


:where(
    .sidebar,
    .topbar,
    .parent-top,
    .executive-top,
    .student-welcome,
    .login-story,
    .auth-brand,
    .student-login-visual,
    .r3268-topbar,
    .r3268-hero,
    .r3269-vote-dock,
    .r32711-home-vote-card,
    .r3268-home-entry,
    .r21p5-role-card
)
:where(
    p,
    small,
    .hint,
    .muted
) {

    color: #d3e3ec;
}


/* ----------------------------------------------------------
   11. LIGHT TABLE HEAD CONTRACT
   ---------------------------------------------------------- */

.r8-account-head,
.table-light-head,
.user-registry-head {

    background: #e9f0f6 !important;

    color: #17384d !important;
}


.r8-account-head *,
.table-light-head *,
.user-registry-head * {

    color: #17384d !important;

    text-shadow: none !important;
}


/* ----------------------------------------------------------
   12. DARK TABLE HEAD CONTRACT
   ---------------------------------------------------------- */

.table-dark-head {

    background: #0d3657 !important;

    color: #ffffff !important;
}


.table-dark-head * {

    color: #ffffff !important;
}


/* ----------------------------------------------------------
   13. MEDIA
   ---------------------------------------------------------- */

body :where(
    img,
    svg,
    video,
    canvas
) {

    max-width: 100%;
}


/* ----------------------------------------------------------
   14. RESPONSIVE TEXT
   ---------------------------------------------------------- */

@media(max-width:760px) {

    body :where(
        h1,h2,h3,h4
    ) {

        overflow-wrap: break-word;
        word-break: normal;
    }


    body :where(
        th,
        td,
        button,
        .btn
    ) {

        line-height: 1.7;
    }
}