:root{
  --ink:#1b2430;
  --muted:#6b7686;
  --line:#e2e6ec;
  --bg:#f5f6f8;
  --panel:#ffffff;
  --accent:#3f6fd6;
  --accent-dark:#3057b3;
  --scheduled:#3f6fd6;
  --inprogress:#c8781f;
  --completed:#2f9e5b;
  --signed:#0e8a7d;
  --closed:#4b5563;
  --danger:#c53d43;
  --slot-hover:#eef2fb;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:13px;
}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit;}

/* ---------- Login ---------- */
#loginScreen{
  height:100vh; display:flex; align-items:center; justify-content:center;
}
#loginBox{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:32px; width:320px; box-shadow:0 8px 30px rgba(0,0,0,.06);
}
#loginBox h1{font-size:16px; margin:0 0 4px;}
#loginBox p{color:var(--muted); font-size:12px; margin:0 0 20px;}
#loginBox label{display:block; font-size:11px; font-weight:600; color:var(--muted); margin:12px 0 4px;}
#loginBox input{width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:13px;}
#loginBox button{
  margin-top:18px; width:100%; background:var(--accent); color:#fff; border:none;
  border-radius:6px; padding:9px; font-size:13px; font-weight:600;
}
#loginBox button:hover{background:var(--accent-dark);}
#loginError{color:var(--danger); font-size:12px; margin-top:10px; display:none;}

/* ---------- App shell ---------- */
#app{display:none; height:100vh; flex-direction:column;}
#topbar{
  height:52px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 16px; gap:6px; flex-shrink:0;
}
#topbar h1{font-size:14px; margin:0 16px 0 0;}
.tab-btn{
  border:none; background:transparent; padding:8px 12px; border-radius:6px;
  font-size:13px; color:var(--muted); font-weight:500;
}
.tab-btn:hover{background:var(--slot-hover); color:var(--ink);}
.tab-btn.active{background:var(--accent); color:#fff;}
#userInfo{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted);}
#logoutBtn{border:1px solid var(--line); background:var(--panel); border-radius:6px; padding:6px 10px; font-size:12px;}

.view{display:none; flex:1; overflow:hidden;}
.view.active{display:flex;}

/* ---------- Generic buttons ---------- */
.btn{border:1px solid var(--line); background:var(--panel); border-radius:6px; padding:7px 12px; font-size:12px;}
.btn:hover{background:var(--slot-hover);}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger);}

/* ---------- Calendar view ---------- */
#calendarView{flex:1;}
#calendarWrap{flex:1; overflow:auto; padding:16px;}
#calendarTopbar{
  display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--panel);
  border-bottom:1px solid var(--line);
}
#dateLabel{font-weight:600; min-width:170px; text-align:center; cursor:pointer;}
#dateLabel:hover{background:var(--slot-hover);}
.mini-cal-popover{
  display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:12px; width:260px; z-index:30;
}
.mini-cal-popover.open{display:block;}
.mc-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.mc-header button{border:none; background:var(--bg); border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:12px;}
.mc-header .mc-title{font-size:12px; font-weight:700;}
.mc-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center;}
.mc-grid .mc-daylabel{font-size:9px; color:var(--muted); font-weight:700; padding-bottom:4px;}
.mc-grid .mc-day{
  font-size:11px; padding:6px 0; border-radius:6px; cursor:pointer; color:var(--ink);
}
.mc-grid .mc-day:hover{background:var(--slot-hover);}
.mc-grid .mc-day.mc-muted{color:var(--muted); opacity:.5;}
.mc-grid .mc-day.mc-today{border:1px solid var(--accent);}
.mc-grid .mc-day.mc-selected{background:var(--accent); color:#fff; font-weight:700;}
#grid{display:grid; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); position:relative;}
.col-header{
  background:var(--panel); border-bottom:1px solid var(--line); border-left:1px solid var(--line);
  padding:8px 6px; font-weight:600; font-size:12px; text-align:center; position:sticky; top:0; z-index:5;
}
.time-header{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; left:0; z-index:6;}
.time-label{
  font-size:11px; color:var(--muted); padding:4px 8px; border-top:1px solid var(--line);
  border-right:1px solid var(--line); background:var(--bg); position:sticky; left:0;
}
.slot{border-top:1px solid var(--line); border-left:1px solid var(--line); min-height:34px; position:relative; cursor:pointer;}
.slot:hover{background:var(--slot-hover);}
.slot .slot-dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:4px; height:4px; border-radius:50%; background:var(--line); pointer-events:none;
}
.slot.slot-occupied{cursor:default;}
.slot.slot-occupied:hover{background:transparent;}
.job-block{
  border-radius:4px; padding:4px 6px; font-size:11px; color:#fff;
  overflow:hidden; line-height:1.25; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.15);
  position:absolute; z-index:2;
}
.job-block-draggable{cursor:move;}
.resize-handle{
  position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize;
}
.resize-handle::after{
  content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:24px; height:2px; border-radius:2px; background:rgba(255,255,255,.6);
}
.now-line{position:absolute; left:70px; right:0; height:2px; background:var(--danger); z-index:4; pointer-events:none;}
.now-line::before{
  content:''; position:absolute; left:-5px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--danger);
}
.status-scheduled{background:var(--scheduled);}
.status-in_progress{background:var(--inprogress);}
.status-completed{background:var(--completed);}
.status-signed{background:var(--signed);}
.status-closed{background:var(--closed);}

#queue{width:260px; border-left:1px solid var(--line); background:var(--panel); padding:12px; overflow-y:auto;}
#queue h2{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:4px 0 12px;}
.queue-item{
  border:1px solid var(--danger); border-left-width:4px; border-radius:6px; padding:8px 10px;
  margin-bottom:8px; cursor:pointer; background:#fdf2f2;
}
.queue-item.selected{background:#fbe1e2; box-shadow:0 0 0 2px var(--danger) inset;}
.queue-item .qi-title{font-weight:600; font-size:12px;}
.queue-item .qi-sub{color:var(--muted); font-size:11px; margin-top:2px;}
#queueHint{font-size:11px; color:var(--muted); margin-top:8px; display:none; border-top:1px dashed var(--line); padding-top:8px;}
#queueHint.active{display:block;}

/* ---------- List views (customers / technicians) ---------- */
.list-view{flex:1; overflow-y:auto; padding:20px;}
.list-header{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.list-header input{border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:13px; width:240px;}
table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
th, td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:12px;}
th{background:var(--bg); color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.03em;}
tr:last-child td{border-bottom:none;}
tr.clickable:hover{background:var(--slot-hover); cursor:pointer;}

/* ---------- Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,24,30,.4); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.overlay.open{display:flex;}
.modal{background:var(--panel); border-radius:10px; width:420px; max-width:100%; max-height:90vh; overflow-y:auto; padding:20px; box-shadow:0 12px 40px rgba(0,0,0,.25);}
.modal.modal-wide{width:560px;}
.modal h3{margin:0 0 4px; font-size:15px;}
.modal .meta{color:var(--muted); font-size:12px; margin-bottom:14px;}
.modal label{display:block; font-size:11px; font-weight:600; color:var(--muted); margin:10px 0 4px;}
.modal input, .modal select, .modal textarea{width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 8px; font-size:13px;}
.modal textarea{min-height:64px; resize:vertical;}
.modal .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
.modal-error{color:var(--danger); font-size:12px; margin-top:8px; display:none;}

/* ---------- Job card detail ---------- */
.status-pill{display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; color:#fff; font-weight:600;}
.worklog-entry{border-left:2px solid var(--line); padding:6px 0 6px 12px; margin-bottom:6px; font-size:12px;}
.worklog-entry .wl-meta{color:var(--muted); font-size:11px;}
.comment-entry{background:var(--bg); border-radius:6px; padding:8px 10px; margin-bottom:6px; font-size:12px;}
.comment-entry .c-meta{color:var(--muted); font-size:11px; margin-bottom:2px;}
#signaturePad{border:1px solid var(--line); border-radius:6px; touch-action:none; background:#fff; width:100%; height:150px;}
.section-title{font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin:16px 0 8px;}

/* ---------- Gradient banner (page headers + form section headers) ---------- */
.banner{
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius:10px; padding:20px 24px; color:#fff;
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
}
.banner.banner-sm{padding:12px 16px; border-radius:8px; margin-bottom:0;}
.banner-icon{
  width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px;
}
.banner-sm .banner-icon{width:34px; height:34px; border-radius:8px; font-size:16px;}
.banner-text{flex:1; min-width:0;}
.banner-text h2{margin:0; font-size:18px; font-weight:700;}
.banner-sm .banner-text h2{font-size:14px;}
.banner-text p{margin:2px 0 0; font-size:12px; opacity:.85;}
.banner-actions{display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap;}
.banner-actions .btn{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff;}
.banner-actions .btn:hover{background:rgba(255,255,255,.28);}
.banner-actions .btn-white{background:#fff; color:var(--accent); border-color:#fff; font-weight:600;}
.banner-stat{text-align:center; padding:0 14px;}
.banner-stat .bs-label{font-size:9px; text-transform:uppercase; letter-spacing:.04em; opacity:.75;}
.banner-stat .bs-value{font-size:20px; font-weight:700;}

/* ---------- KPI stat cards ---------- */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:16px;}
.kpi-card{
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:8px; padding:14px 16px; position:relative;
}
.kpi-card .kpi-icon{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--slot-hover); color:var(--accent);
}
.kpi-card .kpi-label{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700;}
.kpi-card .kpi-value{font-size:26px; font-weight:800; color:var(--ink); margin-top:4px;}
.kpi-card .kpi-sub{font-size:11px; color:var(--muted); margin-top:2px;}
.kpi-card.kpi-orange{border-left-color:#c8781f;}
.kpi-card.kpi-orange .kpi-icon{color:#c8781f;}
.kpi-card.kpi-blue{border-left-color:#3f6fd6;}
.kpi-card.kpi-blue .kpi-icon{color:#3f6fd6;}
.kpi-card.kpi-red{border-left-color:#c53d43;}
.kpi-card.kpi-red .kpi-icon{color:#c53d43;}
.kpi-card.kpi-green{border-left-color:#2f9e5b;}
.kpi-card.kpi-green .kpi-icon{color:#2f9e5b;}
.kpi-card.kpi-purple{border-left-color:#7c5fd6;}
.kpi-card.kpi-purple .kpi-icon{color:#7c5fd6;}

/* ---------- Dark-header table variant ---------- */
table.dark-header thead th{
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; border-bottom:none;
}

/* ---------- Dashboard panels ---------- */
.dash-columns{display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start;}
.dash-panel{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.dash-panel .banner-sm{border-radius:0;}
.dash-panel-body{padding:14px 16px;}
.dash-list-item{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line);}
.dash-list-item:last-child{border-bottom:none;}
.dash-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}
.dash-date-badge{
  width:40px; text-align:center; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:4px 0; flex-shrink:0;
}
.dash-date-badge .db-month{font-size:8px; text-transform:uppercase; color:var(--muted); font-weight:700;}
.dash-date-badge .db-day{font-size:14px; font-weight:800; color:var(--ink);}
.dash-item-title{font-size:12px; font-weight:600; color:var(--ink);}
.dash-item-sub{font-size:11px; color:var(--muted);}
@media (max-width: 900px){.dash-columns{grid-template-columns:1fr;}}