/*
 * Simon & Josef — dashboard theme ("Operations")
 *
 * A thin token + component layer on top of Bootstrap 5. Loaded only by
 * base.html, so it styles the staff dashboard, auth and report pages — the
 * guest survey uses guests_base.html + guest.css and is intentionally
 * untouched.
 *
 * Structure:
 *   0. Web font (self-hosted Inter)
 *   1. Design tokens (:root)
 *   2. Bootstrap overrides (primary colour)
 *   3. Navbar
 *   4. Panels (.panel) + tables
 *   5. Definition rows (.detail-list)
 *   6. Stat tiles (.stat-tiles)
 *   7. Plotly charts (.plotly-graph)
 */

/* ============================ 0. Web font ========================= */
/* Self-hosted Inter (variable) so every user sees the same font regardless of
   OS. Two subsets cover the app's languages (fr/de/it/pt accents live in
   latin-ext). No local() src: everyone loads the same file, so rendering is
   identical even if a machine has its own Inter installed.
   (The PDF reports render server-side in Noto Sans; the dashboard uses Inter.) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF,
    U+FB00-FB06;
}

/* ============================ 1. Tokens ============================ */
:root {
  /* Common font stack. Inter is self-hosted above; the rest is a graceful
     fallback only used before/if the web font loads. --bs-body-font-family
     flows through Bootstrap to body, headings, buttons and form controls. */
  --sj-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bs-body-font-family: var(--sj-font-sans);

  /* Brand + interactive accent (teal) */
  --sj-brand: #33bbc1; /* logo / wordmark accent */
  --sj-accent: #0e8f95; /* primary interactive */
  --sj-accent-600: #0b767b; /* hover / active */
  --sj-accent-050: #e6f5f5; /* tint background */
  --sj-accent-300: #7ecacd; /* focus ring border */
  --sj-accent-800: #063a3d; /* emphasis text */

  /* Cool neutrals (slight teal bias, not pure grey) */
  --sj-ground: #f4f7fb; /* page background */
  --sj-surface: #ffffff; /* cards, tiles */
  --sj-ink: #10233b; /* headings, values */
  --sj-ink-soft: #5a6b82; /* labels, secondary text */
  --sj-border: #e3e9f1; /* hairline borders */
  --sj-border-soft: #eef2f7; /* inner dividers */
  --sj-table-stripe: #f7f9fc; /* zebra striping */
  --sj-table-hover: #edf2f8; /* row hover — a step darker than the stripe */

  /* Semantic (separate from the accent) */
  --sj-good: #1f9d6b;
  --sj-warn: #c6871a;
  --sj-bad: #d24b4b;

  --sj-radius: 12px;
  --sj-radius-sm: 8px;
  --sj-shadow: 0 1px 2px rgba(16, 35, 59, 0.05);
  --sj-shadow-lift: 0 6px 20px -12px rgba(16, 35, 59, 0.28);
}

body {
  background-color: var(--sj-ground);
  color: var(--sj-ink);
}

/* ====================== 2. Bootstrap overrides ==================== */
/* Bootstrap 5.3 buttons are built on local --bs-btn-* vars, so the brand
   teal can be applied without recompiling Sass. */
/* The whole Bootstrap "primary" family, retargeted to the brand teal.
   Part of it is variable-driven — .text-primary, .bg-primary, links and the
   subtle/emphasis variants all read --bs-primary-rgb — but the rest is
   compiled into Bootstrap's stylesheet as a literal #0d6efd (form focus
   rings, checked boxes, range thumbs, pills, list groups, dropdowns,
   pagination, progress bars), so those have to be restated below. */
:root {
  --bs-primary: var(--sj-accent);
  --bs-primary-rgb: 14, 143, 149;
  --bs-primary-text-emphasis: var(--sj-accent-800);
  --bs-primary-bg-subtle: var(--sj-accent-050);
  --bs-primary-border-subtle: var(--sj-accent-300);
  --bs-link-color: var(--sj-accent-600);
  --bs-link-color-rgb: 11, 118, 123;
  --bs-link-hover-color: var(--sj-accent);
  --bs-link-hover-color-rgb: 14, 143, 149;
  --bs-focus-ring-color: rgba(14, 143, 149, 0.25);
}

/* Form controls: focus ring, checked boxes and radios, range thumb. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--sj-accent-300);
  box-shadow: 0 0 0 0.25rem rgba(14, 143, 149, 0.25);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--sj-accent);
  border-color: var(--sj-accent);
}

/* The switch knob is an inline SVG, so the unchecked-focus one needs its own
   teal copy of Bootstrap's light-blue circle. */
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237ecacd'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
  background-color: var(--sj-accent);
}

.form-range::-moz-range-thumb {
  background-color: var(--sj-accent);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(14, 143, 149, 0.25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(14, 143, 149, 0.25);
}

/* Components that bake the blue into their own local variables. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--sj-accent);
}

.list-group {
  --bs-list-group-active-bg: var(--sj-accent);
  --bs-list-group-active-border-color: var(--sj-accent);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--sj-accent);
}

.pagination {
  --bs-pagination-color: var(--sj-accent-600);
  --bs-pagination-hover-color: var(--sj-accent-600);
  --bs-pagination-focus-color: var(--sj-accent-600);
  --bs-pagination-active-bg: var(--sj-accent);
  --bs-pagination-active-border-color: var(--sj-accent);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(14, 143, 149, 0.25);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--sj-accent);
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(14, 143, 149, 0.25);
  --bs-accordion-active-color: var(--sj-accent-600);
  --bs-accordion-active-bg: var(--sj-accent-050);
}

.btn-primary {
  --bs-btn-bg: var(--sj-accent);
  --bs-btn-border-color: var(--sj-accent);
  --bs-btn-hover-bg: var(--sj-accent-600);
  --bs-btn-hover-border-color: var(--sj-accent-600);
  --bs-btn-active-bg: var(--sj-accent-600);
  --bs-btn-active-border-color: var(--sj-accent-600);
  --bs-btn-disabled-bg: var(--sj-accent);
  --bs-btn-disabled-border-color: var(--sj-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--sj-accent-600);
  --bs-btn-border-color: var(--sj-accent);
  --bs-btn-hover-bg: var(--sj-accent);
  --bs-btn-hover-border-color: var(--sj-accent);
  --bs-btn-active-bg: var(--sj-accent-600);
  --bs-btn-active-border-color: var(--sj-accent-600);
}

/* Bootstrap's .text-bg-primary is its own blue; the dashboard's primary is the
   brand teal that .btn-primary already uses. The utility itself is !important,
   but it resolves its background from --bs-primary-rgb, so retargeting that
   variable wins without needing !important in turn. Scoped to badges so other
   .text-bg-primary users are untouched. */
.badge.text-bg-primary {
  /* --sj-accent-600, not --sj-accent: a badge is small bold text, so it needs
     4.5:1. White on #0e8f95 measures 3.90:1; on #0b767b it is 5.40:1. */
  --bs-primary-rgb: 11, 118, 123;
}

/* .btn-outline-secondary fills with a dark grey on hover and turns its label
   white. Any coloured icon inside keeps its own colour, though — the file-type
   glyphs on the report actions use .text-danger/.text-success, which are
   !important — so a red PDF glyph would sit on mid-grey at 1.6:1. Whiten icons
   for the filled states so they track the label. */
.btn-outline-secondary:hover i,
.btn-outline-secondary:focus-visible i,
.btn-outline-secondary:active i {
  color: #fff !important;
}

a {
  color: var(--sj-accent-600);
}

.link-primary,
a.link-primary {
  color: var(--sj-accent-600) !important;
}

/* =========================== 3. Navbar =========================== */
.navbar {
  --bs-navbar-padding-x: 0.5rem;
}

.sj-navbar {
  background-color: var(--sj-surface);
  border-bottom: 1px solid var(--sj-border);
  box-shadow: var(--sj-shadow);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* The brand is the droplet mark itself; the wordmark it replaced was set in
   the body font and never quite matched the logo's own lettering.
   logo-1-mark.png is logo-1.png cropped to the artwork — the shipped logos
   carry ~43% horizontal and ~20% vertical white padding, which at navbar size
   shrank the mark until the "S&J" inside the droplet stopped resolving. */
.sj-navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.sj-navbar .sj-brand-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.sj-navbar .nav-link {
  color: var(--sj-ink-soft);
  font-weight: 600;
  font-size: 0.925rem;
  border-radius: var(--sj-radius-sm);
  padding: 0.4rem 0.75rem;
}

.sj-navbar .nav-link:hover,
.sj-navbar .nav-link:focus {
  color: var(--sj-ink);
}

.sj-navbar .nav-link.active {
  color: var(--sj-accent-600);
  background-color: var(--sj-accent-050);
}

.sj-navbar .dropdown-toggle::after {
  display: none;
}

.sj-navbar .nav-link .fa-circle-user {
  font-size: 1.35rem;
}

/* ===================== 4. Panels (component) ==================== */
/* The card look, decoupled from Bootstrap's card component and template
   inheritance. Authored via the <c-panel> component
   (app/templates/cotton/panel.html) and dropped into any grid column, so the
   page controls width. Bootstrap grid
   utilities work normally inside .panel-body (its padding absorbs the row's
   negative gutter margins). */
.panel {
  background-color: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-shadow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--sj-border);
}

.panel-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--sj-ink);
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-body {
  padding: 1.25rem;
}

/* Footers hold a row of actions, so the flex row lives here rather than being
   repeated as `d-flex gap-2` utilities at every call site. It wraps, so a
   footer with three buttons still behaves on a narrow screen. */
.panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--sj-border);
}

/* Quieter tables than Bootstrap's default, and no bottom margin — otherwise a
   table sitting flush in a panel (or in a nested .card-body.p-0) leaves an
   empty strip below the last row. */
.panel .table {
  --bs-table-border-color: var(--sj-border-soft);
  /* Bootstrap stripes with rgba(emphasis, .05) and hovers with .075, both
     fairly heavy greys on white. Retarget its variables so the zebra and the
     hover are light cool tints instead, the hover one step darker so it still
     reads over a striped row. Both shades live in tokens, so they can be tuned
     without touching a single table. */
  --bs-table-striped-bg: var(--sj-table-stripe);
  --bs-table-hover-bg: var(--sj-table-hover);
  margin-bottom: 0;
}

.panel .table > thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sj-ink-soft);
  border-bottom-color: var(--sj-border);
  font-weight: 700;
}

/* ======================= 5. Definition rows ====================== */
/* Cleaner replacement for the col-4 / col-8 label/value rows. */
.detail-list {
  display: flex;
  flex-direction: column;
}

.detail-list .detail-row {
  display: grid;
  grid-template-columns: minmax(160px, 34%) 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--sj-border-soft);
}

.detail-list .detail-row:last-child {
  border-bottom: 0;
}

.detail-list .detail-key {
  color: var(--sj-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
}

.detail-list .detail-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .detail-list .detail-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ========================= 6. Stat tiles ========================= */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 991.98px) {
  .stat-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479.98px) {
  .stat-tiles {
    grid-template-columns: 1fr;
  }
}

.stat-tile {
  background-color: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-shadow);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stat-tile__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--sj-ink-soft);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.stat-tile__icon {
  color: var(--sj-accent);
}

.stat-tile__value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--sj-ink);
}

.stat-tile__value .stat-tile__unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sj-ink-soft);
  margin-left: 0.15rem;
}

.stat-tile__meta {
  font-size: 0.78rem;
  color: var(--sj-ink-soft);
}

/* ========================= 7. Plotly ========================= */
/* Charts render into .plotly-graph; give each a light card frame that
   matches the dashboard cards. The figure background itself is made
   transparent from the Python side (app/stats.py). */
.plotly-graph {
  background-color: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--sj-radius);
  padding: 0.5rem;
}

.plotly-graph .js-plotly-plot,
.plotly-graph .plot-container {
  width: 100%;
}

/* ===================== Page title (dashboard) ==================== */
.page-heading {
  margin-bottom: 1.25rem;
}

.page-heading h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}

.page-heading .page-subtitle {
  color: var(--sj-ink-soft);
  font-size: 0.9rem;
  margin-bottom: 0;
}