body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f6f8;color:#1f2933}*{box-sizing:border-box}.topbar{height:70px;background:white;border-bottom:1px solid #d9dee5;display:flex;justify-content:space-between;align-items:center;padding:0 28px}.topbar>div{display:flex;align-items:center;gap:16px}.topbar-logo{display:block;width:auto;height:38px;object-fit:contain}.topbar strong{font-size:24px;color:#245c5a;margin-right:16px}.topbar span{color:#6b7280}.shell{display:flex;min-height:calc(100vh - 70px)}aside{width:220px;background:#fff;border-right:1px solid #d9dee5;padding:18px 12px;display:flex;flex-direction:column;gap:6px}aside a{padding:11px 14px;border-radius:8px;color:#374151}aside .active{background:#eaf2f1;color:#194745;font-weight:700}main{flex:1;padding:26px;min-width:0}.pagehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.pagehead h1{margin:0}.pagehead p{margin:5px 0 0;color:#6b7280}.card{background:#fff;border:1px solid #d9dee5;border-radius:12px}.toolbar{display:flex;gap:10px;padding:12px;margin-bottom:16px}.toolbar input{flex:1}input,select,textarea{width:100%;padding:9px 10px;border:1px solid #d9dee5;border-radius:7px;font:inherit;background:#fff}input:disabled,select:disabled,textarea:disabled{background:#f8f9fa;color:#66717d}button{border:0;border-radius:8px;padding:9px 14px;background:#245c5a;color:#fff;cursor:pointer}.secondary{background:#eef1f4;color:#27323d}button:disabled{opacity:.45}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px}.listhead{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #d9dee5}.row{padding:13px 16px;border-bottom:1px solid #edf0f2;cursor:pointer}.row:hover,.row.active{background:#eaf2f1}.name{font-weight:700}.meta{font-size:12px;color:#6b7280;margin-top:4px}.badge{margin-left:8px;padding:2px 7px;border-radius:999px;background:#eef1f4}.detailhead{display:flex;justify-content:space-between;align-items:center;padding:18px}.detailhead h2{margin:0 0 4px}.detailhead small{color:#6b7280}.tabs{display:flex;border-top:1px solid #d9dee5;border-bottom:1px solid #d9dee5;padding:0 12px}.tab{background:transparent;color:#6b7280;border-radius:0;border-bottom:2px solid transparent}.tab.active{color:#245c5a;border-bottom-color:#245c5a;font-weight:700}form{padding:18px}.pane{display:none}.pane.active{display:block}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#4a5561}.msg{padding:10px 14px;border-radius:8px;margin-bottom:12px}.ok{background:#e4f3eb;color:#24633f}.err{background:#f6e7e7;color:#8a3232}@media(max-width:950px){aside{display:none}.workspace{grid-template-columns:1fr}.list{max-height:300px;overflow:auto}}@media(max-width:600px){main{padding:14px}.toolbar{flex-direction:column}.grid{grid-template-columns:1fr}.pagehead{align-items:flex-start;flex-direction:column;gap:12px}}
.history-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.history-toolbar h3{margin:0 0 4px}.history-toolbar p{margin:0;color:#6b7280}
.contract-history{display:flex;flex-direction:column;gap:10px}
.contract-card{border:1px solid #d9dee5;border-radius:10px;padding:14px;background:#fafbfc}
.contract-card.current{border-color:#245c5a;background:#f0f7f6}
.contract-card .top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.contract-card .period{font-weight:700}.contract-card .status{font-size:12px;color:#245c5a}
.contract-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;font-size:13px}
.contract-grid div span{display:block;color:#6b7280;font-size:11px;margin-bottom:2px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000}
.modal.hidden{display:none}.modal-card{background:#fff;border-radius:14px;max-width:760px;width:100%;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.22)}
.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-card>p{color:#6b7280}
.iconbtn{background:transparent;color:#374151;font-size:26px;padding:0 8px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:750px){.contract-grid{grid-template-columns:1fr 1fr}.history-toolbar{flex-direction:column}}

.monthbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.monthbar input{max-width:180px}
.summarybox{font-size:13px;color:#4a5561}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th,.data-table td{padding:9px 8px;border-bottom:1px solid #e7ebef;text-align:left}.data-table th{color:#6b7280;font-weight:700;background:#fafbfc}.status-pill{padding:2px 7px;border-radius:999px;background:#eef1f4;font-size:11px}.full-label{margin-top:14px}.table-actions button{padding:5px 8px;font-size:12px}

.payroll-card{border:1px solid #d9dee5;border-radius:10px;padding:16px;margin-bottom:14px;background:#fafbfc}
.payroll-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.payroll-totals .value{font-size:20px;font-weight:800;color:#245c5a}.payroll-totals span{display:block;color:#6b7280;font-size:11px}
.money{text-align:right;font-variant-numeric:tabular-nums}.warn{background:#fff4d8;color:#7a5a00;padding:10px 12px;border-radius:8px;margin:10px 0}
@media(max-width:700px){.payroll-totals{grid-template-columns:1fr 1fr}}

.section-separator{border:0;border-top:1px solid #d9dee5;margin:26px 0}
.annual-head{margin-bottom:8px}
.annual-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.annual-summary-grid .box{background:#f7f9fa;border:1px solid #e2e7eb;border-radius:9px;padding:11px}
.annual-summary-grid .box span{display:block;font-size:11px;color:#6b7280;margin-bottom:3px}
.annual-summary-grid .box b{font-size:16px;color:#245c5a}
.missing-months{font-size:12px;color:#8a5a00;background:#fff4d8;padding:8px 10px;border-radius:7px;margin-bottom:10px}
@media(max-width:800px){.annual-summary-grid{grid-template-columns:1fr 1fr}}

.certificate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.certificate-grid .field{border:1px solid #e2e7eb;border-radius:8px;padding:9px;background:#fafbfc}
.certificate-grid .field span{display:block;color:#6b7280;font-size:11px}
.certificate-grid .field b{font-size:14px}
.cert-error{background:#f6e7e7;color:#8a3232;padding:10px 12px;border-radius:8px;margin:10px 0}
.cert-info{background:#eaf2f1;color:#245c5a;padding:10px 12px;border-radius:8px;margin:10px 0}
@media(max-width:800px){.certificate-grid{grid-template-columns:1fr 1fr}}

.declaration-controls{display:flex;gap:8px;align-items:center;margin:10px 0 14px}
.declaration-controls select{max-width:220px}
.declaration-meta{background:#f7f9fa;border:1px solid #e2e7eb;padding:10px 12px;border-radius:8px;margin-bottom:10px;font-size:13px}

.elm-ready{background:#e4f3eb;color:#24633f;padding:11px 12px;border-radius:8px;margin:10px 0}
.elm-notready{background:#f6e7e7;color:#8a3232;padding:11px 12px;border-radius:8px;margin:10px 0}
.elm-list{margin:6px 0 0 18px;padding:0}
.elm-badge{display:inline-block;background:#fff4d8;color:#7a5a00;border-radius:999px;padding:3px 8px;font-size:11px;margin-left:6px}

.login-ok{color:#245c5a;font-weight:700}
.closing-card{border:1px solid #d9dee5;background:#fafbfc;border-radius:8px;padding:10px 12px;margin:10px 0}
.check-ok{color:#24633f}.check-bad{color:#8a3232}
.payroll-workflow-legend{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 16px;font-size:12px;color:#59656f}.payroll-workflow-legend span{display:flex;align-items:center;gap:6px}.payroll-workflow{display:flex;flex-direction:column;gap:10px}.workflow-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid #d9dee5;border-left:5px solid #c8d0d5;border-radius:10px;padding:12px 14px;background:#fff}.workflow-step.green{border-left-color:#2f855a;background:#f2faf5}.workflow-step.yellow{border-left-color:#d69e2e;background:#fffaf0}.workflow-step.red{border-left-color:#c53030;background:#fff5f5}.workflow-light{display:inline-block;width:15px;height:15px;border-radius:50%;background:#aab3ba;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}.workflow-light.green{background:#38a169}.workflow-light.yellow{background:#ecc94b}.workflow-light.red{background:#e53e3e}.workflow-number{font-size:12px;font-weight:800;color:#65717b}.workflow-copy b{display:block;color:#27323d}.workflow-copy small{display:block;color:#66717d;margin-top:3px;line-height:1.35}.workflow-step button{min-width:145px}.workflow-step button:disabled{cursor:not-allowed}@media(max-width:650px){.workflow-step{grid-template-columns:28px minmax(0,1fr)}.workflow-step button{grid-column:1/-1;width:100%}}
.caregiver-hours-card{border:1px solid #cbd8d7;border-radius:11px;background:#f8fbfb;padding:14px;margin:4px 0 18px}.caregiver-hours-card .history-toolbar{margin-bottom:10px}.caregiver-hours-input{max-width:130px;text-align:right;font-variant-numeric:tabular-nums}.caregiver-hours-total{font-weight:800;color:#245c5a}.caregiver-hours-other{color:#8a5a00;font-size:12px}
.pane{overflow-x:auto}.data-table,.admin-table{min-width:650px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #4f9c98;outline-offset:2px}
[hidden]{display:none!important}
@media(max-width:600px){.tabs{overflow-x:auto}.monthbar,.declaration-controls{align-items:stretch;flex-direction:column}.monthbar input,.declaration-controls select{max-width:none}.modal-card{max-height:calc(100vh - 24px);overflow:auto}}
.app-footer{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:18px 24px;border-top:1px solid #d9dee5;background:#fff;color:#6b7280;font-size:12px;text-align:center}
@media(max-width:600px){.app-footer{gap:5px;flex-direction:column;padding:14px}}
.topbar .app-version{font-size:50%;margin-left:7px;vertical-align:middle}
.monthbar label{min-width:210px}.monthbar select{min-width:210px}
.checkbox-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}.checkbox-label input[type="checkbox"]{width:auto;flex:0 0 auto;margin:0}
.payroll-description{white-space:pre-line}
.archive-filters{display:grid;grid-template-columns:minmax(240px,1fr) minmax(180px,240px);gap:12px;margin-bottom:14px}.archive-month{border:1px solid #d9dee5;border-radius:9px;margin-bottom:10px;background:#fff;overflow:hidden}.archive-month summary{display:flex;justify-content:space-between;gap:16px;padding:13px 15px;background:#f7f9fa;cursor:pointer;font-weight:700;color:#27323d}.archive-month summary span:last-child{font-size:12px;font-weight:500;color:#6b7280}.archive-month-body{overflow-x:auto;padding:0 12px 12px}.archive-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:12px;font-size:13px;color:#4a5561}.archive-pagination button{padding:6px 10px}@media(max-width:600px){.archive-filters{grid-template-columns:1fr}.archive-month summary{flex-direction:column;gap:4px}}
.fixed-expense-section{grid-column:1/-1;border-top:1px solid #e2e7eb;margin-top:8px;padding-top:16px}.fixed-expense-section h3{margin:0 0 4px}.fixed-expense-section>p{margin:0 0 14px;color:#6b7280}.fixed-expense-section>div>button{margin:14px 0}.fixed-expense-history{margin-top:8px;overflow-x:auto}
/* Compact grouped detail navigation; all wide content stays inside its card. */
.shell,main,.workspace,.detail,form,.pane{max-width:100%}.detail{min-width:0;overflow:hidden}.tab-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 12px 8px;border-top:1px solid #d9dee5;background:#f7f9fa}.tab-group{min-width:0;padding:9px 8px;background:transparent;color:#4a5561;white-space:normal;line-height:1.2}.tab-group.active{background:#245c5a;color:#fff;font-weight:700}.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:7px 12px;border-top:0;overflow:visible}.tab{flex:0 1 auto;min-width:0;padding:8px 11px;white-space:normal}.tab[hidden]{display:none}.pane{min-width:0}.pane>.data-table,.pane>table{max-width:100%}.fixed-expense-section,.summarybox{min-width:0;max-width:100%}.fixed-expense-history,.archive-month-body,#timeTable,#absenceTable,#mileageTable,#expenseTable,#payrollItems,#annualTable{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){.tab-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tab{width:100%}.detailhead{align-items:flex-start;gap:10px;flex-wrap:wrap}.detailhead>div:last-child{display:flex;flex-wrap:wrap;gap:6px}form{padding:14px 12px}.data-table,.admin-table{min-width:580px}}
@media(max-width:380px){.tab-groups,.tabs{grid-template-columns:1fr}.topbar{padding:0 14px}.topbar span:not(.app-version){display:none}}
.mobile-navigation{display:none}
@media(max-width:950px){.mobile-navigation{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;margin:-10px 0 18px;padding:10px 12px;border:1px solid #d9dee5;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(31,41,51,.08)}.mobile-navigation label{flex:0 0 auto}.mobile-navigation select{min-width:0}}

/* Logisch gruppierte Hauptnavigation. Bereichsfarben bleiben bewusst dezent. */
aside.app-sidebar{width:285px;padding:15px 12px;gap:7px;overflow-y:auto;position:sticky;top:0;height:calc(100vh - 70px)}
.nav-group{--nav-color:#64748b;display:flex;flex-direction:column;gap:3px;padding:11px 7px 12px;border:1px solid #e5e9ed;border-color:color-mix(in srgb,var(--nav-color) 13%,#e5e9ed);border-radius:11px;background:#fbfcfc;background:color-mix(in srgb,var(--nav-color) 4%,white)}
.nav-group h2{margin:0 9px 7px;color:var(--nav-color);font-size:13px;line-height:1.25;font-weight:850;letter-spacing:.055em;text-transform:uppercase}
.nav-group a{position:relative;display:grid;grid-template-columns:23px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px;border-left:4px solid transparent;border-radius:8px;text-decoration:none;cursor:pointer;font-size:15px;font-weight:600;line-height:1.25}
.nav-group a:hover{background:color-mix(in srgb,var(--nav-color) 9%,white);color:#1f2933}.nav-group a.active{border-left-color:var(--nav-color);background:#eef4f3;background:color-mix(in srgb,var(--nav-color) 17%,white);color:#17212b;font-weight:800;box-shadow:0 2px 7px rgba(31,41,51,.09)}
.nav-icon{color:var(--nav-color);font-size:18px;font-weight:800;text-align:center}.nav-icon.nav-dot{font-size:11px;text-shadow:0 0 0 var(--nav-color)}.nav-children{position:relative;display:flex;flex-direction:column;margin:2px 0 2px 24px;padding-left:15px}
.nav-children:before{content:"";position:absolute;left:3px;top:1px;bottom:9px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--nav-color) 43%,#d9dee5)}
.nav-children a{display:block;padding:8px 10px;border-left:0;font-size:14px;font-weight:550;color:#4f5e6b}.nav-children a:before{content:"";position:absolute;left:-12px;top:50%;width:10px;border-top:2px solid color-mix(in srgb,var(--nav-color) 43%,#d9dee5)}
.nav-count,.unread-badge{justify-self:end;min-width:20px;padding:2px 6px;border-radius:999px;background:#d97706;color:#fff!important;font-size:11px;font-weight:800;text-align:center}.nav-count.critical{background:#b42318}.nav-overview{--nav-color:#d97706}.nav-personnel{--nav-color:#247a72}.nav-work{--nav-color:#2878a5}.nav-payroll{--nav-color:#7656a8}.nav-finance{--nav-color:#34577c}.nav-system{--nav-color:#687580;margin-top:auto;border-top:1px solid #d9dee5;border-bottom:0}.app-sidebar.compact-role-nav .nav-system{margin-top:0}.nav-group:not(:has(a:not([hidden]))){display:none}
@media(max-width:950px){aside.app-sidebar{display:none}}

/* Vor erfolgreicher Anmeldung bleibt die Anwendung vollständig verdeckt. */
body.auth-pending{overflow:hidden}.auth-pending>.topbar,.auth-pending>.shell,.auth-pending>.app-footer{display:none}
.login-cover{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 18% 16%,rgba(71,151,143,.30),transparent 34%),radial-gradient(circle at 88% 82%,rgba(90,74,142,.22),transparent 34%),linear-gradient(135deg,#153f3e 0%,#245c5a 45%,#183b4e 100%)}
.login-cover.hidden{display:none}.login-cover:before,.login-cover:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.10);border-radius:50%;pointer-events:none}.login-cover:before{width:440px;height:440px;left:-170px;bottom:-210px}.login-cover:after{width:330px;height:330px;right:-110px;top:-130px}
.login-cover-card{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,440px);width:min(940px,100%);min-height:520px;overflow:hidden;border:1px solid rgba(255,255,255,.25);border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(8,28,35,.38)}
.login-cover-brand{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:40px 28px;background:#fff;color:#193c3b;text-align:center}.login-logo-wrap{width:100%;padding:0;background:transparent}.login-logo-wrap img{display:block;width:100%;height:auto}.login-cover-brand>span{max-width:370px;font-size:20px;font-weight:600;line-height:1.55;text-wrap:balance}
.login-cover-form{display:flex;flex-direction:column;justify-content:center;padding:52px 48px}.login-cover-form h1{margin:0 0 10px;color:#193c3b;font-size:30px;line-height:1.15}.login-eyebrow{margin:0 0 8px;color:#397d78;font-size:12px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.login-intro{margin:0 0 30px;color:#697680;line-height:1.55}.login-cover-form label{margin-bottom:16px;font-size:14px}.login-cover-form input{padding:12px 13px;border-color:#c9d4d7;background:#fff}.login-cover-form input:focus{border-color:#397d78;box-shadow:0 0 0 3px rgba(57,125,120,.13);outline:0}.login-submit{width:100%;margin-top:4px;padding:13px;font-size:15px;font-weight:800}.login-cover-message{min-height:20px;margin:0 0 5px;color:#a33b3b;font-size:13px}.login-security{margin:22px 0 0;color:#87919a;font-size:12px;text-align:center}
@media(max-width:760px){.login-cover{padding:16px}.login-cover-card{display:block;width:min(460px,100%);min-height:0}.login-cover-brand{padding:24px 22px;gap:12px}.login-logo-wrap{width:min(360px,100%);padding:0}.login-cover-brand>span{display:block;max-width:340px;font-size:15px;line-height:1.45}.login-cover-form{padding:32px 26px}.login-cover-form h1{font-size:25px}}
.vacation-metrics{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:11px;margin:14px 0 24px}.vacation-metric{padding:15px;border:1px solid #d9e4e1;border-radius:11px;background:#f8fbfa}.vacation-metric strong{display:block;color:#245c5a;font-size:22px}.vacation-metric span{color:#687680;font-size:12px}.vacation-metric.available{border-color:#73a9a4;background:#edf7f5}.vacation-status{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef1f4;font-size:11px}.vacation-status.approved{background:#dff1e4;color:#24633f}.vacation-status.submitted{background:#fff1c7;color:#7a5a00}.vacation-status.rejected{background:#f6e0e0;color:#8a3232}@media(max-width:850px){.vacation-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vacation-status.cancelled{background:#e8e9eb;color:#56616b}.vacation-management-summary{margin:12px 0;padding:12px 15px;border-left:4px solid #d97706;border-radius:8px;background:#fff7e8;font-weight:700}.vacation-action-row{display:flex;gap:6px;flex-wrap:wrap}.vacation-action-row button{padding:6px 9px;font-size:12px}.vacation-board-note{display:block;margin-top:4px;color:#7656a8;font-size:11px;font-weight:700}
.absence-planning-legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}.absence-planning-legend span{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #dce5e3;border-radius:999px;background:#fff;font-size:12px}.absence-planning-legend i{width:10px;height:10px;border-radius:50%}

/* Kompakter Lohnbereich: immer nur ein klarer Arbeitsbereich sichtbar. */
.payroll-section-nav{display:flex;gap:7px;overflow-x:auto;margin:0 0 18px;padding:7px;border:1px solid #d9dee5;border-radius:11px;background:#f7f9fa;scrollbar-width:thin}
.payroll-section-nav button{flex:0 0 auto;background:transparent;color:#4a5561;padding:9px 12px;white-space:nowrap}
.payroll-section-nav button.active{background:#245c5a;color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(36,92,90,.18)}
#payroll .payroll-panel{display:none;padding:18px;border:1px solid #d9dee5;border-radius:12px;background:#fff}
#payroll .payroll-panel.active{display:block}
#payroll .payroll-panel>.history-toolbar:first-child,#payroll .payroll-panel>.annual-head:first-child{margin-top:0}
#payroll .payroll-panel .section-separator{margin:22px 0}
#payroll .history-toolbar h3{font-size:18px}
#payroll .monthbar{padding:12px;border-radius:9px;background:#f7f9fa}
@media(max-width:650px){.payroll-section-nav{margin-left:-4px;margin-right:-4px}.payroll-section-nav button{padding:8px 10px}#payroll .payroll-panel{padding:14px 10px}.payroll-panel .history-toolbar button{width:100%}}
.workspace.non-person-view{grid-template-columns:minmax(0,1fr)}
.workspace.non-person-view>.list{display:none}
#payroll.sidebar-section .payroll-section-nav{display:none}
.rejection-note{display:block;max-width:320px;margin-top:5px;color:#9b2c2c;white-space:normal}.danger{background:#a33b3b;color:#fff}

/* Salary certificate draft, finalization and revision controls. */
.certificate-controls{flex-wrap:wrap;align-items:flex-end}
.certificate-controls label{flex:1;min-width:180px}
.certificate-controls input{max-width:none}
#certificateCorrectionControls{margin:14px 0;padding:14px;background:#f7f9fa;border-radius:9px}
#certificateCorrectionControls button{margin-top:10px}
#certificateVersions{overflow-x:auto}
.hourly-model-settings{grid-column:1/-1;padding:14px;border:1px solid #d9dee5;border-radius:9px;background:#f7f9fa}
.hourly-model-settings>label{margin-bottom:12px}
.hourly-model-settings p{font-size:12px;line-height:1.5;color:#5f6974}
.hourly-model-settings button{margin-top:8px}
.hourly-scroll{overflow-x:auto}
#payrollItems{overflow-x:auto}

.personnel-heading{display:flex;align-items:center;gap:16px;min-width:0}.personnel-heading>div{min-width:0}.personnel-photo{width:88px;height:104px;object-fit:contain;background:#f1f5f3;border:1px solid #dbe7e3;border-radius:12px;flex-shrink:0}.personnel-photo[hidden]{display:none}@media(max-width:480px){.personnel-photo{width:64px;height:80px}.personnel-heading{gap:10px}}

.personnel-photo[data-photo-preview]:not([hidden]){cursor:zoom-in}.personnel-photo[data-photo-preview]:focus-visible{outline:3px solid #245c5a;outline-offset:4px}
.personnel-photo-dialog{box-sizing:border-box;width:max-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:16px;border:0;border-radius:16px;background:#fff;box-shadow:0 18px 60px #0005;overflow:auto}
.personnel-photo-dialog::backdrop{background:rgba(12,30,28,.78)}
.personnel-photo-dialog>img{display:block;width:auto;height:auto;max-width:min(1100px,calc(100vw - 56px));max-height:calc(100dvh - 120px);object-fit:contain;margin:auto}
.personnel-photo-close{display:block;margin:0 0 12px auto;min-height:44px;cursor:pointer}

.deduction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:1px solid #dbe7e3;border-radius:10px;padding:16px;margin-bottom:20px}.deduction-grid label{display:flex;flex-direction:column;gap:6px}.deduction-grid input,.deduction-grid select,.deduction-grid textarea{max-width:100%;box-sizing:border-box}#deductionList{overflow:auto}@media(max-width:800px){.deduction-grid{grid-template-columns:1fr 1fr}}

/* Keep action buttons compact when neighbouring content grows. */
.deduction-grid>button{align-self:end;min-height:44px;grid-column:1/-1;justify-self:start}

/* Keep the central login usable on short screens and with enlarged text. */
.login-cover{overflow-y:auto}.login-cover-card{flex-shrink:0}@media(max-height:740px){.login-cover{align-items:start}.login-cover-form{padding-top:28px;padding-bottom:28px}}