/* =============================================================================
   Objektmelder Theme v3 (Bootstrap 5.3.8 aligned, minimal, readable)
   - Dark mode: 3 surfaces (bg / surface / elevated)
   - Bootstrap variables are the source of truth
   - Components: header, cards, forms, tables, lanes, ticket cards
============================================================================= */

/* -------------------------
   1) Core tokens (shared)
------------------------- */
:root{
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Radius */
  --r-sm: .75rem;
  --r-md: 1rem;
  --r-lg: 1.25rem;
  --r-pill: 999px;

  /* Layout */
  --container-max: 1100px;
  --section-pad: clamp(2rem, 3.5vw, 4rem);

  /* Header spacing (JS may update --header-h) */
  --header-h: 84px;
  --stick-top: 12px;
  --stick-inline: 12px;
  --header-gap: 12px;

  /* Brand */
  --brand-600: #1d4ed8; /* light primary */
  --brand-700: #1e40af;
  --brand-dark-600: #3b82f6; /* dark primary */
  --brand-dark-700: #2563eb;

  /* Semantics */
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;
  --info: #0ea5e9;

  /* Lane accents */
  --lane-high: #ef4444;
  --lane-mid:  #f59e0b;
  --lane-low:  #3b82f6;
  --lane-late: rgba(255,255,255,.20);
}

/* Small screens: no sticky gaps */
@media (max-width: 767.98px){
  :root{
    --stick-top: 0px;
    --stick-inline: 0px;
    --header-gap: 0px;
  }
  [data-site-header] .navbar{
    --bs-navbar-padding-y: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* -------------------------
   2) Theme tokens (only what differs)
   Bootstrap 5.3 color modes key off data-bs-theme
------------------------- */
:root[data-bs-theme="light"]{
  --bg: #f4f6fb;
  --surface: #ffffff;
  --elevated: #ffffff;

  --text: #0b1220;
  --muted: rgba(11,18,32,.72);
  --border: rgba(2,6,23,.12);

  --primary: var(--brand-600);
  --primary-hover: var(--brand-700);

  --focus: color-mix(in srgb, var(--primary) 38%, transparent);

  --shadow-card: 0 .25rem .75rem rgba(0,0,0,.06);
  --shadow-header: 0 .6rem 1.4rem rgba(0,0,0,.10);

  /* Footer (optional) */
  --footer-bg: #071327;
  --footer-text: rgba(255,255,255,.90);
  --footer-muted: rgba(255,255,255,.68);
  --footer-border: rgba(255,255,255,.12);
}

:root[data-bs-theme="dark"]{
  --bg: #0b1220;
  --elevated: #172341;                                  /* navbar */
  --surface: color-mix(in srgb, #172341 88%, #000 12%); /* cards slightly deeper */

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --border: rgba(255,255,255,.10);

  --primary: var(--brand-dark-600);
  --primary-hover: var(--brand-dark-700);

  --focus: color-mix(in srgb, var(--primary) 58%, transparent);

  /* dark: use contrast, not shadows */
  --shadow-card: none;
  --shadow-header: none;

  /* Footer (optional) */
  --footer-bg: #040b12;
  --footer-text: rgba(255,255,255,.90);
  --footer-muted: rgba(255,255,255,.68);
  --footer-border: rgba(255,255,255,.12);
}

/* Keep explicit color-scheme in sync with Bootstrap’s attribute */
:root[data-bs-theme="light"]{ color-scheme: light; }
:root[data-bs-theme="dark"]{ color-scheme: dark; }

/* -------------------------
   3) Bootstrap variable alignment (central)
------------------------- */
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"]{
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-weight: var(--fw-400);

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--border);

  --bs-primary: var(--primary);
  --bs-link-color: color-mix(in srgb, var(--primary) 82%, var(--text) 18%);
  --bs-link-hover-color: color-mix(in srgb, var(--primary) 70%, var(--text) 30%);

  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);

  --bs-tertiary-bg: color-mix(in srgb, var(--surface) 92%, var(--bg));

  --bs-focus-ring-color: var(--focus);
  --bs-focus-ring-width: .25rem;
}

/* -------------------------
   4) Base
------------------------- */
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  padding-top: calc(var(--stick-top) + var(--header-h) + var(--header-gap));
}
a{ text-underline-offset: .18em; text-decoration-thickness: .08em; }
h1,h2,h3,h4,h5{ letter-spacing: -0.01em; }
.page-title,.section-title{ font-weight: var(--fw-600); }

/* -------------------------
   5) Header (no glass; clean B2B)
------------------------- */
.site-header{
  position: fixed;
  left: 0; right: 0;
  top: var(--stick-top);
  z-index: 1030;
  padding-inline: var(--stick-inline);
  pointer-events: none;

  transition: transform .22s ease, opacity .22s ease;
}
.site-header .navbar{ pointer-events:auto; background: transparent; }

.header-stick{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;

  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);

  padding: .55rem .75rem;
  box-shadow: var(--shadow-header);
}
.site-header.is-hidden{
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 767.98px){
  .site-header{ top: 0; padding-inline: 0; }
  .header-stick{
    max-width: none;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding: .6rem 1rem;
  }
}
/* Dashboard variant (less “pill”) */
body.is-dashboard .header-stick{ border-radius: var(--r-md); }

/* -------------------------
   6) Buttons
------------------------- */
.btn{ border-radius: var(--r-pill); font-weight: var(--fw-600); }
.btn-primary{
  font-weight: var(--fw-700);
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover{
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* -------------------------
   7) Forms
------------------------- */
.form-label{ font-weight: var(--fw-500); }
.form-text{ color: var(--muted); }

.form-control,.form-select,.form-check-input{
  border-radius: var(--r-md);
  border-color: var(--border);
  color: var(--text);
}
.form-control::placeholder{
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 .25rem var(--focus);
}
.form-switch .form-check-input{
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 1.25rem 1.25rem !important;
}

.form-switch .form-check-input:checked{
  background-position: right center !important;
}

/* -------------------------
   8) Cards / panels
------------------------- */
.card{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  background: var(--elevated);
}
.card-header{
  border-bottom: 1px solid var(--border);
  font-weight: var(--fw-600);
}

/* Leaflet wrapper */
.map-container{
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* -------------------------
   9) Tables (CSS-only theming; no .table-dark required)
------------------------- */
.table{ --bs-table-border-color: var(--border); }

:root[data-bs-theme="dark"] .table{
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-hover-color: var(--text);
}
:root[data-bs-theme="light"] .table{
  --bs-table-hover-bg: rgba(2,6,23,.03);
}
.table thead th{ font-weight: var(--fw-500); }

/* Optional: dark header cells slightly elevated */
:root[data-bs-theme="dark"] .table thead th{
  background: color-mix(in srgb, var(--surface) 85%, var(--elevated));
}

/* -------------------------
   10) Lanes (Kanban)
------------------------- */
.ticket-lanes{ display: grid; gap: 1rem; }

.lane{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lane-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  font-weight: var(--fw-600);
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
}
.lane-body{ padding: .75rem; min-height: 220px; }

.lane--high{ border-top: 3px solid var(--lane-high); }
.lane--mid { border-top: 3px solid var(--lane-mid); }
.lane--low { border-top: 3px solid var(--lane-low); }
.lane--late{ border-top: 3px solid var(--lane-late); }

/* -------------------------
   11) Ticket cards (inside lanes)
------------------------- */
.ticket-card{
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: .75rem;
}
.ticket-img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
.ticket-body{ padding: .75rem; }
.ticket-title{ font-weight: var(--fw-600); margin: 0 0 .25rem; }
.ticket-meta{ color: var(--muted); font-size: .875rem; margin: 0; }

/* Overdue badge */
.badge-overdue{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .25rem .5rem;
  border-radius: var(--r-pill);
  font-weight: var(--fw-500);

  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  color: color-mix(in srgb, var(--danger) 88%, #fff 12%);
}

/* -------------------------
   12) Hero panels (landing / QR entry)
------------------------- */
.hero{
  min-height: min(88vh, 860px);
  display:grid;
  place-items:center;
  padding: var(--section-pad) 0;
}
.hero-inner{ width: min(1100px, 92vw); }
.hero-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}

/* -------------------------
   13) Footer (optional)
------------------------- */
.site-footer{
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
}
.site-footer a{ color: var(--footer-text); }
.site-footer .muted{ color: var(--footer-muted); }

/* -------------------------
   14) No print
------------------------- */
@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

/* -------------------------
   15) toast
------------------------- */
.om-toast-progress{
  height:3px;
  margin: .25rem .5rem 0;       /* inset so it won't touch rounded corners */
  background:transparent;
  border-radius:999px;          /* rounded ends */
  overflow:hidden;              /* keep bar inside rounded track */
}
.om-toast-progress .progress-bar{
  transition:none;
  border-radius:999px;
  transform-origin:left center;
}

.toast[data-om-toast-variant="success"] .om-toast-icon{ color:var(--bs-success); }
.toast[data-om-toast-variant="warning"] .om-toast-icon{ color:var(--bs-warning); }
.toast[data-om-toast-variant="danger"]  .om-toast-icon{ color:var(--bs-danger);  }

.toast[data-om-toast-variant="success"] .om-toast-progress .progress-bar{ background-color:var(--bs-success); }
.toast[data-om-toast-variant="warning"] .om-toast-progress .progress-bar{ background-color:var(--bs-warning); }
.toast[data-om-toast-variant="danger"]  .om-toast-progress .progress-bar{ background-color:var(--bs-danger);  }

@keyframes om-toast-progress{ from{transform:scaleX(1)} to{transform:scaleX(0)} }