:root {
  --jp-blue: #1a4c7e;
  --jp-light-blue: #429bd6;
  --jp-pink: #e8396e;
  --jp-dark: #3d3d3b;
  --jp-muted: #657281;
  --jp-bg: #f3f6f9;
  --jp-card: #ffffff;
  --jp-border: #dbe4ee;
  --jp-soft-blue: rgba(66,155,214,.14);
  --jp-soft-pink: rgba(232,57,110,.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 16% 4%, rgba(66,155,214,.20), transparent 28%),
    linear-gradient(135deg, #f7f9fc 0%, #eef3f8 58%, #f8fbfd 100%);
  color: var(--jp-dark);
}
a { color: inherit; }
.login-page { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card, .card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(219,228,238,.95);
  box-shadow: 0 22px 60px rgba(26,76,126,.12);
  border-radius: 24px;
}
.login-card { width:100%; max-width:430px; padding:34px; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.brand-mark {
    width: 32px;
    height: 32px;
    background: url('/assets/icon-192.svg') center/contain no-repeat;
    position: relative;
    flex-shrink: 0;
    align-self: center;
}
.compact-brand {
    width: 28px;
    height: 28px;
}
.brand-mark::after { content:""; position:absolute; width:15px; height:15px; background:#fff; left:14px; top:14px; border-radius:2px; }
.brand-title { font-weight:800; font-size:22px; line-height:1.1; color:var(--jp-blue); }
.brand-sub { color:var(--jp-muted); font-size:14px; margin-top:3px; }
label { display:block; font-weight:650; font-size:14px; margin:14px 0 7px; color:var(--jp-dark); }
.input, select, textarea {
  width:100%; border:1px solid var(--jp-border); border-radius:14px; padding:13px 14px; font:inherit; background:#fff; outline:none;
}
.input:focus, select:focus, textarea:focus { border-color: var(--jp-light-blue); box-shadow:0 0 0 4px rgba(66,155,214,.16); }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; border:none; border-radius:14px; padding:12px 18px; font-weight:750; cursor:pointer; text-decoration:none; }
.btn-primary { background: linear-gradient(135deg, var(--jp-blue), var(--jp-light-blue)); color:white; box-shadow:0 12px 28px rgba(26,76,126,.22); }
.btn-danger { background: linear-gradient(135deg, var(--jp-pink), #ff6b9b); color:white; box-shadow:0 12px 28px rgba(232,57,110,.22); }
.btn-ghost { background:#fff; border:1px solid var(--jp-border); color:var(--jp-dark); }
.w-full { width:100%; }
.error { background:#fff1f5; border:1px solid #ffd2df; color:#991b42; padding:12px 14px; border-radius:16px; margin-bottom:16px; }
.notice { background:#eef7fd; border:1px solid #c3e4f6; color:#174b70; padding:12px 14px; border-radius:16px; margin-bottom:16px; }
.success { background:#f0f8ed; color:#365c2b; border:1px solid #c9e3bd; border-radius:18px; padding:14px 16px; margin:12px 0 18px; }
.app-shell { min-height:100vh; }
.topbar { min-height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:rgba(255,255,255,.84); backdrop-filter: blur(16px); border-bottom:1px solid rgba(219,228,238,.92); position:sticky; top:0; z-index:5; }
.nav-left { display:flex; align-items:center; gap:14px; }
.nav-logo-link { text-decoration:none !important; color:inherit !important; transition:opacity .15s; }
.nav-logo-link:hover { opacity:0.75; }
.nav-links { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nav-links a { text-decoration:none; padding:10px 12px; border-radius:14px; color:#405166; font-weight:650; }
.nav-links a.active, .nav-links a:hover { background:var(--jp-soft-blue); color:var(--jp-blue); }
.container { max-width:1180px; margin:0 auto; padding:28px; }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:22px; }
h1 { font-size:36px; margin:0 0 8px; letter-spacing:-.03em; color:var(--jp-blue); }
h2 { color:var(--jp-blue); }
.muted { color:var(--jp-muted); }
.grid { display:grid; gap:18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { padding:22px; }
.kpi-label { color:var(--jp-muted); font-size:14px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.kpi-value { font-size:30px; font-weight:850; letter-spacing:-.03em; margin-top:8px; color:var(--jp-blue); }
.timer { font-variant-numeric: tabular-nums; font-size:48px; font-weight:900; letter-spacing:-.04em; margin:14px 0; color:var(--jp-blue); }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:13px; font-weight:800; }
.badge-running { background:#f0f8ed; color:#365c2b; }
.badge-neutral { background:#f3f4f6; color:#374151; }
.badge-success { background:#f0fdf4; color:#166534; }
.badge-warning { background:#fff7ed; color:#9a3412; }
.badge-critical { background:#fff1f5; color:#991b42; }
.table { width:100%; border-collapse:separate; border-spacing:0 10px; }
.table th { text-align:left; color:var(--jp-muted); font-size:13px; padding:0 12px; }
.table td { background:#fff; padding:14px 12px; border-top:1px solid var(--jp-border); border-bottom:1px solid var(--jp-border); }
.table td:first-child { border-left:1px solid var(--jp-border); border-radius:14px 0 0 14px; }
.table td:last-child { border-right:1px solid var(--jp-border); border-radius:0 14px 14px 0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
textarea.input { min-height:90px; resize:vertical; }
.calendar-card { overflow-x:auto; }
.calendar-grid { display:grid; gap:10px; min-width:980px; padding-right:22px; }
.calendar-head { font-weight:850; color:#405166; background:#f8fafc; border:1px solid var(--jp-border); border-radius:16px; padding:12px; }
.calendar-head span { color:var(--jp-muted); font-weight:650; }
.calendar-person { background:#fff; border:1px solid var(--jp-border); border-radius:16px; padding:12px; min-height:82px; }
.calendar-cell { border:1px solid var(--jp-border); border-radius:16px; padding:12px; min-height:82px; background:#fff; }
.calendar-location { font-weight:850; margin-bottom:5px; color:var(--jp-blue); }
.empty-cell { display:flex; align-items:center; justify-content:center; background:#fafafa; }
.small-note { font-size:12px; margin-top:6px; }
.location-office { background:rgba(26,76,126,.10); border-color:rgba(26,76,126,.22); }
.location-homeoffice { background:rgba(232,57,110,.10); border-color:rgba(232,57,110,.22); }
.location-seminar { background:rgba(66,155,214,.12); border-color:rgba(66,155,214,.24); }
.location-vacation, .location-sick, .location-absent { background:#f3f4f6; }
.location-mobile, .location-other { background:#fff7ed; border-color:#fed7aa; }
.planning-table td { vertical-align:middle; }
.violation-list { display:grid; gap:12px; }
.violation-item { border:1px solid var(--jp-border); border-radius:18px; padding:14px 16px; background:#fff; }
.violation-item.critical { border-color:rgba(232,57,110,.35); background:rgba(232,57,110,.06); }
.violation-item.warning { border-color:rgba(66,155,214,.35); background:rgba(66,155,214,.07); }
.violation-date-group { display:grid; gap:8px; }
.violation-date-head { font-size:12px; font-weight:800; color:var(--jp-muted); text-transform:uppercase; letter-spacing:.05em; padding:4px 0 0; }
@media (max-width: 850px) { .grid-3, .grid-2 { grid-template-columns:1fr; } .hero, .topbar { flex-direction:column; height:auto; align-items:flex-start; padding:18px; } .timer { font-size:38px; } }

.login-divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:rgba(61,61,59,.6); font-size:13px; }
.login-divider:before, .login-divider:after { content:""; flex:1; height:1px; background:rgba(26,76,126,.18); }
.small { font-size:12px; }
.center { text-align:center; }

/* v0.9 polish */
:root{
  --jp-blue:#1a4c7e;
  --jp-sky:#429bd6;
  --jp-pink:#e8396e;
  --jp-dark:#3d3d3b;
  --jp-bg:#f5f8fb;
  --jp-soft:#eef6fc;
  --jp-good:#2f855a;
  --jp-warn:#b7791f;
  --jp-danger:#c53030;
}
body{background:linear-gradient(135deg,#f7fbff 0%,#f4f7fa 55%,#fff3f7 100%);color:var(--jp-dark)}
h1,h2,h3,.kpi-value,.brand-title,.timer{font-family: Formular, "Segoe UI", system-ui, sans-serif;letter-spacing:-.02em}
body,input,select,textarea,button,.muted,.nav-links a{font-family:"Segoe UI",system-ui,sans-serif;font-weight:400}
.topbar{border-bottom:1px solid rgba(26,76,126,.12);box-shadow:0 12px 30px rgba(26,76,126,.08)}
.brand-mark{background:linear-gradient(135deg,var(--jp-blue),var(--jp-sky) 62%,var(--jp-pink));box-shadow:0 10px 24px rgba(26,76,126,.25)}
.hero-dashboard{background:linear-gradient(135deg,var(--jp-blue),#23659f);color:#fff;border-radius:28px;padding:28px;box-shadow:0 18px 44px rgba(26,76,126,.22)}
.hero-dashboard .muted{color:rgba(255,255,255,.78)}
.hero-dashboard h1{color:#fff}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:18px 0}
.kpi-card{position:relative;overflow:hidden;border:1px solid rgba(26,76,126,.10)}
.kpi-card:after{content:"";position:absolute;right:-30px;top:-40px;width:120px;height:120px;border-radius:999px;background:rgba(66,155,214,.12)}
.text-danger{color:var(--jp-danger)}
.text-positive{color:var(--jp-good)}
.week-card{margin:18px 0;background:linear-gradient(180deg,#fff,#f8fbfd)}
.week-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.week-card h2{margin:4px 0 0}.week-balance{font-family:Formular,"Segoe UI",sans-serif;font-size:28px;font-weight:700}.week-balance.negative{color:var(--jp-danger)}.week-balance.positive{color:var(--jp-good)}
.progress{height:12px;background:#e6eef6;border-radius:999px;overflow:hidden;margin:14px 0 8px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--jp-sky),var(--jp-pink));border-radius:999px;max-width:100%}.progress.is-complete span{background:linear-gradient(90deg,#10b981,#059669)}
.toast{padding:14px 16px;border-radius:18px;margin:14px 0;font-weight:600;border:1px solid rgba(26,76,126,.12);background:#fff;box-shadow:0 10px 24px rgba(26,76,126,.08)}.toast.success{border-left:6px solid var(--jp-good)}.toast.warning{border-left:6px solid var(--jp-warn)}.toast.error{border-left:6px solid var(--jp-danger)}
.btn-start{background:linear-gradient(135deg,#2f855a,#38a169);color:white;border:0}.btn-start:hover{filter:brightness(.97)}
.btn-danger{background:linear-gradient(135deg,#c53030,#e8396e);color:white;border:0}.btn-primary{background:linear-gradient(135deg,var(--jp-blue),var(--jp-sky));color:white;border:0}.btn-ghost{border:1px solid rgba(26,76,126,.2);color:var(--jp-blue);background:#fff}.btn-secondary{background:var(--jp-pink);color:#fff}
.action-card{display:flex;flex-direction:column;gap:10px}.manager-strip{margin:18px 0}.chip-list{display:flex;gap:10px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;border-radius:999px;background:var(--jp-soft);color:var(--jp-blue);padding:8px 12px;border:1px solid rgba(66,155,214,.28)}
.timer-card{background:linear-gradient(135deg,#fff,#f7fbff)}
.badge-critical{background:#fff1f2;color:#be123c}.badge-warning{background:#fff7ed;color:#c2410c}.badge-running{background:#ecfeff;color:#0e7490}.badge-neutral{background:#f1f5f9;color:#475569}
@media(max-width:1050px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.week-card-head{flex-direction:column}.hero-dashboard{border-radius:22px}}
@media(max-width:700px){.grid-4{grid-template-columns:1fr}.hero-dashboard{padding:22px}.week-balance{font-size:22px}}

/* v0.10 clean product navigation */
.hidden{display:none!important}
.compact-topbar{min-height:70px;gap:18px;align-items:center;padding:6px 28px}.compact-brand{width:34px!important;height:34px!important;border-radius:12px!important}.app-title{font-family:Formular,"Segoe UI",system-ui,sans-serif;color:var(--jp-blue);font-size:18px}.top-subtitle{font-size:12px}.compact-nav{flex:1;justify-content:center;gap:4px}.compact-nav a{position:relative;padding:9px 11px;font-size:14px;border-radius:999px}.compact-nav a.active{background:var(--jp-blue);color:#fff}.compact-nav a:hover{background:rgba(26,76,126,.09)}.compact-nav a.active:hover{background:var(--jp-blue)}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:999px;background:var(--jp-pink);color:#fff;font-size:11px;font-weight:800}.logout-link{color:var(--jp-muted)!important}.nav-icon-link{color:var(--jp-muted)!important;padding:8px 9px!important}.nav-icon-link svg{display:inline-block}.nav-icon-link.active{color:#fff!important}.nav-desktop-icon{display:inline-flex;align-items:center}.nav-mobile-text{display:none}.topbar-right{flex-shrink:0;display:flex;align-items:center;gap:4px}
.global-timer{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(26,76,126,.12);border-radius:999px;background:#fff;box-shadow:0 8px 18px rgba(26,76,126,.07);white-space:nowrap}.global-timer-state{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--jp-dark)}.mini-timer{font-variant-numeric:tabular-nums;color:var(--jp-blue);font-family:Formular,"Segoe UI",sans-serif}.pulse-dot{width:9px;height:9px;border-radius:999px;background:#94a3b8}.global-timer.is-running .pulse-dot{background:#2f855a;box-shadow:0 0 0 4px rgba(47,133,90,.13)}.global-timer.is-idle .pulse-dot{background:#e8396e;box-shadow:0 0 0 4px rgba(232,57,110,.12)}.inline-form{display:inline}.btn-mini{padding:7px 11px;border-radius:999px;font-size:12px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{margin:0 0 4px}.mini-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.mini-stat-grid div{background:#f8fbfd;border:1px solid rgba(26,76,126,.08);border-radius:18px;padding:14px}.mini-stat-grid span{display:block;color:var(--jp-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.mini-stat-grid strong{display:block;margin-top:6px;font-family:Formular,"Segoe UI",sans-serif;color:var(--jp-blue);font-size:24px}.vacation-summary{margin:18px 0}.dashboard-actions{margin:18px 0}.location-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.location-buttons form{margin:0}.location-button{width:100%;border:1px solid rgba(26,76,126,.16);background:#fff;border-radius:18px;padding:16px;text-align:left;font:inherit;font-weight:650;color:var(--jp-blue);cursor:pointer}.location-button:hover{border-color:var(--jp-sky);box-shadow:0 8px 20px rgba(26,76,126,.09)}.row-menu{position:relative}.row-menu summary{cursor:pointer;color:var(--jp-blue);font-weight:700}.row-menu-content{margin-top:8px}.profile-card{background:linear-gradient(180deg,#fff,#fbfdff)}
.clean-login{background:radial-gradient(circle at 20% 20%,rgba(66,155,214,.24),transparent 30%),radial-gradient(circle at 85% 20%,rgba(232,57,110,.16),transparent 26%),linear-gradient(135deg,#f7fbff,#fff)}.login-card-v2{border:1px solid rgba(26,76,126,.12);box-shadow:0 26px 80px rgba(26,76,126,.18)}.login-card-v2 .brand-title{font-family:Formular,"Segoe UI",sans-serif;color:var(--jp-blue);font-size:30px}.login-brand{margin-bottom:26px}.microsoft-primary{font-size:16px;padding:15px 18px;margin-bottom:10px}.local-login-box{margin-top:18px;padding-top:18px;border-top:1px solid rgba(26,76,126,.12)}
@keyframes login-brand-in{0%{opacity:0;transform:scale(.82) translateY(8px)}60%{transform:scale(1.04) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.login-card-v2 .brand-mark{animation:login-brand-in .55s cubic-bezier(.22,1,.36,1) both}
.hamburger-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:none;background:transparent;cursor:pointer;padding:6px;border-radius:12px;margin-left:auto}
.hamburger-btn span{display:block;height:2px;background:var(--jp-blue);border-radius:2px;transition:all .22s}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger-btn.open span:nth-child(2){opacity:0}
.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){.mini-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hamburger-btn{display:flex}.compact-topbar{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:8px;padding:4px 14px}.nav-left{flex:1}.topbar .global-timer{display:none}.stamp-mobile-wrap{display:block!important}.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--jp-border);border-radius:0 0 20px 20px;padding:12px;gap:4px;box-shadow:0 16px 40px rgba(26,76,126,.12);z-index:200}.nav-links.open{display:flex}.nav-links a{padding:10px 14px;border-radius:12px;font-size:15px}.nav-links .nav-dropdown{width:100%}.nav-links .nav-dropbtn{width:100%;text-align:left;padding:10px 14px;border-radius:12px;font-size:15px}.nav-links .nav-menu{position:static;box-shadow:none;border:1px solid var(--jp-border);margin-top:4px;border-radius:12px}.nav-links.open .nav-desktop-icon{display:none!important}.nav-links.open .nav-mobile-text{display:inline}}
@media(max-width:1050px){
  .location-buttons{grid-template-columns:1fr}
  .section-head{flex-direction:column}
}
@media(max-width:600px){.footer-org{display:block;margin-bottom:2px}.notif-dropdown{max-width:calc(100vw - 28px)}}
@media(max-width:500px){.mini-stat-grid{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.time-change-layout{grid-template-columns:1fr}}

/* v0.11 Planung & Teamkalender */
.planning-card-v11 { padding: 20px; }
.planning-week-list { display:grid; grid-template-columns:repeat(7,minmax(180px,1fr)); gap:14px; overflow-x:auto; padding-bottom:4px; }
.planning-day-card { min-width:180px; border:1px solid var(--jp-border); border-radius:22px; padding:14px; background:#fff; display:flex; flex-direction:column; gap:11px; }
.planning-day-card.is-weekend { background:#f7f8fa; opacity:.78; }
.planning-day-card.is-holiday { background:#f8fafc; border-style:dashed; }
.planning-day-card.is-missing { border-color:rgba(232,57,110,.55); box-shadow:0 10px 20px rgba(232,57,110,.08); }
.planning-day-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.planning-day-head strong { display:block; font-family:Formular,"Segoe UI",sans-serif; color:var(--jp-blue); font-size:22px; }
.planning-day-head span { display:block; color:var(--jp-muted); font-size:13px; }
.planning-day-head em { color:var(--jp-muted); font-style:normal; font-size:12px; text-align:right; }
.planning-location-pills { display:flex; flex-wrap:wrap; gap:8px; }
.location-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(26,76,126,.13); background:#fff; color:var(--jp-dark); border-radius:999px; padding:8px 10px; font-weight:700; font-size:13px; cursor:pointer; user-select:none; }
.location-pill input { position:absolute; opacity:0; pointer-events:none; }
.location-pill.selected { border-color:var(--jp-blue); background:rgba(26,76,126,.08); color:var(--jp-blue); }
.location-pill.clear-pill.selected { border-color:#cbd5e1; color:#64748b; background:#f8fafc; }
.planning-time-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.absence-chip { border-radius:16px; padding:10px 12px; font-weight:750; font-size:13px; }
.absence-chip.approved { background:rgba(47,133,90,.10); color:#276749; }
.absence-chip.pending { background:rgba(232,57,110,.10); color:var(--jp-pink); }
.planning-warning { border-radius:16px; padding:10px 12px; background:rgba(232,57,110,.09); color:#9f1239; font-size:13px; line-height:1.35; }
.office-warning-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.office-warning { border:1px solid rgba(232,57,110,.25); background:rgba(232,57,110,.08); color:#9f1239; border-radius:16px; padding:10px 12px; }
.calendar-head.no-office-day { background:rgba(232,57,110,.07); border-bottom:2px solid rgba(232,57,110,.3); }
.no-office-label { color:#9f1239; font-size:10px; font-weight:700; display:block; margin-top:2px; }
.calendar-cell.incomplete-planning { border-color:rgba(232,57,110,.4)!important; background:rgba(232,57,110,.07)!important; }
.team-calendar-v11 .calendar-head.is-weekend, .team-calendar-v11 .calendar-cell.is-weekend { background:#f7f8fa; opacity:.74; }
/* Heutige Spalte dezent hervorheben (Wochenansicht) */
.team-calendar-v11 .calendar-head.is-today { background:rgba(232,57,110,.10); border-color:rgba(232,57,110,.45); color:var(--jp-pink); box-shadow:0 0 0 1px rgba(232,57,110,.22); opacity:1; }
.team-calendar-v11 .calendar-cell.is-today { box-shadow:inset 0 0 0 1.5px rgba(26,76,126,.20); opacity:1; }
.team-calendar-v11 .calendar-head small { display:block; margin-top:3px; color:var(--jp-muted); font-weight:600; }
.team-calendar-v11 .calendar-person.is-manager-row { background:#f8fbfd; border-color:rgba(26,76,126,.18); }
.absence-cell.approved { background:rgba(47,133,90,.09); border-color:rgba(47,133,90,.22); }
.absence-cell.pending { background:rgba(232,57,110,.08); border-color:rgba(232,57,110,.22); }
.missing-planning-cell { background:rgba(232,57,110,.045); border-color:rgba(232,57,110,.18); }
@media(max-width:900px){.planning-week-list{grid-template-columns:1fr;overflow:visible}.planning-day-card{min-width:0}}

.attention-card{border-color:rgba(232,57,110,.35);box-shadow:0 14px 30px rgba(232,57,110,.08)}
.stack-form{display:grid;gap:8px;min-width:170px}.compact-input{padding:8px 10px;font-size:.9rem}.checkline{display:flex;align-items:center;gap:8px;margin:10px 0;font-weight:600}.checkline input{width:auto}.substitute-box{padding:14px;border:1px solid rgba(26,76,126,.13);border-radius:18px;background:rgba(66,155,214,.05);margin:10px 0}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-value.small{font-size:2rem}@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.grid-4{grid-template-columns:1fr}}

/* v0.13 Zeitbuchungen */
.global-timer.is-break { border-color: rgba(232,57,110,.35); background: rgba(232,57,110,.08); }
.punch-card { border: 1px solid rgba(26,76,126,.12); }
.location-button-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.location-choice { border:1px solid rgba(26,76,126,.16); background:#fff; border-radius:16px; padding:12px 16px; font-weight:700; color:#1a4c7e; cursor:pointer; box-shadow:0 6px 16px rgba(26,76,126,.08); }
.location-choice:hover { transform: translateY(-1px); border-color:#429bd6; }
.location-choice.danger { color:#b42318; border-color:rgba(180,35,24,.18); }
.time-week-grid { display:grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap:14px; margin:18px 0; }
.time-day-card { padding:16px; min-height:260px; }
.time-day-card.weekend { opacity:.72; background:linear-gradient(180deg,#fff,#f7f8fa); }
.time-day-card.today { outline:2px solid rgba(66,155,214,.35); }
.time-day-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; }
.entry-stack { display:flex; flex-direction:column; gap:8px; }
.time-entry-pill { display:flex; justify-content:space-between; gap:10px; align-items:center; border-radius:14px; padding:10px; background:rgba(26,76,126,.06); }
.time-entry-pill.break { background:rgba(232,57,110,.08); }
.time-entry-pill.absence { background:repeating-linear-gradient(45deg,#e0f2fe,#e0f2fe 4px,#bae6fd 4px,#bae6fd 8px); border:2px solid #0ea5e9; color:#0c4a6e; }
.time-entry-pill strong { display:block; font-size:13px; }
.time-entry-pill span { display:block; font-size:12px; color:#62666a; margin-top:2px; }
.time-day-foot { display:flex; justify-content:space-between; gap:8px; border-top:1px solid rgba(26,76,126,.1); margin-top:12px; padding-top:10px; font-size:12px; }
.auto-break-form { margin-top:10px; }
.small-empty { min-height:46px; }
.week-nav { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 1200px) { .time-week-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (max-width: 760px) { .time-week-grid { grid-template-columns: 1fr; } .location-choice { width:100%; } .location-button-row .inline-form { flex:1 1 100%; } }

/* v0.16 UX-Aufräumung */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}.nav-dropbtn{border:0;background:transparent;color:inherit;font:inherit;font-weight:750;padding:10px 12px;border-radius:999px;cursor:pointer}.nav-dropdown.active .nav-dropbtn,.nav-dropbtn:hover{background:rgba(26,76,126,.08);color:var(--jp-blue)}.admin-nav .nav-dropbtn{background:rgba(232,57,110,.10);color:var(--jp-pink)}.nav-menu{display:none;position:absolute;top:42px;left:0;z-index:20;min-width:230px;background:#fff;border:1px solid rgba(26,76,126,.14);box-shadow:0 16px 36px rgba(26,76,126,.14);border-radius:18px;padding:8px}.nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{display:grid;gap:4px}.nav-menu a{display:block;border-radius:12px;padding:10px 12px;background:transparent}.admin-pill{display:inline-flex;margin-left:8px;padding:2px 7px;border-radius:999px;background:rgba(232,57,110,.12);color:var(--jp-pink);font-size:11px;font-weight:800}.admin-card,.is-admin-scope{border-color:rgba(232,57,110,.28)!important;box-shadow:0 12px 28px rgba(232,57,110,.07)!important}.admin-summary .kpi-label{color:var(--jp-pink)}.dashboard-hello-card{border:1px solid rgba(26,76,126,.08)}.team-status-card{margin-top:18px}.team-status-grid{display:grid;gap:10px}.team-status-row{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(160px,.9fr) minmax(120px,.7fr);gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(26,76,126,.10);border-radius:18px;background:#fff}.calendar-time-board{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:14px;margin:18px 0}.calendar-style{min-height:280px}.empty-time-day{display:grid;gap:10px;border:1px dashed rgba(26,76,126,.20);border-radius:14px;padding:12px;background:#fbfdff;color:var(--jp-muted)}.planning-horizontal-grid{display:grid;grid-template-columns:repeat(7,minmax(210px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}.horizontal-day-card{min-width:210px}.absence-chip.pending,.absence-cell.pending{background:rgba(66,155,214,.10);border-color:rgba(66,155,214,.22);color:var(--jp-blue)}.absence-chip.pending::after{content:' · Offener Antrag';font-weight:700}.calendar-card{overflow-x:auto}.calendar-grid{min-width:980px;padding-right:22px}.global-timer-actions{flex-wrap:wrap}.global-timer.is-idle .global-timer-actions{gap:6px}.badge-warning{background:rgba(66,155,214,.12)!important;color:var(--jp-blue)!important}.time-day-card.holiday{background:#f8fafc;border-style:dashed}.time-entry-pill.break{background:rgba(232,57,110,.10);border:1px solid rgba(232,57,110,.15)}
@media(max-width:1200px){.calendar-time-board{grid-template-columns:repeat(3,minmax(220px,1fr))}.team-status-row{grid-template-columns:1fr}.planning-horizontal-grid{grid-template-columns:repeat(7,minmax(230px,1fr))}}
@media(max-width:760px){.calendar-time-board{grid-template-columns:1fr}.nav-menu{position:fixed;left:12px;right:12px;top:92px}.planning-horizontal-grid{grid-template-columns:1fr;overflow:visible}.horizontal-day-card{min-width:0}}

/* v0.17 Dashboard/Branding */
.brand-mark,
.compact-brand{
  background:url('/assets/icon-192.svg') center/contain no-repeat !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.brand-mark::after{display:none!important;}
.dashboard-hello-highlight{
  background:linear-gradient(135deg,var(--jp-blue),var(--jp-light-blue));
  color:#fff;
  border:0;
  box-shadow:0 18px 44px rgba(26,76,126,.22);
}
.dashboard-hello-highlight .kpi-label,
.dashboard-hello-highlight h1{color:#fff;}
.dashboard-hello-highlight h1{margin:4px 0 0;}
.dashboard-two-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch;margin-top:18px;}
.dashboard-two-column>.card{height:100%;margin-top:0;}
.compact-violations{gap:8px;}
/* Mobile Zeiterfassungs-Kachel: nur in der mobilen Ansicht sichtbar (Desktop nutzt die Kopfleiste) */
.stamp-mobile-wrap{display:none;margin-bottom:14px;}
.global-timer.stamp-mobile{width:100%;box-sizing:border-box;white-space:normal;flex-wrap:wrap;justify-content:space-between;gap:12px;border-radius:16px;padding:14px 16px;}
.global-timer.stamp-mobile .global-timer-actions{display:flex;flex-wrap:wrap;gap:8px;}
.global-timer.stamp-mobile .btn-mini{padding:10px 14px;font-size:14px;}
.compact-violations .violation-item{padding:12px 14px;}
.compact-team-status .section-head{margin-bottom:12px;}
.compact-team-status .team-status-grid{gap:8px;}
.compact-team-status .team-status-row{grid-template-columns:minmax(160px,1.1fr) minmax(180px,1fr);padding:10px 12px;min-height:auto;}
.compact-team-status .team-status-row.is-present{border-color:rgba(47,133,90,.25);background:rgba(47,133,90,.035);}
.badge-danger{background:rgba(232,57,110,.12)!important;color:var(--jp-pink)!important;}
.vacation-compact .muted{line-height:1.35;}
@media(max-width:980px){.dashboard-two-column{grid-template-columns:1fr}.compact-team-status .team-status-row{grid-template-columns:1fr}}


/* v0.18 Feinschliff */
.dashboard-hello-highlight{
  border-radius:28px!important;
  padding:30px 34px!important;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.26), transparent 24%),
    linear-gradient(135deg,var(--jp-blue),var(--jp-light-blue) 72%,var(--jp-pink));
  box-shadow:0 22px 56px rgba(26,76,126,.22)!important;
  overflow:hidden;
  position:relative;
}
.dashboard-hello-highlight:after{
  content:"";
  position:absolute;
  right:-38px;
  bottom:-52px;
  width:170px;
  height:170px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.dashboard-hello-highlight .kpi-label{font-size:15px;letter-spacing:.08em;}
.dashboard-hello-highlight h1{font-size:34px;margin-top:6px;}
.team-status-list{gap:0!important;}
.compact-team-status .team-status-row.single-line{
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  grid-template-columns:none!important;
  padding:7px 0!important;
  min-height:0!important;
  border:0!important;
  border-bottom:1px solid rgba(26,76,126,.10)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:14px;
}
.compact-team-status .team-status-row.single-line:last-child{border-bottom:0!important;}
.team-person-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:130px;}
.team-person-status{text-align:right;color:var(--jp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px;vertical-align:1px;}
.status-dot.present{background:#2f855a;}
.text-muted{color:var(--jp-muted)!important;}
.text-danger{color:var(--jp-pink)!important;font-weight:750;}
@media(max-width:760px){.team-person-status{white-space:normal}.compact-team-status .team-status-row.single-line{align-items:flex-start}.dashboard-hello-highlight h1{font-size:28px}}


/* v0.21 – Kalender, Planung und kompakte Aktionen */
.full-bleed-calendar,
.planning-card-v11 .planning-week-list {
    width: calc(100vw - 48px);
    margin-left: calc(50% - 50vw + 24px);
    margin-right: calc(50% - 50vw + 24px);
}

.calendar-time-board.full-bleed-calendar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.calendar-time-board.full-bleed-calendar.show-weekend {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.planning-card-v11 .planning-week-list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.planning-day-card,
.time-day-card {
    min-width: 0;
}

.planning-location-pills {
    gap: 5px;
}

.location-pill {
    padding: 6px 7px;
    gap: 4px;
    font-size: 12px;
}

.week-label {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(66,155,214,.14);
    color: #1a4c7e;
}

.compact-week-nav {
    flex-wrap: nowrap;
    gap: 6px;
}

/* Aktuelle Woche / Aktueller Monat – pink hervorgehoben */
.btn-current-period {
    background: #e8396e !important;
    color: #fff !important;
    border-color: #e8396e !important;
}
.btn-current-period:hover {
    background: #d02d5f !important;
    border-color: #d02d5f !important;
}

/* Onboarding-Badge im Team-Status */
.badge-onboarding {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(66,155,214,.15);
    color: #1a4c7e;
    vertical-align: middle;
}
.team-status-row.is-onboarding {
    opacity: .75;
}

.compact-week-nav .btn {
    min-width: auto;
    white-space: nowrap;
}

.weekend-toggle-card {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 12px;
    color: #3d3d3b;
    font-size: 14px;
}

.entry-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.entry-actions form {
    margin: 0;
}

.entry-action {
    border: 0;
    background: rgba(26,76,126,.08);
    color: #1a4c7e;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.entry-action.danger {
    background: rgba(232,57,110,.10);
    color: #e8396e;
}

.time-entry-pill {
    gap: 8px;
}

.manager-empty-cell {
    background: #f3f4f6 !important;
    color: #8a8a8a;
}


@media (max-width: 1050px) {
    .calendar-time-board.full-bleed-calendar,
    .calendar-time-board.full-bleed-calendar.show-weekend,
    .planning-card-v11 .planning-week-list {
        grid-template-columns: 1fr;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}


/* v0.25 – Absences Redesign */
.absence-vacation-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0;overflow:hidden;margin-bottom:0}
.absence-vacation-stat{padding:18px 20px;display:flex;flex-direction:column;gap:4px;border-right:1px solid rgba(26,76,126,.10)}
.absence-vacation-stat:last-child{border-right:0}
.absence-vacation-stat strong{font-size:22px;font-weight:800;font-family:Formular,"Segoe UI",sans-serif;color:var(--jp-blue);letter-spacing:-.02em}
.absence-vacation-stat.highlight{background:rgba(26,76,126,.04)}
.absence-type-pills{display:flex;flex-wrap:wrap;gap:8px}
.absence-type-pill{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--pill-color,rgba(26,76,126,.18));background:#fff;color:var(--jp-dark);border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.absence-type-pill input{position:absolute;opacity:0;pointer-events:none}
.absence-type-pill.selected{border-color:var(--pill-color,var(--jp-blue));background:rgba(26,76,126,.08);color:var(--pill-color,var(--jp-blue))}
.absence-type-pill:hover:not(.selected){border-color:var(--pill-color,rgba(26,76,126,.32));background:rgba(26,76,126,.04)}
.substitute-request-list{display:grid;gap:12px}
.substitute-request-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px;border:1px solid rgba(26,76,126,.10);border-radius:18px;background:#f8fbfd}
.substitute-request-row strong{display:block;margin-bottom:3px}
.absence-request-cards{display:grid;gap:10px;margin-top:10px}
.absence-request-card{display:grid;grid-template-columns:1.4fr 1.2fr auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--jp-border);border-radius:18px;background:#fff}
.absence-request-card.status-approved{border-left:4px solid #2f855a}
.absence-request-card.status-pending{border-left:4px solid var(--jp-light-blue)}
.absence-request-card.status-rejected{border-left:4px solid var(--jp-pink);opacity:.78}
.absence-request-card.status-cancelled{border-left:4px solid #94a3b8;opacity:.65}
.absence-request-card.status-cancel_requested{border-left:4px solid #f59e0b}
.arc-type{font-weight:800;color:var(--jp-blue);margin-bottom:3px}
.arc-dates{font-weight:600;font-size:14px}
.arc-cancel summary{cursor:pointer;font-size:13px;color:var(--jp-muted);margin-top:8px}
.arc-cancel summary:hover{color:var(--jp-pink)}
.absence-status-badge{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.absence-status-badge.status-approved{background:rgba(47,133,90,.12);color:#276749}
.absence-status-badge.status-pending{background:rgba(66,155,214,.14);color:#1a4c7e}
.absence-status-badge.status-rejected{background:rgba(232,57,110,.12);color:#9f1239}
.absence-status-badge.status-cancelled{background:#f1f5f9;color:#64748b}
.absence-status-badge.status-cancel_requested{background:rgba(245,158,11,.14);color:#92400e}
@media(max-width:980px){.absence-vacation-bar{grid-template-columns:repeat(3,1fr)}.absence-vacation-stat{border-bottom:1px solid rgba(26,76,126,.08)}}
@media(max-width:640px){.absence-vacation-bar{grid-template-columns:1fr 1fr}.absence-request-card{grid-template-columns:1fr}.substitute-request-row{flex-direction:column;align-items:flex-start}}

/* v0.24 – Time Change UI */
.time-change-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:18px;align-items:start;margin-top:4px}
.time-change-current{position:relative;display:flex;flex-direction:column;gap:14px}
.time-change-entry-display{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f8fbfd;border:1px solid rgba(26,76,126,.10);border-radius:18px}
.tce-type{font-weight:800;font-size:15px;color:var(--jp-blue)}
.tce-time span{display:block;font-size:12px;color:var(--jp-muted)}
.tce-time strong{display:block;font-size:22px;font-family:Formular,"Segoe UI",sans-serif;color:var(--jp-dark);letter-spacing:-.02em}
.tce-duration{font-size:13px}
.tce-note{font-size:13px;font-style:italic}
.time-change-arrow{position:absolute;right:-26px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--jp-muted);display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;border:1px solid var(--jp-border);border-radius:999px;z-index:1}
.time-change-form-card{background:linear-gradient(135deg,#fff,#f8fbff)}
.location-pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
@media(max-width:760px){.time-change-layout{grid-template-columns:1fr}.time-change-arrow{display:none}}

/* v0.29 – Vacation Ledger */
.vac-ledger-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--jp-border)}
.vac-ledger-row:last-child{border-bottom:0}

/* v0.28 – Monatskalender */
.month-cal-table{border-collapse:collapse;font-size:13px;min-width:100%}
.month-cal-table th,.month-cal-table td{border:1px solid var(--jp-border);padding:0}
.month-name-col{min-width:160px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 10px!important;background:#f8fbfd;position:sticky;left:0;z-index:2}
.month-day-head{width:32px;min-width:32px;max-width:32px;text-align:center;padding:4px 2px!important;background:#f8fbfd;position:relative}.month-cal-table th:last-child,.month-cal-table td:last-child{padding-right:8px!important}
.month-day-head.is-weekend{background:#f0f2f5;color:var(--jp-muted)}
.month-day-head.is-holiday{background:rgba(245,158,11,.10)}
/* Heutige Spalte dezent hervorheben (Monatsansicht) */
.month-day-head.is-today{background:rgba(26,76,126,.12);color:var(--jp-blue);font-weight:800;box-shadow:inset 0 -2px 0 var(--jp-blue)}
.month-cell.mc-today{background:rgba(26,76,126,.05);box-shadow:inset 1px 0 0 rgba(26,76,126,.28),inset -1px 0 0 rgba(26,76,126,.28)}
.day-num{display:block;font-weight:800;font-size:13px;color:var(--jp-blue)}
.day-wd{display:block;font-size:10px;color:var(--jp-muted);font-weight:500}
.month-person-cell{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;padding:6px 10px!important;background:#fff;position:sticky;left:0;z-index:1;border-right:2px solid var(--jp-border)}
.month-lead-row .month-person-cell{background:#f8fbfd}
.month-cell{width:32px;min-width:32px;text-align:center;padding:2px!important;height:34px;vertical-align:middle}
.mc-weekend{background:#f6f7f9}
.mc-holiday{background:rgba(245,158,11,.08)}
.mc-office{background:rgba(26,76,126,.10)}
.mc-homeoffice{background:rgba(66,155,214,.12)}
.mc-field{background:rgba(47,133,90,.10)}
.mc-absent{background:rgba(47,133,90,.15)}
.mc-absent-pending{background:rgba(232,57,110,.10)}
.mc-icon{font-size:14px;line-height:1}
/* Connected absence spans (item 211) */
.month-cal-table td.mc-span-start { border-right:0!important; padding-right:0!important; }
.month-cal-table td.mc-span-mid   { border-left:0!important; border-right:0!important; padding-left:0!important; padding-right:0!important; }
.month-cal-table td.mc-span-end   { border-left:0!important; padding-left:0!important; }
/* Span bar: used for start (with label), mid (no label), end (no label) */
.mc-span-cont { display:block; height:20px; border-radius:0; font-size:10px; font-weight:800; line-height:20px; padding:0 5px; overflow:hidden; white-space:nowrap; }
.mc-span-cont-start { border-radius:5px 0 0 5px; }
.mc-span-cont-end   { border-radius:0 5px 5px 0; }
.mc-legend{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:0;vertical-align:middle;flex-shrink:0}
.mc-legend.mc-office{background:#1a4c7e}
.mc-legend.mc-homeoffice{background:#429bd6}
.mc-legend.mc-field{background:#2f855a}
.mc-legend.mc-absent{background:#2f855a;opacity:.75}
.mc-legend.mc-absent-pending{background:#e8396e;opacity:.75}
.mc-legend.mc-holiday{background:#d97706}

/* v0.27 – Report Table & Badges */
.report-table{width:100%;border-collapse:collapse;font-size:14px}
.report-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--jp-border);color:var(--jp-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.report-table td{padding:12px 14px;border-bottom:1px solid var(--jp-border);vertical-align:middle}
.report-table tr:last-child td{border-bottom:0}
.report-table tr:hover td{background:rgba(26,76,126,.03)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(26,76,126,.12);color:var(--jp-blue)}
.badge-danger{background:rgba(232,57,110,.14);color:#9f1239}
.badge-warning{background:rgba(245,158,11,.15);color:#92400e}
.text-positive{color:#2f855a}.text-danger{color:#dc2626}

/* v0.26 – Birthday */
.birthday-banner{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,rgba(232,57,110,.08),rgba(245,158,11,.06));border:1.5px solid rgba(232,57,110,.25);border-radius:20px;padding:18px 22px;margin-bottom:14px;box-shadow:0 6px 28px rgba(232,57,110,.10)}
.birthday-emoji{font-size:40px;line-height:1;flex:0 0 auto}
.birthday-title{font-family:Formular,'Segoe UI',sans-serif;font-size:18px;font-weight:800;color:var(--jp-dark);margin-bottom:3px}
.birthday-sub{font-size:14px;color:var(--jp-muted);font-weight:500}

/* v0.23 – Weekend Slide & Planning */
@keyframes slideInRight{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
.calendar-time-board.show-weekend .time-day-card.weekend{animation:slideInRight .28s cubic-bezier(.22,1,.36,1) both}
.planning-week-list.show-weekend .planning-day-card.is-weekend{animation:slideInRight .28s cubic-bezier(.22,1,.36,1) both}
.planning-week-list:not(.show-weekend){grid-template-columns:repeat(5,minmax(0,1fr))!important}
.planning-week-list.show-weekend{grid-template-columns:repeat(7,minmax(0,1fr))!important}
.office-day-warning-prominent{background:rgba(232,57,110,.14)!important;color:#9f1239!important;font-weight:800;border:1.5px solid rgba(232,57,110,.32)!important;display:flex;align-items:center;gap:6px}
.switch-toggle-card{border:0;background:transparent;box-shadow:none;padding:0}

/* v0.22 – echte Korrekturen */
.switch-line{display:flex;align-items:center;gap:10px;justify-content:flex-end;cursor:pointer;font-weight:650;color:var(--jp-blue)}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#d6dee7;border-radius:999px;transition:.2s}.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.18)}.switch input:checked+.slider{background:var(--jp-blue)}.switch input:checked+.slider:before{transform:translateX(20px)}
.entry-main{min-width:0}.entry-request-badge{display:inline-flex;margin-top:5px;border-radius:999px;padding:3px 7px;background:rgba(66,155,214,.13);color:var(--jp-blue);font-size:11px;font-style:normal;font-weight:800}.time-entry-pill.has-open-request{border:1px solid rgba(66,155,214,.26);background:rgba(66,155,214,.07)}.entry-action.disabled{opacity:.45;cursor:not-allowed;background:#edf1f5;color:#7b8794}.compact-entry-actions{gap:3px}.compact-entry-actions .entry-action{padding:4px 7px;font-size:11px}.day-violation-list{display:grid;gap:5px;margin:8px 0}.day-violation{border-radius:12px;padding:7px 9px;font-size:12px;line-height:1.25;background:rgba(232,57,110,.08);color:#9f1239}.day-violation.info{background:rgba(66,155,214,.10);color:var(--jp-blue)}.add-more-time{background:transparent;border-style:solid;opacity:.88}.compact-info-card{margin-top:18px}.closed-requests{margin-top:14px}.closed-requests summary{cursor:pointer;font-weight:800;color:var(--jp-blue);padding:10px 0}.info-box{border:1px solid rgba(26,76,126,.12);background:#f8fbfd;border-radius:16px;padding:12px 14px}.planning-clean-form{padding:0;background:transparent;border:0;box-shadow:none}.planning-clean-form .planning-week-list{background:transparent}.warning-soft{background:rgba(66,155,214,.10)!important;color:var(--jp-blue)!important}.office-day-warning{background:rgba(232,57,110,.10)!important;color:#9f1239!important;font-weight:750}.planning-card-v11 .planning-week-list{align-items:stretch}.planning-day-card{overflow:hidden}.planning-location-pills{gap:4px}.location-pill{padding:5px 6px;font-size:11px}

/* v0.28 – Monthly Times Table */
.month-times-table { font-size:14px; }
.month-times-table th { white-space:nowrap; font-size:12px; }
.month-times-table td { padding:9px 14px; vertical-align:middle; }
.month-times-table tr.weekend-row td { background:rgba(26,76,126,.03); color:var(--jp-muted); }
.month-times-table tr.holiday-row td { background:rgba(245,158,11,.07); color:#92400e; }
.month-times-table tr.today-row td { background:rgba(66,155,214,.09); font-weight:600; }
.month-times-table tr.today-row td:first-child { border-left:3px solid var(--jp-light-blue); }
.month-times-table td.day-abbr { font-weight:800; font-size:12px; color:var(--jp-muted); width:28px; }
.progress.progress-mini { height:4px; border-radius:3px; min-width:80px; max-width:120px; background:rgba(26,76,126,.10); }
.progress.progress-mini span { height:4px; border-radius:3px; background:linear-gradient(90deg,var(--jp-blue),var(--jp-light-blue)); display:block; }
.progress.progress-mini.is-complete span { background:linear-gradient(90deg,#10b981,#059669); }
.text-muted { color:var(--jp-muted); }

/* v0.29 – Monatskalender Kürzel-Chips */
.mc-chip { display:inline-flex; align-items:center; justify-content:center; width:22px; height:20px; border-radius:5px; font-size:10px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.mc-chip-office     { background:rgba(26,76,126,.22);   color:#1a4c7e; }
.mc-chip-homeoffice { background:rgba(66,155,214,.28);  color:#0e6091; }
.mc-chip-seminar    { background:rgba(16,185,129,.22);  color:#065f46; }
.mc-chip-field      { background:rgba(47,133,90,.26);   color:#2f6b3a; }
.mc-chip-absent     { background:rgba(16,185,129,.24);  color:#065f46; }
.mc-chip-absent-pending { background:rgba(245,158,11,.22); color:#92400e; }
.mc-chip-holiday    { background:rgba(245,158,11,.20);  color:#78350f; }
.month-cell { text-align:center; vertical-align:middle; }

/* v0.30 – Planning second slot */
.second-slot-wrap .second-slot-toggle { transition:background .15s; }
.second-slot-body { border-top:1px dashed var(--jp-border); padding-top:8px; margin-top:6px; }
.second-loc-pills { display:flex; flex-wrap:wrap; gap:4px; }

/* v0.31 – User list tabs */
.tab-bar { display:flex; gap:4px; border-bottom:2px solid var(--jp-border); }
.tab-link { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-size:14px; font-weight:500; color:var(--jp-text-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:4px 4px 0 0; transition:color .15s, border-color .15s; }
.tab-link:hover { color:var(--jp-blue); }
.tab-link.active { color:var(--jp-blue); border-bottom-color:var(--jp-blue); background:none; }
.tab-count { background:var(--jp-border); color:var(--jp-text-muted); font-size:11px; font-weight:600; padding:1px 6px; border-radius:10px; }
.tab-link.active .tab-count { background:var(--jp-blue-light,#e8f0fb); color:var(--jp-blue); }

/* ── Dark mode – Mobile/System ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Topbar bleibt hell – aber Logo-Icon + Text für dunkle Hintergründe anpassen */
  .compact-topbar {
    background: rgba(20,42,72,.93) !important;
    border-bottom: 1px solid rgba(66,155,214,.20) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.30) !important;
    backdrop-filter: blur(20px) !important;
  }
  .app-title  { color: #e0eaf6 !important; }
  .top-subtitle { color: rgba(160,190,220,.75) !important; }
  /* Weißes Logo (heller Filter) für das Icon im dunklen Topbar */
  .brand-mark, .compact-brand {
    filter: brightness(0) invert(1) !important;
    opacity: .92 !important;
  }
  /* Hamburger-Striche weiß */
  .hamburger-btn span { background: #e0eaf6 !important; }
  /* Navigation (wenn offen auf Mobile) bleibt hell – bessere Lesbarkeit */
  .nav-links {
    background: rgba(20,42,72,.97) !important;
    border-color: rgba(66,155,214,.25) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.4) !important;
  }
  .nav-links a, .nav-dropbtn { color: #cfe0f3 !important; }
  .nav-links a.active, .compact-nav a.active { background: rgba(66,155,214,.28) !important; color: #fff !important; }
  .nav-links a:hover { background: rgba(66,155,214,.15) !important; }
  .nav-menu { background: rgba(15,35,65,.98) !important; border-color: rgba(66,155,214,.20) !important; }
  .nav-menu a { color: #cfe0f3 !important; }
  .nav-menu a:hover { background: rgba(66,155,214,.18) !important; }
  /* Global timer im dunklen Topbar */
  .global-timer { background: rgba(30,55,90,.9) !important; border-color: rgba(66,155,214,.25) !important; color: #cfe0f3 !important; }
  .global-timer-state { color: #cfe0f3 !important; }
  .mini-timer { color: #7ec8e3 !important; }
}

/* ── Notifications Bell ─────────────────────────────────────────────────────── */
.notif-bell-wrap { position:relative; display:inline-flex; align-items:center; }
.notif-bell-btn { background:none; border:none; cursor:pointer; padding:6px; border-radius:50%; color:var(--jp-text); font-size:20px; line-height:1; transition:background .15s; display:flex; align-items:center; }
.notif-bell-btn:hover { background:rgba(26,76,126,.08); }
.notif-badge { position:absolute; top:0; right:0; transform:translate(40%,-40%); background:#ef4444; color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; pointer-events:none; z-index:10; }
.notif-dropdown { position:absolute; top:calc(100% + 6px); right:0; background:#fff; border-radius:16px; box-shadow:0 8px 40px rgba(26,76,126,.18); min-width:320px; max-width:380px; z-index:8000; overflow:hidden; }
.notif-dropdown-head { padding:12px 16px 10px; border-bottom:1px solid var(--jp-border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:space-between; }
.notif-dropdown-head strong { font-size:14px; }
.notif-tab-bar { display:flex; gap:2px; background:rgba(26,76,126,.07); border-radius:10px; padding:3px; }
.notif-tab { background:none; border:none; border-radius:8px; padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; color:var(--jp-muted); transition:background .15s, color .15s; font-family:inherit; }
.notif-tab.active { background:#fff; color:var(--jp-blue); box-shadow:0 1px 4px rgba(26,76,126,.15); }
.notif-list { max-height:380px; overflow-y:auto; }
.notif-item { padding:11px 16px; border-bottom:1px solid var(--jp-border); cursor:pointer; transition:background .12s; }
.notif-item:hover { background:rgba(26,76,126,.04); }
.notif-item.is-unread { background:rgba(26,76,126,.05); border-left:3px solid var(--jp-blue); }
.notif-item-who { display:block; font-size:11px; font-weight:700; color:var(--jp-blue); margin-bottom:2px; opacity:.8; }
.notif-item-title { font-size:13px; font-weight:600; color:var(--jp-text); }
.notif-item-msg { font-size:12px; color:var(--jp-muted); margin-top:2px; line-height:1.4; }
.notif-item-time { font-size:11px; color:var(--jp-muted); margin-top:3px; }
.notif-empty { padding:28px 16px; text-align:center; color:var(--jp-muted); font-size:13px; }
.notif-mark-read { font-size:12px; color:var(--jp-blue); cursor:pointer; font-weight:600; white-space:nowrap; flex-shrink:0; }
.notif-mark-read:hover { text-decoration:underline; }

/* ── Audit Log ──────────────────────────────────────────────────────────────── */
.audit-row { font-size:13px; }
.audit-action { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:rgba(26,76,126,.1); color:#1a4c7e; }
.audit-action.time_start, .audit-action.time_stop { background:rgba(16,185,129,.1); color:#065f46; }
.audit-action.absence_submitted, .audit-action.absence_decided { background:rgba(245,158,11,.1); color:#92400e; }
.audit-action.user_edit, .audit-action.admin { background:rgba(139,92,246,.1); color:#4c1d95; }
.audit-action.delete { background:rgba(239,68,68,.1); color:#991b1b; }

/* ── Gamification ───────────────────────────────────────────────────────────── */
.streak-banner { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#fef3c7,#fffbeb); border:1.5px solid #f59e0b; border-radius:14px; padding:12px 18px; margin-bottom:16px; }
.streak-flame { font-size:28px; }
.streak-info strong { font-size:15px; color:#92400e; }
.streak-info div { font-size:13px; color:#78350f; }
.achievement-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.achievement-chip { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border-radius:14px; background:rgba(26,76,126,.05); border:1.5px solid rgba(26,76,126,.12); font-size:12px; text-align:center; transition:transform .15s; cursor:default; }
.achievement-chip.earned { background:linear-gradient(135deg,rgba(26,76,126,.08),rgba(139,92,246,.08)); border-color:rgba(139,92,246,.3); }
.achievement-chip:hover { transform:translateY(-2px); }
.achievement-chip .ach-icon { font-size:28px; }
.achievement-chip .ach-name { font-weight:700; color:var(--jp-text); }
.achievement-chip .ach-desc { color:var(--jp-muted); }

/* ── Stats Page ─────────────────────────────────────────────────────────────── */
.stats-chart-wrap { position:relative; height:200px; margin:8px 0; }
.stats-bar-grid { display:flex; align-items:flex-end; gap:4px; height:160px; padding:0 4px; }
.stats-bar { flex:1; border-radius:6px 6px 0 0; min-height:4px; transition:height .4s cubic-bezier(.34,1.56,.64,1); cursor:pointer; position:relative; }
.stats-bar:hover::after { content:attr(title); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#1e293b; color:#fff; font-size:11px; padding:3px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; z-index:100; }
.stats-bar.positive { background:linear-gradient(to top,#10b981,#34d399); }
.stats-bar.negative { background:linear-gradient(to top,#ef4444,#f87171); }
.stats-labels { display:flex; gap:4px; padding:0 4px; }
.stats-label { flex:1; text-align:center; font-size:10px; color:var(--jp-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-kpi-row { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.stats-kpi { flex:1; min-width:100px; background:rgba(26,76,126,.05); border-radius:12px; padding:12px; text-align:center; }
.stats-kpi .val { font-size:22px; font-weight:800; color:var(--jp-blue); }
.stats-kpi .lbl { font-size:11px; color:var(--jp-muted); margin-top:2px; }

/* ── Drag-Drop Calendar ─────────────────────────────────────────────────────── */
.calendar-cell.drag-over { outline:2px dashed var(--jp-blue); background:rgba(26,76,126,.08) !important; }
.calendar-cell[draggable="true"] { cursor:grab; }
.calendar-cell[draggable="true"]:active { cursor:grabbing; opacity:.7; }

@media (prefers-color-scheme: dark) {
  .notif-dropdown { background:#1e2d42; }
  .arbzg-dialog { background:#1e2d42; color:#e0eaf6; }
  .arbzg-banner { background:linear-gradient(135deg,rgba(120,53,15,.3),rgba(146,64,14,.2)); border-color:#b45309; }
  .notif-item.is-unread { background:rgba(26,76,126,.15); }
}

/* ── Compliment Banner ──────────────────────────────────────────────────────── */
.compliment-banner {
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,#d1fae5,#a7f3d0);
  border:1px solid #6ee7b7; border-radius:12px;
  padding:12px 16px; margin-bottom:14px;
  animation:slideDown .35s ease;
}
.compliment-banner-icon { font-size:1.5rem; flex-shrink:0; }
.compliment-banner-text { flex:1; font-weight:500; color:#065f46; font-size:14px; }
.compliment-banner-close {
  background:none; border:none; color:#065f46; opacity:.6;
  cursor:pointer; font-size:16px; padding:0 4px; line-height:1;
}
.compliment-banner-close:hover { opacity:1; }
@media (prefers-color-scheme: dark) {
  .compliment-banner { background:linear-gradient(135deg,rgba(6,95,70,.4),rgba(16,185,129,.15)); border-color:#059669; }
  .compliment-banner-text { color:#a7f3d0; }
  .compliment-banner-close { color:#a7f3d0; }
}

/* ── Task Module ─────────────────────────────────────────────────────────────── */
.task-item-row { padding:8px 0; border-bottom:1px solid var(--jp-border); display:flex; align-items:center; justify-content:space-between; }
.task-item-row:last-child { border-bottom:none; }
.task-item-row.overdue { color:#dc2626; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-blue { background:#dbeafe; color:#1e40af; }
.badge-pink { background:#fce7f3; color:#9d174d; }

/* ── Notification dropdown: fix position on desktop ────────────────────────── */
@media (min-width:769px) {
  .notif-dropdown { left:0; right:auto; }
}

/* ── JP Custom Date Picker ──────────────────────────────────────────────────── */
.jp-datepicker-wrap { position:relative; display:block; }
.jp-datepicker-display {
  cursor:pointer !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a4c7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  padding-right:44px !important;
  user-select:none;
  caret-color:transparent;
}
.jp-datepicker-display:focus { outline:none; box-shadow:0 0 0 4px rgba(66,155,214,.2); border-color:var(--jp-light-blue); }
.jp-dp-popup {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:4000;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(26,76,126,.22), 0 4px 20px rgba(26,76,126,.1);
  padding:18px;
  min-width:288px;
  border:1px solid rgba(219,228,238,.8);
  animation:dpFadeIn .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dpFadeIn { from{opacity:0;transform:translateY(-6px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.jp-dp-popup.align-right { left:auto; right:0; }
.jp-dp-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.jp-dp-title {
  font-weight:800; font-size:15px; color:var(--jp-blue);
  cursor:pointer;
}
.jp-dp-nav {
  background:none; border:none; cursor:pointer; width:32px; height:32px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--jp-blue); transition:background .15s;
  line-height:1; padding:0;
}
.jp-dp-nav:hover { background:rgba(26,76,126,.1); }
.jp-dp-nav:disabled { color:#cbd5e1; cursor:default; }
.jp-dp-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr);
  margin-bottom:6px;
}
.jp-dp-weekdays span {
  text-align:center; font-size:11px; font-weight:700; color:var(--jp-muted);
  padding:2px 0; text-transform:uppercase; letter-spacing:.04em;
}
.jp-dp-days {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.jp-dp-day {
  background:none; border:none; cursor:pointer; border-radius:10px;
  font-size:13px; padding:7px 2px; text-align:center; color:var(--jp-dark);
  transition:background .12s, color .12s; line-height:1; font-family:inherit;
}
.jp-dp-day:hover { background:rgba(66,155,214,.14); color:var(--jp-blue); }
.jp-dp-day.today {
  font-weight:800;
  box-shadow:inset 0 0 0 2px var(--jp-blue);
  color:var(--jp-blue);
}
.jp-dp-day.selected {
  background:linear-gradient(135deg, var(--jp-blue), var(--jp-light-blue));
  color:#fff !important;
  font-weight:700;
  box-shadow:0 4px 12px rgba(26,76,126,.3);
}
.jp-dp-day.selected.today { box-shadow:0 4px 12px rgba(26,76,126,.3); }
.jp-dp-day.other-month { color:#cbd5e1; }
.jp-dp-day.other-month:hover { background:rgba(0,0,0,.04); color:#94a3b8; }
.jp-dp-day.weekend { color:var(--jp-muted); }
.jp-dp-footer {
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--jp-border);
  display:flex; justify-content:center;
}
.jp-dp-today-btn {
  background:none; border:1px solid var(--jp-border); border-radius:10px;
  padding:6px 16px; font-size:12px; font-weight:700; cursor:pointer;
  color:var(--jp-blue); transition:background .12s; font-family:inherit;
}
.jp-dp-today-btn:hover { background:rgba(26,76,126,.08); }
.jp-dp-ym-picker {
  display:none; gap:8px; flex-direction:column; max-height:220px;
  overflow-y:auto; padding:4px 0;
}
.jp-dp-ym-picker.visible { display:flex; }
.jp-dp-ym-item {
  background:none; border:none; border-radius:10px; padding:8px 12px;
  cursor:pointer; font-size:14px; text-align:left; color:var(--jp-dark);
  transition:background .1s; font-family:inherit;
}
.jp-dp-ym-item:hover { background:rgba(66,155,214,.14); }
.jp-dp-ym-item.active { font-weight:800; color:var(--jp-blue); background:rgba(26,76,126,.08); }
@media (prefers-color-scheme: dark) {
  .jp-dp-popup { background:#1e2d42; border-color:#2d4460; }
  .jp-dp-day { color:#cfe0f3; }
  .jp-dp-day:hover { background:rgba(66,155,214,.2); }
  .jp-dp-day.other-month { color:#4a6080; }
  .jp-dp-title { color:#7ec8e3; }
  .jp-dp-weekdays span { color:#7094b8; }
  .jp-dp-footer { border-color:#2d4460; }
  .jp-dp-today-btn { border-color:#2d4460; color:#7ec8e3; }
}

/* ── Timeline View (v2) ──────────────────────────────────────────────────────── */
.timeline-wrap {
  overflow:auto;
  max-height:calc(100vh - 180px);
  border-radius:24px;
  border:1px solid var(--jp-border);
  background:#fff;
  box-shadow:0 22px 60px rgba(26,76,126,.08);
}
.timeline-grid { overflow:visible; }
.timeline-grid {
  display:grid;
  grid-template-columns:56px repeat(var(--tl-cols, 5), minmax(80px, 1fr));
  min-width:640px;
  position:relative;
}
.tl-corner {
  background:#f8fafc; border-bottom:2px solid var(--jp-border); border-right:1px solid var(--jp-border);
  position:sticky; top:0; left:0; z-index:20; opacity:1;
}
.tl-day-header {
  padding:12px 8px 10px;
  text-align:center;
  background:#f8fafc;
  border-bottom:2px solid var(--jp-border);
  border-left:1px solid var(--jp-border);
  font-size:12px;
  line-height:1.3;
  position:sticky; top:0; z-index:15;
  opacity:1;
}
.tl-day-header strong { display:block; font-size:14px; color:var(--jp-blue); }
.tl-day-header.is-today { background:linear-gradient(180deg,#dbeafe,#eff6ff); }
.tl-day-header.is-today strong { color:var(--jp-pink); }
.tl-day-header.is-weekend { background:#fafafa; }
.tl-day-header small { color:var(--jp-muted); font-size:11px; }
.tl-time-col { background:#f8fafc; border-right:1px solid var(--jp-border); position:sticky; left:0; z-index:10; }
.tl-hour-label {
  position:absolute; left:0; right:0;
  font-size:10px; font-weight:700; color:#94a3b8;
  text-align:center; transform:translateY(-7px);
  pointer-events:none;
}
.tl-body-col {
  position:relative;
  border-left:1px solid var(--jp-border);
}
.tl-body-col.is-today { background:rgba(26,76,126,.025); }
.tl-hour-line {
  position:absolute; left:0; right:0;
  border-top:1px solid rgba(219,228,238,.7);
}
.tl-hour-line.major { border-top-color:var(--jp-border); }
.tl-half-line {
  position:absolute; left:0; right:0;
  border-top:1px dashed rgba(219,228,238,.5);
}
.tl-entry {
  position:absolute; left:2px; right:2px;
  border-radius:8px;
  padding:3px 6px;
  font-size:11px;
  line-height:1.3;
  overflow:hidden;
  cursor:default;
  z-index:2;
  transition:filter .15s, opacity .15s;
  box-sizing:border-box;
  user-select:none;
}
.tl-entry[draggable="true"] { cursor:grab; }
.tl-entry[draggable="true"]:active { cursor:grabbing; }
.tl-entry:hover { filter:brightness(0.93); z-index:10; }
.tl-entry.tl-work {
  background:linear-gradient(135deg, #1a4c7e, #2563a8);
  color:#fff;
  box-shadow:0 2px 8px rgba(26,76,126,.3);
}
.tl-entry.tl-work.homeoffice { background:linear-gradient(135deg,#0f766e,#0d9488); }
.tl-entry.tl-work.seminar { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
.tl-entry.tl-work.mobile { background:linear-gradient(135deg,#b45309,#d97706); }
.tl-entry.tl-break {
  background:rgba(219,228,238,.8);
  color:var(--jp-muted);
  border:1px solid var(--jp-border);
}
.tl-entry.tl-running { animation:tl-pulse 2s ease-in-out infinite; }
@keyframes tl-pulse { 0%,100%{opacity:1} 50%{opacity:.75} }
.tl-entry strong { display:block; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-entry span { font-size:10px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.tl-now-line {
  position:absolute; left:0; right:0; z-index:5;
  pointer-events:none;
}
.tl-now-line::before {
  content:''; display:block; height:2px;
  background:linear-gradient(to right, #e8396e, rgba(232,57,110,.3));
}
.tl-now-dot {
  position:absolute; left:-4px; top:-4px;
  width:10px; height:10px; border-radius:50%;
  background:#e8396e;
}
.tl-current-time-badge {
  position:sticky; top:0; left:0;
  display:inline-block; font-size:10px; font-weight:700;
  background:#e8396e; color:#fff;
  padding:2px 6px; border-radius:6px; margin-left:2px;
  line-height:1.4;
}
@media(max-width:700px) {
  .timeline-grid { grid-template-columns:44px repeat(var(--tl-cols,5), minmax(60px,1fr)); }
  .tl-entry { font-size:10px; padding:2px 4px; }
}

/* ── Timeline context menu ───────────────────────────────────────────────────── */
.tl-ctx-menu {
  position:fixed; z-index:9500; display:none;
  background:#fff; border-radius:14px;
  box-shadow:0 12px 40px rgba(26,76,126,.22), 0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(219,228,238,.9);
  min-width:190px; padding:6px;
  animation:tl-ctx-in .15s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tl-ctx-in { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
.tl-ctx-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--jp-dark);
  cursor:pointer; transition:background .12s;
  text-decoration:none; border:none; background:none; width:100%;
  font-family:inherit; text-align:left;
}
.tl-ctx-item:hover { background:rgba(26,76,126,.08); color:var(--jp-blue); }
.tl-ctx-item.danger:hover { background:rgba(232,57,110,.08); color:#e8396e; }
.tl-ctx-sep { height:1px; background:var(--jp-border); margin:4px 0; }

/* ── Timeline drag ghost ─────────────────────────────────────────────────────── */
.tl-drop-target { background:rgba(26,76,126,.07) !important; }
.tl-drag-ghost {
  position:fixed; pointer-events:none; z-index:9000;
  border-radius:8px; padding:4px 8px; font-size:11px; font-weight:700;
  background:linear-gradient(135deg,#1a4c7e,#2563a8); color:#fff;
  box-shadow:0 8px 24px rgba(26,76,126,.35); opacity:.88;
  white-space:nowrap;
}
.tl-drop-indicator {
  position:absolute; left:3px; right:3px; border-radius:8px;
  background:rgba(232,57,110,.18); border:2px dashed #e8396e;
  pointer-events:none; z-index:8; min-height:8px;
  display:flex; align-items:flex-start; padding:3px 6px;
}
.tl-drop-time {
  font-size:10px; font-weight:700; color:#e8396e; line-height:1.2;
  white-space:nowrap; pointer-events:none;
}
.tl-entry.tl-dragging { opacity:.4; cursor:grabbing; }

/* ── Timeline day error state ────────────────────────────────────────────────── */
.tl-day-header.has-violation { background:rgba(220,38,38,.07); }
.tl-day-header.has-violation strong { color:#dc2626; }
.tl-day-header .tl-viol-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#ef4444; margin-left:4px; vertical-align:middle;
  box-shadow:0 0 0 2px rgba(239,68,68,.25);
}
.tl-day-header.missing-entry { background:rgba(245,158,11,.07); }
.tl-day-header.missing-entry strong { color:#b45309; }
.badge-yellow { background:#fef9c3; color:#854d0e; }

/* ── Admin menu grouped sections ─────────────────────────────────────────────── */
.nav-menu-section {
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--jp-muted); padding:8px 12px 3px; pointer-events:none; cursor:default;
}
.admin-grouped-menu { min-width:240px; }
.nav-menu-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:#ef4444; color:#fff; font-size:10px; font-weight:800;
  padding:0 5px; border-radius:999px; margin-left:6px; min-width:16px; height:16px;
}
/* ── Profile pictures in admin user list ─────────────────────────────────────── */
.user-list-avatar {
  width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:1px solid var(--jp-border); vertical-align:middle; margin-right:6px;
}

/* ── v0.30 – Holiday highlights in timeline & planning ───────────────────────── */
.tl-day-header.is-holiday { background:rgba(245,158,11,.13); }
.tl-day-header.is-holiday strong { color:#92400e; }
.tl-body-col.is-holiday { background:rgba(245,158,11,.06); }
.planning-day-card.is-holiday { background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.38); }
.planning-day-card.is-holiday .planning-day-head em { color:#92400e; font-style:normal; font-weight:700; }

/* ── Birthday indicator in month calendar headers ──────────────────────────── */
.month-day-head .birthday-indicator { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); font-size:9px; line-height:1; pointer-events:none; z-index:1; }

/* ── Substitute photo picker ────────────────────────────────────────────────── */
.sub-picker { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.sub-picker.single-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
.sub-pick-btn { display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid var(--jp-border); border-radius:14px; padding:6px 8px; background:#fff; cursor:pointer; font-size:10px; font-weight:600; color:var(--jp-dark); text-align:center; transition:border-color .15s, box-shadow .15s, background .15s; min-width:58px; max-width:70px; line-height:1.2; flex-shrink:0; }
.sub-pick-btn:hover { border-color:var(--jp-light-blue); box-shadow:0 4px 12px rgba(66,155,214,.15); background:#f7fbff; }
.sub-pick-btn.selected { border-color:var(--jp-blue); background:rgba(26,76,126,.07); box-shadow:0 4px 14px rgba(26,76,126,.18); color:var(--jp-blue); }
.sub-pick-btn img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--jp-border); display:block; }
.sub-pick-btn.selected img { border-color:var(--jp-blue); }

/* ── App footer ─────────────────────────────────────────────────────────────── */
.app-footer { text-align:center; font-size:12px; color:var(--jp-muted,#6b7280); padding:18px 16px 28px; margin-top:24px; border-top:1px solid var(--jp-border,#e5e7eb); }
.app-footer a { color:inherit; text-decoration:underline; opacity:.7; }
.app-footer a:hover { opacity:1; }

/* ── Button size variants ────────────────────────────────────────────────────── */
.btn-sm { padding:7px 14px; font-size:13px; border-radius:10px; }
.btn-xs { padding:4px 10px; font-size:11px; border-radius:8px; font-weight:700; }

/* ── Violation acknowledge button ────────────────────────────────────────────── */
.violation-item { position:relative; }

/* ── Timeline entry resize handle (item 254) ─────────────────────────────────── */
.tl-resize-handle {
  position:absolute; bottom:0; left:0; right:0; height:8px;
  cursor:ns-resize; border-radius:0 0 6px 6px;
  background:linear-gradient(transparent, rgba(0,0,0,.12));
  z-index:2;
}
.tl-resize-handle:hover { background:linear-gradient(transparent, rgba(0,0,0,.25)); }
.tl-entry.tl-resizing { opacity:.7; cursor:ns-resize; }