/* ===================================================================
   PREMIUM HANDMADE LAYER
   -------------------------------------------------------------------
   Hebt den vorhandenen GitHub/Material-Default (main.css) auf ein
   ruhiges, hochwertiges Apple/Google-Clean-Niveau: weisse Karten statt
   bunter Header-Balken, Farbe nur noch sparsam auf Icon und einer
   feinen Kante, grosszuegiger Weissraum, leiser Schatten. Kein Verlauf.

   Geltungsbereich: ausschliesslich Seiten mit body.page-premium
   (Admin-Dashboard, User-Dashboard, Sitzungen). Login, Modelcard,
   Chat-Oberflaechen etc. bleiben voellig unberuehrt.

   Nutzt die vorhandenen Design-Tokens aus main.css (--surface, --text,
   --border, --text-muted, --primary ...), damit der Dark-Mode-Umschalter
   ohne Mehraufwand weiterlebt.
   =================================================================== */

body.page-premium {
    /* Akzent-Default fuer Karten ohne semantische bg-Klasse. */
    --hdr-accent: var(--primary, #2563eb);
    /* Owner-Bereich: eigene, dezent kuehle Toene. */
    --oz-edge: #c7ced9;
    --oz-tint: #f4f6f9;
}
body.page-premium.dark-mode {
    --oz-edge: #2b323d;
    --oz-tint: #12161c;
}

/* ── Karte ───────────────────────────────────────────────────────── */
body.page-premium .card {
    /* Bootstrap-Variable setzen, damit der innere Radius (Header-Ecken) konsistent
       mitrundet. KEIN overflow:hidden: das wuerde Dropdown-Menues in Karten
       abschneiden (dashboard.html hat Profil-Splitbuttons mit Dropdowns). */
    --bs-card-border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 10px 24px -16px rgba(15, 23, 42, 0.18);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-premium .card:hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 14px 30px -18px rgba(15, 23, 42, 0.24);
}
body.page-premium .card.mt-4 { margin-top: 1.5rem !important; }

/* ── Header: bunte Balken raus, ruhige Flaeche rein ──────────────── */
/* Neutralisiert sowohl die Bootstrap-bg-Utilities als auch inline
   gesetzte Hintergrundfarben (einzelne Header tragen style="..."). */
body.page-premium .card-header,
body.page-premium .card-header[class*="bg-"],
body.page-premium .card-header[style] {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
    padding: 0.9rem 1.15rem;
}
/* Weisser Text aus der Balken-Zeit zuruecknehmen. */
body.page-premium .card-header.text-white,
body.page-premium .card-header.text-dark,
body.page-premium .card-header .text-white,
body.page-premium .card-header .text-dark {
    color: var(--text) !important;
}
/* Bootstrap-Opacity-Weisstoene (z.B. text-white-50 in der Modelcards-Karte)
   stuenden sonst weiss auf weissem Header und waeren unlesbar. */
body.page-premium .card-header .text-white-50,
body.page-premium .card-header .text-white-75 {
    color: var(--text-muted) !important;
}

/* Titel ruhig und konsistent. */
body.page-premium .card-header h1,
body.page-premium .card-header h2,
body.page-premium .card-header h3,
body.page-premium .card-header h4,
body.page-premium .card-header .card-title {
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.3;
    margin: 0;
    color: var(--text);
}

/* Semantische Akzentfarbe pro ehemaligem Balken: bleibt nur am Icon
   und an der feinen linken Kante erhalten, dezent statt flaechig. */
body.page-premium .card-header.bg-danger    { --hdr-accent: #ef4444; }
body.page-premium .card-header.bg-primary   { --hdr-accent: #2563eb; }
body.page-premium .card-header.bg-success   { --hdr-accent: #10b981; }
body.page-premium .card-header.bg-info      { --hdr-accent: #0891b2; }
body.page-premium .card-header.bg-warning   { --hdr-accent: #d97706; }
body.page-premium .card-header.bg-secondary { --hdr-accent: #64748b; }
body.page-premium .card-header.bg-dark      { --hdr-accent: #334155; }
body.page-premium .card-header.bg-light     { --hdr-accent: #94a3b8; }
body.page-premium .card-header.bg-purple    { --hdr-accent: #9333ea; }
/* Inline eingefaerbte Header (Modelcards, Fernsteuerung, Verwalter-Links). */
body.page-premium .card-header[style*="d6336c"] { --hdr-accent: #d6336c; }
body.page-premium .card-header[style*="9c27b0"] { --hdr-accent: #9333ea; }
body.page-premium .card-header[style*="c98694"] { --hdr-accent: #c98694; }
body.page-premium .card-header[style*="6f42c1"] { --hdr-accent: #6f42c1; }
body.page-premium .card-header[style*="f3e5f5"] { --hdr-accent: #9333ea; }
body.page-premium .card-header[style*="ffe6e6"] { --hdr-accent: #dc2626; }

/* Icons behalten Farbe (vom Owner so gewuenscht), tragen jetzt aber den
   Akzent statt auf buntem Grund weiss zu sein. */
body.page-premium .card-header i.fas,
body.page-premium .card-header i.far,
body.page-premium .card-header i.fa-solid,
body.page-premium .card-header i.fa-regular {
    color: var(--hdr-accent);
}
/* Der Aufklapp-Pfeil bleibt neutral und dreht beim Oeffnen. */
body.page-premium .card-header i.collapse-icon {
    color: var(--text-muted) !important;
    transition: transform 0.2s ease;
}
body.page-premium .card-header[aria-expanded="true"] i.collapse-icon {
    transform: rotate(90deg);
}

/* ── Body / Rhythmus ─────────────────────────────────────────────── */
body.page-premium .card-body { padding: 1.25rem 1.4rem; }
body.page-premium h1, body.page-premium h2 { letter-spacing: -0.018em; }

/* Tabellen einen Tick ruhiger. */
body.page-premium .table { --bs-table-bg: transparent; }

/* ===================================================================
   OWNER-BEREICH  (nur Admin-Dashboard)
   =================================================================== */

/* FOUC-Schutz: solange JS die Karten noch nicht in ihre Zonen sortiert
   hat, die Sektionen unsichtbar halten (nur wenn ueberhaupt etwas in den
   Owner-Bereich verschoben wurde). Failsafe-Timeout im JS deckt Fehler ab. */
body.page-admin-dashboard #adminDashboardCards > .card.mt-4 {
    transition: opacity 0.18s ease;
}
/* Verstecken, bis JS die Zonen sortiert hat. WICHTIG: reiner CSS-Failsafe, der
   die Karten nach 2.5s zwangsweise wieder einblendet, falls das JS gar nicht
   laeuft (Script-404, Parsefehler). Sonst waere das Dashboard dauerhaft
   unsichtbar. Bei normalem Lauf entfernt das JS die Klasse in Millisekunden. */
@keyframes ozRevealFailsafe { to { opacity: 1; } }
body.page-admin-dashboard #adminDashboardCards.dash-pending-arrange > .card.mt-4 {
    opacity: 0;
    animation: ozRevealFailsafe 0.01s linear 2.5s forwards;
}

/* Der ausklappbare Sammelblock am Seitenende. */
body.page-premium .owner-zone {
    margin-top: 2.25rem;
    border: 1px solid var(--oz-edge);
    border-radius: 14px;
    background: var(--oz-tint);
}
/* Dezente Trennung vom Alltagsbereich darueber. */
body.page-premium .owner-zone::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 1.15rem;
    background: transparent;
}
body.page-premium .owner-zone-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.15rem;
    cursor: pointer;
    user-select: none;
}
body.page-premium .owner-zone-head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
body.page-premium .owner-zone-head .oz-glyph {
    width: 1.4rem;
    text-align: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
body.page-premium .owner-zone[data-state="open"] .oz-glyph.oz-chevron {
    transform: rotate(90deg);
}
body.page-premium .owner-zone-title {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text);
}
body.page-premium .owner-zone-sub {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border: 1px solid var(--oz-edge);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
}
body.page-premium .owner-zone-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
body.page-premium .owner-zone-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* Body standardmaessig zu; nur im offenen Zustand sichtbar. */
body.page-premium .owner-zone-body {
    display: none;
    padding: 0.25rem 1.15rem 1.2rem;
}
body.page-premium .owner-zone[data-state="open"] .owner-zone-body {
    display: block;
}
/* Karten im Owner-Bereich bekommen etwas Abstand untereinander. */
body.page-premium .owner-zone-body > .card.mt-4 { margin-top: 1rem !important; }
/* Leerzustand des Owner-Bereichs (im Bearbeitungsmodus). */
body.page-premium .owner-zone-empty {
    display: none;
    padding: 1.1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.86rem;
    border: 1px dashed var(--oz-edge);
    border-radius: 10px;
}
body.page-premium.layout-edit .owner-zone[data-state="open"] .owner-zone-body:empty + .owner-zone-empty,
body.page-premium.layout-edit .owner-zone-empty.show {
    display: block;
}

/* ── Schwebende Layout-Werkzeugleiste ────────────────────────────── */
body.page-premium .oz-toolbar {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 30px -10px rgba(15, 23, 42, 0.35);
}
body.page-premium.owner-unlocked .oz-toolbar { display: flex; }
body.page-premium .oz-toolbar-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding-right: 0.2rem;
}
body.page-premium .oz-toolbar .btn { border-radius: 9px; }
/* Im Bearbeitungsmodus: Anordnen-Knopf weg, Speichern/Verwerfen sichtbar. */
body.page-premium .oz-toolbar [data-action="save"],
body.page-premium .oz-toolbar [data-action="cancel"] { display: none; }
body.page-premium.layout-edit .oz-toolbar [data-action="edit"] { display: none; }
body.page-premium.layout-edit .oz-toolbar [data-action="save"],
body.page-premium.layout-edit .oz-toolbar [data-action="cancel"] { display: inline-flex; }

/* ── Pro-Karte-Steuerung im Bearbeitungsmodus ────────────────────── */
body.page-premium .oz-card-controls { display: none; }
/* Flex-Layout fuer den Header nur im Bearbeitungsmodus, damit normale Header
   mit innerem d-flex unangetastet bleiben. Auf Mobil bricht es sauber um. */
body.page-premium.layout-edit .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
body.page-premium.layout-edit .oz-card-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}
body.page-premium .oz-card-controls .oz-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
}
body.page-premium .oz-card-controls .oz-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
body.page-premium .oz-card-controls .oz-zone {
    width: auto;
    padding: 0 0.6rem;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
body.page-premium .oz-drag {
    cursor: grab;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: none; /* eigenes Pointer-Drag, kein Scroll-Hijack */
}
body.page-premium .oz-drag:active { cursor: grabbing; }

/* Im Bearbeitungsmodus jede Sektion als verschiebbare Kachel lesbar machen. */
body.page-premium.layout-edit #adminDashboardCards > .card.mt-4,
body.page-premium.layout-edit .owner-zone-body > .card.mt-4 {
    outline: 1px dashed transparent;
}
body.page-premium.layout-edit .card.oz-dragging {
    opacity: 0.55;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.5);
    /* Damit document.elementFromPoint die Nachbarkarte unter dem Cursor findet
       und nicht die gezogene Karte selbst (sonst kein Umsortieren). */
    pointer-events: none;
}
/* Der Griff bleibt aktiv, damit die Touch-Pointer-Capture nicht abreisst. */
body.page-premium.layout-edit .card.oz-dragging .oz-drag { pointer-events: auto; }
body.page-premium.layout-edit .card.oz-drop-before { box-shadow: inset 0 3px 0 var(--primary); }
body.page-premium.layout-edit .card.oz-drop-after  { box-shadow: inset 0 -3px 0 var(--primary); }
/* Sektionen im Edit-Modus nicht aufklappbar (Klick = sortieren, nicht oeffnen). */
body.page-premium.layout-edit .card-header { cursor: default; }

/* ── Passwort-Dialog (handgemacht, kein Bootstrap-Modal) ─────────── */
body.page-premium .oz-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
}
body.page-premium .oz-modal-backdrop.show { display: flex; }
body.page-premium .oz-modal {
    width: min(92vw, 380px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.5);
    padding: 1.4rem 1.4rem 1.2rem;
}
body.page-premium .oz-modal h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--text);
}
body.page-premium .oz-modal p {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
body.page-premium .oz-modal input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    color: var(--text);
    font-size: 0.95rem;
}
body.page-premium .oz-modal input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
body.page-premium .oz-modal-error {
    display: none;
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
body.page-premium .oz-modal-error.show { display: block; }
body.page-premium .oz-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

/* Reduced motion respektieren. */
@media (prefers-reduced-motion: reduce) {
    body.page-premium .card,
    body.page-premium .card-header i.collapse-icon,
    body.page-premium .owner-zone-head .oz-glyph,
    body.page-admin-dashboard #adminDashboardCards > .card.mt-4 {
        transition: none !important;
    }
}