@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#172a3a;--muted:#78909c;--muted-2:#9aaab3;--teal:#276678;--teal-dark:#1f5665;--teal-soft:#e4f0f1;--blue:#5c8fc4;--blue-soft:#e9f1fb;--orange:#d9854a;--orange-soft:#fff0e5;--violet:#8f83c7;--violet-soft:#f1effb;--green:#2b9b70;--green-soft:#e8f6ef;--red:#d96060;--red-soft:#fff0f0;--yellow:#e3ad44;--line:#e9eef0;--surface:#fff;--bg:#f6f9fa;--shadow:0 18px 45px rgba(34,73,87,.08);font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{width:246px;flex:0 0 246px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:28px 16px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:0 11px 30px}.brand strong{font-size:18px;letter-spacing:-.7px;display:block}.brand strong span{color:var(--teal)}.brand small{display:block;color:#a7b4ba;font-size:8px;letter-spacing:1.8px;margin-top:3px;font-weight:800}.brand-mark{width:28px;height:28px;border-radius:9px;background:var(--teal);display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 6px 14px rgba(39,102,120,.2)}.brand-mark span{width:3px;background:#fff;border-radius:3px;display:block}.brand-mark span:nth-child(1){height:8px}.brand-mark span:nth-child(2){height:14px}.brand-mark span:nth-child(3){height:10px}.workspace-pill{display:flex;align-items:center;gap:9px;margin:0 4px 28px;padding:11px 10px;border:1px solid var(--line);border-radius:11px;background:#fbfdfd}.workspace-pill b,.workspace-pill small{display:block}.workspace-pill b{font-size:11px}.workspace-pill small{font-size:9px;color:var(--muted);margin-top:3px}.workspace-pill .chevron{margin-left:auto;color:var(--muted-2);font-size:16px}.workspace-dot{width:8px;height:8px;background:#5bc48a;border-radius:99px;box-shadow:0 0 0 4px #e6f7ed}.nav-label{font-size:9px;text-transform:uppercase;letter-spacing:1.35px;color:#a7b4ba;font-weight:800;padding:0 11px;margin:0 0 9px}.nav-label-spaced{margin-top:29px}.main-nav{flex:1}.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:11px 11px;border-radius:10px;color:#78909c;text-align:left;font-size:12px;transition:.18s ease;margin-bottom:4px}.nav-item:hover{background:#f4f8f8;color:var(--teal)}.nav-item.active{background:var(--teal-soft);color:var(--teal);font-weight:800}.nav-icon{width:16px;text-align:center;font-size:17px;color:currentColor}.nav-item em{margin-left:auto;font-style:normal;font-size:10px;background:#edf3f4;padding:3px 7px;border-radius:99px;color:var(--muted)}.sidebar-footer{border-top:1px solid var(--line);padding-top:14px}.sync-status{display:flex;gap:8px;align-items:center;padding:8px 8px 15px}.sync-status>span{width:7px;height:7px;border-radius:50%;background:#61c88e}.sync-status b,.sync-status small,.profile-mini b,.profile-mini small{display:block}.sync-status b{font-size:10px}.sync-status small,.profile-mini small{font-size:9px;color:var(--muted);margin-top:3px}.profile-mini{display:flex;align-items:center;gap:9px;padding:9px 7px}.profile-mini .avatar{flex:0 0 29px}.profile-mini b{font-size:10px}.profile-mini button{margin-left:auto;color:var(--muted)}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}.avatar-teal{background:#d9efee;color:var(--teal)}.avatar-blue{background:#e2edfa;color:#4c78aa}.avatar-orange{background:#ffebdf;color:#bd6534}.avatar-violet{background:#eeeafd;color:#7368aa}.avatar-rose{background:#ffe8eb;color:#bb6170}.main-content{min-width:0;flex:1}.topbar{height:78px;background:rgba(255,255,255,.85);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.breadcrumb{display:flex;gap:9px;align-items:center;color:#a1adb3;font-size:11px}.breadcrumb b{font-weight:400;color:#d3dbde}.breadcrumb strong{color:var(--ink);font-size:11px}.topbar-actions{display:flex;align-items:center;gap:15px}.search-box{height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;color:#a2afb5}.search-box input{border:0;outline:none;background:transparent;width:138px;font-size:11px;color:var(--ink)}.search-box input::placeholder{color:#a8b5ba}.search-box kbd{font-size:9px;border:1px solid #e5eaec;background:#f8fafb;padding:2px 5px;border-radius:4px;color:#a0aeb4}.icon-button{position:relative;font-size:20px;color:#7d9099;padding:4px}.icon-button i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);right:1px;top:2px;border:2px solid #fff;box-sizing:content-box}.role-switch{display:flex;border:1px solid var(--line);border-radius:8px;padding:3px;background:#fbfcfc}.role-button{font-size:10px;padding:6px 8px;border-radius:6px;color:var(--muted)}.role-button.active{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(20,60,75,.1);font-weight:800}.language-select{border:1px solid var(--line);background:#fff;color:var(--teal);font-size:10px;font-weight:800;border-radius:7px;padding:8px 7px}.mobile-menu{display:none}.page-wrap{padding:35px 42px 55px;max-width:1550px;margin:auto}.view-panel{display:none;animation:fadeUp .24s ease}.view-panel.active{display:block}@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px}.eyebrow{margin:0 0 8px;color:#a5b1b6;letter-spacing:1.5px;font-size:9px;font-weight:800;text-transform:uppercase}.page-heading h1{margin:0;font-size:27px;letter-spacing:-1.25px;line-height:1.1}.page-heading .muted{margin:9px 0 0;color:var(--muted);font-size:11px}.wave{color:var(--orange);font-size:28px;display:inline-block;transform:rotate(-13deg);margin-left:4px}.heading-actions{display:flex;gap:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:37px;padding:0 13px;border-radius:8px;font-size:11px;font-weight:800;transition:.18s ease}.button-primary{background:var(--teal);color:#fff;box-shadow:0 6px 15px rgba(39,102,120,.15)}.button-primary:hover{background:var(--teal-dark);transform:translateY(-1px)}.button-secondary{border:1px solid var(--line);background:#fff;color:#6d838d}.button-secondary:hover{border-color:#c6d6da;color:var(--teal)}.button-danger{border:1px solid #f1caca;color:var(--red);background:#fff5f5}.small-button{height:32px;padding:0 10px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 15px;position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(34,73,87,.025)}.metric-card:after{content:'';position:absolute;bottom:-22px;right:-22px;width:80px;height:80px;border-radius:50%;background:var(--accent-soft);opacity:.65}.accent-teal{--accent:var(--teal);--accent-soft:var(--teal-soft)}.accent-blue{--accent:var(--blue);--accent-soft:var(--blue-soft)}.accent-orange{--accent:var(--orange);--accent-soft:var(--orange-soft)}.accent-violet{--accent:var(--violet);--accent-soft:var(--violet-soft)}.metric-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.metric-label{font-size:11px;color:var(--muted);font-weight:600}.metric-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;color:var(--accent);background:var(--accent-soft);font-size:15px;font-weight:800}.metric-card>strong{font-size:25px;letter-spacing:-1.1px;display:block;color:var(--ink)}.metric-card>strong small{font-size:13px;color:var(--muted);margin-left:2px;letter-spacing:0}.metric-foot{display:flex;gap:6px;align-items:center;font-size:9px;color:#a3b0b5;margin-top:10px}.trend{font-weight:800}.trend.up{color:var(--green)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%}.paid-dot{background:var(--green)}.pending-dot{background:var(--orange)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:20px;margin-bottom:20px}.lower-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:20px}.panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:21px;box-shadow:0 6px 20px rgba(34,73,87,.02)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}.panel-heading h2{font-size:14px;margin:0;letter-spacing:-.35px}.panel-heading p{margin:5px 0 0;color:#a0afb4;font-size:10px}.month-nav{display:flex;gap:9px;align-items:center;color:var(--teal);font-size:11px}.month-nav button{font-size:20px;color:#9babb1;padding:0 2px;line-height:1}.month-nav button:hover{color:var(--teal)}.calendar-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.calendar-legend>span{display:flex;align-items:center;gap:5px;color:#9aa8ad;font-size:9px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.dot-work{background:#b9d5d8}.dot-paid{background:var(--green)}.dot-unpaid{background:var(--orange)}.calendar-panel>.calendar-legend{margin:-2px 0 15px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day-name{text-align:center;color:#aab6ba;font-size:9px;font-weight:800;padding:2px 0 5px}.calendar-cell{min-height:52px;border-radius:7px;padding:7px 7px 5px;border:1px solid transparent;position:relative;cursor:pointer;transition:.16s}.calendar-cell:hover{background:#f3f8f8;border-color:#d4e3e4}.calendar-cell.muted{color:#bdc8cc}.calendar-cell.today{border-color:#6fabb5;background:#f4fbfb}.calendar-cell.has-entry{border-color:transparent}.calendar-cell.has-entry.paid-day{background:#ccefd9;border-color:#8ed0a8}.calendar-cell.has-entry.unpaid-day{background:#ffe1c5;border-color:#f0b37e}.calendar-cell.has-entry.mixed-day{background:linear-gradient(135deg,#ccefd9 0 52%,#ffe1c5 52%);border-color:#c7c5a0}.calendar-cell.has-entry .calendar-number{color:#174958;font-weight:800}.calendar-cell.selected{box-shadow:inset 0 0 0 2px var(--teal)}.calendar-cell.future-day{background:#fbfcfc;color:#c9d2d5;border-color:#f1f4f4}.calendar-cell.future-day .calendar-number{color:#c5cfd2}.calendar-cell.future-day:hover{background:#f8fafb;border-color:#e7edef}.calendar-cell.selected{background:var(--teal-soft);border-color:#acd0d2}.calendar-number{font-size:10px;font-weight:700;color:#81939b}.calendar-cell.today .calendar-number{color:var(--teal)}.calendar-cell.muted .calendar-number{color:#c3ced1}.calendar-mark{height:4px;border-radius:99px;margin-top:11px;background:#c4dadd}.calendar-mark.paid{background:var(--green)}.calendar-mark.unpaid{background:var(--orange)}.calendar-mark.mixed{background:linear-gradient(90deg,var(--green) 50%,var(--orange) 50%)}.activity-list{display:flex;flex-direction:column;gap:14px}.activity-row{display:flex;align-items:center;gap:10px}.activity-row .avatar{width:30px;height:30px;flex:0 0 30px;font-size:8px}.activity-row .activity-copy{min-width:0;flex:1}.activity-copy b,.activity-copy small{display:block}.activity-copy b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-copy small{font-size:9px;color:var(--muted);margin-top:3px}.activity-time{text-align:right}.activity-time b,.activity-time small{display:block}.activity-time b{font-size:10px;color:var(--teal)}.activity-time small{color:#a7b2b6;font-size:8px;margin-top:3px}.text-button{font-size:10px;color:var(--teal);font-weight:800}.text-button:hover{text-decoration:underline}.employee-hours-list{display:flex;flex-direction:column;gap:15px}.employee-hour-row{display:flex;align-items:center;gap:10px}.employee-hour-row .avatar{width:29px;height:29px;flex:0 0 29px;font-size:8px}.employee-info{min-width:110px}.employee-info b,.employee-info small{display:block}.employee-info b{font-size:10px}.employee-info small{font-size:8px;color:var(--muted);margin-top:2px}.progress-wrap{flex:1}.progress-line{height:6px;border-radius:99px;background:#eef3f4;overflow:hidden}.progress-line span{height:100%;display:block;border-radius:99px;background:var(--teal)}.employee-hour-row:nth-child(2) .progress-line span{background:var(--blue)}.employee-hour-row:nth-child(3) .progress-line span{background:var(--orange)}.employee-hour-row:nth-child(4) .progress-line span{background:var(--violet)}.progress-meta{display:flex;justify-content:space-between;color:#a4b0b4;font-size:8px;margin-top:5px}.progress-meta b{color:var(--ink);font-weight:800}.filter-button{height:32px;border:1px solid var(--line);padding:0 10px;border-radius:7px;display:flex;align-items:center;gap:6px;color:#778c95;font-size:10px;background:#fff}.shortcut-grid{display:flex;flex-direction:column;gap:9px}.shortcut-grid button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #eef2f3;padding:10px;border-radius:9px;transition:.18s}.shortcut-grid button:hover{background:#fafdfd;border-color:#dce9ea}.shortcut-grid button>span:nth-child(2){flex:1}.shortcut-grid b,.shortcut-grid small{display:block}.shortcut-grid b{font-size:10px}.shortcut-grid small{font-size:8px;color:var(--muted);margin-top:2px}.shortcut-grid button>span:last-child{font-size:17px;color:#a8b5b9}.shortcut-icon{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:800}.teal-bg{background:var(--teal-soft);color:var(--teal)}.blue-bg{background:var(--blue-soft);color:var(--blue)}.orange-bg{background:var(--orange-soft);color:var(--orange)}.full-calendar-panel{margin-bottom:20px}.calendar-large-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}.calendar-toolbar-right{display:flex;gap:18px;align-items:center}.large-calendar-grid{gap:7px}.large-calendar-grid .calendar-cell{min-height:90px;padding:10px}.large-calendar-grid .calendar-mark{margin-top:34px}.day-detail-panel{min-height:200px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:560px}.data-table th{text-align:left;color:#9cabb0;text-transform:uppercase;letter-spacing:1px;font-size:8px;padding:0 10px 11px;border-bottom:1px solid var(--line);font-weight:800}.data-table td{font-size:10px;padding:12px 10px;border-bottom:1px solid #f0f3f4;white-space:nowrap}.data-table tr:last-child td{border-bottom:0}.data-table .worker-cell{display:flex;align-items:center;gap:8px}.data-table .worker-cell .avatar{width:25px;height:25px;font-size:7px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 8px;font-size:8px;font-weight:800}.badge.paid{background:var(--green-soft);color:var(--green)}.badge.unpaid{background:var(--orange-soft);color:#c67435}.badge.pending{background:#fff8dc;color:#b98622}.row-actions{color:#8fa0a6;font-size:16px}.employee-toolbar{display:flex;justify-content:space-between;gap:12px;margin:-7px 0 18px}.search-box.wide{width:270px}.employees-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.employee-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;transition:.2s}.employee-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.employee-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.employee-big{display:flex;align-items:center;gap:10px}.employee-big .avatar{width:42px;height:42px}.employee-big b,.employee-big small{display:block}.employee-big b{font-size:12px}.employee-big small{font-size:9px;color:var(--muted);margin-top:4px}.more-button{color:#9cacb0;font-size:17px}.employee-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;border-top:1px solid var(--line);padding-top:14px}.employee-meta span{display:block;color:#a1afb4;font-size:8px}.employee-meta b{display:block;font-size:11px;margin-top:4px}.employee-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:var(--teal);font-size:9px;font-weight:800}.online-dot{width:6px;height:6px;background:#55bd85;border-radius:50%;display:inline-block;margin-right:4px}.report-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.report-summary{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.report-summary>span{display:block;color:var(--muted);font-size:10px}.report-summary strong{display:block;font-size:25px;letter-spacing:-1px;margin:14px 0 7px}.report-summary small{font-size:9px;color:#a3b0b5}.report-table-panel .year-select{border:1px solid var(--line);border-radius:7px;color:var(--muted);padding:7px 9px;background:#fff;font-size:10px}.settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:940px}.settings-card{padding:25px}.settings-section+ .settings-section{border-top:1px solid var(--line);margin-top:25px;padding-top:24px}.settings-section h2{font-size:14px;margin:0 0 18px}.settings-section label{display:block;color:var(--muted);font-size:10px;font-weight:700;margin:12px 0 6px}.form-input{border:1px solid #dfe8ea;border-radius:7px;background:#fff;color:var(--ink);height:37px;padding:0 10px;outline:none;width:100%;font-size:11px}.form-input:focus{border-color:#9fc8cc;box-shadow:0 0 0 3px #eaf5f5}.language-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;overflow:hidden}.language-list button{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-bottom:1px solid var(--line);font-size:11px}.language-list button:last-child{border-bottom:0}.language-list button:hover{background:#f6fbfb;color:var(--teal)}.language-list span{color:#a3b0b4;font-size:9px;font-weight:800}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(23,42,58,.35);z-index:20;align-items:center;justify-content:center;padding:20px}.modal-backdrop.open{display:flex}.modal{width:min(560px,100%);max-height:90vh;max-height:90dvh;overflow-y:auto;box-sizing:border-box;background:#fff;border-radius:14px;box-shadow:0 22px 70px rgba(13,39,50,.2);padding:24px;animation:modalIn .2s ease}@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
#employeeModal .modal{max-width:560px;max-height:88vh;max-height:88dvh;overflow-y:auto;display:flex;flex-direction:column;padding:20px 22px}
#employeeModal .modal-header{margin-bottom:12px}
#employeeModal .form-footer{position:sticky;bottom:-20px;background:#fff;padding:12px 0 4px;margin-top:14px;border-top:1px solid var(--line);z-index:10}.modal-header{display:flex;justify-content:space-between;margin-bottom:22px}.modal-header h2{margin:0;font-size:20px;letter-spacing:-.7px}.modal-close{font-size:25px;color:#a2b0b5;line-height:1;height:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.employee-picker-field{grid-column:1/-1}.employee-picker{border:1px solid #dfe8ea;border-radius:8px;background:#fbfdfd;padding:9px;margin-top:6px}.employee-picker-toolbar{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e8eef0;padding:0 0 8px;margin-bottom:8px}.picker-link{color:var(--teal);font-size:9px;font-weight:800}.picker-link:hover{text-decoration:underline}.employee-picker-toolbar span{margin-left:auto;color:#9aabb1;font-size:9px}.employee-checklist{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:150px;overflow:auto}.employee-check{display:flex;align-items:center;gap:7px;padding:7px;border-radius:7px;color:var(--ink);font-size:10px;cursor:pointer}.employee-check:hover{background:#eef7f7}.employee-check input{accent-color:var(--teal);width:14px;height:14px}.employee-check small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.form-grid label,.notes-field{display:block;color:var(--muted);font-size:10px;font-weight:700}.form-grid .form-input{margin-top:6px}.notes-field{margin-top:14px}.notes-field .form-input{margin-top:6px;height:auto;padding:10px;resize:vertical}.form-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.toast{position:fixed;right:24px;bottom:24px;background:#183b46;color:#fff;border-radius:10px;padding:12px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 13px 30px rgba(23,61,74,.22);transform:translateY(130%);transition:.25s ease;z-index:30}.toast.show{transform:none}.toast>span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#64c68c;color:#fff;font-weight:800}.toast b,.toast small{display:block}.toast b{font-size:10px}.toast small{font-size:9px;color:#b9ced2;margin-top:3px}
.settings-grid-advanced{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1150px}
.section-title-wrap{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.settings-badge-icon{width:34px;height:34px;border-radius:10px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:16px;flex:0 0 34px}
.section-title-wrap h2{margin:0;font-size:14px;letter-spacing:-.3px}
.section-title-wrap p{margin:4px 0 0;font-size:10px;color:var(--muted)}
.holidays-chip-list{display:flex;flex-direction:column;gap:6px;max-height:170px;overflow-y:auto;padding-right:4px;margin-top:6px}
.holiday-item{display:flex;align-items:center;justify-content:space-between;background:#f7fafb;border:1px solid #e7eff1;border-radius:8px;padding:7px 10px;font-size:11px}
.holiday-item-meta{display:flex;align-items:center;gap:8px}
.holiday-item-meta b{font-size:11px;color:var(--ink)}
.holiday-item-meta span{font-size:9px;color:var(--muted);background:#fff;border:1px solid #e2eaec;padding:2px 6px;border-radius:4px}
.btn-delete-holiday{color:#b74b4b;font-size:14px;padding:2px 6px;border-radius:4px}
.btn-delete-holiday:hover{background:#feebeb}
.geo-body{display:flex;flex-direction:column;gap:16px}
.geo-status-card{display:flex;gap:14px;align-items:center;padding:15px;background:#f8fbfb;border:1px solid #dcebec;border-radius:11px}
.geo-status-card.in-radius{border-color:#7ccb9f;background:#f1fbf5}
.geo-status-card.out-radius{border-color:#f4b8b8;background:#fff5f5}
.geo-icon-circle{width:42px;height:42px;border-radius:50%;background:#e0f1f1;color:var(--teal);display:grid;place-items:center;font-size:19px;flex:0 0 42px}
.in-radius .geo-icon-circle{background:#cff3df;color:#1e7e49}
.out-radius .geo-icon-circle{background:#fedddd;color:#c23838}
.geo-status-card b{display:block;font-size:12px;color:var(--ink)}
.geo-status-card p{margin:4px 0 6px;font-size:10px;color:var(--muted)}
.geo-badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;padding:4px 8px;border-radius:99px;background:#e5edf0;color:#6d838c}
.geo-badge.in{background:#cff3df;color:#1e7e49}
.geo-badge.out{background:#fedddd;color:#c23838}
.geo-actions-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;background:#fbfdfd;border:1px solid var(--line);border-radius:9px}
.geo-sim-buttons{display:flex;align-items:center;gap:6px}
.geo-sim-buttons small{color:var(--muted);font-size:9px}
.entry-rate-preview{margin-top:14px;padding:10px 12px;background:#f6fafa;border:1px solid #daeaec;border-radius:8px;display:flex;align-items:center;justify-content:space-between}
.rate-preview-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill-tag{font-size:9px;font-weight:800;padding:3px 7px;border-radius:99px;background:#e2eaec;color:#4f6d76}
.pill-tag.night-tag{background:#e7e2f9;color:#6757a3}
.pill-tag.weekend-tag{background:#ffebd8;color:#b6652c}
.pill-tag.holiday-tag{background:#ffdbdb;color:#bb3737}
.rate-preview-details{text-align:right}
.rate-preview-details span{display:block;font-size:9px;color:var(--muted)}
.rate-preview-details b{display:block;font-size:12px;color:var(--teal)}
@media(max-width:1150px){.settings-grid-advanced{grid-template-columns:1fr}}
.notification-badge{position:absolute;top:-4px;right:-4px;background:#e23b3b;color:#fff;font-size:9px;font-weight:800;border-radius:99px;padding:2px 5px;line-height:1;border:2px solid #fff}
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:#fff8f8;border:1px solid #fedcdc;border-radius:10px;padding:12px 14px}
.notif-card-meta b{font-size:12px;color:#ba2929;display:block}
.notif-card-meta small{font-size:10px;color:var(--muted);display:block;margin-top:2px}
.notif-actions{display:flex;gap:6px;flex-wrap:wrap}
.profile-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.profile-field{background:#f8fbfb;border:1px solid #e1ebed;border-radius:8px;padding:9px 12px}
.profile-field span{display:block;font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.profile-field b{display:block;font-size:12px;color:var(--ink);margin-top:3px}
.profile-field.wide{grid-column:1/-1}
.quick-login-chip{display:inline-flex;align-items:center;gap:5px;background:#edf5f7;border:1px solid #d4e3e6;color:var(--teal);padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700}
.quick-login-chip:hover{background:#dfeef1}
.emp-tab-btn{border:1px solid transparent;cursor:pointer;transition:.18s}
.emp-tab-btn:hover{filter:brightness(.97)}
.archived-card{background:#fafcfc;border-color:#e4eaec}
.archived-card .employee-big b{color:#576b74}

/* ========================================================
   MOBILE APP & RESPONSIVE LAYOUT (APP STORE & PLAY STORE READY)
   ======================================================== */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 45, 78, 0.55);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

.mobile-close-sidebar {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

/* Fix app-shell flex layout */
.app-shell {
  min-height: 100vh;
  display: flex;
  position: relative;
  width: 100%;
}

.app-shell[style*="display: none"],
.app-shell[style*="display:none"],
#appShellView[style*="display: none"],
#appShellView[style*="display:none"] {
  display: none !important;
}

#appShellView[style*="display: none"] .mobile-bottom-nav,
#appShellView[style*="display:none"] .mobile-bottom-nav {
  display: none !important;
}

.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  box-sizing: border-box;
  width: 100%;
}

/* TABLET & MOBILE BREAKPOINTS (<= 920px) */
@media (max-width: 920px) {
  .app-shell {
    display: block;
  }
  .app-shell[style*="display: none"],
  .app-shell[style*="display:none"],
  #appShellView[style*="display: none"],
  #appShellView[style*="display:none"] {
    display: none !important;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    height: 100vh;
    height: 100dvh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar .brand {
    justify-content: space-between;
  }

  .mobile-close-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f0f4f6;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
  }

  .mobile-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #ffffff;
    font-size: 20px;
    color: var(--ink);
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .topbar {
    padding: 0 16px;
    height: 58px;
  }

  .topbar-actions .search-box {
    display: none;
  }

  .topbar-actions {
    gap: 8px;
  }

  .theme-switch-pill {
    padding: 2px;
    gap: 1px;
  }

  .theme-btn {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .page-wrap {
    padding: 16px 14px calc(76px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
  }

  .page-heading h1 {
    font-size: 22px;
  }

  .heading-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .heading-actions button {
    flex: 1;
    min-height: 40px;
    font-size: 12px;
  }

  /* Metric cards: 2 columns on mobile */
  .metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .metric-card {
    padding: 14px 12px !important;
  }

  .metric-card > strong {
    font-size: 20px !important;
  }

  /* Dashboard and lower grids: 1 column */
  .dashboard-grid,
  .lower-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .employees-grid,
  .report-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .settings-layout {
    grid-template-columns: 1fr !important;
  }

  /* NATIVE MOBILE BOTTOM NAVIGATION BAR */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--line);
    z-index: 100;
    backdrop-filter: blur(16px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
    justify-content: space-around;
    align-items: center;
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 6px 0;
    color: #8fa0a6;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-btn:active {
    transform: scale(0.94);
  }

  .mobile-nav-btn.active {
    color: var(--teal) !important;
  }

  .mobile-nav-btn .m-icon {
    font-size: 19px;
    line-height: 1;
    display: block;
  }

  .mobile-nav-btn .m-label {
    font-size: 9.5px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: -0.2px;
  }

  .mobile-nav-btn.m-checkin-action {
    position: relative;
    top: -12px;
  }

  .m-checkin-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), #1687a7);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(39, 102, 120, 0.4);
    border: 3px solid #ffffff;
    transition: transform 0.15s ease;
  }

  .m-checkin-circle .m-icon {
    font-size: 20px;
  }

  /* Modals on mobile: full screen friendly */
  .modal-backdrop {
    padding: 10px !important;
  }

  .modal {
    padding: 18px 16px !important;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    border-radius: 14px !important;
  }

  /* Calendar cells on mobile */
  .large-calendar-grid .calendar-cell {
    min-height: 60px !important;
    padding: 6px !important;
  }
}

/* DESKTOP & WIDE PC SCREENS (>= 921px) */
@media (min-width: 921px) {
  .app-shell {
    display: flex !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 246px !important;
    flex: 0 0 246px !important;
    height: 100vh !important;
    box-shadow: none !important;
    z-index: 10 !important;
  }
  .sidebar-backdrop {
    display: none !important;
  }
  .mobile-menu {
    display: none !important;
  }
  .mobile-bottom-nav {
    display: none !important;
  }
  .page-wrap {
    max-width: 1550px !important;
    padding: 35px 42px 60px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .metric-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr) !important;
    gap: 20px !important;
  }
  .lower-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr) !important;
    gap: 20px !important;
  }
  .employees-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 16px !important;
  }
  .report-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .settings-layout,
  .settings-grid-advanced {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    max-width: 1400px !important;
  }
}

@media (min-width: 1440px) {
  .page-wrap {
    max-width: 1650px !important;
  }
  .employees-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* VERY SMALL SCREENS (<= 480px) */
@media (max-width: 480px) {
  .metric-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .breadcrumb strong {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Password eye toggle */
.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrap .form-input {
  padding-right: 40px !important;
}

.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-btn:hover {
  color: var(--ink);
}

/* Weekend Shading & Worked Highlighting in Calendars & Tables */
.calendar-cell.weekend-muted {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
}
.calendar-cell.weekend-muted .calendar-number {
  color: #94a3b8;
  font-weight: 600;
}
.calendar-cell.weekend-worked {
  background: #fef9c3 !important;
  border: 1.5px solid #facc15 !important;
}
.calendar-cell.weekend-worked .calendar-number {
  color: #854d0e !important;
  font-weight: 800;
}

/* Approved Leave Day in Calendar */
.calendar-cell.has-approved-leave {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
}
.calendar-cell.has-approved-leave .calendar-number {
  color: #92400e !important;
  font-weight: 800;
}
.calendar-mark.leave {
  background: #f59e0b !important;
}

/* Worker Detail Timesheet Table Rows */
.tr-weekend-muted {
  background: #f8fafc !important;
  color: #94a3b8 !important;
}
.tr-weekend-muted td {
  color: #94a3b8 !important;
}
.tr-weekend-worked {
  background: #fffbeb !important;
}
.tr-weekend-worked td {
  color: #1e293b !important;
  font-weight: 600;
}

/* Worker Detail Toolbar & Modals */
.worker-detail-toolbar select.form-input {
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}
.worker-detail-toolbar select.form-input:focus {
  border-color: var(--teal);
}

/* Worker Detail Modal Wide Layout for PC / Desktop */
.modal-wide-desktop {
  width: 96vw;
  max-width: 1400px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 24px 30px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(15, 35, 45, 0.28);
}

@media (min-width: 1600px) {
  .modal-wide-desktop {
    max-width: 1560px;
  }
}

#workerDetailModal .data-table th,
#view-timesheet .data-table th {
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

#workerDetailModal .data-table td,
#view-timesheet .data-table td {
  padding: 11px 12px;
  font-size: 11px;
}

@media (max-width: 768px) {
  .modal-wide-desktop {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    max-height: 95vh;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #view-timesheet, #view-timesheet *,
  #workerDetailModal, #workerDetailModal * {
    visibility: visible;
  }
  #view-timesheet,
  #workerDetailModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 0 !important;
    display: block !important;
  }
  #view-timesheet .worker-detail-toolbar,
  #view-timesheet #wdBtnClose,
  #view-timesheet #wdColAction,
  #view-timesheet #wdBtnBackToEmployees,
  #view-timesheet [data-edit-shift],
  #workerDetailModal .modal-close,
  #workerDetailModal .worker-detail-toolbar,
  #workerDetailModal #wdBtnClose,
  #workerDetailModal #wdColAction,
  #workerDetailModal [data-edit-shift] {
    display: none !important;
  }
  #view-timesheet .table-wrap,
  #workerDetailModal .table-wrap {
    overflow: visible !important;
    border: none !important;
  }
}

/* ==========================================================================
   Leaflet Geofencing Map
   ========================================================================== */
#geofenceMap {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
#geofenceMap .leaflet-pane {
  z-index: 1 !important;
}
#geofenceMap .leaflet-top,
#geofenceMap .leaflet-bottom {
  z-index: 2 !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
}

/* ==========================================================================
   Toast Notification High Visibility & Mobile Navbar Clearance
   ========================================================================== */
.toast {
  position: fixed !important;
  right: 24px !important;
  bottom: 85px !important;
  background: #183b46 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(160%) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
}

.toast.show {
  transform: translateY(0) !important;
}

.toast-close-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  margin-left: 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s, background 0.15s !important;
}

.toast-close-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 920px) {
  .toast {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ==========================================================================
   MULTI-THEME ENGINE (☀️ Light, 🌙 Night/Dark, 🌌 Midnight Ocean)
   ========================================================================== */

:root, [data-theme="light"] {
  --ink: #172a3a;
  --muted: #78909c;
  --muted-2: #9aaab3;
  --teal: #276678;
  --teal-dark: #1f5665;
  --teal-soft: #e4f0f1;
  --blue: #5c8fc4;
  --blue-soft: #e9f1fb;
  --orange: #d9854a;
  --orange-soft: #fff0e5;
  --violet: #8f83c7;
  --violet-soft: #f1effb;
  --green: #2b9b70;
  --green-soft: #e8f6ef;
  --red: #d96060;
  --red-soft: #fff0f0;
  --yellow: #e3ad44;
  --line: #e9eef0;
  --surface: #ffffff;
  --surface-alt: #f8fafb;
  --surface-hover: #f1f6f7;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --input-bg: #ffffff;
  --input-border: #dfe8ea;
  --bg: #f6f9fa;
  --shadow: 0 18px 45px rgba(34, 73, 87, 0.08);
  color-scheme: light;
}

[data-theme="dark"] {
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --teal: #38bdf8;
  --teal-dark: #0ea5e9;
  --teal-soft: rgba(56, 189, 248, 0.16);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, 0.16);
  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, 0.16);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, 0.16);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.16);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.16);
  --yellow: #fbbf24;
  --line: #223049;
  --surface: #131d2e;
  --surface-alt: #1a273e;
  --surface-hover: #22334f;
  --topbar-bg: rgba(19, 29, 46, 0.94);
  --input-bg: #0c1422;
  --input-border: #293b58;
  --bg: #0b111e;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

[data-theme="ocean"] {
  --ink: #e2f1ff;
  --muted: #7fa5cb;
  --muted-2: #527a9f;
  --teal: #00d2d3;
  --teal-dark: #00b4b5;
  --teal-soft: rgba(0, 210, 211, 0.16);
  --blue: #38bdf8;
  --blue-soft: rgba(56, 189, 248, 0.16);
  --orange: #ff9f43;
  --orange-soft: rgba(255, 159, 67, 0.16);
  --violet: #9c88ff;
  --violet-soft: rgba(156, 136, 255, 0.16);
  --green: #1dd1a1;
  --green-soft: rgba(29, 209, 161, 0.16);
  --red: #ff6b6b;
  --red-soft: rgba(255, 107, 107, 0.16);
  --yellow: #feca57;
  --line: #1b3d63;
  --surface: #0d223a;
  --surface-alt: #132e4d;
  --surface-hover: #1b3f68;
  --topbar-bg: rgba(13, 34, 58, 0.94);
  --input-bg: #081a2e;
  --input-border: #224a73;
  --bg: #071527;
  --shadow: 0 18px 45px rgba(2, 10, 20, 0.65);
  color-scheme: dark;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

.panel, .metric-card, .employee-card, .topbar, .sidebar, .modal {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Dark & Ocean overrides */
[data-theme="dark"] .sidebar,
[data-theme="ocean"] .sidebar {
  background: var(--surface) !important;
  border-right-color: var(--line) !important;
}

[data-theme="dark"] .brand strong,
[data-theme="ocean"] .brand strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .workspace-pill,
[data-theme="ocean"] .workspace-pill {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .workspace-pill b,
[data-theme="ocean"] .workspace-pill b {
  color: var(--ink) !important;
}

[data-theme="dark"] .topbar,
[data-theme="ocean"] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom-color: var(--line) !important;
}

[data-theme="dark"] .breadcrumb strong,
[data-theme="ocean"] .breadcrumb strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .panel,
[data-theme="ocean"] .panel {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .metric-card,
[data-theme="ocean"] .metric-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .employee-card,
[data-theme="ocean"] .employee-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .employee-big b,
[data-theme="ocean"] .employee-big b,
[data-theme="dark"] .employee-meta b,
[data-theme="ocean"] .employee-meta b {
  color: var(--ink) !important;
}

[data-theme="dark"] .report-summary,
[data-theme="ocean"] .report-summary {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .modal,
[data-theme="ocean"] .modal {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .form-input,
[data-theme="ocean"] .form-input,
[data-theme="dark"] .search-box,
[data-theme="ocean"] .search-box,
[data-theme="dark"] .year-select,
[data-theme="ocean"] .year-select,
[data-theme="dark"] .language-select,
[data-theme="ocean"] .language-select {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .search-box input,
[data-theme="ocean"] .search-box input {
  color: var(--ink) !important;
}

[data-theme="dark"] .search-box kbd,
[data-theme="ocean"] .search-box kbd {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .button-secondary,
[data-theme="ocean"] .button-secondary {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .button-secondary:hover,
[data-theme="ocean"] .button-secondary:hover {
  background: var(--surface-hover) !important;
}

[data-theme="dark"] .shortcut-grid button,
[data-theme="ocean"] .shortcut-grid button {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .shortcut-grid button:hover,
[data-theme="ocean"] .shortcut-grid button:hover {
  background: var(--surface-hover) !important;
}

[data-theme="dark"] .shortcut-grid b,
[data-theme="ocean"] .shortcut-grid b {
  color: var(--ink) !important;
}

[data-theme="dark"] .nav-item,
[data-theme="ocean"] .nav-item {
  color: var(--muted) !important;
}

[data-theme="dark"] .nav-item:hover,
[data-theme="ocean"] .nav-item:hover {
  background: var(--surface-hover) !important;
  color: var(--teal) !important;
}

[data-theme="dark"] .nav-item.active,
[data-theme="ocean"] .nav-item.active {
  background: var(--teal-soft) !important;
  color: var(--teal) !important;
}

[data-theme="dark"] .data-table th,
[data-theme="ocean"] .data-table th {
  border-bottom-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .data-table td,
[data-theme="ocean"] .data-table td {
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .data-table tr:hover td,
[data-theme="ocean"] .data-table tr:hover td {
  background: var(--surface-hover) !important;
}

/* Calendar Cells in Dark / Ocean */
[data-theme="dark"] .calendar-cell,
[data-theme="ocean"] .calendar-cell {
  background: var(--surface) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .calendar-cell:hover,
[data-theme="ocean"] .calendar-cell:hover {
  background: var(--surface-hover) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .calendar-cell.today,
[data-theme="ocean"] .calendar-cell.today {
  border-color: var(--teal) !important;
  background: var(--teal-soft) !important;
}

[data-theme="dark"] .calendar-cell.future-day,
[data-theme="ocean"] .calendar-cell.future-day {
  background: var(--surface-alt) !important;
  opacity: 0.65;
}

[data-theme="dark"] .calendar-number,
[data-theme="ocean"] .calendar-number {
  color: var(--muted) !important;
}

[data-theme="dark"] .mobile-bottom-nav,
[data-theme="ocean"] .mobile-bottom-nav {
  background: var(--topbar-bg) !important;
  border-top-color: var(--line) !important;
}

[data-theme="dark"] .mobile-menu,
[data-theme="ocean"] .mobile-menu {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .geo-status-card,
[data-theme="ocean"] .geo-status-card,
[data-theme="dark"] .geo-actions-row,
[data-theme="ocean"] .geo-actions-row,
[data-theme="dark"] .holiday-item,
[data-theme="ocean"] .holiday-item,
[data-theme="dark"] .employee-picker,
[data-theme="ocean"] .employee-picker,
[data-theme="dark"] .notif-card,
[data-theme="ocean"] .notif-card {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .holiday-item-meta b,
[data-theme="ocean"] .holiday-item-meta b,
[data-theme="dark"] .geo-status-card b,
[data-theme="ocean"] .geo-status-card b {
  color: var(--ink) !important;
}

/* ==========================================================================
   THEME SWITCHER CONTROLS & PREVIEW CARDS
   ========================================================================== */
.theme-switch-pill {
  display: inline-flex;
  align-items: center;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px;
  gap: 3px;
}

.theme-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.55;
  color: var(--ink);
}

.theme-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.theme-btn.active {
  background: var(--surface);
  color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 1;
  border: 1px solid var(--line);
  transform: scale(1.05);
}

/* Settings Theme Picker Grid */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 768px) {
  .theme-picker-grid {
    grid-template-columns: 1fr;
  }
}

.theme-option-card {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-option-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.theme-option-card.active {
  border-color: var(--teal) !important;
  background: var(--surface) !important;
  box-shadow: 0 6px 20px rgba(39, 102, 120, 0.18) !important;
}

.theme-check-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.theme-option-card.active .theme-check-badge {
  display: flex;
}

.theme-preview-box {
  height: 68px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.preview-light {
  background: #f6f9fa;
  border-color: #e2e8f0;
}
.preview-light .t-prev-bar {
  background: #ffffff;
  border: 1px solid #e2eaec;
  height: 12px;
  border-radius: 4px;
}
.preview-light .t-prev-card {
  background: #ffffff;
  border: 1px solid #e2eaec;
  height: 38px;
  border-radius: 4px;
  flex: 1;
}

.preview-dark {
  background: #0b111e;
  border-color: #223049;
}
.preview-dark .t-prev-bar {
  background: #131d2e;
  border: 1px solid #223049;
  height: 12px;
  border-radius: 4px;
}
.preview-dark .t-prev-card {
  background: #131d2e;
  border: 1px solid #223049;
  height: 38px;
  border-radius: 4px;
  flex: 1;
}

.preview-ocean {
  background: #071527;
  border-color: #1b3d63;
}
.preview-ocean .t-prev-bar {
  background: #0d223a;
  border: 1px solid #1b3d63;
  height: 12px;
  border-radius: 4px;
}
.preview-ocean .t-prev-card {
  background: #0d223a;
  border: 1px solid #1b3d63;
  height: 38px;
  border-radius: 4px;
  flex: 1;
}

.t-prev-body {
  display: flex;
  gap: 6px;
  flex: 1;
}

.theme-option-info .theme-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.theme-option-info small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}

/* View Mode Switcher (Grid vs List) */
.view-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-view-mode {
  padding: 6px 13px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-view-mode:hover {
  color: var(--teal);
  background: var(--teal-soft);
}

.btn-view-mode.active {
  background: var(--teal) !important;
  color: #fff !important;
}

.employees-list-table th {
  padding: 12px 14px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--line);
}

.employees-list-table td {
  padding: 12px 14px;
  vertical-align: middle;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
}

.employees-list-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.employees-list-table tbody tr:hover td {
  background: rgba(39, 102, 120, 0.04);
}

body.theme-dark .employees-list-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-ocean .employees-list-table tbody tr:hover td {
  background: rgba(43, 194, 184, 0.06);
}

/* Calendar Cell Hours Badge & Header */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px !important;
}

.calendar-day-name {
  text-align: center;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-cell {
  min-height: 68px !important;
  border-radius: 9px !important;
  padding: 6px 4px 5px !important;
  position: relative !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.calendar-cell:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  z-index: 3 !important;
}

.calendar-cell.muted {
  opacity: 0.35 !important;
  cursor: default !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
}

.calendar-cell.muted:hover {
  transform: none !important;
  box-shadow: none !important;
}

.calendar-cell.today {
  box-shadow: 0 0 0 2.5px #0284c7, 0 3px 10px rgba(2, 132, 199, 0.25) !important;
}

.calendar-cell.selected {
  outline: 2.5px solid var(--teal) !important;
  outline-offset: -1px !important;
  z-index: 2 !important;
}

.calendar-number {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  margin: 0 0 2px 0 !important;
}

.cal-day-hours-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  transition: transform 0.1s ease !important;
}

.calendar-cell:hover .cal-day-hours-badge {
  transform: scale(1.05) !important;
}

.cal-workers-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.large-calendar-grid .calendar-cell {
  min-height: 92px !important;
  padding: 8px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.large-calendar-grid .calendar-number {
  font-size: 18px !important;
}

.large-calendar-grid .cal-day-hours-badge {
  font-size: 12px !important;
  padding: 3px 9px !important;
}





/* A dismissed toast must be fully hidden, independent of its height or bottom offset. */
.toast[hidden] {
  display: none !important;
}

/* Timesheet surfaces and state rows share the active theme's palette. */
#view-timesheet {
  color: var(--ink);
}
#view-timesheet #wdTable thead {
  background: var(--surface-alt);
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet .tr-weekend-muted,
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet .tr-weekend-muted td {
  background: var(--surface-alt) !important;
  color: var(--muted) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet .tr-weekend-worked,
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet .tr-weekend-worked td,
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet .calendar-cell.weekend-worked {
  background: var(--orange-soft) !important;
  color: var(--ink) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet .calendar-cell.weekend-muted {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet #wdBulkActionBar {
  background: var(--green-soft) !important;
  border-color: var(--green) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet #wdBulkActionBar span,
:is([data-theme="dark"], [data-theme="ocean"]) #view-timesheet #wdBulkActionBar .text-button {
  color: var(--green) !important;
}

/* Company dashboard and settings: theme-aware inline surfaces and status colors. */
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#0284c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#0284c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #0284c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #0284c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#0369a1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#0369a1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #0369a1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #0369a1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#1e293b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#1e293b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #1e293b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #1e293b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#1e40af;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#1e40af"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #1e40af;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #1e40af"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#334155;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#334155"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #334155;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #334155"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#3b82f6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#3b82f6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #3b82f6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #3b82f6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#475569;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#475569"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #475569;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #475569"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#635bff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#635bff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #635bff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #635bff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#94a3b8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#94a3b8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #94a3b8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #94a3b8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#bae6fd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#bae6fd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #bae6fd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #bae6fd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#bfdbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#bfdbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #bfdbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #bfdbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#c8e1e4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#c8e1e4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #c8e1e4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #c8e1e4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#cbd5e1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#cbd5e1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #cbd5e1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #cbd5e1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#cfdedf;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#cfdedf"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #cfdedf;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #cfdedf"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#dce8ea;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#dce8ea"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #dce8ea;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #dce8ea"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#e0f2fe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#e0f2fe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #e0f2fe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #e0f2fe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#e2e8f0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#e2e8f0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #e2e8f0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #e2e8f0"] {
  color: var(--blue) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#047857;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#047857"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #047857;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #047857"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#059669;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#059669"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #059669;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #059669"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#065f46;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#065f46"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #065f46;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #065f46"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#10b981;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#10b981"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #10b981;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #10b981"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#15803d;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#15803d"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #15803d;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #15803d"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#166534;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#166534"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #166534;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #166534"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#bbf7d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#bbf7d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #bbf7d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #bbf7d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#d1fae5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#d1fae5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #d1fae5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #d1fae5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#dcfce7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#dcfce7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #dcfce7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #dcfce7"] {
  color: var(--green) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#64748b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#64748b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #64748b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #64748b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#6b7280;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#6b7280"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #6b7280;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #6b7280"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#dfe5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#dfe5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #dfe5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #dfe5e7"] {
  color: var(--muted) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#854d0e;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#854d0e"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #854d0e;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #854d0e"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#92400e;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#92400e"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #92400e;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #92400e"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#9a3412;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#9a3412"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #9a3412;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #9a3412"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#b45309;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#b45309"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #b45309;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #b45309"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#c2410c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#c2410c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #c2410c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #c2410c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#d35400;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#d35400"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #d35400;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #d35400"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#d97706;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#d97706"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #d97706;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #d97706"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#f59e0b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#f59e0b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #f59e0b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #f59e0b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fcd34d;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fcd34d"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fcd34d;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fcd34d"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fde047;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fde047"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fde047;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fde047"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fde68a;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fde68a"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fde68a;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fde68a"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fed7aa;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fed7aa"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fed7aa;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fed7aa"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fef3c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fef3c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fef3c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fef3c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fef5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fef5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fef5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fef5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fefce8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fefce8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fefce8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fefce8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#ffedd5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#ffedd5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #ffedd5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #ffedd5"] {
  color: var(--orange) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#b91c1c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#b91c1c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #b91c1c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #b91c1c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#ba3c3c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#ba3c3c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #ba3c3c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #ba3c3c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#be123c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#be123c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #be123c;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #be123c"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#dc2626;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#dc2626"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #dc2626;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #dc2626"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#e11d48;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#e11d48"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #e11d48;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #e11d48"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fecaca;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fecaca"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fecaca;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fecaca"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fecdd3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fecdd3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fecdd3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fecdd3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color:#fee2e2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color:#fee2e2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="color: #fee2e2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="color: #fee2e2"] {
  color: var(--red) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#bae6fd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#bae6fd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #bae6fd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #bae6fd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#bfdbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#bfdbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #bfdbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #bfdbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#c8e1e4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#c8e1e4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #c8e1e4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #c8e1e4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#cbd5e1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#cbd5e1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #cbd5e1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #cbd5e1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#cfdedf;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#cfdedf"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #cfdedf;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #cfdedf"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#dce8ea;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#dce8ea"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #dce8ea;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #dce8ea"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#e0f2fe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#e0f2fe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #e0f2fe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #e0f2fe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#e2e8f0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#e2e8f0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #e2e8f0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #e2e8f0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#e6eef0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#e6eef0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #e6eef0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #e6eef0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#e8f4f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#e8f4f8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #e8f4f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #e8f4f8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#eff6ff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#eff6ff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #eff6ff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #eff6ff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f0efff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f0efff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f0efff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f0efff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f0f7f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f0f7f8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f0f7f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f0f7f8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f0f9ff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f0f9ff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f0f9ff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f0f9ff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f1f5f9;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f1f5f9"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f1f5f9;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f1f5f9"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f7fcfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f7fcfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f7fcfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f7fcfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f8fafb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f8fafb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f8fafb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f8fafb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f8fafc;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f8fafc"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f8fafc;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f8fafc"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fbfbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fbfbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fbfbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fbfbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fbfdfd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fbfdfd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fbfdfd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fbfdfd"] {
  background: var(--blue-soft) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #bae6fd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #bae6fd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #bbf7d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #bbf7d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #bfdbfe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #bfdbfe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #c8e1e4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #c8e1e4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #cbd5e1;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #cbd5e1"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #cfdedf;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #cfdedf"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #d1fae5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #d1fae5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #dce8ea;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #dce8ea"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #dcfce7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #dcfce7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #dfe5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #dfe5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #e0f2fe;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #e0f2fe"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #e2e8f0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #e2e8f0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fecaca;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fecaca"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fecdd3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fecdd3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fed7aa;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fed7aa"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fee2e2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fee2e2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fef3c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fef3c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fef5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fef5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #fefce8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #fefce8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*=" #ffedd5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$=" #ffedd5"] {
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#bbf7d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#bbf7d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #bbf7d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #bbf7d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#d1fae5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#d1fae5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #d1fae5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #d1fae5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#dcfce7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#dcfce7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #dcfce7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #dcfce7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f0fdf4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f0fdf4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f0fdf4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f0fdf4"] {
  background: var(--green-soft) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#dfe5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#dfe5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #dfe5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #dfe5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#eef2f3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#eef2f3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #eef2f3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #eef2f3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#f3f4f6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#f3f4f6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #f3f4f6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #f3f4f6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fafafa;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fafafa"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fafafa;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fafafa"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#ffffff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#ffffff"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #ffffff;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #ffffff"] {
  background: var(--surface-alt) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fecaca;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fecaca"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fecaca;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fecaca"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fecdd3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fecdd3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fecdd3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fecdd3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fee2e2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fee2e2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fee2e2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fee2e2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fef2f2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fef2f2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fef2f2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fef2f2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fff1f2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fff1f2"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fff1f2;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fff1f2"] {
  background: var(--red-soft) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fef3c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fef3c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fef3c7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fef3c7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fef5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fef5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fef5e7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fef5e7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fefce8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fefce8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fefce8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fefce8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#ffedd5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#ffedd5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #ffedd5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #ffedd5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fff7ed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fff7ed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fff7ed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fff7ed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fffbeb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fffbeb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fffbeb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fffbeb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background:#fffdf5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background:#fffdf5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style*="background: #fffdf5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) [style$="background: #fffdf5"] {
  background: var(--orange-soft) !important;
}

:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) .month-nav,
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-dashboard, #view-settings, #view-employees, #employeeModal) .data-table thead,
:is([data-theme="dark"], [data-theme="ocean"]) #view-settings .add-holiday-box {
  background: var(--surface-alt) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-dashboard .calendar-cell.weekend-muted {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-dashboard .calendar-cell.weekend-worked {
  background: var(--orange-soft) !important;
  border-color: var(--orange) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-dashboard :is(.calendar-cell.weekend-muted, .calendar-cell.weekend-worked) .calendar-number {
  color: var(--ink) !important;
}

/* Employee editor and archived staff: remaining inline colors. */
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#7f1d1d;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#7f1d1d"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #7f1d1d;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #7f1d1d"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#991b1b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#991b1b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #991b1b;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #991b1b"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#c23838;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#c23838"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #c23838;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #c23838"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#d96060;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#d96060"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #d96060;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #d96060"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#fedddd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#fedddd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #fedddd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #fedddd"] {
  color: var(--red) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#8d9da3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#8d9da3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #8d9da3;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #8d9da3"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#e0e4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#e0e4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #e0e4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #e0e4e6"] {
  color: var(--muted) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#a7f3d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#a7f3d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #a7f3d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #a7f3d0"] {
  color: var(--green) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #a7f3d0;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #a7f3d0"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #dbe4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #dbe4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #e0e4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #e0e4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #e1ebed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #e1ebed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #e2eaec;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #e2eaec"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #ecfdf5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #ecfdf5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #edf2f4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #edf2f4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #f3f6f7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #f3f6f7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #f4f8f9;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #f4f8f9"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #f9fbfb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #f9fbfb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #fbfbfb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #fbfbfb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #fedddd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #fedddd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*=" #fff8f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$=" #fff8f8"] {
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#dbe4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#dbe4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #dbe4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #dbe4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#e1ebed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#e1ebed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #e1ebed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #e1ebed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#e2eaec;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#e2eaec"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #e2eaec;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #e2eaec"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#edf2f4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#edf2f4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #edf2f4;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #edf2f4"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#f3f6f7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#f3f6f7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #f3f6f7;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #f3f6f7"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#f4f8f9;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#f4f8f9"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #f4f8f9;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #f4f8f9"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#f9fbfb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#f9fbfb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #f9fbfb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #f9fbfb"] {
  background: var(--blue-soft) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#dbe4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#dbe4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #dbe4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #dbe4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#e1ebed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#e1ebed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #e1ebed;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #e1ebed"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color:#e2eaec;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color:#e2eaec"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="color: #e2eaec;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="color: #e2eaec"] {
  color: var(--blue) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#e0e4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#e0e4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #e0e4e6;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #e0e4e6"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#fbfbfb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#fbfbfb"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #fbfbfb;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #fbfbfb"] {
  background: var(--surface-alt) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#ecfdf5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#ecfdf5"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #ecfdf5;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #ecfdf5"] {
  background: var(--green-soft) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#fedddd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#fedddd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #fedddd;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #fedddd"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background:#fff8f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background:#fff8f8"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style*="background: #fff8f8;"],
:is([data-theme="dark"], [data-theme="ocean"]) :is(#view-employees, #employeeModal) [style$="background: #fff8f8"] {
  background: var(--red-soft) !important;
}

:is([data-theme="dark"], [data-theme="ocean"]) #view-employees .emp-tab-btn:not(.active) {
  background: var(--surface-alt) !important;
  color: var(--muted) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #tabArchivedEmployees.active {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-employees .archived-card {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #view-employees .employees-list-table thead {
  background: var(--surface-alt) !important;
}

/* Native dialog supplies keyboard dismissal and focus restoration for sign-out. */
.logout-confirm-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.logout-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, .55);
}
.logout-confirm-dialog .modal-header { align-items: flex-start; gap: 16px; }
.logout-confirm-dialog h2 { color: var(--ink); }
.logout-confirm-dialog p { line-height: 1.6; }
.logout-confirm-dialog button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
:is([data-theme="dark"], [data-theme="ocean"]) .filter-button {
  background: var(--surface-alt) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #employeeModal {
  --text: var(--ink);
}
:is([data-theme="dark"], [data-theme="ocean"]) #employeeModal .modal {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #employeeModal :is(input.form-input, select.form-input, textarea.form-input),
:is([data-theme="dark"], [data-theme="ocean"]) #employeeModal select option {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--input-border) !important;
}
:is([data-theme="dark"], [data-theme="ocean"]) #employeeModal .form-input:disabled {
  background: var(--surface-alt) !important;
  color: var(--muted) !important;
  opacity: 1;
}
:is([data-theme="dark"], [data-theme="ocean"]) #employeeModal .modal-close {
  color: var(--muted);
}

/* Categories fit within the subscription card's original single-column width. */
#companySubscriptionSettings,
#workerCategorySettings,
#workerCategorySettings .section-title-wrap > div {
  min-width: 0;
}
#workerCategorySettings .category-add-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
#workerCategorySettings .category-add-fields > div {
  min-width: 0;
}
#workerCategorySettings .category-add-fields > div:last-child {
  grid-column: 1 / -1;
}
#workerCategorySettings #btnAddNewCategory {
  width: 100%;
}
#workerCategorySettings .data-table :is(th, td) {
  padding: 8px;
  font-size: 10px;
}
#workerCategorySettings #jobCategoriesTableBody td:last-child > div {
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 420px) {
  #workerCategorySettings .category-add-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Weekly rest is labelled independently of annual leave; worked weekends blend green and teal. */
.calendar-weekly-rest-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  margin: 3px 0;
  overflow-wrap: anywhere;
}
#appShellView .view-panel .calendar-cell.weekend-worked,
#appShellView #view-timesheet #wdCalendarGrid .calendar-cell.weekend-worked {
  background: linear-gradient(135deg, #15803d 0%, #0f766e 100%) !important;
  border-color: #0f766e !important;
}
#appShellView .view-panel .calendar-cell.weekend-worked .calendar-number,
#appShellView .view-panel .calendar-cell.weekend-worked .calendar-weekly-rest-label,
#appShellView #view-timesheet #wdCalendarGrid .calendar-cell.weekend-worked .calendar-number {
  color: #fff !important;
  text-shadow: none !important;
}

/* Compact 4-in-a-row metric cards for Leaves & Vacations */
#leavesSummaryCards.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}
#leavesSummaryCards .metric-card {
  padding: 16px 16px 14px;
}
#leavesSummaryCards .metric-card > strong {
  font-size: 24px;
  letter-spacing: -0.8px;
  display: block;
  margin: 6px 0 3px;
  text-align: left;
}
#leavesSummaryCards .metric-foot {
  margin-top: 8px;
}
#leavesSummaryCards .metric-foot small {
  font-size: 10px;
  display: block;
  line-height: 1.35;
}

.security-reset-dialog { width:min(440px,calc(100vw - 24px)); border:1px solid var(--line);border-radius:20px;padding:24px;color:var(--ink);background:var(--surface,#fff); }
.security-reset-dialog::backdrop {background:rgba(0,0,0,.55);}
.security-reset-dialog label {display:block;margin:18px 0;font-size:14px;}
.security-reset-dialog input {display:block;width:100%;margin-top:8px;min-height:46px;}
.security-reset-actions {display:flex;justify-content:flex-end;gap:12px;}

.worker-today-summary {margin-bottom:18px;display:grid;gap:10px;border-left:4px solid var(--teal);}
.worker-today-summary[hidden] {display:none;}
.worker-today-summary > strong {font-size:22px;color:var(--ink);}
.worker-today-summary > [data-today-status] {font-size:13px;line-height:1.5;}
.worker-today-summary[data-phase="completed"],.worker-today-summary[data-phase="working"] {border-left-color:#16a34a;}

/* Compact employee calendar for company administrators, on every screen size. */
#appShellView[data-role="admin"] #wdCalendarGrid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
#appShellView[data-role="admin"] #wdCalendarGrid .calendar-cell { min-width: 0; padding: 8px !important; min-height: 76px !important; }
#appShellView[data-role="admin"] #wdCalendarGrid .calendar-cell-top { flex-wrap: wrap; gap: 4px; }
#appShellView[data-role="admin"] #wdCalendarGrid .attendance-worked { background: #dcfce7 !important; border-color: #86efac !important; color: #14532d !important; }
#appShellView[data-role="admin"] #wdCalendarGrid .attendance-absent { background: #ffe4e6 !important; border-color: #fda4af !important; color: #881337 !important; }
#appShellView[data-role="admin"] #wdCalendarGrid :is(.attendance-worked,.attendance-absent) .calendar-number { color: inherit !important; }
#appShellView[data-role="admin"] #wdCalendarGrid .cal-day-hours-badge { background: #15803d; color: white; font-weight: 800; }
#appShellView[data-role="admin"] #wdCalendarGrid .calendar-absence-reason { font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; margin-top: 5px; }
@media(max-width: 600px) {
 #appShellView[data-role="admin"] #wdCalendarGrid { gap: 3px; }
 #appShellView[data-role="admin"] #wdCalendarGrid .calendar-cell { padding: 4px !important; }
}

#appShellView[data-role="admin"] #wdCalendarGrid .calendar-cell { position: relative; min-height: 96px !important; }
#appShellView[data-role="admin"] #wdCalendarGrid .calendar-cell-top { display: contents; }
#appShellView[data-role="admin"] #wdCalendarGrid .calendar-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(24px, 3vw, 36px) !important; font-weight: 800; line-height: 1; }
#appShellView[data-role="admin"] #wdCalendarGrid .cal-day-hours-badge { position: absolute; top: 5px; right: 5px; font-size: 11px; padding: 2px 5px; }
#appShellView[data-role="admin"] #wdCalendarGrid :is(.calendar-absence-reason, .calendar-weekly-rest-label) { position: absolute; bottom: 4px; left: 4px; right: 4px; text-align: center; font-size: 9px; line-height: 1.1; max-height: 25px; overflow: hidden; }

/* Team calendars: centered dates, corner hours and clear current-month borders. */
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell { position: relative; min-width: 0; min-height: 96px; padding: 6px; }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell[data-date] { border: 1.5px solid #4799a7 !important; }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted { border-color: transparent !important; opacity: .35; }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1; }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .cal-day-hours-badge { position: absolute; top: 4px; right: 4px; font-size: 10px; padding: 2px 4px; }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell > :is(div, small, span:not(.calendar-number):not(.cal-day-hours-badge)) { position: absolute; bottom: 4px; left: 3px; right: 3px; text-align: center; font-size: 9px !important; line-height: 1.15; }
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.selected { outline: 2px solid var(--teal); outline-offset: 2px; }
@media(max-width: 600px) {
 #appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) { gap: 4px; }
 #appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell { min-height: 82px; }
}

/* Attendance colors remain explicit in both dark themes. */
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView :is(#calendarGrid, #largeCalendarGrid) .calendar-cell[data-worked="true"],
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView #wdCalendarGrid .calendar-cell.attendance-worked {
 background: #15803d !important; border-color: #4ade80 !important; color: #fff !important;
}
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView :is(#calendarGrid, #largeCalendarGrid) .calendar-cell[data-worked="true"].weekend-worked {
 background: linear-gradient(135deg, #15803d, #0f766e) !important;
}
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView :is(#calendarGrid, #largeCalendarGrid) .calendar-cell[data-worked="true"] :is(.calendar-number, .calendar-weekly-rest-label),
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView #wdCalendarGrid .attendance-worked .calendar-number { color: #fff !important; }
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView #wdCalendarGrid .calendar-cell.attendance-absent { background: #9f1239 !important; color: #fff !important; border-color: #fb7185 !important; }

#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted {
 background: #e2e8f0 !important; border: none !important; opacity: 1 !important;
}
#appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted .calendar-number { color: #64748b !important; text-shadow: none; }
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted { background: #334155 !important; }
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted .calendar-number { color: #cbd5e1 !important; }

/* Adjacent-month dates use text contrast only. */
html #appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted,
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView[data-role="admin"] :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.muted {
 background: transparent !important; border: none !important; box-shadow: none !important;
}

#appShellView[data-role="admin"] #dayEntries tr.attendance-request-pending > td { background: #fef3c7 !important; color: #78350f; }
#appShellView[data-role="admin"] #dayEntries tr.attendance-request-pending > td:first-child { border-left: 4px solid #f59e0b; }
#appShellView[data-role="admin"] #dayEntries .attendance-request-label { display: block; margin-top: 4px; font-size: 10px; font-weight: 800; color: #92400e; }
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView[data-role="admin"] #dayEntries tr.attendance-request-pending > td { background: #55370d !important; color: #fef3c7 !important; }
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView[data-role="admin"] #dayEntries tr.attendance-request-pending :is(.worker-cell b,.attendance-request-label) { color: #fde68a !important; }

#appShellView[data-role="worker"] #wdCalendarGrid .calendar-absence-reason { display:block!important;color:inherit;font-size:9px;line-height:1.1;text-align:center;overflow-wrap:anywhere; }

#appShellView #dayEntries tr.unexcused-absence-row > td { background: #ffe4e6 !important; color: #9f1239 !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView #dayEntries tr.unexcused-absence-row > td { background: #881337 !important; color: #fff1f2 !important; }

/* Dashboard calendar hierarchy and grouped day actions. */
#appShellView[data-role="admin"] :is(#calendarGrid,#largeCalendarGrid) .calendar-cell { min-height: 112px; }
#appShellView[data-role="admin"] :is(#calendarGrid,#largeCalendarGrid) .calendar-number { font-size: clamp(25px,3vw,36px); top: 49%; }
#appShellView[data-role="admin"] :is(#calendarGrid,#largeCalendarGrid) .cal-day-hours-badge { top: 5px; right: 5px; font-size: 11px; line-height: 1.2; border-radius: 5px; }
#appShellView[data-role="admin"] :is(#calendarGrid,#largeCalendarGrid) .calendar-cell > :is(small,span:not(.calendar-number):not(.cal-day-hours-badge)) { bottom: 5px; font-size: 10px !important; line-height: 1.15; }
#appShellView #dayPanelToolbar { padding: 14px !important; gap: 12px !important; border-radius: 14px !important; background: var(--surface) !important; border-color: var(--line) !important; }
#appShellView #dayPanelToolbar > div:first-child { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; width: 100%; }
#appShellView #dayPanelToolbar > div:first-child > div { display: none; }
#appShellView #dayPanelToolbar > div:first-child > label { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-alt,var(--bg)); }
#appShellView #dayPanelToolbar .button { min-height: 42px; padding: 10px 14px !important; font-size: 12px !important; line-height: 1.25; border-radius: 10px; white-space: normal; justify-content: center; }
#appShellView #dayStatsPills { width: 100%; flex-wrap: wrap; gap: 6px !important; }
.dashboard-export-actions { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Worker calendars share the same date hierarchy on desktop and mobile. */
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) { grid-template-columns: repeat(7,minmax(0,1fr)); }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell { position: relative; min-width:0; min-height:108px; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell:not(.muted) { border:1.5px solid #4799a7 !important; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell-top { display:contents; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-number { position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);font-size:30px !important;font-weight:800;line-height:1; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .cal-day-hours-badge { display:block !important;position:absolute;top:4px;right:3px;font-size:10px;padding:2px 4px;border-radius:5px; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell > :is(small,span:not(.calendar-number):not(.cal-day-hours-badge)) { position:absolute;bottom:4px;left:3px;right:3px;text-align:center;font-size:10px !important;line-height:1.15; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell.muted { background:transparent !important;border:none !important;box-shadow:none !important;opacity:1 !important; }
#appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell.muted .calendar-number { color:#64748b !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell.muted .calendar-number { color:#cbd5e1 !important; }
#appShellView[data-role="worker"] #wdCalendarGrid .attendance-worked { background:#15803d !important;color:#fff; }
#appShellView[data-role="worker"] #wdCalendarGrid .attendance-absent { background:#be123c !important;color:#fff; }
#appShellView[data-role="worker"] #wdCalendarGrid :is(.attendance-worked,.attendance-absent) .calendar-number { color:#fff !important; }
.worker-calendar-navigation { display:flex;justify-content:center;margin-bottom:14px; }
#wdMonthNavigation { display:flex;align-items:center;justify-content:space-between;gap:12px; }
#wdMonthNavigation button { min-width:40px;min-height:40px;color:var(--teal);font-size:26px !important; }

/* Consistent, centered dashboard, timesheet and leave metrics. */
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card { display:flex;flex-direction:column;min-height:155px; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card > strong { flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:68px;margin:8px 0;text-align:center;font-size:clamp(26px,3vw,36px) !important;line-height:1.15;overflow-wrap:anywhere; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card .metric-top { width:100%; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card .metric-foot { justify-content:center;text-align:center; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card.accent-teal { background:var(--teal-soft) !important;border-color:var(--teal) !important; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card.accent-blue { background:var(--blue-soft) !important;border-color:var(--blue) !important; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card.accent-orange { background:var(--orange-soft) !important;border-color:var(--orange) !important; }
#appShellView :is(#view-dashboard,#wdKpiGrid,#leavesSummaryCards) .metric-card.accent-violet { background:var(--violet-soft) !important;border-color:var(--violet) !important; }
#wdKpiGrid .metric-view-button { display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:42px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:800;margin-top:6px; }
#wdKpiGrid .metric-view-button.active { background:var(--teal);color:#fff;border-color:var(--teal); }
#geoModal { z-index:1200; }

/* Attendance dialog contrast in both dark themes, including inline-colored panels. */
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal :is(.geo-mode-tabs,.geo-employee-card,.geo-qr-card,.geo-kiosk-card,.geo-fieldwork-box,.geo-status-card) { background:var(--surface-alt) !important;border-color:var(--line) !important;color:var(--ink) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal :is(.geo-qr-card,.geo-kiosk-card,.geo-fieldwork-box,.geo-employee-card) :is(b,label,span) { color:var(--ink) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal :is(.geo-qr-card,.geo-kiosk-card,.geo-fieldwork-box) :is(p,small) { color:var(--muted) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal .form-input { background:var(--input-bg,var(--surface)) !important;color:var(--ink) !important;border-color:var(--line) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal .button-secondary { background:var(--surface-alt) !important;color:var(--ink) !important;border:1px solid var(--line) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal .tab-btn { background:transparent !important;color:var(--ink) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal .tab-btn[style*="var(--surface-alt)"] { background:var(--teal) !important;color:#fff !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal :is(#qrScanSuccessBadge,#kioskSuccessBadge,.geo-badge.in) { background:#14532d !important;color:#dcfce7 !important;border-color:#22c55e !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal .geo-badge { background:var(--surface) !important;color:var(--ink) !important; }
html:is([data-theme="dark"],[data-theme="ocean"]) #geoModal :is(.geo-status-card.out-radius,.geo-badge.out) { background:#7f1d1d !important;color:#fee2e2 !important;border-color:#f87171 !important; }

.worktime-horizontal-logo { display:block;width:190px;height:48px;object-fit:cover;object-position:center; }
.worktime-symbol-logo { display:block;width:40px;height:40px;object-fit:contain;flex:0 0 40px; }
.landing-brand { min-width:0; }
@media(max-width:400px){ .worktime-horizontal-logo { width:155px;height:42px; } }

/* Weekly rest stays visibly red in both dark themes; worked weekends stay green. */
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.weekend-muted[data-date][data-worked="false"]:not(.muted) {
 background:#7f1d1d !important;border-color:#f87171 !important;color:#fee2e2 !important;
}
html:is([data-theme="dark"], [data-theme="ocean"]) #appShellView :is(#calendarGrid, #largeCalendarGrid) .calendar-cell.weekend-muted[data-date][data-worked="false"]:not(.muted) :is(.calendar-number, span, small, div) {
 color:#fee2e2 !important;text-shadow:none !important;
}

/* Larger staff portraits for recognition in both staff views. */
#view-employees .employee-big .avatar { width:76px !important;height:76px !important;flex:0 0 76px;border:2px solid var(--line); }
#view-employees #employeesTable .avatar { width:64px !important;height:64px !important;flex:0 0 64px;border:2px solid var(--line); }
#view-employees .employee-big { gap:14px;min-width:0; }
#view-employees .employee-big > div:last-child { min-width:0;overflow-wrap:anywhere; }
#view-employees .employee-big b { font-size:14px; }
#view-employees #employeesTable td { vertical-align:middle; }

.worker-photo-zoom { cursor:zoom-in; }
.worker-photo-zoom:focus-visible { outline:3px solid var(--teal);outline-offset:3px; }
#workerPhotoDialog { padding:0;border:0;border-radius:16px;background:transparent;max-width:94vw;max-height:90dvh;overflow:visible;box-shadow:0 24px 80px rgba(0,0,0,.35); }
#workerPhotoDialog::backdrop { background:rgba(5,15,25,.85); }
#workerPhotoLarge { display:block;width:auto;height:auto;max-width:min(900px,94vw);max-height:86dvh;object-fit:contain;border-radius:16px; }
#closeWorkerPhoto { position:absolute;top:8px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(5,15,25,.8);color:#fff;border:1px solid rgba(255,255,255,.6);font-size:28px;cursor:pointer; }

.leave-code-guide { margin:0 0 20px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink); }
.leave-code-guide summary {cursor:pointer;font-weight:800;color:var(--teal);}
.leave-code-guide p {font-size:13px;line-height:1.8;margin:12px 0 0;}
.calendar-absence-reason {font-weight:800;}

/* Stable leave colors in selectors, guides, tables and calendar labels. */
:where(.leave-type-chip, #leaveTypeSelect) { --leave-bg:#e2e8f0;--leave-fg:#334155;--leave-line:#94a3b8; }
[data-leave-type="vacation"], [data-leave-type="annual"] {--leave-bg:#dbeafe;--leave-fg:#1e40af;--leave-line:#60a5fa;}
[data-leave-type="weekly"] {--leave-bg:#ffe4e6;--leave-fg:#9f1239;--leave-line:#fb7185;}
[data-leave-type="sick"] {--leave-bg:#fef3c7;--leave-fg:#92400e;--leave-line:#fbbf24;}
[data-leave-type="unpaid"] {--leave-bg:#e2e8f0;--leave-fg:#334155;--leave-line:#94a3b8;}
[data-leave-type="other"], [data-leave-type="personal"] {--leave-bg:#ede9fe;--leave-fg:#5b21b6;--leave-line:#a78bfa;}
[data-leave-type="holiday"] {--leave-bg:#ccfbf1;--leave-fg:#115e59;--leave-line:#2dd4bf;}
.leave-type-chip {display:inline-block;padding:5px 9px;border:1px solid var(--leave-line);border-radius:9px;background:var(--leave-bg);color:var(--leave-fg);font-size:12px;font-weight:800;line-height:1.4;}
.leave-guide-chips {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.leave-type-preview {margin-top:8px;}
#leaveTypeSelect[data-leave-type] {background:var(--leave-bg);color:var(--leave-fg);border:2px solid var(--leave-line);}
#leaveTypeSelect option {background:var(--surface);color:var(--ink);}
.calendar-cell .leave-type-chip {font-size:10px;padding:1px 5px;border-radius:5px;}

.today-leave-summary {border-top:1px solid var(--line);margin-top:14px;padding-top:12px;}
.today-leave-summary[hidden] {display:none;}
.today-leave-title {font-size:11px;font-weight:700;color:var(--muted);}
.today-leave-counts {display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:8px;}
.today-leave-counts .leave-type-chip {font-size:13px;}
.today-leave-counts b {font-size:19px;}

/* Compact dashboard overview; other metric panels retain their layout. */
#appShellView #view-dashboard .dashboard-summary-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;align-items:stretch;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-card {box-sizing:border-box;min-height:116px;padding:12px 14px !important;border-radius:13px;border-width:1px;box-shadow:none;gap:0;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-top {min-height:22px;gap:6px;align-items:center;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-label {font-size:11px;line-height:1.3;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-icon {width:24px;height:24px;min-width:24px;border-radius:7px;font-size:15px;display:flex;align-items:center;justify-content:center;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-card > strong {flex:1;min-height:34px;margin:5px 0;font-size:clamp(23px,2.2vw,29px) !important;line-height:1.1;letter-spacing:-.6px;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-card > strong small {font-size:12px;margin-left:3px;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-foot {font-size:10px;line-height:1.3;gap:4px;min-height:13px;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-card:nth-child(-n+2) .metric-foot {display:none;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-card:has(#metricTodayLeaves:not([hidden])) > .metric-foot {display:none;}
#appShellView #view-dashboard .dashboard-summary-grid .today-leave-summary {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 6px;margin-top:3px;padding-top:6px;}
#appShellView #view-dashboard .dashboard-summary-grid .today-leave-summary[hidden] {display:none;}
#appShellView #view-dashboard .dashboard-summary-grid .today-leave-title {font-size:10px;}
#appShellView #view-dashboard .dashboard-summary-grid .today-leave-counts {margin:0;gap:4px;}
#appShellView #view-dashboard .dashboard-summary-grid .today-leave-counts .leave-type-chip {padding:1px 5px;border-radius:5px;font-size:10px;}
#appShellView #view-dashboard .dashboard-summary-grid .today-leave-counts b {font-size:12px;}
@media(max-width:1050px) {
 #appShellView #view-dashboard .dashboard-summary-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
}
@media(max-width:600px) {
 #appShellView #view-dashboard .dashboard-summary-grid {gap:8px;margin-bottom:12px;}
 #appShellView #view-dashboard .dashboard-summary-grid .metric-card {min-height:108px;padding:10px 12px !important;border-radius:12px;}
 #appShellView #view-dashboard .dashboard-summary-grid .metric-top {min-height:25px;}
 #appShellView #view-dashboard .dashboard-summary-grid .metric-label {font-size:10px;}
 #appShellView #view-dashboard .dashboard-summary-grid .metric-card > strong {font-size:25px !important;min-height:30px;margin:4px 0;}
 #appShellView #view-dashboard .dashboard-summary-grid .metric-foot {font-size:9px;}
}

/* Compact leave overview, matching the dashboard summary. */
#appShellView #view-leaves #leavesSummaryCards.metric-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
#appShellView #view-leaves #leavesSummaryCards .metric-card {box-sizing:border-box;min-height:116px;padding:12px 14px !important;border-radius:13px;box-shadow:none;}
#appShellView #view-leaves #leavesSummaryCards .metric-top {min-height:24px;gap:6px;align-items:center;}
#appShellView #view-leaves #leavesSummaryCards .metric-label {font-size:11px;line-height:1.3;}
#appShellView #view-leaves #leavesSummaryCards .metric-icon {display:flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;border-radius:7px;font-size:15px;}
#appShellView #view-leaves #leavesSummaryCards .metric-card > strong {flex:1;display:flex;align-items:center;justify-content:center;min-height:34px;margin:5px 0;font-size:clamp(23px,2.2vw,29px) !important;line-height:1.1;text-align:center;letter-spacing:-.6px;}
#appShellView #view-leaves #leavesSummaryCards .metric-foot {margin-top:0;min-height:13px;justify-content:center;text-align:center;}
#appShellView #view-leaves #leavesSummaryCards .metric-foot small {font-size:10px;line-height:1.3;}
@media(max-width:1050px) {
 #appShellView #view-leaves #leavesSummaryCards.metric-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
}
@media(max-width:600px) {
 #appShellView #view-leaves #leavesSummaryCards.metric-grid {gap:8px;margin-bottom:12px;}
 #appShellView #view-leaves #leavesSummaryCards .metric-card {min-height:108px;padding:10px 12px !important;border-radius:12px;}
 #appShellView #view-leaves #leavesSummaryCards .metric-label {font-size:10px;}
 #appShellView #view-leaves #leavesSummaryCards .metric-card > strong {font-size:25px !important;min-height:30px;margin:4px 0;}
 #appShellView #view-leaves #leavesSummaryCards .metric-foot small {font-size:9px;}
}

/* Personal work schedule: small metrics and separate table/calendar controls. */
#appShellView #wdKpiGrid {grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px !important;}
#appShellView #wdKpiGrid .metric-card {box-sizing:border-box;min-height:94px;padding:10px 12px !important;border-radius:12px;box-shadow:none;}
#appShellView #wdKpiGrid .metric-card > strong {min-height:30px;margin:4px 0;font-size:clamp(22px,2.2vw,28px) !important;line-height:1.15;}
#appShellView #wdKpiGrid .metric-top {min-height:24px;gap:5px;}
#appShellView .wd-view-toolbar {display:flex;gap:4px;align-items:center;justify-content:flex-start;padding:4px;margin:0 0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);width:fit-content;max-width:100%;}
#appShellView .wd-view-toolbar .btn-view-mode {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 18px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:12px;font-weight:800;cursor:pointer;}
#appShellView .wd-view-toolbar .btn-view-mode.active {background:var(--teal);color:#fff;}
#appShellView .wd-view-toolbar .btn-view-mode:focus-visible {outline:2px solid var(--teal);outline-offset:2px;}
@media(max-width:700px) {
 #appShellView #wdKpiGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
 #appShellView #wdKpiGrid .metric-card {min-height:88px;padding:9px 11px !important;}
 #appShellView #wdKpiGrid .metric-card > strong {font-size:24px !important;}
 #appShellView .wd-view-toolbar .btn-view-mode {min-height:42px;}
}

.leave-request-filters {display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr auto;gap:10px;align-items:end;margin:0 0 16px;}
.leave-request-filters label {display:flex;flex-direction:column;gap:6px;min-width:0;font-size:11px;font-weight:700;color:var(--muted);}
.leave-request-filters label[hidden] {display:none;}
.leave-request-filters .form-input {width:100%;min-width:0;height:38px;box-sizing:border-box;}
.leave-request-filters button {min-height:38px;}
.leave-filter-message {color:var(--red);font-size:12px;margin:0 0 12px;}
@media(max-width:1000px) {.leave-request-filters {grid-template-columns:repeat(2,minmax(0,1fr));}.leave-request-filters button {justify-self:start;}}
@media(max-width:400px) {.leave-request-filters {gap:8px;}.leave-request-filters .form-input {font-size:11px;padding:0 6px;}}

/* Leave codes sit at the bottom-left of date squares in every calendar. */
#appShellView:is([data-role="admin"], [data-role="worker"]) :is(#calendarGrid, #largeCalendarGrid, #wdCalendarGrid) .calendar-cell > :is(.calendar-absence-reason, .calendar-weekly-rest-label) {
 position:absolute !important;
 top:auto !important;
 bottom:5px !important;
 left:5px !important;
 right:auto !important;
 width:auto !important;
 max-width:calc(100% - 10px);
 margin:0 !important;
 text-align:left !important;
 transform:none !important;
 line-height:1.15;
 z-index:1;
}
#appShellView:is([data-role="admin"], [data-role="worker"]) :is(#calendarGrid, #largeCalendarGrid, #wdCalendarGrid) .calendar-cell > .calendar-absence-reason .leave-type-chip {
 display:inline-block;
 vertical-align:bottom;
}

/* The worker dashboard and personal schedule share the same day palette. */
html #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state]:not(.muted) {
 background:var(--day-bg,var(--surface,#fff)) !important;border:1.5px solid var(--day-border,var(--line,#e2e8f0)) !important;color:var(--day-ink,var(--ink,#1e293b)) !important;
}
html #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state="worked"] {--day-bg:#10b981;--day-border:#059669;--day-ink:#fff;}
html #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state="leave"] {--day-bg:#fffbeb;--day-border:#fde68a;--day-ink:#92400e;}
html #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state="rest"] {--day-bg:#fee2e2;--day-border:#fca5a5;--day-ink:#991b1b;}
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state="leave"] {--day-bg:#55370d;--day-border:#b7832e;--day-ink:#fef3c7;}
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state="rest"] {--day-bg:#7f1d1d;--day-border:#f87171;--day-ink:#fee2e2;}
html #appShellView[data-role="worker"] :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell[data-worker-state]:not(.muted) .calendar-number {color:var(--day-ink,var(--ink,#1e293b)) !important;text-shadow:none;}

/* Keep weekly-rest badges legible despite dark-calendar text overrides. */
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell :is(.leave-type-chip[data-leave-type="weekly"],.calendar-weekly-rest-label[data-leave-type="weekly"]),
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid) .calendar-cell.weekend-muted[data-date][data-worked="false"]:not(.muted) .leave-type-chip[data-leave-type="weekly"] {
 background:#ffe4e6 !important;color:#881337 !important;border:1px solid #fda4af !important;text-shadow:none !important;opacity:1 !important;
}
/* Dashboard month navigation gets its own centered row on desktop and phone. */
#appShellView #view-dashboard .calendar-panel > .panel-heading {display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;}
#appShellView #view-dashboard .calendar-panel > .panel-heading > .month-nav {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;width:min(100%,440px);justify-self:center;margin:0 auto;padding:0;background:transparent;border:0;}
#appShellView #view-dashboard #calendarMonth {font-size:clamp(20px,3vw,28px);font-weight:800;text-align:center;line-height:1.25;color:var(--ink);letter-spacing:-.5px;}
#appShellView #view-dashboard :is(#prevMonth,#nextMonth) {display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--teal);font-size:28px;line-height:1;}
#appShellView #view-dashboard :is(#prevMonth,#nextMonth):focus-visible {outline:2px solid var(--teal);outline-offset:3px;}
@media(max-width:600px) {#appShellView #view-dashboard .calendar-panel > .panel-heading {gap:10px;}#appShellView #view-dashboard .calendar-panel > .panel-heading > .month-nav {gap:8px;}}
.planning-fields {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
#workPlanningForm label {font-size:12px;font-weight:700;}
.planning-fields label,.planning-comment {display:flex;flex-direction:column;gap:6px;}
.planning-comment {margin-top:14px;}.planning-comment textarea {height:auto;min-height:72px;padding:10px;}
.planning-selection {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 10px;}
.planning-selection label,.planning-worker {display:flex;align-items:center;gap:10px;}
.planning-workers {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:340px;overflow:auto;}
.planning-worker {border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);min-width:0;cursor:pointer;}
.planning-worker:has(input:checked) {border-color:var(--teal);background:var(--teal-soft);}
.planning-worker small {display:block;margin-top:4px;color:var(--muted);font-size:10px;}.planning-worker.unavailable {opacity:.65;cursor:default;}
.planning-worker input,.planning-selection input {width:18px;height:18px;accent-color:var(--teal);flex-shrink:0;}
.planning-message {font-size:12px;color:var(--teal);}.planning-message.is-error {color:var(--red);}
.planning-list-panel {margin-top:18px;}.planning-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.planning-row p,.planning-notice p {margin:6px 0;}.planning-row small {white-space:pre-wrap;overflow-wrap:anywhere;}
.planning-notice {border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:10px;padding:12px;background:var(--surface);color:var(--ink);margin-bottom:10px;}
.worker-upcoming-plans {margin-bottom:16px;}.worker-upcoming-plans[hidden] {display:none;}
#appShellView #view-dashboard .dashboard-summary-grid .metric-card:has(#metricTodayLeaves:not([hidden])) > .metric-foot {display:flex;}
@media(max-width:800px){.planning-fields,.planning-workers{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:500px){.planning-workers{grid-template-columns:minmax(0,1fr);}.planning-row{align-items:flex-start;flex-direction:column;}#planSave{width:100%;}}
.company-work-days {border:1px solid var(--line);border-radius:12px;padding:12px;margin:16px 0 0;min-width:0;}
.company-work-days legend {font-size:12px;font-weight:800;padding:0 6px;color:var(--ink);}
#companyWorkDays {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}
#companyWorkDays label {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;margin:0;padding:7px 2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:10px;}
#companyWorkDays label:has(input:checked) {background:var(--teal-soft);border-color:var(--teal);color:var(--teal);}
#companyWorkDays input {accent-color:var(--teal);width:16px;height:16px;margin:0;}
.company-work-days p,.bonus-rules-hint {font-size:11px;line-height:1.6;margin:10px 0 0;}
.split-bonus-rates {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;}
.split-bonus-rates label {display:flex;flex-direction:column;gap:7px;margin:0 !important;line-height:1.5;}
.split-bonus-rates .form-input {width:100%;font-weight:800;}
@media(max-width:420px){#companyWorkDays {grid-template-columns:repeat(4,minmax(0,1fr));}.split-bonus-rates {grid-template-columns:minmax(0,1fr);}}
.subscription-detail-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;}
.subscription-detail-grid > div {padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-width:0;}
.subscription-detail-grid span {display:block;font-size:10px;color:var(--muted);margin-bottom:6px;}
.subscription-detail-grid b {font-size:13px;line-height:1.5;overflow-wrap:anywhere;}
.subscription-payment-note {font-size:11px;line-height:1.7;padding:10px 12px;border-left:3px solid var(--teal);background:var(--teal-soft);color:var(--ink);border-radius:6px;}
@media(max-width:420px) {.subscription-detail-grid {gap:8px;}.subscription-detail-grid > div {padding:10px;}}
/* Combined weekly-rest/holiday badge keeps the same corner position and dark contrast. */
#appShellView :is(#calendarGrid,#largeCalendarGrid) .calendar-absence-reason .leave-type-chip {white-space:nowrap;}
#settingsCurrentPlanName[data-subscription-state="expired"] {color:var(--red) !important;}
#settingsCurrentPlanName[data-subscription-state="trial"] {color:var(--orange) !important;}
/* Grouped planning: compact overview first, roster and editor on demand. */
.planning-editor {margin-top:12px;padding:14px !important;}.planning-editor>summary {font-size:13px;font-weight:800;cursor:pointer;color:var(--teal);}.planning-editor form {margin-top:12px;}
.planning-worker-picker {margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:10px;}.planning-worker-picker>summary {cursor:pointer;font-weight:800;margin-bottom:10px;}
#view-planning .planning-fields {margin-top:12px;gap:8px;}#view-planning .planning-workers {grid-template-columns:repeat(3,minmax(0,1fr));max-height:250px;gap:5px;}#view-planning .planning-worker {padding:7px 9px;font-size:11px;}
.planning-group {border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--surface);}.planning-group>summary {display:flex;justify-content:space-between;gap:14px;padding:14px;cursor:pointer;list-style:none;}.planning-group>summary b {font-size:14px;}.planning-group>summary small {display:block;margin-top:5px;color:var(--muted);font-size:11px;}
.planning-group-counts {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px;}.planning-group-counts>span,.planning-response {padding:4px 7px;border-radius:7px;background:var(--orange-soft);font-size:10px;font-weight:800;color:var(--orange);}.planning-group-counts>.accepted,.planning-response.accepted {background:var(--green-soft);color:var(--green);}.planning-group-counts>.declined,.planning-response.declined {background:var(--red-soft);color:var(--red);}.planning-group-counts>b {font-size:12px !important;color:var(--teal);}
.planning-group-body {padding:0 14px 14px;border-top:1px solid var(--line);}.planning-group-body>p {white-space:pre-wrap;overflow-wrap:anywhere;}.planning-member-list {margin-top:12px;}.planning-member-list>div {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);}.planning-member-list small {width:100%;white-space:pre-wrap;color:var(--muted);}.planning-member-list .text-button {margin-left:auto;font-size:10px;}
.planning-notice-head {display:flex;align-items:center;justify-content:space-between;gap:10px;}.planning-reply-actions {display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;}.planning-response-dialog {width:min(440px,calc(100vw - 24px));max-height:90dvh;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);}.planning-response-dialog::backdrop {background:#101d32aa;}.planning-response-dialog textarea {height:auto;min-height:96px;margin:8px 0;padding:10px;}.planning-response-dialog #planningDeclineError {color:var(--red);font-size:12px;}
html #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"][data-plan-worked="false"]:not(.muted) {background:#ede9fe !important;border:2px solid #8b5cf6 !important;color:#5b21b6 !important;}
html #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"][data-plan-worked="false"]:not(.muted) .calendar-number {color:#5b21b6 !important;}
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"][data-plan-worked="false"]:not(.muted) {background:#3b176d !important;border-color:#a78bfa !important;color:#ede9fe !important;}
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"][data-plan-worked="false"]:not(.muted) .calendar-number {color:#ede9fe !important;}
@media(max-width:700px){.planning-group>summary {flex-direction:column;gap:8px;padding:12px;}.planning-group-counts {justify-content:flex-start;}#view-planning .planning-workers {grid-template-columns:repeat(2,minmax(0,1fr));}.planning-reply-actions .button {flex:1;}}
.planning-archive {margin-top:16px;padding:14px;}.planning-archive>summary {cursor:pointer;font-weight:800;color:var(--teal);}.planning-delete {color:var(--red) !important;border-color:var(--red) !important;margin:8px 0 8px 6px;}
#planningAcceptError {color:var(--red);font-size:12px;}
html #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell > .calendar-plan-caption {position:absolute !important;top:4px !important;left:4px !important;right:auto !important;bottom:auto !important;max-width:calc(100% - 8px);font-size:8px !important;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit !important;text-align:left !important;margin:0;padding:1px 3px;background:var(--surface);border:1px solid #a78bfa;border-radius:4px;z-index:2;}
html #appShellView:is([data-role="worker"],[data-role="admin"]) .calendar-cell[data-plan-worked="true"]>.calendar-plan-caption {max-width:calc(100% - 45px);color:#5b21b6 !important;background:#ede9fe;}
@media(max-width:600px){.planning-delete {margin-left:0;width:100%;}.planning-response-dialog {padding:16px;}}
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"]:not(.muted)>.calendar-plan-caption {background:#ede9fe !important;color:#5b21b6 !important;border-color:#a78bfa !important;}

/* The same visible plan badge and contrast apply to every worker/admin calendar. */
html #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"][data-plan-worked]:not(.muted)>.calendar-plan-caption {
 display:block !important;visibility:visible !important;opacity:1 !important;
 background:#ede9fe !important;color:#4c1d95 !important;border:1px solid #a78bfa !important;
 text-shadow:none !important;font-weight:800 !important;
}
html:is([data-theme="dark"],[data-theme="ocean"]) #appShellView:is([data-role="worker"],[data-role="admin"]) :is(#calendarGrid,#largeCalendarGrid,#wdCalendarGrid,#historyCalendarGrid) .calendar-cell[data-planned="true"][data-plan-worked]:not(.muted)>.calendar-plan-caption {
 background:#ede9fe !important;color:#4c1d95 !important;border-color:#c4b5fd !important;
}

/* Compact worker plan disclosure; details remain in the shared plan dialog. */
#workerUpcomingPlans {padding:0;overflow:hidden;}
.worker-plans-disclosure>summary {display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:800;color:var(--ink);list-style:none;}
.worker-plans-disclosure>summary::-webkit-details-marker {display:none;}
.worker-plans-disclosure>summary::after {content:'⌄';margin-left:auto;font-size:20px;transition:transform .15s;}
.worker-plans-disclosure[open]>summary::after {transform:rotate(180deg);}
.worker-plans-count {background:#ede9fe;color:#4c1d95;border-radius:20px;padding:2px 9px;font-size:12px;}
.worker-plans-preview {padding:0 12px 12px;display:grid;gap:8px;}
.worker-plan-preview {width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;}
.worker-plan-preview>span:first-child {flex:1;min-width:0;}
.worker-plan-preview strong,.worker-plan-preview small {display:block;overflow-wrap:anywhere;}
.worker-plan-preview strong {font-size:14px;}.worker-plan-preview small {font-size:12px;margin-top:4px;}
.worker-plan-preview:hover,.worker-plan-preview:focus-visible {border-color:#a78bfa;outline:2px solid #a78bfa;outline-offset:1px;}
.worker-plans-calendar-hint {font-size:12px;color:var(--ink);margin:4px 2px;}
@media(max-width:480px){.worker-plan-preview {flex-wrap:wrap;}.worker-plan-preview>span:first-child {flex-basis:65%;}.worker-plan-preview .planning-response {font-size:10px;}}

#view-planning [hidden] {display:none!important;}
.worker-planning-month {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.worker-planning-month h2 {text-align:center;font-size:22px;color:var(--ink);margin:0;}
.worker-planning-grid,.worker-planning-weekdays {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.worker-planning-weekdays {text-align:center;color:var(--ink);font-size:11px;margin-bottom:8px;}
.worker-planning-date {position:relative;min-height:90px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;padding:6px;}
.worker-planning-date:disabled {opacity:1;}
.worker-planning-date strong {font-size:22px;}
.worker-planning-date.has-plan {background:#ede9fe;color:#4c1d95;border:2px solid #8b5cf6;cursor:pointer;}
.worker-planning-date small {display:block;font-size:10px;line-height:1.3;margin-top:6px;overflow-wrap:anywhere;}
html:is([data-theme="dark"],[data-theme="ocean"]) .worker-planning-date.has-plan {background:#3b176d;color:#f5f3ff;border-color:#c4b5fd;}
.worker-planning-invitations {margin-top:14px;}
@media(max-width:600px){.worker-planning-grid,.worker-planning-weekdays{gap:3px;}.worker-planning-date{min-height:78px;padding:3px;border-radius:7px;}.worker-planning-date strong{font-size:19px;}.worker-planning-date small{font-size:8px;}.worker-planning-month h2{font-size:19px;}}

/* Plan refusal remains clearly visible in every theme and plan surface. */
html .button[data-plan-decline],html #planningDeclineForm button[type="submit"] {
 background:#b91c1c !important;color:#fff !important;border:1px solid #b91c1c !important;
}
html .button[data-plan-decline]:hover,html #planningDeclineForm button[type="submit"]:hover {
 background:#991b1b !important;border-color:#991b1b !important;
}
html .button[data-plan-decline]:focus-visible,html #planningDeclineForm button[type="submit"]:focus-visible {
 outline:3px solid #fca5a5;outline-offset:3px;
}

#overtimeDialog {border-top:5px solid #8b5cf6;}
#overtimeDialog form>label {display:flex;align-items:center;gap:10px;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);}
.overtime-range {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.overtime-range label {min-width:0;}.overtime-range input{margin-top:6px;}
.overtime-notice {border-left-color:#8b5cf6;background:var(--surface);color:var(--ink);}
.overtime-notice [data-decision="reject"] {background:#b91c1c;color:#fff;border-color:#b91c1c;}

html #appShellView[data-role="worker"] #geoCheckinOpenButton[data-attendance-phase="working"] {
 background:var(--green-soft,#e8f6ef)!important;color:var(--ink)!important;border:1px solid var(--green,#2b9b70)!important;box-shadow:none!important;cursor:default!important;pointer-events:none;opacity:1!important;
}

.employee-schedule-badge {display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px;padding:6px 9px;border:1px solid #93c5fd;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-size:11px;line-height:1.3;}
.employee-schedule-badge>span {font-size:10px;font-weight:600;}.employee-schedule-badge>strong {font-size:13px;font-weight:800;white-space:nowrap;}
.employee-schedule-badge[data-overnight="true"] {background:#f5f3ff;color:#4c1d95;border-color:#c4b5fd;}
.employee-schedule-next-day {background:#6d28d9;color:white;border-radius:4px;padding:1px 4px;font-size:9px;}
html:is([data-theme="dark"],[data-theme="ocean"]) .employee-schedule-badge {background:#172554;color:#dbeafe;border-color:#60a5fa;}
html:is([data-theme="dark"],[data-theme="ocean"]) .employee-schedule-badge[data-overnight="true"] {background:#3b176d;color:#ede9fe;border-color:#a78bfa;}

.worker-assigned-schedule {padding:14px 16px;margin-bottom:12px;border-left:4px solid #3b82f6;background:var(--surface);color:var(--ink);}
.worker-assigned-schedule[hidden] {display:none!important;}
.worker-assigned-heading {display:flex;align-items:center;gap:8px;}.worker-assigned-heading h3 {font-size:14px;margin:0;}
.worker-assigned-line {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:8px;}.worker-assigned-line>span{font-size:12px;}
.worker-assigned-schedule .employee-schedule-badge {margin-top:0;}
.worker-assigned-override {border-top:1px solid var(--line);padding-top:10px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}.worker-assigned-override>b{font-size:12px;}

.schedule-period-fields {display:grid;grid-template-columns:1fr 1fr;gap:10px;}.schedule-period-fields label{min-width:0;font-size:12px;}.schedule-period-fields input{margin-top:5px;}
.schedule-period-timeline {margin:12px 0;display:grid;gap:7px;}.schedule-period-timeline>div{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:9px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface);}.schedule-period-timeline strong{display:block;font-size:13px;}.schedule-period-timeline span{font-size:11px;}

.worker-schedule-source-hint {font-size:11px;line-height:1.5;color:var(--ink);margin:9px 0 0;opacity:.85;}

.monthly-review { margin-bottom: 16px; color: var(--ink); }
.monthly-review:empty { display: none; }
.monthly-review-heading, .monthly-review-heading > div, .monthly-review-issues li {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.monthly-review-heading h2 { margin: 0; font-size: 17px; }
.monthly-review-heading label { display: flex; align-items: center; gap: 8px; }
.monthly-review-issues { padding: 0; list-style: none; }
.monthly-review-issues li { border-top: 1px solid var(--line); padding: 9px 0; }
.monthly-review-issues small { display: block; color: var(--muted); margin-top: 3px; }
.monthly-review .table-wrap { overflow-x: auto; margin-top: 10px; }
.monthly-review-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

#workDayDialog { width: min(650px, calc(100vw - 24px)); }
.work-day-record { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px; color: var(--ink); }
.work-day-record h3 { margin: 0 0 8px; font-size: 15px; }
.work-day-record p { margin: 6px 0; }
.work-day-record summary { cursor: pointer; }
.work-day-note { overflow-wrap: anywhere; white-space: pre-wrap; }
.work-day-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.work-day-actions:not(:empty) { margin-top: 8px; }

/* Company settings */
.settings-groups{display:grid;gap:12px;max-width:1150px}
.settings-group{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.settings-group>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none;font-size:15px;font-weight:800;color:var(--ink)}
.settings-group>summary::-webkit-details-marker{display:none}
.settings-group>summary::after{content:'+';flex:none;color:var(--teal);font-size:20px}
.settings-group[open]>summary::after{content:'−'}
.settings-group>summary>small{min-width:0;margin-inline-start:auto;text-align:end;font-weight:700;color:var(--muted);overflow-wrap:anywhere}
.settings-group-dirty>summary>small{color:var(--ink);background:var(--teal-soft);border-radius:6px;padding:4px 7px}
.settings-group>.settings-grid-advanced{padding:0 12px 12px;gap:12px;align-items:start}
.settings-group[data-settings-group="schedule"]>.settings-grid-advanced,
.settings-group[data-settings-group="subscription"]>.settings-grid-advanced{grid-template-columns:minmax(0,1fr)}
.settings-group .settings-card{min-width:0;margin:0}
#view-settings :is(#btnTestGeofence,#btnSaveCheckinMode){margin-top:12px}
#geofenceTestResult:empty{display:none}
#geofenceTestResult{font-size:14px;font-weight:800;color:var(--ink)}
#workerLeaveQuotaTableContainer label{margin:4px 0;display:flex;justify-content:flex-end;align-items:center;gap:5px}
:is([data-theme="dark"],[data-theme="ocean"]) #view-settings :is(.settings-badge-icon,.add-holiday-box){background:var(--surface-alt,var(--surface)) !important;color:var(--ink) !important}
@media(max-width:600px){
  .settings-group>summary{padding:12px;font-size:14px}
  .settings-group>summary>small{font-size:11px}
  .settings-group>.settings-grid-advanced{padding:0 8px 8px}
  #view-settings :is(#setCurrency,#btnSaveCurrency){width:100%;flex-basis:100% !important}
  #view-settings .add-holiday-box>div{grid-template-columns:minmax(0,1fr) !important}
}

/* Shared monthly worker report */
#wdKpiGrid .metric-card { padding:12px 16px;min-width:0; }
#wdKpiGrid .metric-top { margin-bottom:4px; }
#wdKpiGrid .metric-card>strong { font-size:18px;overflow-wrap:anywhere; }
.worker-report-leave { margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-alt); }
.worker-report-leave h2 { margin:0 0 8px;font-size:14px; }
.worker-report-leave p { margin:8px 0 0;color:var(--muted); }
.worker-report-leave-items { display:flex;flex-wrap:wrap;gap:6px 12px; }
.worker-report-leave-items span { padding:4px 8px;border:1px solid var(--line);border-radius:6px; }
#monthlyWorkerReview { margin-top:14px; }
#workerMonthlyPrint { display:none; }

@media print {
  @page worker-monthly { size:A4 portrait;margin:13mm; }
  body.printing-worker-report { margin:0 !important;overflow:visible !important;background:white !important; }
  body.printing-worker-report > :not(#workerMonthlyPrint) { display:none !important; }
  body.printing-worker-report #workerMonthlyPrint,
  body.printing-worker-report #workerMonthlyPrint * { visibility:visible !important; }
  body.printing-worker-report #workerMonthlyPrint {
    display:block !important;page:worker-monthly;color:#172a3a;background:#fff;font:10pt/1.35 Arial,sans-serif;
  }
  #workerMonthlyPrint .worker-report-print-header { display:flex;justify-content:space-between;gap:8mm;align-items:center;border-bottom:2px solid #276678;padding-bottom:4mm; }
  #workerMonthlyPrint .worker-report-print-header img { max-width:34mm;height:auto; }
  #workerMonthlyPrint h1 { font-size:20pt;margin:0; }
  #workerMonthlyPrint h2 { font-size:12pt;margin:0 0 2mm; }
  #workerMonthlyPrint p { margin:1mm 0 0; }
  #workerMonthlyPrint .worker-report-print-meta { display:flex;justify-content:space-between;gap:6mm;margin:4mm 0; }
  #workerMonthlyPrint .worker-report-print-totals { display:grid;grid-template-columns:repeat(3,1fr);gap:2mm;margin:0 0 4mm;break-inside:avoid; }
  #workerMonthlyPrint .worker-report-print-totals div { padding:2mm 3mm;border:1px solid #cbd5df;border-radius:2mm; }
  #workerMonthlyPrint .worker-report-print-totals b { display:block;font-size:12pt; }
  #workerMonthlyPrint table { width:100%;border-collapse:collapse;font-size:8.5pt; }
  #workerMonthlyPrint thead { display:table-header-group; }
  #workerMonthlyPrint tr { break-inside:avoid; }
  #workerMonthlyPrint :is(th,td) { border:1px solid #bdc9d4;text-align:start;padding:1.6mm 1.3mm; }
  #workerMonthlyPrint th { background:#eaf0f3; }
  #workerMonthlyPrint :is(th,td):nth-child(n+3):nth-child(-n+7) { text-align:right; }
  #workerMonthlyPrint section { margin-top:5mm; }
}


#workerReportPreview { width:min(820px,calc(100vw - 24px));max-height:92dvh;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:16px; }
#workerReportPreview::backdrop { background:rgba(0,0,0,.5); }
#workerReportPreview [hidden] { display:none !important; }
#workerReportPreview .worker-report-preview-content { overflow:auto;margin-top:14px; }
#workerReportPreview .worker-report-print-header img { display:none; }
#workerReportPreview .worker-report-print-meta,
#workerReportPreview .worker-report-print-totals { display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0; }
#workerReportPreview .worker-report-print-totals b { display:block; }
#workerReportPreview table { width:100%;border-collapse:collapse; }
#workerReportPreview :is(th,td) { text-align:start;padding:6px;border:1px solid var(--line); }

/* Fit the daily attendance table to the admin panel on desktop and tablets. */
#appShellView[data-role="admin"] #dayEntries .data-table :is(th,td) {
  white-space: normal;
  overflow-wrap: anywhere;
}
#appShellView[data-role="admin"] #dayEntries .worker-cell > div { min-width: 0; }
#appShellView[data-role="admin"] #dayEntries .worker-cell .avatar { flex-shrink: 0; }
#appShellView[data-role="admin"] #dayEntries td:last-child > div { flex-wrap: wrap; }
#appShellView[data-role="admin"] #dayEntries td:last-child .button {
  max-width: 100%;
  height: auto;
  min-height: 28px;
  white-space: normal;
  text-align: center;
}
@media (min-width: 601px) {
  #appShellView[data-role="admin"] #dayEntries .data-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  #appShellView[data-role="admin"] #dayEntries .data-table :is(th,td) { padding: 7px 5px; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(1) { width: 5% !important; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(2) { width: 17%; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(3) { width: 24%; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(4) { width: 8%; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(5) { width: 12%; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(6) { width: 14%; }
  #appShellView[data-role="admin"] #dayEntries thead th:nth-child(7) { width: 20%; }
}

.settings-completion { display:inline-block;flex:none;font-size:13px;line-height:1.2; }
.settings-card .section-title-wrap .settings-completion { margin-inline-start:5px; }
.settings-review-button { margin-top:10px; }
.settings-review-button[hidden] { display:none !important; }

#appShellView [data-view="settings"][data-settings-progress] { position:relative;border:1px solid var(--settings-progress-color); }
#appShellView [data-view="settings"][data-settings-progress="incomplete"] { --settings-progress-color:var(--red);background:var(--red-soft);color:var(--ink); }
#appShellView [data-view="settings"][data-settings-progress="complete"] { --settings-progress-color:var(--green);background:var(--green-soft);color:var(--ink); }
#appShellView .settings-nav-status[hidden] { display:none !important; }
#appShellView .nav-item .settings-nav-status { margin-inline-start:auto; }
#appShellView .mobile-nav-btn .settings-nav-status { position:absolute;inset-block-start:4px;inset-inline-end:4px;font-size:10px; }

.worktime-install-link { margin-top:10px; }
#loginModal .worktime-install-link { width:100%; }
.worktime-install-link[hidden], #worktimeInstallDialog [hidden] { display:none !important; }
#worktimeInstallDialog { width:min(530px,calc(100vw - 24px)); }
.worktime-install-steps { display:grid;gap:10px;margin-top:12px; }
.worktime-install-steps > div { padding:12px;border:1px solid var(--line);border-radius:10px; }
.worktime-install-steps p { margin:5px 0 0;color:var(--ink); }
#worktimeLoginQr { margin:14px 0 0;text-align:center; }
#worktimeLoginQr img { display:block;margin:0 auto 7px;background:white;border-radius:8px; }

#appShellView [data-view="projects"][hidden],#openCompanyProjects[hidden],.attendance-project-choice[hidden],.company-project-report[hidden] { display:none !important; }
.company-project-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px; }
.company-project-list h2,.company-project-report h2 { margin:0 0 8px;font-size:17px; }
.company-project-actions { display:flex;flex-wrap:wrap;gap:8px;margin:10px 0; }
.company-project-fields,.company-project-filters { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:10px; }
.company-project-fields label,.company-project-filters label,#companyProjectInfo label,.attendance-project-choice label { display:block;font-weight:700; }
.company-project-fields input,.company-project-filters :is(input,select),#companyProjectInfo :is(select,textarea),.attendance-project-choice select { margin-top:5px; }
.company-project-setting,.attendance-project-choice { padding:10px 12px;margin:12px 0;border:1px solid var(--line);border-radius:9px;background:var(--surface-alt); }
.attendance-project-choice strong:not(:empty) { display:block;color:var(--teal);margin-bottom:8px; }
.day-project-tag { display:inline-block;border-radius:6px;padding:3px 6px;background:var(--teal-soft);color:var(--ink);font-weight:800;overflow-wrap:anywhere; }
#companyProjectInfo img { background:white;display:block;max-width:100%;margin:auto; }
#companyProjectMap { grid-column:1/-1;min-height:170px;border-radius:8px;z-index:0; }
#companyProjectFields { margin-bottom:12px; }

#wdTable .day-project-tag,#historyShiftsTable .day-project-tag,#dayEntries td .day-project-tag,#workerMonthlyPrint .day-project-tag { display:table;margin-top:3px; }
.calendar-cell .calendar-project-tag { position:absolute;bottom:3px;left:4px;max-width:calc(100% - 8px);padding:1px 3px;font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
#historyCalendarGrid .calendar-cell { position:relative; }
.report-project-total { display:block;margin-top:3px; }

.company-project-report .worker-report-print-totals { display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:14px 0; }
.company-project-report .worker-report-print-totals div { padding:10px;border:1px solid var(--line);border-radius:8px; }
.company-project-report .worker-report-print-totals b { display:block;margin-top:3px; }

.payroll-report .table-wrap { margin-top:12px; }
.payroll-report :is(tfoot,summary) { font-weight:700; }
.payroll-detail { margin-top:12px;padding:9px 12px;border:1px solid var(--line);border-radius:8px; }
.payroll-detail summary { cursor:pointer; }
.payroll-matrix .data-table { width:max-content;min-width:100%; }
.payroll-matrix .data-table :is(td,th) { min-width:36px;text-align:center;padding:6px;white-space:nowrap; }
.payroll-matrix .data-table :is(td,th):first-child { position:sticky;left:0;z-index:1;background:var(--surface);text-align:left; }
.payroll-matrix .data-table .payroll-rest { background:var(--teal-soft); }
.payroll-period-bar,.payroll-period-tabs,.payroll-period-controls { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.payroll-period-bar { justify-content:space-between;margin:12px 0; }
.payroll-period-controls button { min-width:40px; }
@media print {
  #workerMonthlyPrint .payroll-matrix { overflow:visible; }
  #workerMonthlyPrint .payroll-matrix .data-table { width:100%;min-width:0; }
  #workerMonthlyPrint .payroll-matrix :is(th,td):first-child { position:static; }
}

.project-calendar-nav,.project-calendar-legend { display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0;flex-wrap:wrap; }
.project-calendar-nav > strong { min-width:145px;text-align:center;text-transform:capitalize; }
.project-calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px; }
.project-calendar-grid > strong { text-align:center;padding:5px 0;font-size:.8rem; }
.project-calendar-day { min-height:62px;min-width:0;padding:4px 1px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:7px;background:var(--surface-alt);color:var(--muted);font:inherit; }
.project-calendar-day.is-worked { background:var(--teal-soft);color:var(--ink);border-color:var(--teal);cursor:pointer; }
.project-calendar-day.is-worked.is-weekend { border-color:#d97706;box-shadow:inset 0 3px #d97706; }
.project-calendar-day.is-worked.is-evening { box-shadow:inset 0 -3px #8b5cf6; }
.project-calendar-day.is-worked.is-weekend.is-evening { box-shadow:inset 0 3px #d97706,inset 0 -3px #8b5cf6; }
.project-calendar-day[aria-pressed="true"] { outline:2px solid var(--ink);outline-offset:-3px; }
.project-calendar-day strong,.project-calendar-day small { font-size:.75rem; }
.project-calendar-marker { display:inline-block;padding:2px 6px;margin-inline-end:4px;border-radius:5px;border:1px solid #d97706;color:var(--ink);font-size:.75rem; }
.project-calendar-marker[data-marker="evening"] { border-color:#8b5cf6; }
.project-calendar-details { margin:14px 0; }
.project-calendar-details article { display:grid;gap:4px;padding:8px 0;border-bottom:1px solid var(--line); }

/* Payment visibility: when enabled, hide all pay/rate UI and columns */
html.payments-hidden [data-pay-card],
html.payments-hidden [data-pay-only] { display: none !important; }

html.payments-hidden #appShellView[data-role="admin"] #dayEntries th:nth-child(5),
html.payments-hidden #appShellView[data-role="admin"] #dayEntries td:nth-child(5),
html.payments-hidden #appShellView[data-role="admin"] #dayEntries th:nth-child(6),
html.payments-hidden #appShellView[data-role="admin"] #dayEntries td:nth-child(6),
html.payments-hidden #appShellView[data-role="worker"] #dayEntries th:nth-child(3),
html.payments-hidden #appShellView[data-role="worker"] #dayEntries td:nth-child(3),
html.payments-hidden #appShellView[data-role="worker"] #dayEntries th:nth-child(4),
html.payments-hidden #appShellView[data-role="worker"] #dayEntries td:nth-child(4) { display: none !important; }

html.payments-hidden #appShellView[data-role="admin"] #wdTable th:nth-child(1),
html.payments-hidden #appShellView[data-role="admin"] #wdTable td:nth-child(1),
html.payments-hidden #appShellView[data-role="admin"] #wdTable th:nth-child(8),
html.payments-hidden #appShellView[data-role="admin"] #wdTable td:nth-child(8) { display: none !important; }

html.payments-hidden #appShellView[data-role="worker"] #wdTable th:nth-child(8),
html.payments-hidden #appShellView[data-role="worker"] #wdTable td:nth-child(7) { display: none !important; }

html.payments-hidden #historyMonthsTable th:nth-child(6),
html.payments-hidden #historyMonthsTable td:nth-child(6),
html.payments-hidden #historyMonthsTable th:nth-child(7),
html.payments-hidden #historyMonthsTable td:nth-child(7) { display: none !important; }

html.payments-hidden #historyShiftsTable th:nth-child(7),
html.payments-hidden #historyShiftsTable td:nth-child(7) { display: none !important; }

html.payments-hidden #employeesTable th:nth-child(1),
html.payments-hidden #employeesTable td:nth-child(1),
html.payments-hidden #employeesTable th:nth-child(5),
html.payments-hidden #employeesTable td:nth-child(5),
html.payments-hidden #employeesTable th:nth-child(7),
html.payments-hidden #employeesTable td:nth-child(7) { display: none !important; }

html.payments-hidden #monthlyReportTable th:nth-child(3),
html.payments-hidden #monthlyReportTable td:nth-child(3),
html.payments-hidden #monthlyReportTable th:nth-child(4),
html.payments-hidden #monthlyReportTable td:nth-child(4) { display: none !important; }

html.payments-hidden #thCatStandardHourly,
html.payments-hidden #jobCategoriesTableBody td:nth-child(2) { display: none !important; }

.day-work-sessions { display:grid;gap:7px; }
.day-work-sessions > div + div { border-top:1px solid var(--line);padding-top:7px; }

html #appShellView .calendar-cell > .calendar-missing-confirmations {
  position:absolute;top:3px;bottom:auto;left:3px;right:auto;
  display:flex;gap:2px;align-items:center;width:max-content;z-index:3;
}
.calendar-missing-confirmation {
  display:grid;place-items:center;width:11px;height:13px;border-radius:3px;
  color:#fff;background:#b91c1c;font-size:11px;font-weight:850;line-height:1;
}

html #appShellView .calendar-cell[data-planned="true"] > .calendar-missing-confirmations { top:17px; }