*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f6f8;color:#182033}
.wrap{max-width:1500px;margin:auto;padding:18px}
.card{background:#fff;border:1px solid #e3e7ee;border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.brand{font-size:30px;font-weight:850;letter-spacing:-.6px}
.sub{color:#687386;font-weight:600;margin-top:2px}
.muted{color:#6b7280}
.small{font-size:13px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
label{font-size:12px;font-weight:700;color:#657084;display:block;margin:8px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfd6e2;border-radius:9px;font:inherit;background:#fff}
textarea{resize:vertical}
.btn{padding:11px 14px;border-radius:9px;border:1px solid #cfd6e2;background:#fff;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.primary{background:#111827;color:#fff;border-color:#111827}
.danger{color:#991b1b}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hidden{display:none!important}
.status{margin-top:10px;font-size:13px}
.good{color:#166534}.bad{color:#991b1b}
.item{padding:14px;border:1px solid #e3e7ee;border-radius:11px;margin-top:9px;background:#fff}
.item.click{cursor:pointer}
.item.click:active{transform:scale(.995)}
.title{font-weight:800;font-size:17px}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2f7;color:#4b5563;font-size:12px;font-weight:700}
.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}
.tab{white-space:nowrap;padding:9px 12px;border-radius:8px;border:1px solid #d7dde7;background:#fff;font-weight:750;cursor:pointer}
.tab.active{background:#111827;color:#fff;border-color:#111827}
.back{margin-bottom:10px}
.empty{padding:18px;border:1px dashed #cfd6e2;border-radius:10px;color:#6b7280;text-align:center;margin-top:10px}
.section-title{margin:0;font-size:22px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:7px 12px;margin-top:12px}
.kv div:nth-child(odd){color:#6b7280;font-weight:650}
hr{border:none;border-top:1px solid #eceff3;margin:16px 0}
@media(max-width:700px){
  .grid,.grid3{grid-template-columns:1fr}
  .wrap{padding:12px}
  .brand{font-size:27px}
  .kv{grid-template-columns:1fr}
  .kv div:nth-child(odd){margin-top:6px}
}

.dispatch-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.dispatch-date{font-size:20px;font-weight:850;min-width:180px;text-align:center}
.dispatch-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:start}
.tech-column{border:1px solid #dfe4ec;border-radius:12px;background:#f8fafc;min-height:180px;overflow:hidden}
.tech-head{padding:11px 12px;font-weight:850;background:#fff;border-bottom:1px solid #e5e9f0}
.tech-body{padding:9px}
.appt-card{background:#fff;border:1px solid #dfe4ec;border-radius:10px;padding:10px;margin-bottom:8px}
.appt-time{font-weight:850;font-size:14px}
.appt-client{font-weight:800;margin-top:3px}
.appt-job{font-size:13px;color:#596579;margin-top:2px}
.status-select{margin-top:8px;padding:7px 8px;font-size:12px}
@media(max-width:700px){.dispatch-board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.tech-column{min-width:82vw;scroll-snap-align:start}.dispatch-date{min-width:auto}}

.main-nav{padding:10px 14px}
.calendar-card{overflow:hidden}
.view-switch{display:inline-flex;border:1px solid #d7dde7;border-radius:9px;overflow:hidden}
.view-btn{border:0;border-right:1px solid #d7dde7;background:#fff;padding:8px 15px;font-weight:750;font:inherit}
.view-btn:last-child{border-right:0}.view-btn.active{background:#111827;color:#fff}.view-btn:disabled{color:#9ca3af}
.calendar-filter{width:auto;min-width:170px;padding:10px}
.calendar-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;margin-top:14px;align-items:start}
.week-calendar{display:grid;grid-template-columns:80px repeat(7,minmax(130px,1fr));border:1px solid #dfe4ec;border-radius:12px;overflow-x:auto;background:#fff;min-width:1000px}
.cal-corner,.cal-day-head,.cal-time,.cal-cell{border-right:1px solid #e5e9f0;border-bottom:1px solid #e5e9f0}
.cal-corner{background:#fafbfc;position:sticky;left:0;z-index:4}
.cal-day-head{padding:10px 6px;text-align:center;background:#fafbfc;font-weight:800;min-height:55px;position:sticky;top:0;z-index:2}
.cal-day-head.today{background:#eef5ff}.cal-day-num{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:50%;margin-top:3px}.cal-day-head.today .cal-day-num{background:#111827;color:#fff}
.cal-time{padding:12px 7px;font-size:12px;font-weight:750;color:#6b7280;background:#fafbfc;position:sticky;left:0;z-index:3;text-align:right;min-height:105px}
.cal-cell{padding:6px;min-height:105px;background:#fff;cursor:pointer}.cal-cell:hover{background:#fafcff}
.cal-appt{border:1px solid #bfdbfe;background:#eff6ff;border-left:4px solid #2563eb;border-radius:8px;padding:7px;margin-bottom:5px;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.cal-appt:active{transform:scale(.99)}.cal-appt-time{font-size:12px;font-weight:850}.cal-appt-client{font-size:13px;font-weight:850;margin-top:3px}.cal-appt-job,.cal-appt-tech{font-size:11px;color:#596579;margin-top:2px}

.week-calendar.day-mode{grid-template-columns:92px minmax(420px,1fr);min-width:650px}
.week-calendar.day-mode .cal-cell{min-height:110px}
.week-calendar.month-mode{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));min-width:840px}
.month-weekday{padding:10px 8px;text-align:center;background:#f9fafb;border-right:1px solid #e8edf2;border-bottom:1px solid #e8edf2;font-size:11px;font-weight:850;color:#667384;text-transform:uppercase;letter-spacing:.04em}
.month-day{min-height:120px;padding:8px;border-right:1px solid #e8edf2;border-bottom:1px solid #e8edf2;background:#fff;cursor:pointer}
.month-day:hover{background:#fbfcfd}.month-day.other{background:#fafbfc;color:#a3acb8}.month-day.today{background:#fffaf0}
.month-day-num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:850;margin-bottom:5px}.month-day.today .month-day-num{background:#f3a51f;color:#17212b}
.month-chip{font-size:10.5px;line-height:1.25;background:#eaf3ff;border-left:3px solid #2e74d0;border-radius:5px;padding:5px 6px;margin:4px 0;cursor:pointer;color:#233344}
.month-chip:nth-of-type(3n){background:#edf8ee;border-left-color:#4d9b58}.month-chip:nth-of-type(4n){background:#fff2e7;border-left-color:#e78a2f}.month-more{font-size:10px;color:#6b7280;padding:3px 2px}
.status-picker{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.status-picker select{min-width:0}
.appointment-detail{border:1px solid #dfe4ec;border-radius:12px;padding:16px;background:#fff;position:sticky;top:12px}.detail-close{float:right;border:0;background:transparent;font-size:20px;cursor:pointer}.detail-row{margin-top:12px}.detail-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;font-weight:800}.detail-value{font-weight:750;margin-top:2px}
@media(max-width:900px){.calendar-shell{display:block}.appointment-detail{position:fixed;left:12px;right:12px;bottom:12px;top:auto;z-index:20;max-height:50vh;overflow:auto;box-shadow:0 10px 35px rgba(0,0,0,.18)}.calendar-card{overflow-x:auto}}


/* BlueCollarWorx mockup-inspired application shell */
body.signed-in{background:#eef2f6}
body.signed-in>.wrap{max-width:none;margin:0;padding:0}
body.signed-in>.wrap>.card:first-child{display:none}
body.signed-in #app{min-height:100vh}
.app-shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
.bcw-sidebar{background:linear-gradient(180deg,#101923 0%,#0b121a 100%);color:#dce5ee;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;box-shadow:4px 0 18px rgba(15,23,42,.08);z-index:30}
.side-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px}
.brand-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#f3a51f;color:#101923;font-size:14px;font-weight:950;letter-spacing:-.4px;box-shadow:0 5px 18px rgba(243,165,31,.2)}
.side-title{font-size:17px;font-weight:850;color:#fff;letter-spacing:-.3px}.side-sub{font-size:9px;color:#7f91a5;letter-spacing:1.25px;font-weight:800;margin-top:2px}
.side-nav{display:flex;flex-direction:column;gap:5px}.side-link{width:100%;border:0;background:transparent;color:#9fb0c0;display:flex;align-items:center;gap:11px;text-align:left;padding:11px 12px;border-radius:9px;font:inherit;font-size:13px;font-weight:720;cursor:pointer}.side-link span{width:20px;text-align:center;font-size:16px}.side-link.active{background:#203142;color:#fff;box-shadow:inset 3px 0 0 #f3a51f}.side-link.ghost{opacity:.58;cursor:default}.side-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:16px 10px 4px}.side-company{font-size:12px;color:#dce5ee;font-weight:760}.side-version{font-size:10px;color:#6f8092;margin-top:3px}
.app-main{min-width:0;padding:22px 24px 30px;overflow:hidden}.app-main>.card,.app-main>div>.card{border-color:#dfe5ec;box-shadow:0 4px 16px rgba(15,23,42,.035);border-radius:12px}
#homeView>.card:first-child,#scheduleView>.card:first-child{background:transparent;border:0;box-shadow:none;padding:2px 2px 12px;margin-bottom:2px}
#scheduleView>.card:first-child h2,#homeView>.card:first-child h2{font-size:28px;letter-spacing:-.65px;color:#111827}
#scheduleView>.card:first-child .muted{font-size:13px;color:#7b8794}
.btn{border-radius:8px;box-shadow:0 1px 1px rgba(15,23,42,.02)}.btn.primary{background:#17212b;border-color:#17212b}.btn.primary:hover{background:#0c141d}
#newAppointment.btn.primary{background:#f3a51f;color:#17212b;border-color:#e79a14;font-weight:850}.calendar-card{background:#fff;padding:0!important;border-radius:12px!important;overflow:hidden!important}.calendar-card .calendar-head{padding:14px 16px;border-bottom:1px solid #e7ebf0;background:#fff}.view-switch{border-radius:8px;background:#f5f7f9}.view-btn{font-size:12px;padding:7px 15px;background:#f5f7f9}.view-btn.active{background:#17212b}
#weekRangeLabel{font-size:21px!important;letter-spacing:-.3px}.calendar-filter{background:#fff;min-width:165px}
.calendar-shell{grid-template-columns:minmax(0,1fr) 300px;gap:0;margin-top:0;min-height:560px}.week-calendar{border:0;border-radius:0;min-width:980px}.cal-corner,.cal-day-head,.cal-time,.cal-cell{border-color:#e8edf2}.cal-day-head{background:#f9fafb;min-height:64px;padding:11px 6px;color:#576373;font-size:12px;text-transform:uppercase;letter-spacing:.03em}.cal-day-head.today{background:#fff7e6;color:#8a5a00}.cal-day-head.today .cal-day-num{background:#f3a51f;color:#151b22}.cal-day-num{font-size:14px;margin-top:5px}.cal-time{background:#fafbfc;color:#7b8794;min-height:122px;padding:14px 9px}.cal-cell{min-height:122px;padding:7px;background:#fff}.cal-cell:hover{background:#fbfcfd}.cal-appt{border:0!important;border-left:4px solid #2e74d0!important;background:#eaf3ff!important;border-radius:7px!important;padding:8px 9px!important;box-shadow:none!important}.cal-appt:nth-child(2n){background:#edf8ee!important;border-left-color:#4d9b58!important}.cal-appt:nth-child(3n){background:#fff2e7!important;border-left-color:#e78a2f!important}.cal-appt-time{font-size:11px;color:#47627f}.cal-appt-client{font-size:12px;color:#17212b}.cal-appt-job,.cal-appt-tech{font-size:10.5px}.appointment-detail{border:0;border-left:1px solid #e5eaf0;border-radius:0;background:#fbfcfd;top:0;min-height:560px;padding:20px 18px}.appointment-detail h3{font-size:18px;letter-spacing:-.2px}.detail-label{color:#8895a3}.detail-value{font-size:13px}.detail-actions{display:grid;gap:8px;margin-top:18px}.detail-actions .wide{width:100%}
#appointmentList .item{border:0;border-bottom:1px solid #edf0f3;border-radius:0;padding:12px 4px;margin:0}.card h3{color:#1d2732}.pill{background:#eef2f5;color:#526170}
@media(max-width:1024px){.app-shell{grid-template-columns:78px minmax(0,1fr)}.bcw-sidebar{padding:16px 10px}.side-brand{justify-content:center;padding:2px 0 20px}.side-brand>div:last-child,.side-link:not(.active){font-size:0}.side-link{justify-content:center;padding:12px}.side-link.active{font-size:0}.side-link span{font-size:18px}.side-footer{display:none}.app-main{padding:18px 16px}}
@media(max-width:760px){.app-shell{display:block}.bcw-sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:66px;padding:7px 8px;flex-direction:row;z-index:100;border-top:1px solid rgba(255,255,255,.08)}.side-brand,.side-footer,.side-link.ghost{display:none}.side-nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}.side-link,.side-link.active{font-size:11px;justify-content:center;flex-direction:column;gap:2px;padding:5px;border-radius:8px;box-shadow:none}.side-link span{font-size:17px}.app-main{padding:12px 10px 82px}.calendar-shell{display:block}.appointment-detail{position:fixed;left:10px;right:10px;bottom:78px;top:auto;z-index:120;max-height:58vh;min-height:0;border:1px solid #dfe5ec;border-radius:12px;box-shadow:0 18px 50px rgba(15,23,42,.22)}#scheduleView>.card:first-child h2,#homeView>.card:first-child h2{font-size:24px}}