/* SKEE Portal V8 — complete visual system */
:root{--ink:#0d1b24;--ink2:#122832;--blue:#008fc8;--blue2:#0076a5;--cyan:#dff5fd;--bg:#eef2f4;--paper:#fff;--line:#cdd8dd;--line2:#b8c8cf;--muted:#667983;--danger:#b73f49;--ok:#16835e;--side:224px;--r:3px}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:#eef2f4;color:var(--ink);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
.shell{min-height:100vh;display:grid!important;grid-template-columns:var(--side) minmax(0,1fr)!important}
.rail{position:fixed!important;inset:0 auto 0 0!important;width:var(--side)!important;min-height:100vh!important;background:#09141b!important;color:#dce7ec;border-right:1px solid #1b303b;z-index:60}
.logo{height:92px!important;padding:16px 20px!important;display:flex!important;align-items:center!important;border-bottom:1px solid #1e333d}
.logo img{width:150px!important;height:auto!important;background:transparent!important;padding:0!important;display:block!important;object-fit:contain!important}
.nav{padding:18px 10px!important}
.nav a{display:flex!important;align-items:center!important;gap:11px!important;min-height:44px!important;padding:0 12px!important;color:#93aab5!important;text-decoration:none!important;border:0!important;border-left:3px solid transparent!important;font-size:12px!important;font-weight:600!important;letter-spacing:.01em!important;text-transform:none!important}
.nav a span{width:20px;color:#537381!important;font:10px ui-monospace,SFMono-Regular,Consolas,monospace!important}
.nav a:hover,.nav a.on{background:#10232d!important;color:#fff!important;border-left-color:var(--blue)!important;box-shadow:none!important}
.rail-foot{left:22px!important;bottom:22px!important;font:9px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.12em!important;color:#58717d!important}
.workspace{grid-column:2!important;min-width:0!important}
.bar{height:58px!important;padding:0 28px!important;background:#fff!important;border-bottom:1px solid var(--line)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;font:10px ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.08em!important;color:#5f727c!important}
.page{width:min(1420px,calc(100% - 56px))!important;max-width:none!important;margin:0 auto!important;padding:30px 0 50px!important}
.calendar-page{width:min(1540px,calc(100% - 44px))!important}
.titleline{display:flex!important;justify-content:space-between!important;align-items:flex-end!important;gap:22px!important;padding:0 0 20px!important;margin:0 0 22px!important;border-bottom:1px solid var(--line2)!important}
.kicker{font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--blue2)!important}
.titleline h1{margin:4px 0 0!important;font-size:32px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-.035em!important}
.subtitle{margin:7px 0 0!important;color:var(--muted)!important;font-size:13px!important}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{appearance:none;min-height:39px!important;padding:9px 14px!important;border:1px solid var(--line2)!important;border-radius:var(--r)!important;background:#fff!important;color:#19313d!important;text-decoration:none!important;font-size:12px!important;font-weight:700!important;line-height:1!important;cursor:pointer}
.btn:hover{border-color:#77aabd!important;background:#f8fbfc!important}
.btn.primary{background:var(--blue2)!important;border-color:var(--blue2)!important;color:#fff!important}
.btn.dark{background:#122832!important;border-color:#122832!important;color:#fff!important}
.btn.danger{color:var(--danger)!important;border-color:#d9a8ad!important}
.panel,.form,.summary,.workorder,.job-spec,.current-booking{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:0 8px 26px rgba(20,45,57,.045)!important}
.panel{margin-bottom:18px!important}
.panelhead{min-height:52px!important;padding:0 18px!important;border-bottom:1px solid var(--line)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.panelhead h2{font-size:14px!important;margin:0!important}
.panelmeta{font-size:10px!important;color:var(--muted)!important}
.pad{padding:22px!important}
.summary{display:grid!important;grid-template-columns:repeat(4,1fr)!important;margin-bottom:20px!important}
.metric{padding:20px!important;border-right:1px solid var(--line)!important}
.metric:last-child{border-right:0!important}.metric small{font-size:10px!important;color:var(--muted)!important;letter-spacing:.04em!important}.metric strong{font-size:29px!important;margin-top:7px!important}
.queueitem{display:grid!important;grid-template-columns:100px minmax(0,1fr) auto!important;gap:18px!important;align-items:center!important;min-height:68px!important;padding:14px 18px!important;border-bottom:1px solid #e0e6e9!important}
.queueitem:last-child{border-bottom:0!important}.queueitem b{font-size:13px!important}.queueitem p{font-size:11px!important;margin:4px 0 0!important;color:var(--muted)!important}.qid{font-size:10px!important}
.state{display:inline-flex;align-items:center;min-height:27px;padding:0 9px!important;border:1px solid #b8d9e5!important;border-left:3px solid var(--blue)!important;background:#f4fbfd;color:#315d6e!important;font:9px ui-monospace,SFMono-Regular,Consolas,monospace!important;text-transform:uppercase}
.state.danger{border-color:#e0b7bb!important;border-left-color:var(--danger)!important;background:#fff6f6!important;color:#913740!important}
.state.ok{border-left-color:var(--ok)!important}
.form{padding:20px!important}.formgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}.full{grid-column:1/-1!important}
.field{display:grid!important;gap:7px!important;margin:0!important}.field label{font-size:10px!important;font-weight:700!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:#526771!important}
.field input,.field textarea,.field select{width:100%!important;min-height:43px!important;padding:10px 12px!important;border:1px solid #c5d2d8!important;border-radius:2px!important;background:#fff!important;color:var(--ink)!important;outline:0!important}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(0,143,200,.10)!important}.field textarea{min-height:120px!important}
.detailgrid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important}
.empty{padding:18px!important;color:var(--muted)!important}.msg{border-left:3px solid var(--blue)!important;background:#eff9fc!important;padding:12px 14px!important}

/* calendar, deliberately self-contained */
.calendar-mobile-tabs{display:none!important}
.calendar-shell{display:block!important;width:100%!important;min-width:0!important;overflow:hidden!important;background:#fff!important;border:1px solid var(--line2)!important;border-radius:var(--r)!important;box-shadow:0 10px 30px rgba(16,40,52,.055)!important}
.calendar-head{display:grid!important;grid-template-columns:76px repeat(5,minmax(0,1fr))!important;height:74px!important;border-bottom:1px solid var(--line2)!important;background:#f9fbfc!important}
.time-head{display:flex!important;align-items:flex-end!important;padding:0 12px 12px!important;color:#7a8c95!important;font:9px ui-monospace,SFMono-Regular,Consolas,monospace!important}
.cal-day-title{display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;align-items:center!important;padding:10px 14px!important;border-left:1px solid var(--line)!important;background:#fff!important}
.cal-day-title small{font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.12em!important;color:#667c87!important}.cal-day-title strong{grid-column:2!important;grid-row:1/3!important;font-size:28px!important;font-weight:600!important}.cal-day-title span{font-size:10px!important;color:#8a999f!important}.cal-day-title.today{background:#f0faff!important;box-shadow:inset 0 -3px 0 var(--blue)!important}
.calendar-scroll{display:block!important;overflow:auto!important}
.calendar-body{display:grid!important;grid-template-columns:76px repeat(5,minmax(0,1fr))!important;height:var(--grid-h)!important;min-width:920px!important}
.time-axis{display:block!important;position:relative!important;height:var(--grid-h)!important;background:#f9fbfc!important;border-right:1px solid var(--line)!important}
.time-label{position:absolute!important;right:12px!important;transform:translateY(-50%)!important;color:#71848e!important;font:10px ui-monospace,SFMono-Regular,Consolas,monospace!important}
.cal-day-track{display:block!important;position:relative!important;height:var(--grid-h)!important;border-right:1px solid var(--line)!important;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour-h)/2 - 1px),#edf1f3 calc(var(--hour-h)/2 - 1px),#edf1f3 calc(var(--hour-h)/2),transparent calc(var(--hour-h)/2),transparent calc(var(--hour-h) - 1px),#d6dfe3 calc(var(--hour-h) - 1px),#d6dfe3 var(--hour-h))!important}
.cal-day-track.today{background-color:#fbfdfe!important}
.event{position:absolute!important;z-index:3!important;left:6px!important;right:6px!important;display:block!important;overflow:hidden!important;padding:7px 9px!important;border:1px solid #afd7e6!important;border-left:4px solid var(--blue)!important;border-radius:2px!important;background:#e9f8fd!important;color:#14303d!important;text-decoration:none!important;box-shadow:0 2px 7px rgba(15,65,85,.05)!important}
.event-time{font:9px ui-monospace,SFMono-Regular,Consolas,monospace!important;color:#34748c!important;margin-bottom:3px!important}.event b,.event span,.event small{display:block!important}.event b{font-size:11px!important;line-height:1.2!important}.event span{font-size:9.5px!important;color:#526b77!important;margin-top:2px!important}.event small{font:8.5px ui-monospace,SFMono-Regular,Consolas,monospace!important;color:#7d919a!important;margin-top:3px!important}
.event.block{border-color:#cbd4d8!important;border-left-color:#778993!important;background:repeating-linear-gradient(135deg,#f2f4f5,#f2f4f5 6px,#e8edef 6px,#e8edef 12px)!important}
.now-line{position:absolute!important;left:0!important;right:0!important;height:1px!important;background:#db4d59!important;z-index:5!important}.now-line i{position:absolute!important;left:-3px!important;top:-3px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:#db4d59!important}
.calendar-legend{display:flex!important;align-items:center!important;gap:18px!important;padding:12px 2px!important;color:#647781!important;font-size:10px!important}.calendar-legend span:last-child{margin-left:auto!important}.leg{display:inline-block!important;width:13px!important;height:8px!important;margin-right:5px!important;border-left:3px solid var(--blue)!important;background:#e9f8fd!important}.leg.block{border-left-color:#778993!important;background:#e8edef!important}

/* work order / appointment detail */
.workorder{display:grid!important;grid-template-columns:minmax(0,1fr) 290px!important;overflow:hidden!important}.workorder-main{padding:28px!important}.workorder-side{background:#f7f9fa!important;border-left:1px solid var(--line)!important}.appointment-hero{display:flex!important;gap:18px!important;align-items:center!important}.date-block{flex:0 0 76px!important}.appointment-hero h2{font-size:26px!important}.workcopy{font-size:14px!important;line-height:1.7!important}.action-strip{background:#10232d!important;padding:17px 20px!important}

/* booking planner */
.schedule-layout{display:grid!important;grid-template-columns:290px minmax(0,1fr)!important;gap:18px!important}.job-spec{padding:22px!important;background:#10212a!important;color:#e9f1f4!important}.job-spec p{color:#a7bbc4!important}.planner-toolbar{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;margin-bottom:10px!important}
.mobile-day-tabs{display:none!important}.planner-scroll{overflow:auto!important}
.customer-week{width:100%!important;min-width:850px!important;background:#fff!important;border:1px solid var(--line2)!important}
.customer-week-head{display:grid!important;grid-template-columns:66px repeat(5,minmax(145px,1fr))!important}.customer-week-body{display:grid!important;grid-template-columns:66px repeat(5,minmax(145px,1fr))!important}
.customer-day-head{display:grid!important;min-height:64px!important;padding:9px 12px!important;border-left:1px solid var(--line)!important}.customer-day{display:block!important;position:relative!important;border-left:1px solid var(--line)!important}
.start-slot{position:absolute!important;left:6px!important;right:6px!important;border:1px solid #a9d4e4!important;border-left:3px solid var(--blue)!important;border-radius:2px!important;background:#edf9fd!important;color:#174355!important;font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace!important;cursor:pointer!important}
.start-slot.selected{background:var(--blue2)!important;color:#fff!important;border-color:var(--blue2)!important}
.schedule-confirm{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;position:sticky!important;bottom:0!important;z-index:30!important;padding:12px 14px!important;background:#fff!important;border:1px solid var(--line2)!important;border-top:3px solid var(--blue)!important;box-shadow:0 -8px 24px rgba(16,40,52,.08)!important}

/* auth */
.auth{min-height:100vh!important;display:grid!important;grid-template-columns:minmax(330px,42%) minmax(0,1fr)!important}.auth-brand{background:#09141b!important;padding:54px!important}.auth-brand h1{font-size:42px!important;letter-spacing:-.04em!important}.auth-main{background:#eef2f4!important}.auth-box{border-radius:var(--r)!important;box-shadow:0 16px 45px rgba(20,45,57,.08)!important}

/* mobile */
@media(max-width:800px){
 :root{--side:0px}
 .shell{display:block!important}.rail{position:sticky!important;top:0!important;width:100%!important;min-height:0!important;height:auto!important;z-index:60!important}
 .logo{height:58px!important;padding:8px 13px!important}.logo img{width:96px!important}
 .nav{display:flex!important;overflow-x:auto!important;padding:0 7px!important;border-top:1px solid #1b303b!important;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
 .nav a{flex:0 0 auto!important;min-height:44px!important;padding:0 10px!important;border-left:0!important;border-bottom:2px solid transparent!important;font-size:10px!important}.nav a span{width:auto!important;font-size:8px!important}
 .nav a.on{border-bottom-color:var(--blue)!important;border-left-color:transparent!important}.rail-foot,.bar{display:none!important}
 .workspace{display:block!important}.page,.calendar-page{width:100%!important;padding:18px 12px 34px!important}
 .titleline{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}.titleline h1{font-size:27px!important}.titleline .actions{width:100%!important}.titleline .actions .btn{flex:1!important}
 .summary{grid-template-columns:1fr 1fr!important}.metric{padding:15px!important}.metric strong{font-size:24px!important}
 .detailgrid,.formgrid,.schedule-layout{grid-template-columns:1fr!important}.full{grid-column:auto!important}
 .queueitem{grid-template-columns:58px minmax(0,1fr)!important;gap:10px!important;padding:13px 12px!important}.queueitem .actions{grid-column:1/-1!important;width:100%!important}.queueitem .actions .btn{flex:1!important}
 .workorder{grid-template-columns:1fr!important}.workorder-main{padding:18px!important}.workorder-side{border-left:0!important;border-top:1px solid var(--line)!important}
 .appointment-hero h2{font-size:21px!important}
 .calendar-mobile-tabs{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important;margin:0 0 8px!important}
 .calendar-mobile-tabs button{min-height:42px!important;border:1px solid var(--line)!important;background:#fff!important;color:#526873!important;font-size:9px!important;font-weight:800!important}.calendar-mobile-tabs button.active{background:#102832!important;border-color:#102832!important;color:#fff!important;box-shadow:inset 0 -3px 0 var(--blue)!important}
 .calendar-shell{overflow:hidden!important}.calendar-head{grid-template-columns:58px minmax(0,1fr)!important;min-width:0!important;height:66px!important}.calendar-head .cal-day-title{display:none!important}.calendar-head .cal-day-title.mobile-active{display:grid!important}
 .calendar-body{grid-template-columns:58px minmax(0,1fr)!important;min-width:0!important}.calendar-body .cal-day-track{display:none!important}.calendar-body .cal-day-track.mobile-active{display:block!important}.time-label{right:8px!important;font-size:9px!important}
 .calendar-legend{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.calendar-legend span:last-child{grid-column:1/-1!important;margin-left:0!important}
 .job-spec{margin-bottom:12px!important}.planner-toolbar{align-items:stretch!important;flex-direction:column!important}.planner-toolbar .week-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
 .mobile-day-tabs{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important;margin:8px!important}.mobile-day-tabs button{min-height:40px!important;border:1px solid var(--line)!important;background:#fff!important;font-size:9px!important;font-weight:800!important}.mobile-day-tabs button.active{background:#102832!important;color:#fff!important;border-color:#102832!important;box-shadow:inset 0 -3px 0 var(--blue)!important}
 .planner-scroll{overflow:hidden!important}.customer-week{min-width:0!important}.customer-week-head{grid-template-columns:56px minmax(0,1fr)!important}.customer-week-body{grid-template-columns:56px minmax(0,1fr)!important}.customer-day-head{display:none!important}.customer-day-head.mobile-active{display:grid!important}.customer-day{display:none!important}.customer-day.mobile-active{display:block!important}
 .schedule-confirm{flex-direction:column!important;align-items:stretch!important}.schedule-confirm .btn{width:100%!important}
 .auth{grid-template-columns:1fr!important}.auth-brand{display:none!important}.auth-main{padding:20px!important}
}
@media(max-width:440px){.summary{grid-template-columns:1fr!important}.metric{border-right:0!important;border-bottom:1px solid var(--line)!important}.queueitem{grid-template-columns:1fr!important}.queueitem .actions{grid-column:auto!important}.titleline h1{font-size:25px!important}}

/* SKEE beheer-finetune */
.settings-days{display:grid;gap:8px;margin:16px 0 24px}.settings-day{display:grid;grid-template-columns:minmax(170px,1fr) 170px 170px;gap:14px;align-items:end;padding:12px 14px;border:1px solid var(--line);background:#f9fbfc}.switchline{display:flex;align-items:center;gap:10px;min-height:43px}.switchline input{width:18px;height:18px;accent-color:var(--blue2)}.settings-compact{max-width:850px}.input-suffix{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px}.input-suffix span{color:var(--muted);font-size:12px}.settings-callout{display:flex;gap:14px;align-items:flex-start;max-width:850px;margin:18px 0;padding:13px 15px;border-left:3px solid var(--blue);background:#eff9fc}.settings-callout span{color:#526b77}.settings-button-field{align-self:end}.settings-blocks{margin-top:20px;border-top:1px solid var(--line)}.settings-block{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.settings-block b,.settings-block span{display:block}.settings-block span{font-size:11px;color:var(--muted);margin-top:3px}
.billing-row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:18px;align-items:start;padding:17px 18px;border-bottom:1px solid var(--line)}.billing-row:last-child{border-bottom:0}.billing-time strong,.billing-time small{display:block}.billing-time strong{font-size:18px}.billing-time small{font-size:10px;color:var(--muted);margin-top:4px}.billing-main b,.billing-main span{display:block}.billing-main b{font-size:14px}.billing-main span{font-size:10px;color:var(--muted);margin-top:3px}.billing-main p{margin:9px 0 0;white-space:normal}.billing-row.billed{opacity:.72}.completion-box{padding:14px;border:1px solid #b8d9e5;border-left:3px solid var(--blue);background:#f5fbfd}.completion-box h3{margin:0 0 12px}.completion-box .field{margin-bottom:12px}.completion-box textarea{min-height:105px!important}
.metric-link{display:block;margin-top:7px;font-size:9px;color:var(--blue2);text-decoration:none;font-weight:700}
.travel-buffer{position:absolute!important;z-index:1!important;left:6px!important;right:6px!important;background:repeating-linear-gradient(135deg,rgba(90,116,128,.10),rgba(90,116,128,.10) 4px,rgba(90,116,128,.03) 4px,rgba(90,116,128,.03) 8px)!important;border-left:2px solid #8da1aa!important;overflow:hidden!important}.travel-buffer span{display:block;padding:2px 5px;color:#72858e;font:7px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
@media(max-width:800px){.settings-day{grid-template-columns:1fr 1fr}.settings-day .switchline{grid-column:1/-1}.billing-row{grid-template-columns:70px minmax(0,1fr)}.billing-row .actions,.billing-row>.state{grid-column:1/-1}.admin-summary{grid-template-columns:1fr 1fr!important}}
@media(max-width:440px){.settings-day{grid-template-columns:1fr}.settings-day .switchline{grid-column:auto}.billing-row{grid-template-columns:1fr}.admin-summary{grid-template-columns:1fr 1fr!important}.admin-summary .metric{border-right:1px solid var(--line)!important}}