/* ─── CSS Custom Properties ─────────────────────────────────────── */
:root {
  --red:      #b71921;
  --red-dark: #8c0f15;
  --red-light:#e02029;
  --green:    #18a957;
  --yellow:   #f2b02e;
  --orange:   #e67e22;
  --danger:   #d83030;
  --blue:     #1877f2;
  --bg:       #11131a;
  --bg2:      #1a1d27;
  --bg3:      #222636;
  --card-bg:  #252939;
  --border:   #2e3347;
  --text:     #e8eaf0;
  --text-muted: #7a7f99;
  --topnav-h: 56px;
  --sidebar-w: 300px;
  --radius:   10px;
  --radius-sm:6px;
  --shadow:   0 2px 12px rgba(0,0,0,.45);
  --transition: .15s ease;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: Inter, 'Segoe UI', system-ui, Arial, sans-serif;
       font-size: 15px; line-height: 1.5; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
[x-cloak] { display: none !important; }

/* ─── Top Navigation ─────────────────────────────────────────────── */
.topnav { position: sticky; top: 0; z-index: 100; height: var(--topnav-h);
          background: linear-gradient(135deg, var(--bg2) 0%, #1e2130 100%);
          border-bottom: 1px solid var(--border); display: flex; align-items: center;
          padding: 0 16px; gap: 20px; box-shadow: var(--shadow); }
.topnav__brand { display: flex; align-items: center; gap: 10px; }
.topnav__logo { height: 32px; width: auto; }
.topnav__title { font-weight: 700; font-size: 1.1rem; color: var(--red-light); }
.topnav__links { display: flex; gap: 4px; flex: 1; }
.nav-link { padding: 6px 14px; border-radius: var(--radius-sm); color: var(--text-muted);
            font-size: .9rem; transition: var(--transition); }
.nav-link:hover, .nav-link.active { background: var(--bg3); color: var(--text); text-decoration: none; }
.topnav__user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.user-badge { background: var(--bg3); border-radius: 20px; padding: 4px 12px;
              font-size: .85rem; color: var(--text-muted); }

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       padding: 9px 18px; border-radius: 12px; font-size: .9rem; font-weight: 600;
       cursor: pointer; border: none; transition: var(--transition); white-space: nowrap;
       min-height: 40px; min-width: 44px; }
.btn--primary  { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-light); }
.btn--secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn--secondary:hover { background: #2e3347; }
.btn--ghost    { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--bg3); color: var(--text); }
.btn--danger   { background: var(--danger); color: #fff; }
.btn--warn     { background: var(--yellow); color: #111; }
.btn--success  { background: var(--green); color: #fff; }
.btn--sm  { padding: 6px 12px; font-size: .82rem; min-height: 34px; border-radius: 8px; }
.btn--xs  { padding: 4px 8px;  font-size: .78rem; min-height: 28px; border-radius: 6px; }
.btn--full { width: 100%; }
.btn--icon { padding: 8px; border-radius: 50%; min-width: 36px; }
.btn--mic { color: var(--text-muted); border: 1px solid var(--border); padding: 6px 10px; }
.btn--mic.recording { color: var(--red); border-color: var(--red); animation: pulse 1s infinite; }

/* ─── Forms ──────────────────────────────────────────────────────── */
.form-input, .form-select {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: .9rem; width: 100%;
  transition: var(--transition); }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--red); }
.form-input--detail { margin-top: 4px; font-size: .82rem; }
.form-input--search { width: 260px; }
.form-select--xs { width: auto; padding: 5px 8px; font-size: .8rem; }
.form-input--press { width: 70px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: .82rem; color: var(--text-muted); }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-group--narrow { max-width: 90px; }
.form-group--checkbox label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text); }
.checkbox-label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .9rem; }
.input-row { display: flex; gap: 6px; align-items: center; }

/* ─── Cards ──────────────────────────────────────────────────────── */
.card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
        border-left: 8px solid var(--org-color, #687386); position: relative;
        margin-bottom: 8px; overflow: hidden; transition: var(--transition); }
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.6); }
.card--done { opacity: .55; }
.card--cancelled { opacity: .4; }
.card__status { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; }
.card__status--green  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.card__status--yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.card__status--red    { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.card__body { padding: 10px 12px; padding-right: 28px; }
.card__title { font-weight: 700; font-size: .95rem; }
.card__sub { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.card__org { font-size: .75rem; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.card__gk { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }
.card__meta { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
.card__due  { font-size: .78rem; color: var(--yellow); }
.card__age  { font-size: .78rem; color: var(--text-muted); margin-left: 6px; }
.card__footer { padding: 6px 10px; border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: center; background: rgba(0,0,0,.15); }
.card__tasks { margin-top: 8px; }
.assigned-task { display: flex; align-items: center; gap: 6px; font-size: .82rem;
                 padding: 2px 0; }
.assigned-task--done { text-decoration: line-through; color: var(--text-muted); }
.task-check { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }
.card--vehicle { --org-color: var(--red); }
.card--task    { --org-color: #3a7bd5; }
.card--message { --org-color: var(--yellow); }
.card--rescue  { --org-color: var(--green); }

/* ─── Kanban Board ───────────────────────────────────────────────── */
.kanban-col { min-width: 272px; max-width: 272px; background: var(--bg2);
              border-radius: var(--radius); display: flex; flex-direction: column;
              border: 1px solid var(--border); flex-shrink: 0; }
.kanban-col__header { padding: 10px 12px; border-bottom: 1px solid var(--border);
                      display: flex; justify-content: space-between; align-items: center; }
.kanban-col__title { font-weight: 700; font-size: .9rem; }
.kanban-col__count { background: var(--bg3); border-radius: 12px; padding: 2px 8px;
                     font-size: .78rem; color: var(--text-muted); }
.kanban-col__body { flex: 1; overflow-y: auto; padding: 8px; min-height: 80px; }
.sortable-zone { min-height: 60px; }
.sortable-ghost { opacity: .3; }

/* ─── Incident Header ────────────────────────────────────────────── */
.incident-header { display: flex; align-items: center; gap: 16px; padding: 8px 16px;
                   background: var(--bg2); border-bottom: 1px solid var(--border);
                   flex-wrap: wrap; }
.incident-header__alarm { display: flex; align-items: center; gap: 10px; }
.incident-header__address { font-size: .9rem; color: var(--text-muted); }
.incident-header__timer { flex: 1; text-align: center; }
.timer { font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums;
         color: var(--text); letter-spacing: 2px; }
.incident-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alarm-badge { border-radius: 8px; padding: 4px 12px; font-weight: 800; font-size: 1.1rem; }
.alarm-badge--f { background: var(--danger); color: #fff; }
.alarm-badge--t { background: var(--blue); color: #fff; }
.alarm-badge--sm { font-size: .8rem; padding: 2px 8px; border-radius: 6px; }

/* ─── Exercise Banner ────────────────────────────────────────────── */
.exercise-topbar { background: repeating-linear-gradient(
    45deg, var(--yellow), var(--yellow) 10px, #111 10px, #111 20px);
    color: var(--yellow); text-align: center; font-weight: 900; font-size: 1rem;
    padding: 6px; letter-spacing: 2px; }

/* ─── Sidebar ────────────────────────────────────────────────────── */
.sidebar-box { background: var(--bg3); border-radius: var(--radius-sm); border: 1px solid var(--border);
               padding: 10px 12px; margin-bottom: 10px; }
.sidebar-box__title { font-weight: 700; font-size: .82rem; color: var(--text-muted);
                      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.task-suggestions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.suggestion-pill { background: var(--bg2); border: 1px solid var(--border); color: var(--text-muted);
                   border-radius: 20px; padding: 3px 10px; font-size: .78rem; cursor: pointer;
                   transition: var(--transition); }
.suggestion-pill:hover { background: var(--red); color: #fff; border-color: var(--red); }
.section-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.log-list { max-height: 180px; overflow-y: auto; font-size: .8rem; }
.log-entry { padding: 2px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; }
.log-entry__time { color: var(--text-muted); flex-shrink: 0; }
.log-entry--warn .log-entry__text { color: var(--yellow); }
.log-entry--alert .log-entry__text { color: var(--danger); }

/* ─── Lage Ticker ────────────────────────────────────────────────── */
.lage-ticker { background: rgba(183,25,33,.15); border: 1px solid rgba(183,25,33,.3);
               border-radius: var(--radius-sm); padding: 8px 10px; display: flex;
               gap: 8px; align-items: flex-start; margin-bottom: 10px; font-size: .82rem; }
.lage-ticker__icon { flex-shrink: 0; }

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px;
         font-size: .75rem; font-weight: 600; }
.badge--active   { background: rgba(24,169,87,.2); color: var(--green); }
.badge--closed   { background: var(--bg3); color: var(--text-muted); }
.badge--exercise { background: rgba(242,176,46,.2); color: var(--yellow); }
.badge--action   { background: var(--bg3); color: var(--blue); font-family: monospace; }
.badge--agt      { background: rgba(24,169,87,.2); color: var(--green); }
.badge--warn     { background: rgba(216,48,48,.2); color: var(--danger); }
.badge--done     { background: rgba(24,169,87,.2); color: var(--green); }

/* ─── Modals / Dialogs ───────────────────────────────────────────── */
dialog { border: none; background: var(--bg2); color: var(--text); border-radius: var(--radius);
         box-shadow: 0 8px 40px rgba(0,0,0,.7); padding: 0; max-width: 560px; width: 90vw; }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog.modal--wide { max-width: 720px; }
.modal__content { display: flex; flex-direction: column; max-height: 90vh; }
.modal__header { display: flex; justify-content: space-between; align-items: center;
                 padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal__header h3 { font-size: 1.1rem; font-weight: 700; }
.modal__close { background: none; border: none; color: var(--text-muted); font-size: 1.4rem;
                cursor: pointer; line-height: 1; padding: 0 4px; }
.modal__body { padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.modal__footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex;
                 justify-content: flex-end; gap: 10px; }

/* ─── Page Layout ────────────────────────────────────────────────── */
.main-content { padding: 0; }
.page-header { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
               border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.page-header h2 { font-size: 1.3rem; font-weight: 700; flex: 1; }
.page-header__actions { display: flex; gap: 8px; }
.section { padding: 16px 20px; }
.section-title { font-size: 1rem; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }

/* ─── Dashboard incident cards ───────────────────────────────────── */
.incident-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.incident-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border);
                 padding: 16px; min-width: 240px; max-width: 320px; position: relative;
                 transition: var(--transition); text-decoration: none; color: var(--text); }
.incident-card:hover { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); text-decoration: none; }
.incident-card--exercise { border-color: var(--yellow); }
.incident-card__alarm { font-size: 1.8rem; font-weight: 900; color: var(--red-light); }
.incident-card__address { font-size: .9rem; color: var(--text-muted); margin: 4px 0; }
.incident-card__meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.incident-card__time { font-size: .8rem; color: var(--text-muted); }

/* ─── Empty state ────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state__icon { font-size: 3rem; margin-bottom: 16px; }

/* ─── Tables ─────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th { background: var(--bg3); color: var(--text-muted); padding: 10px 14px;
            font-size: .82rem; text-align: left; text-transform: uppercase; letter-spacing: .4px; }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.table tr:hover td { background: rgba(255,255,255,.03); }
.table--compact td, .table--compact th { padding: 6px 10px; font-size: .82rem; }
.archive-table-wrap { overflow-x: auto; padding: 0 20px; }
.row--exercise { background: rgba(242,176,46,.04); }
.nowrap { white-space: nowrap; }

/* ─── Detail grid ────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
.detail-box { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border);
              padding: 16px; }
.detail-box--full { grid-column: 1 / -1; }
.detail-box h3 { font-size: .95rem; font-weight: 700; margin-bottom: 10px;
                 border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .88rem; }
.detail-list dt { color: var(--text-muted); }
.vehicle-row { display: flex; gap: 8px; padding: 3px 0; font-size: .88rem; }
.vehicle-code { font-weight: 700; }
.vehicle-dept { color: var(--text-muted); font-size: .82rem; }
.task-row { padding: 3px 0; font-size: .88rem; display: flex; gap: 6px; align-items: center; }
.task-row--done { text-decoration: line-through; color: var(--text-muted); }
.person-row { padding: 3px 0; font-size: .88rem; }

/* ─── Atemschutz Board ───────────────────────────────────────────── */
.troops-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; }
.troop-card { background: var(--card-bg); border-radius: var(--radius); border: 2px solid var(--border);
              padding: 16px; min-width: 300px; max-width: 380px; }
.troop-card--warn-yellow { border-color: var(--yellow); }
.troop-card--warn-red { border-color: var(--danger); animation: blink-border 1s infinite; }
.troop-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.troop-card__name { font-size: 1.1rem; font-weight: 800; }
.status-pill { border-radius: 20px; padding: 3px 12px; font-size: .8rem; font-weight: 700; }
.status-pill--bereit     { background: var(--bg3); color: var(--text-muted); }
.status-pill--im_einsatz { background: rgba(24,169,87,.2); color: var(--green); }
.status-pill--rueckzug   { background: rgba(216,48,48,.2); color: var(--danger); }
.status-pill--zurueck    { background: rgba(30,115,242,.2); color: var(--blue); }
.status-pill--erholt     { background: var(--bg3); color: var(--text-muted); }
.warn-badge { border-radius: 6px; padding: 2px 8px; font-size: .78rem; font-weight: 700; }
.warn-badge--red    { background: var(--danger); color: #fff; }
.warn-badge--yellow { background: var(--yellow); color: #111; }
.troop-card__task  { font-size: .82rem; color: var(--text-muted); margin-bottom: 8px; }
.troop-card__timer { font-size: 2rem; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums;
                     margin: 8px 0; color: var(--text); }
.press-bar-wrap { margin: 8px 0; }
.press-bar { height: 14px; background: var(--bg3); border-radius: 7px; overflow: hidden; }
.press-bar__fill { height: 100%; border-radius: 7px; transition: width .5s; }
.press-bar__fill--ok     { background: var(--green); }
.press-bar__fill--yellow { background: var(--yellow); }
.press-bar__fill--red    { background: var(--danger); }
.press-bar__labels { display: flex; justify-content: space-between; font-size: .72rem;
                     color: var(--text-muted); margin-top: 3px; }
.troop-members { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.troop-member { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.troop-member--truppfuehrer .troop-member__name { font-weight: 700; }
.troop-member__role { color: var(--text-muted); font-size: .75rem; }
.troop-member__press { margin-left: auto; color: var(--text-muted); font-size: .78rem; }
.press-form { margin: 8px 0; }
.troop-card__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.troop-member-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.troop-member-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ─── Alerts ─────────────────────────────────────────────────────── */
.alert { padding: 10px 16px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 12px; }
.alert--error { background: rgba(216,48,48,.15); border: 1px solid var(--danger); color: #ff6b6b; }
.alert--warn  { background: rgba(242,176,46,.15); border: 1px solid var(--yellow); color: var(--yellow); }
.alert--success { background: rgba(24,169,87,.15); border: 1px solid var(--green); color: var(--green); }

/* ─── Toasts ─────────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 200;
                   display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
         padding: 10px 16px; display: flex; gap: 10px; align-items: center;
         box-shadow: var(--shadow); min-width: 240px; }
.toast--warn  { border-color: var(--yellow); }
.toast--error { border-color: var(--danger); }
.toast__close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; }

/* ─── Incident alert overlay (new incident popup) ────────────────── */
.incident-alert-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75);
                           z-index: 300; display: flex; align-items: center; justify-content: center; }
.incident-alert { background: var(--bg2); border: 2px solid var(--red); border-radius: var(--radius);
                  padding: 30px; max-width: 400px; text-align: center; box-shadow: var(--shadow); }
.incident-alert__badge { font-size: 2.5rem; font-weight: 900; color: var(--red-light); }
.incident-alert__title { font-size: 1.3rem; font-weight: 700; margin: 8px 0; }
.incident-alert__body  { color: var(--text-muted); margin-bottom: 20px; }
.incident-alert__actions { display: flex; gap: 12px; justify-content: center; }

/* ─── Login ───────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: var(--bg); }
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-card { background: var(--bg2); border-radius: 16px; border: 1px solid var(--border);
              padding: 32px 28px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo__img { height: 64px; margin-bottom: 8px; }
.login-logo__title { font-size: 1.6rem; font-weight: 900; color: var(--red-light); }
.login-logo__sub { color: var(--text-muted); font-size: .9rem; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-qr-hint { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; justify-content: center; }
.login-qr { text-align: center; font-size: .85rem; color: var(--text-muted); margin-top: 10px; }

/* ─── QR Page ────────────────────────────────────────────────────── */
.qr-page { display: flex; justify-content: center; padding: 30px; }
.qr-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
           padding: 30px; text-align: center; max-width: 360px; }
.qr-img { max-width: 250px; border-radius: 8px; background: white; padding: 12px; }
.qr-hint { font-size: .9rem; color: var(--text-muted); margin: 16px 0 4px; }
.qr-valid { font-size: .85rem; color: var(--green); }

/* ─── History ────────────────────────────────────────────────────── */
.history-list { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.history-entry { background: var(--bg2); border-radius: var(--radius-sm); padding: 10px 14px;
                 border-left: 3px solid var(--border); }
.history-entry__time { font-size: .78rem; color: var(--text-muted); margin-bottom: 4px; }
.history-entry__action { display: flex; align-items: center; gap: 8px; }
.history-entry__entity { font-size: .82rem; color: var(--text-muted); }
.history-entry__diff { margin-top: 6px; }
.code-block { background: var(--bg3); border-radius: 4px; padding: 8px; font-size: .75rem;
              font-family: monospace; overflow-x: auto; color: var(--text-muted); }

/* ─── Stats ──────────────────────────────────────────────────────── */
.kpi-grid { display: flex; gap: 16px; padding: 20px; flex-wrap: wrap; }
.kpi-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border);
            padding: 20px 24px; min-width: 160px; text-align: center; }
.kpi-card__value { font-size: 2.5rem; font-weight: 900; color: var(--red-light); }
.kpi-card__label { font-size: .85rem; color: var(--text-muted); margin-top: 4px; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 20px 20px; }
.chart-box { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; }
.chart-box h3 { font-size: .95rem; font-weight: 700; margin-bottom: 14px; }

/* ─── Filter bar ─────────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 16px; align-items: center; padding: 12px 20px;
              border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.toggle-label { display: flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; }
.inline-form { display: flex; gap: 8px; align-items: center; }

/* ─── Admin API key display ──────────────────────────────────────── */
.api-key-display { background: var(--bg3); padding: 8px 12px; border-radius: 6px;
                   font-family: monospace; font-size: .85rem; display: block; margin: 8px 0;
                   word-break: break-all; }

/* ─── Wizard ─────────────────────────────────────────────────────── */
.wizard-label { font-weight: 700; margin-bottom: 12px; }
.wizard-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.wizard-pill { background: var(--bg3); border: 2px solid var(--border); color: var(--text);
               border-radius: var(--radius); padding: 16px 20px; font-size: 1rem; font-weight: 600;
               cursor: pointer; transition: var(--transition); min-width: 130px; text-align: center; }
.wizard-pill:hover { border-color: var(--red); background: rgba(183,25,33,.15); }

/* ─── Misc ───────────────────────────────────────────────────────── */
.text-muted   { color: var(--text-muted); }
.text-center  { text-align: center; }
.text-red     { color: var(--red-light); }
.hidden       { display: none; }
.link-sm      { font-size: .78rem; color: var(--blue); margin-left: 8px; }
kbd { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
      padding: 1px 5px; font-size: .78rem; font-family: monospace; }

/* ─── Animations ─────────────────────────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes blink-border { 0%,100%{border-color:var(--danger)} 50%{border-color:transparent} }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .board-wrap { flex-direction: column; height: auto; }
  .sidebar { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); }
  .charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kanban-col { min-width: 88vw; }
  .incident-header { gap: 8px; }
  .timer { font-size: 1.6rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .topnav__links { display: none; }
  .form-row { flex-direction: column; }
}

/* ─── Print (for non-PDF print) ──────────────────────────────────── */
@media print {
  .topnav, .sidebar, .incident-header__actions, .btn, .card__footer { display: none !important; }
  .board-wrap { height: auto; overflow: visible; }
  .kanban { flex-wrap: wrap; }
}