/* ═══════════════════════════════════════════
   HandwerksFlux — Web Layout Scaffolding
   Brand-Farben + Bootstrap-Bridge: BrandingStyle.razor
   Field-Overrides (§14): siehe .hf-field am Ende dieser Datei
   ═══════════════════════════════════════════ */

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ─── App Shell Layout ───────────────────── */
.hf-shell {
    display: flex;
    min-height: 100vh;
}

.hf-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    overflow-y: auto;
}

/* Sidebar-Links: 48px Tap-Target (Zielgruppe 40-60+, Handschuhe) */
.hf-sidebar .nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
}

.hf-main {
    flex: 1 1 auto;
    min-width: 0;
}

.hf-content {
    max-width: 1600px;
}

/* ─── Mobile: Sidebar als Drawer ─────────── */
@media (max-width: 768px) {
    .hf-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
    }

    .hf-sidebar.open {
        transform: translateX(0);
    }

    .hf-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1049;
    }
}

/* ─── Utility: Font Mono fuer Logs ───────── */
/* System-Fonts only (DESIGN.md §3.1) — keine nicht geladenen Web-Fonts listen */
.hf-font-mono {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
}

/* ─── Status-Badge "Geplant" — Navy statt Bootstrap-Cyan (bg-info,
   nicht in der HF-Palette, DESIGN.md §2) ─── */
.hf-badge-status {
    background: var(--hf-navy, #1a2e4a);
    color: #fff;
    font-weight: 600;
}

/* ─── Branding: Farbwahl-Palette ─────────── */
.hf-color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.hf-color-swatch:hover {
    transform: scale(1.15);
}

.hf-color-swatch.active {
    border-color: var(--bs-body-color);
    transform: scale(1.2);
}

/* ═══════════════════════════════════════════
   §14 Field-Overrides — fuer Pages, die auf der Baustelle benutzt werden
   Anwendung: <div class="hf-field"> am Page-Root.
   Klassifikation pro Page: siehe DESIGN.md §14.7-Tabelle.

   WAS DIESE OVERRIDES MACHEN (gegen Bootstrap-/Brand-Defaults):
   - Body 17px / 500 statt 16/400  (§14.2 — outdoor + aeltere Augen)
   - Buttons 52px Mindesthoehe     (§14.3 — Handschuhe)
   - Inputs 56px Mindesthoehe      (§14.3)
   - Tap-Target-Abstand 12px       (§14.3)
   - Borders statt Shadows         (§14.4 — Shadows verschwinden in Sonne)

   WAS SIE NICHT MACHEN:
   - Brand-Farben aendern (kommen weiterhin aus BrandingStyle / Tenant)
   - Status-Farben aendern (sind dort schon §14.1-konform)
   ═══════════════════════════════════════════ */

.hf-field {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

.hf-field h1, .hf-field h2, .hf-field h3, .hf-field h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hf-navy, #1a2e4a);
}

/* Buttons in Field-Pages — Mindest-Hoehe + Mindest-Padding fuer Glove-Tap */
.hf-field .btn,
.hf-field .dxbl-btn {
    min-height: 52px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
}
.hf-field .btn-sm,
.hf-field .dxbl-btn-sm {
    min-height: 44px; /* Sekundaerebene — z.B. Toolbar-Buttons */
    padding: 0.625rem 1rem;
}

/* Inputs in Field-Pages — 56px hoch, 2px Border, kein Glow im Focus */
.hf-field .form-control,
.hf-field .form-select,
.hf-field .dxbl-text-edit {
    min-height: 56px;
    padding: 0.875rem 1rem;
    border-width: 2px !important;
    font-size: 1rem;
    font-weight: 500;
}
.hf-field .form-control:focus,
.hf-field .form-select:focus {
    box-shadow: none !important;
}

/* Cards in Field-Pages — 1.5px Border, kein Shadow (§14.4) */
.hf-field .card {
    border-width: 1.5px !important;
    box-shadow: none !important;
}

/* Tabellen in Field-Pages — groessere Zellen */
.hf-field .table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

/* Tap-Target-Spacing — Buttons in einer Reihe brauchen Abstand (§14.3).
   margin-LEFT am Folge-Button — margin-right auf ".btn + .btn" war wirkungslos
   (schob nach rechts statt Abstand zum Vorgaenger zu schaffen). */
.hf-field .btn + .btn { margin-left: 0.75rem; }

/* Scheduler-spezifische Field-Overrides werden in einem separaten
   File (devextreme-overrides.css fuer Web bzw. dx-Theme) gesetzt. */

/* ═══════════════════════════════════════════
   Side-Panel-Popup (DESIGN.md §13.4)
   PlantafelPage oeffnet PlanungDetail rechts als Slide-In statt Full-Page.
   Nur Desktop (siehe PlantafelPage._isDesktop / hfViewport.isDesktop).
   ═══════════════════════════════════════════ */
.hf-side-panel.dxbl-popup .dxbl-popup-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: min(540px, 95vw) !important;
    max-width: 95vw !important;
    border-radius: 0 !important;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
    transform: none !important;
}

.hf-side-panel .dxbl-popup-header {
    border-radius: 0 !important;
}

.hf-side-panel .dxbl-popup-body {
    overflow-y: auto;
}