/* ==========================================================================
   Die Schraubendreher – Flottenmanagement
   Gestaltungsidee: eine echte Kfz-/Motorrad-Werkstatt, keine generische
   SaaS-Optik. Anleihen bei Werkstattschildern, Typenschildern, Werkzeug-
   kisten und Auftragszetteln statt austauschbarer Dashboard-Kacheln.
   ========================================================================== */

:root {
  /* Papier/Tinte statt reinem Weiß/Schwarz - wärmer, wie ein Auftragsblock */
  --fm-bg: #EDE9DF;
  --fm-surface: #FFFFFF;
  --fm-text: #201F1C;
  --fm-muted: #726A5C;
  --fm-border: #DCD5C4;

  /* Werkstatt-Blau als Hauptfarbe (Werkzeug/Metall), Bernstein als Signalfarbe */
  --fm-primary: #1F4E79;
  --fm-primary-dark: #163A5C;
  --fm-signal: #E29A3C;
  --fm-danger: #B23A2E;
  --fm-success: #3D7A4E;
  --fm-radius: 10px;

  --fm-ink: #1B1B1E;
  --fm-sidebar-bg: var(--fm-ink);
  --fm-sidebar-text: #F2EFE7;
  --fm-sidebar-text-muted: #A9A296;
  --fm-sidebar-active: rgba(226,154,60,.14);
  --fm-sidebar-width: 232px;

  --fm-font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --fm-font-body: 'Work Sans', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fm-font-body);
  background: var(--fm-bg);
  color: var(--fm-text);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--fm-primary); }
h1, h2, h3 {
  font-family: var(--fm-font-display);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}
:focus-visible { outline: 2px solid var(--fm-signal); outline-offset: 2px; }

/* ==========================================================
   SIDEBAR - schwarzes Werkzeugkisten-Blau statt Farbverlauf,
   Bernstein-Streifen oben als einmaliges Signature-Element
   ========================================================== */
.fm-shell { display: flex; min-height: 100vh; }

.fm-sidebar {
  width: var(--fm-sidebar-width); flex-shrink: 0;
  background: var(--fm-sidebar-bg); color: var(--fm-sidebar-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-top: 5px solid var(--fm-signal);
}
.fm-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 18px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.fm-sidebar-brand img.fm-logo { height: 38px; }
.fm-sidebar-brand .fm-portalname {
  font-family: var(--fm-font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2;
}
.fm-sidebar-brand .fm-portalname small {
  display: block; font-family: var(--fm-font-body); font-weight: 400; font-size: .72rem;
  color: var(--fm-sidebar-text-muted); letter-spacing: .03em;
}

.fm-sidebar nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; }
.fm-sidebar nav a {
  font-family: var(--fm-font-display);
  color: var(--fm-sidebar-text); text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: 10px 14px; border-left: 3px solid transparent; display: block; opacity: .78;
  transition: background .12s ease, opacity .12s ease, border-color .12s ease;
}
.fm-sidebar nav a:hover { background: rgba(255,255,255,.06); opacity: 1; }
.fm-sidebar nav a.active { background: var(--fm-sidebar-active); border-left-color: var(--fm-signal); opacity: 1; }
.fm-sidebar nav a.fm-logout { margin-top: auto; }
.fm-sidebar-foot { padding: 14px 18px 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; }
.fm-sidebar-foot a { color: var(--fm-sidebar-text-muted); }

.fm-main { flex: 1; min-width: 0; }
.fm-wrap { max-width: 1150px; margin: 28px auto; padding: 0 24px 40px; }

/* ==========================================================
   CARDS - ruhig, wie ein Klemmbrett-Blatt: dünner Rahmen,
   kein Schatten, kein einheitlicher Farbbalken auf allem
   ========================================================== */
.fm-card {
  background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
  padding: 22px; margin-bottom: 18px;
}
.fm-card h2 { margin-top: 0; font-size: 1.2rem; color: var(--fm-ink); }

table.fm-table { width: 100%; border-collapse: collapse; }
table.fm-table th, table.fm-table td { text-align: left; padding: 10px 12px; font-size: .92rem; }
table.fm-table th {
  color: var(--fm-ink); font-family: var(--fm-font-display); font-weight: 500; font-size: .84rem;
  border-bottom: 2px solid var(--fm-ink);
}
table.fm-table td { border-bottom: 1px solid var(--fm-border); }
table.fm-table tr:hover td { background: color-mix(in srgb, var(--fm-primary) 4%, transparent); }

.fm-btn {
  display: inline-block; background: var(--fm-primary); color: #fff; border: none; padding: 10px 18px;
  border-radius: 6px; cursor: pointer; font-family: var(--fm-font-display); font-weight: 500;
  font-size: .92rem; letter-spacing: .01em; text-decoration: none;
  transition: background .12s ease, transform .08s ease;
}
.fm-btn:hover { background: var(--fm-primary-dark); transform: translateY(-1px); }
.fm-btn.fm-danger { background: var(--fm-danger); }
.fm-btn.fm-secondary { background: #55504A; }

.fm-form label { display: block; font-weight: 600; margin: 12px 0 5px; font-size: .86rem; color: var(--fm-ink); }
.fm-form input, .fm-form select, .fm-form textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--fm-border); border-radius: 7px;
  font-size: .92rem; font-family: var(--fm-font-body); background: var(--fm-surface); color: var(--fm-text);
  transition: border-color .12s ease;
}
.fm-form input:focus, .fm-form select:focus, .fm-form textarea:focus {
  outline: none; border-color: var(--fm-primary);
}

.fm-flash { padding: 11px 15px; border-radius: 7px; margin-bottom: 16px; font-size: .9rem; font-weight: 500; border-left: 4px solid transparent; }
.fm-flash.success { background: #E4EFE6; color: var(--fm-success); border-left-color: var(--fm-success); }
.fm-flash.error { background: #F6E4E1; color: var(--fm-danger); border-left-color: var(--fm-danger); }

/* Badges als kleine Typenschild-Tags statt runder SaaS-Pills */
.fm-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: .74rem; font-weight: 700;
  font-family: var(--fm-font-display); letter-spacing: .02em;
}
.fm-badge.ok { background: #E4EFE6; color: var(--fm-success); }
.fm-badge.warn { background: #FBECD6; color: #9A6117; }
.fm-badge.danger { background: #F6E4E1; color: var(--fm-danger); }

.fm-auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--fm-ink); padding: 20px; position: relative; overflow: hidden; }
.fm-auth-bg { position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
.fm-auth-bg img {
  max-width: 100vw; max-height: 100vh; width: auto; height: auto; display: block;
}
.fm-auth-card { position: relative; z-index: 1; }
.fm-auth-brand { position: relative; z-index: 1; text-align: center; margin-bottom: 22px; }
.fm-auth-brand img.fm-logo-big { max-height: 110px; max-width: 260px; display: block; margin: 0 auto 14px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.fm-auth-brand h1 { font-family: var(--fm-font-display); color: #fff; font-size: 1.5rem; margin: 0; }
.fm-auth-brand p { color: var(--fm-sidebar-text-muted); font-size: .82rem; letter-spacing: .06em; margin: 4px 0 0; }
.fm-auth-card {
  background: var(--fm-surface); border-radius: 10px; padding: 34px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45); border-top: 4px solid var(--fm-signal);
}
.fm-auth-card img.fm-logo { max-height: 56px; display:block; margin: 0 auto 6px; }
.fm-auth-card h1 { text-align: center; font-size: 1.3rem; margin-top: 4px; }
.fm-captcha-row { display: flex; align-items: center; gap: 10px; }
.fm-captcha-row img { border-radius: 6px; border: 1px solid var(--fm-border); }

/* ==========================================================
   THEMES - gleiche Struktur, andere Werkstoff-/Farbwelt
   ========================================================== */
body.theme-dunkel {
  --fm-bg: #17181C; --fm-surface: #1F2126; --fm-text: #EDEBE6; --fm-muted: #9B968C; --fm-border: #33353B;
  --fm-primary: #4F86C6; --fm-primary-dark: #3D6DA6; --fm-ink: #0E0F12;
}
body.theme-blau {
  --fm-bg: #E9EEF3; --fm-surface: #FFFFFF; --fm-text: #16232F; --fm-muted: #56697A; --fm-border: #CFDCE6;
  --fm-primary: #0B5FAE; --fm-primary-dark: #094C8C; --fm-ink: #0B1D2B;
}
body.theme-gruen {
  --fm-bg: #E9F1EA; --fm-surface: #FFFFFF; --fm-text: #17281A; --fm-muted: #55694F; --fm-border: #CFE0CC;
  --fm-primary: #2D6A3E; --fm-primary-dark: #235330; --fm-ink: #14200F;
}
body.theme-army {
  --fm-bg: #34362A; --fm-surface: #40422F; --fm-text: #EEEEDF; --fm-muted: #B9B79D; --fm-border: #52523C;
  --fm-primary: #8A9A4C; --fm-primary-dark: #71803A; --fm-ink: #23241A; --fm-signal: #D08A2E;
}
body.theme-army-grau {
  --fm-bg: #3A3B36; --fm-surface: #47483F; --fm-text: #EFEFE9; --fm-muted: #BDBDB0; --fm-border: #57584D;
  --fm-primary: #97998A; --fm-primary-dark: #7B7D6F; --fm-ink: #26271F; --fm-signal: #C98F3B;
}
body.theme-anthrazit {
  --fm-bg: #1D1F24; --fm-surface: #25272E; --fm-text: #EAEBEF; --fm-muted: #93969F; --fm-border: #33353E;
  --fm-primary: #C3592E; --fm-primary-dark: #A3471F; --fm-ink: #101116; --fm-signal: #E8A33D;
}

/* --- Neon-Varianten: Hell, Dunkel, Bunt --- */
body.theme-neon-hell {
  --fm-bg: #F5F6FC; --fm-surface: #FFFFFF; --fm-text: #16121F; --fm-muted: #6B6478; --fm-border: #E4DEF5;
  --fm-primary: #D6169E; --fm-primary-dark: #B0117F; --fm-ink: #16121F; --fm-signal: #17E8C4;
}
body.theme-neon-dunkel {
  --fm-bg: #0B0B14; --fm-surface: #151424;
  --fm-text: #E8E6F5; --fm-muted: #9C97B8; --fm-border: #2A2740;
  --fm-primary: #00E5FF; --fm-primary-dark: #00B8CC; --fm-ink: #050509; --fm-signal: #FF2FD0;
}
body.theme-neon-bunt {
  --fm-bg: #0D0B1A; --fm-surface: #17142B; --fm-text: #F1EEFF; --fm-muted: #A79FC9; --fm-border: #322C54;
  --fm-primary: #B026FF; --fm-primary-dark: #8E1ED1; --fm-ink: #07060F; --fm-signal: #FFD600;
}
/* Neon-Glow: gemeinsame Regeln für alle drei Neon-Themes (Buttons, aktive Navigation,
   Auth-Card) - ein Effekt, gezielt an wenigen Stellen, nicht auf der ganzen Seite verteilt */
body.theme-neon-hell .fm-btn,
body.theme-neon-dunkel .fm-btn,
body.theme-neon-bunt .fm-btn {
  box-shadow: 0 0 16px color-mix(in srgb, var(--fm-primary) 55%, transparent);
}
body.theme-neon-hell .fm-sidebar nav a.active,
body.theme-neon-dunkel .fm-sidebar nav a.active,
body.theme-neon-bunt .fm-sidebar nav a.active {
  text-shadow: 0 0 10px var(--fm-signal);
}
body.theme-neon-hell .fm-auth-card,
body.theme-neon-dunkel .fm-auth-card,
body.theme-neon-bunt .fm-auth-card {
  box-shadow: 0 0 50px color-mix(in srgb, var(--fm-signal) 35%, transparent), 0 24px 70px rgba(0,0,0,.45);
}
body.theme-neon-dunkel .fm-sidebar,
body.theme-neon-bunt .fm-sidebar {
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--fm-primary) 25%, transparent);
}
body.theme-neon-dunkel .fm-service-card,
body.theme-neon-bunt .fm-service-card,
body.theme-neon-hell .fm-service-card {
  border-left-color: var(--fm-signal);
}

/* Schlichte Kopfzeile für öffentliche Seiten ohne Sidebar (Impressum, Datenschutz, QR-Upload) */
.fm-public-header {
  display: flex; align-items: center; gap: 12px;
  background: var(--fm-ink); color: #fff;
  padding: 16px 24px; border-bottom: 4px solid var(--fm-signal);
}
.fm-public-header img.fm-logo { height: 38px; }
.fm-public-header .fm-portalname { font-family: var(--fm-font-display); font-weight: 600; font-size: 1.1rem; }

/* DSGVO-Consent-Banner */
.fm-consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--fm-surface); border-top: 1px solid var(--fm-border);
  padding: 16px 20px; box-shadow: 0 -8px 30px rgba(0,0,0,.15);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.fm-consent-banner p { margin: 0; flex: 1; min-width: 240px; font-size: .88rem; color: var(--fm-text); }
.fm-consent-banner a { color: var(--fm-primary); }

.fm-icon { vertical-align: -3px; flex-shrink: 0; }
.fm-sidebar nav a { display: flex; align-items: center; gap: 10px; }
.fm-sidebar-brand-icon {
  width: 38px; height: 38px; border-radius: 6px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fm-signal);
}
.fm-stat-icon {
  width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--fm-primary) 10%, transparent);
  color: var(--fm-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
}
.fm-btn .fm-icon { margin-right: 5px; }

/* ==========================================================
   MODAL / POPUP (z.B. "Neuen Kunden anlegen")
   ========================================================== */
.fm-modal-overlay {
  position: fixed; inset: 0; background: rgba(20,19,17,.6); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.fm-modal-overlay.open { display: flex; }
.fm-modal {
  background: var(--fm-surface); border-radius: 10px; width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.4);
  border-top: 4px solid var(--fm-signal);
}
.fm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.fm-modal-head h2 { margin: 0; font-size: 1.15rem; }
.fm-modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--fm-muted); line-height: 1; }
.fm-modal-close:hover { color: var(--fm-text); }
.fm-modal-body { padding: 18px 24px 24px; }
.fm-modal-hint { background: var(--fm-bg); border-radius: 7px; padding: 12px 14px; font-size: .84rem; color: var(--fm-muted); margin-bottom: 4px; }
.fm-modal-section-label {
  font-family: var(--fm-font-display); display: flex; align-items: center; gap: 6px; font-weight: 600;
  font-size: .84rem; color: var(--fm-primary); margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--fm-border);
}
.fm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ==========================================================
   TOAST-BENACHRICHTIGUNGEN (z.B. neue Terminanfrage)
   ========================================================== */
.fm-toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.fm-toast {
  background: var(--fm-ink); color: #F2EFE7; border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.3); border-left: 4px solid var(--fm-signal);
  cursor: pointer; animation: fm-toast-in .25s ease;
}
.fm-toast strong { display: block; font-family: var(--fm-font-display); font-size: .92rem; margin-bottom: 2px; }
.fm-toast span { font-size: .82rem; color: #B9B4A8; }
@keyframes fm-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================
   LEISTUNGSKATALOG (Cards im Werkstattzettel-Stil)
   ========================================================== */
.fm-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fm-service-card {
  background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius: 8px; padding: 16px 18px;
  position: relative; border-left: 3px solid var(--fm-primary);
}
.fm-service-card h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--fm-ink); }
.fm-service-card p { margin: 0; color: var(--fm-muted); font-size: .86rem; }
.fm-service-card .fm-service-duration { margin-top: 10px; font-size: .8rem; color: var(--fm-primary); font-weight: 600; font-family: var(--fm-font-display); }
.fm-service-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.fm-service-actions button {
  background: var(--fm-bg); border: 1px solid var(--fm-border); border-radius: 6px; width: 30px; height: 30px;
  cursor: pointer; font-size: .95rem; line-height: 1;
}
.fm-service-actions button.fm-icon-danger:hover { background: #F6E4E1; }
.fm-service-actions button.fm-icon-edit:hover { background: #E4ECF3; }

/* ==========================================================
   TERMINPLANER-KALENDER (Datepicker mit Feiertags-/Wochenendsperre)
   ========================================================== */
.fm-datepicker { position: relative; }
.fm-dp-display { cursor: pointer; background: var(--fm-surface); }
.fm-dp-popup {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 14px; width: min(300px, 90vw);
}
.fm-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fm-dp-title { font-family: var(--fm-font-display); font-weight: 600; font-size: .94rem; }
.fm-dp-nav {
  background: var(--fm-bg); border: 1px solid var(--fm-border); border-radius: 6px; width: 30px; height: 30px;
  cursor: pointer; font-size: 1.1rem; color: var(--fm-text); line-height: 1;
}
.fm-dp-nav:hover { background: var(--fm-primary); color: #fff; }
.fm-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--fm-muted); font-size: .74rem; font-weight: 700; margin-bottom: 4px; }
.fm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.fm-dp-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .86rem; cursor: default; color: var(--fm-text);
}
.fm-dp-cell.empty { visibility: hidden; }
.fm-dp-cell[data-selectable] { cursor: pointer; }
.fm-dp-cell[data-selectable]:hover { background: color-mix(in srgb, var(--fm-primary) 15%, transparent); }
.fm-dp-cell.blocked { color: var(--fm-muted); text-decoration: line-through; opacity: .5; cursor: not-allowed; }
.fm-dp-cell.holiday:not(.blocked) { background: #FBECD6; color: #9A6117; font-weight: 700; }
.fm-dp-cell.holiday.blocked { background: #F6E4E1; color: var(--fm-danger); }
.fm-dp-cell.selected { background: var(--fm-primary) !important; color: #fff !important; font-weight: 700; text-decoration: none; opacity: 1; }
.fm-dp-legend { display: flex; gap: 14px; margin-top: 10px; font-size: .74rem; color: var(--fm-muted); }
.fm-dp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }
.fm-dp-dot.holiday { background: #FBECD6; border: 1px solid #9A6117; }
.fm-dp-dot.blocked { background: #eee; border: 1px solid #999; }

@media (max-width: 860px) {
  .fm-shell { flex-direction: column; }
  .fm-sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden;
    border-top: none; border-bottom: 4px solid var(--fm-signal);
  }
  .fm-sidebar-brand { border-bottom: none; border-right: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }
  .fm-sidebar nav { flex-direction: row; padding: 10px; }
  .fm-sidebar nav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .fm-sidebar nav a.active { border-left: none; border-bottom-color: var(--fm-signal); }
  .fm-sidebar nav a.fm-logout { margin-top: 0; margin-left: auto; }
  .fm-sidebar-foot { display: none; }
  .fm-wrap { padding: 0 16px 30px; margin: 20px auto; }
  table.fm-table { display: block; overflow-x: auto; white-space: nowrap; }
}