/* ============================================================
   SURFINGJOE GALLERY THEME SYSTEM
   - Day/Night via body[data-theme]
   - Seasonal accents via body.{season}-season
============================================================ */

/* ============================================================
   INDEX
   1) Tokens (Light/Dark + Seasonal)
   2) Base Layout (body, typography, background layer)
   3) Hero / Panels
   4) Navbar (gallery)
   5) Global Text + Links
   6) Gallery Grid + Cards (ONE source of truth)
   7) Photo Detail Page
   8) Breadcrumbs
   9) User Dashboard Header
  10) Footer
  11) Utilities (Back-to-top, etc.)
  12) FORMS 
============================================================ */


/* ============================================================
   1) TOKENS (DEFAULT = LIGHT)
============================================================ */
:root {
    --sj-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sj-font-display: "Playfair Display", "Times New Roman", serif;

    /* Neutrals / surfaces */
    --sj-bg: #f8f9fa;             /* page background */
    --sj-surface: #ffffff;        /* cards, panels */
    --sj-surface-soft: #f1f3f5;
    --sj-text: #212529;
    --sj-muted: #6c757d;
    --sj-border: #dde2e7;

    /* Accent */
    --sj-accent: #0d6efd;
    --sj-accent-soft: rgba(13, 110, 253, 0.12);

    /* Nav + overlays */
    --sj-nav-bg: rgba(248, 249, 250, 0.92);
    --sj-bg-overlay: rgba(0, 0, 0, 0.3);

    /* Typographic tokens */
    --sj-body-color: #111827;
    --sj-secondary-color: #0b3fa6;

    /* Footer defaults (so it always has something) */
    --footer-bg-color: #f0f0f0;
    --footer-text-color: #333333;
}

/* -------------------------------
   DAY MODE (LIGHT)
-------------------------------- */
body[data-theme="light"] {
    --sj-bg: #f8f9fa;
    --sj-surface: #ffffff;
    --sj-surface-soft: #f1f3f5;
    --sj-text: #212529;
    --sj-muted: #6c757d;
    --sj-border: #dde2e7;

    --sj-nav-bg: rgba(248, 249, 250, 0.92);
    --sj-bg-overlay: rgba(0, 0, 0, 0.3);

    --sj-body-color: #111827;
    --sj-secondary-color: #0b3fa6;
}

/* -------------------------------
   NIGHT MODE (DARK)
-------------------------------- */
body[data-theme="dark"] {
    --sj-bg: #05070b;
    --sj-surface: #111827;
    --sj-surface-soft: #020617;
    --sj-text: #e5e7eb;
    --sj-muted: #9ca3af;
    --sj-border: #9fc3e7;

    --sj-accent: #60a5fa;
    --sj-accent-soft: rgba(96, 165, 250, 0.16);

    --sj-nav-bg: rgba(15, 23, 42, 0.92);
    --sj-bg-overlay: rgba(255, 255, 255, 0.12);

    --sj-body-color: #e5e7eb;
    --sj-secondary-color: #9ca3af;
}

/* ============================================================
   SEASONAL PALETTES
============================================================ */

/* SPRING */
body.spring-season {
    --sj-accent: #284d30;
    --sj-accent-soft: rgba(15, 118, 110, 0.16);
    --footer-bg-color: #f0f0f0;
    --footer-text-color: #333333;

    background-image: radial-gradient(circle at top left, rgba(34, 197, 94, 0.08), transparent 60%);
}
body.spring-season[data-theme="dark"] {
    --footer-bg-color: rgba(30, 30, 30, 0.9);
    --footer-text-color: #81C784;
    --sj-accent: #8bf0a1;
    --sj-accent-soft: rgba(30, 30, 30, 0.16);
}

/* SUMMER */
body.summer-season {
    --sj-accent: #0ea5e9;
    --sj-accent-soft: rgba(14, 165, 233, 0.18);
    --footer-bg-color: #f0f0f0;
    --footer-text-color: #333333;

    background-image: radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 60%);
}
body.summer-season[data-theme="dark"] {
    --footer-bg-color: rgba(30, 30, 30, 0.9);
    --footer-text-color: #FFEB3B;
}

/* FALL */
body.fall-season {
    --sj-accent: #d97706;
    --sj-accent-soft: rgba(217, 119, 6, 0.18);
    --footer-bg-color: #f0f0f0;
    --footer-text-color: #333333;

    background-image: radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.10), transparent 60%);
}
body.fall-season[data-theme="dark"] {
    --footer-bg-color: rgba(30, 30, 30, 0.9);
    --footer-text-color: #FFB300;
}

/* WINTER */
body.winter-season {
    --sj-accent: #38bdf8;
    --sj-accent-soft: rgba(56, 189, 248, 0.2);
    --footer-bg-color: rgba(30, 30, 30, 0.9);
    --footer-text-color: #b2ebf2;

    background-image: radial-gradient(circle at top, rgba(56, 189, 248, 0.07), transparent 55%);
}
body.winter-season[data-theme="dark"] {
    --footer-bg-color: rgba(30, 30, 30, 0.9);
    --footer-text-color: #b2ebf2;
}

/* HALLOWEEN */
body.halloween-season {
    --sj-accent: #f97316;
    --sj-accent-soft: rgba(249, 115, 22, 0.22);

    --footer-bg-color: rgba(94, 28, 154, 0.9);
    --footer-text-color: #f0f0f0;

    background-image:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.18), transparent 55%);
}
body.halloween-season[data-theme="dark"] {
    --footer-bg-color: rgba(94, 28, 154, 0.95);
    --footer-text-color: #f0f0f0;
}

/* CHRISTMAS */
body.christmas-season {
    --sj-accent: #dc2626;
    --sj-accent-soft: rgba(220, 38, 38, 0.18);
    --sj-font-display: "Mountains of Christmas", cursive;

    --footer-bg-color: rgba(39, 174, 96, 0.85);
    --footer-text-color: #f0f0f0;

    background-image:
        radial-gradient(circle at top right, rgba(220, 38, 38, 0.14), transparent 55%),
        radial-gradient(circle at bottom left, rgba(22, 163, 74, 0.14), transparent 55%);
}
body.christmas-season[data-theme="dark"] {
    --footer-bg-color: rgba(39, 174, 96, 0.95);
    --footer-text-color: #f0f0f0;
}

/* Optional: darker base in dark mode for event seasons */
body[data-theme="dark"].halloween-season {
    --sj-bg: #050308;
    --sj-surface: #11111a;
}
body[data-theme="dark"].christmas-season {
    --sj-bg: #05070a;
    --sj-surface: #101827;
}


/* ============================================================
   2) BASE LAYOUT (body, typography, background layer)
============================================================ */
body {
    font-family: var(--sj-font-body);
    color: var(--sj-body-color);

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    background: transparent;
    position: relative;
    z-index: 0;
}

/* Background layer: uses --main-bg-image set elsewhere (calendar.css) */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image: var(--main-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: translateZ(0);
    will-change: transform;
}

/* Overlay */
.page-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--sj-bg-overlay, rgba(0, 0, 0, 0.4));
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 768px) {
    .page-bg { background-size: cover; }
}

/* Headings */
h1, h2, h3, h4, .collection-title {
    font-family: var(--sj-font-display);
}

/* Paragraph contrast */
p { color: var(--sj-body-color); }
p.text-muted,
p.text-body-secondary { opacity: 0.85; }


/* ============================================================
   3) HERO / PANELS
============================================================ */
.hero {
    background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
    color: #fff;
    padding: 4rem 0;
    text-align: center;
}
.hero h1 { font-weight: 700; }

.hero-section {
    background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
    color: white;
}
.hero-title {
    font-family: 'Cormorant Upright', serif;
    font-size: 5rem;
    color: var(--sj-accent)
    
}
.subtitle {
    font-size: 1.5rem;
    color: var(--sj-accent)
}
.tab {
    margin-left: 40px;
}



/* Glass panel (fallback tokens so it doesn't go transparent by accident) */
.glass-panel {

    margin-left: auto;
	margin-right: auto;
    padding: 25px;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    background-color: var(--card-bg-color);
	border: 1px solid var(--glass-border-color);
    border: 1px solid var(--sj-border);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,.25);
    border-radius: 20px;
}

.glass-panel-2 {
	max-width: 75%;
    margin-left: auto;
	margin-right: auto;
    padding: 25px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background-color: var(--card-bg-color);
	/* border: 1px solid var(--glass-border-color); */
	box-shadow: 0 8px 32px 0 rgba(0,0,0,.25);
    border: 1px solid var(--glass-border-color);
    border: 1px solid var(--sj-border);
	border-radius: 20px;
}

/* ============================================================
   4) NAVBAR (gallery)
============================================================ */
.sj-gallery-navbar,
.navbar {
    background-color: var(--sj-nav-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: var(--sj-border) !important;
}

/* Bootstrap cards + gallery cards pick up surface colors */
.card {
    background-color: var(--sj-surface) !important;
    border-color: var(--sj-border) !important;
}

/* Navbar branding & links */
.sj-gallery-navbar .navbar-brand {
    color: var(--sj-text);
}
.sj-gallery-navbar .navbar-brand:hover {
    color: var(--sj-accent);
}

.sj-gallery-navbar .nav-link {
    color: var(--sj-muted);
}
.sj-gallery-navbar .nav-link:hover,
.sj-gallery-navbar .nav-link:focus {
    color: var(--sj-accent);
}
.sj-gallery-navbar .nav-link.active {
    color: var(--sj-accent);
    font-weight: 600;
}

/* Search width */
.sj-gallery-navbar .form-control[type="search"] {
    min-width: 240px;
}

/* Theme toggle button */
#theme-toggle.btn-outline-secondary {
    border-color: var(--sj-border);
    color: var(--sj-muted);
}
#theme-toggle.btn-outline-secondary:hover {
    border-color: var(--sj-accent);
    color: var(--sj-accent);
}

/* Seasonal select */
#seasonal-select {
    max-width: 160px;
    background-color: var(--sj-surface);
    color: var(--sj-text);
    border-color: var(--sj-border);
}


/* ============================================================
   5) GLOBAL TEXT + LINKS
============================================================ */
.collection-meta {
    color: var(--sj-secondary-color);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.text-body-secondary,
.small.text-muted {
    color: var(--sj-muted) !important;
}

/* Global link color */
a,
a:hover,
a:focus {
    color: var(--sj-accent);
}


/* ============================================================
   6) GALLERY GRID + CARDS (ONE SOURCE OF TRUTH)
============================================================ */

/* Thumbnail helper */
.gallery-thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: .25rem;
}

/* If you use .gallery-item somewhere else, keep it, but theme-aware */
.gallery-item {
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: 16px;
    padding: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

/* ✅ SINGLE gallery-card definition */
.gallery-card {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;

    background-color: var(--sj-surface);
    border: 1px solid var(--sj-border);

    box-shadow: 0 4px 6px rgba(0,0,0,0.10);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.glass-card {
    flex: 0 1 auto;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background-color: var(--card-bg-color);
	/* border: 1px solid var(--glass-border-color); */
    border: 1px solid var(--glass-border-color);
    border: 1px solid var(--sj-border);
	box-shadow: 0 8px 32px 0 rgba(0,0,0,.25);
	border-radius: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 1rem;
}
/* Image inside card */
.gallery-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-card:hover img {
    transform: scale(1.03);
}
.card-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sj-body-color);
    margin-bottom: .5rem;
}
.photo-title {
    

    color: var(--sj-body-color);
    margin-bottom: .5rem;
}
.card-info {
    font-size: 2rem;
    font-weight: 200;
    color: var(--sj-body-color);
    margin-bottom: .5rem;
}

/* Info panel */
.photo-info {
    padding: 1rem;
    background: var(--sj-surface);
    color: var(--sj-text);
    border-top: 1px solid var(--sj-border);
    position: relative;
    z-index: 2;
}

.photo-title {
    font-weight: 700;
    margin-bottom: 0.2rem;
    font-size: 1.1rem;
}

.photo-caption {
    font-size: 0.9rem;
    color: var(--sj-muted);
    margin-bottom: 0.5rem;
}

.photo-stats {
    font-size: 0.85rem;
    display: flex;
    gap: 15px;
    color: var(--sj-muted);
}
.photo-stats i { margin-right: 5px; }
.photo-stats .fa-heart { color: #dc3545; }
.photo-stats .fa-comment { color: var(--sj-accent); }

/* Desktop hover treatment (layered behavior only, not redefining the base card) */
@media (min-width: 992px) {
    .gallery-card {
        position: relative;
        box-shadow: none;
        margin-bottom: 0;
    }
    .gallery-card:hover {
        box-shadow: 0 10px 25px rgba(0,0,0,0.30);
    }

    .photo-info {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        background: linear-gradient(
            to top,
            rgba(0,0,0,0.90),
            rgba(0,0,0,0.60),
            transparent
        );

        color: #fff;
        border-top: none;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        pointer-events: none;
    }

    .photo-caption { color: #ddd; }
    .photo-stats { color: #fff; }

    .gallery-card:hover .photo-info {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PhotoSwipe caption */
.pswp__custom-caption {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    text-align: center;
    pointer-events: none;
}
.pswp__custom-caption strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

/* Like button */
.sj-like-button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: transform 0.1s ease-in-out, box-shadow 0.15s ease-in-out;
}
.sj-like-button .sj-like-icon {
    font-size: 1rem;
    line-height: 1;
}
.sj-like-button .sj-like-count {
    font-variant-numeric: tabular-nums;
}
.sj-like-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.sj-like-button.sj-liked {
    font-weight: 600;
}

/* Collection / user names */
.collection-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sj-accent);
    margin-bottom: .5rem;
}

.user-name {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--sj-text);
}


/* ============================================================
   7) PHOTO DETAIL PAGE
============================================================ */
.photo-detail-wrapper { max-width: 960px; }

.photo-detail-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--sj-accent);
}

.photo-detail-figure {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.5rem;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-detail-img {
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.photo-detail-caption {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
    border: 1px solid #555;
}

/* =========================================
   Comment actions ("…") button, theme-aware
   ========================================= */

/* Base: shape + spacing */
.sj-comment-actions-btn {
    border: 1px solid transparent;
    border-radius: 999px; /* pill */
    padding: 0.25rem 0.55rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Subtle elevation so it doesn’t melt into glass panels */
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* Icon sizing */
.sj-comment-actions-icon {
    font-size: 1rem;
}

/* Focus visibility */
.sj-comment-actions-btn:focus,
.sj-comment-actions-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,.15), 0 0 0 0.35rem rgba(0,0,0,.2);
}

/* Hover/active feedback */
.sj-comment-actions-btn:hover {
    transform: translateY(-0.5px);
}
.sj-comment-actions-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 1px rgba(0,0,0,.12);
}

/* -----------------------------------------
   LIGHT THEME: dark button, light dots
   (use whichever theme selector you have)
   ----------------------------------------- */

:root[data-bs-theme="light"] .sj-comment-actions-btn,
body.theme-light .sj-comment-actions-btn {
    background: rgba(25, 25, 28, 0.90);
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-bs-theme="light"] .sj-comment-actions-icon,
body.theme-light .sj-comment-actions-icon {
    color: rgba(255, 255, 255, 0.95);
}

:root[data-bs-theme="light"] .sj-comment-actions-btn:hover,
body.theme-light .sj-comment-actions-btn:hover {
    background: rgba(25, 25, 28, 1);
}

/* -----------------------------------------
   DARK THEME: light button, dark dots
   ----------------------------------------- */

:root[data-bs-theme="dark"] .sj-comment-actions-btn,
body.theme-dark .sj-comment-actions-btn {
    background: rgba(245, 245, 248, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
}

:root[data-bs-theme="dark"] .sj-comment-actions-icon,
body.theme-dark .sj-comment-actions-icon {
    color: rgba(20, 20, 22, 0.92);
}

:root[data-bs-theme="dark"] .sj-comment-actions-btn:hover,
body.theme-dark .sj-comment-actions-btn:hover {
    background: rgba(255, 255, 255, 0.98);
}

/* ============================================================
   8) BREADCRUMBS
============================================================ */
.gallery-breadcrumb {
    font-size: 0.85rem;
    color: var(--sj-muted);
}

.gallery-breadcrumb a {
    text-decoration: none;
    color: var(--sj-accent);
}
.gallery-breadcrumb a:hover {
    text-decoration: underline;
}
.gallery-breadcrumb .active-text {
    color: var(--sj-text);
}


/* ============================================================
   9) USER DASHBOARD HEADER
============================================================ */
.sj-user-dashboard-card {
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
}
body[data-theme="dark"] .sj-user-dashboard-card {
    background-color: rgba(15, 23, 42, 0.95);
}

.sj-user-dashboard-name {
    color: var(--sj-body-color);
    font-size: 1.5rem;
}
.sj-user-dashboard-email {
    color: var(--sj-secondary-color);
}

.sj-dashboard-public-links-label { color: var(--sj-secondary-color); }

.sj-dashboard-public-link {
    color: var(--sj-accent);
    text-decoration: none;
    font-weight: 500;
}
.sj-dashboard-public-link:hover,
.sj-dashboard-public-link:focus {
    text-decoration: underline;
}
.sj-dashboard-public-link-separator {
    color: var(--sj-secondary-color);
}

.sj-user-dashboard-header .form-control.form-control-sm {
    max-width: 220px;
}

body[data-theme="dark"] .sj-user-dashboard-card .nav-pills .nav-link {
    color: var(--sj-body-color);
}
body[data-theme="dark"] .sj-user-dashboard-card .nav-pills .nav-link.active {
    background-color: var(--sj-accent);
}
.sj-dashboard-btn {
    background-color: var(--sj-panel-bg);
    color: var(--sj-text);
    border: 1px solid var(--sj-border);
}

.sj-dashboard-btn.active {
    background-color: var(--sj-accent);
    color: #fff;
    border-color: var(--sj-accent);
}

/* ============================================================
  10) FOOTER
============================================================ */
.footer-container {
    position: static;
    padding: 1rem;
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
    border-top: 1px solid var(--sj-border);
    z-index: 1010;
    width: 100%;
}

footer {
    border-top: 1px solid var(--sj-border);
    margin-top: 3rem;
    padding: 2rem 0;
    font-family: var(--sj-font-display);
    background-color: var(--footer-bg-color);
    font-size: .95rem;
}

.footer-text { color: var(--footer-text-color); }

.footer-logo-wrapper { flex-shrink: 0; margin-right: 20px; }
.footer-logo { height: 40px; max-width: 120px; }


/* ============================================================
  11) UTILITIES (Back-to-top, etc.)
============================================================ */
.to-top-btn {
    position: fixed;
    bottom: 95px;
    right: 20px;
    z-index: 999;

    background-color: var(--footer-bg-color);
    color: var(--sj-text);
    border: 1px solid var(--sj-border);
    border-radius: 50%;

    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;

    display: none;
    opacity: 0;
    transition: opacity .3s, background-color .3s;
}

.to-top-btn:hover {
    background-color: color-mix(in srgb, var(--sj-accent) 20%, var(--footer-bg-color));
}

/* ============================================================
  12) FORMS (theme-aware, Bootstrap-friendly)
  - Uses --sj-* tokens so day/night + seasonal accents apply
============================================================ */

.sj-form-card {
    background-color: var(--sj-surface) !important;
    border: 1px solid var(--sj-border) !important;
    border-radius: 1rem;
}

.sj-form-card .card-body {
    color: var(--sj-text);
}

/* Labels */
.sj-form .form-label {
    color: var(--sj-text);
}

/* Help text */
.sj-form .form-text,
.sj-form .text-body-secondary {
    color: var(--sj-muted) !important;
}

/* Inputs / selects / textareas */
.sj-form .form-control,
.sj-form .form-select {
    background-color: var(--sj-surface-soft);
    color: var(--sj-text);
    border: 1px solid var(--sj-border);
}

.sj-form .form-control::placeholder {
    color: color-mix(in srgb, var(--sj-muted) 75%, transparent);
}

/* Focus ring = accent, but soft */
.sj-form .form-control:focus,
.sj-form .form-select:focus,
.sj-form .form-check-input:focus {
    border-color: var(--sj-accent);
    box-shadow: 0 0 0 .2rem var(--sj-accent-soft);
    outline: 0;
}

/* File input (Bootstrap uses same .form-control) */
.sj-form input[type="file"].form-control {
    padding: .275rem .5rem;
}

/* Checkbox list container */
.sj-form .sj-checklist {
    background-color: var(--sj-surface-soft);
    border: 1px solid var(--sj-border);
    border-radius: .75rem;
}

/* Checkbox + label colors */
.sj-form .form-check-label {
    color: var(--sj-text);
}

.sj-form .form-check-input {
    border-color: var(--sj-border);
    background-color: var(--sj-surface);
}

.sj-form .form-check-input:checked {
    background-color: var(--sj-accent);
    border-color: var(--sj-accent);
}

/* Validation colors remain Bootstrap-friendly, but readable in dark mode */
body[data-theme="dark"] .sj-form .text-danger {
    color: #fca5a5 !important;
}

/* Optional: make small muted links readable in dark mode */
body[data-theme="dark"] .sj-form a.text-muted {
    color: color-mix(in srgb, var(--sj-muted) 90%, white) !important;
}

/* Buttons: keep Bootstrap palette, but ensure outline-secondary fits theme */
body[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--sj-border);
    color: var(--sj-muted);
}
body[data-theme="dark"] .btn-outline-secondary:hover {
    border-color: var(--sj-accent);
    color: var(--sj-accent);
}