/* ════════════════════════════════════════════════════════════
   /shared/topbar-style.css
   Source-of-Truth-Stylesheet für den BOLD-Header.
   Wird von dashboard-new.html UND index.html geladen, sodass
   beide Dashboards exakt den gleichen Header rendern können.
   Alle Klassen sind unter .werken-topbar gescoped, damit sie
   keine anderen Page-Styles beeinflussen.
   ════════════════════════════════════════════════════════════ */

/* CSS-Variablen GLOBAL definieren (zusätzlich zur .werken-topbar-scoped
   Definition unten), sodass `var(--lilac)` etc. in inline-styles auch
   greifen, falls die Variable beim Resolving nicht über die Vererbung
   ankommen sollte. Identische Werte mit dashboard-new.html's :root. */
:root {
    --cream: #fef9e7;
    --cream-2: #f5efd6;
    --ink: #1a1a1a;
    --muted: #6b6b6b;
    --pink: #ff3366;
    --pink-soft: #ffd9e3;
    --yellow: #ffd700;
    --yellow-soft: #fff3a3;
    --green: #4ade80;
    --green-deep: #16a34a;
    --orange: #ff9500;
    --blue: #3d8bff;
    --lilac: #c8b6ff;
    --surface: #ffffff;
}

/* Cross-document View Transitions (Chrome 126+, Safari 18.2+) — beim
   Wechsel zwischen index.html und dashboard-new.html animiert der
   Browser nahtlos zwischen den Seiten. Der Header und der Slider haben
   eigene view-transition-names → bleiben optisch stehen, nur der
   Inhalt darunter wird neu gerendert. */
@view-transition {
    navigation: auto;
}

.werken-topbar {
    --cream: #fef9e7;
    --ink: #1a1a1a;
    --pink: #ff3366;
    --yellow: #ffd700;
    --green: #4ade80;
    --orange: #ff9500;
    --blue: #3d8bff;
    --lilac: #c8b6ff;

    position: sticky; top: 0; z-index: 40;
    background: var(--cream);
    border-bottom: 3px solid var(--ink);
    font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
    color: var(--ink);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    view-transition-name: werken-topbar;
}
.werken-topbar *, .werken-topbar *::before, .werken-topbar *::after {
    box-sizing: border-box;
}
.werken-topbar a { color: inherit; text-decoration: none; }
.werken-topbar button { font-family: inherit; cursor: pointer; }
.werken-topbar h1, .werken-topbar h2, .werken-topbar h3 {
    font-weight: 700; letter-spacing: -0.01em; margin: 0;
}

/* ──────────────────────── Layout-Helfer (TW-ähnlich) ─── */
.werken-topbar .shell {
    max-width: 1280px; margin: 0 auto; padding: 0 16px;
    /* Inhalte muessen IMMER in den Viewport passen — kein horizontales Scrollen */
    overflow-x: hidden;
    flex-wrap: nowrap;
}
@media (min-width: 768px) { .werken-topbar .shell { padding: 0 24px; } }
.werken-topbar .flex { display: flex; }
.werken-topbar .grid { display: grid; }
.werken-topbar .items-center { align-items: center; }
.werken-topbar .place-items-center { place-items: center; }
.werken-topbar .gap-2 { gap: 0.5rem; }
.werken-topbar .gap-2\.5 { gap: 0.625rem; }
.werken-topbar .gap-3 { gap: 0.75rem; }
.werken-topbar .ml-3 { margin-left: 0.75rem; }
.werken-topbar .flex-1 { flex: 1 1 0%; }
.werken-topbar .w-3 { width: 0.75rem; }   .werken-topbar .h-3 { height: 0.75rem; }
.werken-topbar .w-4 { width: 1rem; }      .werken-topbar .h-4 { height: 1rem; }
.werken-topbar .w-5 { width: 1.25rem; }   .werken-topbar .h-5 { height: 1.25rem; }
.werken-topbar .w-10 { width: 2.5rem; }   .werken-topbar .h-10 { height: 2.5rem; }
.werken-topbar .text-xs { font-size: 0.75rem; }
.werken-topbar .text-sm { font-size: 0.875rem; }
.werken-topbar .text-lg { font-size: 1.125rem; }
.werken-topbar .uppercase { text-transform: uppercase; }
.werken-topbar .tracking-widest { letter-spacing: 0.1em; }
.werken-topbar .opacity-60 { opacity: 0.6; }
.werken-topbar .font-bold { font-weight: 700; }
.werken-topbar .hidden { display: none !important; }
/* Labels in Buttons/Pills bei iPad-Portrait und schmaler verstecken
   (Buttons bleiben sichtbar — nur ihre Text-Labels werden zu Icons reduziert).
   Frueher: nur < 768px → iPad Portrait war ueberfuellt und scrollte horizontal. */
@media (max-width: 1099px) {
    .werken-topbar .hide-sm { display: none !important; }
}

/* Sehr schmal: Topbar-Padding/Gaps reduzieren, damit alle Icon-Buttons reinpassen,
   und den Brand-Text "Werken.fun" verstecken (Logo-Kachel bleibt). */
@media (max-width: 480px) {
    .werken-topbar .shell { padding: 0 10px !important; gap: 6px !important; }
    .werken-topbar a > span.font-bold.text-lg { display: none !important; }
    .werken-topbar .role-switch button { padding: 0 8px; }
}

/* ──────────────────────── Neobrutalism primitives ─── */
.werken-topbar .nb-sm {
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 0 var(--ink);
    background: #fff;
    transition: transform .14s ease, box-shadow .14s ease;
}
.werken-topbar .lift-sm:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--ink);
}

.werken-topbar .pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 2.5px solid var(--ink); padding: 0.2rem 0.6rem;
    border-radius: 999px; background: #fff;
    font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 0 var(--ink);
    color: var(--ink);
}
.werken-topbar .badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem;
    border: 2.5px solid var(--ink); border-radius: 999px;
    background: var(--pink); color: #fff;
    font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.72rem;
    box-shadow: 2px 2px 0 0 var(--ink);
}
.werken-topbar .mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* ──────────────────────── Rollen-Toggle (Slider) ───
   Echter Toggle-Switch: ein gelber Slider liegt unter den Labels und
   rutscht zwischen den beiden Hälften, abhängig von [data-active].
   Beide Buttons haben width 50% — der Slider auch — und nur die
   left-Position wird animiert (smooth ease-out cubic). */
.werken-topbar .role-switch {
    position: relative;
    display: inline-flex; border: 3px solid var(--ink); border-radius: 999px;
    background: var(--cream); box-shadow: 3px 3px 0 var(--ink);
    overflow: hidden; height: 40px; font-size: 13px; padding: 0;
    /* Default: flexibel — schmal genug fuer iPad-Portrait.
       Fixe Mindestbreite erst auf Desktop (>=1100px), siehe unten. */
    min-width: 0;
    view-transition-name: werken-role-switch;
}
@media (min-width: 1100px) {
    .werken-topbar .role-switch { min-width: 380px; }
}
.werken-topbar .role-switch-slider {
    position: absolute; top: 0; left: 0;
    width: 50%; height: 100%;
    background: var(--yellow);
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1; pointer-events: none;
    border-radius: 999px;
}
.werken-topbar .role-switch[data-active="student"] .role-switch-slider {
    left: 50%;
}
.werken-topbar .role-switch button {
    flex: 0 0 50%; width: 50%;
    position: relative; z-index: 2;
    background: transparent; border: 0; padding: 0 14px;
    font-weight: 700; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; line-height: 1; white-space: nowrap;
    transition: color 0.18s ease;
}
.werken-topbar .role-switch button:hover {
    color: #000;
}

/* ──────────────────────── Pending dot (Admin-Badge) ─── */
.werken-topbar .pending-dot {
    position: absolute; top: -8px; right: -8px;
    min-width: 22px; height: 22px; padding: 0 6px;
    border: 2.5px solid var(--ink); border-radius: 999px;
    background: var(--pink); color: #fff;
    font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 0 var(--ink);
}

/* ════════════════════════════════════════════════════════════
   TOOL-TOPBAR — kompakterer Header für die 5 Werkzeug-Tools.
   Wird von /shared/tool-topbar.js injiziert.
   ════════════════════════════════════════════════════════════ */
.werken-tool-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9000;
    height: 56px;
    font-size: 13px;
}
.werken-tool-topbar .tt-back {
    transition: transform .12s, box-shadow .12s;
}
.werken-tool-topbar .tt-back:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--ink);
}
.werken-tool-topbar .tt-brand {
    gap: 8px;
}
.werken-tool-topbar .tt-title {
    font-size: 14px;
    letter-spacing: -0.01em;
}
.werken-tool-topbar .tt-user {
    font-size: 11px;
}
.werken-tool-topbar .tt-save-status .pill {
    font-size: 10px;
    padding: 0.15rem 0.5rem;
    transition: background .3s ease;
}
.werken-tool-topbar .tt-save-status .tt-save-dot.saving {
    animation: tt-pulse .9s ease-in-out infinite;
}
@keyframes tt-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
}
/* Alle Tool-Seiten brauchen Body-Offset für den fixen Header */
body.has-tool-topbar {
    padding-top: 56px;
}
/* Fullscreen-Tools (overflow:hidden) mit der Height statt padding */
body.has-tool-topbar.fullscreen-tool {
    padding-top: 0;
}
body.has-tool-topbar.fullscreen-tool #canvas-container,
body.has-tool-topbar.fullscreen-tool .main-viewport {
    height: calc(100vh - 56px) !important;
    margin-top: 56px;
}

/* Mobile: kompakter */
@media (max-width: 767px) {
    .werken-tool-topbar { height: 48px; }
    .werken-tool-topbar .shell { height: 48px !important; }
    .werken-tool-topbar .tt-back span { display: none; }
    .werken-tool-topbar .tt-title { display: none; }
    .werken-tool-topbar .tt-user span { display: none; }
    body.has-tool-topbar { padding-top: 48px; }
    body.has-tool-topbar.fullscreen-tool #canvas-container,
    body.has-tool-topbar.fullscreen-tool .main-viewport {
        height: calc(100vh - 48px) !important;
        margin-top: 48px;
    }
}