:root {
    --project-font-body: "Google Sans", Arial, sans-serif;
    --project-font-heading: "Noto Sans Thai", "Google Sans", Arial, sans-serif;
    --project-font-size-body: 16px;
    --project-font-size-readable-min: 12px;
    --project-line-height-body: 1.55;
    --project-line-height-compact: 1.45;
}

/*
 * Project-wide typography. The exclusions preserve icon and monospace fonts
 * used by Atlantis, Font Awesome, Flaticon and code blocks.
 */
html body:not(#project-font-override),
html body:not(#project-font-override) :where(
    *:not(i):not(svg):not(path):not(code):not(pre):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not([class^="flaticon-"]):not([class*=" flaticon-"]):not([class^="icon-"]):not([class*=" icon-"])
) {
    font-family: var(--project-font-body) !important;
}

/*
 * Readability baseline for the screens used throughout the day.  The rule is
 * intentionally component-based instead of using a universal font-size
 * override, so headings, dashboard figures and icon fonts keep their visual
 * hierarchy.
 */
html body:not(#project-font-override) {
    font-size: var(--project-font-size-body);
    line-height: var(--project-line-height-body);
}

html body:not(#project-font-override) :where(
    p,
    li,
    dt,
    dd,
    label,
    input,
    select,
    textarea,
    button,
    .btn,
    .btn-sm,
    .form-control,
    .custom-select,
    .custom-file-label,
    .input-group-text,
    .dropdown-item,
    .nav-link,
    .breadcrumb,
    .breadcrumb-item,
    .page-link,
    .dataTables_info,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .form-text,
    .help-block,
    .badge,
    .label,
    .notification,
    small,
    .small,
    sup
) {
    font-size: var(--project-font-size-readable-min) !important;
    line-height: var(--project-line-height-compact);
}

html body:not(#project-font-override) table,
html body:not(#project-font-override) table :where(th, td) {
    font-size: var(--project-font-size-readable-min) !important;
    line-height: var(--project-line-height-compact);
}

/* Atlantis applies smaller sizes to these nested text elements. */
html body:not(#project-font-override) :where(
    .breadcrumbs,
    .breadcrumbs a,
    .text-section,
    h6,
    .h6,
    table span.font-bold
) {
    font-size: var(--project-font-size-readable-min) !important;
}

/* Input text at 16px is easier to read and avoids automatic zoom on phones. */
html body:not(#project-font-override) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .custom-select
) {
    font-size: var(--project-font-size-body) !important;
}

/* Keep Thai vowel marks and tone marks from colliding in compact UI labels. */
html body:not(#project-font-override) :where(
    .btn,
    .badge,
    .label,
    .nav-link,
    .dropdown-item,
    .breadcrumb,
    .page-link,
    small,
    .small,
    sup
) {
    line-height: var(--project-line-height-compact) !important;
}

html body:not(#project-font-override) h1,
html body:not(#project-font-override) h2,
html body:not(#project-font-override) .h1,
html body:not(#project-font-override) .h2,
html body:not(#project-font-override) :is(h1, h2, .h1, .h2) :where(
    *:not(i):not(svg):not(path):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not([class^="flaticon-"]):not([class*=" flaticon-"]):not([class^="icon-"]):not([class*=" icon-"])
) {
    font-family: var(--project-font-heading) !important;
}

/*
 * The style editor contains a deliberately scaled-down website preview.
 * Preserve that preview's proportions; it is an illustration rather than
 * interface text that users must read to complete a task.
 */
html body:not(#project-font-override) .style-preview-frame .style-live-welcome p {
    font-size: 11px !important;
}

html body:not(#project-font-override) .style-preview-frame .style-live-welcome small {
    font-size: 9px !important;
}

html body:not(#project-font-override) .style-preview-frame .style-live-menu-grid small {
    font-size: 8px !important;
}

/* Shared export-menu icons -------------------------------------------------
 * Keep legacy and new export dropdowns visually consistent without requiring
 * every Web Forms page to carry its own icon markup or color rules.
 */
html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .quick-print,
    .export-excel,
    .export-word,
    .export-pdf,
    [id*="quickprint" i],
    [id*="btn" i][id*="excel" i],
    [id*="btn" i][id*="word" i],
    [id*="btn" i][id*="pdf" i],
    [href*="print=1" i],
    [href*="export=excel" i],
    [href*="export=word" i],
    [href*="export=pdf" i],
    [href*="btnexcel" i],
    [href*="btnword" i],
    [href*="btnpdf" i]
) {
    display: flex !important;
    align-items: center;
    gap: 0;
    min-height: 38px;
}

html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .quick-print,
    .export-excel,
    .export-word,
    .export-pdf,
    [id*="quickprint" i],
    [id*="btn" i][id*="excel" i],
    [id*="btn" i][id*="word" i],
    [id*="btn" i][id*="pdf" i],
    [href*="print=1" i],
    [href*="export=excel" i],
    [href*="export=word" i],
    [href*="export=pdf" i],
    [href*="btnexcel" i],
    [href*="btnword" i],
    [href*="btnpdf" i]
)::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 20px;
    margin-right: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

/* Hide page-specific image/font icons once the shared icon is active. */
html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .quick-print,
    .export-excel,
    .export-word,
    .export-pdf,
    [id*="quickprint" i],
    [id*="btn" i][id*="excel" i],
    [id*="btn" i][id*="word" i],
    [id*="btn" i][id*="pdf" i],
    [href*="print=1" i],
    [href*="export=excel" i],
    [href*="export=word" i],
    [href*="export=pdf" i],
    [href*="btnexcel" i],
    [href*="btnword" i],
    [href*="btnpdf" i]
) > :where(i, img, svg):first-child {
    display: none !important;
}

html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .quick-print,
    [id*="quickprint" i],
    [href*="print=1" i]
)::before {
    background-image: url("/images/export-print.svg");
}

html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .export-excel,
    [id*="btn" i][id*="excel" i],
    [href*="export=excel" i],
    [href*="btnexcel" i]
)::before {
    background-image: url("/images/excel.svg");
}

html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .export-word,
    [id*="btn" i][id*="word" i],
    [href*="export=word" i],
    [href*="btnword" i]
)::before {
    background-image: url("/images/word.svg");
}

html body:not(#project-font-override) .dropdown-menu .dropdown-item:where(
    .export-pdf,
    [id*="btn" i][id*="pdf" i],
    [href*="export=pdf" i],
    [href*="btnpdf" i]
)::before {
    background-image: url("/image/pdf.svg");
}

/* Shared export trigger ----------------------------------------------------
 * One visual contract for every export dropdown across teacher, admin and
 * public workspaces. Page-specific classes may still control placement only.
 */
html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #b8c8de !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0b4bc1 !important;
    font-family: 'kanit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button:hover,
html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button:focus,
html body:not(#project-font-override) .show > .project-export-button.project-export-button.project-export-button.project-export-button,
html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button[aria-expanded="true"] {
    border-color: #0b4bc1 !important;
    background: #f5f9ff !important;
    color: #083b97 !important;
    text-decoration: none !important;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .18) !important;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button > :where(i, svg) {
    flex: 0 0 16px;
    width: 16px;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1;
    text-align: center;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button > .fa-caret-down {
    flex-basis: 10px;
    width: 10px;
    margin-right: 0 !important;
    margin-left: 2px !important;
    font-size: 10px !important;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button.dropdown-toggle::after {
    margin-left: 2px;
    color: currentColor;
    vertical-align: middle;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button.project-export-button--icon {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
}

html body:not(#project-font-override) .project-export-button.project-export-button.project-export-button.project-export-button.project-export-button--icon::after {
    display: none !important;
}

html body:not(#project-font-override) .context-data-link {
    color: #1559a6;
    font-weight: 600;
    text-decoration: none;
}

html body:not(#project-font-override) .context-data-link:hover,
html body:not(#project-font-override) .context-data-link:focus {
    color: #0b3f7a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html body:not(#project-font-override) .context-data-link:focus-visible {
    border-radius: 2px;
    outline: 2px solid rgba(21, 89, 166, .28);
    outline-offset: 2px;
}