:root{
  --bg:#0d1014;
  --panel:#161b21;
  --panel2:#1b222a;
  --panel3:#11161b;
  --line:#2b333d;
  --line2:#39434f;
  --text:#f4f6f8;
  --muted:#98a3af;
  --accent:#f4b62e;
  --accent2:#ffd774;
  --danger:#f16b72;
  --ok:#62d59f;
  --haul:#6ea8ff;
  --sidebar:248px;
  --shadow:0 18px 45px rgba(0,0,0,.28);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{background:radial-gradient(circle at 82% 0,#252a20 0,transparent 34rem),var(--bg)}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
.hidden{display:none!important}
.screen{min-height:100vh}

.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{
  width:min(480px,100%);background:linear-gradient(180deg,#1c2128,#15191f);
  border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow)
}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:46px;height:46px;border-radius:12px;background:var(--accent);
  display:grid;place-items:center;color:#111;font-weight:950;font-size:25px;flex:0 0 auto
}
.brand h1{font-size:22px;margin:0;line-height:1.05}
.brand small{display:block;color:var(--muted);margin-top:3px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0 18px}
.auth-tabs button,.seg button{
  border:0;border-radius:10px;background:#222832;color:var(--muted);padding:11px 12px
}
.auth-tabs button.active,.seg button.active{background:var(--accent);color:#17130b;font-weight:850}

.field{display:grid;gap:7px;margin:13px 0}
.field label{font-size:13px;color:var(--muted);font-weight:750}
.field input,.field select,.field textarea{
  width:100%;border:1px solid #333d49;background:#101419;color:var(--text);
  border-radius:10px;padding:12px 13px;outline:none
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 2px rgba(244,182,46,.12)
}

.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:850;cursor:pointer}
.btn.primary{background:var(--accent);color:#17130b}
.btn.secondary{background:#252c35;color:var(--text)}
.btn.danger{background:#3d2024;color:#ffb1b4}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn:disabled{opacity:.48;cursor:not-allowed}
.full{width:100%}
.msg{margin-top:12px;border-radius:10px;padding:11px 12px;font-size:14px}
.msg.error{background:#341c20;color:#ffadb1}
.msg.ok{background:#173126;color:#98efc3}
.small{font-size:12px;color:var(--muted)}

.topbar{
  position:sticky;top:0;z-index:30;background:rgba(13,16,20,.94);backdrop-filter:blur(15px);
  border-bottom:1px solid var(--line);padding:12px 20px
}
.topbar-inner{
  width:100%;max-width:none;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.userbox{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}

.layout{
  width:100%;max-width:none;margin:0;
  display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);
  gap:22px;padding:20px 24px 36px
}
.toolbar{
  grid-column:1;grid-row:1;
  position:sticky;top:91px;align-self:start;
  min-height:calc(100vh - 115px);
  background:linear-gradient(180deg,var(--panel),#12171c);
  border:1px solid var(--line);border-radius:16px;padding:13px;
  display:flex;flex-direction:column;gap:16px
}
.nav{display:flex;flex-direction:column;gap:7px}
.nav button{
  width:100%;text-align:left;white-space:nowrap;border:1px solid transparent;
  background:transparent;color:var(--muted);border-radius:10px;padding:12px 13px;font-weight:800
}
.nav button:hover{background:#1d242c;color:var(--text)}
.nav button.active{background:var(--accent);border-color:var(--accent);color:#17130b}

.daybar{
  margin-top:auto;display:grid;grid-template-columns:44px 1fr 44px;gap:7px;
  border-top:1px solid var(--line);padding-top:14px
}
.daybar input{
  grid-column:1/-1;background:#101419;color:var(--text);border:1px solid var(--line2);
  border-radius:9px;padding:10px
}
.daybar #todayBtn{grid-column:2}
.daybar .btn{padding:9px}

.page{grid-column:2;grid-row:1;min-width:0}
.page-title{
  display:flex;justify-content:space-between;gap:16px;align-items:center;margin:4px 0 14px
}
.page-title h2{font-size:30px;margin:0;letter-spacing:-.02em}
.page-title p{margin:4px 0 0;color:var(--muted)}

.summary-strip{
  display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-bottom:14px
}
.summary-card{
  min-height:78px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 14px;
  display:flex;flex-direction:column;justify-content:space-between
}
.summary-card strong{font-size:26px;line-height:1}
.summary-label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.planing-summary{box-shadow:inset 3px 0 var(--accent)}
.haulage-summary{box-shadow:inset 3px 0 var(--haul)}
.attention-summary{box-shadow:inset 3px 0 var(--danger)}

.diary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.dept{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0
}
.dept-head{
  padding:13px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  background:#141a20
}
.dept-head h3{margin:0;font-size:19px}
.dept.planing .dept-head{box-shadow:inset 4px 0 var(--accent)}
.dept.haulage .dept-head{box-shadow:inset 4px 0 var(--haul)}
.job-list{padding:7px}

.job-card{
  background:var(--panel2);border:1px solid #303946;border-radius:10px;margin:7px 0;
  transition:border-color .15s ease,transform .15s ease
}
.job-card:hover{border-color:#45515f}
.job-row{
  display:grid;grid-template-columns:82px minmax(180px,.9fr) minmax(250px,1.25fr);
  gap:0;padding:0;overflow:hidden
}
.job-time{
  padding:14px 12px;background:#12171d;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;justify-content:flex-start
}
.job-time strong{font-size:17px}
.job-time span{font-size:12px;color:var(--muted)}
.job-main{padding:12px 13px;min-width:0}
.job-title-line{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.job-title-line h4{margin:0;font-size:15px;line-height:1.25}
.job-customer{font-size:13px;font-weight:800;color:var(--accent2);margin-top:5px}
.job-location{margin-top:3px}
.job-notes{margin-top:7px;white-space:normal}
.job-allocation{
  padding:10px 11px;border-left:1px solid var(--line);background:#181f26;display:flex;align-items:flex-start
}
.assignments{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.tag{
  min-width:105px;background:#101419;border:1px solid #343e49;border-radius:8px;padding:6px 8px;font-size:11px;
  display:flex;flex-direction:column;gap:2px
}
.tag-label{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:850}
.allocation-empty{font-size:12px;color:#e6a6aa;background:#2c1b1f;border:1px solid #513038;border-radius:8px;padding:8px}
.meta{color:var(--muted);font-size:12px}
.pill{font-size:10px;border-radius:999px;padding:4px 7px;font-weight:850;background:#2c333d;white-space:nowrap}
.pill.planing{background:#443718;color:#ffd66f}
.pill.haulage{background:#1e3150;color:#a7c9ff}
.empty{padding:28px;text-align:center;color:var(--muted)}

.grid-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:11px
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px}
.card h4{margin:0 0 7px}
.card p{margin:4px 0;color:var(--muted);font-size:13px}
.row-actions{display:flex;gap:8px;margin-top:10px}

.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px;z-index:60
}
.modal-card{
  width:min(900px,calc(100vw - 36px));max-height:92vh;overflow:auto;
  background:#171b21;border:1px solid #313944;border-radius:16px;box-shadow:var(--shadow)
}
.modal-head{
  position:sticky;top:0;background:#171b21;padding:14px 18px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;z-index:2
}
.modal-head h3{margin:0}
.modal-body{padding:16px 18px 18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.span2{grid-column:1/-1}
.close{border:0;background:#262c35;color:white;border-radius:9px;width:36px;height:36px;font-size:20px}
.section-label{
  font-size:11px;color:var(--accent2);font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  margin:20px 0 5px;border-top:1px solid var(--line);padding-top:15px
}
.conflict{background:#361c20;border:1px solid #663038;color:#ffbdc1;border-radius:12px;padding:12px;margin:12px 0}

.fab{display:none}

/* Large office screens: widen the board, keep data dense */
@media(min-width:1500px){
  :root{--sidebar:270px}
  .layout{padding-left:28px;padding-right:28px;gap:26px}
  .job-row{grid-template-columns:88px minmax(230px,1fr) minmax(340px,1.4fr)}
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* Laptop / narrow desktop: preserve PC layout but allow tighter columns */
@media(min-width:901px) and (max-width:1180px){
  :root{--sidebar:220px}
  .layout{padding:16px;gap:14px}
  .job-row{grid-template-columns:72px 1fr}
  .job-allocation{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .job-time{border-right:1px solid var(--line)}
  .summary-strip{grid-template-columns:repeat(4,1fr)}
}

/* Mobile/tablet: collapse to touch-first companion layout */
@media(max-width:900px){
  .topbar{padding:10px 11px}
  .topbar-inner{align-items:flex-start}
  .topbar .brand small{display:none}
  .brand h1{font-size:20px}
  .brand-mark{width:42px;height:42px}
  .userbox{gap:7px;flex-wrap:wrap;justify-content:flex-end}
  .userbox #who{width:100%;text-align:right;font-size:11px}
  .userbox .btn{padding:9px 10px;font-size:12px}

  .layout{display:block;padding:10px 10px 86px}
  .toolbar{
    position:sticky;top:63px;z-index:20;min-height:0;
    border-radius:12px;padding:9px;margin-bottom:12px;
    display:flex;flex-direction:column;gap:9px
  }
  .nav{display:flex;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav button{
    width:auto;flex:0 0 auto;text-align:center;padding:9px 12px;border:1px solid var(--line);
    background:#171c22
  }
  .daybar{
    margin:0;display:grid;grid-template-columns:42px 1fr 42px;gap:6px;border-top:0;padding-top:0
  }
  .daybar input{grid-column:1/-1;padding:9px}
  .daybar #todayBtn{grid-column:2}

  .page-title{align-items:flex-start;flex-direction:column;margin:12px 2px}
  .page-title h2{font-size:25px}
  .page-title>.btn{display:none}

  .summary-strip{display:flex;overflow-x:auto;gap:8px;margin-bottom:10px;scrollbar-width:none}
  .summary-strip::-webkit-scrollbar{display:none}
  .summary-card{min-width:130px;min-height:68px;padding:10px 11px}
  .summary-card strong{font-size:22px}

  .diary-grid{grid-template-columns:1fr;gap:12px}
  .dept{border-radius:13px}
  .dept-head{padding:12px 13px}

  .job-row{display:block}
  .job-time{
    border-right:0;border-bottom:1px solid var(--line);padding:9px 11px;
    flex-direction:row;align-items:center;gap:7px
  }
  .job-time strong{font-size:15px}
  .job-time span:before{content:"→ ";color:var(--muted)}
  .job-main{padding:11px}
  .job-allocation{border-left:0;border-top:1px solid var(--line);padding:9px 10px}
  .tag{min-width:calc(50% - 4px)}

  .grid-cards{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .modal{padding:8px;align-items:end}
  .modal-card{
    width:100%;max-height:94vh;border-radius:18px 18px 0 0;border-bottom:0
  }
  .modal-head{padding:13px 14px}
  .modal-body{padding:12px 14px 22px}

  .fab{
    display:block;position:fixed;right:16px;bottom:16px;border:0;border-radius:999px;
    background:var(--accent);color:#111;padding:13px 17px;font-weight:900;box-shadow:var(--shadow);z-index:40
  }
}

/* Very small phones */
@media(max-width:430px){
  .auth-wrap{padding:14px}
  .auth-card{padding:18px;border-radius:18px}
  .auth-tabs{gap:6px}
  .auth-tabs button{padding:10px 8px}
  .tag{min-width:100%}
  .page-title p{font-size:13px}
}


/* v9: prominent date controls + month calendar */
.diary-actions{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end
}
.view-toggle{
  display:flex;background:#12171d;border:1px solid var(--line);border-radius:10px;padding:3px
}
.view-toggle button{
  border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:7px;font-weight:850;cursor:pointer
}
.view-toggle button.active{background:var(--accent);color:#17130b}

.date-jump{
  display:flex;align-items:center;gap:6px
}
.date-jump input{
  min-width:150px;background:#101419;color:var(--text);border:1px solid var(--line2);
  border-radius:9px;padding:9px 10px
}
.date-jump .btn{padding:9px 11px}

.month-toolbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:10px
}
.month-toolbar h3{text-align:center;margin:0;font-size:22px}
.month-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px
}
.month-weekdays div{
  color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  text-align:center;padding:4px 0
}
.month-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px
}
.month-day{
  min-height:130px;text-align:left;background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:9px;cursor:pointer;display:flex;flex-direction:column;gap:8px
}
.month-day:hover{border-color:#4b5866;background:#1a2027}
.month-day.outside{opacity:.38}
.month-day.selected{outline:2px solid var(--accent);outline-offset:-2px}
.month-day.today .month-day-number{
  background:var(--accent);color:#17130b;border-radius:999px;min-width:26px;height:26px;
  display:grid;place-items:center;padding:0 6px
}
.month-day-head{display:flex;justify-content:space-between;align-items:center}
.month-day-number{font-weight:900}
.month-total{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#2b333d;
  display:grid;place-items:center;font-size:10px;font-weight:900
}
.month-events{display:flex;flex-direction:column;gap:5px}
.month-event{
  display:flex;align-items:center;gap:5px;border-radius:7px;padding:6px 7px;font-size:11px;font-weight:750
}
.planing-event{background:#443718;color:#ffd66f}
.haulage-event{background:#1e3150;color:#a7c9ff}
.month-empty{color:#56616e;font-size:12px}

@media(max-width:1100px){
  .diary-actions{justify-content:flex-start}
  .date-jump{order:3;width:100%}
}

@media(max-width:900px){
  .diary-actions{width:100%;justify-content:space-between}
  .date-jump{display:grid;grid-template-columns:42px 1fr 42px;gap:6px;width:100%}
  .date-jump input{grid-column:1/-1;min-width:0;width:100%}
  .date-jump #topTodayBtn{grid-column:2}
  .diary-actions>.addJobBtn{display:none}
  .view-toggle{width:100%}
  .view-toggle button{flex:1}

  .month-toolbar{grid-template-columns:1fr 1fr}
  .month-toolbar h3{grid-column:1/-1;grid-row:1;text-align:left}
  .month-toolbar #monthPrevBtn{grid-column:1;grid-row:2}
  .month-toolbar #monthNextBtn{grid-column:2;grid-row:2}

  .month-weekdays{display:none}
  .month-grid{grid-template-columns:1fr;gap:8px}
  .month-day{
    min-height:auto;display:grid;grid-template-columns:56px 1fr;align-items:center;padding:10px 11px
  }
  .month-day.outside{display:none}
  .month-day-head{justify-content:flex-start;gap:8px}
  .month-events{flex-direction:row;flex-wrap:wrap}
  .month-event{padding:5px 7px}
}


/* v10: IT Admin customisation */
.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.settings-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.settings-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border-bottom:1px solid var(--line);background:#141a20}
.settings-panel-head h3{margin:0 0 3px;font-size:18px}
.settings-panel-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.settings-list{padding:7px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;margin:6px 0;border:1px solid #303946;border-radius:10px;background:var(--panel2)}
.setting-row strong{display:block;margin-bottom:3px}
.setting-actions{display:flex;gap:7px;align-items:center;flex:0 0 auto}
.setting-active{color:#98efc3}.setting-hidden{color:#ffb1b4}
.customise-note{margin-top:14px;padding:13px 14px;border:1px solid #4a4125;background:#282316;color:#e9ddb7;border-radius:11px;font-size:13px;line-height:1.45}
@media(max-width:900px){
  .settings-grid{grid-template-columns:1fr}
  .settings-panel-head{align-items:flex-start}
  .setting-row{align-items:flex-start;flex-direction:column}
  .setting-actions{width:100%;justify-content:space-between}
}


/* v11 customer editing */
.card-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.card-head-row .btn{flex:0 0 auto}
.customer-form-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
}
.customer-form-actions .btn.primary{
  margin-left:auto;
  min-width:160px;
}
@media(max-width:600px){
  .customer-form-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .customer-form-actions .btn.primary{
    margin-left:0;
    width:100%;
  }
  .customer-form-actions .btn.danger{width:100%}
}