/* ── Layout ──────────────────────────────────────────────────────────────── */

#wrapper {
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

#sidebar {
    width: 240px;
    min-width: 240px;
    height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
    transition: width 0.2s ease;
}

#sidebar .nav-link {
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

#sidebar .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.08);
}

#sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    font-weight: 500;
}

/* ── Main content ────────────────────────────────────────────────────────── */

#main-content {
    min-width: 0;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
    border-radius: 10px;
}

.card-header {
    border-radius: 10px 10px 0 0 !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn-sm {
    font-size: 0.8125rem;
}

/* ── Login page ──────────────────────────────────────────────────────────── */

body.bg-dark .card {
    border-radius: 12px;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.page-link {
    border-radius: 6px !important;
    min-width: 32px;
    text-align: center;
    font-size: 0.8125rem;
}

/* ── Input groups (login icons) ──────────────────────────────────────────── */

.input-group .input-group-text + .form-control {
    border-left: none;
}

.input-group .form-control:focus {
    box-shadow: none;
    border-color: #86b7fe;
}

.input-group:focus-within .input-group-text {
    border-color: #86b7fe;
}

/* ── Header Image Uploader ───────────────────────────────────────────────── */

.header-image-uploader #hiuDropZone:hover {
    background: rgba(13, 110, 253, 0.04);
}

.header-image-uploader #hiuDropZone.drag-over {
    background: rgba(13, 110, 253, 0.08);
    border-color: #0d6efd !important;
}

/* ── Responsive sidebar ──────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    #sidebar {
        width: 0;
        min-width: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1045;
    }

    #sidebar.show {
        width: 240px;
        min-width: 240px;
        overflow-y: auto;
    }

    #main-content {
        width: 100%;
    }
}

/* ── Feature Badges ──────────────────────────────────────────────────────── */

.feature-badge {
    display:         inline-flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    font-size:       11px;
    font-weight:     700;
    line-height:     1.2;
    text-align:      center;
    flex-shrink:     0;
}
.feature-badge--sm { width: 36px; height: 36px; font-size: 10px; }

.feature-badge--feat-blue        { background-color: #cfe2ff; color: #084298; }
.feature-badge--feat-green-light { background-color: #d4edba; color: #3a6015; }
.feature-badge--feat-red         { background-color: #f8d7da; color: #842029; }
.feature-badge--feat-brown       { background-color: #ede0d4; color: #6d3a1f; }
.feature-badge--feat-green-dark  { background-color: #a8d5b5; color: #1a4731; }

/* Feature toggle buttons — checked state colours */
#feat_free:checked        + label { background-color: #cfe2ff; border-color: #84b6f7; color: #084298; }
#feat_outdoor:checked     + label { background-color: #d4edba; border-color: #9cc86a; color: #3a6015; }
#feat_chinese:checked     + label { background-color: #f8d7da; border-color: #f1a9af; color: #842029; }
#feat_art:checked         + label { background-color: #ede0d4; border-color: #c9a98b; color: #6d3a1f; }
#feat_combinable:checked  + label { background-color: #a8d5b5; border-color: #6ab88a; color: #1a4731; }

/* Language Badges (single-row pill) */
.lang-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         3px 10px;
    border-radius:   20px;
    font-size:       11px;
    font-weight:     700;
    white-space:     nowrap;
}
.lang-badge--lang-orange { background-color: #fde68a; color: #78350f; }
.lang-badge--lang-purple { background-color: #ddd6fe; color: #4c1d95; }
.lang-badge--lang-teal   { background-color: #a5f3fc; color: #164e63; }

/* Language toggle buttons — checked state colours */
#lang_cantonese:checked + label { background-color: #fde68a; border-color: #f59e0b; color: #78350f; }
#lang_english:checked   + label { background-color: #ddd6fe; border-color: #8b5cf6; color: #4c1d95; }
#lang_mandarin:checked  + label { background-color: #a5f3fc; border-color: #06b6d4; color: #164e63; }

/* Audience Badges */
.lang-badge--aud-pink   { background-color: #fbcfe8; color: #9d174d; }
.lang-badge--aud-orange { background-color: #fed7aa; color: #7c2d12; }
.lang-badge--aud-lime   { background-color: #d9f99d; color: #365314; }
.lang-badge--aud-sky    { background-color: #bae6fd; color: #075985; }
.lang-badge--aud-purple { background-color: #e9d5ff; color: #6b21a8; }

/* Session Duration Badges */
.lang-badge--dur-rose   { background-color: #fca5a5; color: #7f1d1d; }
.lang-badge--dur-teal   { background-color: #5eead4; color: #134e4a; }
.lang-badge--dur-gold   { background-color: #fcd34d; color: #78350f; }
.lang-badge--dur-orange { background-color: #fb923c; color: #431407; }
.lang-badge--dur-indigo { background-color: #818cf8; color: #1e1b4b; }

/* Session Duration toggle buttons — checked state colours */
#dur_1h:checked   + label { background-color: #fca5a5; border-color: #ef4444; color: #7f1d1d; }
#dur_1h5:checked  + label { background-color: #5eead4; border-color: #14b8a6; color: #134e4a; }
#dur_2h:checked   + label { background-color: #fcd34d; border-color: #f59e0b; color: #78350f; }
#dur_half:checked + label { background-color: #fb923c; border-color: #f97316; color: #431407; }
#dur_full:checked + label { background-color: #818cf8; border-color: #6366f1; color: #1e1b4b; }

/* Audience toggle buttons — checked state colours */
#aud_kindergarten:checked + label { background-color: #fbcfe8; border-color: #ec4899; color: #9d174d; }
#aud_primary_lo:checked   + label { background-color: #fed7aa; border-color: #f97316; color: #7c2d12; }
#aud_primary_hi:checked   + label { background-color: #d9f99d; border-color: #84cc16; color: #365314; }
#aud_secondary_lo:checked + label { background-color: #bae6fd; border-color: #0ea5e9; color: #075985; }
#aud_secondary_hi:checked + label { background-color: #e9d5ff; border-color: #a855f7; color: #6b21a8; }