/* ============================================================
   „Apple" — Design mit eigener Geometrie & Material, nicht nur Farbe.
   Aktiv nur unter html[data-design="apple"].

   Kennzeichen: mattierte/transluzente Chrome (backdrop-filter),
   SF-Typografie, große weiche Radien, Pill-Buttons, gruppierte
   Listen im iOS-Stil, viel Weißraum, sehr dezente Schatten.
   ============================================================ */

html[data-design="apple"] {
    --font-mono: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --radius: 16px;

    --primary: #0071e3;            /* Apple-Blau */
    --primary-dark: #0077ed;
    --primary-light: #3a93f0;
    --secondary: #5e5ce6;

    --bg-main: #f5f5f7;            /* Apple-Hellgrau */
    --bg-dark: #f5f5f7;
    --bg-card: #ffffff;
    --bg-sidebar: rgba(245, 245, 247, .72);   /* transluzent → Material */
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #86868b;
    --border-color: #d2d2d7;

    --success: #34c759;            /* iOS-Systemfarben */
    --warning: #ff9f0a;
    --danger: #ff3b30;
    --info: #0071e3;

    --ap-fill:    rgba(0, 0, 0, .055);          /* dezente Füllung (Hover/Aktiv) */
    --ap-fill-2:  rgba(0, 0, 0, .085);
    --ap-hairline: rgba(0, 0, 0, .10);
    --ap-card-shadow: 0 1px 1px rgba(0,0,0,.03), 0 8px 28px rgba(0,0,0,.07);
    --ap-pop-shadow:  0 10px 40px rgba(0,0,0,.16);
    --ap-blur: saturate(180%) blur(20px);
    --header-height: 56px;
}

html[data-design="apple"][data-theme="dark"] {
    --bg-main: #000000;
    --bg-dark: #000000;
    --bg-card: #1c1c1e;
    --bg-sidebar: rgba(22, 22, 24, .72);
    --text-primary: #f5f5f7;
    --text-secondary: #aeaeb2;
    --text-muted: #8e8e93;
    --border-color: #38383a;
    --primary: #0a84ff;
    --primary-dark: #0a84ff;
    --primary-light: #409cff;

    --ap-fill:    rgba(255, 255, 255, .08);
    --ap-fill-2:  rgba(255, 255, 255, .14);
    --ap-hairline: rgba(255, 255, 255, .12);
    --ap-card-shadow: 0 1px 1px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
    --ap-pop-shadow:  0 12px 44px rgba(0,0,0,.6);
}

/* ---------- Typografie & Grundlayout ---------- */
html[data-design="apple"] body {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html[data-design="apple"] h1,
html[data-design="apple"] h2,
html[data-design="apple"] h3 { letter-spacing: -.02em; }

/* mehr Luft im Inhaltsbereich */
html[data-design="apple"] .content-body { padding: 28px 32px 40px; }
@media (max-width: 768px) { html[data-design="apple"] .content-body { padding: 18px 16px 28px; } }

/* ---------- Sidebar als Material ---------- */
html[data-design="apple"] .sidebar {
    background: var(--bg-sidebar);
    -webkit-backdrop-filter: var(--ap-blur);
    backdrop-filter: var(--ap-blur);
    border-right: 1px solid var(--ap-hairline);
}
html[data-design="apple"] .sidebar-header {
    border-bottom: 1px solid var(--ap-hairline);
    padding: 16px 18px;
}
html[data-design="apple"] .sidebar-nav { padding: 10px 10px 22px; }
html[data-design="apple"] .nav-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;            /* Apple: Title Case, nicht UPPERCASE */
    color: var(--text-muted);
    padding: 14px 12px 6px;
}
html[data-design="apple"] .nav-item {
    border-radius: 8px;
    margin: 1px 0;
    padding: 7px 10px;
    color: var(--text-primary);
    font-weight: 400;
    border: none;
    gap: 10px;
    transition: background .12s ease;
}
html[data-design="apple"] .nav-item:hover { background: var(--ap-fill); }
html[data-design="apple"] .nav-item.active {
    background: var(--ap-fill-2);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: none;
}
html[data-design="apple"] .nav-item.active .nav-icon { color: var(--primary); }
html[data-design="apple"] .nav-item .nav-icon { width: 20px; color: var(--primary); opacity: .92; }
html[data-design="apple"] .sidebar-footer { border-top: 1px solid var(--ap-hairline); }

/* ---------- Kopfzeile als Material ---------- */
html[data-design="apple"] .content-header {
    background: color-mix(in srgb, var(--bg-main) 72%, transparent);
    -webkit-backdrop-filter: var(--ap-blur);
    backdrop-filter: var(--ap-blur);
    border-bottom: 1px solid var(--ap-hairline);
    box-shadow: none;
}
html[data-design="apple"] .content-header h1,
html[data-design="apple"] .content-header h2 {
    font-weight: 600;
    font-size: 19px;
}

/* ---------- Karten: groß, randlos, sehr weicher Schatten ---------- */
html[data-design="apple"] .card,
html[data-design="apple"] .stat-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--ap-card-shadow);
    transition: box-shadow .25s ease, transform .25s ease;
}
html[data-design="apple"] .stat-card:hover { transform: translateY(-2px); }
html[data-design="apple"] .card-header {
    border-bottom: 1px solid var(--ap-hairline);
    padding: 18px 22px;
    background: transparent;
}
html[data-design="apple"] .card-header h3 { font-size: 17px; font-weight: 600; }
html[data-design="apple"] .card-body { padding: 22px; }

/* ---------- Buttons: Pillen ---------- */
html[data-design="apple"] .btn {
    border-radius: 980px;
    font-weight: 500;
    padding: 8px 18px;
    letter-spacing: -.01em;
    border: none;
    transition: filter .15s ease, background .15s ease, transform .1s ease, box-shadow .2s ease;
}
html[data-design="apple"] .btn:active { transform: scale(.97); }
html[data-design="apple"] .btn-sm { padding: 5px 14px; }
html[data-design="apple"] .btn-lg { padding: 12px 26px; }
html[data-design="apple"] .btn-primary { background: var(--primary); color: #fff; }
html[data-design="apple"] .btn-primary:hover { background: var(--primary); filter: brightness(1.07); color: #fff; }
html[data-design="apple"] .btn-secondary {
    background: var(--ap-fill);
    color: var(--primary);
    border: none;
}
html[data-design="apple"] .btn-secondary:hover { background: var(--ap-fill-2); color: var(--primary); }
html[data-design="apple"] .btn-danger  { background: var(--danger);  color: #fff; }
html[data-design="apple"] .btn-success { background: var(--success); color: #fff; }
/* Icon-Buttons rund */
html[data-design="apple"] .btn-icon { border-radius: 50%; }

/* ---------- Formularfelder ---------- */
html[data-design="apple"] .form-control,
html[data-design="apple"] select.form-control,
html[data-design="apple"] textarea.form-control {
    border-radius: 12px;
    border: 1px solid var(--ap-hairline);
    background: var(--bg-card);
    padding: 10px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-design="apple"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
    outline: none;
}
html[data-design="apple"] .form-group label { font-weight: 500; color: var(--text-secondary); }

/* ---------- Tabellen als gruppierte Liste (iOS-Stil) ---------- */
html[data-design="apple"] .table { border-collapse: separate; border-spacing: 0; }
html[data-design="apple"] .table thead th {
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-transform: none;
    border-bottom: 1px solid var(--ap-hairline);
    padding: 10px 18px;
}
html[data-design="apple"] .table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ap-hairline);
}
html[data-design="apple"] .table tbody tr { transition: background .1s ease; }
html[data-design="apple"] .table tbody tr:hover td { background: var(--ap-fill); }
html[data-design="apple"] .table tbody tr:last-child td { border-bottom: none; }

/* ---------- Badges / Chips ---------- */
html[data-design="apple"] .badge {
    border-radius: 980px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: none;
}
html[data-design="apple"] .badge-primary   { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
html[data-design="apple"] .badge-success   { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
html[data-design="apple"] .badge-secondary { background: var(--ap-fill-2); color: var(--text-secondary); }
html[data-design="apple"] .chip { border-radius: 980px; background: var(--ap-fill); border: none; }

/* ---------- Segmentierte Steuerung (Filter-Pills) ---------- */
html[data-design="apple"] .filter-pills,
html[data-design="apple"] .segment {
    background: var(--ap-fill);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
}
html[data-design="apple"] .filter-pill {
    border-radius: 8px;
    border: none;
    background: transparent;
    font-weight: 500;
}
html[data-design="apple"] .filter-pill.active,
html[data-design="apple"] .filter-pill[aria-selected="true"] {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ---------- Modale: Material + große Radien ---------- */
html[data-design="apple"] .modal {
    border-radius: 18px;
    border: none;
    box-shadow: var(--ap-pop-shadow);
}
html[data-design="apple"] .modal-overlay {
    background: rgba(0,0,0,.32);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* ---------- Statuskacheln ---------- */
html[data-design="apple"] .stat-card .stat-value,
html[data-design="apple"] .stat-card .v { font-weight: 600; letter-spacing: -.03em; }

/* ---------- Scrollbar: schlank, Overlay-Anmutung ---------- */
html[data-design="apple"] *::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-design="apple"] *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 980px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-design="apple"] *::-webkit-scrollbar-track { background: transparent; }

/* ---------- Fokus-Ring ---------- */
html[data-design="apple"] :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
    border-radius: 8px;
}
html[data-design="apple"] :focus:not(:focus-visible) { outline: none; }

/* ---------- Login ---------- */
html[data-design="apple"] .login-card {
    border-radius: 22px;
    border: none;
    box-shadow: var(--ap-pop-shadow);
}

/* ============================================================
   LAYOUT-UMBAU: schwebende Panels auf einem getönten „Desktop"
   (macOS-/iPadOS-Mehrfenster-Anmutung). Nur Desktop ≥769px;
   auf Mobil bleibt das bestehende Off-Canvas-Verhalten.
   ============================================================ */
html[data-design="apple"] {
    --ap-desktop: #e6e6ea;          /* getönte Fläche hinter den Panels */
    --ap-pane:    var(--bg-main);   /* Inhalts-Canvas (hell: #f5f5f7) */
    --ap-gutter:  16px;
}
html[data-design="apple"][data-theme="dark"] {
    --ap-desktop: #000000;
    --ap-pane:    #141416;
}

@media (min-width: 769px) {
    html[data-design="apple"] body,
    html[data-design="apple"] .app-wrapper { background: var(--ap-desktop); }

    /* Sidebar = freistehendes, abgerundetes Panel */
    html[data-design="apple"]:not(.sidebar-collapsed) .sidebar {
        top: var(--ap-gutter);
        left: var(--ap-gutter);
        bottom: var(--ap-gutter);
        height: auto;
        width: calc(var(--sidebar-width) - 12px);
        border-radius: 22px;
        border: 1px solid var(--ap-hairline);
        box-shadow: var(--ap-card-shadow);
    }
    html.sidebar-collapsed[data-design="apple"] .sidebar {
        top: var(--ap-gutter);
        left: var(--ap-gutter);
        bottom: var(--ap-gutter);
        height: auto;
        width: 72px;
        border-radius: 22px;
        border: 1px solid var(--ap-hairline);
        box-shadow: var(--ap-card-shadow);
    }

    /* Inhalt = freistehender, abgerundeter Canvas */
    html[data-design="apple"] .main-content {
        margin: var(--ap-gutter) var(--ap-gutter) var(--ap-gutter) calc(var(--sidebar-width) + var(--ap-gutter));
        min-height: calc(100vh - 2 * var(--ap-gutter));
        background: var(--ap-pane);
        border-radius: 22px;
        box-shadow: var(--ap-card-shadow);
    }
    html.sidebar-collapsed[data-design="apple"] .main-content {
        margin-left: calc(72px + 2 * var(--ap-gutter));
    }

    /* Kopfzeile sitzt bündig oben auf dem Canvas (große Überschrift) */
    html[data-design="apple"] .content-header {
        height: 66px;
        padding: 0 30px;
        background: transparent;
        border-bottom: 1px solid var(--ap-hairline);
        border-radius: 22px 22px 0 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html[data-design="apple"] .content-header h1,
    html[data-design="apple"] .content-header h2 {
        font-size: 23px;
        font-weight: 700;
        letter-spacing: -.025em;
    }

    /* Logo-Leiste der Sidebar an die Panel-Rundung anpassen */
    html[data-design="apple"] .sidebar-header { padding: 18px 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="apple"] * { transition: none !important; }
    html[data-design="apple"] .btn:active,
    html[data-design="apple"] .stat-card:hover { transform: none !important; }
}