/* EventCommand tenant theme.

   One palette for the whole product: the operator console at
   tenants.eventcommand.net and a tenant's own admin now read as the same
   application, so moving between them is not a change of software.

   Self-hosted rather than a CDN because a tenant's sign-in page should not
   tell a third party that someone is signing in, and should not go
   unstyled when that third party is down. Every colour lives here as a
   custom property: a view that needs the palette references the variable
   rather than repeating a hex, so the next reskin is this file alone. */
:root {
    --ec-navy: #0b2545;          /* chrome, primary action, links */
    --ec-navy-soft: #143a68;     /* hover on navy */
    --ec-red: #c8102e;           /* destructive only */
    --ec-bg: #f5f7fa;            /* page */
    --ec-surface: #ffffff;       /* cards, tables, inputs */
    --ec-surface-alt: #eef2f7;   /* table headers, wells, read-only fields */
    --ec-line: #dde3ec;          /* every border */
    --ec-ink: #16202f;           /* body text */
    --ec-muted: #5c6b80;         /* secondary text */
    --ec-green: #1e7d45;         /* success / checked in */
    --ec-amber: #b5730a;         /* waiting / caution */
    --ec-teal: #1b6ca8;          /* informational figures */
    --ec-focus: rgba(11, 37, 69, 0.25);

    /* Bootstrap's own tokens, so components we never touch inherit the
       palette instead of its defaults. */
    --bs-primary: var(--ec-navy);
    --bs-link-color: var(--ec-navy);
    --bs-link-hover-color: var(--ec-navy-soft);
    --bs-border-color: var(--ec-line);
    --bs-body-bg: var(--ec-bg);
    --bs-body-color: var(--ec-ink);
    --bs-secondary-color: var(--ec-muted);
}

body { background: var(--ec-bg); color: var(--ec-ink); }
a { color: var(--ec-navy); }
a:hover { color: var(--ec-navy-soft); }
.text-muted { color: var(--ec-muted) !important; }
hr { border-color: var(--ec-line); opacity: 1; }

/* ---------- admin chrome ---------- */
.sidebar {
    min-height: 100vh;
    background: var(--ec-navy);
    border-right: 1px solid var(--ec-navy);
}
.sidebar .nav-link {
    color: #cfd9e8;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    margin: 1px 0;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.sidebar .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.16); }
.sidebar .nav-link i { width: 24px; }
.sidebar .nav-link.text-danger { color: #ff9aa8 !important; }
.sidebar hr { border-color: rgba(255, 255, 255, 0.18); }
.sidebar .text-muted { color: #9fb0c7 !important; }
.sidebar-brand { color: #fff; font-weight: 600; }
.sidebar-brand span.accent { color: #ff5a72; }
.main-content { min-height: 100vh; background: var(--ec-bg); }

/* ---------- surfaces ---------- */
.card, .modal-content, .list-group-item, .dropdown-menu {
    background: var(--ec-surface);
    border-color: var(--ec-line);
}
.card-header, .modal-header, .modal-footer { border-color: var(--ec-line); }
.card-header { background: var(--ec-surface-alt); }

/* Bootstrap's background utilities are !important, so a card header or panel
   asking for bg-primary would otherwise land on default blue next to the navy
   chrome. Redirect the utilities themselves. */
.bg-primary { background-color: var(--ec-navy) !important; }
.bg-dark { background-color: var(--ec-navy) !important; }
.bg-success { background-color: var(--ec-green) !important; }
.bg-danger { background-color: var(--ec-red) !important; }
.bg-light { background-color: var(--ec-surface-alt) !important; }
.stat-card { border-left: 4px solid; background: var(--ec-surface); border-color: var(--ec-line); }
.well, .panel-soft { background: var(--ec-surface-alt); border: 1px solid var(--ec-line); border-radius: 6px; }

/* ---------- tables ---------- */
.table { color: var(--ec-ink); --bs-table-bg: var(--ec-surface); }
.table > thead th {
    background: var(--ec-surface-alt);
    color: var(--ec-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table > :not(caption) > * > * { border-color: var(--ec-line); }

/* ---------- forms ---------- */
.form-control, .form-select {
    background: var(--ec-surface);
    border-color: var(--ec-line);
    color: var(--ec-ink);
}
.form-control:focus, .form-select:focus {
    background: var(--ec-surface);
    border-color: var(--ec-navy);
    color: var(--ec-ink);
    box-shadow: 0 0 0 0.2rem var(--ec-focus);
}
.form-control:disabled, .form-control[readonly] { background: var(--ec-surface-alt); }
/* Bootstrap hardcodes its own blue on a ticked box or switch. */
.form-check-input:checked { background-color: var(--ec-navy); border-color: var(--ec-navy); }
.form-check-input:focus { border-color: var(--ec-navy); box-shadow: 0 0 0 0.2rem var(--ec-focus); }
.form-text { color: var(--ec-muted); }

/* ---------- buttons ---------- */
.btn-primary, .btn-primary:disabled {
    background: var(--ec-navy);
    border-color: var(--ec-navy);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ec-navy-soft);
    border-color: var(--ec-navy-soft);
    color: #fff;
}
.btn-outline-primary { color: var(--ec-navy); border-color: var(--ec-navy); }
.btn-outline-primary:hover { background: var(--ec-navy); color: #fff; }
.btn-success { background: var(--ec-green); border-color: var(--ec-green); }
.btn-success:hover { background: #196637; border-color: #196637; }
.btn-danger { background: var(--ec-red); border-color: var(--ec-red); }
.btn-danger:hover { background: #a80d26; border-color: #a80d26; }
.btn-info { background: var(--ec-teal); border-color: var(--ec-teal); color: #fff; }
.btn-info:hover { background: #175b8d; border-color: #175b8d; color: #fff; }

/* ---------- status colour ---------- */
/* bg-warning and bg-info badges keep Bootstrap's lighter amber and cyan: the
   views pair them with .text-dark, and the palette's darker shades would leave
   black text on a dark chip. */
.badge.bg-success { background: var(--ec-green) !important; }
.badge.bg-danger { background: var(--ec-red) !important; }
.badge.bg-secondary { background: #6b7a8d !important; }
/* Bootstrap's own text colours are pitched for a dark page: amber and cyan on
   white are unreadable, so status text takes the palette too. */
.text-primary { color: var(--ec-navy) !important; }
.text-success { color: var(--ec-green) !important; }
.text-info { color: var(--ec-teal) !important; }
.text-warning { color: var(--ec-amber) !important; }
.text-danger { color: var(--ec-red) !important; }
.text-secondary { color: var(--ec-muted) !important; }

.alert { border-width: 1px; }
.alert-success { background: #e6f4ec; border-color: #b7ddc7; color: #12522e; }
.alert-danger { background: #fdeaed; border-color: #f4c2ca; color: #8d0c20; }
.alert-warning { background: #fdf4e3; border-color: #f0dcb0; color: #7a4c06; }
.alert-info { background: #e9f1f9; border-color: #bfd6ea; color: #14507c; }

/* ---------- rich-text editor (Quill) ---------- */
.ql-toolbar.ql-snow { background: var(--ec-surface-alt); border-color: var(--ec-line); }
.ql-container.ql-snow { background: var(--ec-surface); border-color: var(--ec-line); color: var(--ec-ink); }
.ql-toolbar .ql-stroke { stroke: var(--ec-muted); }
.ql-toolbar .ql-fill { fill: var(--ec-muted); }
.ql-toolbar .ql-picker-label { color: var(--ec-muted); }
.ql-toolbar button:hover .ql-stroke, .ql-toolbar .ql-picker-label:hover { stroke: var(--ec-ink); }
.ql-toolbar button:hover .ql-fill { fill: var(--ec-ink); }
.ql-toolbar button.ql-active .ql-stroke { stroke: var(--ec-navy); }
.ql-toolbar button.ql-active .ql-fill { fill: var(--ec-navy); }
.ql-snow .ql-picker-options { background: var(--ec-surface); border-color: var(--ec-line); }
.ql-snow .ql-picker-item { color: var(--ec-ink); }

/* ---------- public and check-in chrome ---------- */
.topbar-brand {
    background: var(--ec-navy);
    border-bottom: 1px solid var(--ec-navy);
}
.topbar-brand .navbar-brand, .topbar-brand .navbar-brand span { color: #fff; }
.event-header {
    background: var(--ec-surface);
    color: var(--ec-ink);
    border-bottom: 1px solid var(--ec-line);
}
.event-logo { max-height: 80px; }
.org-logo { max-height: 50px; }
.checkin-header {
    background: var(--ec-surface);
    color: var(--ec-ink);
    border-bottom: 1px solid var(--ec-line);
}
.kiosk-input {
    font-size: 1.5rem;
    padding: 1rem;
    background: var(--ec-surface);
    border-color: var(--ec-line);
    color: var(--ec-ink);
}
.kiosk-input:focus {
    background: var(--ec-surface);
    border-color: var(--ec-navy);
    color: var(--ec-ink);
    box-shadow: 0 0 0 0.2rem var(--ec-focus);
}
.signature-pad {
    border: 2px solid var(--ec-line);
    border-radius: 8px;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
}
.badge-type { display: inline-block; padding: 2px 10px; border-radius: 4px; color: #fff; font-size: 0.85em; }
.event-description-preview { font-size: 0.9rem; }
.event-description-preview p { margin-bottom: 0.4rem; }
.site-footer { color: var(--ec-muted); }
.site-footer a { color: var(--ec-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--ec-navy); }

/* ---------- sign-in and first-run ---------- */
body.centered { min-height: 100vh; }
.login-card { max-width: 420px; margin: 10vh auto 0; }
.login-brand { color: var(--ec-navy); font-weight: 600; }
.setup-card { max-width: 600px; margin: 5vh auto; }