/* Components shared by attendance, tenders and project management. */
:root{color-scheme:light;font-family:var(--engi-font);font-size:var(--engi-font-size);--ink:var(--engi-ink);--muted:var(--engi-muted);--line:var(--engi-border);--bg:var(--engi-background);--primary:var(--engi-primary);--primary-soft:var(--engi-primary-soft);--red:var(--engi-danger);--orange:var(--engi-warning)}
*{box-sizing:border-box}html{scroll-padding-top:var(--engi-space-5)}body{background:var(--engi-background);color:var(--engi-ink);font:var(--engi-font-size)/var(--engi-line-height) var(--engi-font)}
button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.55}button,a{transition:background-color .12s,border-color .12s,color .12s}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--engi-primary);outline-offset:3px;box-shadow:0 0 0 2px var(--engi-surface)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--engi-primary);outline-offset:2px}
::selection{background:var(--engi-primary-soft);color:var(--engi-ink)}
a{color:var(--engi-primary);text-underline-offset:3px}a:hover{color:var(--engi-primary-hover)}
h1,h2,h3{color:var(--engi-ink);font-weight:650;letter-spacing:-.025em;overflow-wrap:anywhere}h1{font-size:clamp(26px,2.5vw,34px);line-height:1.2}h2{font-size:20px}h3{font-size:16px}
.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--engi-muted);font-weight:700}.muted,small{color:var(--engi-muted)}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--engi-space-3);margin:0 0 var(--engi-space-6);padding:0;letter-spacing:normal;line-height:1.2}
.brand-logo{display:block;width:198px;max-width:100%;height:auto;object-fit:contain}.brand small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--engi-muted);margin:0}
.brand-full{display:block;width:min(510px,100%);height:auto;margin-bottom:var(--engi-space-6)}
.sidebar{background:var(--engi-surface);color:var(--engi-ink);border-right:1px solid var(--engi-border);overflow-y:auto;overscroll-behavior:contain;padding:28px var(--engi-space-4)}
.sidebar .brand{margin:0 var(--engi-space-2) var(--engi-space-6)}.sidebar .brand-logo{width:190px}.nav-label{color:var(--engi-muted)}
.nav{gap:var(--engi-space-1)}.nav button{min-height:var(--engi-control-height);color:var(--engi-muted);padding:var(--engi-space-3);border:1px solid transparent;border-radius:var(--engi-radius-sm);font-size:13px}
.nav button:hover{background:var(--engi-surface-alt);color:var(--engi-ink)}.nav button.active{background:var(--engi-primary-soft);color:var(--engi-primary-deep);border-color:var(--engi-primary-border);font-weight:650}
.nav button span:first-child{font-size:inherit;width:auto}.nav svg,.nav-icon{width:20px;height:20px;flex:none}
.sidebar footer,.sidebar-bottom{border-top:1px solid var(--engi-border);padding-top:20px}.sidebar footer small,.profile small{color:var(--engi-muted)}
.sidebar footer button,.sidebar footer a,.account-action{color:var(--engi-primary);min-height:var(--engi-control-height);display:inline-flex;align-items:center;font-size:12px}
.sidebar .profile .avatar,.avatar{background:var(--engi-primary-soft);color:var(--engi-primary-deep)}
.topbar{background:var(--engi-surface);min-height:76px;height:auto;gap:var(--engi-space-4);padding-top:var(--engi-space-3);padding-bottom:var(--engi-space-3)}.topbar-brand{display:none;width:136px;height:auto}
.topbar .crumb{display:flex;align-items:center;gap:var(--engi-space-3)}.mobile-name{display:none}.topbar .muted{overflow-wrap:anywhere}
.content{padding-top:var(--engi-space-6)}.page-head,.pagehead{gap:var(--engi-space-5)}.actions{gap:var(--engi-space-2)}
.btn{min-height:var(--engi-control-height);border-radius:var(--engi-radius-sm);border:1px solid var(--engi-control-border);background:var(--engi-surface);color:var(--engi-primary);padding:10px var(--engi-space-4);font-size:13px;font-weight:600;line-height:1.35;text-align:center}
.btn.small,.btn.compact{min-height:40px;font-size:12px;padding:var(--engi-space-2) var(--engi-space-3)}.btn:hover:not(:disabled){background:var(--engi-primary-soft);border-color:var(--engi-primary)}
.btn.primary{background:var(--engi-primary);color:var(--engi-on-primary);border-color:var(--engi-primary)}.btn.primary:hover:not(:disabled){background:var(--engi-primary-hover);border-color:var(--engi-primary-hover)}
.btn.lime{background:var(--engi-primary-soft);border-color:var(--engi-primary-border);color:var(--engi-primary-deep)}.btn.danger{color:var(--engi-danger)}.btn.danger:hover:not(:disabled){background:var(--engi-danger-soft);border-color:var(--engi-danger)}
.panel,.stat,.metric,.project-card,.site-card{border-color:var(--engi-border);border-radius:var(--engi-radius);background:var(--engi-surface)}.panel-head{padding:20px var(--engi-space-5)}.panel-body{padding:var(--engi-space-5)}
.stat,.metric{padding:var(--engi-space-5)}.stat-value,.metric strong{font-variant-numeric:tabular-nums;font-weight:650;color:var(--engi-ink)}
.project-card:hover{border-color:var(--engi-primary);box-shadow:var(--engi-shadow)}.project-card:disabled{cursor:not-allowed}
.badge{font-size:12px;font-weight:600;background:var(--engi-primary-soft);color:var(--engi-primary-deep);border-radius:var(--engi-radius-sm);white-space:normal}
.badge.warn{background:var(--engi-warning-soft);color:var(--engi-warning)}.badge.red,.badge.danger{background:var(--engi-danger-soft);color:var(--engi-danger)}
.badge.green,.badge.success{background:var(--engi-success-soft);color:var(--engi-success)}.badge.neutral{background:var(--engi-surface-alt);color:var(--engi-muted)}
.progress{background:var(--engi-surface-alt);height:7px}.progress i{background:var(--engi-primary)}.analysis-progress{accent-color:var(--engi-primary)}
.analysis-progress::-webkit-progress-bar{background:var(--engi-surface-alt);border-radius:6px}.analysis-progress::-webkit-progress-value{background:var(--engi-primary);border-radius:6px}.analysis-progress::-moz-progress-bar{background:var(--engi-primary)}
.tabs{gap:var(--engi-space-5);padding:var(--engi-space-1);margin-top:var(--engi-space-5);scrollbar-width:thin}.tabs button{min-height:var(--engi-control-height);padding:var(--engi-space-3) var(--engi-space-1)}.tabs button.active{border-color:var(--engi-primary);color:var(--engi-primary);font-weight:650}.tabs button:hover{color:var(--engi-primary)}
.table-scroll{overflow:auto;scrollbar-width:thin}table{font-size:13px}th{font-size:11px;color:var(--engi-muted);background:var(--engi-surface-alt);letter-spacing:.06em;padding:14px var(--engi-space-4)}td{padding:var(--engi-space-4);border-color:var(--engi-border)}tbody tr:hover{background:var(--engi-primary-soft)}
code{color:var(--engi-muted)}.notice,.banner,.note-box{background:var(--engi-primary-soft);color:var(--engi-primary-deep);border-color:var(--engi-primary-border);border-radius:var(--engi-radius-sm);padding:var(--engi-space-4);font-size:13px}
.notice{border-left:3px solid var(--engi-primary)}.notice.warn,.banner.offline{background:var(--engi-warning-soft);color:var(--engi-warning);border-color:var(--engi-warning-border)}
.error{background:var(--engi-danger-soft);color:var(--engi-danger);border-left:3px solid var(--engi-danger);border-radius:var(--engi-radius-sm);padding:var(--engi-space-3) var(--engi-space-4);font-size:14px}
.field label{font-size:13px}.field input,.field select,.field textarea,input,select,textarea,input.inline{border:1px solid var(--engi-control-border);border-radius:var(--engi-radius-sm);background:var(--engi-surface);color:var(--engi-ink);min-height:var(--engi-control-height);padding:10px var(--engi-space-3)}
input::placeholder,textarea::placeholder{color:var(--engi-placeholder);opacity:1}input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:20px;padding:0;accent-color:var(--engi-primary);flex-shrink:0}
select[multiple]{padding:var(--engi-space-2);min-height:140px}select[multiple] option{padding:6px;white-space:normal}.field{min-width:0}textarea{line-height:1.5}.form-grid{gap:0 var(--engi-space-5)}.check-row,.check{min-height:44px;line-height:1.5}
dialog{border-radius:var(--engi-radius-lg);border-color:var(--engi-border);box-shadow:var(--engi-shadow);max-height:90dvh;background:var(--engi-surface)}dialog::backdrop{background:var(--engi-overlay)}
.modal-head{padding:20px var(--engi-space-5);gap:var(--engi-space-4)}.modal-body{padding:var(--engi-space-5)}.modal-actions{flex-wrap:wrap}.close{min-width:44px;min-height:44px;border-radius:var(--engi-radius-sm);background:var(--engi-surface-alt);color:var(--engi-ink)}
#toast{background:var(--engi-primary-deep);color:var(--engi-on-primary);border-radius:var(--engi-radius-sm);box-shadow:var(--engi-shadow);line-height:1.5;overflow-wrap:anywhere;max-width:min(440px,calc(100% - 32px))}
.empty{padding:40px var(--engi-space-5);color:var(--engi-muted)}.empty h3{color:var(--engi-ink)}.loading{color:var(--engi-muted);padding:48px var(--engi-space-4)}.loading::before{content:'';display:block;width:28px;height:28px;border:3px solid var(--engi-primary-border);border-top-color:var(--engi-primary);border-radius:50%;margin:0 auto 20px;animation:engis-spin .8s linear infinite}
@keyframes engis-spin{to{transform:rotate(360deg)}}
.login-hero{background:var(--engi-surface);color:var(--engi-ink);border-right:1px solid var(--engi-border)}.login-hero p{color:var(--engi-muted)}.login-hero .eyebrow{color:var(--engi-primary)}.login-hero h1{font-size:clamp(36px,4vw,52px);font-weight:650}.login-art{display:none}.login-main{background:var(--engi-background)}
.login-box{max-width:440px;background:var(--engi-surface);padding:var(--engi-space-6);border:1px solid var(--engi-border);border-radius:var(--engi-radius-lg)}.login>.brand{margin-bottom:var(--engi-space-5)}.login:has(>form){max-width:460px;padding:var(--engi-space-6);box-shadow:var(--engi-shadow)}.login .brand-logo{width:220px}
.punch-card{background:var(--engi-primary-deep);border-radius:var(--engi-radius)}.punch-card h2{color:var(--engi-on-primary)}.punch-heading p,.punch-footer,.on-dark-muted{color:var(--engi-on-dark-muted)}
.punch-buttons button{background:var(--engi-primary-hover);border-color:var(--engi-primary-border);color:var(--engi-on-primary);border-radius:var(--engi-radius-sm)}.punch-buttons button:first-child{background:var(--engi-surface);color:var(--engi-primary-deep);border-color:var(--engi-surface)}.punch-buttons button:hover:not(:disabled){background:var(--engi-primary);color:var(--engi-on-primary)}
.punch-options select,.punch-options input{background:var(--engi-surface);color:var(--engi-ink);border-color:var(--engi-surface)}.punch-card .clock{color:var(--engi-on-primary)}
.cal-day.today{background:var(--engi-primary-soft)}.cal-day.blank{background:var(--engi-surface-alt)}.cal-day button{background:var(--engi-primary-soft);color:var(--engi-primary-deep);font-size:12px;min-height:36px;white-space:normal;line-height:1.35}.cal-day .leave{background:var(--engi-warning-soft);color:var(--engi-warning)}.cal-day button.calendar-empty{background:transparent;color:var(--engi-muted)}
.week-col{background:var(--engi-surface-alt)}.week-col.current{border-color:var(--engi-primary)}.source a{color:var(--engi-primary)}.source-preview,.total{background:var(--engi-surface-alt)}.source-edit{border-color:var(--engi-border);border-radius:var(--engi-radius-sm)}.history summary{min-height:44px;padding:var(--engi-space-2) 0}.source,.reference p{font-size:13px;overflow-wrap:anywhere}
.map-ring{border-color:var(--engi-primary);background:var(--engi-map-overlay)}.map-pin{background:var(--engi-primary)}.map-controls button{width:44px;height:44px;color:var(--engi-primary)}.map-caption{background:var(--engi-surface-alt);color:var(--engi-muted)}.map-error{background:var(--engi-surface);color:var(--engi-ink)}
.back,.muted-link{color:var(--engi-primary);min-height:44px}.dot{background:var(--engi-success)}.mobile-bar button.active{background:var(--engi-primary-soft);color:var(--engi-primary-deep)}.mobile-bar button{color:var(--engi-muted);font-size:11px;min-height:54px}
.skip-link{position:fixed;left:12px;top:-100px;z-index:200;background:var(--engi-surface);color:var(--engi-primary);padding:var(--engi-space-3) var(--engi-space-4);border:2px solid var(--engi-primary);border-radius:6px}.skip-link:focus{top:12px}
[hidden]{display:none!important}
.grid-2>*,.grid>*,.metrics>*,.stats>*{min-width:0}.main,.content{min-width:0}
@media(max-width:1100px){.sidebar .brand-logo{width:170px}.sidebar .brand{margin-left:0;margin-right:0}.content{padding:var(--engi-space-5)}.stat,.metric{padding:20px}}
@media(max-width:760px){.topbar-brand{display:block}.desktop-name{display:none}.topbar .crumb{min-width:0;flex-wrap:wrap;font-size:11px;gap:6px}.topbar{padding:var(--engi-space-3) var(--engi-space-4);min-height:72px}.top-right{gap:var(--engi-space-2)}.top-right>.badge{display:none}.topbar .eyebrow{letter-spacing:.04em;font-size:10px}.content{padding:var(--engi-space-5) var(--engi-space-4) 100px}.page-head .actions,.pagehead .actions{width:100%}.actions .btn{white-space:normal}.panel-head{padding:var(--engi-space-4);flex-wrap:wrap}.panel-body,.modal-body{padding:20px var(--engi-space-4)}.modal-head{padding:var(--engi-space-4)}.metric,.stat{padding:var(--engi-space-4)}.btn.small,.btn.compact{min-height:44px}.sidebar .brand{margin-bottom:var(--engi-space-4)}.sidebar .brand-logo{width:176px}.form-grid{grid-template-columns:1fr}.fact-heading{flex-direction:column}.fact-heading>strong{max-width:100%}.toolbar input{min-width:0;width:100%}.tabs{gap:var(--engi-space-4)}.login-hero{padding:var(--engi-space-5);border:0}.login-hero .brand-full{margin:0;width:100%;max-width:460px}.login-main{padding:var(--engi-space-5) var(--engi-space-4)}.login-box{padding:var(--engi-space-5)}.login:has(>form){width:calc(100% - 32px);margin:6vh auto;padding:var(--engi-space-5)}.calendar{min-width:650px}.calendar-scroll{overflow-x:auto}.cal-day{padding:var(--engi-space-2);min-height:100px}.cal-day button{min-height:44px;font-size:12px}.legend{font-size:12px;gap:var(--engi-space-3)}.mobile-bar{justify-content:flex-start;scrollbar-width:thin}.mobile-bar button{flex:0 0 auto;min-width:76px}.punch-options{flex-direction:column}.offline-form{margin:var(--engi-space-5) var(--engi-space-4);padding:var(--engi-space-5)}.modal-actions .btn{flex:1}.loading{margin:var(--engi-space-6) var(--engi-space-4);padding:var(--engi-space-6) 0}}
@media(max-width:380px){.metrics,.stats{grid-template-columns:1fr}.topbar .muted{font-size:10px}.login-box{padding:20px}.topbar-brand{width:118px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sidebar,.mobile-bar,.topbar,.back,.actions,.tabs,.skip-link,#toast{display:none!important}.main{margin:0;grid-column:auto}.shell{display:block}.content{padding:0}.panel,.metric,.stat{break-inside:avoid;box-shadow:none}.table-scroll{overflow:visible}body{background:var(--engi-surface)}}

.shell .topbar-brand{display:none}.shell .desktop-name{display:inline}.modal-head button{min-width:44px;min-height:44px}.task-card:hover{border-color:var(--engi-primary);background:var(--engi-primary-soft)}
@media(max-width:700px){.shell .topbar{min-height:54px}.shell .sidebar{padding:20px var(--engi-space-4)}.shell .sidebar footer{padding-top:var(--engi-space-3)}.shell .content{padding-bottom:40px}}