#urlaub-app-root{
  --bg:#F3F6F6; --surface:#FFFFFF; --ink:#1D2B2E; --ink-soft:#5C7076; --ink-faint:#94A5A9;
  --line:#DCE5E5; --line-strong:#C3D0D0;
  --accent:#0F6E63; --accent-dark:#0A4F47; --accent-soft:#E1F0EC;
  --partner:#0F6E63; --partner-soft:#E1F0EC;
  --angestellt:#3B5A78; --angestellt-soft:#E7EEF4;
  --betrachter:#9A5B2E; --betrachter-soft:#F3E6D8;
  --weekend:#E9EDED; --holiday:#F7DCDA; --holiday-text:#8B3A34;
  --ferien-wash:#FBF0C4; --ferien-border:#D8B84A;
  --locked-pattern:#EEF2F2; --danger:#B3261E; --danger-soft:#F6D2CE;
  --urlaub:#2457C5; --urlaub-bg:#DCE6FA;
  --ueberstd:#0D8A7B; --ueberstd-bg:#D6F0EA;
  --krank:#C23B32; --krank-bg:#F8DEDB;
  --visite:#B9741E; --visite-bg:#F5E4CB;
  --fortbild:#7247A8; --fortbild-bg:#EBE1F5;
  --font-display:'Space Grotesk','Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  font-family:var(--font-body); font-size:13px; line-height:1.4; color:var(--ink);
}
#urlaub-app-root *{box-sizing:border-box;}
#urlaub-app-root h1,#urlaub-app-root h2,#urlaub-app-root h3{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
#urlaub-app-root button{font-family:var(--font-body); cursor:pointer;}
#urlaub-app-root input,#urlaub-app-root select{font-family:var(--font-body);}

#urlaub-app-root .topbar{background:var(--accent-dark); color:#F0F7F5; padding:14px 22px 12px; position:sticky; top:0; z-index:40; box-shadow:0 2px 10px rgba(10,40,36,0.18);}
#urlaub-app-root .topbar-inner{max-width:1400px; margin:0 auto;}
#urlaub-app-root .topbar-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
#urlaub-app-root .topbar-title h1{font-size:18px; font-weight:700; color:#fff; margin-right:2px;}
#urlaub-app-root .toolbar-extra{max-height:0; overflow:hidden; transition:max-height .2s ease;}
#urlaub-app-root .toolbar-extra.open{max-height:600px;}
#urlaub-app-root .toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px;}
#urlaub-app-root .toolbar label{font-size:11px; color:#B9D8D1; display:flex; flex-direction:column; gap:3px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em;}
#urlaub-app-root .toolbar select, #urlaub-app-root .toolbar input[type=number]{background:#0F5A51; border:1px solid #1C7A6E; color:#fff; border-radius:6px; padding:6px 8px; font-size:13px;}
#urlaub-app-root .pillbtn{background:transparent; border:1px solid #2C8A7D; color:#DCF3ED; border-radius:20px; padding:6px 14px; font-size:12px; font-weight:500;}
#urlaub-app-root .pillbtn:hover{background:#136155;}
#urlaub-app-root .shared-note{font-size:11px; color:#9FC9C0; margin-top:8px; max-width:760px;}
#urlaub-app-root .session-badge{font-size:12px; color:#DCF3ED; display:flex; align-items:center; gap:6px;}
#urlaub-app-root .session-badge .adm{font-family:var(--font-mono); font-size:9px; background:#F0B429; color:#4A3300; padding:1px 6px; border-radius:8px; font-weight:700;}

#urlaub-app-root .wrap{max-width:1400px; margin:0 auto; padding:20px 22px 80px;}
#urlaub-app-root .panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:18px;}
#urlaub-app-root .panel-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; cursor:pointer;}
#urlaub-app-root .panel-head h2{font-size:14px; font-weight:600;}
#urlaub-app-root .panel-head .chev{color:var(--ink-faint); font-size:12px; font-family:var(--font-mono);}
#urlaub-app-root .panel-body.collapsed{display:none;}
#urlaub-app-root #closedYearBanner{background:var(--danger-soft); color:var(--danger); border:1px solid #E3A79F; border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:12px; display:none;}

#urlaub-app-root .legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
#urlaub-app-root .legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);}
#urlaub-app-root .swatch{width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,0.08);}

#urlaub-app-root .doc-groups{display:flex; gap:22px; flex-wrap:wrap;}
#urlaub-app-root .doc-group{flex:1; min-width:280px;}
#urlaub-app-root .doc-group h3{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:8px; font-weight:600;}
#urlaub-app-root .doc-row{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
#urlaub-app-root .doc-row .tag{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
#urlaub-app-root .doc-row input[type=text]{flex:1; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:13px;}
#urlaub-app-root .doc-row input[type=number]{width:56px; border:1px solid var(--line); border-radius:6px; padding:6px 6px; font-size:12px; text-align:center; font-family:var(--font-mono);}
#urlaub-app-root .doc-row .anspruch-label{font-size:10px; color:var(--ink-faint); font-family:var(--font-mono);}
#urlaub-app-root .doc-row .rm{border:none; background:none; color:var(--danger); font-size:16px; line-height:1; padding:2px 6px;}
#urlaub-app-root .addbtn{margin-top:6px; border:1px dashed var(--line-strong); background:none; color:var(--ink-soft); border-radius:6px; padding:6px 10px; font-size:12px;}
#urlaub-app-root .addbtn:hover{border-color:var(--accent); color:var(--accent);}
#urlaub-app-root .addbtn:disabled{opacity:.4; cursor:not-allowed;}

#urlaub-app-root .ferien-list{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
#urlaub-app-root .ferien-row{display:flex; gap:8px; align-items:center; font-size:12px;}
#urlaub-app-root .ferien-chip{width:12px; height:12px; border-radius:3px; background:var(--ferien-wash); border:1px solid var(--ferien-border); flex:0 0 auto;}
#urlaub-app-root .ferien-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-top:1px dashed var(--line); padding-top:10px;}
#urlaub-app-root .ferien-form input{border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:12px;}
#urlaub-app-root .ferien-form button{background:var(--accent); color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600;}

#urlaub-app-root table.summary{border-collapse:collapse; width:100%; font-size:12px;}
#urlaub-app-root table.summary th{text-align:left; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink-faint); padding:6px 10px; border-bottom:1px solid var(--line-strong);}
#urlaub-app-root table.summary td{padding:6px 10px; border-bottom:1px solid var(--line);}
#urlaub-app-root table.summary td.num{font-family:var(--font-mono); text-align:right;}
#urlaub-app-root table.summary tr.group-row td{background:var(--bg); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
#urlaub-app-root .name-cell{display:flex; align-items:center; gap:8px;}
#urlaub-app-root .dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
#urlaub-app-root .locked-txt{color:var(--ink-faint); font-style:italic;}
#urlaub-app-root .urlaub-strong{font-weight:700; color:var(--urlaub);}
#urlaub-app-root .rest-low{color:var(--danger); font-weight:600;}

#urlaub-app-root .month-section{margin-bottom:26px;}
#urlaub-app-root .month-head{display:flex; align-items:baseline; gap:10px; margin:0 0 8px 4px;}
#urlaub-app-root .month-num{font-family:var(--font-mono); font-size:12px; color:var(--accent); border:1px solid var(--accent); border-radius:5px; padding:1px 7px;}
#urlaub-app-root .month-head h2{font-size:17px; font-weight:700;}
#urlaub-app-root .grid-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface);}
#urlaub-app-root table.grid{border-collapse:collapse; font-size:11px; width:max-content; min-width:100%;}
#urlaub-app-root table.grid th, #urlaub-app-root table.grid td{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0;}
#urlaub-app-root table.grid th{background:var(--surface);}
#urlaub-app-root .colhead{width:26px; min-width:26px; text-align:center; padding:4px 0 !important; font-family:var(--font-mono);}
#urlaub-app-root .colhead .dnum{font-size:11px; font-weight:600;}
#urlaub-app-root .colhead .dwd{font-size:8px; color:var(--ink-faint); text-transform:uppercase;}
#urlaub-app-root .colhead.holiday{background:var(--holiday);}
#urlaub-app-root .colhead.weekend{background:var(--weekend);}
#urlaub-app-root .colhead.holiday .dnum{color:var(--holiday-text);}
#urlaub-app-root .colhead.weekend .dnum{color:var(--ink-soft);}
#urlaub-app-root .rowlabel{position:sticky; left:0; z-index:5; background:var(--surface); min-width:150px; max-width:150px; padding:5px 10px !important; text-align:left; font-size:12px; border-right:1px solid var(--line-strong) !important;}
#urlaub-app-root .rowlabel .rl-inner{display:flex; align-items:center; gap:6px;}
#urlaub-app-root .rowlabel .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#urlaub-app-root .anspruch-tag{font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); margin-left:auto; flex:0 0 auto;}
#urlaub-app-root tr.grouphead td{background:var(--bg); font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--ink-faint); padding:3px 10px !important; font-weight:600; position:sticky; left:0; border-right:none !important;}
#urlaub-app-root tr.grouphead td.filler{position:static; background:var(--bg);}
#urlaub-app-root td.cell{width:26px; height:24px; text-align:center; cursor:pointer; position:relative;}
#urlaub-app-root td.cell.holiday{background:var(--holiday);}
#urlaub-app-root td.cell.weekend{background:var(--weekend);}
#urlaub-app-root td.cell.ferien:not(.has-entry){background:var(--ferien-wash);}
#urlaub-app-root td.cell.locked{cursor:default;}
#urlaub-app-root td.cell.masked{cursor:default; background:repeating-linear-gradient(135deg, var(--locked-pattern) 0 4px, #E2E9E9 4px 8px);}
#urlaub-app-root td.cell .abbr{font-family:var(--font-mono); font-weight:700; font-size:10px;}
#urlaub-app-root td.cell:not(.locked):not(.masked):hover{outline:2px solid var(--accent); outline-offset:-2px;}
#urlaub-app-root td.cell.own-row{box-shadow:inset 0 0 0 1px rgba(15,110,99,0.25);}
#urlaub-app-root td.cell.has-log::after{content:''; position:absolute; right:2px; bottom:2px; width:4px; height:4px; border-radius:50%; background:rgba(0,0,0,0.32);}
#urlaub-app-root tr.countrow td{background:var(--bg);}
#urlaub-app-root tr.countrow td.rowlabel{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); font-weight:600;}
#urlaub-app-root tr.countrow td.cell{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); cursor:default; font-weight:600;}
#urlaub-app-root tr.countrow.partner td.cell{color:var(--partner);}
#urlaub-app-root tr.countrow.angestellt td.cell{color:var(--angestellt);}
#urlaub-app-root tr.countrow td.cell.warn-low{background:var(--danger-soft) !important; color:var(--danger) !important; font-weight:700;}
#urlaub-app-root tr.countrow.masked td.cell{color:transparent; background:repeating-linear-gradient(135deg, var(--locked-pattern) 0 4px, #E2E9E9 4px 8px);}
#urlaub-app-root tr.countrow.masked td.rowlabel{color:var(--ink-faint); font-style:italic;}
#urlaub-app-root tr.spacer td{height:5px; border:none; background:var(--surface);}

#urlaub-app-root #popover{position:absolute; z-index:100; background:#fff; border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 8px 24px rgba(20,40,38,0.18); padding:6px; display:none; min-width:180px;}
#urlaub-app-root #popover .po-title{font-size:10px; color:var(--ink-faint); font-family:var(--font-mono); padding:4px 6px 6px; text-transform:uppercase;}
#urlaub-app-root #popover .po-log{font-size:11px; color:var(--ink-soft); background:var(--bg); border-radius:6px; padding:6px 8px; margin:0 4px 6px; line-height:1.4;}
#urlaub-app-root #popover .po-readonly{font-size:12px; color:var(--ink-faint); font-style:italic; padding:4px 8px 8px; max-width:200px;}
#urlaub-app-root #popover button.po-opt{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:7px 8px; border-radius:6px; font-size:12px; color:var(--ink);}
#urlaub-app-root #popover button.po-opt:hover{background:var(--bg);}
#urlaub-app-root #popover button.po-opt .sw{width:11px; height:11px; border-radius:3px; flex:0 0 auto;}

#urlaub-app-root footer{max-width:1400px; margin:0 auto; padding:0 22px 40px; color:var(--ink-faint); font-size:11px;}
#urlaub-app-root .badge-role{font-family:var(--font-mono); font-size:10px; padding:2px 8px; border-radius:12px; border:1px solid;}
#urlaub-app-root .role-partner{color:var(--partner); border-color:var(--partner); background:var(--partner-soft);}
#urlaub-app-root .role-angestellt{color:var(--angestellt); border-color:var(--angestellt); background:var(--angestellt-soft);}
#urlaub-app-root .role-betrachter{color:var(--betrachter); border-color:var(--betrachter); background:var(--betrachter-soft);}
#urlaub-app-root .role-superadmin{color:#8A6D1D; border-color:#F0B429; background:#FDF3D8;}

#urlaub-app-root .auth-overlay{position:fixed; inset:0; background:var(--bg); z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
#urlaub-app-root .auth-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; max-width:360px; width:100%; box-shadow:0 20px 50px rgba(20,40,38,0.15);}
#urlaub-app-root .auth-card h2{font-size:17px; margin-bottom:4px;}
#urlaub-app-root .auth-sub{font-size:12px; color:var(--ink-soft); margin:0 0 16px;}
#urlaub-app-root .auth-card label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--ink-faint); font-family:var(--font-mono); text-transform:uppercase; margin-bottom:10px;}
#urlaub-app-root .auth-card input,#urlaub-app-root .auth-card select{border:1px solid var(--line-strong); border-radius:7px; padding:8px 10px; font-size:13px; color:var(--ink);}
#urlaub-app-root .auth-error{color:var(--danger); font-size:12px; min-height:16px; margin-bottom:6px;}
#urlaub-app-root .auth-btn{width:100%; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:600; margin-top:4px;}
#urlaub-app-root .auth-btn:hover{background:var(--accent-dark);}

#urlaub-app-root table.admin{border-collapse:collapse; width:100%; font-size:12px;}
#urlaub-app-root table.admin th{text-align:left; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink-faint); padding:6px 8px; border-bottom:1px solid var(--line-strong);}
#urlaub-app-root table.admin td{padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
#urlaub-app-root table.admin input[type=text]{border:1px solid var(--line); border-radius:6px; padding:5px 7px; font-size:12px; width:130px;}
#urlaub-app-root .genpass-btn{background:var(--accent-soft); color:var(--accent-dark); border:1px solid var(--accent); border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600;}
#urlaub-app-root .genpass-btn:hover{background:var(--accent); color:#fff;}
#urlaub-app-root .reveal-pass{font-family:var(--font-mono); font-size:11px; background:#FFF7DB; border:1px solid #E5CE7A; border-radius:6px; padding:3px 8px; margin-left:6px;}
#urlaub-app-root .admin-check{width:16px; height:16px;}
#urlaub-app-root .no-account{color:var(--ink-faint); font-style:italic; font-size:11px;}
#urlaub-app-root .toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--accent-dark); color:#fff; padding:9px 16px; border-radius:8px; font-size:12px; z-index:300; box-shadow:0 8px 20px rgba(0,0,0,0.2); display:none;}
