/* static/css/theme.css */
/* Erstellt: 2026-06-03 CET */
/* Geändert: 2026-06-04 CET — iOS Fix: .card-hover:active für Touch-Feedback */
/* Bootstrap-5-Overrides + eigene Utility-Klassen für BarberNet Frontend */

/* ── btn-success exakt mit AU-Grün ─────────────────────────────────────── */
.btn-success {
  --bs-btn-bg:                var(--au-green);
  --bs-btn-border-color:      var(--au-green);
  --bs-btn-hover-bg:          var(--au-green-hover);
  --bs-btn-hover-border-color:var(--au-green-hover);
  --bs-btn-active-bg:         var(--au-green-active);
  --bs-btn-active-border-color:var(--au-green-active);
}
.btn-outline-success {
  --bs-btn-color:              var(--au-green);
  --bs-btn-border-color:       var(--au-green);
  --bs-btn-hover-bg:           var(--au-green);
  --bs-btn-hover-border-color: var(--au-green);
}
.form-control:focus {
  border-color:  var(--au-green);
  box-shadow:    0 0 0 .2rem rgba(25,135,84,.18);
}
.text-success { color: var(--au-green) !important; }
.bg-success   { background-color: var(--au-green) !important; }
.border-success { border-color: var(--au-green) !important; }

/* ── Body ──────────────────────────────────────────────────────────────── */
body {
  font-family: var(--au-font-sans);
  color:       var(--au-fg-1);
  background:  var(--au-bg);
}

/* ── Theme-aware Text-Farben (dunkles Theme lesbar) ──────────────────────
   Templates nutzen Bootstrap-Utilities wie text-dark/text-muted. Diese
   werden auf die Theme-Variablen gemappt, damit sie auf hellem UND dunklem
   Theme korrekt kontrastieren. */
.text-dark,   .text-body   { color: var(--au-fg-1) !important; }
.text-secondary             { color: var(--au-fg-2) !important; }
.text-muted                { color: var(--au-fg-3) !important; }

/* ── Karten & Surfaces an Theme anpassen ───────────────────────────────── */
.card, .surface {
  background-color: var(--au-bg-subtle);
  color:            var(--au-fg-1);
  border-color:     var(--au-border, rgba(0,0,0,.125));
}
.card .card-body, .card .card-text { color: var(--au-fg-1); }

/* ── Karten-Hover ─────────────────────────────────────────────────────── */
.card-hover {
  transition: transform .13s ease, box-shadow .13s ease;
}
.card-hover:hover {
  transform:   translateY(-3px);
  box-shadow:  var(--au-shadow-hover);
}
/* iOS/Android: :hover existiert nicht auf Touch — :active gibt taktiles Feedback */
.card-hover:active {
  transform:   translateY(-1px);
  box-shadow:  var(--au-shadow-sm);
}

/* ── Alpine x-cloak ──────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Section-Kicker ──────────────────────────────────────────────────── */
.section-kicker {
  font-size:      var(--au-micro-size);
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--au-green);
}

/* ── Surface (weisse Karte) ────────────────────────────────────────────── */
.surface { background: var(--au-bg); }

/* ── Barber-Avatar-Disc ───────────────────────────────────────────────── */
.barber-photo-disc {
  width:        72px;
  height:       72px;
  border-radius:50%;
  object-fit:   cover;
  border:       3px solid var(--au-bg);
  box-shadow:   var(--au-shadow-sm);
}

/* ── Radii (eigene, analog Skill) ────────────────────────────────────── */
.rounded-sm   { border-radius: var(--au-radius-sm)   !important; }
.rounded-md   { border-radius: var(--au-radius)      !important; }
.rounded-lg   { border-radius: var(--au-radius-lg)   !important; }
.rounded-pill-custom { border-radius: var(--au-radius-pill) !important; }

/* ── Schatten ──────────────────────────────────────────────────────────── */
.shadow-xs    { box-shadow: var(--au-shadow-xs) !important; }
.shadow-sm    { box-shadow: var(--au-shadow-sm) !important; }
.shadow-md    { box-shadow: var(--au-shadow-map) !important; }
.shadow-hover { box-shadow: var(--au-shadow-hover) !important; }

/* ── Typo-Hilfklassen ────────────────────────────────────────────────── */
.au-muted     { color: var(--au-fg-3) !important; }
.bg-primary-muted { background: var(--au-green-subtle-bg) !important; }

/* ── HTMX Indicator ──────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }

/* ── Alert-Anpassungen ────────────────────────────────────────────────── */
.alert-success {
  background: var(--au-green-subtle-bg);
  border-color: var(--au-green);
  color: var(--au-green-subtle-fg);
}

/* ── Navbar-Active ───────────────────────────────────────────────────── */
.navbar .nav-link.active {
  color: var(--au-green) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-OPTIMIERUNG — gilt für ALLE Themes (hell & dunkel)
   ═══════════════════════════════════════════════════════════════════════ */

/* Responsive Bilder: nie aus dem Viewport ragen */
img, video, svg { max-width: 100%; height: auto; }

/* Kein horizontaler Überlauf durch breite Elemente */
.row > * { min-width: 0; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* iOS-Zoom vermeiden: Formulareingaben nie kleiner als 16px */
input, select, textarea {
  font-size: 16px !important;
}

/* Touch-Ziele auf kleinen Screens vergrößern (WCAG 2.5.5: ≥ 44px) */
@media (max-width: 575.98px) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm { min-height: 38px; }
  .nav-link {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
  .navbar-toggler { min-height: 44px; min-width: 44px; }
  .form-control, .form-select { min-height: 44px; }
  .card { border-radius: var(--au-radius, .5rem); }
}