/**
 * RadPlan Mobile Optimization for iPhone 14 Pro Max
 * Viewport: 430x932 CSS pixels | Safe Area: top 59px, bottom 34px | DPR: 3x
 */

/* Phone PORTRAIT (iPhone 14 Pro Max = 430px wide, plus all smaller phones).
   Gated to touch devices so desktop windows narrower than the old 430px
   threshold — or merely in a portrait-ish aspect — are never affected. The
   previous `min-width: 430px` matched desktops AND skipped 390px-class phones;
   `max-width: 480px` is the correct phone target. */
@media only screen and (max-width: 480px) and (orientation: portrait) and (pointer: coarse) {
  body.is-mobile {
    --header-h: 48px;
    --name-w: 120px;
    --cell-w: 42px;
    --row-h: clamp(44px, 5dvh, 56px);
    --foot-h: 28px;
    --overlay-pad: 14px;
  }

  body.is-mobile.is-standalone #app-header {
    height: calc(var(--header-h) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: max(var(--safe-left), 8px);
    padding-right: max(var(--safe-right), 8px);
  }

  body.is-mobile #grid-wrapper {
    padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
  }
}

/* Phone LANDSCAPE (iPhone 14 Pro Max = 932px wide / 430px tall). Keyed off the
   short height so it never matches desktop landscape windows ≥932px wide. */
@media only screen and (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  body.is-mobile {
    --header-h: 42px;
    --name-w: 140px;
    --cell-w: 46px;
    --row-h: clamp(40px, 4.2dvh, 52px);
    --overlay-pad: 10px;
  }

  /* Use the side safe-areas (Dynamic Island sits on a side edge in landscape). */
  body.is-mobile.is-standalone #app-header {
    padding-left: max(var(--safe-left), 8px);
    padding-right: max(var(--safe-right), 8px);
  }

  body.is-mobile #grid-wrapper {
    padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
  }
}

@media (pointer: coarse) {
  button, .chip-row > *, .mnav-btn, .mbtn, .modal-x,
  .nav-btn, .month-label-btn, .hbtn, .td-cell, .td-name {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation; /* Vorschlag 2: Unterdrückt den Double-Tap-Zoom bei Schnelltasten und Gitterzellen */
  }

  .mday-handle {
    width: 40px;
    height: 5px;
    margin-top: 10px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(var(--ink-rgb),.32), rgba(var(--ink-rgb),.2));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
}

/* iOS Bottom Sheet Optimizations */
@media screen and (max-width: 768px) {
  .modal-editor, .modal-import, .modal-profile {
    max-width: 100% !important;
    margin-top: auto !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: calc(var(--card-radius, 14px) + 10px) !important;
    border-top-right-radius: calc(var(--card-radius, 14px) + 10px) !important;
    max-height: 90dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-shadow: var(--shadow-float) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
    animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
  }

  .overlay {
    align-items: flex-end !important;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .modal.modal-closing {
    animation: slideDown 0.25s ease-in forwards !important;
  }

  @keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }
}

/* Respect reduced-motion: the native slide-up/slide-down sheet physics above
   are the one animation this file introduces on its own (independent of
   core.css's view-transition rule), so honour the OS preference here by
   swapping the transform choreography for a plain, near-instant fade. */
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .modal-editor, .modal-import, .modal-profile {
    transition: opacity .12s linear !important;
    animation: none !important;
    transform: none !important;
  }
  .modal.modal-closing {
    animation: none !important;
    opacity: 0;
    transition: opacity .12s linear !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE ACTION SHEET ("Menü") — vollständiges, getiltes Bedienkonzept
   Bringt jede Desktop-Funktion auf das Telefon: Heute, Suche, Design,
   Undo/Redo, Mitarbeitende, Jahresplan, Drucken, Export, Import, Sync.
   ════════════════════════════════════════════════════════════════════════ */
.mm-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 0;
}

.mm-section-label {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 8px 2px 2px;
}
.mm-section-label:first-child { margin-top: 0; }

.mm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 76px;
  padding: 12px 6px;
  border-radius: var(--radius-lg);
  border: var(--border);
  background: rgba(var(--ink-rgb), .025);
  color: var(--text-1);
  font-family: var(--font-sans, inherit);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.mm-tile:active { transform: scale(.94); background: var(--accent-dim); border-color: var(--accent); }
.mm-tile:disabled { opacity: .38; pointer-events: none; }
.mm-tile-ic { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.mm-tile-lbl { display: block; }

.mm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mm-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: var(--border);
  background: rgba(var(--ink-rgb), .025);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, background .15s ease;
}
.mm-row:active { transform: scale(.98); background: var(--accent-dim); }
.mm-row-ic {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: var(--accent-dim);
  color: var(--accent);
}
.mm-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-row-lbl { font-size: 14px; font-weight: 600; }
.mm-row-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.25; }
.mm-row-danger .mm-row-ic { background: rgba(239,68,68,.12); color: #EF4444; }
.mm-row-danger .mm-row-lbl { color: #EF4444; }
/* Umschalter-Zeilen (z. B. Farbenblind-Modus): Text dehnt sich, Schalter rechts. */
.mm-row[role="menuitemcheckbox"] .mm-row-txt { flex: 1; }
.mm-row[role="menuitemcheckbox"] .hmenu-state { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════════
   GLOBALE ÜBERLAUF-SCHUTZSCHICHT FÜR MOBILE MODALE & ANSICHTEN
   ------------------------------------------------------------------------
   Flex-/Grid-Kinder haben standardmäßig `min-width:auto`. Dadurch blähen
   breite Blattknoten (Chart.js-Canvas, nicht umbrechende Texte, Datentabellen)
   das Layout über die Viewport-Breite hinaus auf — der Dialog (`overflow:hidden`)
   schneidet den Überhang dann rechts ab. Diese Schicht setzt Layout-Container
   auf `min-width:0` zurück, damit Inhalte umbrechen und Tabellen-Wrapper
   horizontal scrollen statt zu überlaufen.

   Der gesamte Selektor steht in `:where(...)` → Spezifität 0. Dadurch behalten
   die 44-px-Touch-Target-Regeln (höhere Spezifität) für Buttons/Chips/Zellen
   Vorrang; nur die ungewollte Auto-Inflation der Layout-Boxen wird neutralisiert.
   ════════════════════════════════════════════════════════════════════════ */
:where(body.is-mobile .overlay .modal, body.is-mobile .mobile-view)
:where(div, section, article, header, footer, nav, ul, ol, li, dl, dd, table, thead, tbody, tfoot, tr, p, span, label, form, fieldset, figure) {
  min-width: 0;
}

/* Medien dürfen nie breiter als ihr Container werden. */
:where(body.is-mobile .overlay .modal, body.is-mobile .mobile-view)
:where(canvas, img, video) {
  max-width: 100%;
}

/* Datentabellen behalten ihre Spaltenbreite und scrollen horizontal im Wrapper,
   statt den Dialog zu sprengen. */
body.is-mobile .overlay .modal .dept-table-wrap,
body.is-mobile .overlay .modal .yp-fair-table-wrap,
body.is-mobile .overlay .modal .yp-eval-table-wrap,
body.is-mobile .overlay .modal .yp-proj-table-wrap,
body.is-mobile .overlay .modal .yr-table-wrap,
body.is-mobile .overlay .modal .empdash-month-table-wrap,
body.is-mobile .overlay .modal .ap-table-wrap,
body.is-mobile .overlay .modal .yp-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-x: contain;
}

/* ── Jahresplaner: Notch/Safe-Area auf dem iPhone berücksichtigen ───────── */
@media (max-width: 700px) {
  #modal-yearplan .modal {
    height: var(--app-vh);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    box-sizing: border-box;
  }
  #modal-yearplan .yp-modal-hd { padding-top: 12px; }
  #modal-yearplan .modal-ft {
    padding-bottom: max(12px, var(--safe-bottom, 0px)) !important;
  }
}

/* ── Untere Navigationsleiste: Politur ──────────────────────────────────────
   Additive Verfeinerung von layout.css's `.mobile-nav`/`.mnav-btn` (dort nur
   Struktur/Positionierung). Ein hauchdünner Verlaufsakzent ersetzt den reinen
   Volltonrand am oberen Leistenrand, die Erhebungs-Schatten nutzen die neuen
   Float-Tokens, und der aktive "Planen"-Tab bekommt eine ruhige Glühkante statt
   eines harten Volltonhintergrunds. */
@media (max-width: 768px) {
  .mobile-nav {
    box-shadow: var(--shadow-float);
  }
  .mobile-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--grad-hairline);
    opacity: .8;
    pointer-events: none;
  }
  .mnav-btn { border-radius: var(--radius-sm); transition: color var(--dur-2) var(--ease-out, ease), transform var(--dur-1) var(--ease-out, ease); }
  .mnav-btn:focus-visible { box-shadow: var(--ring-focus-glow); outline: none; }
  body.plan-mode-active .mnav-plan-icon {
    box-shadow: 0 2px 12px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.25);
  }
}

/* Mobile contrast hardening: these phone-only surfaces mix fixed light cards,
   themed glass chrome and very small labels. Keep every label comfortably above
   AA in both light and dark themes instead of relying on faint opacity tiers. */
@media (max-width: 600px) {
  body.is-mobile .mnav-btn { color: var(--text-2); font-weight: 650; }
  body.is-mobile .mnav-btn svg { color: currentColor; }
  body.is-mobile .mobile-week-sep { color: var(--text-2); }
  body.is-mobile .mobile-month-summary,
  body.is-mobile .mobile-day-card,
  body.is-mobile .mobile-day-sheet .modal-bd {
    --ink-rgb: 15,23,42;
    --ink-strong: #0F172A;
    --text-1: #0F172A;
    --text-2: rgba(15,23,42,.88);
    --text-3: rgba(15,23,42,.76);
    --text-faint: rgba(15,23,42,.68);
  }
  body.is-mobile .mms-item-emp .mms-code,
  body.is-mobile .mdc-assign-more,
  body.is-mobile .mday-emp-sub,
  body.is-mobile .mday-empty-assign,
  body.is-mobile .mday-edit-icon,
  body.is-mobile .mdc-arrow {
    color: #64748B;
  }
  body.is-mobile .mday-section-hd {
    color: #475569;
    background: #F8FAFC;
  }
}

/* Mobile day-card title markers ("today" / "holiday"): theme-aware colors so
   the marker text keeps WCAG AA contrast (>=4.5:1) against the #mday-title
   header background in both dark and light mode. #modal-mobile-day .modal-hd
   is painted with rgba(var(--navy-800-rgb),.85) — a near-black navy in dark
   mode and a light cream in light mode — so a single fixed hex value can't
   satisfy both; the light-mode variants below are deliberately darker/more
   saturated than their dark-mode counterparts. Applied via classes from
   mobile.js instead of inline styles so this file stays the single source of
   truth for the color values. */
:root {
  --mday-title-today: #67D4FF;
  --mday-title-holiday: #FCD34D;
}
[data-theme="light"] {
  /* Contrast checked against the blended light modal-hd background
     (~rgb(237,233,222)): #0369A1 ≈ 4.9:1, #92400E ≈ 5.8:1 — both clear AA. */
  --mday-title-today: #0369A1;
  --mday-title-holiday: #92400E;
}
#mday-title.mday-title-today { color: var(--mday-title-today); }
#mday-title.mday-title-holiday { color: var(--mday-title-holiday); }