/* ===========================================================================
   Hartinger-Cockpit — v2-Look (Bottom-Nav, WSDR-Stil) als echte App.
   ALLES strikt unter body.cockpit gescoped → der fleet-geteilte Stylesheet
   kann KEINE andere Instanz verändern (body.cockpit wird nur in ui-layout.js
   für window._TIGA_FULL_OS_SUBDOMAIN==='hartinger' gesetzt).

   Strategie: Re-Skin der bestehenden (token-basierten) Projektübersicht durch
   Überschreiben der Cockpit-Tokens auf die Prototyp-Palette (warmes Papier +
   Navy) + neues Bottom-Nav-Dock. Logik/Daten/Modal bleiben unverändert.
   Quelle: hartinger-cockpit-v2/public/{tokens,shell,screen}.css
   =========================================================================== */

/* ── Token-Re-Skin (Prototyp-Palette auf OS- UND Prototyp-Namensschema) ──── */
body.cockpit{
  --bg:#f4f3ef;
  --surface:#ffffff; --surface-1:#ffffff; --surface-2:#faf9f6; --surface-3:#f0eee9;
  --surface-overlay:rgba(255,255,255,.82);
  --scrim:rgba(28,24,16,.42); --surface-scrim:rgba(28,24,16,.42);

  --text-display:#1a1c1e; --text-primary:#33373c; --text-secondary:#5c636b;
  --text-muted:#8a9099; --text-faint:#b1b6bd; --text-on-accent:#ffffff;

  --line:#e7e5df; --line-strong:#d8d5cd; --hairline:#e7e5df; --hairline-strong:#d8d5cd;

  --accent:#00408f; --accent-strong:#002a66; --accent-soft:rgba(0,64,143,.12); --accent-glow:rgba(0,64,143,.28);

  --success:#2f7d5b; --success-soft:rgba(47,125,91,.12);
  --warning:#b07a16; --warning-soft:rgba(176,122,22,.15);
  --danger:#c0392b;  --danger-soft:rgba(192,57,43,.11);
  --finance:#b07a16; --finance-soft:rgba(176,122,22,.10);
  --status-finance-bg:rgba(176,122,22,.10); --status-finance-border:rgba(176,122,22,.30); --status-finance-text:#b07a16;

  --interactive:rgba(20,24,30,.04); --interactive-hover:rgba(20,24,30,.05); --interactive-active:rgba(20,24,30,.08);
  --field-bg:#ffffff; --field-border:#d8d5cd;

  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:20px; --r-pill:9999px;
  --sh-1:0 1px 2px rgba(40,34,22,.05);
  --sh-2:0 1px 2px rgba(40,34,22,.05), 0 10px 28px -14px rgba(40,34,22,.18);
  --sh-3:0 2px 6px rgba(40,34,22,.07), 0 26px 54px -18px rgba(40,34,22,.24);
  --shadow-overlay:0 2px 6px rgba(40,34,22,.07), 0 26px 54px -18px rgba(40,34,22,.24);
  --dock-h:78px;

  background:var(--bg);
  color:var(--text-primary);
}

/* ── Bottom-Nav-Dock (portiert aus shell.css, Präfix ck-) ───────────────── */
.cockpit .ck-shell{ min-height:100vh; }
.cockpit .ck-main{ min-height:100vh; padding:56px 28px calc(var(--dock-h) + 44px); display:flex; justify-content:center; } /* padding-top reserviert Platz für die fixe .ck-acct-Leiste */
.cockpit .ck-content{ width:100%; max-width:1560px; }

.cockpit .ck-dock{ position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; justify-content:center; pointer-events:none; padding:0 16px 16px; }
.cockpit .ck-dock-inner{
  pointer-events:auto; display:flex; align-items:center; gap:4px;
  background:var(--surface-overlay);
  backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border:1px solid var(--line); box-shadow:var(--sh-3);
  border-radius:var(--r-xl); padding:8px 10px;
}
.cockpit .ck-dock-logo{ display:flex; align-items:center; padding:0 14px 0 8px; margin-right:4px; border-right:1px solid var(--line); }
.cockpit .ck-dock-logo img, .cockpit .ck-dock-logo svg, .cockpit .ck-dock-logo .portal-logo-preview{ height:22px; width:auto; max-width:140px; object-fit:contain; }
.cockpit .ck-dock-logo .portal-logo-preview img, .cockpit .ck-dock-logo .portal-logo-preview svg{ height:22px; max-width:140px; }

.cockpit .ck-dock-btn{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:68px; background:transparent; border:0; font:inherit; color:var(--text-secondary);
  padding:8px 12px; border-radius:14px; cursor:pointer; transition:background .15s, color .15s;
}
.cockpit .ck-dock-btn svg{ width:22px; height:22px; display:block; }
.cockpit .ck-dock-btn span{ font-size:10.5px; font-weight:600; letter-spacing:.01em; }
.cockpit .ck-dock-btn:hover{ background:var(--interactive-hover); color:var(--text-primary); }
.cockpit .ck-dock-btn.active{ background:var(--accent-soft); color:var(--accent); }
.cockpit .ck-dock-btn.disabled{ color:var(--text-faint); cursor:not-allowed; }
.cockpit .ck-dock-btn.disabled:hover{ background:transparent; color:var(--text-faint); }
.cockpit .ck-dock-btn .ck-lock{ position:absolute; top:5px; right:9px; width:11px; height:11px; opacity:.65; }

/* ── Account/Logout (ersetzt die Topbar-Aktionen der OS-Shell) ──────────── */
.cockpit .ck-acct{ position:fixed; top:14px; right:16px; z-index:120; display:flex; gap:6px; }
.cockpit .ck-acct-btn{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface-overlay);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--text-secondary); cursor:pointer; box-shadow:var(--sh-1); transition:all .14s;
}
.cockpit .ck-acct-btn svg{ width:17px; height:17px; }
.cockpit .ck-acct-btn:hover{ color:var(--accent); border-color:var(--accent); }

/* ── Screen-Feinschliff: Modul-Padding raus (Dock-Main padded bereits) ──── */
.cockpit .pu-root{ padding:0; max-width:1560px; margin:0 auto; }

/* ── Lade-Skeleton: das OS-cockpit.css animiert transform:translateX auf der
   vollbreiten .cock-skel-Box → schiebt sie aus dem Viewport (H-Scroll) und ist
   auf hellem Papier kaum sichtbar. Im Cockpit durch ein Opacity-Pulsen ersetzen
   (kein transform → kein Overflow), sichtbar auf #f4f3ef. ───────────────────── */
/* !important, um das spezifischere html[data-cockpit="on"] .cock-skel (cockpit.css) zu schlagen,
   das sonst die transform-Animation (Overflow) gewinnen lässt. */
.cockpit .cock-skel{ animation:ckSkelPulse 1.4s ease-in-out infinite !important; background:var(--surface-3) !important; }
.cockpit .cock-skel::after{ display:none !important; }
@keyframes ckSkelPulse{ 0%,100%{opacity:.5} 50%{opacity:.95} }

/* ── Responsiv ──────────────────────────────────────────────────────────── */
@media (max-width:680px){
  .cockpit .ck-dock-logo{ display:none; }
  .cockpit .ck-dock-btn{ min-width:0; padding:8px 9px; }
  .cockpit .ck-dock-btn span{ font-size:9.5px; }
  .cockpit .ck-dock-inner{ gap:2px; }
  .cockpit .ck-main{ padding:52px 14px calc(var(--dock-h) + 36px); }
}