/* ──────────────────────────────────────────────
   MeinCRM – Custom Styles
   ────────────────────────────────────────────── */

:root {
  --crm-accent: #0d6efd;
  --crm-sidebar-w: 240px;
}

body {
  font-size: .925rem;
}

/* ── Login Page ── */
.login-page {
  background: #0a0a14;
  min-height: 100vh;
}

.login-card {
  width: 400px;
}

.login-icon {
  width: 64px;
  height: 64px;
  background: #0d6efd;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
}

/* ── Avatar Circles ── */
.avatar-circle {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-circle-sm {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9ecef;
  color: #495057;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Status Cards ── */
.status-card {
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: default;
  border-radius: 16px !important;
  overflow: hidden;
}
.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.status-card.status-secondary .card-body { background: #6c757d !important; color: #fff; }
.status-card.status-warning  .card-body { background: #ffc107 !important; color: #000; }
.status-card.status-danger   .card-body { background: #dc3545 !important; color: #fff; }
.status-card.status-primary  .card-body { background: #0d6efd !important; color: #fff; }
.status-card.status-success  .card-body { background: #198754 !important; color: #fff; }
.status-card.status-dark     .card-body { background: #212529 !important; color: #fff; }

/* ── Tables ── */
.table > :not(caption) > * > * {
  padding: .65rem .85rem;
}

.table-hover tbody tr {
  transition: background-color .1s;
}

/* ── Cards ── */
.card {
  transition: box-shadow .15s ease;
}

/* ── Status Select (inline, no border) ── */
.status-select {
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 6px;
  font-size: .85rem;
}
.status-select:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .25);
}

/* ── Navbar active ── */
.navbar .nav-link.active {
  background: rgba(255, 255, 255, .12);
  border-radius: 6px;
}

/* ── Progress bars ── */
.progress {
  background: #e9ecef;
}

/* ── Form controls ── */
.form-control:focus,
.form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2);
}

/* ── Badges as links ── */
a.badge:hover {
  opacity: .85;
  text-decoration: none !important;
}

/* ── Alert icons ── */
.alert {
  font-size: .9rem;
}

/* ── Input group fix ── */
.input-group .form-control.border-start-0:focus {
  border-color: #dee2e6;
  box-shadow: none;
}
.input-group:focus-within .input-group-text {
  border-color: #86b7fe;
}
.input-group:focus-within .form-control {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2);
}

/* ── Import Upload Zone ── */
.upload-zone {
  border: 2px dashed #dee2e6;
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: #0d6efd;
  background: rgba(13, 110, 253, .04);
}
.upload-zone.drag-over {
  background: rgba(13, 110, 253, .08);
}
.fw-mono {
  font-family: monospace;
  font-size: 1rem;
}

/* ── Responsive ── */
@media (max-width: 576px) {
  .login-card {
    width: 100%;
    border-radius: 0 !important;
  }
  .login-page {
    align-items: flex-start;
  }
}

/* ════════ MOBILE-OPTIMIERUNG (Tablet & Handy) ════════ */
@media (max-width: 768px) {

  body { font-size: .9rem; }

  .container-fluid { padding-left: .8rem; padding-right: .8rem; }

  h4.fw-bold { font-size: 1.2rem; }
  h5.fw-bold { font-size: 1.05rem; }

  /* Kopfzeilen-Buttons (z.B. „Neuer Kunde") volle Breite & Abstand */
  .d-flex.justify-content-between > a.btn,
  .d-flex.justify-content-between > .btn { white-space: nowrap; }

  /* Such-/Filter-Formulare: alle Felder untereinander, volle Breite */
  form.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  form.row .col-auto { width: 100%; }
  form.row .col-auto .btn { width: 100%; margin: 0 0 .35rem 0 !important; }

  /* ── Tabellen als Karten (Label oben, Wert darunter) ────── */
  table.mobile-cards thead { display: none; }
  table.mobile-cards,
  table.mobile-cards tbody,
  table.mobile-cards tr,
  table.mobile-cards td { display: block; width: 100%; }

  table.mobile-cards tr {
    position: relative;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    margin: 0 0 12px 0;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }

  table.mobile-cards td {
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
    overflow-wrap: anywhere;
  }
  table.mobile-cards td:last-child { border-bottom: none; }

  /* Spalten-Bezeichnung als kleines Label darüber */
  table.mobile-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #9aa0a6;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 2px;
  }

  /* Name groß & ohne Trennlinie zum nächsten */
  table.mobile-cards td[data-label]:first-of-type { font-size: 1.05rem; }

  /* Checkbox-Zelle: klein oben rechts in die Karte */
  table.mobile-cards td.cell-check {
    position: absolute;
    top: 10px; right: 12px;
    width: auto; padding: 0; border: none;
  }
  table.mobile-cards td.cell-check::before { content: none; }

  /* Aktionen: Buttons in einer Reihe, volle Breite */
  table.mobile-cards td.cell-actions {
    text-align: left;
    padding-top: 10px;
    display: flex; gap: 8px;
  }
  table.mobile-cards td.cell-actions::before { content: none; }
  table.mobile-cards td.cell-actions .btn { flex: 1; padding: .45rem; margin: 0 !important; }

  /* Dropdowns volle Breite, gut antippbar */
  table.mobile-cards td .form-select {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  /* Bulk-Aktionsleiste mobil schmaler */
  #bulkBar { min-width: auto !important; left: 8px !important; right: 8px !important;
             transform: none !important; width: auto; }
  #bulkBar .card-body { padding: 10px 12px !important; }

  /* Status-/Übersichtskarten kompakter */
  .status-card .fs-2 { font-size: 1.5rem !important; }

  /* Navbar: Suchfeld volle Breite wenn geöffnet */
  #navSearchWrap { min-width: 100% !important; }
  #navSearchResults { width: 100% !important; }
}

/* Tabellen die NICHT als Karten umgebaut werden: sauberes horizontales Scrollen */
@media (max-width: 768px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ── Aktualisieren-Button Rotation ── */
@keyframes crm-spin { to { transform: rotate(360deg); } }
.spin-anim { display: inline-block; animation: crm-spin .6s linear infinite; }

/* ════════ Dunkles Design (data-bs-theme="dark") ════════ */

/* Grundfarben: Hintergrund + Text überall lesbar */
[data-bs-theme="dark"]                    { color-scheme: dark; }
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .bg-light          { background-color: #14171a !important; color: #dee2e6; }
[data-bs-theme="dark"] .bg-white          { background-color: #212529 !important; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label        { color: #f1f3f5; }
[data-bs-theme="dark"] .text-dark         { color: #dee2e6 !important; }
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .form-text         { color: #98a2ab !important; }
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .link-dark         { color: #dee2e6 !important; }

/* Karten & Listen */
[data-bs-theme="dark"] .card              { background-color: #212529; color: #dee2e6; }
[data-bs-theme="dark"] .card .card-header { background-color: #212529 !important; color: #f1f3f5; }
[data-bs-theme="dark"] .list-group-item   { background-color: #212529; color: #dee2e6; border-color: #343a40; }
[data-bs-theme="dark"] .list-group-item-action:hover { background-color: #2b3035; color: #f1f3f5; }

/* Tabellen: Kopf, Zeilen, Ränder, Hover */
[data-bs-theme="dark"] .table             { --bs-table-color: #dee2e6; --bs-table-bg: transparent;
                                            --bs-table-border-color: #343a40;
                                            --bs-table-hover-bg: rgba(255,255,255,.045);
                                            --bs-table-hover-color: #f1f3f5; color: #dee2e6; }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light th    { --bs-table-bg: #2b3035; --bs-table-color: #dee2e6;
                                            background-color: #2b3035 !important; color: #dee2e6 !important;
                                            border-color: #343a40 !important; }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: #343a40; }
[data-bs-theme="dark"] .table-success     { --bs-table-bg: rgba(25,135,84,.25); }
[data-bs-theme="dark"] .table-danger      { --bs-table-bg: rgba(220,53,69,.2); }

/* Formulare */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select       { background-color: #2b3035; color: #dee2e6; border-color: #495057; }
[data-bs-theme="dark"] .form-control::placeholder { color: #7d868e; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background-color: #2b3035; color: #f1f3f5; }
[data-bs-theme="dark"] .input-group-text  { background-color: #2b3035; color: #adb5bd; border-color: #495057; }
[data-bs-theme="dark"] .form-check-input:not(:checked) { background-color: #2b3035; border-color: #6c757d; }

/* Buttons & Badges */
[data-bs-theme="dark"] .btn-outline-secondary { color: #adb5bd; border-color: #495057; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: #343a40; color: #f1f3f5; }
[data-bs-theme="dark"] .btn-outline-dark  { color: #dee2e6; border-color: #6c757d; }
[data-bs-theme="dark"] .btn-outline-dark:hover { background-color: #343a40; color: #fff; }
[data-bs-theme="dark"] .btn-light         { background-color: #343a40; color: #dee2e6; border-color: #495057; }
[data-bs-theme="dark"] .badge.bg-light    { background-color: #343a40 !important; color: #dee2e6 !important; }
[data-bs-theme="dark"] .badge.text-dark:not(.bg-warning):not(.bg-info) { color: #dee2e6 !important; }

/* Hinweise / Alerts */
[data-bs-theme="dark"] .alert-light       { background-color: #212529; color: #adb5bd; border-color: #343a40 !important; }
[data-bs-theme="dark"] .alert-secondary   { background-color: #2b3035; color: #dee2e6; }

/* Dropdowns & Navigation */
[data-bs-theme="dark"] .dropdown-menu     { background-color: #212529; border-color: #343a40; }
[data-bs-theme="dark"] .dropdown-item     { color: #dee2e6; }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: #2b3035; color: #f1f3f5; }
[data-bs-theme="dark"] .dropdown-divider  { border-color: #343a40; }

/* Navbar-Suche */
[data-bs-theme="dark"] #navSearchResults  { background-color: #212529 !important; }
[data-bs-theme="dark"] #navSearchResults .text-dark { color: #dee2e6 !important; }
[data-bs-theme="dark"] #navSearchResults .border-bottom { border-color: #343a40 !important; }
.nav-hit:hover                            { background: #f8f9fa; }
[data-bs-theme="dark"] .nav-hit:hover     { background: #2b3035 !important; }

/* Avatare (ohne Gruppenfarbe) */
[data-bs-theme="dark"] .avatar-circle-sm  { background: #343a40; color: #adb5bd; }

/* Ränder allgemein */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top        { border-color: #343a40 !important; }

/* Modals & Pagination (falls verwendet) */
[data-bs-theme="dark"] .modal-content     { background-color: #212529; color: #dee2e6; }
[data-bs-theme="dark"] .page-link         { background-color: #212529; border-color: #343a40; color: #dee2e6; }

/* ════════ Mobile Web-App (iOS / PWA) ════════ */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }

/* Safe Areas: Inhalt nicht unter Notch/Statusleiste (Standalone-Modus) */
.navbar.sticky-top { padding-top: calc(0.5rem + env(safe-area-inset-top)); }

@media (max-width: 767.98px) {
  /* iOS zoomt bei Eingabefeldern mit Schrift <16px hinein – verhindern */
  .form-control, .form-select, input[type="text"], input[type="email"],
  input[type="password"], input[type="search"], textarea, select {
    font-size: 16px !important;
  }
  /* Größere Tap-Flächen */
  .btn-sm { padding: .4rem .65rem; }
  .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
}

/* ── Mobile Tab-Bar (App-Navigation unten) ── */
.mobile-tabbar { display: none; }

@media (max-width: 991.98px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .mobile-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070;
    background: #1c1f23;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
  }
  .mobile-tabbar a {
    flex: 1; text-align: center; color: #9aa3ab; text-decoration: none;
    font-size: .66rem; line-height: 1.15; padding: 4px 2px; border-radius: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-tabbar a i { display: block; font-size: 1.3rem; margin-bottom: 2px; }
  .mobile-tabbar a.active { color: #4d9fff; }
  .mobile-tabbar a:active { background: rgba(255,255,255,.06); }

  /* Chat-Button & -Fenster über die Tab-Bar heben */
  #chatFab   { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  #chatPanel { bottom: calc(146px + env(safe-area-inset-bottom)) !important; }
}

/* ── Verwalten-Übersicht (admin_menu.php) ── */
.admin-tile { transition: transform .12s ease, box-shadow .12s ease; }
.admin-tile:active, .admin-tile:hover { transform: translateY(-2px); box-shadow: 0 .4rem .9rem rgba(0,0,0,.12) !important; }

/* ── Modals immer über Tab-Bar (1070) & Chat-Button (1080) ── */
.modal { z-index: 1090; }
.modal-backdrop { z-index: 1085; }

/* ── Navigations-Gedächtnis: Hervorhebung des zurückgekehrten Datensatzes ── */
@keyframes navReturnPulse {
  0%, 100% { background-color: transparent; }
  15%, 55% { background-color: rgba(13,110,253,.16); }
}
.nav-return-highlight, .nav-return-highlight td { animation: navReturnPulse 2.2s ease; }
[data-bs-theme="dark"] .nav-return-highlight,
[data-bs-theme="dark"] .nav-return-highlight td { animation: navReturnPulseDark 2.2s ease; }
@keyframes navReturnPulseDark {
  0%, 100% { background-color: transparent; }
  15%, 55% { background-color: rgba(77,159,255,.20); }
}

/* ── WhatsApp-Verlauf (admin_wa_stats.php + customer_edit.php) ──
   Blasen brauchen eine eigene Textfarbe: der helle Blasen-Hintergrund
   bleibt im Dunkelmodus sonst mit hellem Vererbungstext stehen. */
.wa-thread            { background: #efeae2; }
.wa-row               { display: flex; margin-bottom: 6px; }
.wa-row.out           { justify-content: flex-end; }
.wa-row.in            { justify-content: flex-start; }
.wa-bubble            { max-width: 75%; padding: 7px 11px; border-radius: 12px;
                        font-size: .85rem; white-space: pre-wrap; color: #111b21;
                        box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-bubble.out        { background: #d9fdd3; border-bottom-right-radius: 4px; }
.wa-bubble.in         { background: #ffffff; border-bottom-left-radius: 4px; }
.wa-meta              { font-size: .63rem; color: #5c6b6b; margin-top: 3px; text-align: right; }

[data-bs-theme="dark"] .wa-thread     { background: #0b141a; }
[data-bs-theme="dark"] .wa-bubble     { color: #e9edef; box-shadow: 0 1px 1px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .wa-bubble.out { background: #005c4b; }
[data-bs-theme="dark"] .wa-bubble.in  { background: #202c33; }
[data-bs-theme="dark"] .wa-meta       { color: #8696a0; }
/* Auf der dunkelgrünen Blase reicht das normale Meta-Grau nicht (2,6:1) */
[data-bs-theme="dark"] .wa-bubble.out .wa-meta { color: #bed7ce; }

/* Zustellstatus. Farben je Modus, weil sie auf der eigenen Blase sitzen:
   WhatsApp-Grün auf Hellgrün wäre 1,8:1, auf Dunkelgrün 4,0:1 – beides zu wenig. */
.wa-st              { font-weight: 600; }
.wa-st-sent         { color: inherit; }
.wa-st-delivered,
.wa-st-read         { color: #0a6e35; }
.wa-st-failed       { color: #c02533; }
.wa-st-unknown      { color: #8a4b06; }

[data-bs-theme="dark"] .wa-st-delivered,
[data-bs-theme="dark"] .wa-st-read    { color: #69e6a0; }
[data-bs-theme="dark"] .wa-st-failed  { color: #ffc4c9; }
[data-bs-theme="dark"] .wa-st-unknown { color: #ffc078; }