/* WAiMATE brand tokens — the one place the product's colours are defined.
 *
 * These are the values the Flutter app already ships in
 * `design/theme-tokens.json`, so web and mobile are the same product:
 * Waimate cyan #00BCD0, deep-teal ink #0B3D43, warm cream #FAF7EF.
 *
 * They are published under the `--wa-*` names the app already uses in 55
 * templates (332 references to --wa-primary alone), so including this file
 * rebrands those screens without touching them. A template that redefines
 * `--wa-primary` in its own `:root` opts *out* of the brand — there were
 * five different "primary" colours across the app before this file
 * (a near-miss cyan, WhatsApp green, teal, and two blues). Don't add a
 * sixth: if a screen needs a colour, add it here.
 *
 * Contrast, measured against the surfaces they are used on: ink on cream
 * 11.1:1, secondary text on cream 5.5:1, ink on cyan 5.9:1 — AA or better.
 */

:root {
    /* Brand */
    --wa-primary: #00BCD0;
    --wa-primary-hover: #0097AD;
    --wa-primary-dark: #0097AD;
    --wa-primary-edge: #00788C;      /* the darker face under a 3D control */
    --wa-primary-contrast: #04333B;  /* text that sits on top of --wa-primary */
    --wa-secondary: #54D9DF;
    --wa-accent: #E6F1EE;
    --wa-primary-soft: rgba(0, 188, 208, .12);

    /* Canvas and surfaces */
    --wa-bg: #FAF7EF;
    --wa-background: #FAF7EF;        /* alias: several screens use this name */
    --wa-surface: #FFFFFF;
    --wa-surface-alt: #F3F7F5;
    --wa-surface-hover: #EDF6F5;
    --wa-border: #D6E4E1;
    --wa-outline: #BBD1CD;

    /* Type */
    --wa-text: #0B3D43;
    --wa-text-secondary: #52696B;
    --wa-text-muted: #7A8E8F;
    --wa-heading-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;

    /* Status — kept from the shared token set so charts and badges agree */
    --wa-success: #10B981;
    --wa-error: #EF4444;
    --wa-danger: #EF4444;
    --wa-warning: #F59E0B;
    --wa-info: #00BCD0;

    /* Shape and motion */
    --wa-radius: 0.75rem;
    --wa-radius-lg: 1rem;
    --wa-radius-sm: 0.5rem;
    --wa-shadow: 0 1px 3px rgba(11, 61, 67, .10), 0 1px 2px rgba(11, 61, 67, .06);
    --wa-shadow-lg: 0 10px 24px -12px rgba(11, 61, 67, .35);
    --wa-transition: all .2s ease;
}

/* Bootstrap is the chassis on most signed-in screens; point its own
   variables at the brand so stock components (.btn-primary, .text-primary,
   .form-control focus rings, .nav-pills) stop being Bootstrap blue. */
:root {
    --bs-primary: #00BCD0;
    --bs-primary-rgb: 0, 188, 208;
    --bs-link-color: #00788C;
    --bs-link-color-rgb: 0, 120, 140;
    --bs-link-hover-color: #0B3D43;
    --bs-body-color: #0B3D43;
    --bs-body-bg: #FAF7EF;
    --bs-border-color: #D6E4E1;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    --bs-btn-bg: #00BCD0;
    --bs-btn-border-color: #00BCD0;
    --bs-btn-color: #04333B;
    --bs-btn-hover-bg: #0097AD;
    --bs-btn-hover-border-color: #0097AD;
    --bs-btn-hover-color: #04333B;
    --bs-btn-active-bg: #00788C;
    --bs-btn-active-border-color: #00788C;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: #9ADCE4;
    --bs-btn-disabled-border-color: #9ADCE4;
    --bs-btn-disabled-color: #04333B;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: #00788C;
    --bs-btn-border-color: #00BCD0;
    --bs-btn-hover-bg: #00BCD0;
    --bs-btn-hover-border-color: #00BCD0;
    --bs-btn-hover-color: #04333B;
    --bs-btn-active-bg: #0097AD;
    --bs-btn-active-border-color: #0097AD;
}

/* The rest of Bootstrap's button palette, retoned.
 *
 * Screens across this app reach for `.btn-success`, `.btn-warning` and
 * `.btn-info` as ordinary actions -- "Create Group" is green, "Archived" is
 * orange -- so a single toolbar can show four unrelated hues and none of
 * them means anything. Renaming the classes would mean editing ~130
 * templates and would still leave the next screen free to invent a fifth
 * colour, so the fix is here: point Bootstrap's palette at the brand's
 * status colours, and take `info` off cyan entirely, since cyan is what
 * `primary` means and two "primary-looking" buttons in a row is the thing
 * that makes a toolbar unreadable.
 *
 * Semantic use still works: a genuinely destructive `.btn-danger` is still
 * red, a genuine confirmation still green. They just belong to one family.
 */
.btn-success {
    --bs-btn-bg: #10B981; --bs-btn-border-color: #10B981; --bs-btn-color: #04312A;
    --bs-btn-hover-bg: #0E9F70; --bs-btn-hover-border-color: #0E9F70; --bs-btn-hover-color: #04312A;
    --bs-btn-active-bg: #0B7F5A; --bs-btn-active-border-color: #0B7F5A; --bs-btn-active-color: #FFFFFF;
}
.btn-warning {
    --bs-btn-bg: #F59E0B; --bs-btn-border-color: #F59E0B; --bs-btn-color: #3A2408;
    --bs-btn-hover-bg: #D98806; --bs-btn-hover-border-color: #D98806; --bs-btn-hover-color: #3A2408;
    --bs-btn-active-bg: #B87105; --bs-btn-active-border-color: #B87105; --bs-btn-active-color: #FFFFFF;
}
.btn-danger {
    --bs-btn-bg: #EF4444; --bs-btn-border-color: #EF4444; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #DC2626; --bs-btn-hover-border-color: #DC2626;
    --bs-btn-active-bg: #B91C1C; --bs-btn-active-border-color: #B91C1C;
}
/* `info` becomes the quiet tertiary action it is nearly always used as. */
.btn-info {
    --bs-btn-bg: #E6F1EE; --bs-btn-border-color: #BBD1CD; --bs-btn-color: #0B3D43;
    --bs-btn-hover-bg: #D9E9E5; --bs-btn-hover-border-color: #A7C3BE; --bs-btn-hover-color: #0B3D43;
    --bs-btn-active-bg: #C9DFDA; --bs-btn-active-border-color: #A7C3BE; --bs-btn-active-color: #0B3D43;
}
.btn-secondary {
    --bs-btn-bg: #52696B; --bs-btn-border-color: #52696B; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #42585A; --bs-btn-hover-border-color: #42585A;
    --bs-btn-active-bg: #34484A; --bs-btn-active-border-color: #34484A;
}
.btn-outline-secondary {
    --bs-btn-color: #52696B; --bs-btn-border-color: #BBD1CD;
    --bs-btn-hover-bg: #E6F1EE; --bs-btn-hover-border-color: #A7C3BE; --bs-btn-hover-color: #0B3D43;
    --bs-btn-active-bg: #D9E9E5; --bs-btn-active-border-color: #A7C3BE; --bs-btn-active-color: #0B3D43;
}
.btn-light {
    --bs-btn-bg: #F3F7F5; --bs-btn-border-color: #E1ECE9; --bs-btn-color: #0B3D43;
    --bs-btn-hover-bg: #E6F1EE; --bs-btn-hover-border-color: #CFE0DC; --bs-btn-hover-color: #0B3D43;
}

/* Badges follow the same palette, for the same reason. */
.badge.bg-success { background-color: #10B981 !important; color: #04312A; }
.badge.bg-warning { background-color: #F59E0B !important; color: #3A2408; }
.badge.bg-danger  { background-color: #EF4444 !important; color: #FFFFFF; }
.badge.bg-info    { background-color: #E6F1EE !important; color: #0B3D43; }
.badge.bg-secondary { background-color: #52696B !important; color: #FFFFFF; }

.bg-primary { background-color: #00BCD0 !important; }
.text-primary { color: #00788C !important; }
.border-primary { border-color: #00BCD0 !important; }

/* Bootstrap's default .badge.bg-primary puts white on cyan (2.9:1). */
.badge.bg-primary { color: #04333B; }

/* Headings carry the brand's display face wherever the app loads it. */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--wa-heading-font); letter-spacing: -0.01em; }

/* Focus is a brand surface too, and the one most often left as the browser
   default — which is invisible on cyan. */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #00788C;
    outline-offset: 2px;
}

/* The logo is a 3D object; it needs a little lift wherever it sits. */
.wm-logo { filter: drop-shadow(0 4px 8px rgba(0, 120, 140, .28)); }

/* ── Form controls ──────────────────────────────────────────────────────
   Bootstrap's defaults are 1px grey boxes with a blue glow. These bring
   every signed-in form up to the same spec as the sign-in pages: taller
   targets, brand focus ring, and an error state that is visible without
   relying on colour alone (the ring changes shape as well as hue). */
.form-control, .form-select {
    min-height: 46px;
    border-radius: 12px;
    border-color: var(--wa-border);
    color: var(--wa-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover { border-color: var(--wa-outline); }
.form-control:focus, .form-select:focus {
    border-color: var(--wa-primary);
    box-shadow: 0 0 0 4px rgba(0, 188, 208, .18);
}
.form-control::placeholder { color: #9FB2B3; }
.form-control.is-invalid, .form-select.is-invalid, [aria-invalid="true"].form-control {
    border-color: #EF4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
    background-image: none;  /* Bootstrap's inline warning glyph crowds the text */
}
.form-control.is-valid, .form-select.is-valid { border-color: var(--wa-success); background-image: none; }
.invalid-feedback { color: #B91C1C; font-size: .85rem; }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.form-text { color: var(--wa-text-secondary); }
.form-check-input { border-color: var(--wa-outline); }
.form-check-input:checked { background-color: var(--wa-primary); border-color: var(--wa-primary); }
.form-check-input:focus { border-color: var(--wa-primary); box-shadow: 0 0 0 4px rgba(0, 188, 208, .18); }
.input-group-text { background: var(--wa-surface-alt); border-color: var(--wa-border); color: var(--wa-text-secondary); }

.btn { border-radius: 12px; font-weight: 600; }
.btn-lg { border-radius: 14px; }

/* ── Cards and page furniture shared by the settings-style pages ─────── */
.wm-page { max-width: 780px; margin-inline: auto; }
.wm-page-head { margin-bottom: 1.5rem; }
.wm-page-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .35rem; }
.wm-page-head p { color: var(--wa-text-secondary); margin: 0; }
.wm-card {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--wa-shadow);
}
.wm-card + .wm-card { margin-top: 1.25rem; }
.wm-card-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 .35rem; }
.wm-card-sub { color: var(--wa-text-secondary); font-size: .95rem; margin: 0 0 1.25rem; }
.wm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.wm-status {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.wm-status.on { background: rgba(16, 185, 129, .14); color: #047857; }
.wm-status.off { background: rgba(245, 158, 11, .16); color: #92400E; }

/* ── Toasts ─────────────────────────────────────────────────────────────
   One implementation, used by server-rendered messages and by page scripts
   through `window.waimateToast(text, level)`. Before this, several screens
   each drew their own, and Django's `error` tag rendered as `alert-error`,
   which is not a Bootstrap class — so failures appeared as unstyled boxes,
   the least visible message on the page. */
.wm-toasts {
    position: fixed; top: calc(var(--navbar-height, 70px) + 12px); inset-inline-end: 20px;
    z-index: 1080; display: flex; flex-direction: column; gap: .6rem;
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.wm-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: .7rem;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-inline-start: 4px solid var(--wa-primary);
    border-radius: 12px; padding: .85rem 1rem;
    box-shadow: 0 12px 28px -12px rgba(11, 61, 67, .45);
    color: var(--wa-text); font-size: .94rem; line-height: 1.5;
    animation: wmToastIn .22s ease-out;
}
.wm-toast.is-leaving { animation: wmToastOut .18s ease-in forwards; }
.wm-toast .wm-toast-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.wm-toast .wm-toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wm-toast .wm-toast-close {
    flex: none; background: transparent; border: 0; cursor: pointer; padding: 2px;
    color: var(--wa-text-muted); border-radius: 6px; line-height: 1;
}
.wm-toast .wm-toast-close:hover { background: var(--wa-surface-hover); color: var(--wa-text); }
.wm-toast.is-success { border-inline-start-color: var(--wa-success); }
.wm-toast.is-success .wm-toast-icon { color: #047857; }
.wm-toast.is-error { border-inline-start-color: var(--wa-error); }
.wm-toast.is-error .wm-toast-icon { color: #B91C1C; }
.wm-toast.is-warning { border-inline-start-color: var(--wa-warning); }
.wm-toast.is-warning .wm-toast-icon { color: #92400E; }
.wm-toast.is-info .wm-toast-icon { color: var(--wa-primary-edge); }

@keyframes wmToastIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wmToastOut { to { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) {
    .wm-toast, .wm-toast.is-leaving { animation: none; }
}