:root{color-scheme:dark;--bg:#0b1120;--panel:#131e31;--panel-light:#172438;--border:#263549;--border-soft:#223044;--text:#eff5ff;--muted:#8c9bb2;--cyan:#32d1e9;--violet:#9b8afc;--green:#4cdaa8;--amber:#f6bd6a;--blue:#6497fc;--color-engineer1:#6497fc;--color-engineer2:#f89868;--color-operator1:#ac86f5;--color-operator2:#56d8ac;--radius:17px;--shadow:0 12px 36px rgba(0,0,0,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 55% -20%,#1a3044 0%,#0b1120 48%,#09101c 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.45}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.app-shell{min-height:100vh}.topbar{height:82px;border-bottom:1px solid rgba(155,178,206,.12);display:flex;align-items:center;gap:42px;padding:0 max(30px,calc((100vw - 1420px)/2));background:rgba(11,18,31,.72);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand-mark{display:grid;grid-template-columns:repeat(2,11px);grid-template-rows:repeat(2,11px);gap:4px;transform:rotate(-12deg)}.brand-mark span{border-radius:3px;background:var(--cyan)}.brand-mark span:nth-child(2){opacity:.45}.brand-mark span:nth-child(3){opacity:.75}.brand-mark span:nth-child(4){background:var(--violet)}.brand-copy{display:flex;flex-direction:column;line-height:1.1}.brand-copy strong{font-size:22px;letter-spacing:-.055em;font-weight:800}.brand-dot,.heading-accent{color:var(--cyan)}.brand-copy small{font-size:9px;letter-spacing:.2em;color:var(--muted);margin-top:4px;font-weight:700}.header-nav{display:flex;gap:8px;align-self:stretch;align-items:stretch}.nav-link{border:0;background:none;color:#9dabc0;padding:0 17px;display:flex;align-items:center;font-size:13px;font-weight:600;white-space:nowrap;position:relative}.nav-link:hover{color:white}.nav-link.is-active{color:var(--cyan)}.nav-link.is-active:after{position:absolute;content:'';height:2px;left:17px;right:17px;bottom:0;background:var(--cyan);border-radius:5px}.header-actions{margin-left:auto;display:flex;gap:17px;align-items:center}.account{display:flex;align-items:center;gap:9px;color:#c5d0e0;font-size:12px;max-width:280px}.online-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(76,218,168,.07);flex:none}.account-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-form{margin:0}.button{display:inline-flex;gap:8px;align-items:center;justify-content:center;border-radius:10px;border:1px solid transparent;padding:11px 16px;font-size:12px;font-weight:700;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}.button:hover{transform:translateY(-1px)}.button-primary{color:#05202a;background:linear-gradient(135deg,#48e0e8,#31bade);box-shadow:0 6px 18px rgba(42,205,229,.14)}.button-primary:hover{background:#74e9f2}.button-quiet,.button-secondary{border-color:var(--border);background:#172438;color:#dbe5f3}.button-quiet:hover,.button-secondary:hover{border-color:var(--cyan)}.button-icon{font-size:18px;font-weight:400;line-height:0}
.page-content{max-width:1480px;padding:44px 30px 30px;margin:auto}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow,.section-kicker{font-size:10px;font-weight:800;letter-spacing:.175em;color:var(--cyan)}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow-line{height:2px;width:18px;background:var(--cyan)}h1{margin:10px 0 6px;font-weight:800;letter-spacing:-.055em;font-size:clamp(30px,4vw,46px);line-height:1.1}h2,h3,p{margin-top:0}.lead{color:var(--muted);margin-bottom:0;font-size:13px}.page-heading-actions{display:flex;align-items:center;gap:12px}.admin-chip{font-size:11px;color:#c2bafb;background:rgba(155,138,252,.1);border:1px solid rgba(155,138,252,.2);padding:9px 13px;border-radius:9px;white-space:nowrap}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}.stat-card{padding:21px 22px 19px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,rgba(30,46,68,.77),rgba(18,30,48,.88));min-width:0}.stat-head{display:flex;justify-content:space-between;gap:10px;color:#a9b7c9;font-size:12px;font-weight:600}.stat-symbol{font-size:23px;line-height:1;opacity:.85;color:var(--cyan)}.stat-green{color:var(--green)}.stat-amber{color:var(--amber)}.stat-violet{color:var(--violet)}.stat-number{font-size:35px;line-height:1.15;letter-spacing:-.05em;font-weight:800;margin:18px 0 7px}.stat-unit{font-size:14px;color:#99a9c1;font-weight:500;letter-spacing:0}.stat-desc{display:flex;align-items:center;gap:7px;color:#788da7;font-size:11px}.tiny-dot{width:7px;height:7px;display:inline-block;background:#7c8ba2;border-radius:50%;flex:none}.tiny-dot.green{background:var(--green)}.tiny-dot.amber{background:var(--amber)}.tiny-dot.blue{background:var(--blue)}.tiny-dot.violet{background:var(--violet)}.tiny-dot.teal{background:var(--cyan)}.tiny-dot.grey{background:#64748b}
.schedule-grid{display:grid;grid-template-columns:minmax(0,1.93fr) minmax(310px,.9fr);gap:20px;align-items:stretch;scroll-margin-top:22px}.surface{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(165deg,#172439,#111c2e);box-shadow:var(--shadow)}.calendar-surface{padding:25px 27px 20px}.surface-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.surface-heading h2,.team-heading h2{font-size:20px;font-weight:750;letter-spacing:-.035em;margin:7px 0 0}.month-switcher{display:flex;align-items:center;gap:14px}.month-title{font-size:13px;font-weight:700;min-width:145px;text-align:center}.month-arrow{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:0;border:1px solid #314157;background:#1a2a40;border-radius:9px;color:#cbd7e9}.month-arrow:hover{color:var(--cyan);border-color:var(--cyan)}.legend{display:flex;gap:21px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-top:20px;padding:0 0 18px;color:var(--muted);font-size:11px}.legend span{display:flex;gap:7px;align-items:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:11px}.weekday{text-align:center;color:#8d9fb7;font-weight:700;font-size:10px;letter-spacing:.05em;padding:6px 0 9px}.calendar-day{appearance:none;min-height:85px;min-width:0;border:1px solid #2a3950;border-radius:11px;text-align:left;background:#152136;color:var(--text);padding:10px;position:relative;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .15s,background .15s}.calendar-day:hover:not(.day-empty){border-color:#5a809e;background:#1c2c43}.calendar-day.is-selected{border-color:var(--cyan);background:#1c3045;box-shadow:inset 0 0 0 1px rgba(50,209,233,.25)}.calendar-day.is-today .date-value{color:var(--cyan)}.calendar-day.day-empty{border-color:transparent;background:rgba(9,17,29,.25)}.date-top{display:flex;align-items:center;justify-content:space-between}.date-value{font-size:14px;font-weight:800;letter-spacing:-.03em}.vacation-dot{width:7px;height:7px;background:var(--amber);border-radius:50%}.day-bars{display:flex;gap:5px;width:100%;margin-top:auto}.role-bar{flex:1;height:6px;border-radius:4px;opacity:.95}.manual-marker{position:absolute;right:8px;bottom:8px;width:4px;height:4px;background:var(--cyan);border-radius:50%;transform:translate(1px,4px)}.calendar-day[draggable=true]{cursor:grab}.calendar-day.dragging{opacity:.35;cursor:grabbing}.calendar-footer{border-bottom:1px solid var(--border);padding:18px 1px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.footnote,.drag-hint{color:#8293aa;font-size:11px}.drag-hint{color:#60c9de}.reset-panel{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px}.reset-panel strong{font-size:12px}.reset-panel p{color:var(--muted);font-size:11px;margin:5px 0 0}.reset-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.reset-controls input,.reset-controls select{max-width:154px}.reset-controls input,.reset-controls select,.field input{border-radius:9px;background:#0f1b2e;border:1px solid #34435a;color:#eef5ff;padding:10px 11px;font-size:12px;min-width:0}.reset-controls .button{padding:10px 13px}
.detail-surface{padding:26px 24px;display:flex;flex-direction:column}.detail-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.detail-live{display:flex;align-items:center;gap:6px;color:#7187a1;font-size:9px;font-weight:800;letter-spacing:.08em}.selected-date{display:flex;align-items:center;gap:13px;margin-top:26px;margin-bottom:24px}.selected-day-number{font-size:59px;letter-spacing:-.08em;font-weight:800;line-height:.95}.selected-date-rest{display:flex;flex-direction:column;gap:3px}.selected-date-rest strong{font-size:17px}.selected-date-rest span{color:var(--muted);font-size:12px}.detail-divider{height:1px;background:var(--border);margin-bottom:21px}.shift-group{margin-bottom:23px}.shift-group-label{display:flex;gap:8px;align-items:center;color:#a7b5ca;font-size:11px;font-weight:700;margin-bottom:12px}.shift-workers{display:flex;flex-direction:column;gap:8px}.detail-worker{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;color:#e7eef8}.detail-worker:before{content:'✓';width:23px;height:23px;border-radius:8px;display:grid;place-items:center;background:#253a52;color:var(--green);font-size:12px}.detail-empty{color:#7086a0;font-size:12px}.vacation-detail{border:1px solid rgba(246,189,106,.19);background:rgba(246,189,106,.055);border-radius:9px;padding:10px 12px;font-size:11px}.vacation-detail strong{display:block;font-size:12px;color:#ebd3ae;margin-bottom:5px}.replacement-info{margin-top:7px;color:#aebbcc;line-height:1.6}.replacement-info a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.detail-hint{font-size:10px;color:#6f829a;line-height:1.8;margin:auto 0 0;padding-top:12px}
.team-section{margin-top:35px;scroll-margin-top:25px}.team-heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:18px}.muted-number{font-size:15px;color:#667d9a;font-weight:600}.team-key{display:flex;align-items:center;gap:20px;color:#8194ac;font-size:11px}.team-key span{display:flex;align-items:center;gap:8px}.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.employee-card{display:flex;flex-direction:column;gap:22px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,#172439,#121e30);padding:19px 19px 16px;min-width:0;transition:border-color .2s,background .2s}.employee-card.employee-active{border-color:rgba(76,218,168,.38)}.employee-card.employee-vacation{border-color:rgba(246,189,106,.31)}.employee-card.drag-over{border-color:var(--cyan);background:#203447;box-shadow:0 0 0 2px rgba(50,209,233,.12)}.employee-upper{display:flex;justify-content:space-between;align-items:center;gap:8px}.employee-role{text-transform:uppercase;font-size:9px;font-weight:800;letter-spacing:.1em;color:#8caefe}.employee-role.role-engineer2{color:#ff996d}.employee-role.role-operator1{color:#c5a0ee}.employee-role.role-operator2{color:#71e4b9}.availability{font-size:10px;color:#91a2b8;display:flex;align-items:center;gap:7px;white-space:nowrap}.availability.active-color{color:#7de5bd}.availability.vacation-color{color:#f2c782}.employee-main{display:flex;align-items:center;gap:13px;min-width:0}.avatar-frame{height:56px;width:56px;flex:none;position:relative;border-radius:15px;background:#28415b;overflow:hidden;display:grid;place-items:center}.avatar-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar-fallback{color:#b2eafa;font-size:23px;font-weight:700}.employee-title{min-width:0}.employee-title h3{font-weight:750;font-size:13px;line-height:1.36;margin-bottom:5px}.employee-title span{display:block;color:#879bb4;font-size:11px}.employee-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:28px;border-top:1px solid #25354b;padding-top:12px}.employee-links{display:flex;flex-wrap:wrap;gap:7px}.employee-links a{display:inline-flex;align-items:center;gap:5px;border:1px solid #31445a;border-radius:8px;padding:5px 8px;font-size:10px;color:#b4d2e3}.employee-links a:hover{border-color:var(--cyan);color:#fff}.employee-links a img{width:13px;height:13px;object-fit:contain}.drop-label{color:#61778f;font-size:9px;text-align:right}.site-footer{display:flex;justify-content:space-between;gap:12px;padding-top:28px;color:#60778f;font-size:11px}

.mobile-quickbar{display:none}.quickbar-link,.quickbar-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:12px;border:1px solid #2f4055;background:#152136;color:#d5e1ef;font-size:12px;font-weight:700;white-space:nowrap}.quickbar-button{cursor:pointer}.mobile-fab{display:none}
.modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(3,8,16,.8);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}.modal-backdrop[hidden]{display:none!important}.modal-window{width:min(100%,570px);max-height:min(92vh,850px);overflow-y:auto;border:1px solid #384d66;border-radius:20px;background:#152236;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.45)}.modal-heading{display:flex;gap:12px;align-items:start;justify-content:space-between}.modal-heading h2{margin:6px 0;font-size:24px;letter-spacing:-.045em}.modal-heading p{font-size:12px;color:var(--muted);margin:0}.icon-button{background:#26364b;color:#cbd6e5;border:1px solid #435067;width:34px;height:34px;border-radius:9px;font-size:22px;line-height:1}.vac-form{margin-top:25px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;color:#b7c4d6;font-size:12px;font-weight:600}.field b{color:var(--cyan)}.field input{min-height:43px;font-size:13px;width:100%}.field input::placeholder{color:#5f7690}.substitute-heading{display:flex;gap:11px;align-items:center;margin:7px 0 18px;border-top:1px solid #293c53;padding-top:19px}.substitute-icon{background:rgba(50,209,233,.12);color:var(--cyan);width:33px;height:33px;border-radius:9px;display:grid;place-items:center;font-size:19px}.substitute-heading strong{display:block;font-size:12px}.substitute-heading small{display:block;color:var(--muted);margin-top:4px}.submit-button{width:100%;margin-top:3px;min-height:44px}.form-error{color:#ffa3a3;min-height:18px;font-size:12px;margin-bottom:3px}.vacations-heading{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.vacations-heading strong{font-size:14px}.vacations-heading span{font-size:11px;color:var(--muted)}.vacation-list{margin-top:11px;display:flex;flex-direction:column;gap:10px;max-height:265px;overflow-y:auto}.vacation-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:#1c2d42;border:1px solid #31445a;border-radius:12px;padding:12px}.vacation-item-main{min-width:0}.vacation-item-main strong{display:block;font-size:12px}.vacation-item-main p{color:#a9b9ce;font-size:11px;margin:6px 0 0;overflow-wrap:anywhere}.vacation-item-main a{color:var(--cyan);font-size:11px;overflow-wrap:anywhere}.vacation-delete{background:rgba(255,103,111,.1);border:1px solid rgba(255,103,111,.22);color:#ffa4ab;border-radius:8px;padding:7px 9px;font-size:11px}.empty-state{font-size:12px;color:var(--muted)}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-box{width:min(100%,410px);border:1px solid var(--border);background:linear-gradient(160deg,#1b2c41,#121d30);border-radius:21px;padding:34px;box-shadow:0 25px 80px rgba(0,0,0,.2)}.auth-box .brand{margin-bottom:32px}.auth-box h1{font-size:26px}.auth-box p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:22px}.auth-box .field input{font-size:14px}.auth-box .button{width:100%;min-height:44px;margin-top:6px}.auth-error,.auth-success{border:1px solid rgba(255,145,145,.3);background:rgba(245,78,78,.09);border-radius:10px;padding:11px;font-size:12px;color:#ffaaaa;margin-bottom:14px}.auth-success{color:var(--green);background:rgba(76,218,168,.09);border-color:rgba(76,218,168,.3)}.auth-back{display:block;text-align:center;color:var(--muted);font-size:12px;margin-top:19px}.auth-back:hover{color:var(--cyan)}
@media(max-width:1180px){.topbar{padding:0 24px;gap:23px}.page-content{padding:35px 24px}.header-nav{gap:0}.account-text{max-width:150px}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-day{min-height:74px;padding:8px}.schedule-grid{grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr)}.calendar-surface{padding:20px}}
@media(max-width:870px){.topbar{height:auto;min-height:71px;flex-wrap:wrap;padding:12px 20px;gap:0 20px}.header-nav{order:3;width:100%;height:41px}.header-nav .nav-link:first-child{padding-left:0}.nav-link.is-active:after{left:0}.header-actions{margin-left:auto}.page-content{padding:30px 20px}.schedule-grid{grid-template-columns:1fr}.detail-surface{min-height:300px}.stats-grid{grid-template-columns:repeat(2,1fr)}.detail-surface{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}.detail-top,.selected-date,.detail-divider:first-of-type,.detail-hint{grid-column:1/-1}.selected-date{margin:18px 0}.detail-surface>.detail-divider:not(:first-of-type){display:none}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.topbar{position:sticky;top:0;z-index:20;gap:10px;padding:12px 15px;padding-top:max(12px,env(safe-area-inset-top))}.brand-copy strong{font-size:20px}.brand-copy small{letter-spacing:.18em}.account{display:none}.header-actions{width:100%;justify-content:flex-end}.header-actions .button{padding:9px 10px}.header-nav{justify-content:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:2px}.header-nav::-webkit-scrollbar{display:none}.nav-link{padding:0 12px;min-height:36px;border:1px solid #25364d;border-radius:10px;background:#121f31;font-size:11px;scroll-snap-align:start;flex:none}.nav-link.is-active:after{display:none}.nav-link.is-active{background:#173049;border-color:#2f7f94}.page-content{padding:29px 13px calc(100px + env(safe-area-inset-bottom))}.page-heading{align-items:stretch;flex-direction:column;gap:17px}.page-heading-actions{justify-content:space-between}.admin-chip{font-size:10px}h1{font-size:33px}.mobile-quickbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 15px}.quickbar-link,.quickbar-button{min-width:0;padding:0 10px}.stats-grid{gap:9px;margin-bottom:15px;grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{padding:15px 13px;border-radius:13px}.stat-head{font-size:10px}.stat-number{font-size:29px;margin:15px 0 6px}.stat-unit{font-size:11px}.stat-desc{font-size:9px}.schedule-grid{gap:13px}.calendar-surface{padding:19px 12px 13px}.surface-heading{flex-direction:column;align-items:stretch;gap:16px}.month-switcher{justify-content:space-between}.month-title{font-size:13px;min-width:0;flex:1}.month-arrow{width:38px;height:38px;font-size:25px}.legend{gap:8px 14px;margin-top:15px;padding-bottom:14px;font-size:10px}.calendar-grid{gap:3px}.weekday{font-size:9px;padding:5px 0 8px}.calendar-day{min-height:62px;border-radius:9px;padding:6px}.date-value{font-size:12px}.role-bar{height:4px}.day-bars{gap:3px}.manual-marker{bottom:5px;right:5px}.calendar-footer{padding:13px 0;flex-direction:column;align-items:flex-start}.reset-panel{flex-direction:column;align-items:stretch}.reset-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.reset-controls input,.reset-controls select,.reset-controls .button{width:100%;max-width:none;min-height:42px}.reset-controls .button{grid-column:1/-1}.detail-surface{padding:18px 16px;display:block}.detail-top{align-items:flex-start;flex-direction:column}.detail-surface>.detail-divider{display:block!important}.selected-date{margin:14px 0 16px;align-items:flex-start}.selected-day-number{font-size:48px}.shift-group{margin-bottom:18px}.detail-hint{margin-top:12px}.team-section{margin-top:27px}.team-grid{grid-template-columns:1fr;gap:10px}.team-heading{align-items:start;flex-direction:column;gap:13px}.team-key{gap:12px;flex-wrap:wrap}.employee-card{gap:16px;padding:16px}.employee-upper,.employee-bottom{flex-direction:column;align-items:flex-start}.employee-links{width:100%}.employee-links a{font-size:11px;padding:7px 9px}.drop-label{font-size:9px}.site-footer{font-size:10px;flex-direction:column;padding-bottom:10px}.modal-backdrop{padding:0;align-items:flex-end}.modal-window{width:100%;max-width:none;max-height:min(92vh,920px);border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;padding:20px 15px calc(18px + env(safe-area-inset-bottom))}.modal-heading{position:sticky;top:0;background:#152236;padding-bottom:8px;z-index:1}.modal-heading::before{content:'';position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:56px;height:5px;border-radius:999px;background:#42556f}.field-row{grid-template-columns:1fr;gap:0}.vacation-list{max-height:none}.vacation-item{flex-direction:column}.vacation-delete{width:100%;min-height:40px}.mobile-fab{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:14px 16px;min-height:52px;background:linear-gradient(135deg,#48e0e8,#31bade);color:#07202b;font-size:13px;font-weight:800;box-shadow:0 12px 32px rgba(42,205,229,.28)}}
@media(max-width:380px){.topbar{padding-left:11px;padding-right:11px}.page-content{padding-left:11px;padding-right:11px}.stats-grid{grid-template-columns:1fr}.calendar-day{min-height:56px;padding:5px}.employee-main{align-items:flex-start}.avatar-frame{width:50px;height:50px}.selected-day-number{font-size:42px}.quickbar-link,.quickbar-button{font-size:11px;padding:0 8px}}
.export-surface{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px 30px;align-items:center;margin-top:24px;padding:25px 28px;scroll-margin-top:105px}.export-intro{display:flex;gap:15px;align-items:flex-start;min-width:0}.export-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;color:var(--cyan);font-size:25px;background:rgba(50,209,233,.12)}.export-intro h2{font-size:20px;line-height:1.2;letter-spacing:-.04em;margin:5px 0 10px}.export-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.export-form{display:grid;grid-template-columns:minmax(150px,2fr) minmax(94px,.8fr) auto;gap:10px;align-items:end}.export-field,.export-year{margin:0}.export-field select,.export-year input{min-height:44px;width:100%;border:1px solid #34435a;border-radius:9px;background:#0f1b2e;color:#eef5ff;padding:10px 11px;font-size:12px}.export-download{min-height:44px}.export-note{grid-column:1/-1;color:#8a9bb3;font-size:11px;margin:0}
@media(max-width:1080px){.export-surface{grid-template-columns:1fr}.export-form{grid-template-columns:minmax(0,2fr) minmax(95px,.7fr) auto}}
@media(max-width:650px){.export-surface{margin-top:14px;padding:18px 15px;scroll-margin-top:150px}.export-intro{gap:10px}.export-icon{width:40px;height:40px}.export-intro h2{font-size:18px}.export-form{grid-template-columns:minmax(0,1fr) 110px}.export-download{grid-column:1/-1;min-height:47px}.export-field select,.export-year input{min-height:46px}.export-note{line-height:1.6}}
@media(max-width:360px){.export-form{grid-template-columns:1fr}.export-download{grid-column:auto}}

@media(max-width:560px){.mobile-quickbar-four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:380px){.mobile-quickbar-four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v3 - date details, replacement TDM, responsive employee management */
.detail-worker{display:flex;flex-wrap:wrap;gap:6px 9px;align-items:center;min-width:0}.detail-worker .worker-name{flex:1 1 110px;min-width:0}.detail-worker .worker-replacement{flex-basis:100%;padding-left:32px;font-size:11px;color:#f3c182}.tdm-button{margin-left:auto;flex:none;padding:5px 9px;border-radius:7px;border:1px solid #2d849d;background:#164050;color:#77e8f4;font-size:11px;text-decoration:none;min-height:30px;display:inline-flex;align-items:center}.tdm-button:hover{background:#1b6275;color:#fff}.replacement-hint{margin:-7px 0 14px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}.field select,.reset-controls select,.export-form select{width:100%;min-height:43px;border-radius:9px;background:#0f1b2e;border:1px solid #34435a;color:#eef5ff;padding:10px 11px;font-size:13px;min-width:0}
.staff-container{max-width:1420px;margin:0 auto;padding:34px 25px 70px}.staff-page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}.staff-dept{margin:26px 0;padding:25px}.staff-dept-head{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}.staff-dept-title h2{font-size:24px;margin:5px 0}.staff-dept-title p{margin:0;color:var(--muted);font-size:12px}.staff-leaders{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.staff-leaders form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.staff-leaders label{color:#b1c1d5;font-size:11px}.staff-leaders select,.staff-manage input,.staff-manage select,.staff-team-form input,.staff-team-form select,.staff-card input,.staff-card select{border-radius:9px;background:#0e1b2d;border:1px solid #33465e;color:#e7f3ff;min-height:41px;padding:9px 11px;width:100%;min-width:0;font-size:13px}.staff-leaders select{width:auto;max-width:260px}.staff-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:18px 0}.staff-team{padding:16px;border:1px solid #30425b;border-radius:13px;background:#111f33}.staff-team-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.staff-team h3{margin:0 0 8px;font-size:15px}.staff-team p{font-size:12px;color:#8ba5bd;margin:5px 0}.staff-team .small-form{margin-top:12px;display:grid;gap:8px}.staff-team .small-form select{width:100%;background:#102238;border:1px solid #344a65;color:#f3f7ff;padding:9px;border-radius:8px}.staff-count{display:inline-block;border-radius:7px;background:#243b4d;padding:3px 8px;font-size:11px}.staff-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.staff-card{padding:16px;border:1px solid #314158;border-radius:14px;background:#131f32;min-width:0}.staff-card-row{display:flex;align-items:center;gap:12px;min-width:0}.staff-card .avatar-frame{width:48px;height:48px}.staff-card h3{font-size:13px;margin:0 0 5px;overflow-wrap:anywhere}.staff-card p{margin:0;color:var(--muted);font-size:11px}.staff-badges{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.staff-badge{background:#20364a;border:1px solid #31516d;color:#b1d4f2;border-radius:8px;padding:5px 8px;font-size:10px}.staff-badge.admin{background:#322c51;border-color:#6353a2;color:#d4c2ff}.staff-card details{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.staff-card summary{color:var(--cyan);font-size:12px;cursor:pointer}.staff-edit-form{display:grid;gap:9px;margin-top:12px}.staff-edit-form label{color:#bdcde0;font-size:11px;display:grid;gap:6px}.staff-edit-form .button{width:100%}.staff-delete{color:#ffa4ac;border:1px solid #793f4d;background:#3c2434;padding:10px 12px;border-radius:8px;font-size:12px}.staff-manage{padding:24px}.staff-manage h2{margin:0 0 5px;font-size:20px}.staff-manage p{font-size:12px;color:var(--muted)}.staff-manage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.staff-manage-grid label{font-size:12px;color:#b8c8db;display:grid;gap:6px}.staff-manage .button{margin-top:12px}.staff-team-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.staff-team-form .button{min-height:41px}.staff-error{color:#ff9fa7;font-size:12px;min-height:17px}.employee-actions{display:flex;gap:8px;margin-top:12px}.employee-actions a{border:1px solid #306881;padding:7px 10px;border-radius:8px;color:#84dfed;font-size:11px}.staff-page .topbar .nav-link.active-page{color:var(--cyan)}
@media(max-width:950px){.staff-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-manage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.staff-container{padding:22px 12px 90px}.staff-cards{grid-template-columns:1fr}.staff-dept{padding:17px 13px;margin:13px 0}.staff-dept-title h2{font-size:21px}.staff-leaders,.staff-leaders form{width:100%}.staff-leaders select{max-width:none;flex:1}.staff-manage{padding:17px}.staff-manage-grid{grid-template-columns:1fr}.staff-page-heading h1{font-size:31px}.staff-team-form{grid-template-columns:1fr}.reset-controls{grid-template-columns:1fr 1fr}.reset-controls select#assignEmployee{grid-column:1/-1}.reset-controls .button{grid-column:auto}.reset-controls #resetButton{grid-column:auto}.mobile-quickbar{grid-template-columns:repeat(3,minmax(0,1fr))}.staff-teams{grid-template-columns:1fr}}

/* v3.1: departmental roster imported from the engineering worksheet */
.staff-team-directory{display:flex;flex-direction:column;gap:22px}
.staff-team-block{border:1px solid #314863;border-radius:16px;background:rgba(7,17,33,.32);padding:20px;min-width:0}
.staff-team-block-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.staff-team-block-head h3{font-size:21px;letter-spacing:-.035em;line-height:1.3;margin:7px 0}
.staff-team-block-head p{font-size:12px;color:var(--muted);margin:0}
.staff-leader-editor{display:flex;gap:8px;align-items:end;margin:0 0 20px;flex-wrap:wrap}
.staff-leader-editor label{font-size:11px;color:#b8c8db;display:grid;gap:6px;flex:1 1 220px;max-width:380px}
.staff-leader-editor select{min-height:40px;padding:8px;background:#0e1b2d;color:#eff7ff;border:1px solid #344c66;border-radius:8px;width:100%}
.staff-create-team{border:1px dashed #466077;border-radius:14px;padding:17px}
.staff-create-team h3{font-size:15px;margin-bottom:11px}
.staff-create-team .small-form{display:flex;gap:9px;flex-wrap:wrap}
.staff-create-team input{min-height:42px;min-width:180px;flex:1;background:#101c2d;border:1px solid #3b526a;border-radius:9px;color:#fff;padding:8px 12px}
.staff-card-identity{min-width:0}
.staff-position{color:#a3b8d6!important;font-size:12px!important}
.staff-lead-badge{background:#203b4d;color:#7ce0ef;border-color:#366c8c}
.staff-contact-data{border-top:1px solid #293b53;padding-top:11px;margin-top:10px;display:grid;gap:8px}
.staff-contact-row{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;font-size:11px;min-width:0}
.staff-contact-row span{color:#7f9ab6;font-weight:700}
.staff-contact-row a{color:#d4e7f4;overflow-wrap:anywhere;word-break:break-word}
.staff-contact-row a:hover{color:var(--cyan)}
.staff-card .employee-actions{margin-top:14px;align-items:center}
.staff-card .employee-actions .tdm-button{margin-left:0;font-weight:750;min-height:36px;padding:8px 14px;border-radius:9px}
.staff-no-tdm{color:#8296ad;font-size:11px}
.staff-activate-form{border-top:1px solid var(--border);padding-top:14px}
.staff-activate-form strong{font-size:12px}
.staff-activate-form p{font-size:11px;color:var(--muted)}
.staff-page #engineers,.staff-page #operators{scroll-margin-top:135px}
@media(max-width:850px){.staff-team-block{padding:15px}.staff-team-block-head h3{font-size:19px}}
@media(max-width:560px){.staff-team-block{padding:12px}.staff-team-block-head h3{font-size:17px}.staff-team-block-head{align-items:flex-start}.staff-leader-editor{display:grid;grid-template-columns:1fr}.staff-leader-editor label{width:100%;max-width:none}.staff-create-team .small-form{display:grid}.staff-contact-row{grid-template-columns:43px minmax(0,1fr)}.staff-page #engineers,.staff-page #operators{scroll-margin-top:168px}}

/* Unified logo for every employee profile and manageable absence actions. */
.avatar-frame .staff-uniform-logo{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.employee-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.absence-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border:1px solid rgba(50,209,233,.3);border-radius:8px;background:rgba(50,209,233,.08);color:#88e8f2;font-size:11px;font-weight:700}
.absence-button:hover{background:rgba(50,209,233,.16)}
#vReplacementUsername option[hidden]{display:none}
.detail-absence-type{display:inline-block;margin:0 0 6px;color:#f6bd6a;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:560px){.absence-button{min-height:40px}.vac-form select,.vac-form input{min-height:44px}.modal-window{overscroll-behavior:contain}}

/* Calendar markers reflect all four absence categories. */
.absence-dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;max-width:45px}
.absence-dots .vacation-dot{display:block;flex:none;width:6px;height:6px}
.absence-day_off{background:#6ac5ff!important}
.absence-sick_leave{background:#f28e9a!important}
.absence-special_assignment{background:#ba95fc!important}
.absence-vacation{background:var(--amber)!important}
.vacation-detail[data-type="day_off"]{border-left:3px solid #6ac5ff}
.vacation-detail[data-type="sick_leave"]{border-left:3px solid #f28e9a}
.vacation-detail[data-type="special_assignment"]{border-left:3px solid #ba95fc}
@media(max-width:380px){.absence-dots{max-width:30px;gap:2px}.absence-dots .vacation-dot{width:5px;height:5px}}

/* Corporate email one-time-code login */
.auth-switch-form{margin-top:10px}.auth-switch-button{width:100%;min-height:42px;border:0;background:none;color:var(--cyan);font-weight:700}.auth-switch-button:hover{text-decoration:underline}.auth-mail-note{margin:18px 0 0!important;font-size:11px!important;line-height:1.5!important;color:var(--muted)!important}.auth-box input[name=code]{text-align:center;letter-spacing:.28em;font-size:24px;font-weight:750;font-variant-numeric:tabular-nums}

/* OPICO brand: keep the full Cyrillic name readable at all widths. */
.brand-copy strong{font-size:19px;letter-spacing:-.035em}.brand-copy small{letter-spacing:.12em;font-size:10px}
@media(max-width:560px){.brand-copy strong{font-size:17px}.brand-copy small{font-size:9px}}


/* Public calendar, guest read-only staff directory, and logged-in own-card locator. */
.guest-calendar-page .page-content{padding-top:24px}
.guest-calendar-page .schedule-grid{margin-bottom:26px}
.guest-calendar-page .legend .absence-day_off,
.guest-calendar-page .legend .absence-sick_leave,
.guest-calendar-page .legend .absence-special_assignment{display:none}
.public-department{padding:24px;margin:22px 0}
.public-department .staff-dept-head{margin-bottom:18px}
.public-staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.public-staff-card{min-width:0;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;background:rgba(20,35,55,.6);padding:13px}
.public-employee-avatar{height:44px;width:44px;flex:none;border-radius:11px;object-fit:cover}
.public-employee-name{font-size:13px;line-height:1.4;min-width:0;flex:1;overflow-wrap:anywhere}
.public-staff-card .tdm-button{font-size:12px;flex:none;padding:8px 11px;min-height:38px}
.staff-card-self{border-color:var(--cyan)!important;box-shadow:0 0 0 2px rgba(50,209,233,.23),0 12px 30px rgba(18,154,183,.12);background:linear-gradient(145deg,rgba(38,76,92,.75),rgba(18,35,54,.9))!important}
.staff-self-label{display:inline-flex;align-items:center;margin-top:6px;font-size:11px;font-weight:800;color:var(--cyan);letter-spacing:.01em}
#my-employee{scroll-margin-top:150px}
.staff-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.staff-find-self{border-color:rgba(50,209,233,.38)}
.staff-find-self:hover{background:rgba(50,209,233,.13)}
@media(max-width:1050px){.public-staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.public-department{padding:15px;margin:13px 0}.public-staff-grid{grid-template-columns:1fr;gap:9px}.public-staff-card{padding:11px}.public-employee-avatar{width:42px;height:42px}.public-employee-name{font-size:12px}.staff-heading-actions{width:100%}.staff-heading-actions .button{flex:1;min-width:0}.guest-calendar-page .page-content{padding-top:12px}#my-employee{scroll-margin-top:185px}}
/* OPICO v4 directory and mixed roster */
.staff-search{margin:4px 0 22px;padding:18px;border:1px solid var(--border);background:#142238;border-radius:15px;display:flex;flex-direction:column;gap:10px}
.staff-search label{font-size:12px;font-weight:700;color:#d3e3f0}
.staff-search-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.staff-search-row input{flex:1;min-width:160px;min-height:43px;border-radius:10px;border:1px solid #354e67;background:#0c1a2b;color:#f0f7ff;padding:9px 14px;outline-offset:2px}
.staff-search-row .button{min-height:43px}
.department-chief{margin:12px 0 20px;border:1px solid rgba(50,209,233,.37);border-radius:15px;padding:14px;background:rgba(43,165,189,.065)}
.department-chief .staff-card{margin-top:12px}
.department-chief .public-staff-card{margin-top:12px}
.staff-team-collapsed{border:1px solid #304258;border-radius:13px;margin:11px 0;background:#101d30;overflow:hidden}
.staff-team-collapsed .staff-team-block-head{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;min-height:73px;gap:14px}
.staff-team-collapsed .staff-team-block-head::-webkit-details-marker{display:none}
.staff-team-collapsed[open] .staff-team-block-head{border-bottom:1px solid #293c55;background:#192b41}
.staff-team-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.staff-team-info strong{font-weight:750;font-size:15px;color:#eaf6ff;overflow-wrap:anywhere}
.staff-team-info small{font-size:11px;color:#94a8c0}
.staff-expand-icon{font-size:24px;transition:transform .2s;flex:none;color:var(--cyan)}
.staff-team-collapsed[open] .staff-expand-icon{transform:rotate(180deg)}
.staff-team-content{padding:15px}
.staff-team-content.staff-cards,.staff-team-content.public-staff-grid{padding:15px}
.staff-head-editor{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.staff-head-editor label{font-size:11px;color:#a4b8cc;display:grid;gap:5px}
.staff-head-editor select{min-height:40px;border-radius:8px;background:#0d1d32;color:white;border:1px solid #385067;padding:8px}
.staff-manage-grid [hidden], .staff-edit-form [hidden]{display:none!important}
#my-employee{scroll-margin-top:110px}
.detail-worker .worker-name{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.staff-search-row .button{flex:1}.staff-search-row input{flex-basis:100%}.staff-head-editor{width:100%}.staff-head-editor label{flex:1}.staff-team-collapsed .staff-team-block-head{padding:13px}.staff-team-content{padding:10px}.staff-team-info strong{font-size:13px}}