/* ─────────────────────────────────────────────────────────────────────────────
   Fleetman — Schwarz-Weiß-Thema (loaded after bootstrap.min.css, overrides it)

   Design language: German industrial minimalism. White paper, near-black ink,
   hairline rules, zero border-radius. Headings and navigation are set in
   Bahnschrift (Windows' DIN 1451 — the typeface of German road signage);
   body text falls back to the system stack. Status is never encoded in color:
   ok = outlined, warning = gray fill, critical = solid black. See .status-*.

   Bootstrap 5.1 compiles literal colors into component classes, so components
   are overridden rule-by-rule; `.bg-*`/`.text-*`/`.border-*` utilities carry
   !important in Bootstrap and the overrides here must match it.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --fm-black: #111111;      /* primary ink / fills                     */
    --fm-ink: #1a1a1a;        /* body text                               */
    --fm-gray-60: #6b6b6b;    /* secondary text                          */
    --fm-gray-30: #d9d9d9;    /* hairlines, quiet borders                */
    --fm-gray-10: #f5f5f5;    /* subtle fills, striping                  */
    --fm-white: #ffffff;

    --fm-font-display: "Bahnschrift", "DIN Alternate", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --fm-font-body: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Repoint Bootstrap's palette variables at the monochrome scale.       */
    --bs-blue: var(--fm-black);
    --bs-primary: var(--fm-black);
    --bs-secondary: var(--fm-gray-60);
    --bs-success: var(--fm-black);
    --bs-danger: var(--fm-black);
    --bs-warning: var(--fm-gray-60);
    --bs-info: var(--fm-gray-60);
    --bs-light: var(--fm-gray-10);
    --bs-dark: var(--fm-black);
    --bs-body-color: var(--fm-ink);
    --bs-body-bg: var(--fm-white);
}

/* ── 2. Base & typography ──────────────────────────────────────────────────── */
body {
    background: var(--fm-white);
    color: var(--fm-ink);
    font-family: var(--fm-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fm-font-display);
    color: var(--fm-black);
    letter-spacing: 0.01em;
}

h1, .h1, h1.h3 { font-weight: 700; }

a { color: var(--fm-black); text-decoration-color: var(--fm-gray-30); text-underline-offset: 0.2em; }
a:hover { color: #000; text-decoration-color: var(--fm-black); }

::selection { background: var(--fm-black); color: var(--fm-white); }

hr { border-top: 1px solid var(--fm-gray-30); opacity: 1; }

/* Uppercase micro-label, used for nav links and card headers. */
.fm-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--fm-font-display);
}

/* ── 3. Navbar (markup: navbar-light fm-navbar in _Layout) ─────────────────── */
.fm-navbar {
    background: var(--fm-white);
    border-bottom: 2px solid var(--fm-black);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.fm-navbar .navbar-brand,
.fm-wordmark {
    font-family: var(--fm-font-display);
    color: var(--fm-black);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Brand mark: a filled square carrying a road-marking dash — the app's stamp. */
.fm-mark {
    width: 1.15rem;
    height: 1.15rem;
    background: var(--fm-black);
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
}
.fm-mark::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: calc(50% - 1px);
    height: 2px;
    background: var(--fm-white);
}

.fm-navbar .nav-link {
    color: var(--fm-black);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--fm-font-display);
    padding-bottom: 0.35rem;
    border-bottom: 2px solid transparent;
}
.fm-navbar .nav-link:hover,
.fm-navbar .nav-link:focus,
.fm-navbar .nav-link.active {
    color: #000;
    border-bottom-color: var(--fm-black);
}

.fm-navbar .navbar-text { color: var(--fm-gray-60) !important; font-size: 0.85rem; }
.fm-navbar .navbar-toggler { border: 1px solid var(--fm-black); border-radius: 0; }
.fm-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23111111' stroke-linecap='square' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── 4. Buttons — one filled and one outlined variant, nothing else ────────── */
.btn { border-radius: 0; font-weight: 600; }

.btn-primary, .btn-success, .btn-danger, .btn-info,
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--fm-black);
    border-color: var(--fm-black);
    color: var(--fm-white);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: #000;
    border-color: #000;
    color: var(--fm-white);
}

.btn-secondary, .btn-warning, .btn-light,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark {
    background-color: var(--fm-white);
    border: 1px solid var(--fm-black);
    color: var(--fm-black);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-light:hover, .btn-light:focus, .btn-light:active,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover,
.btn-outline-info:hover, .btn-outline-dark:hover {
    background-color: var(--fm-black);
    border-color: var(--fm-black);
    color: var(--fm-white);
}

/* Outline-light sits on the (now white) navbar — same outlined treatment.     */
.btn-outline-light {
    background-color: var(--fm-white);
    border: 1px solid var(--fm-black);
    color: var(--fm-black);
}
.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active {
    background-color: var(--fm-black);
    border-color: var(--fm-black);
    color: var(--fm-white);
}

.btn-link { color: var(--fm-black); text-decoration: underline; }
.btn-link:hover { color: #000; }

.btn:focus, .btn-check:focus + .btn {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
}

.btn-close { filter: none; }

/* ── 5. Status system — meaning through shape and weight, never color ──────── */
.status-badge {
    display: inline-block;
    padding: 0.28em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--fm-font-display);
    letter-spacing: 0.04em;
    line-height: 1.25;
    border: 1px solid var(--fm-black);
    border-radius: 0;
    white-space: nowrap;
}
.status-ok { background: var(--fm-white); color: var(--fm-black); }
.status-ok::before { content: "✓ "; }
.status-warn { background: var(--fm-gray-10); color: var(--fm-black); }
.status-warn::before { content: "⚠ "; }
.status-critical { background: var(--fm-black); color: var(--fm-white); border-color: var(--fm-black); }
.status-critical::before { content: "! "; }
.status-neutral { background: var(--fm-white); color: var(--fm-gray-60); border-color: var(--fm-gray-30); }
/* Terminal states (Sold, Archived): solid black like critical, but no alarm symbol. */
.status-final { background: var(--fm-black); color: var(--fm-white); border-color: var(--fm-black); }

/* Safety net: legacy Bootstrap badge utilities used on remaining pages map to
   the same three looks. Bootstrap's .bg-* carry !important, so these must too. */
.badge { border-radius: 0; font-weight: 600; letter-spacing: 0.04em; }
.badge.bg-success {
    background-color: var(--fm-white) !important;
    color: var(--fm-black) !important;
    border: 1px solid var(--fm-black);
}
.badge.bg-warning, .badge.bg-info, .badge.bg-primary {
    background-color: var(--fm-gray-10) !important;
    color: var(--fm-black) !important;
    border: 1px solid var(--fm-black);
}
.badge.bg-danger, .badge.bg-dark {
    background-color: var(--fm-black) !important;
    color: var(--fm-white) !important;
    border: 1px solid var(--fm-black);
}
.badge.bg-secondary, .badge.bg-light {
    background-color: var(--fm-white) !important;
    color: var(--fm-gray-60) !important;
    border: 1px solid var(--fm-gray-30);
}

/* ── 6. Alerts — bordered paper notes, weight = severity ───────────────────── */
.alert { border-radius: 0; }
.alert-success {
    background: var(--fm-white);
    border: 1px solid var(--fm-black);
    color: var(--fm-black);
}
.alert-success::before { content: "✓ "; font-weight: 700; }
.alert-danger {
    background: var(--fm-white);
    border: 2px solid var(--fm-black);
    color: var(--fm-black);
    font-weight: 600;
}
.alert-danger::before { content: "! "; font-weight: 700; }
.alert-warning, .alert-info {
    background: var(--fm-gray-10);
    border: 1px solid var(--fm-black);
    color: var(--fm-black);
}

/* ── 7. Cards, tables, forms ───────────────────────────────────────────────── */
.card {
    border: 1px solid var(--fm-gray-30);
    border-radius: 0;
    box-shadow: none;
}
.card-header {
    background: var(--fm-white);
    border-bottom: 1px solid var(--fm-black);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--fm-font-display);
}
.card-metric { border-color: var(--fm-black); }
.shadow-sm, .shadow { box-shadow: none !important; }

.table { color: var(--fm-ink); }
.table thead th {
    border-bottom: 2px solid var(--fm-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    font-family: var(--fm-font-display);
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--fm-gray-10);
}
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--fm-gray-10);
}
.table > :not(:first-child) { border-top: none; }

.form-control, .form-select {
    border-radius: 0;
    border-color: var(--fm-gray-30);
    color: var(--fm-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--fm-black);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
}
.form-check-input { border-radius: 0 !important; border-color: var(--fm-gray-60); }
.form-check-input:checked { background-color: var(--fm-black); border-color: var(--fm-black); }
.form-check-input:focus { border-color: var(--fm-black); box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1); }
.input-group-text { border-radius: 0; background: var(--fm-gray-10); border-color: var(--fm-gray-30); }

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--fm-black); border-width: 2px; }
.invalid-feedback, .text-danger.field-validation-error, span.field-validation-error {
    color: var(--fm-black) !important;
    font-weight: 600;
}
.form-control.is-valid, .form-select.is-valid { border-color: var(--fm-gray-60); }

/* ── 8. Navigation components ──────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--fm-gray-30); }
.nav-tabs .nav-link {
    color: var(--fm-gray-60);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--fm-font-display);
}
.nav-tabs .nav-link:hover { color: var(--fm-black); border-bottom-color: var(--fm-gray-30); }
.nav-tabs .nav-link.active { color: var(--fm-black); background: transparent; border-bottom: 2px solid var(--fm-black); }

.nav-pills .nav-link { color: var(--fm-black); border-radius: 0; }
.nav-pills .nav-link.active { background-color: var(--fm-black); color: var(--fm-white); }

.breadcrumb { font-size: 0.85rem; }
.breadcrumb-item a { color: var(--fm-gray-60); }
.breadcrumb-item.active { color: var(--fm-black); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fm-gray-30); }

.page-link {
    color: var(--fm-black);
    border-color: var(--fm-gray-30);
    border-radius: 0 !important;
}
.page-link:hover { background: var(--fm-gray-10); color: #000; border-color: var(--fm-gray-30); }
.page-item.active .page-link { background: var(--fm-black); border-color: var(--fm-black); color: var(--fm-white); }
.page-item.disabled .page-link { color: var(--fm-gray-30); }

.list-group-item { border-radius: 0 !important; border-color: var(--fm-gray-30); color: var(--fm-ink); }
.list-group-item.active { background: var(--fm-black); border-color: var(--fm-black); }

.dropdown-menu { border-radius: 0; border: 1px solid var(--fm-black); box-shadow: none; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--fm-gray-10); color: #000; }
.dropdown-item.active { background: var(--fm-black); color: var(--fm-white); }

.progress { border-radius: 0; background: var(--fm-gray-10); }
.progress-bar { background-color: var(--fm-black) !important; }

.modal-content { border-radius: 0; border: 1px solid var(--fm-black); }

/* ── 9. Ticket board — column identity via border style, not hue ───────────── */
.fm-col-new { border-top: 3px solid var(--fm-black) !important; }
.fm-col-progress { border-top: 3px double var(--fm-black) !important; border-top-width: 5px !important; }
.fm-col-waiting { border-top: 3px dashed var(--fm-gray-60) !important; }
.fm-col-done { border-top: 3px solid var(--fm-gray-30) !important; }
.fm-col-archived { border-top: 3px dotted var(--fm-gray-30) !important; }
.fm-card-overdue { border: 2px solid var(--fm-black) !important; }

/* ── 10. Utility grayscaling (match Bootstrap's !important) ────────────────── */
.text-danger { color: var(--fm-black) !important; font-weight: 600; }
.text-success { color: var(--fm-black) !important; }
.text-warning, .text-info { color: var(--fm-gray-60) !important; }
.text-primary { color: var(--fm-black) !important; }
.text-muted { color: var(--fm-gray-60) !important; }
.text-light { color: var(--fm-gray-60) !important; }

.bg-light { background-color: var(--fm-gray-10) !important; }
.bg-dark { background-color: var(--fm-black) !important; }
.bg-white { background-color: var(--fm-white) !important; }

.border-primary, .border-success, .border-danger, .border-dark { border-color: var(--fm-black) !important; }
.border-warning, .border-info, .border-secondary { border-color: var(--fm-gray-60) !important; }

.link-primary, .link-secondary { color: var(--fm-black) !important; }

/* ── 11. Focus & accessibility ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--fm-black); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 12. Print (QR-Karte, Berichte) ────────────────────────────────────────── */
@media print {
    .fm-navbar, .navbar, .breadcrumb, .btn, form[role="search"] { display: none !important; }
    body { background: #fff; }
    .card { border: 1px solid #000; box-shadow: none; }
    a { text-decoration: none; color: #000; }
}