:root{--bg:#f4f1ec;--sf:#fff;--sf2:#ede9e1;--bd:#ddd8cf;--ink:#1c1915;--ink2:#6e6860;--ink3:#a09890;--ac:#c0431a;--acl:#f5dfd8;--gr:#2a6649;--grb:#d6f0e0;--or:#c06a00;--orb:#fdefd8;--rd:#b01530;--rdb:#fde8ee;--bl:#1a5276;--blb:#d6eaf8;--pu:#5b2c8d;--pub:#ead6f8;--si:#1c1915;--r:8px;--rl:12px;--tr:.16s ease;--sh:0 1px 2px rgba(28,25,21,.05),0 2px 8px rgba(28,25,21,.045);--shh:0 2px 5px rgba(28,25,21,.07),0 8px 22px rgba(28,25,21,.07)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}

/* LOGIN */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-box{background:var(--sf);border-radius:var(--rl);padding:40px;width:380px;box-shadow:0 10px 40px rgba(28,25,21,.10)}
.login-box h1{font-family:'DM Serif Display',serif;font-size:26px;margin-bottom:4px}
.login-box h1 span{color:var(--ac)}
.login-box p{color:var(--ink2);font-size:12.5px;margin-bottom:24px}
.login-users{display:grid;gap:8px;margin-bottom:20px}
.lu{border:1.5px solid var(--bd);border-radius:var(--r);padding:12px 15px;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;gap:12px}
.lu:hover{border-color:var(--ac);background:var(--acl)}
.lu.admin{border-color:rgba(192,67,26,.3);background:rgba(192,67,26,.03)}
.lu-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex-shrink:0}
.av-admin{background:var(--acl);color:var(--ac)}
.av-emp{background:var(--blb);color:var(--bl)}
.lu-info h4{font-size:13.5px;font-weight:600}
.lu-info p{font-size:11.5px;color:var(--ink2)}
.lu-badge{margin-left:auto;font-size:10px;padding:2px 7px;border-radius:12px}

/* APP LAYOUT */
#app-screen{display:none}
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--si);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;overflow-y:auto}
.logo{padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo h1{font-family:'DM Serif Display',serif;font-size:18px;color:#fff}
.logo h1 span{color:#e07a52}
.logo small{display:block;font-size:10px;color:rgba(255,255,255,.3);margin-top:1px;font-family:'DM Mono',monospace}
.user-pill{margin:10px 14px;background:rgba(255,255,255,.06);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px}
.up-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.up-name{font-size:12.5px;font-weight:500}
.up-role{font-size:10px;color:rgba(255,255,255,.35)}
.logout-btn{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:5px;cursor:pointer;color:rgba(255,255,255,.7);font-size:11px;padding:3px 8px;font-family:inherit}.logout-btn:hover{background:rgba(255,255,255,.15);color:#fff}
nav{padding:6px 0;flex:1}
.ns{padding:10px 18px 3px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.22)}
.ni{display:flex;align-items:center;gap:8px;padding:8px 18px;cursor:pointer;color:rgba(255,255,255,.48);font-size:13px;transition:all var(--tr);border-left:3px solid transparent}
.ni:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.04)}
.ni.active{color:#fff;background:rgba(192,67,26,.2);border-left-color:var(--ac);font-weight:500}
.sidebar-foot{padding:10px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:10px;color:rgba(255,255,255,.18)}
.main{margin-left:230px;flex:1;padding:26px 30px;min-height:100vh}
.page{display:none}.page.active{display:block}

/* MOOD */
.mood-bar{display:flex;gap:10px;align-items:center;background:#fffbf0;border:1.5px solid #fde68a;border-radius:var(--rl);padding:14px 18px;margin-bottom:14px}
.mood-btn{font-size:28px;cursor:pointer;border:2px solid transparent;border-radius:50%;padding:4px 8px;transition:all var(--tr);background:none;line-height:1}
.mood-btn:hover{transform:scale(1.2)}
.mood-btn.selected{border-color:#c0431a;background:#fff0eb;transform:scale(1.15)}
.mood-note{flex:1;border:1px solid #e5e0d8;border-radius:var(--r);padding:7px 10px;font-size:13px;font-family:inherit;resize:none}
.mood-tag{display:inline-flex;align-items:center;gap:5px;background:#fff0eb;border:1px solid #f5cfc0;border-radius:20px;padding:3px 10px;font-size:12px}

/* TYPOGRAPHY + LAYOUT */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.ph h2{font-family:'DM Serif Display',serif;font-size:25px;letter-spacing:-.4px}
.ph p{color:var(--ink2);font-size:12.5px;margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all var(--tr)}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-p{background:var(--ac);color:#fff}.btn-p:hover{background:#a83915;transform:translateY(-1px)}
.btn-s{background:var(--sf);color:var(--ink);border:1px solid var(--bd)}.btn-s:hover{background:var(--sf2)}
.btn-d{background:var(--rdb);color:var(--rd);border:1px solid #f5c2cc}
.btn-g{background:var(--grb);color:var(--gr);border:1px solid #b2dfc4}.btn-g:hover{background:#c2e8d2}
.btn-sm{padding:5px 10px;font-size:12px}
.card{background:var(--sf);border-radius:var(--rl);border:1px solid var(--bd);box-shadow:var(--sh);transition:box-shadow var(--tr)}
.card:hover{box-shadow:var(--shh)}
.ch{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.ch h3{font-size:13.5px;font-weight:600}
.cb{padding:18px}
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:14px 16px;box-shadow:var(--sh);transition:box-shadow var(--tr),transform var(--tr)}
.sc:hover{box-shadow:var(--shh);transform:translateY(-1px)}
.sc-l{font-size:11px;color:var(--ink2);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.sc-v{font-family:'DM Mono',monospace;font-size:22px;color:var(--ink)}
.sc-s{font-size:11px;color:var(--ink3);margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:500}
.bg-gr{background:var(--grb);color:var(--gr)}.bg-or{background:var(--orb);color:var(--or)}.bg-rd{background:var(--rdb);color:var(--rd)}.bg-bl{background:var(--blb);color:var(--bl)}.bg-gy{background:var(--sf2);color:var(--ink2)}.bg-pu{background:var(--pub);color:var(--pu)}.bg-ac{background:var(--acl);color:var(--ac)}
.fr{display:grid;gap:12px;margin-bottom:12px}
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:1fr 1fr 1fr}.c4{grid-template-columns:1fr 1fr 1fr 1fr}
label{display:block;font-size:11.5px;font-weight:500;color:var(--ink2);margin-bottom:3px}
input,select,textarea{width:100%;padding:7px 10px;border:1px solid var(--bd);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--ink);background:var(--sf);transition:border-color var(--tr),box-shadow var(--tr)}
input:focus,select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(192,67,26,.08)}
input[type=time]{font-family:'DM Mono',monospace}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 12px;font-size:11px;font-weight:600;color:var(--ink2);border-bottom:1px solid var(--bd);background:var(--sf2);text-transform:uppercase;letter-spacing:.5px}
td{padding:10px 12px;border-bottom:1px solid #f0ece4;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#faf8f5}
.alert{padding:10px 13px;border-radius:7px;font-size:13px;display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.aw{background:var(--orb);color:var(--or);border:1px solid #f5c87a}
.ad{background:var(--rdb);color:var(--rd);border:1px solid #f5b2c0}
.ai{background:var(--blb);color:var(--bl);border:1px solid #a8d4f0}
.as{background:var(--grb);color:var(--gr);border:1px solid #9ed4b4}
.warn-hint{background:var(--orb);color:var(--or);border:1px solid #f5c87a;border-radius:var(--r);padding:8px 12px;font-size:12.5px}
.mo{display:none;position:fixed;inset:0;background:rgba(28,25,21,.45);z-index:500;align-items:center;justify-content:center}
.mo.open{display:flex}
.md{background:var(--sf);border-radius:var(--rl);box-shadow:0 18px 50px rgba(28,25,21,.16);width:580px;max-width:96vw;max-height:92vh;overflow-y:auto}
.md-xl{width:820px}
.mh{padding:18px 22px 14px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.mh h3{font-family:'DM Serif Display',serif;font-size:19px}
.mc{background:none;border:none;cursor:pointer;color:var(--ink2);font-size:18px;padding:3px 7px;border-radius:5px}
.mb{padding:18px 22px}
.mf{padding:12px 22px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end}
.sbar{background:var(--si);color:#fff;border-radius:var(--rl);padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.scl{font-family:'DM Mono',monospace;font-size:28px;font-weight:300;color:#fff;letter-spacing:2px}
.dot{width:8px;height:8px;border-radius:50%;background:#666;flex-shrink:0}
.dot.on{background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.law{background:#fffbf5;border:1px solid #f0d9b0;border-radius:var(--r);padding:12px 15px;margin-bottom:18px}
.law h4{font-size:11.5px;font-weight:600;color:#8a5c00;margin-bottom:5px}
.law ul{padding-left:15px;font-size:12px;color:#7a5200;line-height:1.9}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.mt2{margin-top:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:20px;font-size:12px;cursor:pointer;border:1px solid var(--bd);background:var(--sf);color:var(--ink2);transition:all var(--tr)}
.chip.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.flex{display:flex;align-items:center;gap:8px}
.empty{text-align:center;padding:32px 16px;color:var(--ink2)}
.tag-azg{background:#fff3e0;color:#b35c00;border:1px solid #ffcc80;border-radius:5px;padding:2px 7px;font-size:10.5px;font-weight:600;font-family:'DM Mono',monospace}
.vmeter{background:var(--sf2);height:8px;border-radius:4px;overflow:hidden;margin-top:4px}
.vmfill{height:100%;border-radius:4px}
.tm{color:var(--ink2)}.ts{font-size:12px}.tmono{font-family:'DM Mono',monospace}
.divider{border:none;border-top:1px solid var(--bd);margin:14px 0}

/* VACATION CALENDAR */
.vcal-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.vcal-nav button{background:var(--sf);border:1px solid var(--bd);border-radius:7px;padding:6px 12px;cursor:pointer;font-size:13px}
.vcal-month{font-family:'DM Serif Display',serif;font-size:20px;flex:1}
.vcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.vcal-header{text-align:center;font-size:11px;font-weight:600;color:var(--ink2);padding:6px;text-transform:uppercase;letter-spacing:.5px}
.vcal-day{min-height:80px;border:1px solid var(--bd);border-radius:var(--r);padding:4px 6px;background:var(--sf);position:relative;transition:transform var(--tr),box-shadow var(--tr)}
.vcal-day:hover{transform:scale(1.04);box-shadow:var(--shh);z-index:1;cursor:pointer}
.vcal-note{font-size:10px;color:var(--ink2);margin-top:3px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-left:2px solid var(--bd);padding-left:4px}
.vcal-day.today{border-color:var(--ac);background:var(--acl)}
.vcal-day.weekend{background:var(--sf2)}
.vcal-day.other-month{opacity:.4}
.vcal-day-num{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:2px}
.vcal-day.today .vcal-day-num{color:var(--ac)}
.vce{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.vce-urlaub{background:#c8e6c9;color:#1b5e20}
.vce-krankenstand{background:#ffcdd2;color:#b71c1c}
.vce-homeoffice{background:#e1bee7;color:#4a148c}
.vce-zeitausgleich{background:#bbdefb;color:#0d47a1}
.vce-sonderurlaub{background:#fff9c4;color:#f57f17}
.vce-beantragt{background:#ffe0b2;color:#e65100;border:1px dashed #ff9800}
.vce-urlaub_genossen{background:#a5d6a7;color:#1b5e20;opacity:0.7}
.vce-feiertag{background:#ede0f8;color:var(--pu);font-size:9.5px}
.vcal-day.feiertag{background:#faf5ff;border-color:#d8b4fe}
.vce-me{font-size:11px;font-weight:700;border:2.5px solid var(--ac)}

/* VACATION REQUEST (Employee view) */
.req-status-beantragt{background:#fff3e0;border:1px solid #ffcc02;border-radius:8px;padding:12px 14px;margin-bottom:10px}
.req-status-genehmigt{background:var(--grb);border:1px solid #9ed4b4;border-radius:8px;padding:12px 14px;margin-bottom:10px}
.req-status-abgelehnt{background:var(--rdb);border:1px solid #f5b2c0;border-radius:8px;padding:12px 14px;margin-bottom:10px}

/* OVERLAP WARNING */
.overlap-warn{background:#fff3e0;border:2px solid #ff9800;border-radius:10px;padding:14px 16px;margin-bottom:14px}
.overlap-warn h4{color:#e65100;font-size:13.5px;margin-bottom:8px}
.overlap-item{background:#fff;border-radius:6px;padding:8px 12px;margin-bottom:6px;font-size:12.5px;border-left:3px solid #ff9800}

/* EXCEL EXPORT BUTTON */
.export-month-btn{background:var(--grb);color:var(--gr);border:1px solid #b2dfc4;border-radius:var(--r);padding:7px 14px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all var(--tr)}
.export-month-btn:hover{background:#c2e8d2}
.alert.ag{background:#f0fdf4;border-color:#86efac;color:#166534}

/* PAGE TRANSITION */
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page.active{animation:pageIn .22s ease}
.btn-p:active,.btn-s:active,.btn-g:active,.btn-d:active{transform:translateY(0)}

/* DASHBOARD CALLOUTS (flat, ruhig) */
.note-card{background:var(--sf);border:1px solid var(--bd);border-left:3px solid var(--ink3);border-radius:var(--rl);padding:14px 18px;margin-bottom:16px;box-shadow:var(--sh)}
.note-row{display:flex;align-items:flex-start;gap:12px}
.note-card.nc-gr{border-left-color:var(--gr)}
.note-card.nc-pu{border-left-color:var(--pu)}
.note-card.nc-or{border-left-color:var(--or)}
.note-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--sf2)}
.note-av.av-gr{background:var(--grb)}
.note-av.av-pu{background:var(--pub)}
.note-body{flex:1;min-width:0}
.note-eyebrow{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.note-card.nc-gr .note-eyebrow{color:var(--gr)}
.note-card.nc-pu .note-eyebrow{color:var(--pu)}
.note-text{font-size:14px;color:var(--ink);line-height:1.6}
.note-sub{font-size:12px;color:var(--ink2);margin-top:5px}
.note-act{background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink3);padding:2px 5px;border-radius:6px;flex-shrink:0;transition:color var(--tr)}
.note-act:hover{color:var(--ink)}
.btn-pu{background:var(--pub);color:var(--pu);border:1px solid #c9a8e8}.btn-pu:hover{background:#dfc2f5}
.btn-bl{background:var(--blb);color:var(--bl);border:1px solid #a8c8e8}.btn-bl:hover{background:#c2d8f5}