/* ============================================================================
 *  responsive.css — Mobile-first patches & touch optimisations
 *  Loaded AFTER style.css so it can override.
 *
 *  Breakpoints (matches Bootstrap 5) :
 *   - up to 575px  : phones (iPhone SE, small Android)
 *   - up to 767px  : large phones / small tablets portrait
 *   - up to 991px  : tablets / small laptops
 * ============================================================================ */

/* ─── Touch-friendly base ────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-item,
    .form-control,
    .form-select,
    .dropdown-item,
    a.btn,
    button {
        min-height: 44px;          /* Apple HIG / Material : 44 pt × 44 pt */
    }
    .btn-sm, a.btn-sm, button.btn-sm {
        min-height: 36px;
    }
    .form-control, .form-select {
        font-size: 16px;            /* iOS auto-zoom is disabled at ≥ 16 px */
    }
}

/* ─── Up to 991 px : tablet/landscape ───────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar       { transform: translateX(-100%); width: min(280px, 86vw); }
    .sidebar.show  { transform: translateX(0); }
    .sidebar-close-btn { display: block !important; }
    .main-wrap     { margin-left: 0; }
    .topbar-toggle { display: flex !important; }

    /* Stat cards : 4 col → 2 col */
    .row.g-4.mb-4 > .col-xl-3,
    .row.g-3.mb-3 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }

    /* Charts : keep readable */
    .chart-container { height: 240px !important; }

    /* Hero sections (landing, regie_live) */
    .hero h1, .live-header h1 { font-size: clamp(1.4rem, 4vw, 2.2rem); }
}

/* ─── Up to 767 px : large phones / portrait tablets ────────────────────── */
@media (max-width: 767.98px) {
    /* Global rhythm */
    body { font-size: 14.5px; }
    h1, .h1 { font-size: 1.4rem; }
    h2, .h2 { font-size: 1.2rem; }
    h3, .h3 { font-size: 1.05rem; }
    .page-content { padding: 1rem .75rem; }
    .topbar { padding: 0 .75rem; height: 54px; }
    .topbar-title { font-size: .9rem; }
    .topbar-date { display: none; }
    .container-fluid { padding-left: .75rem; padding-right: .75rem; }

    /* Cards padding */
    .card-body  { padding: .85rem; }
    .card-header { padding: .65rem .85rem; }

    /* KPI / stat values */
    .stat-value, .kpi-value, .h4.mb-0 { font-size: 1.4rem !important; }
    .stat-card, .kpi-card { padding: .9rem; }
    .stat-icon-circle { width: 36px; height: 36px; font-size: 1rem; }

    /* Forms : 2-col layouts collapse */
    .row.g-2 > [class*="col-md-"],
    .row.g-3 > [class*="col-md-"],
    .row.g-4 > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
    .form-text { font-size: .78rem; }

    /* Tables : compact + horizontal scroll */
    .table-responsive {
        max-width: 100vw;
        -webkit-overflow-scrolling: touch;
    }
    .table > :not(caption) > * > * {
        padding: .55rem .5rem;
        font-size: .85rem;
    }
    .table thead th { font-size: .72rem; }
    .table .badge   { font-size: .65rem; padding: .25em .55em; }
    .table .btn-sm  { padding: .25rem .5rem; }

    /* Modals : almost-fullscreen on mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
    }
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
    .modal-lg .modal-dialog,
    .modal-xl .modal-dialog { max-width: 100%; }
    .modal-body { padding: .9rem; }
    .modal-header, .modal-footer { padding: .75rem .9rem; }

    /* Dashboard charts : smaller */
    canvas { max-height: 250px !important; }

    /* Nav tabs : scroll horizontal */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; padding: .6rem .8rem; font-size: .85rem; }

    /* Buttons groups */
    .d-flex.gap-2,
    .d-flex.gap-3 { flex-wrap: wrap; }

    /* Header email/print buttons in invoice form */
    .page-header { flex-direction: column; align-items: stretch !important; gap: .5rem; }
    /* Zone d'actions du page-header : alignée à gauche, boutons qui se replient,
       et marges latérales neutralisées (me-2/ms-2) pour éviter les débordements */
    .page-header .text-end { text-align: left !important; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
    .page-header .text-end .me-2,
    .page-header .text-end .ms-2 { margin-right: 0 !important; margin-left: 0 !important; }
    .page-header .text-end .btn { flex: 1 1 auto; }

    /* Status badges row */
    .status-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }

    /* Sticky topbar shadow */
    .topbar { box-shadow: 0 1px 6px rgba(0,0,0,.06); }
}

/* ─── Up to 575 px : phones in portrait ─────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Hero / landing */
    .hero, header.hero {
        padding: 50px 0 70px;
    }
    .hero h1 { font-size: 1.6rem; }
    .hero p.lead { font-size: 1rem; }
    .hero .btn-lg { padding: 12px 18px; font-size: .92rem; }
    .hero .d-flex.gap-2 { flex-direction: column; gap: .5rem !important; }
    .hero .d-flex.gap-2 .btn { width: 100%; }

    /* Pricing cards stack 1-col */
    .plan-card, .plan-block { padding: 22px 18px; }
    .plan-card.featured, .plan-block.popular { transform: none; }
    .plan-price { font-size: 2rem; }

    /* Stat cards : 2 col → 1 col */
    .row.g-4.mb-4 > .col-xl-3,
    .row.g-3.mb-3 > .col-md-3,
    .row.g-3.mb-3 > .col-md-4 { flex: 0 0 100%; max-width: 100%; }

    /* Weather day grid : 5 col → 3 col then 2 */
    .day-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Regie live KPIs : keep 3 but tighter */
    .kpi-row { margin: -28px 8px 16px; }
    .kpi-card { padding: 10px 4px; }
    .kpi-value { font-size: 1.3rem !important; }
    .kpi-amount { font-size: .72rem; }
    .kpi-label  { font-size: .65rem; }

    /* Variants chooser stack */
    .var-card { padding: 20px 16px; }
    .var-card.recommended { transform: none; }
    .var-price { font-size: 1.8rem; }

    /* Vehicle cards (fahrzeuge) full width */
    .col-md-6.col-lg-4 { flex: 0 0 100%; max-width: 100%; }

    /* Hide "secondary" columns in tables */
    .table .hide-xs { display: none; }

    /* Compare table (tarife) : shrink */
    .compare-table th, .compare-table td { padding: 8px 6px; font-size: .8rem; }
    .compare-table .cat-row td { padding: 8px !important; font-size: .78rem; }

    /* Search wrap */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-search, .search-wrap { flex: 1; width: 100%; }
    .summary-card { position: static; }

    /* Footer-info / generic hints */
    .footer-info { padding: 0 12px; font-size: .72rem; }

    /* Tickets cards */
    .ticket-msg { padding: .75rem; font-size: .9rem; }
}

/* ─── Print-friendly stays unchanged but adds invoice tweaks ────────────── */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .no-print { display: none !important; }
    .main-wrap { margin-left: 0; }
    .page-content { padding: 0; }
    body { background: #fff; }
}

/* ─── Generic helpers (any breakpoint) ──────────────────────────────────── */

/* Make all forms inside modals scroll when too tall */
.modal-body {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sticky table header on long lists */
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    box-shadow: 0 1px 0 #e2e8f0;
}

/* Cards never overflow horizontally */
.card { overflow-x: hidden; }
.card .table-responsive { overflow-x: auto; }

/* Inter font fallback (just in case body class wins) */
body, html { font-family: 'Inter', -apple-system, system-ui, "Segoe UI", Arial, sans-serif !important; }

/* Touch-friendly file inputs */
input[type="file"]::file-selector-button {
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    cursor: pointer;
    margin-right: 10px;
}

/* Reduce accidental zoom on landscape */
@media (orientation: landscape) and (max-height: 500px) {
    .modal-dialog { max-height: 100vh; }
    .sidebar { width: 240px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================================
   Garantir la visibilité de TOUS les boutons sur fond clair.
   Bootstrap fournit ces variantes mais le .btn custom + le fond clair de
   l'app rendaient certains (surtout btn-outline-light) invisibles.
   ============================================================================ */
.btn-warning {
    background: #F59E0B !important; border: 1px solid #F59E0B !important; color: #fff !important;
}
.btn-warning:hover { background: #D97706 !important; border-color: #D97706 !important; color: #fff !important; }

.btn-outline-warning {
    background: transparent !important; border: 1px solid #F59E0B !important; color: #B45309 !important;
}
.btn-outline-warning:hover { background: #F59E0B !important; color: #fff !important; }

.btn-info {
    background: #0EA5E9 !important; border: 1px solid #0EA5E9 !important; color: #fff !important;
}
.btn-info:hover { background: #0284C7 !important; border-color: #0284C7 !important; color: #fff !important; }

.btn-outline-info {
    background: transparent !important; border: 1px solid #0EA5E9 !important; color: #0369A1 !important;
}
.btn-outline-info:hover { background: #0EA5E9 !important; color: #fff !important; }

/* btn-light / btn-outline-light : conçus pour fonds sombres → on les rend
   lisibles sur le fond clair de l'app (gris + texte foncé). */
.btn-light {
    background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; color: #1E293B !important;
}
.btn-light:hover { background: #E2E8F0 !important; color: #0F172A !important; }

.btn-outline-light {
    background: transparent !important; border: 1px solid #CBD5E1 !important; color: #334155 !important;
}
.btn-outline-light:hover { background: #F1F5F9 !important; color: #0F172A !important; }

.btn-link {
    background: transparent !important; border: 1px solid transparent !important;
    color: #1D4ED8 !important; text-decoration: none !important;
}
.btn-link:hover { color: #1E3A8A !important; text-decoration: underline !important; }

/* Filet de sécurité : un bouton sans variante de couleur reste visible. */
.btn:not([class*="btn-primary"]):not([class*="btn-secondary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="btn-light"]):not([class*="btn-dark"]):not([class*="btn-outline"]):not([class*="btn-ghost"]):not([class*="btn-link"]):not([class*="btn-add"]) {
    border-color: #CBD5E1;
}

/* ============================================================================
   Filet de sécurité TOTAL : couleurs de boutons garanties.
   Redéfinit toutes les variantes (custom + Bootstrap) avec !important pour
   qu'elles s'affichent quel que soit l'ordre de chargement de Bootstrap/style.
   ============================================================================ */
.btn-primary   { background:#1D4ED8 !important; border:1px solid #1D4ED8 !important; color:#fff !important; }
.btn-primary:hover { background:#1E3A8A !important; border-color:#1E3A8A !important; color:#fff !important; }
.btn-secondary { background:#F1F5F9 !important; border:1px solid #E2E8F0 !important; color:#334155 !important; }
.btn-secondary:hover { background:#E2E8F0 !important; color:#0F172A !important; }
.btn-success   { background:#10B981 !important; border:1px solid #10B981 !important; color:#fff !important; }
.btn-success:hover { background:#059669 !important; border-color:#059669 !important; color:#fff !important; }
.btn-danger    { background:#DC2626 !important; border:1px solid #DC2626 !important; color:#fff !important; }
.btn-danger:hover { background:#B91C1C !important; border-color:#B91C1C !important; color:#fff !important; }
.btn-dark      { background:#1E293B !important; border:1px solid #1E293B !important; color:#fff !important; }
.btn-outline-primary   { background:transparent !important; border:1px solid #1D4ED8 !important; color:#1D4ED8 !important; }
.btn-outline-primary:hover { background:#1D4ED8 !important; color:#fff !important; }
.btn-outline-secondary { background:transparent !important; border:1px solid #CBD5E1 !important; color:#334155 !important; }
.btn-outline-secondary:hover { background:#F1F5F9 !important; color:#0F172A !important; }
.btn-outline-success   { background:transparent !important; border:1px solid #10B981 !important; color:#059669 !important; }
.btn-outline-success:hover { background:#10B981 !important; color:#fff !important; }
.btn-outline-danger    { background:transparent !important; border:1px solid #DC2626 !important; color:#DC2626 !important; }
.btn-outline-danger:hover { background:#DC2626 !important; color:#fff !important; }
/* btn-ghost (boutons d'action icône) : garantir un minimum de contraste */
.btn-ghost { background:transparent !important; color:#475569 !important; border:1px solid transparent !important; }
.btn-ghost:hover { background:#F1F5F9 !important; color:#0F172A !important; }
/* Les icônes Bootstrap dans un bouton héritent toujours de la couleur du texte */
.btn .bi, .btn i { color: inherit !important; }
/* Filet ultime : tout <button>/.btn garde au moins un texte foncé lisible
   s'il n'a AUCune variante de fond coloré (donc fond clair/transparent). */
button.btn:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-dark"]):not([class*="btn-warning"]):not([class*="btn-info"]) {
    color: #1E293B;
}

/* ============================================================================
   Fix débordement visuel dans les modals (le "carré qui dépasse").
   1. Empêche tout débordement horizontal du contenu du modal.
   2. Contient le halo bleu de focus (box-shadow) pour qu'il ne sorte pas
      du bord du modal sur les champs des colonnes de gauche/droite.
   ============================================================================ */
.modal-body { overflow-x: hidden; }
.modal-body .row { margin-left: 0 !important; margin-right: 0 !important; }
.modal .form-control:focus,
.modal .form-select:focus {
    box-shadow: 0 0 0 2px rgba(29,78,216,.18) !important;
    /* le ring reste dans le flux visuel du champ, sans déborder du modal */
}
/* Sécurité : les champs et leur contour restent dans leur colonne */
.modal .form-control, .modal .form-select, .modal textarea { max-width: 100%; }

/* ── Fix invisible toggle switches (.form-switch) ───────────────────
   Bootstrap's `.form-switch .form-check-input` (specificity 0,2,0) was overriding
   the app's custom switch (0,1,1) and its margin/padding pushed the control out of
   view. These rules (loaded last + higher specificity) restore a visible switch
   everywhere (Mahnwesen, online payment, etc.). */
.form-check.form-switch{
  display:flex !important; align-items:center; gap:.7em;
  padding-left:0 !important; min-height:auto; margin-bottom:.5rem;
}
/* OFF state — clearly visible RED with border + sliding white knob.
   Applies to EVERY checkbox toggle in the app (with or without .form-switch). */
.form-check-input[type="checkbox"]{
  width:2.8em !important; height:1.5em !important; margin:0 !important;
  padding:0 !important; flex-shrink:0; float:none !important;
  -webkit-appearance:none !important; appearance:none !important;
  background-color:#e2515f !important;            /* OFF = red (désactivé) */
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:1em !important; cursor:pointer; transition:background-color .2s ease, background-position .2s ease;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important; background-position:left .18em center !important;
  background-size:1.15em 1.15em !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15) !important;
}
/* ON state — green (activé) with the knob slid to the right */
.form-check-input[type="checkbox"]:checked{
  background-color:#16a34a !important;            /* ON = green (activé) */
  border-color:#15803d !important;
  background-position:right .18em center !important;
}
.form-check-input[type="checkbox"]:focus{
  outline:none !important; box-shadow:0 0 0 3px rgba(22,163,74,.25) !important;
}
.form-check-label{ cursor:pointer; }
.form-check.form-switch .form-check-label{ margin:0; font-weight:500; }