/* ================================
   CDC THEME
   The brand palette (--brand-50..950) is written by App.razor from
   options.primarycolor. These are only the fallbacks used before options load (blue).
   ================================ */
:root {
    --brand-50: 239 246 255;
    --brand-100: 219 234 254;
    --brand-200: 191 219 254;
    --brand-300: 147 197 253;
    --brand-400: 96 165 250;
    --brand-500: 59 130 246;
    --brand-600: 29 78 216;
    --brand-700: 30 64 175;
    --brand-800: 30 58 138;
    --brand-900: 23 37 84;
    --brand-950: 15 23 42;
}

/* Toggle switch used on the account pages */
.vc-toggle {
    position: relative;
    display: inline-flex;
    height: 1.5rem;
    width: 2.75rem;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
    background-color: #e5e7eb;
    transition: background-color 0.2s ease-in-out;
}
.vc-toggle.on { background-color: rgb(var(--brand-600)); }
.vc-toggle .knob {
    pointer-events: none;
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
    margin: 0.125rem;
    border-radius: 9999px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform 0.2s ease-in-out;
}
.vc-toggle.on .knob { transform: translateX(1.25rem); }

/* ================================
   DARK MODE
   Applied when <body> has the `dark` class (per-user preference). The markup uses light
   utilities, so dark mode is a set of overrides scoped under `.dark` (same approach as Vecinara).
   ================================ */
body.dark {
    background-color: #0f172a;
    color: #e2e8f0;
}
.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-gray-50 { background-color: #111827 !important; }
.dark .bg-gray-100 { background-color: #1f2937 !important; }
.dark .bg-gray-200 { background-color: #334155 !important; }
.dark .bg-brand-50 { background-color: #24303f !important; }

.dark .hover\:bg-gray-50:hover { background-color: #1f2937 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #263244 !important; }

.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-gray-400 { color: #64748b !important; }
.dark .text-black { color: #f8fafc !important; }

.dark .stroke-gray-900,
.dark .stroke-gray-800 { stroke: #cbd5e1 !important; }

.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #475569 !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }

.dark input,
.dark select,
.dark textarea {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
.dark ::placeholder { color: #64748b !important; }
.dark input[type="date"],
.dark input[type="color"] { color-scheme: dark; }

/* The organization logo is an uploaded image, often dark artwork on transparency; give it a light
   backdrop in dark mode so it stays visible. */
.dark .app-logo img[src^="data:"] {
    background-color: #ffffff;
    padding: 0.5rem;
    border-radius: 0.375rem;
}

/* ================================
   REGISTRATION PAGE (booth tablet)
   No double-tap zoom or text-selection callouts while visitors tap through the form.
   ================================ */
.kiosk {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.kiosk button,
.kiosk label {
    -webkit-user-select: none;
    user-select: none;
}