/* ═══════════════════════════════════════════════════════════════════
   FIXBAU Admin Shell — zentrale Styles für ALLE Admin-Pages.
   Ausgelagert aus _styles.php + _polish.php → wird vom Browser EINMAL
   geladen + 1 Monat gecacht (siehe .htaccess ExpiresByType text/css).
   Bei Tab-Wechsel kommt diese Datei aus dem Cache — 0 Server-Roundtrip.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Reset + Body ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  background: #17130f; color: #f5ede1;
  min-height: 100svh; display: grid; place-items: center;
  padding: 24px; line-height: 1.5; font-size: 14.5px;
}

/* ─── Card / Row / Logout / Back / Headings ─────────────────────────── */
.card {
  width: 100%; max-width: 460px;
  background: #1f1a14;
  border: 1px solid rgba(255, 248, 239, .10);
  border-radius: 16px; padding: 28px;
}
/* flex-wrap: auf schmalen Screens (iPhone) reihen sich Zurück-Link/Titel/Extra-
   Links/Logout sonst alle auf EINER Zeile, der Titel wird dabei brutal
   zusammengequetscht und bricht mitten im Wort um. Mit wrap rutschen einzelne
   Elemente stattdessen sauber als GANZES in die nächste Zeile. */
.row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.row h1 { flex: 1 1 auto; min-width: 140px; }
.row .logout {
  color: #b8ab97; font-size: 12px;
  text-decoration: none; padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 248, 239, .10);
}
.row .logout:hover { color: #f5ede1; border-color: #ff6a00; }
.row .back {
  margin-left: auto; color: #b8ab97; font-size: 12px;
  text-decoration: none; padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 248, 239, .10);
}
.row .back:hover { color: #ff6a00; border-color: #ff6a00; }
.row h1 + .logout { margin-left: auto; }
h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.sub { margin: 0 0 22px; color: #b8ab97; font-size: 13.5px; }
.empty { color: #b8ab97; padding: 14px; border: 1px dashed rgba(255,248,239,.10); border-radius: 10px; text-align: center; }

.err {
  background: rgba(248, 113, 113, .12);
  border: 1px solid rgba(248, 113, 113, .35);
  color: #fda4a4;
  padding: 10px 14px; border-radius: 10px;
  margin-bottom: 16px; font-size: 13px;
}

/* ─── Forms (Login + Generic) ───────────────────────────────────────── */
.login-form { display: grid; gap: 12px; }
.fld { display: grid; gap: 4px; }
.fld span { font-size: 11px; color: #b8ab97; text-transform: uppercase; letter-spacing: .04em; }
.fld input {
  background: #28221b; color: #f5ede1;
  border: 1px solid rgba(255, 248, 239, .10);
  border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 15px;
}
.fld input:focus { outline: 2px solid #ff6a00; outline-offset: 1px; }
.btn {
  background: #ff6a00; color: #17130f;
  border: none; padding: 11px 16px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 4px;
}
.btn:hover { background: #ff7a1a; }

/* ─── Project-List ──────────────────────────────────────────────────── */
.proj-list { display: grid; gap: 8px; }
.proj-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #28221b;
  border: 1px solid rgba(255, 248, 239, .10);
  border-radius: 10px;
  color: #f5ede1; text-decoration: none;
  font-size: 15px; transition: background .15s, border-color .15s;
}
.proj-link:hover, .proj-link:focus {
  background: #2f2820; border-color: #ff6a00; outline: none;
}
.proj-link.is-last { border-color: #ff6a00; }
.proj-name { font-weight: 500; }
.proj-id { color: #b8ab97; font-size: 12px; font-family: ui-monospace, monospace; }
.proj-tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 106, 0, .15); color: #ffa666;
  text-transform: uppercase; letter-spacing: .05em;
}
.arr { margin-left: auto; color: #ff6a00; }

details.create { margin-top: 18px; border-top: 1px solid rgba(255,248,239,.08); padding-top: 14px; }
details.create summary {
  cursor: pointer; color: #b8ab97; font-size: 13.5px;
  padding: 6px 0; list-style: none;
}
details.create summary::-webkit-details-marker { display: none; }
details.create summary::before { content: '▸ '; transition: transform .15s; display: inline-block; }
details.create[open] summary::before { transform: rotate(90deg); }
details.create[open] summary { color: #f5ede1; margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   Mobile App-Mode (≤ 720 px) — App-Feeling, kein Horizontal-Scroll
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
    overscroll-behavior-y: contain;
    max-width: 100vw;
    padding: 14px 14px calc(74px + env(safe-area-inset-bottom)) !important;
    display: block !important;
    place-items: unset !important;
    font-size: 14px;
    min-height: 100svh;
    line-height: 1.5;
  }

  main, section, article, aside, header, footer, nav,
  .card, .card-wide, .panel, .preview-pane, .editor-pane,
  .mail-app, .mail-main, .mail-side, .app, .app-mn, .app-sb,
  .wrap, .container, .content {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  main:not(.card),
  .wrap, .container, .content,
  .app-mn, .mail-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .card, .card-wide, .panel, section.card, .day-card, .hero, .wk-stat,
  .bericht-bar, fieldset {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 14px;
  }
  .entry, .mail-row, .doc-head, .meta-bar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .sheet, .preview-sheet, .doc-sheet {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  table { max-width: 100%; }
  .positions, .stunden-tab, .monthly-tab, table.data {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  code, pre, .break-anywhere, .iban, .long-url {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  a, button, .btn, .brand, .brand-title, .brand-sub, .logout-link,
  .hd-actions, .hd-actions *, .toolbar a, .toolbar button {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  /* .app-hd/.logout-link/.hd-spacer/.brand-* Mobile-Regeln kommen jetzt
     ZENTRAL aus fb_app_header_bar() (firma/_appshell.php) — keine zweite
     Kopie hier mehr, das war genau das Muster, das ständig auseinanderlief. */
  .card, .card-wide, .panel, main, section.card {
    width: 100% !important; max-width: 100% !important;
    padding: 18px 16px !important;
    border-radius: 14px;
    margin: 0 0 12px !important;
  }
  h1 { font-size: 19px; margin-bottom: 8px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
  .sub { font-size: 13px; margin-bottom: 16px; }
  .row { flex-wrap: wrap; gap: 8px; }

  .split { grid-template-columns: 1fr !important; gap: 14px !important; }
  .preview-pane, .editor-pane { position: static !important; max-height: none !important; }

  .save-bar, .bot-bar, .sticky-bottom {
    position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 50;
    padding: 12px 14px !important;
    background: rgba(20,16,12,.97);
    backdrop-filter: blur(8px);
  }

  table { font-size: 12.5px; }
  .table-wrap, .scroll-x {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -14px; padding: 0 14px;
  }

  input, select, textarea {
    max-width: 100% !important;
    width: 100%;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  input[type=checkbox], input[type=radio] { width: auto; min-width: 18px; }

  button, .btn, a.btn {
    min-height: 44px;
    font-size: 14px;
  }
  .btn-block { width: 100%; }

  .flash, .err, .ok { padding: 12px 14px; font-size: 13px; border-radius: 10px; margin-bottom: 12px; }

  .toolbar, .topbar, .actions-bar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 10px !important; }
}
@media (max-width: 380px) {
  body { padding: 12px 12px calc(78px + env(safe-area-inset-bottom)) !important; }
  .card, .card-wide, .panel { padding: 14px 12px !important; }
  h1 { font-size: 17px; }
  .toolbar, .topbar { padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Polish-Layer (.fb-fld / .fb-card / .fb-list / .fb-toolbar / .fb-empty)
   ═══════════════════════════════════════════════════════════════════ */

/* Form-Field-Pattern */
.fb-fld {
  display: grid; gap: 5px;
  margin-bottom: 14px;
}
.fb-fld > label,
.fb-fld > .fb-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b8ab97;
  margin-bottom: 1px;
}
.fb-fld > input,
.fb-fld > select,
.fb-fld > textarea {
  background: #28221b;
  color: #f5ede1;
  border: 1px solid rgba(255,248,239,.10);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.fb-fld > input::placeholder,
.fb-fld > textarea::placeholder { color: #7a6f5e; }
.fb-fld > input:focus,
.fb-fld > select:focus,
.fb-fld > textarea:focus {
  outline: 0;
  border-color: rgba(255,106,0,.55);
  background: #2c241c;
  box-shadow: 0 0 0 3px rgba(255,106,0,.15);
}
.fb-fld > .fb-hint {
  font-size: 11.5px; color: #7a6f5e;
  margin-top: 2px;
}
.fb-fld.err > input,
.fb-fld.err > select,
.fb-fld.err > textarea {
  border-color: rgba(229,62,62,.55);
  box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}

/* Premium Card */
.fb-card {
  background: #1f1a14;
  border: 1px solid rgba(255,248,239,.08);
  border-radius: 14px;
  padding: clamp(16px, 3.2vw, 22px);
  margin-bottom: clamp(12px, 1.8vw, 16px);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.fb-card.is-link,
a.fb-card { text-decoration: none; color: inherit; cursor: pointer; }
.fb-card.is-link:hover,
a.fb-card:hover {
  border-color: rgba(255,106,0,.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
}

/* List-Pattern */
.fb-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,248,239,.06);
  transition: background .12s;
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.fb-list-item:last-child { border-bottom: 0; }
.fb-list-item:hover {
  background: rgba(255,106,0,.06);
}
.fb-list-item.is-active {
  background: rgba(255,106,0,.12);
  border-left: 3px solid #ff6a00;
  padding-left: 13px;
}

/* Universal Hover-Lift für bestehende Cards */
.doc-card,
.kunden-card,
.beleg-card,
.projekt-card,
.kontakt-card,
.task-card {
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.doc-card:hover,
.kunden-card:hover,
.beleg-card:hover,
.projekt-card:hover,
.kontakt-card:hover,
.task-card:hover {
  border-color: rgba(255,106,0,.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Generic Focus-Ring */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,106,0,.12);
}

@media (max-width: 480px) {
  .fb-card { padding: clamp(14px, 4.5vw, 18px); }
}

/* Toolbar-Pattern */
.fb-toolbar {
  display: flex; gap: 12px;
  justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  background: #1f1a14;
  border: 1px solid rgba(255,248,239,.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.fb-toolbar .fb-filter-pills,
.fb-toolbar > .fb-pills {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.fb-toolbar .fb-pill,
.fb-toolbar .fb-filter-pills a {
  color: #b8ab97; text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  cursor: pointer; font-family: inherit;
  background: transparent;
}
.fb-toolbar .fb-pill:hover,
.fb-toolbar .fb-filter-pills a:hover {
  background: rgba(255,248,239,.04); color: #f5ede1;
}
.fb-toolbar .fb-pill.is-active,
.fb-toolbar .fb-filter-pills a.is-active {
  background: rgba(255,106,0,.14);
  color: #ffa666;
  border-color: rgba(255,106,0,.40);
  font-weight: 700;
}
.fb-toolbar .fb-count {
  background: rgba(255,248,239,.08); color: #b8ab97;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  min-width: 20px; text-align: center;
}
.fb-toolbar .fb-pill.is-active .fb-count,
.fb-toolbar .fb-filter-pills a.is-active .pill {
  background: rgba(255,106,0,.22); color: #ffd4a8;
}

/* Empty-State */
.fb-empty {
  padding: clamp(48px, 10vw, 80px) 20px;
  text-align: center; color: #7a6f5e;
  background: #1f1a14;
  border: 1px dashed rgba(255,248,239,.10);
  border-radius: 14px;
  margin-top: 8px;
}
.fb-empty .ic {
  font-size: 56px; opacity: .35;
  margin-bottom: 14px;
  display: block;
}
.fb-empty .fb-empty-title {
  font-size: 15px; font-weight: 600; color: #b8ab97;
  margin-bottom: 4px;
}
.fb-empty .fb-empty-hint {
  font-size: 12.5px; color: #7a6f5e;
}

@media (max-width: 720px) {
  .fb-toolbar { padding: 10px; gap: 8px; }
  .fb-toolbar .fb-pill,
  .fb-toolbar .fb-filter-pills a { padding: 7px 12px; font-size: 12px; min-height: 34px; }
}