/*
 * Site-wide colour theme: deep blue for navigation and frames (sidebar,
 * footer, sign-in panel, welcome card), soft blue for page backgrounds, and
 * white for content cards so text keeps strong contrast for readers aged
 * 25 to 70. Loaded last in every layout (public, auth, member, admin,
 * owner, moderator, staff).
 */

:root {
    --mt-navy: #0a2350;
    --mt-navy-2: #0d3577;
    --mt-blue: #0b5fd6;
    --mt-sky: #e4eefc;
    --mt-sky-2: #eaf2fd;
    --mt-on-navy: #e7f0ff;
    --mt-on-navy-soft: #a9c3e8;
}

body.portal-page,
body.public-page {
    background:
        radial-gradient(1100px 520px at 85% -8%, rgba(11, 95, 214, .16), transparent 60%),
        radial-gradient(900px 520px at 10% 110%, rgba(22, 201, 245, .12), transparent 60%),
        linear-gradient(180deg, var(--mt-sky) 0%, var(--mt-sky-2) 50%, var(--mt-sky) 100%);
    background-color: var(--mt-sky-2);
}

/* Sidebar: deep blue, which also suits the silver SAI wordmark. */
body.portal-page .portal-sidebar,
body.portal-page .portal-sidebar.is-open {
    border-right: 0;
    background: linear-gradient(180deg, var(--mt-navy) 0%, var(--mt-navy-2) 62%, #0f4aa3 100%);
    color: var(--mt-on-navy);
}

body.portal-page .sidebar-space-label {
    color: #8cc4ff;
}

body.portal-page .portal-sidebar .sidebar-label {
    color: var(--mt-on-navy-soft);
}

body.portal-page .portal-sidebar .sidebar-nav a {
    color: rgba(231, 240, 255, .86);
}

body.portal-page .portal-sidebar .sidebar-nav a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

body.portal-page .portal-sidebar .sidebar-nav a.active {
    background: #fff;
    color: var(--mt-navy);
    box-shadow: 0 8px 22px rgba(3, 14, 38, .28);
}

body.portal-page .portal-sidebar .sidebar-nav a.active .nav-icon {
    color: var(--mt-blue);
}

body.portal-page .sidebar-nav {
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

body.portal-page .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
}

body.portal-page .sidebar-user {
    border-top-color: rgba(255, 255, 255, .14);
}

body.portal-page .sidebar-user .user-avatar {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

body.portal-page .sidebar-user-copy strong {
    color: #fff;
}

body.portal-page .sidebar-user-copy small {
    color: var(--mt-on-navy-soft);
}

body.portal-page .sidebar-logout-button {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: var(--mt-on-navy);
}

body.portal-page .sidebar-logout-button:hover {
    border-color: rgba(255, 170, 180, .55);
    background: rgba(255, 120, 140, .14);
    color: #fff;
}

body.portal-page .sidebar-meta-info,
body.portal-page .sidebar-meta-year {
    color: var(--mt-on-navy-soft);
}

body.portal-page .sidebar-meta-version {
    color: #cfe2ff;
}

body.portal-page .sidebar-meta-version:hover {
    color: #fff;
}

body.portal-page .sidebar-meta-divider {
    color: rgba(255, 255, 255, .3);
}

/* Topbar sits on the blue page instead of a white strip. */
body.portal-page .portal-topbar {
    border-bottom-color: rgba(10, 35, 80, .08);
    background: rgba(228, 238, 252, .82);
}

/* Ringkasan welcome card: blue, with white text. */
body.dashboard-page .portal-content .dashboard-hero {
    border: 0;
    background:
        radial-gradient(520px 320px at 92% 8%, rgba(22, 201, 245, .35), transparent 62%),
        linear-gradient(135deg, var(--mt-navy) 0%, var(--mt-navy-2) 45%, var(--mt-blue) 100%);
    box-shadow: 0 24px 50px rgba(10, 35, 80, .22);
    color: #fff;
}

body.dashboard-page .portal-content .dashboard-hero h2 {
    color: #fff;
}

body.dashboard-page .portal-content .dashboard-hero h2 span {
    color: #8fd3ff;
}

body.dashboard-page .portal-content .dashboard-hero > .dashboard-hero-copy > p,
body.dashboard-page .portal-content .dashboard-hero .dashboard-eyebrow,
body.dashboard-page .portal-content .dashboard-hero-meta small {
    color: #cfe0f7;
}

body.dashboard-page .portal-content .dashboard-hero-meta strong {
    color: #fff;
}

body.dashboard-page .portal-content .dashboard-hero-meta {
    border-top-color: rgba(255, 255, 255, .16);
}

body.dashboard-page .portal-content .dashboard-hero .dashboard-primary-button {
    background: #fff;
    color: var(--mt-navy);
}

body.dashboard-page .portal-content .dashboard-hero .dashboard-quiet-link {
    border-bottom-color: rgba(255, 255, 255, .5);
    color: #fff;
}

body.dashboard-page .portal-content .dashboard-hero-orbit {
    opacity: .55;
    filter: brightness(1.8);
}

/* Panels: menu items start at the top instead of spreading over the height. */
body.portal-page .portal-sidebar .sidebar-nav {
    align-content: start;
}

/* Admin, owner, moderator, staff: same blue frame as the member space. */
body.admin-page {
    --admin-gold: #0b5fd6;
}

body.admin-page .admin-space-label,
body.portal-page .dashboard-space-label {
    color: #8cc4ff;
}

body.admin-page .portal-sidebar .sidebar-nav a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

body.admin-page .portal-sidebar .sidebar-nav a.active {
    background: #fff;
    color: var(--mt-navy);
}

body.admin-page .admin-topbar {
    border-bottom-color: rgba(10, 35, 80, .08);
    background: rgba(228, 238, 252, .82);
}

body.admin-page .admin-counter {
    background: #8cc4ff;
    color: var(--mt-navy);
}

/* Sign-in and sign-up: the left panel becomes the deep blue frame. */
body.portal-page .auth-visual {
    background:
        radial-gradient(520px 360px at 85% 12%, rgba(22, 201, 245, .32), transparent 62%),
        linear-gradient(150deg, var(--mt-navy) 0%, var(--mt-navy-2) 50%, var(--mt-blue) 100%);
    color: #fff;
}

body.portal-page .auth-visual h1,
body.portal-page .auth-visual .auth-kicker {
    color: #fff;
}

body.portal-page .auth-visual h1 span {
    color: #8fd3ff;
}

body.portal-page .auth-visual p,
body.portal-page .auth-visual-foot {
    color: #cfe0f7;
}

body.portal-page .auth-visual:before,
body.portal-page .auth-visual:after {
    border-color: rgba(255, 255, 255, .18);
}

body.portal-page .auth-panel {
    background: #f6f9fe;
}

/* Public pages: deep blue footer closes every page. */
body.public-page .site-footer {
    background: linear-gradient(180deg, var(--mt-navy) 0%, #0b2c63 100%);
    color: var(--mt-on-navy);
}

body.public-page .site-footer p,
body.public-page .site-footer .footer-links span,
body.public-page .site-footer .footer-bottom,
body.public-page .site-footer .footer-bottom * {
    color: var(--mt-on-navy-soft);
}

body.public-page .site-footer .footer-links a {
    color: var(--mt-on-navy);
}

body.public-page .site-footer a:hover {
    color: #fff;
}

body.public-page .site-footer .footer-bottom {
    border-top-color: rgba(255, 255, 255, .14);
}

/* Landing: two deep blue bands (events, final call to action) break up the
   light sections so the page reads blue, not white. */
body.landing-page .events-section {
    background:
        radial-gradient(900px 480px at 88% 0%, rgba(22, 201, 245, .22), transparent 62%),
        linear-gradient(160deg, var(--mt-navy) 0%, var(--mt-navy-2) 58%, #0f4aa3 100%);
    color: #fff;
}

body.landing-page .events-section .display,
body.landing-page .events-section .event-info h3,
body.landing-page .events-section .event-date,
body.landing-page .events-section .event-date * {
    color: #fff;
}

body.landing-page .events-section .display span {
    color: #8fd3ff;
}

body.landing-page .events-section .eyebrow,
body.landing-page .events-section .section-intro,
body.landing-page .events-section .event-type,
body.landing-page .events-section .event-meta,
body.landing-page .events-section .event-info p {
    color: #cfe0f7;
}

body.landing-page .events-section .text-link,
body.landing-page .events-section .event-arrow {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

body.landing-page .join-section {
    background:
        radial-gradient(700px 420px at 15% 20%, rgba(22, 201, 245, .3), transparent 60%),
        linear-gradient(135deg, var(--mt-navy-2) 0%, var(--mt-blue) 70%, #1f8bff 100%);
    color: #fff;
}

body.landing-page .join-section .display,
body.landing-page .join-section .eyebrow {
    color: #fff;
}

body.landing-page .join-section .display span {
    color: #8fd3ff;
}

body.landing-page .join-section p {
    color: #d6e6fb;
}

/*
 * Phone topbar (all panels): one tidy row. The breadcrumb is dropped (the
 * menu already says where you are), the title stays on one line, the
 * language switch is a compact pill, and nothing wraps to a second row.
 */
@media (max-width: 640px) {
    body.portal-page .portal-topbar {
        height: auto;
        min-height: 60px;
        padding: 8px 14px;
        flex-wrap: nowrap;
        gap: 10px;
    }

    body.portal-page .portal-topbar .topbar-title {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    body.portal-page .portal-topbar .topbar-title > div {
        min-width: 0;
    }

    body.portal-page .portal-topbar .sa-breadcrumb,
    body.portal-page .portal-topbar .dashboard-breadcrumb,
    body.portal-page .portal-topbar .admin-breadcrumb {
        display: none;
    }

    body.portal-page .portal-topbar h1 {
        margin: 0;
        overflow: hidden;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -.03em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.portal-page .portal-topbar .portal-mobile-toggle {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
    }

    body.portal-page .portal-topbar .topbar-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        width: auto;
        margin: 0 0 0 auto;
        gap: 8px;
    }

    /* Topbar buttons become round icon buttons; the text stays for screen
       readers but takes no room. */
    body.portal-page .portal-topbar .topbar-actions > .sa-outline-button,
    body.portal-page .portal-topbar .topbar-actions > .admin-button,
    body.portal-page .portal-topbar .topbar-actions > div > .sa-outline-button {
        display: inline-grid;
        place-items: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        gap: 0;
    }

    body.portal-page .portal-topbar .topbar-actions > .sa-outline-button svg,
    body.portal-page .portal-topbar .topbar-actions > .admin-button svg,
    body.portal-page .portal-topbar .topbar-actions > div > .sa-outline-button svg {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    body.portal-page .portal-topbar .locale-switch {
        padding: 2px;
    }

    body.portal-page .portal-topbar .locale-switch-btn {
        min-width: 0;
        min-height: 0;
        padding: 7px 8px;
        font-size: 12px;
        letter-spacing: .04em;
    }

    body.portal-page .portal-topbar .user-avatar {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

/* Links the phone's bottom bar already offers stay off the phone topbar. */
@media (max-width: 640px) {
    body.portal-page .portal-topbar .topbar-actions > .topbar-secondary {
        display: none;
    }
}

/*
 * Public pages on phones and tablets: a deep blue header bar, so the silver
 * SAI wordmark stands out (it was nearly invisible on white), a solid menu
 * panel with the page dimmed behind it, and readable sign-in buttons.
 */
@media (max-width: 960px) {
    body.public-page .site-header,
    body.public-page .site-header.scrolled {
        border-color: rgba(255, 255, 255, .08);
        background: linear-gradient(120deg, var(--mt-navy) 0%, var(--mt-navy-2) 60%, #0f4aa3 100%);
        box-shadow: 0 14px 32px rgba(10, 35, 80, .28);
    }

    body.public-page .site-header .locale-switch {
        border-color: rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .1);
    }

    body.public-page .site-header .locale-switch-btn {
        color: #dbe8ff;
        font-size: 12px;
    }

    body.public-page .site-header .locale-switch-btn.is-active {
        background: #fff;
        color: var(--mt-navy);
    }

    body.public-page .site-header .menu-toggle {
        border-color: rgba(255, 255, 255, .22);
        background: rgba(255, 255, 255, .1);
    }

    body.public-page .site-header .menu-toggle span {
        background: #fff;
    }

    body.public-page .site-header .mobile-menu {
        background: #fff;
        border-color: #d4e2ee;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.public-page .site-header .mobile-menu.is-open {
        box-shadow: 0 20px 50px rgba(9, 33, 74, .2), 0 0 0 100vmax rgba(6, 18, 42, .45);
    }

    body.public-page .site-header .mobile-menu a {
        font-size: 16px;
        color: #1b2b44;
    }

    body.public-page .site-header .mobile-menu a.is-active {
        color: var(--mt-blue);
        background: #eaf2fd;
    }

    body.public-page .site-header .mobile-menu a.mobile-menu-login {
        color: var(--mt-navy);
        background: #fff;
        border-color: #cbd9ea;
        font-weight: 700;
    }

    body.public-page .site-header .mobile-menu a.mobile-menu-cta {
        min-height: 48px;
        color: #fff;
        background: var(--mt-blue);
        font-weight: 700;
    }

    body.public-page .site-header .mobile-menu a.mobile-menu-cta svg {
        stroke: #fff;
    }
}

/*
 * Public footer on phones: two roomy link columns with the legal links in a
 * row below, readable sizes and tap targets, and no repeated links.
 */
@media (max-width: 640px) {
    body.public-page .site-footer {
        padding: 44px 0 calc(28px + env(safe-area-inset-bottom));
    }

    body.public-page .site-footer .footer-brand .brand-img {
        height: 32px;
        width: auto;
    }

    body.public-page .site-footer .footer-brand p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.5;
    }

    body.public-page .site-footer .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        margin-top: 32px;
    }

    body.public-page .site-footer .footer-links > div {
        gap: 0;
    }

    /* Legal sits below the two columns, its links side by side. */
    body.public-page .site-footer .footer-links > div:last-child {
        grid-column: 1 / -1;
        flex-flow: row wrap;
        column-gap: 20px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    body.public-page .site-footer .footer-links > div:last-child span {
        flex-basis: 100%;
    }

    body.public-page .site-footer .footer-links span {
        margin-bottom: 4px;
        font-size: 13px;
        letter-spacing: .02em;
        text-transform: none;
        color: #8cc4ff;
    }

    body.public-page .site-footer .footer-links a {
        display: flex;
        align-items: center;
        min-height: 40px;
        font-size: 16px;
    }

    body.public-page .site-footer .footer-bottom {
        display: grid;
        gap: 6px;
        margin-top: 24px;
        padding-top: 18px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Privacy and terms are already in the Legal group above. */
    body.public-page .site-footer .footer-legal a:not(:first-child) {
        display: none;
    }

    body.public-page .site-footer .footer-legal a {
        font-size: 13px;
        color: var(--mt-on-navy-soft);
    }
}

/*
 * Admin, owner, staff and moderator panels.
 *
 * The language switch had no styling here (it only lived in the member
 * stylesheets), and wide tables pushed action buttons off-screen on phones.
 */
body.admin-page .locale-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #d4e2ee;
    border-radius: 999px;
    background: rgba(244, 248, 255, .92);
}

body.admin-page .locale-switch-btn {
    appearance: none;
    border: 0;
    padding: 7px 9px;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font: 700 12px/1 Manrope, sans-serif;
    letter-spacing: .06em;
    cursor: pointer;
}

body.admin-page .locale-switch-btn.is-active {
    background: #fff;
    color: var(--mt-blue);
    box-shadow: 0 1px 4px rgba(11, 95, 214, .14);
}

body.admin-page .admin-form-layout > * {
    min-width: 0;
}

@media (max-width: 640px) {
    body.admin-page .admin-table-wrap,
    body.admin-page .forum-desk-table {
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
    }

    body.admin-page table.has-cell-labels {
        display: block;
        min-width: 0;
        width: 100%;
        border: 0;
        background: none;
    }

    body.admin-page table.has-cell-labels thead {
        display: none;
    }

    body.admin-page table.has-cell-labels tbody {
        display: grid;
        gap: 12px;
    }

    body.admin-page table.has-cell-labels tr {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid #dbe6f2;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(10, 35, 80, .05);
    }

    body.admin-page table.has-cell-labels td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        font-size: 15px;
        line-height: 1.45;
        text-align: left !important;
        white-space: normal;
    }

    body.admin-page table.has-cell-labels td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
    }

    /* The first cell is the row's name; it needs no label. */
    body.admin-page table.has-cell-labels td:first-child::before {
        display: none;
    }

    body.admin-page table.has-cell-labels td:first-child,
    body.admin-page table.has-cell-labels td:first-child strong {
        font-size: 16px;
    }

    body.admin-page table.has-cell-labels td small {
        font-size: 13.5px;
    }

    body.admin-page table.has-cell-labels td[colspan] {
        text-align: center !important;
    }

    body.admin-page table.has-cell-labels .status-badge {
        font-size: 13px;
    }

    /* Row actions: full-size buttons side by side. */
    body.admin-page table.has-cell-labels td.forum-desk-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.admin-page table.has-cell-labels td.forum-desk-actions::before {
        flex-basis: 100%;
    }

    body.admin-page table.has-cell-labels td button,
    body.admin-page table.has-cell-labels td .admin-button,
    body.admin-page table.has-cell-labels td a.admin-button {
        min-height: 44px;
        font-size: 14.5px;
    }
}

/*
 * Panels, matched to the member area: blue main button, muted blue notes
 * under the numbers instead of teal, readable panel notes and empty states,
 * and on phones bigger text and tap targets.
 */
body.admin-page .admin-button-primary {
    border-color: transparent;
    background: #087cff;
    color: #fff;
    box-shadow: 0 8px 20px rgba(8, 124, 255, .22);
}

body.admin-page .admin-button-primary:hover,
body.admin-page .admin-button-primary:focus-visible {
    background: var(--mt-blue);
    color: #fff;
}

body.admin-page .admin-stat small {
    color: #4b6a91;
}

body.admin-page .admin-panel-heading p {
    color: #5a6f86;
    font-size: 14.5px;
}

body.admin-page .admin-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-size: 14px;
}

body.admin-page .admin-empty {
    margin: 16px 0 0;
    padding: 18px;
    border: 1px dashed #cfdced;
    border-radius: 14px;
    background: #f7faff;
    color: #5a6f86;
    font-size: 15px;
    line-height: 1.55;
}

body.admin-page .sa-rail-note a {
    font-size: 13px;
}

body.admin-page .events-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 640px) {
    body.admin-page .admin-page-head h2 {
        font-size: 32px;
        line-height: 1.08;
        letter-spacing: -.05em;
    }

    body.admin-page .admin-page-head p {
        font-size: 15.5px;
        line-height: 1.6;
    }

    body.admin-page .admin-eyebrow,
    body.admin-page .admin-breadcrumb {
        font-size: 12.5px;
    }

    body.admin-page .portal-sidebar .sidebar-label {
        font-size: 13px;
    }

    body.admin-page .admin-section-label {
        font-size: 13px;
    }

    body.admin-page .admin-stat small,
    body.admin-page .admin-stat-label span {
        font-size: 13.5px;
    }

    body.admin-page .status-badge {
        font-size: 13px;
    }

    body.admin-page .admin-filter {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 14px;
    }

    body.admin-page .admin-button {
        min-height: 44px;
        font-size: 15px;
    }

    body.admin-page .admin-queue-item > a {
        display: inline-grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    body.admin-page .event-studio-intro-meta span {
        font-size: 13px;
    }

    body.admin-page .admin-form label,
    body.admin-page .admin-form-hint {
        font-size: 14.5px;
    }
}

/*
 * Event form on phones. It is a long single column, so the save button
 * stays in reach at the bottom of the screen instead of only at the end,
 * and the checkbox explanations are lighter to read.
 */
body.admin-page .events-studio-form .admin-check span {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #5a6f86;
}

body.admin-page .events-studio-form .admin-check strong {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--mt-navy);
}

@media (max-width: 900px) {
    body.admin-page .events-studio-form .account-form-actions {
        position: sticky;
        bottom: calc(var(--panel-bottom-nav, 72px) + 8px + env(safe-area-inset-bottom));
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 20px -6px 0;
        padding: 10px 10px 10px 16px;
        border: 1px solid #dbe6f2;
        border-radius: 16px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 10px 30px rgba(10, 35, 80, .14);
        flex-wrap: nowrap;
        backdrop-filter: blur(10px);
    }

    body.admin-page .events-studio-form .account-form-actions span {
        flex: 1 1 auto;
        min-width: 0;
        color: #5a6f86;
        font-size: 13.5px;
        line-height: 1.3;
    }

    body.admin-page .events-studio-form .account-form-actions .admin-button {
        min-height: 48px;
        flex: 0 0 auto;
        padding-inline: 16px;
    }
}