/* public/css/custom.css */

/* === THEME VARIABLE: GREEN SPACE === */
:root {
    /* Gradient เขียวเป็นหลัก */
    --main-gradient: linear-gradient(
        135deg,
        #fcffef 0%,   /* เขียวเข้ม */
        #edfbb1 35%,  /* เขียวสด */
        #bdd263 70%,  /* เขียวอ่อน */
        #326618 100%  /* เขียวพาสเทล */
    );

    --green-main: #15803d;      /* เขียวหลัก */
    --green-dark: #064e3b;      /* เขียวเข้ม */
    --green-soft: #bdd263;      /* เขียวสด */
    --green-bg-soft: #ecfdf3;   /* พื้นจาง ๆ */
    --cream-bg: #f3f4e7;
    --border-soft: #e5e7eb;
}

/* === GLOBAL FONT === */
* {
    font-family: "Kanit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* === BODY === */
body {
    background:
        radial-gradient(circle at 0% 0%, #feffff 0, transparent 45%),
        radial-gradient(circle at 100% 0%, #f9fffb 0, transparent 45%),
        linear-gradient(180deg, #f9fff7, #f3f4e7 40%, #f6fff9 100%);
    color: #111827;
}

/* === NAVBAR === */
.main-navbar {
    background: linear-gradient(90deg, #fbfdff, #f0f9f5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.main-navbar .navbar-brand span {
    color: #326618;
}

.main-navbar .nav-link {
    color: #326618;
}

.main-navbar .nav-link.active {
    color: #326618;
    font-weight: 600;
}

/* ปุ่ม login บน navbar */
.main-navbar .btn-light.btn-sm {
    background: #f9fafb;
    border: 1px solid rgba(209, 213, 219, 0.7);
    color: #064e3b !important;
    font-weight: 600;
    border-radius: 999px;
}

.main-navbar .btn-light.btn-sm:hover {
    background: #ffffff;
}

/* === HERO SECTION (หน้าแรก) === */
/* .hero-section {
    padding: 3rem 0 3.5rem;
    background-image: var(--main-gradient);
    color: #326618;
} */

.hero-section {
    padding: 3rem 0 3.5rem;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)) ,
        url('../img/cloud.png'),
        var(--main-gradient);
    background-size: cover, 100% auto, cover;
    background-position: center top, center top, center;
    background-repeat: no-repeat;
    color: #326618;
}


.hero-section .badge {
    background-color: rgba(236, 253, 245, 0.12);
    border: 1px solid rgba(209, 250, 229, 0.7);
    color: #8dc945;
}

.hero-section h1 {
    color: #326618;
}

.hero-section h1 span {
    color: #8dc945;
}

.hero-section p.lead {
    color: #326618;
}

.text-white-75 {
    color: rgba(241, 245, 249, 0.85) !important;
}
.text-white-50 {
    color: rgba(241, 245, 249, 0.6) !important;
}

/* จุดสถานะ (จุดเขียว ๆ) */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: #bdd263;
}

/* === Glass card (กล่องด้านขวา hero) === */
.glass-card {
    background: rgba(249, 250, 251, 0.96);
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.18);
    color: #111827;
}

.glass-card h5 {
    color: #064e3b;
}

.glass-card ul {
    color: #4b5563;
}
.glass-card .btn {
    background: linear-gradient(135deg,  #81c034, #4ca039, #26893e);
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 999px;
}

.glass-card .btn:hover {
    filter: brightness(1.05);
}

/* === SECTION TABLE === */
#competition-table {
    background: #f3f4e7;
}

/* การ์ด list ตารางแข่งขัน */
.card {
    border-radius: 1.25rem;
    border: 1px solid var(--border-soft);
    box-shadow: 0 12px 30px rgba(148, 163, 184, 0.25);
    background: #ffffff;
}

.card-header {
    border-bottom: 1px solid #e5e7eb;
}

.card-header h5 {
    color: #064e3b;
}

/* === DataTables === */
#tblCompetitions_wrapper .dataTables_filter input {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
}

#tblCompetitions_wrapper .dataTables_length select {
    border-radius: 999px;
    padding: 0.15rem 0.75rem;
    font-size: 0.9rem;
}

.table thead th {
    font-weight: 600;
}

/* header ของ table */
table.dataTable thead {
    background: linear-gradient(90deg, #dcfce7, #8dc945);
}
table.dataTable thead th {
    border-bottom: 1px solid #a7f3d0;
    color: #064e3b;
    font-weight: 600;
}
table.dataTable tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

/* ปุ่มสมัครเข้าร่วม */
.btn-join {
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    background: linear-gradient(135deg, #81c034, #4ca039, #26893e);
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.btn-join:hover {
    filter: brightness(1.08);
}

/* Badge สถานะ */
.badge.bg-danger {
    background-color: #dc2626 !important;
}
.badge.bg-warning {
    background-color: #facc15 !important;
    color: #78350f !important;
}

/* สำหรับ badge แสดงจำนวน */
.badge.bg-primary-subtle,
.badge.bg-primary {
    background-color: #dcfce7 !important;
    color: #14532d !important;
}

/* === Footer === */
footer {
    background: #fcffef;
    color: #dcfce7;
    border-top: 1px solid rgba(209, 250, 229, 0.4);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }
}


/* === SPSM MASCOT HERO === */
.mascot-hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mascot-hero-img {
    max-width: 230px;
    width: 100%;
    height: auto;
    /* ให้โทนภาพเด้งขึ้นจากพื้นหลัง */
    filter:
        drop-shadow(0 14px 30px rgba(15, 23, 42, 0.35))
        drop-shadow(0 0 0 3px rgba(16, 185, 129, 0.35));
    border-radius: 999px; /* ช่วยให้ขอบวงกลมเนียน */
}

/* แท็กไลน์ใต้มาสคอต */
.bg-mascot-pill {
    background: rgba(22, 163, 74, 0.12);
    color: #052e16;
    border: 1px solid rgba(22, 163, 74, 0.4);
}

/* ปุ่มหลักใน hero (แทน .btn-light เดิม) */
.btn-hero-primary {
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #81c034, #4ca039, #26893e);
    border: none;
    color: #ffffff;
    font-weight: 600;
}

.btn-hero-primary:hover {
    filter: brightness(1.06);
    color: #052e16;
}

/* ขยับ spacing เล็กน้อยบนจอใหญ่ */
@media (min-width: 992px) {
    .mascot-hero-wrapper {
        margin-bottom: 1.25rem;
    }
}

/* .title-green {
    font-size: 5.8rem;
    font-weight: 900;
    background: linear-gradient(90deg, #81c034, #4ca039, #26893e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
} */

.title-green {

    font-size: 5.4rem; /* เล็กกว่าตัวหลัก */
    font-weight: 800;
    background: linear-gradient(90deg, #81c034, #4ca039, #26893e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ข้อความรองแบบ GREEN SPACE แต่เล็กกว่า */
.title-green-sub {
    font-size: 4.0rem;
    font-weight: 900;
    background: linear-gradient(90deg, #81c034, #4ca039, #26893e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    display: block;
    margin-bottom: .5rem;
}