@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
    --scms-primary: #2366BF;
    --scms-primary-dark: #1B4E94;
    --scms-navy: #1E293B;
    --scms-success: #16A34A;
    --scms-warning: #F59E0B;
    --scms-danger: #DC2626;
    --scms-bg: #F8FAFC;
    --scms-text: #1E293B;
    --scms-sidebar-bg: #0F172A;
    --scms-sidebar-text: #CBD5E1;
    --scms-sidebar-muted: #64748B;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Sarabun', sans-serif;
    background-color: var(--scms-bg);
    color: var(--scms-text);
}

.btn-primary {
    background-color: var(--scms-primary);
    border-color: var(--scms-primary);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(30, 41, 59, .08);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: .35rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-right: .35rem;
}

.breadcrumb-btn {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: .4rem;
    background-color: #EFF6FF;
    color: var(--scms-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.3;
    transition: background-color .15s ease, color .15s ease;
}

a.breadcrumb-btn:hover {
    background-color: #DBEAFE;
    color: var(--scms-primary-dark);
}

.breadcrumb-btn--active {
    background-color: #F1F5F9;
    color: var(--scms-text);
    cursor: default;
}

.badge-status-draft { background-color: #94a3b8; }
.badge-status-pending { background-color: var(--scms-warning); }
.badge-status-approved { background-color: var(--scms-success); }
.badge-status-rejected { background-color: var(--scms-danger); }
.badge-status-running { background-color: var(--scms-primary); }
.badge-status-finished { background-color: #7c3aed; }
.badge-status-published { background-color: #15803d; }

/* Clickable person name — a selected student/teacher tag in the registration form,
   a judge's name in the judge-assignment table, etc. — that opens that record's
   edit modal in place. */
.person-name-link {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.app-sidebar,
.app-sidebar-offcanvas {
    min-height: 100vh;
    background-color: var(--scms-sidebar-bg);
    border-right: 0;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
}

.app-sidebar .border-bottom,
.app-sidebar-offcanvas .border-bottom {
    border-color: rgba(255, 255, 255, .08) !important;
}

.sidebar-brand {
    color: #fff !important;
    text-decoration: none;
}

.sidebar-group-label {
    color: var(--scms-sidebar-muted);
    letter-spacing: .05em;
    font-size: .72rem;
}

.sidebar-nav-link {
    color: var(--scms-sidebar-text) !important;
    border-radius: .5rem;
    margin: .1rem .75rem;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff !important;
}

.sidebar-nav-link.active {
    background-color: var(--scms-primary);
    color: #fff !important;
}

.sidebar-nav-link--disabled {
    color: #475569;
    cursor: not-allowed;
    border-radius: .5rem;
    margin: .1rem .75rem;
    font-size: .92rem;
}

.sidebar-nav-link--disabled > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sidebar-nav-link--disabled .badge {
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, .08);
    color: var(--scms-sidebar-muted);
    border-color: transparent;
}

.app-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.public-navbar-brand {
    background-color: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.public-navbar-menu {
    background-color: rgba(226, 232, 240, .92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.public-navbar-menu .nav-link {
    white-space: nowrap;
    padding: .5rem .9rem !important;
    border-radius: .5rem;
    transition: background-color .15s ease, color .15s ease;
}

.public-navbar-menu .nav-link:hover,
.public-navbar-menu .nav-link:focus-visible {
    background-color: rgba(35, 102, 191, .1);
    color: var(--scms-primary);
}

.public-navbar-menu .nav-link:active {
    background-color: rgba(35, 102, 191, .18);
}

.public-navbar-menu .nav-link.active {
    background-color: rgba(35, 102, 191, .12);
}

.brand-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--scms-text);
    line-height: 1.3;
}

.brand-subtitle {
    font-size: .85rem;
    color: var(--scms-sidebar-muted, #64748b);
    line-height: 1.3;
}

.brand-logo {
    height: 40px;
    max-width: 100%;
}

.public-navbar-brand .navbar-brand {
    white-space: normal;
}

@media (max-width: 575.98px) {
    .public-navbar-brand .navbar-brand { flex: 1 1 100%; min-width: 0; }
    .public-navbar-brand .navbar-brand > span { min-width: 0; }
    .brand-logo { height: 32px; }
    .brand-title { font-size: 1rem; overflow-wrap: break-word; }
    .brand-subtitle { font-size: .75rem; overflow-wrap: break-word; }
    .public-navbar-brand .btn-primary { flex: 0 0 auto; }
}

/* Homepage hero carousel (public/assets/js has no JS of its own here —
   Bootstrap's bundled carousel JS drives it) */
.hero-carousel {
    background-color: #1e293b;
}

.hero-slide {
    position: relative;
    height: 460px;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    display: flex;
    align-items: flex-end;
}

.hero-slide--noimage {
    background-image: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .55) 0%, rgba(15, 23, 42, .25) 45%, rgba(15, 23, 42, 0) 75%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem clamp(1.25rem, 5vw, 4rem);
    max-width: 760px;
    color: #fff;
}

.hero-badge {
    display: inline-block;
    background-color: var(--scms-danger);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: .35rem;
    margin-bottom: .6rem;
}

.hero-eyebrow {
    color: #4ADE80;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .4rem;
}

.hero-title {
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.3;
    margin-bottom: .5rem;
}

.hero-desc {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1rem;
    max-width: 640px;
}

.hero-meta-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.hero-meta {
    color: rgba(255, 255, 255, .85);
    font-size: .875rem;
}

.hero-cta {
    background-color: var(--scms-danger);
    border-color: var(--scms-danger);
    color: #fff;
    font-weight: 600;
}

.hero-cta:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: auto;
    top: 1.25rem;
    bottom: auto;
    height: 2.25rem;
    opacity: 1;
}

.hero-carousel .carousel-control-next { right: 1.25rem; left: auto; }
.hero-carousel .carousel-control-prev { right: 4rem; left: auto; }

.hero-arrow {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.hero-carousel .carousel-indicators {
    margin-bottom: .85rem;
}

.hero-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .5);
    border: 0;
    opacity: 1;
}

.hero-carousel .carousel-indicators .active {
    background-color: var(--scms-primary);
    width: 22px;
    border-radius: 4px;
}

@media (max-width: 767.98px) {
    .hero-slide { height: 380px; }
    .hero-title { font-size: 1.35rem; }
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next { top: .75rem; }
}

/* Breaks an element out of Bootstrap's centered .container to full
   viewport width, without changing the public layout's DOM structure. */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Homepage blocks are admin-reorderable (views/backend/home-blocks) — when a
   full-bleed block (e.g. the hero carousel) ends up first, cancel <main>'s
   own top padding so it still sits flush under the nav like before. Self-
   adjusting: stops applying automatically if a boxed block is reordered first. */
main.container.py-4 > .full-bleed:first-child {
    margin-top: -1.5rem;
}

/* News / PR section (homepage teaser + full /news listing) */
.news-section {
    background-color: #F1F5F9;
}

.news-pill-badge {
    display: inline-block;
    background-color: #DBEAFE;
    color: var(--scms-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .3rem .9rem;
    border-radius: 999px;
}

.news-card {
    background-color: #fff;
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(30, 41, 59, .08);
    transition: box-shadow .15s ease, transform .15s ease;
}

.news-card:hover {
    box-shadow: 0 10px 25px rgba(30, 41, 59, .12);
    transform: translateY(-2px);
}

.news-card-image {
    display: block;
    position: relative;
    height: 170px;
    background-color: #cbd5e1;
    background-size: cover;
    background-position: center;
    padding: .75rem;
}

.news-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    padding: .25rem .6rem;
    border-radius: .35rem;
}

.news-badge--navy { background-color: var(--scms-navy); }
.news-badge--green { background-color: var(--scms-success); }
.news-badge--yellow { background-color: var(--scms-warning); }
.news-badge--blue { background-color: var(--scms-primary); }

.news-date-pill {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background-color: rgba(15, 23, 42, .75);
    color: #fff;
    font-size: .7rem;
    padding: .25rem .6rem;
    border-radius: .35rem;
}

.news-card-body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card-title {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-title a {
    color: var(--scms-text);
    text-decoration: none;
}

.news-card-title a:hover {
    color: var(--scms-primary);
}

.news-card-excerpt {
    color: #64748b;
    font-size: .875rem;
    margin-bottom: 1rem;
    flex: 1;
}

.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.news-view-count {
    color: #94a3b8;
    font-size: .8rem;
}

.news-read-more {
    background-color: var(--scms-primary);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    border-radius: 999px;
    padding: .35rem 1rem;
}

.news-read-more:hover {
    background-color: #1d4ed8;
    color: #fff;
}

.news-view-all {
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: .55rem 1.5rem;
    font-weight: 600;
}

.news-view-all:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

/* Top utility bar (public site only) */
.utility-bar {
    background-color: #1e3a8a;
    color: rgba(255, 255, 255, .9);
    font-size: .8rem;
}

.utility-bar .container {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.utility-bar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.utility-btn {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .9);
    font-size: .8rem;
    padding: .15rem .5rem;
    border-radius: .3rem;
}

.utility-btn:hover {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.utility-btn-plus {
    font-size: .65rem;
    vertical-align: super;
}

.utility-bar .dropdown-menu {
    font-size: .85rem;
}

@media (max-width: 575.98px) {
    .utility-bar-left { display: none; }
}

/* Accessibility font-size toggle (public/assets/js/accessibility.js) */
html.fs-level-1 { font-size: 108%; }
html.fs-level-2 { font-size: 118%; }

/* Footer stat bar + footer (views/public/layout.php) */
.stat-bar {
    background-color: var(--scms-primary);
    border-radius: .75rem;
    display: flex;
    overflow: hidden;
}

.stat-bar-item {
    flex: 1;
    text-align: center;
    color: #fff;
    padding: 2rem 1rem;
    position: relative;
}

.stat-bar-item + .stat-bar-item {
    border-left: 1px solid rgba(255, 255, 255, .25);
}

.stat-bar-item i {
    font-size: 1.5rem;
    opacity: .85;
    margin-bottom: .5rem;
    display: block;
}

.stat-bar-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-bar-label {
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
}

/* Homepage quick-link shortcut cards (ค้นหากิจกรรม/ตารางแข่งขัน/ผลการแข่งขัน/สรุปเหรียญ) */
.quick-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(30, 41, 59, .08);
    padding: 1.75rem 1rem;
    text-decoration: none;
    color: var(--scms-text);
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}

.quick-link-card:hover {
    box-shadow: 0 6px 16px rgba(30, 41, 59, .12);
    transform: translateY(-2px);
    color: var(--scms-text);
}

.quick-link-icon {
    width: 56px;
    height: 56px;
    border-radius: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .9rem;
}

.quick-link-icon--primary { background: #DBEAFE; color: var(--scms-primary); }
.quick-link-icon--success { background: #DCFCE7; color: var(--scms-success); }
.quick-link-icon--danger  { background: #FEE2E2; color: var(--scms-danger); }
.quick-link-icon--warning { background: #FEF3C7; color: var(--scms-warning); }

.quick-link-label {
    font-weight: 600;
    text-align: center;
}

.site-footer {
    background-color: var(--scms-navy);
    color: rgba(255, 255, 255, .85);
}

.footer-heading {
    color: #fff;
    font-weight: 700;
    border-left: 3px solid var(--scms-warning);
    padding-left: .6rem;
    margin-bottom: 1rem;
}

.footer-text {
    font-size: .875rem;
    color: rgba(255, 255, 255, .75);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: .6rem;
}

.footer-links a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: .875rem;
}

/* Rich-text ข่าวประกาศ content, authored via the TinyMCE editor in the admin. */
.announcement-content img {
    max-width: 100%;
    height: auto;
}

.announcement-content table {
    max-width: 100%;
    border-collapse: collapse;
}

.announcement-content table td,
.announcement-content table th {
    border: 1px solid #e2e8f0;
    padding: .4rem .6rem;
}

/* Homepage CUSTOM block content (views/backend/home-blocks, TinyMCE-authored) — same treatment as .announcement-content. */
.custom-block-content img {
    max-width: 100%;
    height: auto;
}

.custom-block-content table {
    max-width: 100%;
    border-collapse: collapse;
}

.custom-block-content table td,
.custom-block-content table th {
    border: 1px solid #e2e8f0;
    padding: .4rem .6rem;
}

.footer-links a i {
    font-size: .7rem;
    margin-right: .4rem;
    color: var(--scms-warning);
}

.footer-links a:hover {
    color: #fff;
}

.footer-login-btn {
    background-color: var(--scms-warning);
    color: var(--scms-navy);
    font-weight: 700;
}

.footer-login-btn:hover {
    background-color: #d97706;
    color: var(--scms-navy);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, .2);
    padding: .9rem 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .65);
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: #fff;
}

@media (max-width: 575.98px) {
    .stat-bar { flex-direction: column; }
    .stat-bar-item + .stat-bar-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
}

.policy-page {
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Cookie consent banner (public/assets/js/cookie-consent.js) */
.cookie-consent-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    box-shadow: 0 10px 30px rgba(30, 41, 59, .18);
    padding: 1.25rem 1.5rem;
}

.cookie-consent-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-consent-text {
    flex: 1 1 420px;
    color: var(--scms-text);
    font-size: .9rem;
}

.cookie-consent-title {
    font-weight: 700;
    margin-bottom: .35rem;
}

.cookie-consent-text a {
    color: var(--scms-primary);
}

.cookie-consent-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .6rem;
}

.cookie-consent-btn-all {
    background-color: var(--scms-primary);
    border-color: var(--scms-primary);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.cookie-consent-btn-all:hover {
    background-color: var(--scms-primary-dark);
    border-color: var(--scms-primary-dark);
    color: #fff;
}

.cookie-consent-btn-necessary {
    background-color: #F1F5F9;
    border-color: #e2e8f0;
    color: var(--scms-text);
    white-space: nowrap;
}

.cookie-consent-btn-necessary:hover {
    background-color: #e2e8f0;
}

@media (max-width: 575.98px) {
    .cookie-consent-banner { left: .5rem; right: .5rem; bottom: .5rem; padding: 1rem; }
    .cookie-consent-actions { width: 100%; }
    .cookie-consent-actions .btn { flex: 1 1 0; }
}