@import url("font.css");
@import url("extra.css");

body {

    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}


.bg-primary {
  --bs-bg-opacity: 1;
  background-color: #8c8c8c !important;
}

.col-8 {
  flex: 0 0 auto;
  width: 100%;
}

.nav-link {
    color: #fff !important;
}

@media (min-width: 1400px)  {


    .navbar-expand-lg .navbar-collapse {
        padding-left: 60px !important;
    }
    .navbar-expand-lg {
        padding-left: 60px !important;
    }

        .col-6{
	        width: 80% !important;
        }

tr {
  border-width: 4px !important;}

    .card-title {
        text-align: center !important;
    }

    .card-subtitle {
        margin-top: 30px !important;
    }

    h1 {
         padding-top: 15px !important;
    }
}


/* Termin-Markierungen */
/*
  Hinweis: Bootstrap (.table-striped / .table-hover) setzt Hintergrundfarben auf ZELLEN (> *),
  nicht auf <tr>. Daher müssen wir die Farbe ebenfalls auf die Zellen anwenden.
*/
/*
 * Bootstrap 5 tables render striped/hover colors via an overlay (box-shadow)
 * using CSS variables (--bs-table-accent-bg). Setting only background-color
 * on <tr> or <td> won't show reliably. So we set BOTH the variables and
 * the overlay color on the cells.
 */
.table tbody tr.row-zahnriemen {
  --bs-table-bg: #ff9900;
  --bs-table-accent-bg: #ff9900;
}
.table tbody tr.row-reinigung {
  --bs-table-bg: #99ccff;
  --bs-table-accent-bg: #99ccff;
}
.table tbody tr.row-diagnose {
  --bs-table-bg: #99ff99;
  --bs-table-accent-bg: #99ff99;
}

.table tbody tr.row-umfangreich {
  --bs-table-bg: #c1876b;
  --bs-table-accent-bg: #c1876b;
}

.table tbody tr.row-zahnriemen > *,
.table tbody tr.row-reinigung > *,
.table tbody tr.row-diagnose > *,
.table tbody tr.row-umfangreich > * {
  background-color: var(--bs-table-bg) !important;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg) !important;
}

/* Button-Markierungen (Woche/Monat Ansicht) */
.btn.termin-zahnriemen { background-color: #ff9900 !important; border-color: #f97316 !important; color: #000 !important; }
.btn.termin-reinigung { background-color: #99ccff !important; border-color: #3b82f6 !important; color: #000 !important; }
.btn.termin-diagnose { background-color: #99ff99 !important; border-color: #22c55e !important; color: #000 !important; }
.btn.termin-umfangreich { background-color: #c1876b !important; border-color: #c1876b !important; color: #000 !important; }
.btn.termin-unfall { background-color: #fff3cd !important; border-color: #fff3cd !important; color: #000 !important; }

/* Farbliche Switches (Bootstrap form-switch) */
#umfangreichSwitch:checked { background-color: #c1876b !important; border-color: #c1876b !important; }
#umfangreichSwitch:focus { box-shadow: 0 0 0 .25rem rgba(193, 135, 107, 0.25) !important; }

#zahnSwitch:checked { background-color: #ff9900 !important; border-color: #ff9900 !important; }
#zahnSwitch:focus { box-shadow: 0 0 0 .25rem rgba(255, 153, 0, 0.25) !important; }

#reinigungSwitch:checked { background-color: #99ccff !important; border-color: #99ccff !important; }
#reinigungSwitch:focus { box-shadow: 0 0 0 .25rem rgba(153, 204, 255, 0.25) !important; }

#diagnoseSwitch:checked { background-color: #99ff99 !important; border-color: #99ff99 !important; }
#diagnoseSwitch:focus { box-shadow: 0 0 0 .25rem rgba(153, 255, 153, 0.25) !important; }

#unfallSwitch:checked { background-color: #fff3cd !important; border-color: #fff3cd !important; }
#unfallSwitch:focus { box-shadow: 0 0 0 .25rem rgba(153, 255, 153, 0.25) !important; }

/* Navbar: Inhalte mittig (alle Fenstergrößen) */
.navbar .navbar-center-wrap {
  gap: 0.75rem;
}

@media (min-width: 992px) {
  /* Links (Logo/Titel) absolut, damit das Zentrum wirklich mittig bleibt */
  .navbar .navbar-brand {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Zentrum */
  .navbar .navbar-center-wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
  }

  /* Rechts (User/Abmelden) soll die Mitte nicht verschieben */
  .navbar .navbar-right {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000; /* damit Dropdowns immer klickbar sind */
  }

  .navbar .navbar-right .dropdown-menu {
    z-index: 2001;
  }
}

@media (max-width: 991.98px) {
  .navbar .navbar-brand {
    position: static;
    transform: none;
  }

  /* Mobil: Suchfeld/Buttons sauber untereinander */
  .navbar .navbar-center-wrap,
  .navbar .navbar-center-wrap form,
  .navbar .navbar-center-wrap .input-group {
    width: 100%;
  }

  .navbar .navbar-right {
    margin-top: 0.75rem;
  }
}

/* ==========================
   Dashboard (Startseite)
   ========================== */
.dash-wrap{ padding: 8px 0 40px; }

.dash-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 12px 0 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.dash-title{ display:flex; align-items:center; gap:12px; }
.dash-logo{
  width:42px; height:42px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(13,110,253,0.10);
  color:#0d6efd;
  font-size: 20px;
}
.dash-h{ font-size: 16px; font-weight: 700; line-height: 1.1; }
.dash-sub{ font-size: 12px; color: rgba(0,0,0,0.6); }

.dash-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Dashboard Form (Datum / Suche / Neuer Termin) */
.dash-form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-form-row{ display:flex; align-items:center; gap:10px; }
.dash-form-row1{ }
.dash-form-row2{ }

.dash-search{ position:relative; }
.dash-search i{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color: rgba(0,0,0,0.45); }
.dash-search input{ padding-left: 30px; min-width: 220px; }

.dash-kpis{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1200px){ .dash-kpis{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 576px){
  .dash-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Topbar controls stack: date on first line, search + new button below */
  .dash-topbar{ align-items:flex-start; }
  .dash-controls{ width:100%; justify-content:flex-start; }
  .dash-form{ width:100%; flex-direction:column; align-items:stretch; }
  .dash-form-row{ width:100%; }
  .dash-form-row1{ }
  .dash-form-row2{ flex-direction:column; align-items:stretch; }

  #dashDate{ max-width:none !important; width:100%; }
  .dash-search{ width:100%; }
  .dash-search input{ min-width: 0; width:100%; }
  .dash-form-row2 .btn{ width:100%; }
}

.kpi-card{
  position:relative;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.kpi-ic{
  width:40px; height:40px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.04);
  font-size: 18px;
}
.kpi-label{ font-size: 12px; color: rgba(0,0,0,0.6); }
.kpi-val{ font-size: 22px; font-weight: 800; line-height: 1; }

.dash-grid{
  display:grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 14px;
}
@media (max-width: 992px){ .dash-grid{ grid-template-columns: 1fr; } }

.dash-card{ border-radius: 16px !important; border:1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }

.dash-section-title{ font-size: 16px; font-weight: 800; }
.dash-section-sub{ font-size: 12px; color: rgba(0,0,0,0.6); }

.dash-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  color: rgba(0,0,0,0.75);
  text-decoration:none;
  font-size: 13px;
  font-weight: 600;
}
.chip:hover{ background: rgba(13,110,253,0.06); }
.chip.active{ background: rgba(13,110,253,0.10); border-color: rgba(13,110,253,0.25); color:#0d6efd; }

.dot{ width:10px; height:10px; border-radius: 50%; display:inline-block; }
.dot-umfangreich{ background: #c1876b; }
.dot-diagnose{ background: #99ff99; }

.dash-table{ table-layout: fixed; width:100%; }
.dash-table thead th{ font-size: 12px; color: rgba(0,0,0,0.55); font-weight: 800; }
.dash-table td{ vertical-align: middle; }

/* Spalten sauber ausrichten */
.dash-table th, .dash-table td{ text-align:left; }
.dash-table th:nth-child(1), .dash-table td:nth-child(1){ white-space:nowrap; }
.dash-table th:nth-child(4), .dash-table td:nth-child(4){ white-space:nowrap; }

/* Header "Zeit" optisch über der Uhrzeit (nicht über dem Marker) */
.dash-table thead th:nth-child(1){
  padding-left: calc(0.75rem + 6px + 12px);
}

/* Inhalt darf umbrechen (ohne Wörter in einzelne Buchstaben zu zerlegen) */
.dash-kunde, .dash-kz{ overflow-wrap: break-word; word-break: normal; }

/* Mobile: Tabelle nicht zusammenquetschen (horizontal scroll statt Buchstaben-Spalten) */
@media (max-width: 768px){
  .dash-table{ min-width: 720px; }
  .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
}

.dash-row{ position:relative; }

/* Zeit-Spalte: Marker + Uhrzeit sauber in einer Zelle */
.dash-time{
  display:flex;
  align-items:center;
  gap:12px;
}
.dash-time-text{ display:inline-block; min-width: 44px; }
.dash-marker{
  width: 6px;
  height: 44px;
  border-radius: 999px;
  background: transparent;
  flex: 0 0 auto;
}
.mk-umfangreich{ background:#c1876b; }
.mk-diagnose{ background:#99ff99; }
.mk-reinigung{ background:#99ccff; }
.mk-zahnriemen{ background:#ff9900; }

.badge-soft{
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.08);
}
.b-umfangreich{ background: rgba(193,135,107,0.20); color:#5a2f1f; border-color: rgba(193,135,107,0.35); }
.b-diagnose{ background: rgba(153,255,153,0.35); color:#135f13; border-color: rgba(153,255,153,0.55); }
.b-reinigung{ background: rgba(153,204,255,0.35); color:#0b4a7a; border-color: rgba(153,204,255,0.55); }
.b-zahnriemen{ background: rgba(255,153,0,0.25); color:#7a3d00; border-color: rgba(255,153,0,0.45); }
.b-rw{ background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.75); }
.b-mw{ background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.75); }
.b-unfall{ background: rgba(220,53,69,0.12); color:#7a1a22; border-color: rgba(220,53,69,0.25); }
.b-huau{ background: rgba(13,110,253,0.12); color:#0d6efd; border-color: rgba(13,110,253,0.25); }
.b-ji{ background: rgba(25,135,84,0.12); color:#198754; border-color: rgba(25,135,84,0.25); }

.dash-mini{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius: 12px;
  padding: 10px 12px;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.dash-mini.highlight-umfangreich{ background: rgba(193,135,107,0.16); border-color: rgba(193,135,107,0.35); }
.dash-mini-left{ font-weight: 700; }
.dash-mini-right{ font-weight: 900; font-size: 18px; }

.dash-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  text-decoration:none;
  color: rgba(0,0,0,0.75);
  font-weight: 700;
}
.dash-link:hover{ background: rgba(13,110,253,0.06); }

.dash-footer{ margin-top: 16px; font-size: 12px; color: rgba(0,0,0,0.45); text-align:center; }

/* ---- /termin/anzeigen.php: sticky head + scroll area ---- */
.termin-table-scroll{
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
}
.termin-table{ margin-bottom: 0; }
.termin-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
}
.termin-table thead th{ background: #cfe2ff; }

.termin-table .sticky-right{
  position: sticky;
  right: 0;
  z-index: 6;
  background: #fff;
}
.termin-table thead th.sticky-right{ background: #cfe2ff; }
.termin-table td.actions-col{ white-space: nowrap; }
.termin-table td.zi-cell{ max-width: 520px; }
.termin-table td.zi-cell span{
  display: inline-block;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.termin-table-scroll{ -webkit-overflow-scrolling: touch; }

@media (max-width: 768px){
  .termin-table-scroll{ max-height: calc(100vh - 220px); }
}


/* Scrollbarer Tabellenbereich + Sticky Header (für anzeigen.php/heute.php) */
.table-scroll-wrap{
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
}

.table-sticky thead th{
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Rechte Aktionsspalte sticky */
.sticky-col-right{
  position: sticky;
  right: 0;
  z-index: 6;
  background: #fff;
}

/* Auf iOS weiches Scrollen */
.table-scroll-wrap{
  -webkit-overflow-scrolling: touch;
}

/* Woche-Ansicht: Marker wenn "Fahrzeug hier" = Ja */
.week-termin-btn { position: relative; }
.week-termin-btn .fzg-hier-icon {
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.week-termin-btn .auftrag-icon {
  position: absolute;
  left: 40px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.auftrag-icon{
  align-items:center;
  justify-content:center;
}

.auftrag-icon i{
  font-size: 20px;     /* <- hier größer/kleiner */
  color: #000 !important;
  line-height: 1;
  font-weight: 900;    /* wirkt je nach Font */
  text-shadow: 0 0 0.5px #000; /* minimal schärfer */
}