:root{
  --p3-navy:#0b3158;--p3-blue:#1769aa;--p3-blue2:#137bd0;--p3-blue3:#057bd1;
  --p3-cyan:#16a7c7;--p3-green:#13a84f;--p3-purple:#7b2fc7;--p3-orange:#f59e0b;
  --p3-red:#d92d20;--p3-bg:#edf3f8;--p3-card:#fff;--p3-text:#102f4d;
  --p3-muted:#657c8f;--p3-border:#dce7ef
}
html,body{font-family:Arial,Helvetica,sans-serif!important}
body{background:var(--p3-bg)!important;color:var(--p3-text)!important}
.top,.topbar{background:linear-gradient(105deg,var(--p3-navy) 0%,#0d5fa5 62%,var(--p3-blue3) 100%)!important;color:#fff!important;border-color:#ffffff22!important;box-shadow:0 3px 14px #0b31582d!important}
.top img,.topbar img,.topbar-logo{object-fit:contain}
.top h1,.top b,.topbar h1,.topbar .subtitle{font-weight:700!important}
.card,.panel,.settings-card,.section,.tableWrap{background:var(--p3-card)!important;border:1px solid var(--p3-border)!important;box-shadow:0 4px 14px #17324d0c!important}
.card,.panel,.settings-card,.section{border-radius:14px!important}
button,.primary,.save,.menu,.tab.active{font-family:Arial,Helvetica,sans-serif!important;font-weight:700!important}
button:not(.danger):not(.green):not(.secondary):not(.returnbtn):not(.complete),.primary,.save{background:linear-gradient(180deg,var(--p3-blue2),var(--p3-blue))!important;color:#fff!important;border-color:transparent!important}
button:hover,.primary:hover,.save:hover{filter:brightness(.96)}
button.secondary,.returnbtn,.grey{background:#687786!important;color:#fff!important}
button.green,.complete{background:linear-gradient(180deg,#18b75b,#0b8f43)!important;color:#fff!important}
button.danger,.danger{background:var(--p3-red)!important;color:#fff!important}
input,select,textarea{font-family:Arial,Helvetica,sans-serif!important;border-color:#c7d7e3!important;color:var(--p3-text)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:#2e8bd1!important;box-shadow:0 0 0 2px #2e8bd122!important}
th{background:#eff5f9!important;color:var(--p3-text)!important;font-weight:700!important}
td{color:var(--p3-text)}
.muted,.small,.hint,.sub,.panel-title p{color:var(--p3-muted)!important}

/* department screens */
.head{border:1px solid var(--p3-border)!important}
.head h2,.panel-title h3{font-weight:700!important;color:var(--p3-text)!important}
.head button{background:#6d6878!important;color:#fff!important;font-weight:700!important}
.stats .stat{border:1px solid var(--p3-border)!important;box-shadow:0 4px 14px #17324d0c!important}
.stats .stat.good{background:#e8f7ed!important}.stats .stat.bad{background:#ffe8e6!important}.stats .stat.comm{background:#f2e9ff!important}
.stats .stat.good b{color:#11843b!important}.stats .stat.bad b{color:#cf1f17!important}.stats .stat.comm b{color:#6d29b6!important}
.tabs .tab{background:#dceaf4!important;color:var(--p3-text)!important;font-weight:700!important}
.tabs .tab.active{background:linear-gradient(180deg,var(--p3-blue2),var(--p3-blue))!important;color:#fff!important}
.sales-tools a{background:linear-gradient(180deg,var(--p3-cyan),#0e7f9e)!important;border-radius:9px!important}
tr.jobrow.selected{background:#e8f4fb!important;box-shadow:inset 4px 0 var(--p3-blue)!important}
.current-station{color:var(--p3-blue)!important}

/* sales desk */
.top .back{border:1px solid #ffffff66!important;color:#fff!important;background:#ffffff12!important;font-weight:700!important}
.tabs button{background:#dfeaf3!important;color:var(--p3-text)!important;font-weight:700!important}
.tabs button.active{background:linear-gradient(180deg,var(--p3-blue2),var(--p3-blue))!important;color:#fff!important}
.progress{background:#dce7ef!important}.progress span{background:linear-gradient(90deg,var(--p3-blue2),var(--p3-cyan))!important}
.notice{border:1px solid #d8e7f1!important}.notice.good,.good{background:#e8f7ed!important;color:#126a35!important}.notice.bad,.bad{background:#ffe8e6!important;color:#9c1b15!important}

/* payroll/admin/pricing */
.subhead{background:#e8f2fa!important;color:var(--p3-text)!important;border:1px solid var(--p3-border)!important}
.status-ready{color:#11843b!important}.status-missing{background:#ffe8e6!important;color:#b42318!important}
.station{background:#f7fafc!important;border-color:var(--p3-border)!important}
.topbar a{font-weight:700!important}

/* whatsapp */
.topbar .status{color:#fff!important;background:#ffffff18!important;border-color:#ffffff42!important}
.tabs{background:#fff!important;border-bottom-color:var(--p3-border)!important}
.tab{color:var(--p3-muted)!important;font-weight:700!important}
.tab.active{color:var(--p3-blue)!important;border-bottom-color:var(--p3-blue)!important;background:#fff!important}
.customers-panel,.conversation-header,.composer{background:#fff!important}
.customer.selected{background:#e9f4fb!important}
.mode-controls{background:#f5f8fb!important}
.mode-controls button.active{background:var(--p3-blue)!important;color:#fff!important}

/* tracking */
body .board{border-color:#cbdbe6!important;box-shadow:0 4px 14px #17324d12!important}
body .tbl thead th{background:var(--p3-navy)!important;color:#fff!important;border-right-color:#294e6e!important}
body .tbl td{border-right-color:#d8e3ea!important;border-bottom-color:#d8e3ea!important}
body .tbl td.customer{background:#fff!important;color:var(--p3-text)!important}
body .tbl td.customer b{color:var(--p3-text)!important}
body .cell.inactive{background:#f3f7fa!important;color:#8aa0af!important}
body .cell.passed.sales{background:#78dfe7!important;color:#061720!important}
body .cell.passed.designer{background:#64d4e1!important;color:#061720!important}
body .cell.passed.print{background:#4dbfe0!important;color:#061720!important}
body .cell.passed.production{background:#349ed4!important;color:#fff!important}
body .cell.passed.packaging{background:#1769aa!important;color:#fff!important}
body .cell.passed.collection{background:#0f8b57!important;color:#fff!important}
body .cell.current{box-shadow:inset 0 0 0 3px #66efff,0 0 10px #1ecce044!important}
body .searchbox input{background:#ffffff18!important;color:#fff!important;border-color:#ffffff55!important}
body .searchbox input::placeholder{color:#d8e7f3!important}
body .stat{background:#ffffff10!important;border-color:#ffffff42!important}
body .clock{color:#d9f6ff!important}
@media(max-width:900px){.top,.topbar{padding-left:14px!important;padding-right:14px!important}}

/* Final button overrides - must stay after generic button rule */
.head-actions #headBtn.admin-back{
  background:linear-gradient(180deg,#8d3be0,#6124b3)!important;
  color:#fff!important;
  border:0!important;
  border-radius:10px!important;
  font-weight:700!important;
  box-shadow:0 3px 10px #6124b322!important;
}
.head-actions #headBtn.staff-logout{
  background:#687786!important;
  color:#fff!important;
  border:0!important;
  border-radius:10px!important;
  font-weight:700!important;
}
#createJobBtn,.create button,
#pullBox button{
  background:linear-gradient(180deg,var(--p3-blue2),var(--p3-blue))!important;
  color:#fff!important;
}
#finishBtn.complete,.actions #finishBtn{
  background:linear-gradient(180deg,#18b75b,#0b8f43)!important;
  color:#fff!important;
}
.actions #returnBtn{
  background:#687786!important;
  color:#fff!important;
}
.sales-tools a{
  background:linear-gradient(180deg,#18a9c8,#0e819f)!important;
  color:#fff!important;
}
.top .back{
  background:linear-gradient(180deg,#8d3be0,#6124b3)!important;
  color:#fff!important;
  border:0!important;
}


/* =========================================================
   PROJECT 3 - FINAL SUMMARY / KPI CARDS
   Clean minimal style used across department + sales screens
   ========================================================= */
.department-page .stats,
.sales-page .grid,
.sales-page .commission-cards{
  gap:14px!important;
}
.department-page .stats{
  margin-bottom:16px!important;
}
.department-page .stats .stat,
.sales-page .grid .card.stat,
.sales-page .commission-cards .card.stat{
  position:relative!important;
  min-height:96px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  border:1px solid #d7e3ec!important;
  background:#fff!important;
  box-shadow:0 4px 12px rgba(16,47,77,.06)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  overflow:hidden!important;
}
.department-page .stats .stat::before,
.sales-page .grid .card.stat::before,
.sales-page .commission-cards .card.stat::before{
  content:""!important;
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;
  height:5px!important;
  background:#1b75bc!important;
}
.department-page .stats .stat span,
.sales-page .grid .card.stat,
.sales-page .commission-cards .card.stat span{
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:700!important;
  color:#244566!important;
  letter-spacing:.2px!important;
}
.department-page .stats .stat b,
.sales-page .grid .card.stat b,
.sales-page .commission-cards .card.stat b{
  display:block!important;
  margin:7px 0 0!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:700!important;
  color:#12385d!important;
}
.department-page .stats .stat.good{
  background:#eefaf1!important;
  border-color:#cae9d3!important;
}
.department-page .stats .stat.good::before{background:#1f9d4c!important}
.department-page .stats .stat.good b{color:#14833d!important}
.department-page .stats .stat.bad{
  background:#fff0ef!important;
  border-color:#f2d0cd!important;
}
.department-page .stats .stat.bad::before{background:#d92d20!important}
.department-page .stats .stat.bad b{color:#c61d14!important}
.department-page .stats .stat.done{
  background:#f7fbff!important;
  border-color:#d8e7f3!important;
}
.department-page .stats .stat.done::before{background:#1b75bc!important}
.department-page .stats .stat.comm{
  background:#f6f0ff!important;
  border-color:#dfd0f8!important;
}
.department-page .stats .stat.comm::before{background:#7b2fc7!important}
.department-page .stats .stat.comm b{color:#6f2bc0!important}
.department-page .stats .stat.month-total{
  background:#f2eaff!important;
  border-color:#d7c3f4!important;
}
.department-page .stats .stat.month-total::before{background:#8b35d4!important}
.department-page .stats .stat.month-total b{color:#6524ad!important}

/* Sales desk KPI cards */
.sales-page .grid .card.stat::before{background:#1b75bc!important}
.sales-page .commission-cards .card.stat{
  background:#f6f0ff!important;
  border-color:#dfd0f8!important;
}
.sales-page .commission-cards .card.stat::before{background:#7b2fc7!important}
.sales-page .commission-cards .card.stat b{color:#6f2bc0!important}

/* softer hover, no jumpy layout */
.department-page .stats .stat,
.sales-page .grid .card.stat,
.sales-page .commission-cards .card.stat{
  transition:box-shadow .18s ease,border-color .18s ease!important;
}
.department-page .stats .stat:hover,
.sales-page .grid .card.stat:hover,
.sales-page .commission-cards .card.stat:hover{
  box-shadow:0 7px 18px rgba(16,47,77,.09)!important;
  border-color:#c7d8e4!important;
}

@media(max-width:900px){
  .department-page .stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .department-page .stats .stat,
  .sales-page .grid .card.stat,
  .sales-page .commission-cards .card.stat{
    min-height:86px!important;
    padding:13px 12px!important;
  }
  .department-page .stats .stat b,
  .sales-page .grid .card.stat b,
  .sales-page .commission-cards .card.stat b{
    font-size:24px!important;
  }
}


/* =========================================================
   PROJECT 3 - BLACK / GRAPHITE FINAL THEME
   ========================================================= */
:root{
  --p3-bg:#070a0e!important;
  --p3-card:#111820!important;
  --p3-text:#f5f7fa!important;
  --p3-muted:#9eafbd!important;
  --p3-border:#27323d!important;
  --p3-navy:#07111c!important;
}
html,body{background:#070a0e!important;color:#f5f7fa!important}
body{
  background:
    radial-gradient(circle at top right,#0c2740 0,#070a0e 32%,#070a0e 100%)!important;
}
.top,.topbar{
  background:linear-gradient(100deg,#05080c 0%,#0b2943 54%,#0b6db8 100%)!important;
  border-bottom:1px solid #163f60!important;
}
.card,.panel,.settings-card,.section,.tableWrap,.head{
  background:#111820!important;
  color:#f5f7fa!important;
  border-color:#27323d!important;
  box-shadow:0 6px 18px #00000042!important;
}
h1,h2,h3,h4,.head h2,.panel-title h3,.panel h2,.card h2,.card h3{
  color:#f5f7fa!important;
}
.sub,.muted,.small,.hint,.panel-title p,.footer,.empty{
  color:#9eafbd!important;
}
input,select,textarea{
  background:#0b1118!important;
  color:#f5f7fa!important;
  border-color:#344250!important;
}
input::placeholder,textarea::placeholder{color:#718291!important}
input:focus,select:focus,textarea:focus{
  background:#0d151e!important;
  border-color:#2386d1!important;
}
table,tbody,tr{background:transparent!important}
th{
  background:#17212b!important;
  color:#f5f7fa!important;
  border-color:#2a3743!important;
}
td{
  color:#e7edf2!important;
  border-color:#27323d!important;
}
tr:hover{background:#151f29!important}
tr.jobrow:hover{background:#151f29!important}
tr.jobrow.selected{background:#102a3d!important}
.actionbar,.mode-controls{
  background:#0d141c!important;
  border-color:#27323d!important;
}
.tabs{
  background:#0b1118!important;
  border-color:#27323d!important;
}
.tabs .tab,.tabs button{
  background:#151e27!important;
  color:#d8e3ec!important;
  border:1px solid #2b3946!important;
}
.tabs .tab.active,.tabs button.active{
  background:linear-gradient(180deg,#137bd0,#0d5fa9)!important;
  color:#fff!important;
  border-color:#1f83d5!important;
}
.station{
  background:#0d141c!important;
  border-color:#2a3743!important;
}
.customer.selected{background:#11283a!important}
.customers-panel,.conversation-header,.composer{
  background:#0e151d!important;
  border-color:#27323d!important;
}
.conversation-panel{background:#0a0f15!important}
.settings-card .system-item{
  background:#0d141c!important;
  border-color:#27323d!important;
}
.notice{
  background:#102333!important;
  color:#dce9f3!important;
  border-color:#21425a!important;
}
.notice.good,.good{background:#0d2b1b!important;color:#82e6a8!important;border-color:#23593a!important}
.notice.bad,.bad{background:#341313!important;color:#ff9c96!important;border-color:#6c2926!important}
.subhead{background:#16222d!important;color:#f5f7fa!important;border-color:#2b3946!important}

/* Department KPI cards */
.department-page .stats .stat,
.sales-page .grid .card.stat,
.sales-page .commission-cards .card.stat{
  background:#111820!important;
  border-color:#2a3743!important;
  box-shadow:0 5px 16px #00000045!important;
}
.department-page .stats .stat span,
.sales-page .grid .card.stat,
.sales-page .commission-cards .card.stat span{
  color:#c9d7e2!important;
}
.department-page .stats .stat b,
.sales-page .grid .card.stat b,
.sales-page .commission-cards .card.stat b{
  color:#ffffff!important;
}
.department-page .stats .stat.good{
  background:#0d2116!important;
  border-color:#23563a!important;
}
.department-page .stats .stat.good b{color:#55df8b!important}
.department-page .stats .stat.bad{
  background:#2a1111!important;
  border-color:#692c28!important;
}
.department-page .stats .stat.bad b{color:#ff6b63!important}
.department-page .stats .stat.done{
  background:#101c28!important;
  border-color:#25435d!important;
}
.department-page .stats .stat.done b{color:#72bdf4!important}
.department-page .stats .stat.comm,
.department-page .stats .stat.month-total,
.sales-page .commission-cards .card.stat{
  background:#20132e!important;
  border-color:#583176!important;
}
.department-page .stats .stat.comm b,
.department-page .stats .stat.month-total b,
.sales-page .commission-cards .card.stat b{
  color:#c886ff!important;
}

/* Tracking grid dark treatment */
body .tbl td.customer{
  background:#111820!important;
  color:#f5f7fa!important;
}
body .tbl td.customer b{color:#fff!important}
body .cell.inactive{
  background:#151f29!important;
  color:#6f8494!important;
}
body .tbl td{border-color:#27323d!important}
body .board{border-color:#283744!important;background:#0d141c!important}
body .searchbox input{
  background:#0b1118!important;
  border-color:#36536a!important;
  color:#fff!important;
}

/* Buttons */
.head-actions #headBtn.admin-back,
.top .back{
  background:linear-gradient(180deg,#8c38d8,#5e22a3)!important;
}
button.secondary,.returnbtn,.grey,.head-actions #headBtn.staff-logout{
  background:#3d4853!important;
}

/* scrollbars */
*{scrollbar-color:#3b4d5c #0b1118}

/* Department-wide read-only tracking shortcut */
.tracking-view-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:10px 16px!important;
  border-radius:10px!important;
  text-decoration:none!important;
  background:linear-gradient(180deg,#18a9c8,#0e819f)!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  box-shadow:0 3px 10px #0e819f33!important;
}
.tracking-view-btn:hover{filter:brightness(.96)!important}