/* Visual language of the original SCORVYA mockup. All assets work offline. */
:root{
 --bg:#f1f5fb;--panel:#fff;--text:#203047;--muted:#586b82;--line:#dce5ee;
 --blue:#255cc7;--blue-soft:#eaf1ff;--green:#147456;--green-soft:#eaf8f2;
 --orange:#975400;--orange-soft:#fff4e0;--red:#b8324a;--red-soft:#fff0f3;
 --radius:12px;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background:var(--bg);color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility;
}
body{background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:500;letter-spacing:-.3px}
h1{font-size:25px;line-height:1.25;letter-spacing:-.65px;margin-bottom:6px}
h2{font-size:18px;line-height:1.35}
h3{font-size:15px;line-height:1.4}
.ui-icon{display:block;flex:none;width:18px;height:18px;pointer-events:none}
.shell{grid-template-columns:216px minmax(0,1fr)}
.sidebar{padding:23px 12px 16px;gap:24px;background:#fff;border-color:var(--line)}
.brand{gap:10px;font-size:17px;letter-spacing:1.8px;font-weight:500;color:var(--blue)}
.brand:hover{text-decoration:none}
.brand img{width:32px;height:32px;flex:none}
.sidebar>.brand{padding:0 9px;flex:none}
.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.nav-link{position:relative;padding:9px 11px;min-height:38px;gap:11px;border-radius:8px;font-size:13px;line-height:1.4;flex:none;color:var(--muted);transition:background .12s,color .12s}
.nav-link:hover{color:var(--blue);background:#f3f6fc}
.nav-link.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
.nav-link.active:before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.nav-icon{display:flex;align-items:center;justify-content:center;width:18px;flex:none;font-size:18px}
.nav-icon .ui-icon{width:18px;height:18px}
.sidebar-bottom{flex:none;margin-top:0;padding-top:12px;font-size:12px}
.sidebar-bottom>.nav-link{font-size:12px;gap:8px;padding-inline:8px}
.sidebar-bottom>p{padding:0 9px;margin:12px 0 10px;font-size:11px;line-height:1.6}
.sidebar-bottom>[data-action=logout]{margin-left:8px;border:0;background:transparent;color:var(--muted);padding:5px 0;min-height:30px;font-size:11px;justify-content:flex-start}
.sidebar-bottom>[data-action=logout]:hover{color:var(--blue)}
.sidebar-bottom .ui-icon{width:16px;height:16px}
.topbar{height:68px;padding:0 28px;gap:12px;background:#fff;border-color:var(--line)}
.company-name{font-size:12px;font-weight:500;max-width:280px;letter-spacing:.1px}
.topbar-actions{gap:12px;flex-wrap:nowrap}
.topbar .btn.small{font-size:12px;min-height:34px;padding:6px 10px}
.topbar-search{color:var(--muted);gap:7px}
.topbar-search .ui-icon{width:15px;height:15px}
.topbar-user{display:flex;align-items:center;gap:9px;margin-left:4px;font-size:12px;font-weight:500;white-space:nowrap;color:var(--text)}
.topbar-user small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:1px}
.user-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:var(--blue);background:var(--blue-soft);border:1px solid #dce7fa;font-size:11px;font-weight:600}
.page{padding:26px 28px 40px;max-width:1600px}
.page-heading{gap:18px;align-items:center;margin-bottom:22px}
.page-heading p{font-size:13px;line-height:1.55;max-width:760px}
.panel{border-radius:12px;padding:20px;border-color:var(--line);box-shadow:0 2px 6px #20304703;margin-bottom:20px}
.panel-title{gap:12px;margin-bottom:16px}
.panel-title h2{font-size:17px;font-weight:500;letter-spacing:-.25px}
.btn{font-weight:500;border-color:var(--line);transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:#f2f6fc;border-color:#c7d7ed}
.btn.primary{background:var(--blue);border-color:var(--blue);box-shadow:0 1px 2px #255cc718}
.btn.primary:hover{background:#1d4fad;border-color:#1d4fad}
.btn.soft{background:var(--blue-soft);border-color:transparent;color:var(--blue)}
.btn.danger:hover{background:var(--red-soft);border-color:#ecc4ca}
.icon-btn:hover{background:var(--blue-soft);color:var(--blue)}
.mobile-menu .ui-icon{width:21px;height:21px;margin:auto}
.stats{gap:16px;margin-bottom:22px}
.stat{padding:18px 20px;gap:7px;border-radius:12px;border-top-width:3px;box-shadow:0 2px 6px #20304703}
.stat>.muted{font-size:12px}
.stat strong{font-size:27px;font-weight:500;line-height:1.15;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat small{font-size:11px}
.stat.purple{border-top-color:#7754b9}
.job-grid{gap:14px}
.job-card{padding:16px;border-radius:10px;box-shadow:0 1px 3px #20304703}
.job-card h3{font-size:15px;font-weight:500;margin:10px 0 7px}
.job-card p{font-size:12px;line-height:1.5}
.job-card:hover{box-shadow:0 3px 10px #20304708}
.badge{border-radius:6px;font-size:10px;line-height:1.5;padding:3px 7px;font-weight:500}
.search{font-size:12px;margin-bottom:16px;gap:12px}
.search input{background:#f8fafd;border-color:var(--line);min-height:38px;padding:8px 11px;font-size:13px}
table{font-size:12px}
th{font-size:11px;font-weight:500;color:#586b82;background:#f5f8fc}
th,td{padding:11px 12px}
td{line-height:1.5}
tbody tr:hover{background:#f6f9fe}
td>a:first-child{font-weight:500}
.empty{font-size:13px;color:var(--muted);padding:26px 15px;line-height:1.6}
.tabs{gap:6px;margin-bottom:18px}
.tabs a{font-size:12px;padding:7px 12px;border-radius:8px}
.tabs a.active{border-color:#b4caee;font-weight:500}
.note{font-size:12px;border-radius:8px;line-height:1.6}
.definition{font-size:13px;gap:10px 14px}
.definition dt{font-size:12px}
.list-row p{font-size:12px}
.dialog{box-shadow:0 20px 70px #18345430;border-color:#d6e1ee;border-radius:14px}
.dialog::backdrop{background:#1d35566b}
.dialog-heading h2{font-weight:500;letter-spacing:-.45px}
.form-workspace-tabs [role=tab]{font-weight:400;border-color:var(--line)}
.form-workspace-tabs [aria-selected=true]{font-weight:500;color:var(--blue);border-color:#b4c9ec;background:var(--blue-soft)}
:where(input,select,textarea):focus-visible{outline:2px solid #87abea;outline-offset:1px}
.article-sheet{box-shadow:0 2px 6px #20304703}
.article-tabs [role=tab]{font-weight:500}
.calendar-toolbar{font-size:12px;gap:12px}
.calendar-toolbar strong{font-weight:500}
.calendar-wrap{border-radius:11px;box-shadow:0 2px 6px #20304703}
.cal-head{font-size:12px;font-weight:500;background:#f8fafd}
.cal-head a{display:block;color:inherit}
.cal-job{border-radius:6px;box-shadow:0 1px 2px #20304706}
.cal-job strong{font-weight:500}
/* Technician identity is independent of the calendar column used for moving jobs. */
[data-tech-tone=blue]{--tech-accent:#255cc7;--tech-soft:#eaf1ff;--tech-line:#bccff1}
[data-tech-tone=green]{--tech-accent:#147456;--tech-soft:#eaf8f2;--tech-line:#b8ddce}
[data-tech-tone=purple]{--tech-accent:#7754b9;--tech-soft:#f3edff;--tech-line:#d3c2ef}
[data-tech-tone=amber]{--tech-accent:#975400;--tech-soft:#fff4e0;--tech-line:#e8cfa2}
[data-tech-tone=teal]{--tech-accent:#126e80;--tech-soft:#eaf6fa;--tech-line:#b6dce7}
[data-tech-tone=unassigned]{--tech-accent:#64758b;--tech-soft:#f0f3f7;--tech-line:#cfd8e4}
.cal-job[data-tech-tone]{background:var(--tech-soft);border-color:var(--tech-line);border-left-color:var(--tech-accent);color:var(--text)}
.job-card[data-tech-tone]:not(.urgent){border-left-color:var(--tech-accent)}
.cal-head[data-tech-tone]{color:var(--tech-accent);background:var(--tech-soft)}
.calendar-head-tech{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.calendar-legend{display:flex;align-items:center;gap:7px 15px;flex-wrap:wrap;margin:0 0 12px;font-size:11px;color:var(--muted)}
.calendar-legend-title{font-weight:500}
.calendar-legend-item{display:inline-flex;align-items:center;gap:6px}
.tech-dot{width:8px;height:8px;border-radius:50%;background:var(--tech-accent);flex:none;display:inline-block}
.login{margin:10vh auto;padding:32px;max-width:440px;border-radius:16px;box-shadow:0 12px 38px #2030470a}
.login .brand{margin-bottom:28px}
.login h1{font-size:24px;font-weight:500}
.login>.muted{font-size:13px;line-height:1.6}
.login .field{font-size:12px;margin-bottom:17px}
.login input{min-height:44px;font-size:15px;background:#fbfcff}
@media(min-width:721px) and (max-height:780px){
 .sidebar{gap:18px;padding-block:20px 12px}
 .sidebar nav{gap:2px}
 .sidebar nav .nav-link{min-height:34px;padding-block:7px}
 .sidebar-bottom>p{margin-block:8px 6px}
}
@media(min-width:721px) and (max-width:1100px){
 .shell{grid-template-columns:196px minmax(0,1fr)}
 .sidebar{padding-inline:9px}
 .nav-link{padding-inline:9px;font-size:12px;gap:9px}
 .topbar{padding-inline:22px}
 .topbar-user{display:none}
 .page{padding-inline:22px}
}
@media(max-width:720px){
 .shell{display:block}
 .sidebar{top:65px;width:232px;height:calc(100dvh - 65px);padding:14px 12px;gap:14px}
 .nav-link{font-size:14px;min-height:44px;padding:11px;gap:12px}
 .sidebar-bottom>[data-action=logout]{min-height:44px;font-size:12px}
 .sidebar-bottom>.nav-link{min-height:44px;font-size:13px}
 .topbar{height:65px;padding:0 12px;gap:8px}
 .topbar>.row{gap:5px;flex-wrap:nowrap;min-width:0}
 .company-name{max-width:108px;font-size:11px;overflow:hidden;text-overflow:ellipsis}
 .topbar-actions{gap:6px}
 .topbar .mobile-menu,.topbar .notification-bell{width:44px;height:44px;min-width:44px;flex:none}
 .topbar .btn.small{min-height:44px;padding:7px 8px;font-size:11px}
 .topbar-user{display:none}
 .topbar-search,.topbar [data-install]{width:44px;height:44px;min-width:44px;padding:0!important}
 .topbar-search span,.topbar [data-install] span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .topbar:has([data-install]) .company-name{display:none}
 .topbar:has([data-install]) .topbar-actions{gap:4px}
 .topbar-search .ui-icon{width:18px;height:18px}
 .page{padding:21px 14px 32px}
 h1{font-size:24px}
 .page-heading{display:block;margin-bottom:20px}
 .page-heading>.actions{margin-top:14px}
 .panel{padding:16px}
 .panel-title{gap:10px}
 .panel-title h2{font-size:17px}
 .stats{gap:10px}
 .stat{padding:14px 15px}
 .stat strong{font-size:24px}
 .stat small{font-size:11px}
 .tabs a{min-height:44px;display:inline-flex;align-items:center}
 .search input{min-height:44px;font-size:16px}
 .login{margin:5vh 14px;padding:24px;max-width:none}
 .login input{font-size:16px}
 .calendar-legend{font-size:12px;gap:8px 13px}
}
@media(prefers-reduced-motion:reduce){.nav-link,.btn{transition:none}}