/* ── Camp dark mode (toggle via html[data-theme="dark"]) ─────────────────── */

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] {
    --primary-color: #6ab356;
    --accent-color: rgb(120, 160, 210);
    --box: #232b23;
    --light: #232b23;
    --dark: #e8ece8;
    --camp-bg: #0f1410;
    --camp-bg-muted: #1a211a;
    --camp-surface: #232b23;
    --camp-surface-raised: #2a332a;
    --camp-border: rgba(255, 255, 255, 0.1);
    --camp-text: #e8ece8;
    --camp-text-muted: #9caaa0;
    --camp-input-bg: #1e261e;
    --camp-input-border: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] body {
    background-color: var(--camp-bg-muted);
    color: var(--camp-text);
}

html[data-theme="dark"] body::-webkit-scrollbar-thumb {
    background-color: #3d5c36;
}

html[data-theme="dark"] .noAStyle {
    color: var(--camp-text);
}

html[data-theme="dark"] .main-box,
html[data-theme="dark"] .page-box,
html[data-theme="dark"] .dev-box {
    background-color: var(--camp-surface);
    color: var(--camp-text);
}

html[data-theme="dark"] .main-content {
    background: var(--camp-bg-muted);
    color: var(--camp-text);
}

/* Bootstrap surfaces */
html[data-theme="dark"] .bg-light {
    background-color: var(--camp-surface) !important;
    color: var(--camp-text);
}

html[data-theme="dark"] .bg-white {
    background-color: var(--camp-surface) !important;
    color: var(--camp-text);
}

html[data-theme="dark"] .card {
    background-color: var(--camp-surface);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--camp-surface-raised);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--camp-surface);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--camp-surface-raised);
    color: var(--camp-text);
}

html[data-theme="dark"] .table {
    --bs-table-bg: var(--camp-surface);
    --bs-table-color: var(--camp-text);
    --bs-table-border-color: var(--camp-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(106, 179, 86, 0.08);
}

html[data-theme="dark"] .table-light {
    --bs-table-bg: var(--camp-surface-raised);
    --bs-table-color: var(--camp-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
    background-color: var(--camp-input-bg);
    border-color: var(--camp-input-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #252e25;
    border-color: rgba(106, 179, 86, 0.55);
    color: var(--camp-text);
    box-shadow: 0 0 0 0.2rem rgba(106, 179, 86, 0.15);
}

html[data-theme="dark"] .form-control::placeholder {
    color: #7a887a;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--camp-surface-raised);
    border-color: var(--camp-input-border);
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .modal-content {
    background-color: var(--camp-surface);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--camp-border);
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--camp-surface);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--camp-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(106, 179, 86, 0.12);
    color: var(--camp-text);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .btn-outline-secondary {
    color: var(--camp-text-muted);
    border-color: var(--camp-input-border);
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--camp-surface-raised);
    color: var(--camp-text);
}

html[data-theme="dark"] .btn-light {
    background-color: var(--camp-surface-raised);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .alert-secondary {
    background-color: var(--camp-surface-raised);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] hr {
    border-color: var(--camp-border);
    opacity: 1;
}

html[data-theme="dark"] .text-muted {
    color: var(--camp-text-muted) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
    color: var(--camp-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--camp-border) !important;
}

/* Page tabs */
html[data-theme="dark"] .page-tabs-bar {
    background: linear-gradient(180deg, #222a22 0%, #1e261e 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .page-tab {
    background: rgba(35, 43, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .page-tab--active {
    background: var(--camp-surface-raised);
    border-color: rgba(106, 179, 86, 0.55);
}

html[data-theme="dark"] .page-tab__link {
    color: #c5d4c5;
}

html[data-theme="dark"] .page-tab--active .page-tab__link {
    color: #e8ece8;
}

html[data-theme="dark"] .page-tabs__clear {
    background: var(--camp-surface);
    border-color: rgba(255, 255, 255, 0.12);
    color: #c5d4c5;
}

html[data-theme="dark"] .page-tabs__clear:hover {
    background: var(--camp-surface-raised);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}

html[data-theme="dark"] .page-tab__close {
    color: rgba(255, 255, 255, 0.45);
}

/* Portal loader */
html[data-theme="dark"] .loader-portal {
    background: rgba(15, 20, 16, 0.92);
}

html[data-theme="dark"] .loader-portal__title {
    color: #c5d4c5;
}

/* Policy pages */
html[data-theme="dark"] .privacy-card {
    background: var(--camp-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .privacy-card strong {
    color: #d4e6d4;
}

html[data-theme="dark"] .privacy-card p,
html[data-theme="dark"] .info-block {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .info-block {
    background: var(--camp-surface-raised);
}

html[data-theme="dark"] .section-header {
    border-bottom-color: var(--camp-border);
}

html[data-theme="dark"] .data-list li {
    background: var(--camp-surface-raised);
    color: var(--camp-text-muted);
}

/* QR profiles */
html[data-theme="dark"] .qr-card {
    background: var(--camp-surface);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-section-title,
html[data-theme="dark"] .qr-field-value,
html[data-theme="dark"] .qr-glv-name,
html[data-theme="dark"] .qr-slot-name {
    color: var(--camp-text);
}

html[data-theme="dark"] .qr-field,
html[data-theme="dark"] .qr-med-item,
html[data-theme="dark"] .qr-schedule-block,
html[data-theme="dark"] .qr-schedule-day,
html[data-theme="dark"] .qr-glv-card {
    background: var(--camp-surface-raised);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-schedule-day-title {
    color: #a3d98a;
    border-bottom-color: var(--camp-border);
}

html[data-theme="dark"] .qr-schedule-day-title--adult {
    color: #cbd5e1;
}

html[data-theme="dark"] .qr-slot {
    border-left-color: rgba(106, 179, 86, 0.35);
}

html[data-theme="dark"] .qr-slot--adult {
    border-left-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .qr-slot--custom {
    border-left-color: rgba(59, 130, 246, 0.35);
}

html[data-theme="dark"] .qr-slot::before {
    border-color: var(--camp-surface-raised);
}

html[data-theme="dark"] .qr-slot-time {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-slot-tag {
    background: var(--camp-surface);
    border-color: var(--camp-border);
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-slot-tag--loc {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.35);
}

html[data-theme="dark"] .qr-slot-tag--grp {
    background: rgba(106, 179, 86, 0.18);
    color: #a3d98a;
    border-color: rgba(106, 179, 86, 0.35);
}

html[data-theme="dark"] .qr-emergency {
    background: var(--camp-surface);
    border-color: rgba(248, 113, 113, 0.35);
}

html[data-theme="dark"] .qr-emergency-head {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-bottom-color: rgba(248, 113, 113, 0.25);
}

html[data-theme="dark"] .qr-emergency-body {
    background: var(--camp-surface);
}

html[data-theme="dark"] .qr-emergency-note {
    background: var(--camp-bg-muted);
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-emergency-contact {
    background: var(--camp-surface-raised);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-emergency-contact .num {
    color: var(--camp-text);
}

html[data-theme="dark"] .qr-emergency-contact small {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-glv-sub,
html[data-theme="dark"] .qr-field-label,
html[data-theme="dark"] .qr-empty-state {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-empty-state i {
    color: var(--camp-text-muted);
    opacity: 0.6;
}

html[data-theme="dark"] .qr-section-icon--green { background: rgba(106, 179, 86, 0.18); color: #a3d98a; }
html[data-theme="dark"] .qr-section-icon--blue { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
html[data-theme="dark"] .qr-section-icon--red { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html[data-theme="dark"] .qr-section-icon--amber { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html[data-theme="dark"] .qr-section-icon--slate { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }

/* QR profile — Account & security (My Profile) */
html[data-theme="dark"] .qr-account-intro {
    background: var(--camp-surface-raised);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-account-intro-text {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-account-intro-text strong {
    color: #a3d98a;
}

html[data-theme="dark"] .qr-security-panel {
    background: var(--camp-surface-raised);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-security-panel-head {
    background: var(--camp-surface);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-security-panel-icon--password {
    background: rgba(106, 179, 86, 0.18);
    color: #a3d98a;
}

html[data-theme="dark"] .qr-security-panel-icon--twofa {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

html[data-theme="dark"] .qr-security-panel-icon--passkey {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

html[data-theme="dark"] .qr-security-panel-title {
    color: var(--camp-text);
}

html[data-theme="dark"] .qr-security-panel-desc {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-security-callout {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fcd34d;
}

html[data-theme="dark"] .qr-security-callout--danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html[data-theme="dark"] .qr-security-field label {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-security-field input {
    background: var(--camp-input-bg);
    border-color: var(--camp-input-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .qr-security-field input:focus {
    border-color: rgba(106, 179, 86, 0.55);
    box-shadow: 0 0 0 3px rgba(106, 179, 86, 0.15);
}

html[data-theme="dark"] .qr-security-meta {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-btn-security--outline {
    background: var(--camp-surface);
    color: var(--camp-text);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-btn-security--danger {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}

html[data-theme="dark"] .qr-btn-security--danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
}

html[data-theme="dark"] .qr-qr-reveal {
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-qr-box {
    background: var(--camp-surface);
    border-color: var(--camp-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .qr-qr-secret {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-qr-secret code {
    background: rgba(106, 179, 86, 0.15);
    color: #a3d98a;
}

html[data-theme="dark"] .qr-passkey-item {
    background: var(--camp-surface);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .qr-passkey-item-icon {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

html[data-theme="dark"] .qr-passkey-item-name {
    color: var(--camp-text);
}

html[data-theme="dark"] .qr-passkey-item-meta {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-passkey-empty {
    background: var(--camp-bg-muted);
    border-color: var(--camp-border);
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .qr-passkey-empty i {
    color: var(--camp-text-muted);
    opacity: 0.5;
}

html[data-theme="dark"] .qr-security-field label span[style*="color:#aaa"] {
    color: var(--camp-text-muted) !important;
}

html[data-theme="dark"] .login-page {
    background: var(--camp-bg-muted) !important;
}

html[data-theme="dark"] .login-form-wrap {
    background: var(--camp-surface) !important;
}

html[data-theme="dark"] .login-form-wrap .form-label,
html[data-theme="dark"] .login-form-wrap h2,
html[data-theme="dark"] .login-form-wrap p {
    color: var(--camp-text);
}

html[data-theme="dark"] .login-auth-tab {
    background: var(--camp-input-bg) !important;
    border-color: var(--camp-input-border) !important;
    color: var(--camp-text-muted) !important;
}

html[data-theme="dark"] .login-auth-tab.active {
    background: rgba(106, 179, 86, 0.15) !important;
    border-color: rgba(106, 179, 86, 0.45) !important;
    color: #c5e6b8 !important;
}

html[data-theme="dark"] .login-step-dot {
    background: var(--camp-input-border) !important;
}

html[data-theme="dark"] .login-step-dot.active {
    background: var(--primary-color) !important;
}

html[data-theme="dark"] .login-step-dot.done {
    background: #4ade80 !important;
}

/* Knowledge base */
html[data-theme="dark"] .kb-search {
    background: var(--camp-input-bg);
    border-color: var(--camp-input-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .kb-nav-btn {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .kb-nav-btn:hover {
    background: var(--camp-surface-raised);
    color: var(--camp-text);
}

html[data-theme="dark"] .kb-nav-btn.active {
    background: rgba(106, 179, 86, 0.15);
    color: #c5e6b8;
}

html[data-theme="dark"] .kb-nav-pill {
    background: var(--camp-surface);
    border-color: var(--camp-border);
    color: #c5e6b8;
}

html[data-theme="dark"] .kb-section-head {
    border-bottom-color: var(--camp-border);
}

html[data-theme="dark"] .kb-section-head h2,
html[data-theme="dark"] .kb-article-title,
html[data-theme="dark"] .kb-faq-q {
    color: var(--camp-text);
}

html[data-theme="dark"] .kb-article-summary,
html[data-theme="dark"] .kb-faq-a,
html[data-theme="dark"] .kb-faq-title,
html[data-theme="dark"] .kb-nav-label {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .kb-article-btn,
html[data-theme="dark"] .kb-faq-item {
    background: var(--camp-surface);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .kb-faq-item[open] > .kb-faq-q,
html[data-theme="dark"] .kb-faq-q:hover {
    background: var(--camp-surface-raised);
}

html[data-theme="dark"] #kbArticleModal .modal-body {
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .kb-support {
    background: var(--camp-surface);
    border-color: var(--camp-border);
}

html[data-theme="dark"] .kb-level {
    background: var(--camp-surface-raised);
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .kb-level--0 {
    background: rgba(106, 179, 86, 0.15);
    color: #a3d98a;
}

/* Attendance hub & common page patterns */
html[data-theme="dark"] .att-card,
html[data-theme="dark"] .slot-card,
html[data-theme="dark"] .section-zone,
html[data-theme="dark"] .field-card,
html[data-theme="dark"] .url-box,
html[data-theme="dark"] .empty-slot {
    background: var(--camp-surface);
    border-color: var(--camp-border);
    color: var(--camp-text);
}

html[data-theme="dark"] .att-card.complete {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}

html[data-theme="dark"] .slot-time-pill {
    background: var(--camp-surface-raised);
    border-color: var(--camp-border);
    color: #c5e6b8;
}

html[data-theme="dark"] .empty-slot {
    background: var(--camp-surface-raised);
    color: var(--camp-text-muted);
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--camp-text);
}

/* Navbar theme toggle */
.nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    line-height: 1;
}

.nav-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.nav-theme-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.nav-theme-toggle--bar {
    display: none;
    margin-left: auto;
    margin-right: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 1.05rem;
}

@media (max-width: 767.98px) {
    .nav-theme-toggle--desktop {
        display: none !important;
    }

    .nav-theme-toggle--bar {
        display: inline-flex;
    }
}

@media (min-width: 768px) {
    .nav-theme-toggle--bar {
        display: none !important;
    }
}