/* ============================================================
   TimeSecPlan – Seitenleiste und Design in den Logo-Farben
   Wird als LETZTES Stylesheet geladen (siehe head.php) und
   überschreibt gezielt Regeln aus style.css und mobile.css.

   Aufbau:
     1. Farben und Schrift (Variablen)
     2. Seitenleiste links
     3. Kopfzeile rechts oben (Brotkrumen, Timer, Rolle, Logout)
     4. Handy und Tablet: Seitenleiste als Schublade
     5. Einheitliches Aussehen der Bausteine (Karten, Tabellen,
        Buttons, Felder)
     6. Druck
   ============================================================ */

/* ============================================================
   1. FARBEN UND SCHRIFT
   Werte aus TimeSecPlan_Logo_dunkel.svg
   ============================================================ */
:root {
    --tsp-navy:      #0a1d47;   /* Seitenleiste */
    --tsp-navy-2:    #132a63;   /* Hover in der Seitenleiste */
    --tsp-navy-3:    #1d3778;   /* Trennlinien in der Seitenleiste */
    --tsp-royal:     #0a57c8;   /* Hauptblau: Buttons, aktive Einträge */
    --tsp-royal-dk:  #0848a8;
    --tsp-sky:       #1e8ff2;   /* helles Logo-Blau: Akzente */
    --tsp-ink:       #0d1220;   /* Logo-Schwarz */
    --tsp-side-fg:   #c9d6f2;
    --tsp-side-mut:  #8296c4;
    --tsp-bg:        #f2f5fb;
    --tsp-surface:   #ffffff;
    --tsp-line:      #dde4f0;
    --tsp-fg:        #0d1220;
    --tsp-muted:     #5a6680;
    --tsp-soft:      #e6eefc;
    --tsp-font:      "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --tsp-side-w:    260px;
    --tsp-side-w-k:  72px;
    --tsp-top-h:     60px;

    /* Bestehende Variablen aus style.css auf die Logo-Farben umstellen */
    --bg-color:      var(--tsp-bg);
    --primary:       var(--tsp-royal);
    --primary-dark:  var(--tsp-navy);
    --text:          var(--tsp-fg);
    --text-dark:     var(--tsp-fg);
    --text-muted:    var(--tsp-muted);
    --border:        var(--tsp-line);
    --border-light:  var(--tsp-line);
}

/* Links: einheitlich in Logo-Blau, ohne Unterstrich und ohne Lila für besuchte
   Links (Browser-Standard). :where() hat keine Gewichtung – jede Regel mit Klasse
   (Buttons, Menü, Hinweise …) und jedes style="…" behält Vorrang. */
:where(a), :where(a:visited) { color:var(--tsp-royal); text-decoration:none; }
:where(a:hover), :where(a:focus-visible) { color:var(--tsp-royal-dk); }

/* ============================================================
   2. SEITENLEISTE
   Nur aktiv, wenn header.php eingebunden ist (setzt die Klasse
   tsp-mit-sidebar am <body>). Login, Scanner usw. bleiben unberührt.
   ============================================================ */
.tsp-icons { position:absolute; width:0; height:0; overflow:hidden; }
.tsp-i { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; max-width:none; }

body.tsp-mit-sidebar { padding-left:var(--tsp-side-w); }
body.tsp-mit-sidebar.tsp-kompakt { padding-left:var(--tsp-side-w-k); }

.tsp-side {
    position:fixed; top:0; left:0; bottom:0; z-index:900;
    width:var(--tsp-side-w);
    display:flex; flex-direction:column;
    background:var(--tsp-navy); color:var(--tsp-side-fg);
    font-family:var(--tsp-font);
    transition:width .2s ease, transform .22s ease;
}
.tsp-kompakt .tsp-side { width:var(--tsp-side-w-k); }

.tsp-brand { display:block; padding:20px 18px 14px; border-bottom:1px solid var(--tsp-navy-3); }
.tsp-brand img { display:block; width:100%; max-width:200px; height:auto; margin:0 auto; }
.tsp-brand .tsp-brand-mark { display:none; width:44px; }
.tsp-kompakt .tsp-brand { padding:16px 10px 12px; }
.tsp-kompakt .tsp-brand .tsp-brand-logo { display:none; }
.tsp-kompakt .tsp-brand .tsp-brand-mark { display:block; }

.tsp-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 10px 16px; scrollbar-width:thin; scrollbar-color:var(--tsp-navy-3) transparent; }
.tsp-nav ul { list-style:none; margin:0; padding:0; }

.tsp-link,
.tsp-grp-btn {
    display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    padding:9px 12px; margin:0; border:0; border-radius:8px;
    background:none; color:var(--tsp-side-fg);
    font-family:inherit; font-size:14px; line-height:1.35; font-weight:400;
    text-decoration:none; text-align:left; cursor:pointer;
}
.tsp-link:hover,
.tsp-grp-btn:hover { background:var(--tsp-navy-2); color:#fff; opacity:1; }
.tsp-link:focus-visible,
.tsp-grp-btn:focus-visible,
.tsp-compact-btn:focus-visible,
.tsp-brand:focus-visible { outline:2px solid var(--tsp-sky); outline-offset:-2px; }
.tsp-link.is-active { background:var(--tsp-royal); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--tsp-sky); }
.tsp-lbl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tsp-grp { margin-top:8px; }
.tsp-grp-btn { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tsp-side-mut); padding:8px 12px; }
.tsp-chev { width:16px; height:16px; margin-left:auto; transition:transform .2s; }
.tsp-grp.is-zu .tsp-chev { transform:rotate(-90deg); }
.tsp-grp.is-zu ul { display:none; }
.tsp-grp ul .tsp-link { padding-left:16px; }

.tsp-count { margin-left:auto; min-width:22px; padding:0 7px; border-radius:11px; background:var(--tsp-sky); color:#fff; font-size:12px; font-weight:700; line-height:20px; text-align:center; font-variant-numeric:tabular-nums; }

.tsp-side-foot { border-top:1px solid var(--tsp-navy-3); padding:10px; }
.tsp-compact-btn { display:flex; align-items:center; gap:12px; width:100%; padding:9px 12px; margin:0; border:0; border-radius:8px; background:none; color:var(--tsp-side-mut); font-family:inherit; font-size:13px; cursor:pointer; }
.tsp-compact-btn:hover { background:var(--tsp-navy-2); color:#fff; opacity:1; }

/* Schmale Ansicht (nur Desktop): nur Symbole, Beschriftung als Tooltip */
.tsp-kompakt .tsp-lbl,
.tsp-kompakt .tsp-chev { display:none; }
.tsp-kompakt .tsp-link,
.tsp-kompakt .tsp-compact-btn { justify-content:center; padding:10px 0; position:relative; }
.tsp-kompakt .tsp-grp ul .tsp-link { padding-left:0; }
.tsp-kompakt .tsp-grp-btn { height:1px; padding:0; margin:8px 6px; background:var(--tsp-navy-3); border-radius:0; cursor:default; overflow:hidden; }
.tsp-kompakt .tsp-grp.is-zu ul { display:block; }
.tsp-kompakt .tsp-count { position:absolute; top:0; right:3px; min-width:18px; padding:0 5px; font-size:11px; line-height:17px; }
.tsp-kompakt .tsp-compact-btn .tsp-i { transform:rotate(180deg); }

.tsp-scrim { display:none; }

/* ============================================================
   3. KOPFZEILE
   ============================================================ */
header.main-header.tsp-top {
    position:sticky; top:0; z-index:800;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    min-height:var(--tsp-top-h); box-sizing:border-box;
    padding:8px 24px;
    background:var(--tsp-surface); color:var(--tsp-fg);
    border-bottom:1px solid var(--tsp-line); box-shadow:none;
    font-family:var(--tsp-font);
}
.tsp-burger { display:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--tsp-line); border-radius:8px; background:var(--tsp-surface); color:var(--tsp-fg); cursor:pointer; }
.tsp-burger:hover { border-color:var(--tsp-royal); color:var(--tsp-royal); opacity:1; }
.tsp-burger .tsp-i { width:20px; height:20px; }
.tsp-crumb { font-size:13px; color:var(--tsp-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tsp-crumb b { color:var(--tsp-fg); font-weight:600; }

.tsp-top .user-status-zone { margin-left:auto; display:flex; align-items:center; gap:10px; width:auto; padding:0; flex-shrink:0; }
.tsp-top .session-timer { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px; background:var(--tsp-soft); color:var(--tsp-royal); font-size:13px; font-weight:600; }
.tsp-top .session-timer .tsp-i { width:15px; height:15px; }
.tsp-top .session-timer--warn  { background:#fdf0d9; color:#8a5200; }
.tsp-top .session-timer--alarm { background:#c0302b; color:#fff; }
.tsp-top .user-badge { border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--tsp-ink); }
.tsp-top .user-badge.admin         { background:var(--tsp-ink); }
.tsp-top .user-badge.disponent    { background:var(--tsp-royal); }
.tsp-top .user-badge.ansicht          { background:#5a6680; }
.tsp-top .user-badge.subunternehmen { background:#b36b00; }
.tsp-top .btn-logout { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--tsp-line); border-radius:8px; color:var(--tsp-muted); background:none; font-size:13px; text-decoration:none; }
.tsp-top .btn-logout .tsp-i { width:16px; height:16px; }
.tsp-top .btn-logout:hover { color:#c0302b; border-color:#c0302b; background:none; }

/* Hinweisleiste für offene Einplanungen */
.tsp-mit-sidebar .approval-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-align:left; padding:10px 24px; background:#fdf0d9; color:#6b4300; border-bottom:1px solid #f1d9a8; font-size:14px; }
.tsp-mit-sidebar .approval-bar a { margin-left:auto; color:#8a5200; }

/* Inhaltsbreite: die Seitenleiste nimmt bereits Platz weg,
   deshalb nicht mehr 80 % der Fensterbreite, sondern volle Breite bis 1400 px */
.tsp-mit-sidebar .container { max-width:1400px; box-sizing:border-box; padding:0 24px; margin:24px auto; }

/* ============================================================
   4. HANDY UND TABLET
   ============================================================ */
@media (max-width: 992px) {
    body.tsp-mit-sidebar,
    body.tsp-mit-sidebar.tsp-kompakt { padding-left:0; }

    .tsp-side,
    .tsp-kompakt .tsp-side { width:min(300px, 86vw); transform:translateX(-100%); z-index:1000; box-shadow:none; }
    .tsp-nav-offen .tsp-side { transform:none; box-shadow:0 0 40px rgba(6, 15, 38, .35); }
    .tsp-nav-offen .tsp-scrim { display:block; position:fixed; inset:0; z-index:950; background:rgba(6, 15, 38, .45); }
    .tsp-nav-offen { overflow:hidden; }

    /* Die schmale Ansicht gibt es mobil nicht: immer mit Beschriftung */
    .tsp-side-foot { display:none; }
    .tsp-kompakt .tsp-lbl,
    .tsp-kompakt .tsp-chev { display:inline; }
    .tsp-kompakt .tsp-brand { padding:20px 18px 14px; }
    .tsp-kompakt .tsp-brand .tsp-brand-logo { display:block; }
    .tsp-kompakt .tsp-brand .tsp-brand-mark { display:none; }
    .tsp-kompakt .tsp-link { justify-content:flex-start; padding:9px 12px; }
    .tsp-kompakt .tsp-grp ul .tsp-link { padding-left:16px; }
    .tsp-kompakt .tsp-grp-btn { height:auto; padding:8px 12px; margin:0; background:none; cursor:pointer; }
    .tsp-kompakt .tsp-grp.is-zu ul { display:none; }
    .tsp-kompakt .tsp-count { position:static; margin-left:auto; }

    .tsp-burger { display:inline-flex; }
    header.main-header.tsp-top { padding:8px 14px; gap:10px; }
    .tsp-mit-sidebar .approval-bar { padding:10px 14px; }
    .tsp-mit-sidebar .container { padding:0 14px; margin:16px auto; }
}

@media (max-width: 600px) {
    .tsp-crumb { display:none; }
    .tsp-top .btn-logout span { display:none; }        /* nur das Symbol */
    .tsp-top .btn-logout { padding:6px 8px; }
    .tsp-top .user-status-zone { gap:6px; }
    .tsp-mit-sidebar .container { padding:0 12px; margin:12px auto; }
}

@media (prefers-reduced-motion: reduce) {
    .tsp-side, .tsp-chev { transition:none; }
}

/* ============================================================
   5. BAUSTEINE IM NEUEN DESIGN
   Nur Farben, Rundungen und Schrift – Abstände und Aufbau der
   Seiten bleiben wie in style.css.
   ============================================================ */
body { font-family:var(--tsp-font); background-color:var(--tsp-bg); color:var(--tsp-fg); }

h1, h2, h3 { color:var(--tsp-fg); letter-spacing:-.01em; text-wrap:balance; }

.card { border:1px solid var(--tsp-line); border-radius:10px; box-shadow:0 1px 2px rgba(10, 29, 71, .04); }

/* Standard-Buttons */
/* Nur die Grundfarbe ändern; farbige Varianten (grün, rot, …) behalten ihre Klassen-Farbe */
button { background:var(--tsp-royal); border-radius:6px; }
.btn, .btn-back { background:var(--tsp-royal); border-radius:6px; }
.btn:hover, .btn-back:hover { background:var(--tsp-royal-dk); }

/* Eingabefelder: einheitlicher Fokus in Logo-Blau */
input:focus, select:focus, textarea:focus,
.form-control:focus,
.form-group input:focus { outline:none; border-color:var(--tsp-royal); box-shadow:0 0 0 3px rgba(10, 87, 200, .15); }
.input-wrapper input:focus,
.input-wrapper select:focus { border-color:var(--tsp-royal); box-shadow:none; }
.input-wrapper input:focus + label,
.input-wrapper select:focus + label { color:var(--tsp-royal); }

/* Tabellen */
th { background:#f6f8fc; color:var(--tsp-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
td { border-bottom-color:var(--tsp-line); }
tbody tr:hover td { background-color:rgba(10, 87, 200, .035); }
.timesheet-table th { text-transform:none; letter-spacing:0; font-size:13px; color:var(--tsp-fg); }

/* Kacheln und Links in Logo-Blau statt Altblau */
.menu-box, .object-card { border-top-color:var(--tsp-royal); }
.menu-box a, .object-card a, .osl-btn, .btn-calendar { background:var(--tsp-royal); }
.menu-box a:hover, .object-card a:hover, .osl-btn:hover, .btn-calendar:hover { background:var(--tsp-royal-dk); }
.status-tab.is-current { background:var(--tsp-navy); border-color:var(--tsp-navy); }
.status-tab:hover { border-color:var(--tsp-royal); color:var(--tsp-royal); }
.navigator-current { background:var(--tsp-soft); }
.stats-box { border-left-color:var(--tsp-royal); }
.shift-badge { border-left-color:var(--tsp-royal); }
.wt-tag input:checked + span { background:var(--tsp-royal); border-color:var(--tsp-royal); }
.wt-we input:checked + span { background:var(--tsp-navy); border-color:var(--tsp-navy); }
.spinner { border-left-color:var(--tsp-royal); }
.info-panel { border-left-color:var(--tsp-royal); }
.info-panel .highlight { color:var(--tsp-royal); }
.req-link { color:var(--tsp-royal); }

/* Anmeldeseiten im Navy der Seitenleiste */
.login-body { background:var(--tsp-navy); }
.modal { background:rgba(10, 29, 71, .6); }

/* ============================================================
   6. DRUCK: Seitenleiste und Kopfzeile nie auf Papier
   ============================================================ */
@media print {
    body.tsp-mit-sidebar,
    body.tsp-mit-sidebar.tsp-kompakt { padding-left:0 !important; }
    .tsp-side, .tsp-scrim, .tsp-top, .approval-bar { display:none !important; }
}