/* ============================================================
   PEGASUS COPILOT — DASHBOARD 10/10 REDESIGN (Personio-Stil)
   Lädt NACH dashboard.css → überschreibt gezielt.
   Nur Aussehen. Alle Widgets/Funktionen bleiben.
   Default = navy Sidebar. Umschaltbar via body.sb-light (Toggle).
   ============================================================ */

:root{
  --rd-line:        #EBE5DA;
  --rd-line-2:      #E2DACB;
  --rd-surface-2:   #FBF8F3;
  --rd-gold-deep:   #A8842F;
  --rd-gold-bg:     #F6EFDE;
}

/* ---------- SIDEBAR: gemeinsame Verfeinerung ---------- */
.sidebar{
  /* feste helle Sidebar (kein Toggle mehr) */
  --sb-bg:#FFFFFF; --sb-text:#1B2940; --sb-strong:#0F1B2D; --sb-muted:#6E6358;
  --sb-icon:#9A9081; --sb-hover:#FBF8F3; --sb-border:#EBE5DA;
  --sb-active-bg:#F6EFDE; --sb-active-text:#A8842F; --sb-active-icon:#A8842F;
  --sb-field:#FBF8F3;
  background:var(--sb-bg)!important;
  border-right:1px solid var(--sb-border)!important;
  box-shadow:none!important;
}
/* Theme-Umschalter komplett aus */
#rdThemeSwitch{ display:none!important; }

.sidebar-header{ border-bottom:1px solid var(--sb-border)!important; padding:18px 16px 14px!important; }
.sidebar-brand-name{ color:var(--sb-strong)!important; }
.sidebar-toggle-btn{
  background:var(--sb-field)!important; border:1px solid var(--sb-border)!important; color:var(--sb-muted)!important;
}
.sidebar-toggle-btn:hover{ background:var(--sb-hover)!important; color:var(--sb-strong)!important; }

/* User-Karte */
.user-info{
  background:var(--sb-field)!important; border:1px solid var(--sb-border)!important;
  box-shadow:none!important; border-radius:14px!important; padding:11px 12px!important;
}
.user-info:hover{ background:var(--sb-hover)!important; border-color:var(--sb-border)!important; }
.user-info-avatar{ background:linear-gradient(145deg,#C5A55A,#A8842F)!important; }
.sb-light .user-info-avatar{ background:linear-gradient(145deg,#314e79,#22375a)!important; }
.user-name{ color:var(--sb-strong)!important; }
.user-role{ color:var(--sb-muted)!important; }

/* Sektions-Titel */
.menu-section-title{
  color:var(--sb-muted)!important; font-size:10.5px!important; letter-spacing:.1em!important;
  opacity:.9; padding:0 12px!important; margin-bottom:6px!important;
}

/* Menü-Einträge — ruhig, neutral, kein Gold-Hover */
.menu-item{
  color:var(--sb-text)!important; border-radius:10px!important; padding:9px 12px!important;
  gap:12px; font-weight:500!important; box-shadow:none!important;
}
.menu-item-left{ gap:12px!important; }
.menu-item svg{ color:var(--sb-icon)!important; opacity:1!important; width:18px; height:18px; stroke-width:1.9; }
.menu-item:hover{ background:var(--sb-hover)!important; color:var(--sb-strong)!important; }
.menu-item:hover svg{ color:var(--sb-text)!important; }

/* Aktiver Eintrag — ruhige Pille + dünner Gold-Strich, KEINE Zappel-Animation */
.menu-item.active{
  background:var(--sb-active-bg)!important; color:var(--sb-active-text)!important;
  font-weight:600!important; box-shadow:none!important;
}
.menu-item.active svg{ color:var(--sb-active-icon)!important; }
.menu-item.active::before{
  top:8px!important; bottom:8px!important; width:3px!important;
  background:#C5A55A!important; animation:none!important; transform:none!important; opacity:1!important;
}

/* Scrollbar */
.sidebar-menu::-webkit-scrollbar-thumb{ background:var(--sb-border)!important; }

/* Footer */
.sidebar-footer{ border-top:1px solid var(--sb-border)!important; }
.sidebar-footer .menu-item,.sidebar-footer .btn-logout{ color:var(--sb-text)!important; }
.sidebar-footer svg{ color:var(--sb-icon)!important; }

/* Zähler-Badges in der Sidebar */
.menu-count{ background:#C5A55A!important; color:#fff!important; border-radius:20px!important; font-weight:700!important; }

/* ---------- Theme-Umschalter (nur Test) ---------- */
#rdThemeSwitch{
  position:fixed; bottom:18px; left:18px; z-index:9000; display:flex; gap:5px;
  background:#fff; border:1px solid var(--rd-line-2); border-radius:30px; padding:5px;
  box-shadow:0 6px 20px rgba(15,27,45,.12); font-family:'Inter','DM Sans',sans-serif;
}
#rdThemeSwitch button{ border:none; background:none; font-size:12px; font-weight:600; color:#6E6358; padding:7px 13px; border-radius:24px; cursor:pointer; }
#rdThemeSwitch button.on{ background:#0F1B2D; color:#fff; }

/* ============================================================
   DASHBOARD HAUPTBEREICH — KOMPLETTER REWORK (Premium-Editorial)
   Hebt das Dashboard auf das Niveau der Anträge-/Kalender-Views:
   Fraunces-Headlines, edle Karten, ruhige KPIs, Gold dezent.
   ============================================================ */
:root{
  --rd-navy:#0F1B2D; --rd-ink:#2A3340; --rd-muted:#8B7E74; --rd-subtle:#A89E94;
  --rd-surface:#FFFFFF; --rd-bordr:#EBE4D7; --rd-bordr2:#E1D8C7;
  --rd-gold:#C5A55A; --rd-goldd:#A8842F; --rd-goldbg:#F7F0DF;
  --rd-green:#2E7D5B; --rd-greenbg:#E8F1EC; --rd-red:#A33C3C; --rd-redbg:#F6EAE7;
  --rd-blue:#3E6391; --rd-bluebg:#E9EEF5; --rd-purple:#6B5B95; --rd-purplebg:#EEEAF4;
  --rd-shadow:0 1px 2px rgba(15,27,45,.04),0 8px 24px rgba(15,27,45,.05);
  --rd-shadow-h:0 2px 4px rgba(15,27,45,.05),0 14px 36px rgba(15,27,45,.09);
}

/* ---- Begrüßung: editorial (Fraunces) ---- */
#dashGreeting{
  font-family:'Fraunces',Georgia,serif!important; font-weight:600!important;
  font-size:clamp(26px,3vw,38px)!important; letter-spacing:-.01em!important;
  color:var(--rd-navy)!important; line-height:1.08!important;
}
.db-hero-date{ color:var(--rd-muted)!important; font-size:13.5px!important; margin-top:4px!important; }
.db-hero{ margin-bottom:26px!important; padding-bottom:0!important; border-bottom:none!important; }

/* ---- KPI-Karten: ruhig, definiert, premium ---- */
.db-kpi-bento{ gap:16px!important; margin-bottom:28px!important; }
.db-kpi-card{
  background:var(--rd-surface)!important; border:1px solid var(--rd-bordr)!important;
  border-radius:16px!important; box-shadow:var(--rd-shadow)!important;
  padding:20px 22px!important; transition:transform .2s,box-shadow .2s,border-color .2s!important;
}
.db-kpi-card:hover{ transform:translateY(-2px)!important; box-shadow:var(--rd-shadow-h)!important; border-color:var(--rd-bordr2)!important; }
.db-kpi-icon{
  width:40px!important; height:40px!important; border-radius:12px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  background:var(--rd-goldbg)!important; margin-bottom:12px!important;
}
.db-kpi-icon svg{ width:20px!important; height:20px!important; color:var(--rd-goldd)!important; opacity:1!important; }
.db-kpi-val{
  font-family:'Outfit',system-ui,sans-serif!important; font-weight:700!important;
  font-size:32px!important; line-height:1!important; color:var(--rd-navy)!important; margin-bottom:5px!important;
}
.db-kpi-lbl{
  font-size:11.5px!important; font-weight:600!important; letter-spacing:.06em!important;
  text-transform:uppercase!important; color:var(--rd-muted)!important;
}
/* farbige Icon-Chips je Typ */
.db-kpi-green  .db-kpi-icon{ background:var(--rd-greenbg)!important; }  .db-kpi-green  .db-kpi-icon svg{ color:var(--rd-green)!important; }
.db-kpi-orange .db-kpi-icon{ background:var(--rd-redbg)!important; }    .db-kpi-orange .db-kpi-icon svg{ color:var(--rd-red)!important; }
.db-kpi-blue   .db-kpi-icon{ background:var(--rd-bluebg)!important; }   .db-kpi-blue   .db-kpi-icon svg{ color:var(--rd-blue)!important; }
.db-kpi-purple .db-kpi-icon{ background:var(--rd-purplebg)!important; } .db-kpi-purple .db-kpi-icon svg{ color:var(--rd-purple)!important; }

/* Featured-Karte (Offene Anträge): navy + gold, das Highlight */
.db-kpi-featured,.db-kpi-accent{
  background:linear-gradient(155deg,#17283f,var(--rd-navy))!important;
  border:none!important; color:#fff!important; position:relative!important; overflow:hidden!important;
  box-shadow:0 12px 30px rgba(15,27,45,.18)!important;
}
.db-kpi-featured::after,.db-kpi-accent::after{
  content:""!important; position:absolute!important; right:-40px!important; top:-40px!important;
  width:150px!important; height:150px!important; border-radius:50%!important;
  background:radial-gradient(circle,rgba(197,165,90,.25),transparent 70%)!important;
}
.db-kpi-featured .db-kpi-val,.db-kpi-accent .db-kpi-val{ color:#fff!important; }
.db-kpi-featured .db-kpi-lbl,.db-kpi-accent .db-kpi-lbl{ color:#C9D3E2!important; }
.db-kpi-featured .db-kpi-icon,.db-kpi-accent .db-kpi-icon{ background:rgba(197,165,90,.2)!important; }
.db-kpi-featured .db-kpi-icon svg,.db-kpi-accent .db-kpi-icon svg{ color:#E4C77E!important; }

/* ---- Panels / Sections / Cards ---- */
.db-section,.db-content-grid .card,.card{
  background:var(--rd-surface)!important; border:1px solid var(--rd-bordr)!important;
  border-radius:16px!important; box-shadow:var(--rd-shadow)!important;
}
.db-section-head,.card-header{
  padding:18px 22px 14px!important; border-bottom:1px solid var(--rd-bordr)!important;
  display:flex!important; align-items:center!important; justify-content:space-between!important;
}
.db-section-title,.card-title{
  font-family:'Fraunces',Georgia,serif!important; font-weight:600!important;
  font-size:17px!important; color:var(--rd-navy)!important; letter-spacing:-.005em!important;
}
.db-section-sub{ color:var(--rd-muted)!important; font-size:12.5px!important; }
.db-section-link,.card-header a{ color:var(--rd-goldd)!important; font-weight:600!important; font-size:12.5px!important; }
.db-content-grid,.db-grid,.db-widget-row{ gap:20px!important; }

/* ---- Empty-States (wie "Alles erledigt") ---- */
.widget-empty{ padding:34px 20px!important; text-align:center!important; }
.widget-empty-icon{
  width:54px!important; height:54px!important; border-radius:50%!important; margin:0 auto 14px!important;
  background:var(--rd-goldbg)!important; display:flex!important; align-items:center!important; justify-content:center!important;
}
.widget-empty-icon svg{ color:var(--rd-goldd)!important; width:24px!important; height:24px!important; }
.widget-empty-text{ font-family:'Fraunces',Georgia,serif!important; font-size:16px!important; color:var(--rd-navy)!important; }
.widget-empty-action{ color:var(--rd-goldd)!important; font-weight:600!important; }

/* ---- Stat-Karten ---- */
.stat-card{ background:var(--rd-surface)!important; border:1px solid var(--rd-bordr)!important; border-radius:14px!important; box-shadow:var(--rd-shadow)!important; }
.stat-value{ font-family:'Outfit',system-ui,sans-serif!important; font-weight:700!important; color:var(--rd-navy)!important; }
.stat-label{ color:var(--rd-muted)!important; font-size:11.5px!important; letter-spacing:.05em!important; text-transform:uppercase!important; }

/* ============================================================
   SIDEBAR — KLAPPBARE NAVIGATION (Accordion)
   Sektions-Titel = klickbarer Header, nur aktive Gruppe offen.
   ============================================================ */
.menu-section-title{ cursor:default!important; }
/* (Accordion deaktiviert — flache Sidebar) */
.nav-acc-chevron{ width:14px; height:14px; flex-shrink:0; opacity:.6; transition:transform .25s ease; }
.menu-section-title.acc-collapsed .nav-acc-chevron{ transform:rotate(-90deg); }
.nav-acc-items{ overflow:hidden; transition:max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease; max-height:600px; opacity:1; }
.nav-acc-items.acc-collapsed{ max-height:0; opacity:0; }
/* Icon-Modus (Sidebar komplett eingeklappt): alle Icons zeigen, kein Accordion */
.sidebar.collapsed .nav-acc-items{ max-height:none!important; opacity:1!important; }
.sidebar.collapsed .nav-acc-chevron{ display:none!important; }

/* (Top-Nav-Experiment entfernt — wir bleiben bei der Sidebar.) */

/* ============================================================
   ENTERPRISE-CLEAN POLISH — ruhiger, konsistenter, hochwertiger
   ============================================================ */
/* Begrüßung etwas zurückhaltender (nicht erschlagend) */
#dashGreeting{ font-size:clamp(23px,2.3vw,30px)!important; }
.db-hero{ margin-bottom:22px!important; }

/* KPIs: EINE saubere Reihe aus 5 gleich hohen Karten (statt Bento-Block) */
.db-kpi-bento{ grid-template-columns:1.3fr repeat(4,1fr)!important; grid-auto-rows:1fr!important; align-items:stretch!important; gap:14px!important; }
.db-kpi-quad{ display:contents!important; }
.db-kpi-featured,.db-kpi-accent{ grid-row:auto!important; grid-column:auto!important; }
.db-kpi-card{ min-height:118px!important; justify-content:flex-start!important; gap:9px!important; }
.db-kpi-card .kpi-trend{ margin-top:auto!important; }

/* gleichmäßiger Rhythmus + ruhige Trennlinien */
.db-section{ margin-bottom:18px!important; }
.db-content-grid,.db-widget-row{ margin-bottom:18px!important; gap:18px!important; }
.db-section-head,.card-header{ padding:16px 20px 13px!important; }

/* Empty-States kompakter & dezenter */
.widget-empty{ padding:28px 20px!important; }
.widget-empty-icon{ width:48px!important; height:48px!important; margin-bottom:12px!important; }
.widget-empty-icon svg{ width:21px!important; height:21px!important; }
.widget-empty-text{ font-size:15px!important; }

/* feiner Innen-Abstand der Inhalte */
.main-content .page{ padding-top:6px!important; }

/* ============================================================
   FEINSCHLIFF: Hero zentriert + Benachrichtigungs-Panel neu
   ============================================================ */
/* Begrüßung+Datum LINKS, Status-Pille RECHTS — Inhalt vertikal perfekt mittig */
.db-hero{
  flex-direction:row!important; align-items:center!important; justify-content:space-between!important;
  text-align:left!important; gap:18px!important; padding:22px 32px!important; margin-top:0!important;
}
.db-hero-left{ display:flex!important; flex-direction:column!important; justify-content:center!important; }
#dashGreeting{ margin:0!important; }
.db-hero-date{ margin-top:4px!important; margin-bottom:0!important; }
.main-content .page{ padding-top:0!important; }
.db-hero-left{ text-align:left!important; }
.db-hero-highlights{ display:flex!important; align-items:center!important; justify-content:flex-end!important; flex-shrink:0!important; }

/* Benachrichtigungs-Panel — cleanes, premium Design */
.notif-panel{
  width:372px!important; max-width:92vw!important; background:#fff!important; padding:0!important;
  border:1px solid var(--rd-bordr)!important; border-radius:16px!important; overflow:hidden!important;
  box-shadow:0 20px 54px rgba(15,27,45,.17)!important;
}
.notif-panel-header{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  padding:15px 18px!important; border-bottom:1px solid var(--rd-bordr)!important; background:#fff!important;
}
.notif-panel-header > *:first-child{
  font-family:'Fraunces',Georgia,serif!important; font-weight:600!important; font-size:15.5px!important; color:var(--rd-navy)!important;
}
.notif-panel-header .btn{
  font-size:12px!important; font-weight:600!important; color:var(--rd-goldd)!important;
  background:none!important; border:none!important; padding:4px 8px!important;
}
.notif-panel-header .btn:hover{ background:var(--rd-goldbg)!important; border-radius:7px!important; }
#notifList{ max-height:380px!important; overflow-y:auto!important; padding:6px!important; }
.notif-item{
  display:flex!important; gap:11px!important; align-items:flex-start!important;
  padding:11px 12px!important; border-radius:10px!important; border:none!important; cursor:pointer!important;
  transition:background .15s!important;
}
.notif-item:hover{ background:#FBF8F3!important; }
.notif-dot{ width:8px!important; height:8px!important; border-radius:50%!important; background:var(--rd-gold)!important; margin-top:6px!important; flex-shrink:0!important; }
.notif-title{ font-weight:600!important; font-size:13.5px!important; color:var(--rd-navy)!important; line-height:1.35!important; }
.notif-msg{ font-size:12.5px!important; color:var(--rd-muted)!important; margin-top:2px!important; line-height:1.45!important; }
.notif-time{ font-size:11px!important; color:var(--rd-subtle)!important; margin-top:3px!important; }
.notif-link{ color:var(--rd-goldd)!important; font-weight:600!important; }
/* ungelesen = dezent gold hinterlegt + Gold-Punkt; gelesen = schlicht, kein Punkt */
.notif-item.unread{ background:var(--rd-goldbg)!important; }
.notif-item.unread:hover{ background:#F2E7CF!important; }
.notif-item.unread .notif-dot{ background:var(--rd-gold)!important; }
.notif-item:not(.unread) .notif-dot{ background:transparent!important; }
.notif-item:not(.unread) .notif-title{ color:var(--rd-ink)!important; font-weight:550!important; }
/* schöner Empty-State mit Glocken-Icon */
.notif-empty{ text-align:center!important; padding:38px 22px!important; color:var(--rd-muted)!important; font-size:13.5px!important; }
.notif-empty::before{
  content:""!important; display:block!important; width:50px!important; height:50px!important; margin:0 auto 14px!important;
  border-radius:50%!important; background:var(--rd-goldbg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8842F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / 23px 23px no-repeat!important;
}
/* Glocke etwas edler */
.notif-bell{ border-radius:10px!important; }

/* ============================================================
   MITARBEITER-AVATARE — ruhige, enterprise-taugliche Palette
   (statt 8-Farben-Regenbogen → gedämpfte Navy/Gold/Neutral-Töne)
   ============================================================ */
/* GOLD-FAMILIE: verschiedene, aber harmonische Töne (Gold/Bronze/Amber/Karamell) + weiße Initialen */
.ml-avatar{
  color:#fff!important; font-weight:600!important; font-size:12.5px!important; letter-spacing:.01em!important;
  border:none!important; box-shadow:0 1px 2px rgba(120,90,30,.18)!important;
}
.ml-avatar.avc-a{ background:linear-gradient(135deg,#C9A95E,#A8842F)!important; } /* gold */
.ml-avatar.avc-b{ background:linear-gradient(135deg,#C8924F,#9c6a30)!important; } /* amber/kupfer */
.ml-avatar.avc-c{ background:linear-gradient(135deg,#BFA258,#937a38)!important; } /* warmgold */
.ml-avatar.avc-d{ background:linear-gradient(135deg,#B07C45,#875b2c)!important; } /* karamell */
.ml-avatar.avc-e{ background:linear-gradient(135deg,#A38B40,#766326)!important; } /* olivgold */
.ml-avatar.avc-f{ background:linear-gradient(135deg,#D4B36A,#b3923f)!important; } /* champagner */
.ml-avatar.avc-g{ background:linear-gradient(135deg,#9C763A,#735428)!important; } /* bronze */
.ml-avatar.avc-h{ background:linear-gradient(135deg,#B89154,#8a6a30)!important; } /* honiggold */

/* ============================================================
   ROLLEN-BADGES — dezent & konsistent (gedämpfte Tints je Rolle)
   ============================================================ */
.ml-role{
  font-size:10px!important; font-weight:700!important; letter-spacing:.07em!important;
  text-transform:uppercase!important; padding:3px 9px!important; border-radius:6px!important;
  border:1px solid transparent!important;
}
.ml-role.träger,.ml-role.traeger{ color:#33425a!important; background:#ECEEF3!important; }   /* navy-tint */
.ml-role.admin{ color:#33425a!important; background:#ECEEF3!important; }                       /* navy-tint */
.ml-role.manager,.ml-role.leadership{ color:#8a6c2c!important; background:#F5ECD7!important; } /* gold-tint */
.ml-role.employee,.ml-role.mitarbeiter{ color:#6E6358!important; background:#F0ECE4!important; } /* neutral */

/* ============================================================
   URLAUBSTAGE — cooler Edit-Icon-Button (Hover-Reveal, Gold)
   ============================================================ */
#vacationDaysTable .vd-edit-btn{
  width:34px!important; height:34px!important; display:inline-flex!important;
  align-items:center!important; justify-content:center!important; padding:0!important;
  border-radius:10px!important; border:1px solid var(--rd-bordr)!important; background:#fff!important;
  color:var(--rd-subtle)!important; cursor:pointer!important; opacity:.5!important;
  transition:opacity .15s, background .15s, border-color .15s, color .15s, transform .15s!important;
}
#vacationDaysTable .vd-edit-btn svg{ width:15px!important; height:15px!important; }
#vacationDaysTable tbody tr:hover .vd-edit-btn{ opacity:1!important; }
#vacationDaysTable .vd-edit-btn:hover{
  background:var(--rd-goldbg)!important; border-color:var(--rd-gold)!important;
  color:var(--rd-goldd)!important; transform:translateY(-1px)!important;
  box-shadow:0 3px 10px rgba(168,132,47,.18)!important;
}