/* ═══════════════════════════════════════════════════════════════════════════
   calendar-mobile.css — Calendar Mobile/Touch-Styles (Sprint G.1 Split)

   Enthält ALLE Sektionen, die nur auf Phones/Tablets greifen oder
   Touch-spezifisches Verhalten regeln:
     • 10.  RESPONSIVE Basis-Anpassungen (≤768px)
     • 10b. Mobile-Agenda-View (≤640px) + Mobile-FAB
     • 10c. Inputs Mobile-Tuning (verhindert iOS-Zoom)
     • TOUCH/MOBILE Drag-Konflikt-Fix + 44px-Touch-Targets
     • TAP-FEEDBACK für hover:none Geräte

   Geladen direkt nach calendar.css. Tokens (--cal-*) kommen aus
   modules/_tokens.css und werden vererbt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   10. RESPONSIVE (Mobile)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px){
  .cal-root{ --cal-hour-height: 48px; --cal-day-min-width: 80px; }
  .cal-topbar{ padding: 8px 10px; gap: 6px; }
  .cal-title{ font-size: 0.95rem; min-width: 120px; margin: 0 4px; }
  .cal-view-btn{ padding: 4px 8px; font-size: 0.78rem; }

  .cal-week-hdr,
  .cal-week-grid{
    grid-template-columns: 42px repeat(7, minmax(60px, 1fr));
  }
  .cal-week-dcol{ padding: 4px 2px; }
  .cal-dow-num{ font-size: 1rem; }
  .cal-hour-lbl{ font-size: 0.62rem; }

  .cal-month-cell{ min-height: 60px; padding: 2px; }
  .cal-month-num{ font-size: 0.78rem; }
  .cal-month-ev{ font-size: 0.65rem; padding: 1px 3px; }

  .cal-detail-modal,
  .cal-editor-modal,
  .cal-picker-modal{
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    width: 100%;
    height: 100vh;
  }
  .cal-detail-overlay,
  .cal-editor-overlay,
  .cal-picker-overlay{ padding: 0; }

  .cal-form-row{ flex-direction: column; gap: 0; align-items: stretch; }
  .cal-form-row-tight{ flex-direction: row; }
  .cal-narrow-input, .cal-time-input{ max-width: 100%; }

  .cal-dispo-grid{
    grid-template-columns: 1fr;
  }
  .cal-dispo-unassigned{
    border-right: none;
    border-bottom: 2px solid var(--cal-border-color);
    max-height: 220px;
  }
  .cal-dispo-unassigned-hdr{
    border-right: none;
    border-bottom: 2px solid var(--cal-border-color);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   10b. MOBILE AGENDA-VIEW (≤640px Phones)
   Statt eines Week-Grids zeigen wir auf Phones eine vertikal scrollende
   Agenda-Liste. Aktiviert wird das via Body-Class `.cal-mobile-agenda`,
   die der JS-Code automatisch setzt, wenn matchMedia('max-width:640px')
   greift UND der Nutzer in week/day-View ist.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  /* Tag-Titel über jedem Block */
  .cal-agenda-day{
    background:var(--cal-surface);
    border:1px solid var(--cal-border-color);
    border-radius:10px;
    margin:8px 10px;
    padding:10px 12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .cal-agenda-day-hdr{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:6px;
    padding-bottom:6px;
    border-bottom:1px solid var(--cal-border-color);
  }
  .cal-agenda-day-hdr .cal-agenda-dow{
    font-size:11px;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--cal-muted);
    font-weight:700;
  }
  .cal-agenda-day-hdr .cal-agenda-date{
    font-size:15px;font-weight:700;color:var(--cal-text);
  }
  .cal-agenda-day.cal-today .cal-agenda-date{ color:var(--cal-primary); }
  .cal-agenda-empty{
    padding:8px 0;
    color:var(--cal-muted);
    font-size:12.5px;
    font-style:italic;
  }
  .cal-agenda-ev{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 4px;
    border-top:1px dashed rgba(0,0,0,.06);
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(27,117,153,.08);
    min-height:44px;
  }
  .cal-agenda-ev:first-child{ border-top:none; }
  .cal-agenda-ev:active{ background:var(--cal-hover); }
  .cal-agenda-ev-time{
    flex:0 0 64px;
    font-size:12.5px;
    font-weight:600;
    color:var(--cal-text);
    line-height:1.25;
  }
  .cal-agenda-ev-time .cal-agenda-ev-end{
    display:block;
    font-size:11px;font-weight:400;color:var(--cal-muted);
    margin-top:1px;
  }
  .cal-agenda-ev-bar{
    flex:0 0 4px;
    align-self:stretch;
    border-radius:2px;
    background:var(--cal-primary);
  }
  .cal-agenda-ev-body{
    flex:1; min-width:0;
  }
  .cal-agenda-ev-title{
    font-size:13.5px;font-weight:600;color:var(--cal-text);
    line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .cal-agenda-ev-meta{
    display:flex;flex-wrap:wrap;gap:4px 10px;
    font-size:11px;color:var(--cal-muted);
    margin-top:2px;
  }
  .cal-agenda-ev-meta i{ margin-right:3px; opacity:.75; }

  /* Mobile-FAB unten rechts: "+ Termin" */
  .cal-fab{
    position:fixed;
    right:max(16px, env(safe-area-inset-right, 0px));
    bottom:max(16px, env(safe-area-inset-bottom, 0px));
    width:56px;height:56px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--cal-primary),var(--blue,#1B7599));
    color:#fff;border:none;
    font-size:22px;
    box-shadow:0 6px 18px rgba(27,117,153,.28),0 2px 6px rgba(0,0,0,.12);
    z-index:600;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .cal-fab:active{ transform:scale(.94); filter:brightness(.95); }
}

/* Sehr kleine Phones (<360px): Agenda-Spaltenbreite anpassen */
@media (max-width: 360px){
  .cal-agenda-ev-time{ flex:0 0 56px; font-size:11.5px; }
  .cal-agenda-ev-title{ font-size:13px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   10c. INPUTS — Mobile-Tuning (verhindert iOS-Auto-Zoom, native Keyboards)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px){
  /* Globaler Override für ALLE Inputs im Calendar — nicht nur im Editor.
     Beendet das alte Problem, dass schmale time-inputs in Toolbars
     auf Phones zu Auto-Zoom führten und dann der Viewport "klemmte". */
  .cal-root input[type="text"],
  .cal-root input[type="email"],
  .cal-root input[type="tel"],
  .cal-root input[type="number"],
  .cal-root input[type="search"],
  .cal-root input[type="url"],
  .cal-root input[type="date"],
  .cal-root input[type="time"],
  .cal-root input[type="datetime-local"],
  .cal-root input[type="password"],
  .cal-root textarea,
  .cal-root select{
    font-size:max(16px, 1em);
    min-height:44px;
  }
  /* Time/Narrow nicht künstlich klein halten — ganze Zelle nutzen */
  .cal-time-input,
  .cal-narrow-input{
    max-width:none !important;
    width:100%;
  }
  /* Form-Rows auf Mobile vertikal stapeln (ausgenommen tight-rows) */
  .cal-form-row:not(.cal-form-row-tight){
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  /* Picker-Modal: ganze Höhe verfügbar machen */
  .cal-picker-modal{
    max-height:100vh;
    height:100vh;
    border-radius:0;
  }
  /* Quick-Search: größere Tap-Fläche */
  .cal-quick-search-input{
    font-size:max(16px, 1em);
    padding:11px 56px 11px 36px;
    min-height:44px;
  }
  /* Topbar-Search-Toggle größer */
  .cal-topbar-search{
    min-height:44px;
  }
  /* Select-Dropdowns aufrechtere Optik (Native-Picker, höher antippbar) */
  .cal-root select{
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7f90' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px;
  }
}

/* ── TOUCH/MOBILE: Drag-Konflikt-Fix + Mindest-Touch-Targets ──
   Kalender-Termine müssen touch-action:none haben, sonst konkurriert das
   Browser-Scroll mit Drag-Gesten und der Drag bricht ab.
   Buttons in Kalender-Toolbars werden auf 44×44px hochgezogen (HIG).
   ────────────────────────────────────────────────────────────────────── */
.cal-event,
.cal-dispo-ev,
.cal-unassigned-card,
.uc-event,
.cal-travel-block,
.cal-travel-block-vert {
  touch-action: none;
}
@media (pointer: coarse) {
  .cal-btn,
  .cal-btn-icon,
  .cal-view-btn,
  .cal-modal-close,
  .cal-tab-btn,
  .uc-btn,
  .uc-view-btn,
  .uc-modal-close { min-width: 44px; min-height: 44px; }
}

/* ── TAP-FEEDBACK für Touch-Geräte ohne Hover ───────────────────────────
   Ersetzt Hover-State durch Active-State, damit Nutzer auf Touch
   beim Antippen visuelles Feedback bekommen. */
@media (hover: none){
  .cal-event:active,
  .cal-dispo-ev:active,
  .uc-event:active,
  .cal-month-cell:active,
  .cal-month-ev:active,
  .cal-agenda-row:active,
  .cal-agenda-ev:active,
  .cal-mini-day:active,
  .cal-filter-item:active,
  .cal-sidebar-btn:active,
  .lb-view-toggle-btn:active,
  .cal-quick-search-btn:active,
  .cal-search-advanced-btn:active{
    background:var(--cal-hover);
    transform:scale(.98);
    transition:transform .08s, background .08s;
  }
  /* Buttons im Editor-Modal */
  .cal-editor-modal .btn:active,
  .cal-detail-modal .btn:active{
    filter:brightness(.92);
    transform:scale(.97);
  }
  /* Hover-Überschreiben: weil hover:none KEIN Hover mehr greift, sind die
     bestehenden :hover-Regeln ohnehin tot. Wir blocken aber transform:translateY,
     damit Karten sich nicht ungewollt nach Tap nach oben "sticken" lassen. */
  .cal-sidebar-btn:hover{ transform:none; }
}