:root{--blue:#05a8e2;--blue2:#0089be;--ink:#30363c;--muted:#748493;--bg:#f4f8fb;--line:#e0eaf0;--white:#fff;--green:#23a76f;--red:#e05252;--violet:#7a66c7;--shadow:0 14px 34px rgba(40,73,94,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:var(--blue2)}
/* Login */.login-body{min-height:100vh}.login-bg{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 25%,rgba(5,168,226,.18),transparent 24%),linear-gradient(135deg,#f7fbfd 0%,#eef7fc 42%,#fff 100%)}.login-bg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(5,168,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(5,168,226,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,#000,transparent 78%)}.circuit{position:absolute;border:2px solid rgba(5,168,226,.12);transform:rotate(30deg);border-radius:22px}.circuit-a{width:720px;height:220px;left:-180px;bottom:100px;box-shadow:0 0 0 28px rgba(5,168,226,.025),0 0 0 56px rgba(5,168,226,.02)}.circuit-b{width:520px;height:180px;right:-110px;top:90px}.login-shell{position:relative;z-index:2;min-height:calc(100vh - 58px);display:grid;grid-template-columns:1fr 470px;gap:90px;align-items:center;max-width:1240px;margin:auto;padding:60px}.hero-logo{width:420px;max-width:78%;border-radius:7px}.login-brand h1{font-size:58px;line-height:1.02;margin:12px 0 18px}.login-brand h1 span{color:var(--blue)}.brand-lead{font-size:19px;color:#687985}.brand-points{display:flex;gap:9px;flex-wrap:wrap;margin-top:36px}.brand-points span{padding:9px 12px;border:1px solid rgba(5,168,226,.16);background:rgba(255,255,255,.62);border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#667b89}.login-card{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:26px;padding:44px;box-shadow:0 28px 60px rgba(37,72,94,.14)}.login-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue2));display:grid;place-items:center;color:#fff;font-size:22px;margin-bottom:20px;box-shadow:0 10px 24px rgba(5,168,226,.24)}.login-card h2{font-size:31px;margin:8px 0 6px}.login-card label{display:block;font-weight:700;font-size:12px;margin:20px 0 8px}.login-card input,.filter-card select,.report-form select,.searchbox input{width:100%;border:1px solid #d4e2eb;background:#f9fcfe;border-radius:11px;padding:13px 14px;outline:none;transition:.2s}.login-card input:focus,.filter-card select:focus,.report-form select:focus,.searchbox input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(5,168,226,.11);background:#fff}.login-card button,.primary-action,.small-btn{border:0;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-radius:11px;padding:13px 17px;font-weight:800;cursor:pointer;transition:.2s;box-shadow:0 10px 22px rgba(5,168,226,.2)}.login-card button{width:100%;margin-top:22px}.login-card button:hover,.primary-action:hover,.small-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(5,168,226,.28)}.login-foot{display:flex;justify-content:space-between;margin-top:26px;padding-top:21px;border-top:1px solid #e6eef3;font-size:11px;color:#7a8b97}.login-footer{position:relative;z-index:2;height:58px;display:flex;align-items:center;justify-content:center;gap:11px;font-size:11px;color:#7b8a95}.alert{background:#fff0f0;border:1px solid #ffcfcf;color:#a52929;padding:12px 14px;border-radius:10px;margin-top:16px}
/* App shell */.layout{display:grid;grid-template-columns:226px minmax(0,1fr);min-height:100vh}aside{background:#fff;border-right:1px solid #e3edf3;padding:21px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand-side{display:flex;align-items:center;gap:10px;padding:0 5px 17px;border-bottom:1px solid #edf2f5}.side-logo{width:88px;border-radius:4px}.brand-side strong{font-size:11px;line-height:1.2;display:block}.brand-side small{color:#8997a1;font-size:10px}.layout nav{display:grid;gap:4px;margin-top:17px}.layout nav a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;color:#586875;font-size:13px;transition:.16s}.layout nav a:hover{background:#eef8fc;color:var(--blue2);transform:translateX(2px)}.layout nav a.active{background:linear-gradient(135deg,var(--blue),#1bb7e9);color:#fff;box-shadow:0 7px 17px rgba(5,168,226,.18)}.nav-icon{width:22px;text-align:center;font-weight:900}.side-bottom{margin-top:auto;border-top:1px solid #edf2f5;padding-top:15px}.profile-mini{display:flex;align-items:center;gap:9px}.profile-mini strong,.profile-mini small{display:block;font-size:10px}.profile-mini small{color:#87959e}.avatar,.top-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e8f6fc;color:#0886b8;font-weight:800;font-size:12px}.avatar.small{width:34px;height:34px}.avatar.xl{width:62px;height:62px;font-size:18px}.logout{display:inline-block;margin-top:13px;font-size:11px;color:#7b8b96}.powered{display:block;margin-top:22px;color:#99a5ad;font-size:9px;line-height:1.35}.powered b{color:#667886}main{padding:27px 30px 28px;max-width:1540px;width:100%}.top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.top h1{margin:5px 0 4px;font-size:28px}.top p{margin:0;color:#84939e;font-size:12px}.top-actions{display:flex;align-items:center;gap:12px}.year-select{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e1eaf0;border-radius:11px;padding:6px 9px;font-size:12px}.year-select select{border:0;background:#f5f9fb;border-radius:8px;padding:7px 27px 7px 9px;outline:none}.top-avatar{background:linear-gradient(135deg,#8195a5,#627587);color:#fff}
/* Shared */.panel,.hero-strip,.metric,.toolbar,.filter-card,.summary-banner,.report-hero{background:#fff;border:1px solid #e3edf2;border-radius:16px;box-shadow:0 8px 23px rgba(45,75,94,.05)}.panel{padding:20px}.panel.flush{padding:8px 18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.panel h2,.panel-head h2{margin:4px 0 0;font-size:17px}.panel-head a{color:var(--blue2);font-size:12px}.status{background:#eaf8fd;color:#087ead;border-radius:999px;padding:6px 10px;font-size:11px}.badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}.badge.vacation{background:#e8f7fd;color:#087ead}.badge.sick{background:#ffeded;color:#c84646}.badge.holiday{background:#f0edff;color:#6c55b8}.badge.absence,.badge.other,.badge.unpaid_leave{background:#f1f3f5;color:#65717a}.badge.work{background:#e9f8ef;color:#268750}.badge.training{background:#fff5dd;color:#9a7009}.grow{flex:1}.empty{padding:28px 6px;text-align:center;color:#8a99a3}.empty b,.empty span{display:block}.empty span{font-size:12px;margin-top:5px}
/* Dashboard */.hero-strip{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;background:linear-gradient(135deg,#fff,#eff9fd)}.hero-strip h2{font-size:19px;margin:4px 0}.hero-strip p{margin:0;color:#7b8c98;font-size:12px}.schedule-compact{border-left:3px solid var(--blue);padding-left:14px;display:grid;gap:3px;font-size:11px;color:#6f8290}.schedule-compact b{color:#465762}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:15px}.metric{padding:16px;display:flex;align-items:center;gap:12px;transition:.16s}.metric:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900}.metric-icon.blue{background:#e7f7fd;color:#078cc0}.metric-icon.green{background:#eaf8f1;color:#259064}.metric-icon.red{background:#fff0f0;color:#d74b4b}.metric-icon.violet{background:#f0edff;color:#6f5bb8}.metric div span,.metric div small{display:block;color:#7c8c97;font-size:10px}.metric div strong{display:block;font-size:23px;margin:2px 0}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}.absence-list{display:grid}.absence-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #edf2f5}.absence-row:last-child{border:0}.absence-row strong,.absence-row small{display:block}.absence-row strong{font-size:12px}.absence-row small{font-size:10px;color:#8a99a4;margin-top:2px}.quick-list{display:grid;gap:7px}.quick-list a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;background:#f7fafc;border:1px solid #edf2f5;transition:.16s}.quick-list a:hover{background:#eef8fc;border-color:#cbe9f5;transform:translateX(2px)}.quick-list a>span{width:32px;height:32px;border-radius:9px;background:#e8f7fd;color:#0688bb;display:grid;place-items:center}.quick-list b,.quick-list small{display:block}.quick-list b{font-size:11px}.quick-list small{font-size:9px;color:#84939e}.quick-list i{margin-left:auto;font-style:normal;color:#75a8be}
/* Employees */.toolbar{padding:10px 12px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}.toolbar form{width:min(440px,100%)}.searchbox{display:flex;align-items:center;gap:8px;padding-left:10px;background:#f7fafc;border-radius:10px}.searchbox input{border:0;background:transparent;box-shadow:none!important;padding:11px 8px}.toolbar-note{font-size:11px;color:#7e8d98}.employee-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.employee-card{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;border:1px solid #edf2f5;border-radius:13px;padding:12px;transition:.16s;background:#fff}.employee-card:hover{border-color:#cfe8f3;box-shadow:0 8px 20px rgba(44,79,100,.07);transform:translateY(-1px)}.employee-main strong,.employee-main small{display:block}.employee-main strong{font-size:12px}.employee-main small{font-size:9px;color:#8997a2}.employee-kpis{grid-column:2/4;display:flex;gap:22px;padding-top:8px;border-top:1px solid #f0f3f5}.employee-kpis span small,.employee-kpis span b{display:block}.employee-kpis small{font-size:9px;color:#94a1aa}.employee-kpis b{font-size:11px;margin-top:2px}.detail-drawer{position:fixed;right:22px;top:22px;bottom:22px;width:370px;background:#fff;border:1px solid #e3edf2;border-radius:20px;box-shadow:0 26px 65px rgba(37,72,94,.2);z-index:20;padding:24px}.drawer-close{position:absolute;right:17px;top:12px;font-size:26px;color:#8b99a3}.detail-head{display:flex;align-items:center;gap:14px;margin:28px 0}.detail-head h2{margin:0;font-size:20px}.detail-head p{margin:3px 0 0;color:#82919c;font-size:11px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.detail-grid>div{background:#f7fafc;border-radius:11px;padding:13px}.detail-grid small,.detail-grid b{display:block}.detail-grid small{font-size:9px;color:#8a98a2}.detail-grid b{font-size:12px;margin-top:4px}
/* filters/tables */.filter-card{padding:11px 13px;margin-bottom:12px;display:flex;align-items:end;justify-content:space-between}.filter-card form,.report-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.filter-card label,.report-form label{font-size:10px;font-weight:700;color:#738491}.filter-card select,.report-form select{display:block;margin-top:5px;width:180px;padding:9px 10px}.small-btn{padding:10px 15px;font-size:11px}.filter-summary{font-size:10px;color:#84939e}.compact-table{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#758592;font-size:9px;text-transform:uppercase;letter-spacing:.06em;padding:10px;border-bottom:1px solid #dfe9ef}td{padding:9px 10px;border-bottom:1px solid #edf2f5;white-space:nowrap}tbody tr:hover{background:#f8fbfd}
/* Leave */.balance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.balance-card{border:1px solid #edf2f5;border-radius:13px;padding:12px}.balance-head{display:flex;align-items:center;gap:9px}.balance-head strong,.balance-head small{display:block}.balance-head strong{font-size:11px}.balance-head small{font-size:9px;color:#8a99a4}.progress{height:5px;background:#edf3f6;border-radius:999px;margin:13px 0 10px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#38c0ec);border-radius:999px}.balance-values{display:flex;justify-content:space-between}.balance-values small,.balance-values b{display:block}.balance-values small{font-size:8px;color:#93a0aa}.balance-values b{font-size:11px;margin-top:2px}
/* absence/overtime */.absence-timeline,.overtime-list{display:grid}.timeline-row,.overtime-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #edf2f5}.date-block{width:50px;text-align:center}.date-block b,.date-block small{display:block}.date-block b{font-size:14px}.date-block small{font-size:8px;color:#8b99a4}.timeline-row strong,.timeline-row small,.overtime-row strong,.overtime-row small{display:block}.timeline-row strong,.overtime-row strong{font-size:11px}.timeline-row small,.overtime-row small{font-size:9px;color:#8997a1}.summary-banner,.report-hero{padding:20px 22px;margin-bottom:12px;background:linear-gradient(135deg,#fff,#f0f9fd)}.summary-banner h2,.report-hero h2{margin:4px 0;font-size:20px}.summary-banner p,.report-hero p{margin:0;color:#7b8c98;font-size:11px}.overtime-row>b{font-size:12px}.positive{color:#238c61}.negative{color:#c84a4a}
/* month end/reports */.monthend-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.check-list{display:grid;margin-top:16px}.check-list>div{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #edf2f5}.check-list>div>span{width:29px;height:29px;border-radius:9px;background:#e8f7fd;color:#0788ba;display:grid;place-items:center;font-size:10px;font-weight:800}.check-list p{margin:0;flex:1}.check-list b,.check-list small{display:block}.check-list b{font-size:11px}.check-list small{font-size:9px;color:#8998a3;margin-top:2px}.check-list i{font-style:normal;color:#26a470}.action-panel{display:flex;flex-direction:column;justify-content:center}.action-panel p{font-size:11px;color:#7d8c97;line-height:1.6}.primary-action{display:inline-block;text-align:center;margin-top:10px;font-size:11px}.report-form{padding:4px}.print-sheet{background:#fff;border:1px solid #e3edf2;border-radius:16px;padding:25px}.print-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}.print-head img{width:150px}.print-head h2{margin:0 0 4px;font-size:20px}.print-head p{margin:0;font-size:10px;color:#8796a0}.print-head button{margin-left:auto;border:0;background:var(--blue);color:#fff;border-radius:9px;padding:10px 13px;cursor:pointer}.print-sign{display:flex;justify-content:space-between;margin-top:30px;padding-top:15px;border-top:1px solid #dce6ec;font-size:9px;color:#8a98a2}.app-footer{display:flex;justify-content:space-between;margin-top:22px;padding:15px 2px 0;border-top:1px solid #e2ebf0;font-size:9px;color:#8b99a3}
@media(max-width:1100px){.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid,.monthend-grid{grid-template-columns:1fr}.balance-grid{grid-template-columns:1fr 1fr}.employee-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr 430px;gap:40px;padding:35px}.login-brand h1{font-size:46px}}@media(max-width:850px){.login-brand{display:none}.login-shell{display:flex;justify-content:center;padding:24px}.login-card{width:min(470px,100%)}.layout{grid-template-columns:1fr}aside{position:relative;height:auto}.brand-side{justify-content:center}.layout nav{grid-template-columns:repeat(2,1fr)}.side-bottom{display:none}main{padding:20px}.top{gap:12px}.balance-grid{grid-template-columns:1fr}.detail-drawer{left:12px;right:12px;width:auto}.app-footer{display:grid;gap:5px}}@media(max-width:620px){.metric-grid{grid-template-columns:1fr}.top,.hero-strip,.filter-card{display:block}.top-actions{margin-top:12px}.schedule-compact{margin-top:16px}.layout nav{grid-template-columns:1fr 1fr}.panel{padding:15px}.login-card{padding:30px 22px}.login-footer{display:none}}
@media print{aside,.top,.app-footer,.year-select,.print-head button{display:none!important}.layout{display:block}main{padding:0;max-width:none}.print-sheet{border:0;box-shadow:none;padding:0}body{background:#fff}.print-sheet table{font-size:10pt}.print-sheet th,.print-sheet td{padding:8px}}
/* ===== V4 PATCH ===== */
.layout aside{background:#273139;color:#eef5f8;border-right:0;box-shadow:10px 0 30px rgba(24,39,49,.08)}
.brand-side{border-bottom:1px solid rgba(255,255,255,.10)}
.brand-side strong,.brand-side small,.side-bottom strong,.side-bottom small{color:#eef5f8}
.side-logo{background:#fff;border-radius:8px;padding:4px}
aside nav a{color:#dce6eb}
aside nav a:hover{background:#34414b;color:#fff;transform:translateX(2px)}
aside nav a.active{background:linear-gradient(90deg,#0799d2,#19b7e4);color:#fff;box-shadow:0 8px 20px rgba(14,166,215,.24)}
.nav-icon{color:inherit}.side-bottom{border-top:1px solid rgba(255,255,255,.10)}
.logout{color:#cbd7dd}.powered{color:#9fb0b9!important}.powered b{color:#fff}
.top{border-bottom:1px solid #dfe8ed;padding-bottom:18px;margin-bottom:18px}.top h1{font-size:30px}
.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px;background:#fff;border:1px solid #dce7ec;border-radius:16px;padding:12px 14px}.search-form{display:flex;gap:8px;flex:1}.search-form input{max-width:420px}
.primary-action.compact{padding:11px 16px;white-space:nowrap}.employee-table{overflow:auto}.employee-table table{width:100%;border-collapse:collapse}.employee-table th,.employee-table td{padding:14px 12px;border-bottom:1px solid #e6edf1;text-align:left}.employee-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#71838f}.person-cell{display:flex;align-items:center;gap:10px}.status.inactive{background:#eef1f3;color:#77858d}.edit-link{color:#008ec4;font-weight:700;text-decoration:none}.edit-link:hover{text-decoration:underline}
.form-panel{max-width:none}.edit-form{display:grid;gap:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid label,.edit-form>label,.weekday-grid label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#506470}.span-2{grid-column:1/-1}.weekday-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.form-subhead{margin:10px 0 0;font-size:16px}.form-actions{display:flex;gap:10px;align-items:center}.secondary-action{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:1px solid #ccd9df;border-radius:10px;color:#526773;text-decoration:none;background:#fff}.switch-label{display:flex!important;align-items:center;gap:10px!important;align-self:end;min-height:44px}.switch-label input{width:18px;height:18px}.edit-highlight{border:2px solid #1bb7e4;box-shadow:0 8px 28px rgba(19,166,211,.10)}
.flash{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-weight:700}.flash.success{background:#e9f8ef;color:#197347;border:1px solid #ccebd9}.flash.error{background:#fff0f0;color:#b43b3b;border:1px solid #f1cccc}
.confirmed-row{background:#fbfeff}.confirmed-row td:first-child{border-left:3px solid #22b6df}.compact-table table{min-width:900px}.compact-table td,.compact-table th{padding:11px 10px}
.two-col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:16px}.quick-actions{display:grid;gap:10px;margin-top:16px}.quick-actions a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background:#f1f7fa;border:1px solid #dce8ed;color:#31454f;text-decoration:none;font-weight:700}.quick-actions a:hover{background:#e6f5fa;border-color:#b9dfec}.stat-card{text-decoration:none;color:inherit;transition:.18s transform,.18s box-shadow}.stat-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(25,60,80,.08)}.rule-box{display:grid;gap:4px;border-left:4px solid #16b3df;padding-left:14px}.rule-box span{color:#71838f;font-size:13px}.empty-state{background:#fff;border:1px dashed #c9d9e0;border-radius:16px;padding:38px;text-align:center;color:#5d707a}.empty-state h2{margin-top:0;color:#26353d}
@media(max-width:1050px){.two-col,.monthend-grid,.dashboard-grid{grid-template-columns:1fr}.weekday-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.toolbar{align-items:stretch;flex-direction:column}.search-form input{max-width:none}}
@media(max-width:760px){.layout aside{background:#273139}.weekday-grid{grid-template-columns:1fr}.top h1{font-size:24px}.employee-table table{min-width:850px}}
/* ===== V5 UI / UX ===== */
:root{--blue:#09a7dc;--blue2:#37c4ed;--anth:#26323a;--anth2:#1d272e;--soft:#f3f7f9;--line:#dce7ec;--text:#28343b;--muted:#768791;--green:#17935f;--red:#d9535f;--amber:#dc9638;--violet:#7866d8}
body{color:var(--text)}
.layout{grid-template-columns:224px minmax(0,1fr)}
.layout aside{background:linear-gradient(180deg,#26323a 0%,#202b32 100%);box-shadow:8px 0 28px rgba(20,38,48,.08)}
.brand-side{padding:20px 14px 18px;gap:10px}.brand-side strong{font-size:12px}.brand-side small{opacity:.72}
aside nav{padding:14px 10px;gap:6px}aside nav a{border-radius:11px;padding:11px 12px;font-size:12px;font-weight:650;transition:all .2s ease;border:1px solid transparent}aside nav a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08);transform:translateX(3px)}aside nav a.active{background:linear-gradient(100deg,#069bcf,#25bce7);box-shadow:0 9px 22px rgba(0,164,218,.24)}
main{max-width:1600px;padding:28px 32px 40px}.top{margin-bottom:18px}.top h1{font-size:29px;letter-spacing:-.025em}.top p{font-size:12px}.year-select{border:1px solid var(--line);box-shadow:0 4px 14px rgba(25,58,75,.04)}
.panel,.hero-strip,.filter-card,.summary-banner,.report-hero{border:1px solid #dce7ec;box-shadow:0 8px 26px rgba(35,66,82,.045)}.panel{border-radius:18px}.hero-strip{border-radius:18px;padding:20px 22px;background:linear-gradient(120deg,#fff 0%,#f3fbfe 100%);display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}.hero-strip h2{font-size:22px;margin:4px 0}.hero-strip p{margin:0;color:var(--muted);font-size:11px}
.btn,.primary-action,.small-btn{appearance:none;border:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;padding:11px 16px;font-weight:750;font-size:11px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease}.btn:hover,.primary-action:hover,.small-btn:hover{transform:translateY(-2px)}.btn-primary,.primary-action,.small-btn{background:linear-gradient(110deg,#069fd4,#20bce7);color:#fff;box-shadow:0 8px 18px rgba(6,160,213,.19)}.btn-primary:hover,.primary-action:hover,.small-btn:hover{box-shadow:0 12px 24px rgba(6,160,213,.27);background:linear-gradient(110deg,#048dbc,#14acd7)}.btn-secondary{background:#fff;color:#40545f;border:1px solid #cbd9df}.btn-secondary:hover{background:#f5fafc;border-color:#a9c9d6}.btn-ghost{background:#eef6f9;color:#4f6874;border:1px solid #d7e6ec}.btn-edit{background:#eef8fc;color:#078cb9;border:1px solid #cce8f2;padding:8px 11px}.btn-edit:hover{background:#dff4fb;border-color:#9dd9ec;box-shadow:0 7px 16px rgba(10,150,197,.12)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.metric-card{background:#fff;border:1px solid #dce7ec;border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;box-shadow:0 7px 22px rgba(28,59,75,.04);transition:.2s ease}.metric-card:hover{transform:translateY(-3px);box-shadow:0 13px 30px rgba(28,59,75,.08);border-color:#c3dfe9}.metric-card small,.metric-card em{display:block}.metric-card small{font-size:10px;color:#70818b}.metric-card strong{display:block;font-size:25px;line-height:1.05;margin:3px 0}.metric-card em{font-size:9px;color:#9aa6ad;font-style:normal}.metric-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#e8f7fd;color:#078dbd;font-size:18px;font-weight:800}.metric-icon.vacation{background:#e9f8ef;color:#229262}.metric-icon.sick{background:#fff0f1;color:#d54b58}.metric-icon.overtime{background:#f0edff;color:#725ad5}
.dashboard-charts{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;margin-bottom:14px}.chart-panel{min-height:260px}.donut-layout{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:20px;padding:8px 6px}.donut{width:145px;height:145px;border-radius:50%;background:conic-gradient(var(--blue) 0 var(--taken),#e7eff3 var(--taken) 100%);display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;width:102px;height:102px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px #edf3f6}.donut>div{position:relative;z-index:1;text-align:center}.donut strong{display:block;font-size:23px}.donut small{font-size:9px;color:var(--muted)}.legend-list{display:grid;gap:10px}.legend-list>div{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:10px}.legend-list b{font-size:11px}.lg{width:8px;height:8px;border-radius:50%;background:#bbcbd4}.lg.carry{background:#92a9b5}.lg.ent{background:#4bbce1}.lg.used{background:#09a7dc}.lg.rest{background:#dfe9ee}
.bar-chart{display:grid;gap:11px;margin-top:12px}.bar-row{display:grid;grid-template-columns:145px 1fr 70px;gap:10px;align-items:center;font-size:10px}.bar-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-row>b{text-align:right}.bar-track{height:8px;background:#edf2f5;border-radius:999px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#19afd9,#56c9e8)}.bar-track i.bar-negative{background:linear-gradient(90deg,#e9868c,#d95560)}
.quick-actions a{grid-template-columns:35px 1fr auto!important;display:grid!important;gap:10px!important}.quick-actions a>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e4f5fb;color:#078fbe;font-size:16px}.quick-actions a div b,.quick-actions a div small{display:block}.quick-actions a div small{font-size:9px;color:#81919b;margin-top:2px}.quick-actions a>i{font-style:normal;color:#76a4b7;font-size:16px}
.premium-filter{background:#fff;border-radius:16px}.premium-filter select{min-width:200px}.premium-filter .btn{height:40px}.time-panel{padding-bottom:8px}.time-list{display:grid}.time-head,.time-row{display:grid;grid-template-columns:82px 95px 68px 68px 72px 68px 68px 72px 112px;gap:8px;align-items:center}.time-head{padding:8px 10px 11px;color:#748590;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid #dfe8ed}.time-row{padding:9px 10px;border-bottom:1px solid #edf2f4;font-size:10px;transition:.16s ease}.time-row:hover{background:#f8fcfd}.time-row.is-confirmed{box-shadow:inset 3px 0 0 #3bc087}.time-row.is-editing{background:#eef9fd;box-shadow:inset 3px 0 0 var(--blue)}.time-date b,.time-date small{display:block}.time-date b{font-size:11px}.time-date small{font-size:9px;color:#87959e}.neutral{color:#75858e}.empty-icon{width:52px;height:52px;border-radius:15px;background:#e7f6fc;color:#0791c0;display:grid;place-items:center;font-size:24px;margin:0 auto 12px}
.leave-table{display:grid;margin-top:10px}.leave-row{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(90px,.55fr)) 110px;gap:12px;align-items:center;padding:12px 9px;border-bottom:1px solid #edf2f4}.leave-head{color:#788894;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding-top:5px}.leave-row>span small,.leave-row>span b,.person-cell small{display:block}.leave-row>span small,.person-cell small{font-size:8px;color:#87969f}.leave-row>span b{margin-top:3px;font-size:11px}.leave-rest b{color:#0b8ab8;font-size:13px!important}
.form-panel{padding:20px}.edit-form input,.edit-form select,.search-form input,.filter-card select,.report-form select{border:1px solid #cbd8de;border-radius:9px;background:#fff;min-height:39px;padding:8px 10px;outline:none;transition:.16s ease}.edit-form input:focus,.edit-form select:focus,.search-form input:focus,.filter-card select:focus,.report-form select:focus{border-color:#44bce2;box-shadow:0 0 0 3px rgba(21,173,221,.11)}
.employee-table tr:hover td{background:#f8fcfd}.employee-table .edit-link{display:inline-flex;padding:7px 10px;border-radius:9px;background:#eef8fc;border:1px solid #d3eaf2}.employee-table .edit-link:hover{text-decoration:none;background:#dff4fb}
.badge{border-radius:999px;padding:5px 8px;font-weight:750;font-size:9px}.badge.work{background:#e9f7ef;color:#238459}.badge.vacation{background:#e5f6fc;color:#078ab8}.badge.sick{background:#fff0f1;color:#c9404d}.badge.holiday{background:#f3eefc;color:#7054bd}.badge.absence,.badge.other{background:#f2f3f4;color:#68777f}.badge.training{background:#fff5e8;color:#b87319}.badge.unpaid_leave{background:#fff0e9;color:#bc6739}
@media(max-width:1250px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-charts{grid-template-columns:1fr}.time-head,.time-row{grid-template-columns:76px 90px 62px 62px 65px 65px 65px 68px 108px}.leave-row{grid-template-columns:minmax(180px,1.4fr) repeat(4,80px) 105px}}
@media(max-width:900px){.layout{grid-template-columns:1fr}.layout aside{position:relative;height:auto}.dashboard-charts,.dashboard-grid{grid-template-columns:1fr}.donut-layout{grid-template-columns:140px 1fr}.time-list{overflow:auto}.time-head,.time-row{min-width:850px}.leave-table{overflow:auto}.leave-row{min-width:820px}.hero-strip{display:block}.rule-box{margin-top:14px}}

/* ===== V6 Premium Blue Glow / Calendar / Weekend / Accounts ===== */
:root{--jh-blue:#08a9df;--jh-blue-bright:#38d0ff;--jh-blue-deep:#047da8;--sidebar:#202b32;--sidebar-deep:#172128;--weekend:#fff1dc;--weekend-border:#f0a64a;--confirmed:#23a76f}
.layout{grid-template-columns:268px minmax(0,1fr)}
.layout aside{position:sticky;overflow:hidden;background:linear-gradient(180deg,#27343c 0%,#1c282f 56%,#172128 100%);border-right:1px solid rgba(62,202,247,.16);box-shadow:12px 0 38px rgba(9,32,43,.16)}
.layout aside:before,.layout aside:after{content:"";position:absolute;pointer-events:none;border-radius:50%;z-index:0}
.layout aside:before{width:360px;height:210px;left:-230px;top:215px;border:2px solid rgba(50,207,255,.66);box-shadow:0 0 8px rgba(20,185,235,.65),0 0 24px rgba(20,185,235,.24),inset 0 0 16px rgba(20,185,235,.09);transform:rotate(-14deg)}
.layout aside:after{width:390px;height:240px;right:-315px;bottom:90px;border:2px solid rgba(24,181,229,.53);box-shadow:0 0 9px rgba(24,181,229,.55),0 0 26px rgba(24,181,229,.2);transform:rotate(22deg)}
.layout aside>*{position:relative;z-index:1}
.brand-side{min-height:98px;padding:18px 12px 20px;border-bottom:1px solid rgba(255,255,255,.09);align-items:flex-start}.brand-side>div{min-width:0;padding-top:2px}.brand-side strong{font-size:12px;line-height:1.25;color:#fff;white-space:normal;overflow:visible}.brand-side small{font-size:10px;color:#9bb0bc}.side-logo{width:100px;flex:0 0 auto;background:#fff;padding:2px;border-radius:7px}
.layout nav{margin-top:14px;padding:0 2px}.layout nav a{color:#9fb0ba;padding:11px 12px;position:relative}.layout nav a:hover{color:#eafaff;background:rgba(15,154,200,.11);border-color:rgba(46,203,251,.17);box-shadow:inset 3px 0 0 rgba(44,204,251,.5)}.layout nav a.active{color:#fff;background:linear-gradient(100deg,rgba(3,142,190,.94),rgba(26,190,232,.96));box-shadow:0 0 0 1px rgba(84,216,255,.24),0 0 16px rgba(14,174,222,.36),inset 0 1px 0 rgba(255,255,255,.16)}.layout nav a.active:before{content:"";position:absolute;left:3px;top:18%;bottom:18%;width:2px;background:#9aebff;border-radius:999px;box-shadow:0 0 7px #43d4ff,0 0 14px rgba(67,212,255,.8)}
.side-bottom{border-color:rgba(255,255,255,.1)}.profile-mini strong{color:#fff}.profile-mini small,.logout,.powered{color:#96a9b4}.powered b{color:#c2d7e2}.profile-mini .avatar{box-shadow:0 0 0 2px rgba(54,205,249,.18),0 0 14px rgba(23,176,222,.15)}
main{max-width:1640px}.hero-strip,.summary-banner,.report-hero{position:relative;overflow:hidden}.hero-strip:after,.summary-banner:after,.report-hero:after{content:"";position:absolute;width:440px;height:160px;right:-260px;top:-95px;border:2px solid rgba(18,178,225,.28);border-radius:50%;transform:rotate(-13deg);box-shadow:0 0 10px rgba(18,178,225,.16)}
.metric-card,.panel{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.metric-card:hover,.panel.hoverable:hover{border-color:rgba(27,180,226,.35);box-shadow:0 14px 34px rgba(23,90,119,.1),0 0 0 1px rgba(17,176,224,.06)}
.primary-action,.small-btn,.btn-primary{position:relative;overflow:hidden;background:linear-gradient(110deg,#058fc0,#13b7e5 60%,#27caf2);box-shadow:0 9px 22px rgba(6,164,215,.23),inset 0 1px 0 rgba(255,255,255,.2)}.primary-action:after,.small-btn:after,.btn-primary:after{content:"";position:absolute;inset:-1px auto -1px -45%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .35s ease}.primary-action:hover:after,.small-btn:hover:after,.btn-primary:hover:after{left:115%}.primary-action:hover,.small-btn:hover,.btn-primary:hover{box-shadow:0 12px 28px rgba(6,164,215,.34),0 0 16px rgba(28,195,239,.12)}

/* Dashboard absence calendar */
.dashboard-calendar{margin-bottom:14px;padding:20px}.calendar-head{align-items:flex-start}.calendar-nav{display:flex;gap:7px;align-items:center}.calendar-nav .compact{padding:9px 13px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #dce7ec;border-radius:14px;overflow:hidden;background:#fff}.cal-weekday{padding:9px 8px;background:#f5f9fb;border-right:1px solid #e3edf2;color:#647782;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.06em}.cal-weekday:last-child{border-right:0}.cal-weekday.weekend-label{background:#ffe9ca;color:#a66314}.cal-day{min-height:108px;padding:8px;border-top:1px solid #e5edf1;border-right:1px solid #e5edf1;background:#fff;position:relative}.cal-day:nth-child(7n){border-right:0}.cal-day.empty-day{background:#fafcfd}.cal-day.weekend{background:linear-gradient(145deg,#fff7ea,#ffedd2);box-shadow:inset 3px 0 0 rgba(234,153,56,.75)}.cal-day.today{box-shadow:inset 0 0 0 2px rgba(8,169,223,.5)}.cal-day.weekend.today{box-shadow:inset 3px 0 0 rgba(234,153,56,.8),inset 0 0 0 2px rgba(8,169,223,.48)}.cal-date{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.cal-date b{font-size:12px}.cal-date span{font-size:8px;font-weight:900;color:#b76f19;background:#ffe0b7;border-radius:999px;padding:3px 5px}.cal-events{display:grid;gap:4px}.cal-event{border-radius:7px;padding:5px 6px;display:flex;justify-content:space-between;gap:6px;font-size:9px;line-height:1.15}.cal-event span{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-event small{font-size:8px;white-space:nowrap}.cal-event.vacation{background:#e5f6fd;color:#087eaa;border-left:3px solid #16a9dc}.cal-event.sick{background:#ffeded;color:#bb3945;border-left:3px solid #df5a65}.cal-event.absence,.cal-event.training,.cal-event.unpaid_leave,.cal-event.other{background:#f2f3f5;color:#596970;border-left:3px solid #8d9ca4}.cal-more{font-size:8px;color:#63747e;padding:2px 4px}.calendar-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;color:#70818b;font-size:9px}.calendar-legend span{display:flex;gap:6px;align-items:center}.legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block}.legend-dot.vacation{background:#16a9dc}.legend-dot.sick{background:#df5a65}.legend-dot.other{background:#8d9ca4}.legend-dot.weekend{background:#f1ae59}

/* Time sheet: weekends + confirmation */
.time-head,.time-row{grid-template-columns:82px 95px 68px 68px 72px 68px 68px 72px minmax(185px,1fr)}.time-row.is-weekend{background:linear-gradient(90deg,#fff0da 0%,#fff8ee 100%);box-shadow:inset 5px 0 0 var(--weekend-border)}.time-row.is-weekend:hover{background:linear-gradient(90deg,#ffe7c4 0%,#fff5e7 100%)}.time-row.is-weekend.is-confirmed{box-shadow:inset 5px 0 0 var(--weekend-border),inset 9px 0 0 rgba(35,167,111,.35)}.day-label.weekend-day{display:inline-flex!important;width:max-content!important;margin-top:3px!important;padding:2px 6px!important;background:#f7b866!important;color:#74420b!important;border-radius:999px!important;font-weight:900!important}.time-action{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}.confirm-mark{white-space:nowrap;border-radius:999px;padding:5px 7px;font-size:8px;font-weight:800}.confirm-mark.done{background:#e6f7ee;color:#168356;border:1px solid #c7ead8}.confirm-mark.open{background:#f3f5f6;color:#7b8a92;border:1px solid #e0e6e9}.weekend-edit{background:linear-gradient(145deg,#fff,#fff5e7);border-color:#efbd7f!important;box-shadow:0 10px 30px rgba(198,125,38,.08)}.weekend-warning{display:inline-flex;margin:5px 0 0;padding:7px 10px;border-radius:9px;background:#ffe9ca;color:#855013;font-size:10px;font-weight:700}.badge.standby{background:#fff1dc;color:#a76412;border:1px solid #f3cf9e}

/* Accounts */
.users-toolbar{padding:16px 18px}.users-toolbar h2{margin:4px 0 2px}.role-chip{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:800}.role-chip.admin{background:#e9f5ff;color:#087eaa}.role-chip.staff{background:#f0edff;color:#6b56bb}

@media(max-width:1280px){.layout{grid-template-columns:248px minmax(0,1fr)}.calendar-grid{overflow-x:auto}.cal-day{min-height:98px}.time-head,.time-row{min-width:980px}}
@media(max-width:900px){.layout{grid-template-columns:1fr}.layout aside{height:auto;position:relative}.brand-side{min-height:auto}.dashboard-calendar{overflow-x:auto}.calendar-grid{min-width:820px}}


/* ===== V6.1 Sidebar refinement: darker, brighter blue, straighter dual light lines ===== */
:root{
  --sidebar:#101820;
  --sidebar-deep:#0a1117;
  --sidebar-mid:#151f27;
  --jh-blue:#08bdf4;
  --jh-blue-bright:#69e0ff;
  --jh-blue-deep:#028fbe;
}

.layout{grid-template-columns:272px minmax(0,1fr)}

.layout aside{
  background:
    radial-gradient(circle at 12% 22%, rgba(16,190,244,.08), transparent 24%),
    linear-gradient(180deg,#18232b 0%,#101920 52%,#0a1117 100%);
  border-right:1px solid rgba(79,216,255,.20);
  box-shadow:14px 0 42px rgba(5,18,25,.26);
}

/* straighter double blue light stripes */
.layout aside:before,
.layout aside:after{
  border-radius:28px;
  transform:none;
}

.layout aside:before{
  width:360px;
  height:92px;
  left:-292px;
  top:215px;
  border:0;
  border-top:2px solid rgba(92,224,255,.95);
  border-bottom:1px solid rgba(18,147,191,.72);
  box-shadow:
    0 -2px 8px rgba(56,211,255,.95),
    0 -7px 24px rgba(24,183,230,.30),
    0 2px 10px rgba(4,95,130,.30);
  transform:rotate(8deg);
}

.layout aside:after{
  width:390px;
  height:104px;
  right:-322px;
  bottom:118px;
  border:0;
  border-top:2px solid rgba(75,218,255,.90);
  border-bottom:1px solid rgba(11,124,166,.70);
  box-shadow:
    0 -2px 8px rgba(59,215,255,.88),
    0 -7px 25px rgba(24,177,220,.26),
    0 2px 10px rgba(4,81,111,.28);
  transform:rotate(-11deg);
}

.brand-side{
  min-height:108px;
  padding:20px 12px 22px;
  border-bottom:1px solid rgba(255,255,255,.11);
}

.brand-side strong{
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.28;
}

.brand-side small{
  color:#d4e1e8;
  opacity:.82;
}

.layout nav{
  padding:14px 5px;
  gap:6px;
}

.layout nav a{
  color:#d7e2e8;
  font-weight:700;
  letter-spacing:.005em;
  border-radius:7px;
  padding:11px 13px;
}

.layout nav a .nav-icon{
  color:#ecf8fc;
  opacity:.92;
}

.layout nav a:hover{
  color:#fff;
  background:linear-gradient(90deg,rgba(5,111,148,.22),rgba(12,179,225,.10));
  border-color:rgba(86,219,255,.23);
  box-shadow:
    inset 3px 0 0 rgba(95,225,255,.95),
    0 0 14px rgba(25,186,230,.12);
  transform:translateX(2px);
}

.layout nav a.active{
  border-radius:7px;
  background:linear-gradient(90deg,#028ab8 0%,#06a8da 72%,#0dbbeb 100%);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(95,224,255,.32),
    0 0 12px rgba(20,198,246,.58),
    0 0 26px rgba(11,161,207,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.layout nav a.active:before{
  left:4px;
  top:19%;
  bottom:19%;
  width:2px;
  background:#d6f8ff;
  box-shadow:
    0 0 5px #8deaff,
    0 0 12px #29cfff,
    0 0 20px rgba(41,207,255,.75);
}

/* second slim light line for active menu item */
.layout nav a.active:after{
  content:"";
  position:absolute;
  left:8px;
  top:28%;
  bottom:28%;
  width:1px;
  background:rgba(135,235,255,.76);
  box-shadow:0 0 8px rgba(77,217,255,.88);
}

.side-bottom{
  border-color:rgba(255,255,255,.11);
}

.profile-mini strong{color:#fff}
.profile-mini small{color:#d3dee4}
.logout{color:#e6eff3}
.logout:hover{color:#6edfff}
.powered{color:#aebec6}
.powered b{color:#fff}

.side-logo{
  width:104px;
  border-radius:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}

/* slightly squarer global interaction language */
.primary-action,.small-btn,.btn-primary,.btn,.year-select,.metric-card,.panel,.hero-strip,.summary-banner,.report-hero{
  border-radius:10px;
}
.metric-card,.panel{border-radius:12px}
.hero-strip,.summary-banner,.report-hero{border-radius:12px}


/* ===== V6.2 – MAMO-inspired restrained blue UI refinement ===== */
:root{
  --sidebar-black:#0b1116;
  --sidebar-black-2:#111a20;
  --electric:#00b9ee;
  --electric-bright:#69e2ff;
  --electric-deep:#058ab5;
}

/* SIDEBAR: darker, calmer, no closed/boxy glow shapes */
.layout aside{
  background:
    linear-gradient(180deg,#111a20 0%,#0d151a 48%,#080e12 100%);
  border-right:1px solid rgba(65,198,238,.17);
  box-shadow:10px 0 36px rgba(0,0,0,.20);
  overflow:hidden;
}

/* open MAMO-like sweep lines — no rectangular / closed shapes */
.layout aside:before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:420px;
  height:150px;
  left:-340px;
  top:208px;
  border:0;
  border-top:2px solid rgba(77,218,255,.82);
  border-bottom:1px solid rgba(4,115,154,.45);
  border-radius:50%;
  transform:rotate(8deg);
  box-shadow:
    0 -1px 5px rgba(51,210,255,.72),
    0 -4px 16px rgba(22,175,219,.18);
}

.layout aside:after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:470px;
  height:172px;
  right:-385px;
  bottom:86px;
  border:0;
  border-top:2px solid rgba(61,211,252,.74);
  border-bottom:1px solid rgba(4,105,142,.38);
  border-radius:50%;
  transform:rotate(-12deg);
  box-shadow:
    0 -1px 5px rgba(48,202,244,.60),
    0 -4px 18px rgba(15,158,202,.14);
}

/* second, offset light stripe */
.layout aside .brand-side:after{
  content:"";
  position:absolute;
  width:390px;
  height:138px;
  left:-322px;
  top:224px;
  border-top:1px solid rgba(130,233,255,.38);
  border-radius:50%;
  transform:rotate(8deg);
  pointer-events:none;
}

/* brighter navigation text */
.layout nav a{
  color:#dbe7ec;
  font-weight:720;
  text-shadow:none;
}
.layout nav a .nav-icon{color:#eefaff}
.layout nav a:hover{
  color:#fff;
  background:linear-gradient(90deg,rgba(0,151,199,.13),rgba(0,151,199,.035));
  border-color:rgba(79,213,251,.14);
  box-shadow:inset 3px 0 0 rgba(48,207,247,.55);
}

/* ACTIVE NAV: MAMO OPS-like dark gradient, restrained electric accent */
.layout nav a.active{
  color:#fff;
  background:
    linear-gradient(90deg,rgba(0,173,221,.17) 0%,rgba(0,173,221,.07) 35%,rgba(255,255,255,.018) 100%),
    linear-gradient(180deg,#17242b,#121c22);
  border:1px solid rgba(40,190,230,.13);
  border-radius:7px;
  box-shadow:
    inset 3px 0 0 var(--electric),
    inset 0 1px 0 rgba(255,255,255,.035);
  transform:none;
}
.layout nav a.active:before{
  left:3px;
  top:22%;
  bottom:22%;
  width:2px;
  background:#55dfff;
  box-shadow:0 0 6px rgba(31,205,248,.68);
}
.layout nav a.active:after{
  content:"";
  position:absolute;
  left:7px;
  top:31%;
  bottom:31%;
  width:1px;
  background:rgba(138,235,255,.56);
  box-shadow:0 0 5px rgba(75,216,252,.44);
}

/* JH/MAMO style action buttons — blue only for actions, not navigation */
.primary-action,.small-btn,.btn-primary{
  color:#fff !important;
  background:linear-gradient(180deg,#15b9e8 0%,#0599cb 100%);
  border:1px solid #078ebd;
  border-radius:8px;
  font-weight:800;
  box-shadow:
    0 5px 12px rgba(4,121,162,.16),
    inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 0 rgba(0,70,95,.15);
}
.primary-action:hover,.small-btn:hover,.btn-primary:hover{
  color:#fff !important;
  background:linear-gradient(180deg,#28c8f2 0%,#0798c7 100%);
  border-color:#067fa8;
  box-shadow:
    0 7px 16px rgba(3,120,160,.22),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px);
}
/* remove sweeping shine animation from action buttons */
.primary-action:after,.small-btn:after,.btn-primary:after{display:none!important}

/* Calendar +Eintragen must always be readable */
.calendar-nav .btn-primary,
.calendar-nav .btn-primary:visited,
.calendar-nav .btn-primary:hover{
  color:#fff!important;
  opacity:1!important;
  min-width:96px;
}

/* ghost controls: MAMO-like neutral */
.btn-ghost{
  background:#f8fbfc;
  border:1px solid #d7e4e9;
  color:#176c87;
  border-radius:8px;
  box-shadow:none;
}
.btn-ghost:hover{
  background:#eef7fa;
  border-color:#b9dce7;
  color:#047fa8;
}

/* Dashboard: subtle open blue light sweeps, inspired by MAMO background */
.layout main{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 97% 4%,rgba(1,177,228,.035),transparent 24%),
    #f4f8fb;
}
.layout main:before,
.layout main:after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  border-top:1.5px solid rgba(23,182,225,.18);
  border-bottom:1px solid rgba(8,123,161,.08);
  filter:drop-shadow(0 0 4px rgba(21,183,226,.08));
}
.layout main:before{
  width:760px;
  height:260px;
  right:-450px;
  top:76px;
  transform:rotate(-11deg);
}
.layout main:after{
  width:860px;
  height:290px;
  left:-500px;
  bottom:90px;
  transform:rotate(10deg);
}

/* Cards stay bright and professional; slightly straighter */
.panel,.hero-strip,.metric-card,.summary-banner,.report-hero{
  border-radius:10px;
}
.metric-card{
  border-color:#dce7ec;
}

/* Hero gets one subtle MAMO line, no closed shape */
.hero-strip{
  position:relative;
  overflow:hidden;
}
.hero-strip:after{
  content:"";
  position:absolute;
  width:410px;
  height:110px;
  right:-255px;
  top:-54px;
  border-top:1.5px solid rgba(15,184,229,.28);
  border-bottom:1px solid rgba(7,127,166,.10);
  border-radius:50%;
  transform:rotate(-7deg);
  pointer-events:none;
}

/* Keep brand area crisp and readable */
.brand-side{
  position:relative;
  min-height:110px;
}
.brand-side strong{color:#fff}
.brand-side small{color:#c6d5db}
.powered{color:#99abb3}
.powered b{color:#f4fbfd}
.profile-mini strong{color:#fff}
.profile-mini small{color:#c9d6db}

/* General buttons/cards slightly less pill-like */
.btn,.primary-action,.small-btn,.btn-primary,.btn-secondary,.btn-ghost{
  border-radius:8px;
}
.year-select{border-radius:9px}


/* ===== V6.3 – remove half-circles; use clean technical light lines ===== */

/* remove all rounded sweep effects from sidebar/dashboard */
.layout aside:before,
.layout aside:after,
.layout aside .brand-side:after,
.layout main:before,
.layout main:after,
.hero-strip:after{
  border-radius:0 !important;
}

/* sidebar: two slim diagonal light lines, open-ended */
.layout aside:before{
  width:320px !important;
  height:0 !important;
  left:-125px !important;
  top:270px !important;
  border:0 !important;
  border-top:2px solid rgba(54,214,255,.78) !important;
  transform:rotate(8deg) !important;
  box-shadow:
    0 0 5px rgba(54,214,255,.55),
    0 0 14px rgba(14,157,201,.18) !important;
}

.layout aside:after{
  width:290px !important;
  height:0 !important;
  right:-125px !important;
  bottom:150px !important;
  border:0 !important;
  border-top:2px solid rgba(39,195,237,.60) !important;
  transform:rotate(-10deg) !important;
  box-shadow:
    0 0 4px rgba(39,195,237,.42),
    0 0 12px rgba(11,136,177,.13) !important;
}

.layout aside .brand-side:after{
  content:"";
  position:absolute;
  width:280px !important;
  height:0 !important;
  left:-105px !important;
  top:292px !important;
  border:0 !important;
  border-top:1px solid rgba(131,232,255,.28) !important;
  transform:rotate(8deg) !important;
  pointer-events:none;
}

/* dashboard background: subtle straight technical strokes */
.layout main:before{
  width:520px !important;
  height:0 !important;
  right:-180px !important;
  top:105px !important;
  border:0 !important;
  border-top:1.5px solid rgba(23,182,225,.13) !important;
  transform:rotate(-8deg) !important;
  filter:drop-shadow(0 0 3px rgba(21,183,226,.05)) !important;
}

.layout main:after{
  width:580px !important;
  height:0 !important;
  left:-210px !important;
  bottom:155px !important;
  border:0 !important;
  border-top:1px solid rgba(8,123,161,.08) !important;
  transform:rotate(9deg) !important;
  filter:none !important;
}

/* hero strip: short straight accent line only */
.hero-strip:after{
  width:180px !important;
  height:0 !important;
  right:20px !important;
  top:18px !important;
  border:0 !important;
  border-top:1.5px solid rgba(15,184,229,.18) !important;
  transform:rotate(-4deg) !important;
}

/* keep the overall look crisp */
.layout aside{
  background:linear-gradient(180deg,#11191f 0%,#0d1419 52%,#080d11 100%) !important;
}


/* ===== V7 – Sidebar bottom accents + Admin + Reports ===== */

/* Remove all sidebar top/middle decorative strokes */
.layout aside:before,
.layout aside .brand-side:after{
  display:none !important;
}

/* Only a gentle curved dual stripe at the bottom */
.layout aside:after{
  content:"";
  display:block !important;
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:430px !important;
  height:120px !important;
  right:-270px !important;
  bottom:68px !important;
  border:0 !important;
  border-top:2px solid rgba(47,205,247,.58) !important;
  border-bottom:1px solid rgba(12,126,166,.28) !important;
  border-radius:50% !important;
  transform:rotate(-8deg) !important;
  box-shadow:
    0 -1px 5px rgba(46,209,250,.42),
    0 -4px 14px rgba(16,160,202,.12) !important;
}

/* second lower curve without interfering with navigation */
.side-bottom:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:390px;
  height:108px;
  right:-250px;
  bottom:34px;
  border-top:1px solid rgba(114,228,255,.28);
  border-radius:50%;
  transform:rotate(-8deg);
  pointer-events:none;
}
.side-bottom{position:relative;z-index:1}
.account-link,.logout{
  display:block;
  margin-top:10px;
  color:#d7e4e9;
  font-size:11px;
  transition:.16s ease;
}
.account-link:hover,.logout:hover{color:#65dcff}

/* Admin */
.admin-hero{
  background:linear-gradient(135deg,#fff,#f4fbfd);
  border:1px solid #dce8ed;
  border-radius:10px;
  padding:22px;
  margin-bottom:14px;
}
.admin-hero h2{margin:4px 0 5px;font-size:23px}
.admin-hero p{margin:0;color:#758792}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.admin-card{
  background:#fff;
  border:1px solid #dce7ec;
  border-radius:10px;
  padding:18px;
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:14px;
  align-items:center;
  transition:.18s ease;
}
.admin-card:hover{transform:translateY(-2px);border-color:#b9dce8;box-shadow:0 10px 24px rgba(30,70,90,.07)}
.admin-card h3{margin:0 0 4px;font-size:16px}
.admin-card p{margin:0;color:#80909a;font-size:11px}
.admin-icon{width:46px;height:46px;border-radius:9px;background:#e9f7fc;display:grid;place-items:center;font-size:20px}
.admin-note p{color:#647681;line-height:1.55}
.account-panel{max-width:900px}
.success-box{background:#e9f8ef;color:#1a7d50;border:1px solid #c7ebd7;padding:11px 13px;border-radius:8px;margin-bottom:15px}

/* Reporting */
.report-builder{padding:20px}
.report-form-v7{
  display:grid;
  grid-template-columns:180px 180px minmax(260px,1fr) auto;
  gap:12px;
  align-items:end;
}
.report-form-v7 label{display:grid;gap:6px;color:#586a75;font-size:11px;font-weight:700}
.report-form-v7 select{width:100%}
.report-hints{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.report-hints>div{background:#f7fafc;border:1px solid #e4edf1;border-radius:9px;padding:12px}
.report-hints b,.report-hints span{display:block}
.report-hints b{font-size:12px;margin-bottom:3px}
.report-hints span{font-size:10px;color:#82919a;line-height:1.4}

.report-v7{max-width:1400px;margin:0 auto}
.report-summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.report-summary-strip span,.report-mini-cards span{background:#f7fafc;border:1px solid #e1ebef;border-radius:8px;padding:11px}
.report-summary-strip small,.report-summary-strip b,.report-mini-cards small,.report-mini-cards b{display:block}
.report-summary-strip small,.report-mini-cards small{color:#84939c;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.report-summary-strip b,.report-mini-cards b{margin-top:3px}
.report-mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.timesheet-report{font-size:10px}
.timesheet-report th,.timesheet-report td{padding:7px 8px}
.weekend-report td{background:#fff5e7!important}
.timesheet-report tfoot th{background:#eef6f9}
.print-sheet table{width:100%;border-collapse:collapse}
.print-sheet th,.print-sheet td{border-bottom:1px solid #e1e8ec;padding:9px;text-align:left}
.print-sheet thead th{background:#f2f7f9;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.print-sign{display:flex;justify-content:space-between;margin-top:24px;padding-top:12px;border-top:1px solid #dce5e9;color:#7d8d96;font-size:10px}

@media(max-width:1100px){
  .report-form-v7{grid-template-columns:1fr 1fr}
  .admin-grid{grid-template-columns:1fr}
}
@media print{
  .layout aside,.top,.app-footer{display:none!important}
  .layout{display:block!important}
  main{padding:0!important;max-width:none!important;background:#fff!important}
  .print-sheet{box-shadow:none!important;border:0!important;padding:0!important}
  .print-head button{display:none!important}
  .weekend-report td{background:#fff3df!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== V7.3 – Inline Monatsbearbeitung ===== */
.premium-filter{display:flex;align-items:end;justify-content:space-between;gap:12px}
.month-edit-actions{display:flex;align-items:center}
.month-edit-mode{padding-bottom:14px}
.month-save-bar{position:sticky;top:0;z-index:8;background:linear-gradient(180deg,#fff,#f6fbfd);border:1px solid #cfe3eb;border-radius:8px;padding:10px 12px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 7px 18px rgba(35,72,90,.08)}
.month-save-bar b,.month-save-bar small{display:block}.month-save-bar small{color:#758690;margin-top:2px;font-size:9px}.month-save-controls{display:flex;gap:8px}
.inline-edit-list{overflow-x:auto}
.time-head.edit-head,.time-row.inline-edit-row{grid-template-columns:72px 120px 88px 88px 64px 62px 62px 68px 58px minmax(150px,1fr);min-width:1080px}
.inline-edit-row{padding:7px 8px}
.inline-edit-row select,.inline-edit-row input{width:100%;min-height:32px;border:1px solid #cedce2;border-radius:6px;background:#fff;padding:5px 6px;font-size:10px;outline:none}
.inline-edit-row select:focus,.inline-edit-row input:focus{border-color:#17abd9;box-shadow:0 0 0 2px rgba(14,170,217,.10)}
.inline-time{min-width:82px}.inline-break{min-width:55px}.inline-note{min-width:140px}
.inline-confirm{display:flex;justify-content:center;align-items:center}.inline-confirm input{width:17px;height:17px;min-height:auto;accent-color:#1ca36c}.inline-confirm span{display:none}
.calc-cell{white-space:nowrap}
.inline-edit-row.is-weekend{background:#fff1dc;border-left:4px solid #efa94d}
.inline-edit-row.is-confirmed{box-shadow:inset 3px 0 0 #35b978}
.inline-edit-row.is-weekend.is-confirmed{box-shadow:inset 4px 0 0 #efa94d}
.month-save-bottom{display:flex;justify-content:flex-end;padding-top:14px}
@media(max-width:1000px){.premium-filter{align-items:stretch;flex-direction:column}.month-edit-actions{justify-content:flex-end}}


/* ===== V7.4 – schönere Monatsbearbeitung ===== */
.time-panel.month-edit-mode{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,254,.98)),
    linear-gradient(135deg, rgba(10,183,232,.035), rgba(7,129,179,.02));
}

.time-summary-strip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:14px 0 16px;
}

.summary-pill{
  border:1px solid #d7e5eb;
  background:linear-gradient(180deg,#ffffff,#f8fcfe);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 8px 22px rgba(29,70,93,.06);
  min-height:70px;
}

.summary-pill small{
  display:block;
  color:#79909d;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.summary-pill strong{
  display:block;
  color:#1f3340;
  font-size:20px;
  line-height:1.1;
  font-weight:800;
}

.summary-pill.needs-attention{
  border-color:rgba(242,165,66,.35);
  background:linear-gradient(180deg,#fff9f0,#fff4e5);
}

.month-save-bar{
  top:10px;
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;
  background:
    linear-gradient(135deg, rgba(10,182,230,.07), rgba(255,255,255,.94) 44%),
    linear-gradient(180deg,#ffffff,#f7fbfd);
  border:1px solid rgba(86,177,210,.22);
  box-shadow:
    0 12px 30px rgba(25,76,101,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.month-save-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.edit-mode-chip{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,180,230,.10);
  color:#048fbd;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.month-save-copy b{
  font-size:20px;
  color:#23343e;
  line-height:1.1;
}

.month-save-copy small{
  color:#728793;
  font-size:12px;
  line-height:1.35;
}

.month-save-controls .btn{
  min-height:42px;
  padding:0 16px;
  font-weight:800;
}

.inline-edit-list{
  overflow:auto;
  padding-bottom:6px;
}

.time-head.edit-head{
  position:sticky;
  top:88px;
  z-index:4;
  background:linear-gradient(180deg,#f2f9fc,#ebf5f9);
  border:1px solid #d8e9ef;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:8px;
  box-shadow:0 6px 18px rgba(24,78,107,.06);
}

.time-head.edit-head span{
  color:#67808d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.time-head.edit-head,.time-row.inline-edit-row{
  grid-template-columns:86px 132px 88px 88px 70px 70px 70px 76px 62px minmax(220px,1fr);
  min-width:1180px;
}

.time-row.inline-edit-row{
  align-items:center;
  gap:10px;
  margin-bottom:9px;
  padding:12px 14px;
  border:1px solid #dfe9ee;
  border-radius:14px;
  background:
    linear-gradient(180deg,#ffffff,#fafdfe);
  box-shadow:0 8px 20px rgba(25,70,94,.05);
}

.inline-edit-row:hover{
  border-color:#c7e3ed;
  box-shadow:0 12px 26px rgba(18,100,134,.08);
}

.inline-edit-row.is-weekend{
  background:linear-gradient(180deg,#fff8ef,#fff2e1);
  border-color:#f2d4a8;
  border-left:4px solid #efa94d;
}

.inline-edit-row.is-confirmed{
  box-shadow:
    inset 4px 0 0 #35b978,
    0 8px 20px rgba(25,70,94,.05);
}

.inline-edit-row.is-weekend.is-confirmed{
  box-shadow:
    inset 4px 0 0 #efa94d,
    0 8px 20px rgba(25,70,94,.05);
}

.time-date{
  display:flex;
  align-items:center;
}

.date-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:62px;
  padding:8px 10px;
  border-radius:12px;
  background:linear-gradient(180deg,#f4f9fc,#edf6fa);
  border:1px solid #d4e6ee;
}

.date-chip b{
  font-size:16px;
  color:#203340;
  line-height:1;
}

.date-chip small{
  margin-top:4px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#738a97;
}

.date-chip .weekend-day{color:#b66a00}

.inline-edit-row select,.inline-edit-row input{
  min-height:38px;
  border:1px solid #cfdee5;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#fbfdfe);
  padding:8px 10px;
  font-size:12px;
  color:#203340;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85);
}

.inline-edit-row input[disabled],.inline-edit-row select[disabled]{
  opacity:.6;
  background:#f5f7f9;
}

.inline-break{
  text-align:center;
}

.calc-cell{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 8px;
  border-radius:10px;
  background:#f6fafc;
  border:1px solid #deeaef;
  color:#28414e;
  font-weight:700;
}

strong.calc-cell.positive, .calc-cell.positive{background:#eefaf4;border-color:#cfeadb;color:#198152}
strong.calc-cell.negative, .calc-cell.negative{background:#fff2f3;border-color:#f0ced3;color:#cf3f4d}
strong.calc-cell.neutral, .calc-cell.neutral{background:#f6fafc;border-color:#deeaef;color:#5c7582}

.inline-confirm{
  justify-content:flex-start;
}

.inline-confirm input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.confirm-pill{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #d1dde3;
  background:linear-gradient(180deg,#ffffff,#f7fbfd);
  color:#95a7b1;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.inline-confirm input:checked + .confirm-pill{
  color:#0d8f60;
  border-color:#a9dec9;
  background:linear-gradient(180deg,#f2fff8,#e6f8ee);
  box-shadow:0 0 0 3px rgba(53,185,120,.10);
}

.inline-note{
  min-width:220px;
}

.month-save-bottom{
  padding-top:10px;
}

.month-save-bottom .btn{
  min-height:46px;
  padding:0 18px;
  font-weight:800;
}

@media (max-width: 1250px){
  .time-summary-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 860px){
  .time-summary-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .month-save-bar{
    flex-direction:column;
    align-items:flex-start;
  }
  .month-save-controls{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

/* ===== V7.5 – Tabellenalignment & editierbare Feiertage ===== */

/* Header darf die erste Tageszeile nicht mehr überdecken */
.time-head.edit-head{
  position:relative !important;
  top:auto !important;
  z-index:2 !important;
  margin:0 0 10px 0 !important;
}

/* Einheitliches Raster für Kopf und Datenzeilen */
.time-head.edit-head,
.time-row.inline-edit-row{
  display:grid !important;
  grid-template-columns:
    88px
    132px
    92px
    92px
    72px
    72px
    72px
    78px
    62px
    minmax(210px,1fr) !important;
  column-gap:10px !important;
  align-items:center !important;
  min-width:1210px !important;
}

.time-head.edit-head{
  padding:11px 14px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#edf7fb,#e7f2f7) !important;
  border:1px solid #d1e3ea !important;
}

.time-row.inline-edit-row{
  padding:10px 14px !important;
  min-height:62px !important;
}

/* Date fields align visually with all other controls */
.date-chip{
  width:70px !important;
  min-width:70px !important;
  padding:8px 9px !important;
}

.inline-edit-row select,
.inline-edit-row input{
  height:38px !important;
  min-height:38px !important;
}

.inline-edit-row .inline-time{
  min-width:0 !important;
}

.inline-edit-row .inline-break{
  min-width:0 !important;
}

/* Feiertage visibly editable */
.inline-edit-row select option[value="holiday"]{
  font-weight:700;
}

.inline-edit-row:has(select option[value="holiday"]:checked){
  border-color:#d9cbed;
}

/* Do not grey out holiday time fields; only actual non-time statuses get JS-disabled */
.inline-edit-row input[type="time"]:not(:disabled){
  background:#fff !important;
  color:#203340 !important;
}

/* Weekend remains visually distinct without breaking column width */
.inline-edit-row.is-weekend{
  border-left-width:4px !important;
}

/* Top summary has slightly more separation from the edit table */
.time-summary-strip{
  margin-bottom:18px !important;
}

.month-save-bar{
  position:relative !important;
  top:auto !important;
  margin-bottom:18px !important;
}

/* Give table its own clean section */
.inline-edit-list{
  padding-top:0 !important;
}

/* Header labels centered with their respective controls */
.time-head.edit-head span{
  display:flex;
  align-items:center;
  min-height:24px;
}

/* In narrower windows keep one horizontal scroll area, no visual overlap */
@media(max-width:1350px){
  .inline-edit-list{
    overflow-x:auto !important;
    padding-bottom:12px;
  }
}

/* ===== V7.6 – Mitarbeiterarchiv ===== */
.employee-view-tabs{
  display:flex;
  gap:8px;
  margin:0 0 12px;
  flex-wrap:wrap;
}
.employee-view-tabs a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:8px;
  border:1px solid #d5e2e8;
  background:#fff;
  color:#566c78;
  font-size:11px;
  font-weight:750;
  transition:.16s ease;
}
.employee-view-tabs a b{
  min-width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#eef5f8;
  color:#53707f;
  font-size:9px;
}
.employee-view-tabs a:hover{border-color:#acd9e8;color:#0789b7}
.employee-view-tabs a.active{
  background:linear-gradient(180deg,#17b6e5,#079acb);
  border-color:#078fbd;
  color:#fff;
  box-shadow:0 6px 14px rgba(5,145,192,.16);
}
.employee-view-tabs a.active b{background:rgba(255,255,255,.18);color:#fff}

.archived-employee-row td{
  background:#f7f9fa;
  color:#7b8991;
}
.archived-employee-row .avatar{
  filter:grayscale(.75);
  opacity:.72;
}
.status.inactive{
  background:#edf0f2;
  color:#6e7c84;
}

.archive-zone{
  margin-top:24px;
  padding:18px;
  border:1px solid #e0e7ea;
  border-radius:10px;
  background:linear-gradient(180deg,#fafcfd,#f5f8f9);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.archive-zone h3{margin:4px 0 5px;font-size:16px}
.archive-zone p{margin:0;color:#71828b;font-size:11px;line-height:1.5;max-width:700px}
.btn-archive{
  background:#fff;
  color:#9b4c3e;
  border:1px solid #e5c8c0;
  box-shadow:none;
}
.btn-archive:hover{
  background:#fff4f1;
  border-color:#dca99d;
}
.btn-reactivate{
  background:linear-gradient(180deg,#2fbe84,#199b68);
  color:#fff;
  border:1px solid #168b5e;
  box-shadow:0 5px 12px rgba(24,143,95,.15);
}

/* ===== V7.7 – Abwesenheiten / Export ===== */
.absence-hint{
  margin-top:14px;
  padding:11px 13px;
  border-radius:8px;
  border:1px solid #d8e8ee;
  background:#f4fafc;
  color:#607681;
  font-size:10px;
  line-height:1.5;
}
.absence-hint b{color:#294b5b}
.badge.unpaid_leave{
  background:#f3f0ed;
  color:#715d50;
  border:1px solid #ded5ce;
}

/* ===== V7.8 – Vorjahres-Überstunden ===== */
.overtime-layout-v78{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:14px;
  margin-bottom:14px;
}
.overtime-forms-stack{
  display:grid;
  gap:14px;
}
.carryover-panel{
  background:
    linear-gradient(135deg,rgba(9,169,220,.055),rgba(255,255,255,.96) 45%),
    #fff;
  border-color:#cfe6ee;
}
.carryover-panel h2{margin-bottom:5px}
.carryover-years{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.carryover-years label{margin:0}
@media(max-width:1000px){
  .overtime-layout-v78{grid-template-columns:1fr}
}

/* ===== V7.9 – transparentes Überstundenkonto ===== */
.overtime-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.ot-kpi{
  background:#fff;
  border:1px solid #dce7ec;
  border-radius:10px;
  padding:16px;
  box-shadow:0 7px 20px rgba(29,67,87,.045);
}
.ot-kpi small,.ot-kpi strong,.ot-kpi span{display:block}
.ot-kpi small{color:#718590;text-transform:uppercase;letter-spacing:.07em;font-size:9px;font-weight:800}
.ot-kpi strong{font-size:24px;margin:5px 0 4px;color:#263942}
.ot-kpi span{color:#8a99a2;font-size:9px}
.ot-kpi.positive-card strong{color:#148b5b}
.ot-kpi.negative-card strong{color:#d04c58}

.overtime-breakdown-panel{margin-bottom:14px}
.ot-breakdown-table{display:grid}
.ot-breakdown-row{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(115px,.7fr)) 90px;
  gap:12px;
  align-items:center;
  padding:11px 10px;
  border-bottom:1px solid #e8eff2;
}
.ot-breakdown-row:last-child{border-bottom:0}
.ot-breakdown-row.ot-head{
  color:#718590;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:#f6fafc;
  border-radius:8px;
}
.ot-breakdown-row>span,.ot-breakdown-row>strong{font-size:11px}
.ot-breakdown-row>strong{font-size:13px}

.ot-detail-panel{margin-bottom:14px}
.ot-detail-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:5px 0 16px;
}
.ot-detail-summary span{
  background:#f6fafc;
  border:1px solid #dde9ee;
  border-radius:9px;
  padding:11px;
}
.ot-detail-summary small,.ot-detail-summary b{display:block}
.ot-detail-summary small{font-size:9px;color:#788a94;text-transform:uppercase;letter-spacing:.05em}
.ot-detail-summary b{font-size:16px;margin-top:4px}

.movement-list{display:grid}
.movement-row{
  display:grid;
  grid-template-columns:90px 130px minmax(0,1fr) 95px;
  gap:12px;
  align-items:center;
  padding:10px 5px;
  border-bottom:1px solid #e8eff2;
}
.movement-date{font-size:10px;color:#6f828d}
.movement-type{
  display:inline-flex;
  width:max-content;
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
}
.movement-type.time{background:#e9f7ef;color:#228252}
.movement-type.correction{background:#eef5f8;color:#486a79}
.movement-type.carryover{background:#e8f6fc;color:#087eab}

.overtime-layout-v78{
  grid-template-columns:1fr 1fr;
  align-items:start;
}
@media(max-width:1100px){
  .overtime-kpis{grid-template-columns:repeat(2,1fr)}
  .ot-breakdown-table{overflow-x:auto}
  .ot-breakdown-row{min-width:900px}
  .overtime-layout-v78{grid-template-columns:1fr}
}
@media(max-width:700px){
  .overtime-kpis,.ot-detail-summary{grid-template-columns:1fr}
}

/* ===== V8.0 – Urlaubskorrekturen / Altbestand ===== */
.leave-row-v8{
  grid-template-columns:minmax(220px,1.5fr) repeat(5,minmax(86px,.55fr)) 105px;
}
.leave-admin-grid{
  display:grid;
  grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr);
  gap:14px;
  margin-top:14px;
}
.leave-adjust-panel{
  background:
    linear-gradient(135deg,rgba(9,169,220,.05),rgba(255,255,255,.98) 44%),
    #fff;
  border-color:#cfe5ed;
}
.leave-adjust-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.leave-adjust-fields label{margin:0}
.leave-adjust-help{
  display:grid;
  gap:6px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:8px;
  background:#f6fafc;
  border:1px solid #e0ebef;
  font-size:10px;
  color:#677d88;
}
.leave-adjust-history{display:grid}
.leave-adjust-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 2px;
  border-bottom:1px solid #e8eff2;
}
.leave-adjust-row:last-child{border-bottom:0}
.leave-adjust-row strong,.leave-adjust-row small{display:block}
.leave-adjust-row small{font-size:9px;color:#7d8e98;margin-top:2px}
.leave-adjust-row>b{min-width:70px;text-align:right}
@media(max-width:1150px){
  .leave-row-v8{min-width:930px}
  .leave-admin-grid{grid-template-columns:1fr}
}

/* ===== V8.1 – Arbeitszeitmodell ===== */
.working-model-hint{
  margin:8px 0 13px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #d6e8ee;
  background:#f4fafc;
  color:#627985;
  font-size:10px;
  line-height:1.45;
}
.working-model-hint b{color:#285466}

/* ===== V8.3 – Wochen-Regelzeiten ===== */
.week-pattern-table{display:grid;gap:7px;margin-top:8px}
.week-pattern-row{display:grid;grid-template-columns:120px 140px 140px 130px 90px;gap:10px;align-items:center;padding:9px 10px;border:1px solid #dfe9ed;border-radius:9px;background:#fff}
.week-pattern-head{background:#eef6f9;color:#6c818c;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.week-pattern-row input{min-height:38px;border:1px solid #cfdde3;border-radius:8px;padding:7px 8px;background:#fff}
.week-pattern-row.weekend-pattern{background:#fff6e9;border-color:#f0d8b5}
.pause-input{display:flex;align-items:center;gap:6px}.pause-input input{width:75px}.pause-input span{font-size:10px;color:#71838d}
.pattern-target{font-weight:800;color:#27414d}.readonly-field{background:#f3f6f8!important;color:#6f7e86!important}
.edit-form label small{display:block;color:#84949d;font-size:9px;margin-top:4px}
@media(max-width:900px){.week-pattern-table{overflow-x:auto}.week-pattern-row{min-width:680px}}

/* ===== V8.4 – Mitarbeiterkonten / Urlaub live ===== */
.employee-account-overview{
  margin-top:22px;
  border-top:1px solid #e1eaee;
  padding-top:20px;
}
.employee-account-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:12px;
}
.employee-account-head h3{margin:4px 0 0;font-size:18px}
.employee-account-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.employee-account-card{
  border:1px solid #d9e7ec;
  border-radius:12px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#f9fcfd);
  box-shadow:0 8px 22px rgba(30,69,88,.05);
}
.leave-account-card{border-top:3px solid #18addb}
.overtime-account-card{border-top:3px solid #6576d9}
.account-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
}
.account-card-title>span{
  width:37px;height:37px;border-radius:10px;
  display:grid;place-items:center;
  background:#e7f7fc;color:#068dbd;font-size:17px;
}
.overtime-account-card .account-card-title>span{background:#efedff;color:#6758c7}
.account-card-title b,.account-card-title small{display:block}
.account-card-title b{font-size:14px}
.account-card-title small{font-size:9px;color:#82929b;margin-top:2px}
.account-values{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.account-values>span{
  border:1px solid #e1eaee;
  background:#fff;
  border-radius:8px;
  padding:9px 10px;
}
.account-values small,.account-values b{display:block}
.account-values small{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#82919a}
.account-values b{font-size:13px;margin-top:3px}
.account-values .account-highlight{
  background:#eef9fd;
  border-color:#c8e8f3;
}
.account-values .account-highlight b{font-size:17px;color:#0787b5}
.vacation-range-list{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #e5edf0;
  display:grid;
  gap:5px;
}
.range-title{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#80919a;margin-bottom:2px}
.vacation-range-list>div{
  display:flex;justify-content:space-between;gap:10px;
  font-size:10px;color:#536974;
}
.account-empty{margin-top:12px;color:#8b999f;font-size:10px}
.account-detail-link{
  display:inline-block;margin-top:12px;
  color:#078abb;font-size:10px;font-weight:800;
}
.leave-row-v8{
  grid-template-columns:minmax(210px,1.5fr) repeat(6,minmax(82px,.52fr)) 100px!important;
}
@media(max-width:1050px){
  .employee-account-grid{grid-template-columns:1fr}
  .leave-row-v8{min-width:1020px}
}

/* ===== V8.5 – verständliche Urlaubsanzeige ===== */
.leave-current b{color:#087fa9}
.leave-rest.negative-rest{
  background:#fff2f3;
  border-color:#efc9ce;
}
.leave-rest.negative-rest b{color:#cb3f4e!important}

.account-current{
  background:#f0f9fd!important;
  border-color:#cbe8f2!important;
}
.account-current b{color:#0787b5}

.account-highlight.negative-rest{
  background:#fff1f2!important;
  border-color:#edc7cc!important;
}
.account-highlight.negative-rest b{color:#c93e4d!important}

.leave-explain-line{
  display:grid;
  gap:4px;
  margin-top:12px;
  padding:9px 10px;
  border-radius:8px;
  background:#f5fafc;
  border:1px solid #deeaef;
  color:#687d88;
  font-size:9px;
  line-height:1.45;
}
.leave-explain-line b{color:#2f5364}

.leave-row-v8{
  grid-template-columns:minmax(210px,1.5fr) repeat(6,minmax(94px,.55fr)) 100px!important;
}

/* ===== V8.6 – Urlaub aus Überstundenkonto ===== */
.badge.vacation_overtime,
.cal-event.vacation_overtime{
  background:#e8f4ff!important;
  color:#3565a8!important;
  border-color:#bed8f3!important;
}
.cal-event.vacation_overtime{
  border-left-color:#5c8fd0!important;
}
.overtime-vacation-info{
  margin-top:10px;
  padding:10px 12px;
  border-radius:8px;
  background:#f0f5ff;
  border:1px solid #d5e1f6;
  color:#5c6f90;
  font-size:10px;
  line-height:1.5;
}


/* ===== V8.7 – Urlaub & Überstunden direkt im Stundenzettel ===== */
.timesheet-account-bar{
  position:sticky;
  bottom:8px;
  z-index:20;
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:10px;
  margin-top:14px;
  padding:10px;
  background:rgba(248,251,252,.97);
  border:1px solid #d6e3e8;
  border-radius:10px;
  box-shadow:0 -7px 22px rgba(32,61,75,.10);
  backdrop-filter:blur(7px);
}
.timesheet-account-item{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  background:#fff;
  border:1px solid #e0eaee;
  border-radius:8px;
}
.timesheet-account-item small{
  color:#788b95;
  font-size:9px;
  line-height:1.25;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.timesheet-account-item b{
  font-size:16px;
  white-space:nowrap;
}
.timesheet-account-item.leave{border-left:3px solid #18addb}
.timesheet-account-item.overtime{border-left:3px solid #6576d9}
.timesheet-account-item b.negative{color:#c74452}
.timesheet-account-item b.positive{color:#18845e}

@media(max-width:850px){
  .timesheet-account-bar{
    position:static;
    grid-template-columns:1fr;
  }
}