/*
 * The union of the per-page style.css files from www/. Every page carried the
 * same body/heading font override; the handful of page-specific rules below use
 * distinct selectors, so they merge without colliding.
 */

/* Prompt leads, Noto Sans Thai backs it up — the flood-ai.net stack the
   project owner asked this theme to match (2026-09-19). */
body {
    font-family: 'Prompt', 'Noto Sans Thai', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Prompt', 'Noto Sans Thai', sans-serif !important;
    font-weight: 600 !important;
}

/* login, manageuser, myreport, report, tracking */
.card-map {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
    height: 70vh;
    z-index: 0;
}

/* dashboard_riskpoint */
.responsive-img {
    height: 450px !important;
}

.card-center {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* dashboard_student */
.apexcharts-canvas .apexchartsmvyp6ftp .apexcharts-theme-light {
    font-family: 'Noto Sans Thai', sans-serif !important;
}

/* media */
.accordion-collapse {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    /* or set a minimum height */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .accordion-collapse {
        flex-direction: column;
        padding: 10px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Vintage retro surface treatment.
 *
 * theme-srsy.css carries the palette; this file carries the shape of things.
 * The generated theme cannot express any of it, because it is produced by
 * substituting colours into the stock template and nothing else.
 *
 * Loaded last on purpose, so these win over core.css without !important
 * except where Sneat itself used it first.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
    /* The page sits on plain white; the warmth stays on the cards, which keep
       their own tint and border so they still read as raised against it. */
    --srsy-paper: #ffffff;
    --srsy-card: #fdf8f0;
    --srsy-ink: #22303c;
    --srsy-muted: #7d7266;
    --srsy-line: #e7dccb;

    --srsy-burnt: #e2703a;
    --srsy-navy: #2b3b4a;
    --srsy-sage: #dce7d5;
    --srsy-sage-deep: #3a5a40;
    --srsy-mustard: #c9a227;
    --srsy-blush: #f5d9c6;

    --srsy-radius: 18px;
}

/* Paper, not the template's cool grey. The menu and footer sit on the same
   ground so the page reads as one sheet rather than a card on a backdrop. */
body,
.layout-page,
.content-wrapper {
    background-color: var(--srsy-paper);
}

.card {
    background-color: var(--srsy-card);
    border: 1px solid var(--srsy-line);
    border-radius: var(--srsy-radius);
    /* The stock shadow is a blue-grey haze. Flat colour on paper is the look;
       what little depth there is comes from the border. */
    box-shadow: none;
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--srsy-line);
}

/* Small caps labels — the "MONTHLY REVIEW" / "DAY STREAK" line in the
   reference. Applied by hand where a heading needs to step back. */
.srsy-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--srsy-muted);
}

/* The oversized numerals the reference leads with. Tabular so a column of
   them lines up, tight so they read as one mark rather than a row of digits. */
.srsy-figure {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--srsy-ink);
}

/* Flat colour-blocked tiles. Each sets its own foreground, so text never
   inherits a colour that only works on the card behind it. */
.srsy-tile {
    border-radius: var(--srsy-radius);
    border: none;
    padding: 1.25rem 1.375rem;
}

.srsy-tile--navy { background: var(--srsy-navy); color: #f4efe6; }
.srsy-tile--burnt { background: var(--srsy-burnt); color: #fff6ef; }
.srsy-tile--sage { background: var(--srsy-sage); color: var(--srsy-sage-deep); }
.srsy-tile--mustard { background: var(--srsy-mustard); color: #2a2410; }
.srsy-tile--blush { background: var(--srsy-blush); color: #7a3d1d; }

.srsy-tile .srsy-label,
.srsy-tile .srsy-figure {
    color: inherit;
    opacity: 1;
}

.srsy-tile--navy .srsy-label,
.srsy-tile--burnt .srsy-label { opacity: 0.72; }

/* Buttons and inputs pick up the radius so nothing stays at the template's
   4px while the cards around it are at 18. */
.btn,
.form-control,
.form-select,
.input-group-text {
    border-radius: 10px;
}

.btn-primary {
    border-color: transparent;
}

/* DataTables and the menu sit on paper too; their default white blocks read
   as a seam against it. */
.menu-vertical,
.menu-horizontal,
.layout-navbar,
table.dataTable tbody tr {
    background-color: transparent;
}