/* ==========================================================================
   myPraesenz – Responsive Stylesheet
   Breakpoints:  mobile < 768px | tablet 768–1024px | desktop > 1024px
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   Pattern Library v1.2 design tokens — Pipeline #21 (04.05.2026)
   v1.1 etablierte v1 hex tokens (Pipeline #18). v1.2 fügt success/warning
   Status-Farben aus Konzept §13.2 + behebt --mp-gold-Drift (Konzept als
   source-of-truth). Indicator-Dots aus P#18 D.2 (`#4CAF50`/`#FF9800`
   medium-tone für kleine Anwesenheits-Punkte) bleiben inline-Hex —
   semantisch andere Use-Case als Status-Badge-BG.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --mp-card-bg: #FFFFFF;
  --mp-border: #EDEBF3;
  --mp-text: #2D2540;
  --mp-text-muted: #8A84A0;
  /* Pipeline #21 Drift-Fix: --mp-gold auf Konzept §13.2 angeglichen
     (#C9A857 → #BFA04A "Honig-Gold"). */
  --mp-gold: #BFA04A;
  --mp-danger: #C0392B;
  /* Pipeline #21 v1.2 Token-Expansion (Konzept §13.2 Status-Farben):
     Pair aus BG (light) + Strong (dark text/border). */
  --mp-success: #E8F5E9;
  --mp-success-strong: #2E7D32;
  --mp-warning: #FFF3E0;
  --mp-warning-strong: #E65100;
}

/* ── Sidebar transition ──────────────────────────────────────────────────── */
#sidebar {
  transition: width 200ms ease;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── Desktop collapsed state ─────────────────────────────────────────────── */
#sidebar.collapsed {
  width: 60px;
}

#sidebar.collapsed .sidebar-label,
#sidebar.collapsed .sidebar-badge-wrap,
#sidebar.collapsed .sidebar-section-head,
#sidebar.collapsed .sidebar-logo-text,
#sidebar.collapsed .sidebar-footer-text,
#sidebar.collapsed .sidebar-notif-text {
  display: none !important;
}

#sidebar.collapsed .nav-link {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
}

#sidebar.collapsed .sidebar-collapse-arrow {
  transform: rotate(180deg);
}

/* ── Tablet: auto-collapse, expand on hover ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  #sidebar {
    width: 60px;
  }
  #sidebar .sidebar-label,
  #sidebar .sidebar-badge-wrap,
  #sidebar .sidebar-section-head,
  #sidebar .sidebar-logo-text,
  #sidebar .sidebar-footer-text,
  #sidebar .sidebar-notif-text {
    display: none !important;
  }
  #sidebar .nav-link {
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  /* Expand on hover */
  #sidebar:hover {
    width: 190px;
    z-index: 20;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18);
  }
  #sidebar:hover .sidebar-label,
  #sidebar:hover .sidebar-footer-text,
  #sidebar:hover .sidebar-notif-text {
    display: block !important;
  }
  #sidebar:hover .sidebar-badge-wrap {
    display: flex !important;
  }
  #sidebar:hover .sidebar-section-head {
    display: block !important;
  }
  #sidebar:hover .sidebar-logo-text {
    display: block !important;
  }
  #sidebar:hover .nav-link {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ── Mobile: hide sidebar, show mobile chrome ────────────────────────────── */
@media (max-width: 767px) {
  #sidebar {
    display: none !important;
  }
  #mobile-topbar {
    display: flex !important;
    /* F-034 (08.05.2026): Topbar wächst um die Notch-Höhe. Inhalt
       sitzt unter Status-Bar (apple-mobile-web-app-status-bar-style
       "black-translucent" macht Status-Bar transparent über Web-View).
       Lesson 61 — iPhone-11-Real-User-Test. */
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(3.5rem + env(safe-area-inset-top, 0px));
  }
  #bottom-nav {
    display: flex !important;
  }

  /* Switch from "scroll-inside-container" to natural page scroll on mobile.
     The desktop layout uses body{h-screen overflow-hidden} + main{overflow-y-auto}
     so the sidebar stays fixed while only main scrolls. On mobile there is no
     sidebar, so we let the full page scroll naturally instead. */
  body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }
  #main-content {
    overflow-y: visible !important;
    height: auto !important;
    flex: none !important;
    /* Space for fixed top-bar (56px + notch) and fixed bottom-nav (70px + home-indicator). */
    /* F-034: padding-top wächst mit der Topbar (die jetzt safe-area-inset-top inkludiert). */
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    /* Pipeline-#12.5b Lesson-45 F3: prevent flex-min-content propagation.
       Default `min-width: auto` on flex-children allows their intrinsic
       max-content (e.g. long unbreakable tokens, double-nested wrappers)
       to overflow ancestor. With `min-width: 0`, flex-child can shrink
       below its content min-width → content uses overflow rules instead. */
    min-width: 0 !important;
  }
}

@media (min-width: 768px) {
  #mobile-topbar {
    display: none !important;
  }
  #bottom-nav {
    display: none !important;
  }
  #mobile-menu {
    display: none !important;
  }
  #sidebar-toggle-btn {
    display: flex;
  }
}

/* Bottom nav safe-area for iPhone home indicator */
#bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   F-034 (08.05.2026) — Safe-Area-Inset Utility-Classes.
   iPhone-11-Real-User-Test deckte systemische Notch + Home-
   Indicator-Ignorierung auf. Diese Utilities + voraufgehende
   #mobile-topbar / #main-content Updates fixen 11 Pages.
   Lesson 61 — Real-Device-Tests sind Pflicht.
   ============================================================ */

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-x {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Dynamic-Viewport-aware full-screen height. iOS 15.4+ supported.
   Fallback to vh on older Safari (iOS bar-collapse causes layout-jumps,
   acceptable trade-off vs. broken min-height on iOS 14). */
.h-safe-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Responsive metric grids ─────────────────────────────────────────────── */
/* 4-column grids → 2 columns on mobile */
@media (max-width: 767px) {
  .mp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .mp-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .mp-grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* Compact cards on mobile */
  .mp-grid-4 > div,
  .mp-grid-3 > div {
    padding: 12px 14px !important;
  }
  .mp-grid-4 .mp-card-number,
  .mp-grid-3 .mp-card-number {
    font-size: 22px !important;
  }
}

/* ── Dashboard two-column sections: stack on mobile ─────────────────────── */
@media (max-width: 767px) {
  .mp-two-col {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ── Page content padding on mobile ─────────────────────────────────────── */
@media (max-width: 767px) {
  .mp-page {
    padding: 16px !important;
    /* Pipeline-#12.5b Lesson-45 F4 (Belt-and-Braces): catch any future
       inadvertent horizontal overflow in mp-page wrapped pages without
       breaking layout. Future detail-pages that violate Lesson-45-Pattern
       (single source of width-clamp) get safety-clipped instead of
       horizontally scrolling. Tradeoff: legitimate overflow content
       (e.g. wide tables) MUST use explicit table-scroll-wrap to
       preserve scrollability. */
    overflow-x: hidden !important;
  }
  /* Reduce header text size */
  .mp-page h1 {
    font-size: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   === Mobile Pattern Library v1 ===
   Pipeline #14 (02.05.2026 abends), Lesson 46

   Canonical mobile component classes for /admin/backup tab-navigation +
   future mobile-first detail-pages. Reference HTML:
     docs/mobile-pattern-v1-reference.html

   Tab pattern: iOS/Bluesky underline-indicator (CC Block-B-Decision
   02.05.2026). Resolves the rounded-bottom issue that v9-pill-pattern
   had at source — active tab is flat, transparent bg, Gold text + Gold
   inset box-shadow as 3px-underline at tab bottom. NO pill, NO rounded
   corners, NO bg-switch on active.

   Color tokens (myPraesenz brand):
     Primary lila:    #5A4D80
     Gold accent:     #C9A857
     Content bg:      #F5F4F8
     Card bg:         #FFFFFF
     Card border:     #EDEBF3
     Text dark:       #2D2540
     Text muted:      #8A84A0
     Hint bg:         #FFF8E1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icon button (44×44 touch target, transparent bg) ──────────────────── */
.mp-iconbtn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ── Tab bar — fixed 48px height; active tab extends 18px ABOVE via
     align-self + min-height. overflow:visible (default) renders the lift. ── */
.mp-tabs {
  background: #5A4D80;
  display: flex;
  padding: 0;
  gap: 0;
  height: 48px;
}

/* ── Tab base — inactive sit flat in the lila bar; active state below
     "lifts" out of the bar with light-bg + rounded top corners + Gold accent.
     Pattern reference Markus 02.05.2026 — clearer abgesetzt than the
     pure Bluesky-flat iOS-underline (commit-prior). #}                     */
.mp-tab {
  flex: 1;
  padding: 14px 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 18px 18px 0 0;
  min-height: 48px;
  box-sizing: border-box;
  /* Transparent placeholder inset for smooth bg + box-shadow transition */
  box-shadow: inset 0 -3px 0 0 transparent;
  transition: background 150ms ease, color 150ms ease,
              box-shadow 150ms ease;
  text-decoration: none;
  /* Reset link-default for <a class="mp-tab"> usage */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-tab:hover:not(.active) {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

/* ── Tab active state — Lifted Tab Pattern (Markus visual-spec 02.05.2026):
     Active tab is 66px tall and align-self: flex-end → bottom anchored to
     bar bottom, top extends 18px ABOVE bar top. Rounded top-corners curve
     against page-bg (NOT bar bg) so they merge seamlessly without lila
     wedges (which would appear if top were flush with bar top).            */
.mp-tab.active {
  background: #FAFAFD;
  color: #C9A857;
  font-weight: 600;
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 -3px 0 0 #C9A857;
  min-height: 66px;
  align-self: flex-end;
  padding-top: 32px;
}

/* ── Content area — used INSIDE tab-content slot (NOT replacing mp-page) ── */
.mp-content-stub {
  background: #F5F4F8;
  padding: 14px 12px;
}

/* ── Card pattern — white card with subtle border ─────────────────────── */
.mp-card {
  background: #FFFFFF;
  border: 0.5px solid #EDEBF3;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.mp-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-card-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5A4D80;
}

.mp-card-title {
  font-size: 17px;
  font-weight: 500;
  color: #2D2540;
  margin: 0 0 4px;
}

.mp-card-body {
  font-size: 12px;
  color: #8A84A0;
  line-height: 1.4;
}

/* ── Mac-Mini-row (used inside Layer 4 per-Mac card) ─────────────────── */
.mp-mac-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.mp-mac-name {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #2D2540;
  flex: 1;
}

.mp-mac-meta {
  font-size: 11px;
  color: #8A84A0;
}

/* ── Action buttons section ──────────────────────────────────────────── */
.mp-actions-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A84A0;
  margin: 16px 0 8px;
}

.mp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-btn-primary {
  background: #5A4D80;
  color: #FFFFFF;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
  transition: background 150ms ease;
}

.mp-btn-primary:hover {
  background: #473D66;
}

.mp-btn-secondary {
  background: #FFFFFF;
  color: #5A4D80;
  border: 1px solid #5A4D80;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
  transition: background 150ms ease;
}

.mp-btn-secondary:hover {
  background: #FAFAFD;
}

/* ── Hint box (yellow info-box with gold border-left) ─────────────────── */
.mp-hint {
  background: #FFF8E1;
  border-left: 3px solid #C9A857;
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 11px;
  color: #5A4D80;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END Mobile Pattern Library v1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Responsive tables: horizontal scroll + sticky first column ──────────── */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: 0 0 8px 8px;
}

/* Right edge shadow as scroll hint */
.table-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, rgba(90, 77, 128, 0.08));
  pointer-events: none;
  border-radius: 0 0 8px 0;
}

@media (max-width: 767px) {
  .table-scroll-wrap table {
    min-width: 560px;
  }
  /* Sticky first column */
  .table-scroll-wrap th:first-child,
  .table-scroll-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  .table-scroll-wrap thead th:first-child {
    background: #FAFAFD;
  }
  .table-scroll-wrap tbody td:first-child {
    background: white;
  }
  .table-scroll-wrap tbody tr:hover td:first-child {
    background: #F5F4F9;
  }
}

/* ── Stamp buttons: bigger touch targets on mobile ───────────────────────── */
@media (max-width: 767px) {
  #stamp-buttons button,
  #stamp-buttons [type="submit"] {
    min-height: 52px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 15px !important;
  }
}

/* ── Touch targets: minimum 44px for all interactive elements ────────────── */
@media (max-width: 767px) {
  .touch-row {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Table rows – click target */
  table tbody tr {
    cursor: pointer;
  }
  /* Nav links in mobile overlay */
  #mobile-menu .mob-nav-link {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #E0DACE;
    transition: background-color 100ms;
  }
  /* Farbschema E: Icons immer Gold, auch im Mobile-Overlay. */
  #mobile-menu .mob-nav-link svg {
    color: #BFA04A;
  }
  #mobile-menu .mob-nav-link:hover,
  #mobile-menu .mob-nav-link:active {
    background: rgba(255,255,255,0.05);
    color: #F0ECE0;
  }
  #mobile-menu .mob-nav-link.active {
    background: rgba(191,160,74,0.12);
    color: #F0ECE0;
  }
}

/* ── Bottom nav item styles ──────────────────────────────────────────────── */
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: #B8B4C0;
  font-size: 10px;
  font-weight: 500;
  min-height: 56px;
  text-decoration: none;
  transition: color 100ms;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item.active,
.bottom-nav-item:active {
  color: #BFA04A;
}
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

/* ── Login page: already responsive with lg:flex ────────────────────────── */
@media (max-width: 767px) {
  .login-form-wrap {
    padding: 24px 20px !important;
  }
}

/* ── Nachtrag / form pages on mobile ─────────────────────────────────────── */
@media (max-width: 767px) {
  .max-w-2xl, .max-w-lg, .max-w-xl {
    max-width: 100% !important;
  }
  .grid.grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .grid.grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ── Header flex on mobile: stack if needed ──────────────────────────────── */
@media (max-width: 480px) {
  .mp-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* ── Sidebar toggle button ───────────────────────────────────────────────── */
#sidebar-toggle-btn {
  display: none; /* shown via @media (min-width:768px) rule above */
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  transition: color 150ms;
}
#sidebar-toggle-btn:hover {
  color: rgba(255,255,255,0.7);
}
.sidebar-collapse-arrow {
  transition: transform 200ms ease;
}
#sidebar.collapsed .sidebar-collapse-arrow {
  transform: rotate(180deg);
}

/* ── SA sidebar: Einstellungen collapsible ──────────────────────────────── */
/* Remove default browser disclosure marker from summary */
.sidebar-settings > summary::-webkit-details-marker { display: none; }
.sidebar-settings > summary::marker { content: none; }
/* Rotate chevron when details is open */
.sidebar-settings[open] > summary .details-chevron {
  transform: rotate(90deg);
}
/* Hide chevron in fully-collapsed sidebar (icon-only mode) */
#sidebar.collapsed .details-chevron { display: none !important; }
@media (min-width: 768px) and (max-width: 1024px) {
  #sidebar:not(:hover) .details-chevron { display: none !important; }
}

/* ── Monatsfreigabe: bottom-sheet on mobile ──────────────────────────────── */
@media (max-width: 767px) {
  /* Convert absolute dropdown to a slide-up bottom-sheet */
  #freigabe-dropdown {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.14);
    z-index: 100 !important;
    /* Respect iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Touch-friendly button heights in the dropdown */
  #freigabe-dropdown button {
    min-height: 44px;
  }
}
/* Backdrop: only visible on mobile (JS sets display:block, this overrides on desktop) */
@media (min-width: 768px) {
  #freigabe-backdrop {
    display: none !important;
  }
}

/* ── iPhone-Polish-Sprint (29.04.2026) — PWA + Safe-Area-Universal ───────── */

/* Form-Inputs: mind. 16px Font-Size verhindert iOS-Auto-Zoom on focus.
   Gilt fuer alle text-aehnlichen Inputs, nicht nur Mobile-Breakpoint. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input:not([type]),
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Universal 44x44 touch targets fuer interaktive Elemente.
   iOS Human Interface Guidelines: minimum tap target. */
@media (max-width: 767px) {
  button,
  a.btn,
  .btn,
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Body-Level: Notch + Home-Indicator-Padding fuer Layout-Container die
   nicht via #main-content / #bottom-nav abgedeckt sind (z.B. Login-Page,
   Auth-Flows die base_plain.html nutzen). */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* Pull-to-Refresh-Bouncing in PWA-Standalone-Mode unterdruecken.
   Browser-Default verhaelt sich sonst seltsam wenn die App "echt" wirken soll. */
html, body {
  overscroll-behavior-y: contain;
}

/* Tap-Highlight default-aus, Focus-Ring fuer Accessibility erhalten. */
button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #BFA04A; /* Gold-Akzent */
  outline-offset: 2px;
}

/* Native Momentum-Scrolling fuer scrollable Container. */
.scrollable,
[data-scroll],
#main-content {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Pattern Library v1.1 — Pipeline #18 Mobile-UX-Sprint (03.05.2026)
   Authoritative source-of-truth. Mobile-First defaults, Desktop overrides.
   Reference: docs/mobile-pattern-v11-reference.html

   v1.1 NEW classes (11 total). Additive to v1 — no breaking changes.
   - Inline-Bar group (8): KPI-Strip pattern per Markus visual-spec
     mockups/mobile_ux_mockup_BvsC.html Variante-C-side
   - Generic (3): table-mobile dual-mode wrapper, nav-section header,
     mobile-first page wrapper
   ============================================================ */

/* ── Inline-Bar Container — KPI-Strip (Variante C, mockup L426–435) ───── */
.mp-inline-bar {
  background: var(--mp-card-bg);
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* ── Inline-Item — Single KPI (mockup L437–445) ──────────────────────── */
.mp-inline-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 2px;
}

/* ── Inline-Divider — 1px vertical separator (mockup L465–468) ────────── */
.mp-inline-divider {
  width: 1px;
  background: var(--mp-border);
  flex-shrink: 0;
}

/* ── Inline-Icon — 14px slot for Heroicons-v2 stroke-2 SVG
     (NOT emoji per §13.4 — emoji break grid + are locale-sensitive
     glyphs; Heroicons-v2 stroke-2 is the design-system standard).
     Mockup L447–450. ────────────────────────────────────────────────── */
.mp-inline-icon {
  width: 14px;
  height: 14px;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-text-muted);
}

.mp-inline-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* ── Inline-Icon-Warn — Critical icon variant (mockup L470–472) ─────── */
.mp-inline-icon--warn {
  color: var(--mp-danger);
}

/* ── Inline-Value — KPI value (mockup L452–457) ──────────────────────── */
.mp-inline-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text);
  line-height: 1.1;
}

/* ── Inline-Value-Danger — Critical value variant (mockup L474–476) ──── */
.mp-inline-value--danger {
  color: var(--mp-danger);
}

/* ── Inline-Label — KPI label below value (mockup L459–463) ──────────── */
.mp-inline-label {
  font-size: 10px;
  color: var(--mp-text-muted);
  margin-top: 2px;
}

/* ── Table-Mobile — dual-mode wrapper for the mobile-only card-list view.
     Pattern reference: app/templates/admin/backup/_tab_history.html L92–241.
     Convention:
       <div class="hidden md:block">  <table>...</table>  </div>
       <div class="mp-table-mobile">  ... mobile cards ...  </div>
     Cards inside use existing .mp-card (v1) — consumers compose, not
     reimplement. Mobile-First default = visible; desktop hides via
     min-width: 768px (tablet+ uses real <table>). ──────────────────── */
.mp-table-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .mp-table-mobile {
    display: none;
  }
}

/* ── Nav-Section — Hamburger/Sidebar Section-Header
     Used to label role-tier sections in the mobile drawer
     (MEIN BEREICH / VERWALTUNG / CORVOSOFT). Block E (Pipeline #18)
     consumes this for the Hamburger-Drawer-Refactor. ──────────────── */
.mp-nav-section {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mp-text-muted);
  padding: 8px 16px;
}

/* ── Page-Mobile — Generic Mobile-First Page-Wrapper.
     Mobile default = full-width with 16px padding. Desktop adds
     max-width clamp + auto-margin centering. Use this for new
     mobile-first detail pages instead of inline Tailwind grid-
     containers. NO max-width on mobile (Lesson 45 Width-Clamp-
     Convention: base.html clamps the outer wrapper). ─────────────── */
.mp-page-mobile {
  padding: 16px;
}

@media (min-width: 768px) {
  .mp-page-mobile {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Pattern Library v1.2 NEU (Pipeline #21, 04.05.2026)
   ────────────────────────────────────────────────────────────────────────── */

/* ── Landscape-Hint Banner ─────────────────────────────────────────────────
   Zeigt Mobile-User auf dass eine Page für Landscape-Mode optimiert ist.
   Auto-Hide:
   - bei Landscape (`@media orientation: landscape`)
   - bei Desktop ≥768px
   Inventory siehe Konzept §13.5: Pages mit Landscape-Hint sind
   `praxis/qualifications`, `time/monatsübersicht`, `praxis/zeiten_detail`,
   `praxis/auswertungen`, `admin/mitarbeitende_list`.

   SVG-Markup für `.mp-landscape-hint__icon` — V5 FINAL approved
   05.05.2026 spätabends (V1+V2+V3 visual-rejected; V4 hatte nur 2px
   Überlapp und wirkte „nebeneinander"; V5 shift Portrait-rect +12 nach
   rechts → 8-Einheiten echter Overlap. Siehe Lesson 55 — Custom-SVG nur
   nach visual-render-Approval freigeben).
   UXWing Two-Phones überlappend: Portrait (fill=white, x=14) überlagert
   Landscape-Phone (x=22) → Layer-Overlap-Effect. Doppelpfeil oben
   (Q-curve M 30 8 Q 44 2 50 23) mit Pfeilspitzen an beiden Enden via
   SVG-marker. viewBox 64×48 (4:3), Slot 32×24.

   Zentrale Definition als Jinja-Macro in `app/templates/_landscape_hint.html`:

       {% from '_landscape_hint.html' import landscape_hint %}
       {{ landscape_hint() }}

   Inline-Markup (für Mockups oder Macro-loses Rendering):

   <svg class="mp-landscape-hint__icon" viewBox="0 0 64 48"
        fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round"
        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <defs>
       <marker id="lh-arr-end" viewBox="0 0 10 10" refX="8" refY="5"
               markerWidth="5" markerHeight="5" orient="auto">
         <path d="M2 2 L8 5 L2 8" fill="none" stroke="currentColor"
               stroke-width="1.5" stroke-linecap="round"
               stroke-linejoin="round"/>
       </marker>
       <marker id="lh-arr-start" viewBox="0 0 10 10" refX="2" refY="5"
               markerWidth="5" markerHeight="5" orient="auto-start-reverse">
         <path d="M2 2 L8 5 L2 8" fill="none" stroke="currentColor"
               stroke-width="1.5" stroke-linecap="round"
               stroke-linejoin="round"/>
       </marker>
     </defs>
     <rect x="22" y="22" width="36" height="16" rx="2.5"/>
     <rect x="14" y="4" width="16" height="36" rx="2.5" fill="white"/>
     <path d="M 30 8 Q 44 2 50 23"
           marker-start="url(#lh-arr-start)"
           marker-end="url(#lh-arr-end)"
           stroke-width="1.5"/>
   </svg>

   Reference-Mockup: docs/mobile-pattern-v12-reference.html (Block E). */
.mp-landscape-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -16px 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(90, 77, 128, 0.08), rgba(191, 160, 74, 0.08));
  border-top: 1px solid var(--mp-border);
  border-bottom: 1px solid var(--mp-border);
  font-size: 13px;
  color: var(--mp-text-muted);
  font-weight: 500;
}

.mp-landscape-hint__icon {
  flex-shrink: 0;
  /* V4 Slot-Erweiterung 05.05.2026: viewBox 64×48 (4:3) braucht
     32×24 Slot für klare Two-Phones-Darstellung. Lesson 55 NEU:
     bei Multi-Element-Symbols reicht 24×24 nicht. */
  width: 32px;
  height: 24px;
  color: var(--mp-gold);
}

@media (orientation: landscape) {
  .mp-landscape-hint { display: none; }
}

@media (min-width: 768px) {
  .mp-landscape-hint { display: none; }
}

/* ── Form-Row 2-Spalten-Layout ────────────────────────────────────────────
   Stack auf Mobile, 2-col auf Tablet+. Verwendung in Form-Pages
   (mitarbeitende_form, team_detail) statt inline `grid grid-cols-1 md:grid-cols-2 gap-4`.
   Touch-Target via `.mp-form-row > input/select/textarea { min-height: 44px }`
   greift auch im Container. */
.mp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .mp-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.mp-form-row--three {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .mp-form-row--three {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
}

/* ── Status-Badges (Pipeline #21 Block B Nachschuss) ──────────────────────
   3-Klassen-Familie für Status-Anzeigen analog Konzept §13.2.
   Verwendung: `<span class="mp-status-success">freigegeben</span>`.
   - success: genehmigt, aktiv, geprüft, freigegeben
   - warning: offen, ausstehend, läuft ab, Korrektur, Pause, PM-Review
   - danger:  abgelehnt, error-states (5te Klasse, Markus GO 04.05.2026 P#21 Block C) */
.mp-status-success,
.mp-status-warning,
.mp-status-danger {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.mp-status-success {
  background: var(--mp-success);
  color: var(--mp-success-strong);
}

.mp-status-warning {
  background: var(--mp-warning);
  color: var(--mp-warning-strong);
}

.mp-status-danger {
  background: #FFE5E5;
  color: var(--mp-danger);
}

/* mp-status-neutral: unknown status fallback (F-001 Phase 3, 06.05.2026) */
.mp-status-neutral {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--mp-border);
  color: var(--mp-text-muted);
}

/* ── Form-Input Standard-Pattern (Pipeline #21 Block B Nachschuss D.3+) ──
   Konsolidiert das wiederholte inline-Pattern
   `rounded-[8px] border px-4 py-2.5 text-sm bg-white focus:ring-2`
   das in 9+ Form-Inputs über D.1-D.3 auftrat (Schwellenwert 5+ klar
   überschritten, plus Forecast 70+ Inputs in D.4-D.13).

   Variants:
   - .mp-input (default): full-width number/date/text/email
   - .mp-input--error: red border bei Validation-Fail
   - .mp-input--narrow: width: auto für time-inputs / kurze Felder

   Touch-Target via `min-height: 44px` (Lesson 49 für Form-Inputs;
   .mp-btn-primary bleibt min-height 48px für Action-Buttons). */
.mp-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--mp-border);
  border-radius: 8px;
  background: white;
  color: var(--mp-text);
  font-size: 14px;
  min-height: 44px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mp-input:focus {
  outline: none;
  border-color: #5A4D80;
  box-shadow: 0 0 0 2px rgba(90, 77, 128, 0.2);
}

.mp-input--error {
  border-color: var(--mp-danger);
}

.mp-input--narrow {
  width: auto;
}