/* Jeegly brand layer on top of Bootstrap 5.3 */
:root {
    --jg-primary: #1A7F64;
    --jg-primary-dark: #12614C;
    --jg-primary-soft: #E3F2EC;
    --jg-accent: #F5B83D;
    --jg-ink: #0F2A2E;
    --jg-muted: #5B6B6E;
    --jg-bg: #F6F8F7;
    --jg-surface: #fff;
    --jg-border: #e3e9e7;
    --jg-out: #8a9a9d;
    --jg-hero-glow: #d6efe6;
    --jg-focus: #7cc3ad;
    /* Dark band behind the dashboard nav, the site footer and the phone mock (dark in both themes) */
    --jg-deep: #0F2A2E;

    --bs-primary: var(--jg-primary);
    --bs-primary-rgb: 26, 127, 100;
    --bs-link-color: var(--jg-primary);
    --bs-link-color-rgb: 26, 127, 100;
    --bs-link-hover-color: var(--jg-primary-dark);
    --bs-link-hover-color-rgb: 18, 97, 76;
    --bs-body-color: var(--jg-ink);
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark theme (Settings > Theme, or the system's when "System Theme"): same names, dark values.
   Bootstrap 5.3 switches its own components on the same data-bs-theme attribute. */
:root[data-bs-theme="dark"] {
    --jg-primary: #26A07F;
    --jg-primary-dark: #1F8C6E;
    --jg-primary-soft: #1C3D35;
    --jg-ink: #E3ECEA;
    --jg-muted: #9AABAE;
    --jg-bg: #0F1716;
    --jg-surface: #18221F;
    --jg-border: #2E3D39;
    --jg-out: #5E6E71;
    --jg-hero-glow: #173a31;
    --jg-focus: #4FBF9B;
    --jg-deep: #0B1312;

    --bs-primary-rgb: 38, 160, 127;
    --bs-link-color-rgb: 38, 160, 127;
    --bs-link-hover-color: #4FBF9B;
    --bs-link-hover-color-rgb: 79, 191, 155;
    --bs-body-bg: var(--jg-surface);
    --bs-body-bg-rgb: 24, 34, 31;
    --bs-secondary-bg: #22302C;
    --bs-tertiary-bg: #1C2724;
    --bs-border-color: var(--jg-border);
}

/* Accent color (Settings > Accent Color; green above is the default): only the accent names change,
   each with a light and a dark value. Same tones as the apps' palettes (Theme.kt, Components.swift). */
:root[data-jg-accent="blue"] {
    --jg-primary: #1F6FA8;
    --jg-primary-dark: #16557F;
    --jg-primary-soft: #E3EEF7;
    --jg-hero-glow: #D6E6F3;
    --jg-focus: #82B4D9;
    --bs-primary-rgb: 31, 111, 168;
    --bs-link-color-rgb: 31, 111, 168;
    --bs-link-hover-color: var(--jg-primary-dark);
    --bs-link-hover-color-rgb: 22, 85, 127;
}
:root[data-jg-accent="blue"][data-bs-theme="dark"] {
    --jg-primary: #3B8FD0;
    --jg-primary-dark: #2F7AB5;
    --jg-primary-soft: #1C3349;
    --jg-hero-glow: #172C40;
    --jg-focus: #6AAEE0;
    --bs-primary-rgb: 59, 143, 208;
    --bs-link-color-rgb: 59, 143, 208;
    --bs-link-hover-color: #6AAEE0;
    --bs-link-hover-color-rgb: 106, 174, 224;
}
:root[data-jg-accent="orange"] {
    --jg-primary: #B5602A;
    --jg-primary-dark: #8C4A20;
    --jg-primary-soft: #F7EBE2;
    --jg-hero-glow: #F3DFD1;
    --jg-focus: #DFA982;
    --bs-primary-rgb: 181, 96, 42;
    --bs-link-color-rgb: 181, 96, 42;
    --bs-link-hover-color: var(--jg-primary-dark);
    --bs-link-hover-color-rgb: 140, 74, 32;
}
:root[data-jg-accent="orange"][data-bs-theme="dark"] {
    --jg-primary: #CC7434;
    --jg-primary-dark: #B3632A;
    --jg-primary-soft: #45301F;
    --jg-hero-glow: #3D2A1B;
    --jg-focus: #E8A06B;
    --bs-primary-rgb: 204, 116, 52;
    --bs-link-color-rgb: 204, 116, 52;
    --bs-link-hover-color: #E8A06B;
    --bs-link-hover-color-rgb: 232, 160, 107;
}
:root[data-jg-accent="yellow"] {
    --jg-primary: #937510;
    --jg-primary-dark: #6F580B;
    --jg-primary-soft: #F6F0DA;
    --jg-hero-glow: #EFE5C0;
    --jg-focus: #D0BB6D;
    --bs-primary-rgb: 147, 117, 16;
    --bs-link-color-rgb: 147, 117, 16;
    --bs-link-hover-color: var(--jg-primary-dark);
    --bs-link-hover-color-rgb: 111, 88, 11;
}
:root[data-jg-accent="yellow"][data-bs-theme="dark"] {
    --jg-primary: #B08C1E;
    --jg-primary-dark: #977818;
    --jg-primary-soft: #3D3519;
    --jg-hero-glow: #362F16;
    --jg-focus: #DDBE5A;
    --bs-primary-rgb: 176, 140, 30;
    --bs-link-color-rgb: 176, 140, 30;
    --bs-link-hover-color: #DDBE5A;
    --bs-link-hover-color-rgb: 221, 190, 90;
}
:root[data-jg-accent="purple"] {
    --jg-primary: #6B4FA8;
    --jg-primary-dark: #513B80;
    --jg-primary-soft: #EDE8F6;
    --jg-hero-glow: #E2DBF1;
    --jg-focus: #AD9AD6;
    --bs-primary-rgb: 107, 79, 168;
    --bs-link-color-rgb: 107, 79, 168;
    --bs-link-hover-color: var(--jg-primary-dark);
    --bs-link-hover-color-rgb: 81, 59, 128;
}
:root[data-jg-accent="purple"][data-bs-theme="dark"] {
    --jg-primary: #8C6FD0;
    --jg-primary-dark: #7A5DBD;
    --jg-primary-soft: #2E2547;
    --jg-hero-glow: #2A2140;
    --jg-focus: #AA94DE;
    --bs-primary-rgb: 140, 111, 208;
    --bs-link-color-rgb: 140, 111, 208;
    --bs-link-hover-color: #AA94DE;
    --bs-link-hover-color-rgb: 170, 148, 222;
}
:root[data-jg-accent="gray"] {
    --jg-primary: #56676A;
    --jg-primary-dark: #404E50;
    --jg-primary-soft: #E8EDED;
    --jg-hero-glow: #DFE5E5;
    --jg-focus: #A3B0B2;
    --bs-primary-rgb: 86, 103, 106;
    --bs-link-color-rgb: 86, 103, 106;
    --bs-link-hover-color: var(--jg-primary-dark);
    --bs-link-hover-color-rgb: 64, 78, 80;
}
:root[data-jg-accent="gray"][data-bs-theme="dark"] {
    --jg-primary: #7A8A8D;
    --jg-primary-dark: #687779;
    --jg-primary-soft: #2A3335;
    --jg-hero-glow: #262E30;
    --jg-focus: #A9B6B8;
    --bs-primary-rgb: 122, 138, 141;
    --bs-link-color-rgb: 122, 138, 141;
    --bs-link-hover-color: #A9B6B8;
    --bs-link-hover-color-rgb: 169, 182, 184;
}

body { background: var(--jg-bg); }

h1, h2, h3, h4, h5, .brand-font { font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif); letter-spacing: -0.01em; }

.btn-primary {
    --bs-btn-bg: var(--jg-primary);
    --bs-btn-border-color: var(--jg-primary);
    --bs-btn-hover-bg: var(--jg-primary-dark);
    --bs-btn-hover-border-color: var(--jg-primary-dark);
    --bs-btn-active-bg: var(--jg-primary-dark);
    --bs-btn-active-border-color: var(--jg-primary-dark);
    --bs-btn-disabled-bg: var(--jg-primary);
    --bs-btn-disabled-border-color: var(--jg-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--jg-primary);
    --bs-btn-border-color: var(--jg-primary);
    --bs-btn-hover-bg: var(--jg-primary);
    --bs-btn-hover-border-color: var(--jg-primary);
    --bs-btn-active-bg: var(--jg-primary-dark);
    --bs-btn-active-border-color: var(--jg-primary-dark);
}
.text-primary { color: var(--jg-primary) !important; }
.bg-primary-soft { background: var(--jg-primary-soft); }
.accent-swatch { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.form-control:focus, .form-select:focus { border-color: var(--jg-focus); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2); }
.form-check-input:checked { background-color: var(--jg-primary); border-color: var(--jg-primary); }

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--jg-ink); text-decoration: none; font-weight: 800; font-size: 1.35rem; }
.brand img { width: 34px; height: 34px; }
.brand:hover { color: var(--jg-ink); }

/* Public site */
.site-nav { background: var(--jg-surface); border-bottom: 1px solid var(--jg-border); }
.hero { background: radial-gradient(1200px 500px at 85% -10%, var(--jg-hero-glow) 0%, transparent 60%), var(--jg-bg); padding: 5rem 0 4rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
.hero .lead { color: var(--jg-muted); font-size: 1.2rem; max-width: 34rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--jg-primary); }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--jg-primary-soft); color: var(--jg-primary); font-size: 1.4rem; }
.audience-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: var(--jg-surface); border: 1px solid var(--jg-border); font-weight: 600; }
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--jg-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.phone-mock { max-width: 300px; margin: 0 auto; border-radius: 36px; background: var(--jg-deep); padding: 14px; box-shadow: 0 30px 60px -20px rgba(15, 42, 46, .45); }
.phone-mock .screen { background: var(--jg-surface); border-radius: 24px; padding: 1.25rem; min-height: 460px; }
.site-footer { background: var(--jg-deep); color: #c5d3d0; }
.site-footer a { color: #fff; }

/* Dashboard */
.app-nav { background: var(--jg-deep); }
.app-nav .nav-link { color: #c5d3d0; }
.app-nav .nav-link.active, .app-nav .nav-link:hover { color: #fff; }
.app-nav .brand { color: #fff; }
.stat-card .value { font-size: 2rem; font-weight: 800; line-height: 1; }
.card { border-color: var(--jg-border); }
.table > :not(caption) > * > * { vertical-align: middle; }
.badge-in { background: var(--jg-primary); }
.badge-out { background: var(--jg-out); }

/* QR codes (always dark on white, so scanners read them in the dark theme too) */
.qr-box { background: #fff; border-radius: 16px; padding: 12px; display: inline-block; border: 1px solid var(--jg-border); }
.qr-box svg { width: 100%; max-width: 280px; height: auto; display: block; }
.qr-svg .qr-light { fill: #fff; }
.qr-svg .qr-dark { fill: #000; }

/* Check-in console */
.checkin-row { cursor: pointer; }
.checkin-row.is-in { background: var(--jg-primary-soft); }
.scanner-view { position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; background: #000; border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.scanner-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-view::after { content: ""; position: absolute; inset: 18%; border: 4px solid var(--jg-accent, #F5B83D); border-radius: 16px; pointer-events: none; }