<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light">
    <title>@yield('page_title', $title ?? 'Kaffeeliste SaaS')</title>
    @php
        $layoutAuth = $auth ?? (function_exists('app_auth_user') ? app_auth_user() : null);
        $layoutLicense = $tenantLicense ?? ['features' => []];
        $layoutThemeSettings = $tenantSettings ?? (function_exists('app_tenant_settings_defaults') ? app_tenant_settings_defaults() : []);
        if (!isset($tenantSettings) && is_array($layoutAuth) && function_exists('app_pdo') && function_exists('app_tenant_settings')) {
            try {
                $layoutThemeSettings = app_tenant_settings(app_pdo(), (string) ($layoutAuth['tenant_id'] ?? ''));
            } catch (Throwable $ignored) {
            }
        }
        $layoutPath = parse_url((string) ($_SERVER['REQUEST_URI'] ?? '/'), PHP_URL_PATH);
        $layoutPath = is_string($layoutPath) ? rtrim($layoutPath, '/') : '/';
        $layoutNavItems = function_exists('app_tenant_navigation_items')
            ? app_tenant_navigation_items($layoutAuth, $layoutLicense)
            : [];
        $layoutThemeCss = function_exists('app_tenant_theme_root_css')
            ? app_tenant_theme_root_css($layoutThemeSettings)
            : '';
    @endphp
    <style>
        :root {
            {!! $layoutThemeCss !!}
            --line: rgba(44, 32, 23, 0.14);
            --shadow: 0 18px 42px rgba(68, 48, 34, 0.08);
            --radius-xl: 24px;
            --radius-lg: 18px;
            --content-width: 1220px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            min-height: 100vh;
            color: var(--text);
            background:
                linear-gradient(180deg, #f8f1e6 0%, var(--bg) 100%);
            font-family: "Trebuchet MS", "Aptos", "Segoe UI", sans-serif;
            line-height: 1.55;
        }

        h1, h2, h3, h4, .hero__title, .brand__title {
            font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
            letter-spacing: -0.02em;
        }

        a { color: var(--brand-strong); text-decoration: none; }
        a:hover { text-decoration: underline; }
        img { max-width: 100%; }

        .app-shell { min-height: 100vh; }
        .app-header {
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid var(--line);
            background: rgba(249, 242, 231, 0.96);
            backdrop-filter: blur(12px);
        }
        .app-header__inner,
        .app-main,
        .app-footer__inner {
            width: min(var(--content-width), calc(100% - 32px));
            margin: 0 auto;
        }
        .app-header__inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 18px 0;
        }
        .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
        .brand__mark {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, var(--brand) 0%, #115e59 55%, var(--accent) 100%);
            box-shadow: 0 12px 26px rgba(45, 106, 79, 0.2);
        }
        .brand__text { display: grid; gap: 2px; min-width: 0; }
        .brand__title { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; }
        .brand__subtitle { margin: 0; color: var(--muted); font-size: 0.92rem; }
        .header-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .badge,
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: var(--bg-soft);
            padding: 0.42rem 0.75rem;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--brand-strong);
        }
        .badge--solid { background: var(--brand); color: #fff; border-color: transparent; }
        .app-nav {
            width: min(var(--content-width), calc(100% - 32px));
            margin: 0 auto 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .app-nav a {
            padding: 0.65rem 0.95rem;
            border-radius: 999px;
            border: 1px solid rgba(44, 32, 23, 0.08);
            background: rgba(255, 251, 244, 0.88);
            color: var(--text);
            font-size: 0.92rem;
            font-weight: 600;
        }
        .app-nav a.is-primary {
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
            color: #fff;
        }
        .app-nav a:hover {
            text-decoration: none;
            border-color: rgba(var(--brand-rgb), 0.2);
            background: #fffdf8;
        }
        .app-main { padding: 34px 0 56px; }
        .hero {
            display: grid;
            gap: 24px;
            margin-bottom: 28px;
            padding: 30px;
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            background:
                linear-gradient(135deg, rgba(255, 251, 244, 0.98), rgba(252, 247, 240, 0.95));
            box-shadow: var(--shadow);
        }
        .hero--split {
            grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
            align-items: stretch;
        }
        .hero__content,
        .hero__aside {
            display: grid;
            gap: 18px;
        }
        .hero__kicker {
            margin: 0 0 12px;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-size: 0.8rem;
            color: var(--accent);
            font-weight: 700;
        }
        .hero__title {
            margin: 0;
            font-size: clamp(2rem, 4vw, 3.6rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
        }
        .hero__lead {
            margin: 0;
            max-width: 68ch;
            color: var(--muted);
            font-size: 1.02rem;
        }
        .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
        .hero__meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .button,
        button,
        input[type="submit"] {
            appearance: none;
            border: 0;
            border-radius: 999px;
            padding: 0.8rem 1.15rem;
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
            color: #fff;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 12px 24px rgba(var(--brand-rgb), 0.18);
        }
        .button--ghost {
            background: transparent;
            color: var(--brand-strong);
            border: 1px solid rgba(var(--brand-rgb), 0.18);
            box-shadow: none;
        }
        .grid { display: grid; gap: 18px; }
        .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .card,
        .panel,
        .form-panel,
        .table-card {
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--bg-elevated);
            box-shadow: var(--shadow);
            padding: 22px;
        }
        .card__eyebrow {
            margin: 0 0 10px;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--accent);
            font-weight: 700;
        }
        .metric { display: grid; gap: 8px; }
        .metric__value {
            font-size: clamp(1.6rem, 2.5vw, 2.4rem);
            font-weight: 800;
            letter-spacing: -0.03em;
        }
        .metric__label,
        .muted { color: var(--muted); }
        .list-reset { margin: 0; padding: 0; list-style: none; }
        .list-reset li + li { margin-top: 12px; }
        .stack { display: grid; gap: 14px; }
        .feature-list {
            display: grid;
            gap: 12px;
        }
        .feature-list__item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(31, 41, 51, 0.08);
        }
        .feature-list__badge {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: rgba(15, 118, 110, 0.1);
            color: var(--brand-strong);
            font-weight: 800;
        }
        .feature-list__title {
            margin: 0 0 4px;
            font-weight: 700;
        }
        .feature-list__copy {
            margin: 0;
            color: var(--muted);
            font-size: 0.94rem;
        }
        .split {
            display: grid;
            gap: 18px;
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
        }
        .auth-summary__card {
            padding: 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(31, 41, 51, 0.08);
        }
        .tenant-grid {
            display: grid;
            gap: 12px;
        }
        .tenant-row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(31, 41, 51, 0.08);
        }
        .tenant-row__meta {
            display: grid;
            gap: 4px;
        }
        .tenant-row__title {
            margin: 0;
            font-weight: 700;
        }
        .tenant-row__copy {
            margin: 0;
            color: var(--muted);
            font-size: 0.92rem;
        }
        .callout {
            padding: 16px 18px;
            border-radius: 18px;
            background: rgba(45, 106, 79, 0.08);
            border: 1px solid rgba(45, 106, 79, 0.14);
            color: var(--brand-strong);
        }
        .callout strong {
            display: block;
            margin-bottom: 4px;
        }
        .metric--compact {
            padding: 18px 20px;
        }
        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 18px;
        }
        .toolbar .badge { background: #fff; }
        .table-card { overflow: hidden; padding: 0; }
        .table-card__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 22px 12px;
        }
        .table-card__body {
            padding: 0 22px 22px;
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 680px;
        }
        th,
        td {
            padding: 0.95rem 0.8rem;
            border-bottom: 1px solid rgba(31, 41, 51, 0.08);
            text-align: left;
            vertical-align: top;
        }
        th {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--muted);
            font-weight: 700;
            background: rgba(249, 242, 231, 0.6);
        }
        tr:last-child td { border-bottom: 0; }
        .status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0.38rem 0.65rem;
            border-radius: 999px;
            background: rgba(15, 118, 110, 0.11);
            color: var(--brand-strong);
            font-weight: 700;
            font-size: 0.82rem;
        }
        .status--warning { background: rgba(180, 83, 9, 0.12); color: #92400e; }
        .status--danger { background: rgba(185, 28, 28, 0.12); color: #991b1b; }
        .form-grid { display: grid; gap: 16px; }
        .field { display: grid; gap: 8px; }
        label { font-size: 0.9rem; font-weight: 700; }
        input,
        select,
        textarea {
            width: 100%;
            border: 1px solid rgba(31, 41, 51, 0.14);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.95);
            padding: 0.85rem 0.95rem;
            font: inherit;
            color: var(--text);
        }
        textarea { min-height: 120px; resize: vertical; }
        .note {
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(15, 118, 110, 0.08);
            border: 1px solid rgba(15, 118, 110, 0.12);
            color: var(--brand-strong);
        }
        .timeline { display: grid; gap: 14px; }
        .timeline--tight { gap: 10px; }
        .timeline__item {
            display: grid;
            gap: 6px;
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(31, 41, 51, 0.08);
        }
        .timeline__title { margin: 0; font-weight: 700; }
        .timeline__meta { margin: 0; color: var(--muted); font-size: 0.92rem; }
        .app-footer { padding: 0 0 38px; }
        .app-footer__inner {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            border-top: 1px solid var(--line);
            padding-top: 18px;
            color: var(--muted);
            font-size: 0.92rem;
        }
        @media (max-width: 960px) {
            .grid--2,
            .grid--3,
            .grid--4,
            .split,
            .hero--split { grid-template-columns: 1fr; }
            .app-header__inner { flex-direction: column; align-items: flex-start; }
            .header-meta { justify-content: flex-start; }
            .hero,
            .card,
            .panel,
            .form-panel,
            .table-card { padding: 18px; }
        }
    </style>
</head>
<body class="@yield('body_class')">
    <div class="app-shell">
        <header class="app-header">
            <div class="app-header__inner">
                <div class="brand">
                    <div class="brand__mark">K</div>
                <div class="brand__text">
                        <h1 class="brand__title">Kaffeeliste SaaS</h1>
                        <p class="brand__subtitle">Kaffeekasse, Mitglieder und Verwaltung pro Tenant</p>
                    </div>
                </div>
                <div class="header-meta">
                    @if (is_array($layoutAuth))
                        <span class="badge">{{ $layoutAuth['tenant_name'] ?? 'Tenant' }}</span>
                        @if (function_exists('app_can_manage_tenant') && app_can_manage_tenant($layoutAuth))
                            <span class="badge badge--solid">Verwaltung</span>
                        @else
                            <span class="badge badge--solid">Mitglied</span>
                        @endif
                    @else
                        <span class="badge">Klassische Oberflaeche</span>
                        <span class="badge badge--solid">Mandantenfaehig</span>
                    @endif
                </div>
            </div>
            <nav class="app-nav" aria-label="Hauptnavigation">
                @forelse ($layoutNavItems as $item)
                    @php
                        $itemHref = rtrim((string) ($item['href'] ?? '/'), '/');
                        $itemHref = $itemHref === '' ? '/' : $itemHref;
                        $isActive = $layoutPath === $itemHref;
                    @endphp
                    <a href="{{ $item['href'] ?? '/' }}" class="{{ $isActive ? 'is-primary' : '' }}">{{ $item['label'] ?? 'Link' }}</a>
                @empty
                    <a class="is-primary" href="/">Start</a>
                    <a href="/login/">Anmeldung</a>
                @endforelse
            </nav>
        </header>

        <main class="app-main">
            @yield('content')
        </main>

        <footer class="app-footer">
            <div class="app-footer__inner">
                <span>Kaffeeliste SaaS</span>
                <span>Mitglieder, Striche, Einzahlungen, Hinweise und Exporte in einem System</span>
            </div>
        </footer>
    </div>
</body>
</html>
