:root{
  --bg:#ffffff;
  --ink:#0f1113;
  --ink-soft:#5c6066;
  --line:#e6e7e9;
  --panel:#fafafa;
  --sidebar:#0f1113;
  --sidebar-ink:#e9eaec;
  --sidebar-ink-dim:#8b8f95;
  --accent:#1f6feb;
  --paid:#1a9e5c;   --paid-bg:#e9f8f0;
  --unpaid:#d64545; --unpaid-bg:#fdecec;
  --disc:#b8860b;   --disc-bg:#fbf3df;
  --recon:#2563eb;  --recon-bg:#eaf1fe;
  --free:#0d9488;   --free-bg:#e6f6f4;
  --radius:10px;
}

/* Customer coverage map */
.customer-map-page { min-width: 0; }
.map-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
}
.map-summary > div {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.map-summary > div > i {
  width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
  border-radius: 10px; color: var(--accent); background: rgba(31,111,235,.10);
}
.map-summary span { display: flex; flex-direction: column; min-width: 0; color: var(--ink-soft); font-size: 11.5px; }
.map-summary b { color: var(--ink); font: 800 21px/1.2 Manrope, sans-serif; }
.map-workspace { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.map-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); background: #fff;
}
.map-search { position: relative; flex: 1 1 320px; min-width: 180px; }
.map-search > i { position: absolute; left: 13px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--ink-soft); }
.map-search input, .map-toolbar select {
  width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--ink); font: 500 12.5px Inter, sans-serif; outline: none;
}
.map-search input { padding: 0 13px 0 37px; }
.map-toolbar select { width: 190px; padding: 0 10px; }
.map-search input:focus, .map-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,111,235,.12); }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 620px; }
.map-stage { position: relative; min-width: 0; border-right: 1px solid var(--line); }
#customerMap { height: 620px; width: 100%; background: #edf1f4; }
.map-legend {
  position: absolute; z-index: 500; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px;
  max-width: min(420px, calc(100% - 24px)); padding: 8px 10px; border: 1px solid rgba(15,17,19,.12);
  border-radius: 9px; background: rgba(255,255,255,.94); box-shadow: 0 4px 18px rgba(15,17,19,.12);
}
.map-legend span { display: inline-flex; align-items: center; gap: 5px; color: #4d5662; font-size: 10.5px; font-weight: 600; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; }
.map-directory { display: flex; min-width: 0; max-height: 620px; flex-direction: column; background: #fff; }
.map-directory > header { flex: 0 0 auto; padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.map-directory > header div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.map-directory > header b { font: 800 13.5px Manrope, sans-serif; }
.map-directory > header span { color: var(--ink-soft); font-size: 11px; }
.map-customer-list { overflow-y: auto; overscroll-behavior: contain; }
.map-customer-item { padding: 12px 13px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.map-customer-item:hover { background: var(--panel); }
.map-customer-focus { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.map-status-dot { width: 10px; height: 10px; flex: 0 0 10px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,17,19,.14); }
.map-customer-focus span { display: flex; min-width: 0; flex-direction: column; }
.map-customer-focus b { overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.map-customer-focus small { overflow: hidden; margin-top: 2px; color: var(--ink-soft); font-size: 10.8px; text-overflow: ellipsis; white-space: nowrap; }
.map-customer-focus em { overflow: hidden; margin-top: 4px; color: #77808b; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.map-customer-actions { display: flex; gap: 6px; padding: 9px 0 0 20px; }
.map-customer-actions a {
  width: 28px; height: 27px; display: grid; place-items: center; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 7px; background: #fff; font-size: 10.5px; text-decoration: none;
}
.map-customer-actions a:hover { color: var(--accent); border-color: var(--accent); background: rgba(31,111,235,.10); }
.map-no-results { display: none; padding: 36px 20px; color: var(--ink-soft); font-size: 12px; text-align: center; }
.map-no-results.show { display: flex; align-items: center; flex-direction: column; gap: 9px; }
.map-no-results i { font-size: 20px; }
.map-empty-card .empty-state { gap: 8px; }
.map-empty-card .empty-state b { color: var(--ink); font: 800 15px Manrope, sans-serif; }
.map-empty-card .empty-state span { max-width: 440px; }
.map-empty-card .btn { margin-top: 8px; }
.map-popup { display: flex; flex-direction: column; gap: 3px; padding: 2px; color: #111827; }
.map-popup > b { font: 800 13px Manrope, sans-serif; }
.map-popup > span { color: #4b5563; font-size: 11px; }
.map-popup > small { color: #6b7280; font-size: 10px; }
.map-popup > em { margin-top: 3px; font-size: 10.5px; font-style: normal; font-weight: 700; }
.map-popup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.map-popup-link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #334155 !important; border: 1px solid #d9dee5; border-radius: 6px; font-size: 10px; font-weight: 700; text-decoration: none; }
.map-popup-link:hover { color: #1565c0 !important; border-color: #1565c0; background: #edf6ff; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { color: #fff; background: #1565c0; font-weight: 800; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(21,101,192,.24); }

/* Customer service-location editor */
.customer-editor-card { max-width: 920px; }
.customer-location-field { padding-top: 4px; }
.location-field-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.location-field-heading label { margin: 0; }
.location-field-heading label .sub { display: block; margin-top: 3px; color: #7a828d; font-size: 10.5px; font-weight: 500; }
.location-save-state { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 10.5px; font-weight: 700; }
.location-save-state.has-location { color: var(--paid); border-color: rgba(26,158,92,.25); background: var(--paid-bg); }
.location-picker-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.location-picker-actions .btn:disabled { opacity: .48; cursor: not-allowed; }
.map-external-link.is-disabled { opacity: .46; pointer-events: none; }
#locPicker { width: 100%; height: 370px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #edf1f4; }
.location-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--ink-soft); }
.location-picker-footer > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.location-picker-footer b { overflow: hidden; color: #344054; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.location-picker-footer small { font-size: 10px; text-align: right; }
.customer-save-alert { display: flex; align-items: center; gap: 9px; margin: 14px 18px 0; }
.customer-save-alert > span { flex: 1; }
.customer-save-alert .btn { flex: 0 0 auto; background: #fff; }
.badge.mapped-location { color: var(--paid); background: var(--paid-bg); }
.badge.missing-location { color: #9a6700; background: #fff5dc; }

@media (max-width: 1120px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  #customerMap { height: 520px; }
  .map-directory { max-height: 390px; }
  .map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .map-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .map-summary > div { padding: 11px; }
  .map-summary > div > i { width: 32px; height: 32px; flex-basis: 32px; }
  .map-summary b { font-size: 17px; }
  .map-toolbar { align-items: stretch; flex-wrap: wrap; }
  .map-search { flex-basis: 100%; }
  .map-toolbar select { width: calc(100% - 0px); }
  .map-toolbar .btn { flex: 1; justify-content: center; }
  #customerMap { height: 430px; }
  .map-legend { left: 10px; right: 10px; bottom: 10px; }
  .location-field-heading, .location-picker-footer { align-items: stretch; flex-direction: column; }
  .location-save-state { align-self: flex-start; }
  .location-picker-footer small { text-align: left; }
  #locPicker { height: 320px; }
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand-text,.login-brand b{font-family:'Manrope',sans-serif;}
a{color:inherit; text-decoration:none;}

/* ===== Login page ===== */
.login-body{margin:0; min-height:100vh; background:#edf3f9; overflow-x:hidden;}
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;}

@keyframes fadeSlideUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

.login-card{
  width:100%; max-width:440px; padding:32px 36px 28px; background:#fff;
  border:1px solid #dfe7f0; border-radius:18px; box-shadow:0 16px 42px rgba(24,63,104,.08);
  animation:fadeSlideUp .5s ease both;
}
.login-brand{text-align:center; margin-bottom:24px;}
.login-logo{display:block; width:72px; height:72px; object-fit:contain; margin:0 auto 13px; filter:drop-shadow(0 7px 12px rgba(10,74,154,.16));}
.login-brand h1{max-width:340px; margin:0 auto 6px; color:#071d3d; font-family:'Manrope',sans-serif; font-size:22px; line-height:1.2; font-weight:800;}
.login-brand p{margin:0; color:#647995; font-size:13.5px;}
.login-card .field{margin-bottom:17px;}
.login-card .field label{margin-bottom:8px; color:#071d3d; font-size:13px; font-weight:700;}
.login-card .input-icon{min-height:49px; padding:0 14px; gap:12px; border:1px solid #d6e2f0; border-radius:12px; background:#eaf2ff;}
.login-card .input-icon:focus-within{border-color:#2875ca; box-shadow:0 0 0 3px rgba(40,117,202,.13);}
.login-card .input-icon > i{width:17px; color:#6984a5; font-size:15px;}
.login-card .input-icon input{height:47px; padding:0; color:#071d3d; font-size:13.5px;}
.login-card .input-icon input::placeholder{color:#8ba0b8;}
.field-help{display:flex; align-items:flex-start; gap:6px; margin:7px 0 0; color:#637994; font-size:11.5px; line-height:1.45;}
.field-help i{margin-top:2px; color:#6e87a3;}
.password-toggle{width:34px; height:34px; padding:0; border:0; background:transparent; color:#6984a5; cursor:pointer; flex-shrink:0; font-size:15px;}
.password-toggle:hover{color:#14579e;}
.password-toggle:focus-visible{outline:2px solid #2875ca; outline-offset:2px; border-radius:6px;}
.login-card .btn-block{min-height:49px; margin-top:3px; border:0; border-radius:12px; background:linear-gradient(90deg,#153e6d,#2365aa); color:#fff; font-size:14.5px; font-weight:700; box-shadow:0 8px 18px rgba(27,82,140,.16);}
.login-card .btn-block:hover{background:linear-gradient(90deg,#0f345f,#1b5795); box-shadow:0 10px 22px rgba(27,82,140,.22);}
.login-footer{margin-top:22px; padding-top:0; text-align:center; color:#637994; font-size:11.5px; line-height:1.4;}
.login-footer p{margin:3px 0;}
.login-footer i{margin-right:4px;}

@media (max-width:560px){
  .login-shell{align-items:flex-start; padding:18px 12px;}
  .login-card{padding:28px 20px 24px; border-radius:16px;}
  .login-logo{width:66px; height:66px; margin-bottom:12px;}
  .login-brand{margin-bottom:22px;}
  .login-brand h1{font-size:20px;}
}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.input-icon{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease;}
.input-icon:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,111,235,.12);}
.input-icon i{color:var(--ink-soft); font-size:13px; width:14px;}
.input-icon input, .input-icon select{border:none; outline:none; width:100%; font-family:'Inter',sans-serif; font-size:13.5px; background:transparent;}
.btn-block{width:100%; justify-content:center; padding:11px;}
.login-note{margin:18px 0 0; font-size:11.5px; color:var(--ink-soft); text-align:center; display:flex; align-items:center; justify-content:center; gap:6px;}
.alert{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; font-size:12.5px; font-weight:600; margin-bottom:16px;}
.alert-error{background:var(--unpaid-bg); color:var(--unpaid);}
.alert-warn{background:var(--disc-bg); color:var(--disc);}
.alert-success{background:var(--paid-bg); color:var(--paid);}
.alert-info{background:#eaf2ff; color:#285f9d;}

/* ===== App shell ===== */
.app{display:flex; min-height:100vh;}
.sidebar{width:220px; flex-shrink:0; background:var(--sidebar); color:var(--sidebar-ink); position:sticky; top:0; height:100vh; overflow:visible; transition:width .2s ease;}
.sidebar-scroll{height:100%; min-height:0; padding:22px 16px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; transition:padding .2s ease;}
.sidebar-scroll::-webkit-scrollbar{display:none;}
.sidebar.collapsed{width:72px;}
.sidebar.collapsed .sidebar-scroll{padding:22px 10px;}
.sidebar.collapsed .brand-text, .sidebar.collapsed .nav-label-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .who{display:none;}
.sidebar.collapsed .nav-item{justify-content:center; padding:10px 0;}
.sidebar.collapsed .nav-item i{margin:0;}
.sidebar.collapsed .brand{justify-content:center; padding-left:0; padding-right:0;}
.sidebar.collapsed .user-chip{justify-content:center; padding:8px 0;}
.sidebar.collapsed .logout-link{justify-content:center;}
.sidebar-toggle{
  position:absolute; top:18px; right:-12px; width:24px; height:24px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft); display:flex;
  align-items:center; justify-content:center; cursor:pointer; font-size:10px; z-index:5;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.sidebar{position:sticky; top:0;} /* keep for toggle positioning context */
.brand{display:flex; align-items:center; gap:10px; padding:2px 6px 22px 6px;}
.brand-mark-img{width:36px; height:36px; object-fit:contain; flex-shrink:0;}
.brand-text{line-height:1.1;}
.brand-text b{display:block; font-size:15px; font-weight:800; color:#fff; letter-spacing:.2px;}
.brand-text span{font-size:10.5px; color:var(--sidebar-ink-dim); letter-spacing:.6px; text-transform:uppercase;}
.nav-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--sidebar-ink-dim); margin:14px 10px 6px;}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; color:var(--sidebar-ink-dim); font-size:13.5px; font-weight:500; cursor:pointer; transition:.15s;}
.nav-item i{width:16px; text-align:center; font-size:14px;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:#fff; color:#0f1113; font-weight:700;}
.notification-nav-badge{margin-left:auto; min-width:19px; height:19px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#e34b4b; color:#fff; font-size:9px; font-weight:800; line-height:1; box-shadow:0 0 0 2px rgba(227,75,75,.12);}
.notification-nav-badge.is-hidden{display:none;}
.sidebar.collapsed .notification-nav-badge{position:absolute; top:3px; right:5px; min-width:16px; height:16px; padding:0 4px; font-size:8px;}
.sidebar.collapsed .nav-item[data-notification-link]{position:relative;}
.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px 10px;}
.user-chip .avatar{width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11.5px; flex-shrink:0; overflow:hidden;}
.user-chip .avatar img{width:100%; height:100%; object-fit:cover;}
.user-chip .who b{display:block; font-size:12.5px; color:#fff;}
.user-chip .who span{font-size:10.5px; color:var(--sidebar-ink-dim); text-transform:capitalize;}
.logout-link{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--sidebar-ink-dim); font-size:13px; font-weight:600; margin-top:6px;}
.logout-link:hover{background:rgba(255,255,255,.06); color:#fff;}

.main{flex:1; padding:26px 30px 40px; min-width:0;}

/* ===== Header ===== */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px;}
.topbar h1{font-size:20px; font-weight:800; margin:0;}
.topbar p{margin:2px 0 0; font-size:12.5px; color:var(--ink-soft);}
.top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.btn{display:inline-flex; align-items:center; gap:7px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; padding:9px 14px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .15s ease;}
.btn:hover{background:var(--panel);}
.btn:active{transform:scale(.97);}
.btn i{font-size:12px;}
.btn-dark{background:#0f1113; color:#fff; border-color:#0f1113;}
.btn-dark:hover{background:#000;}
.btn-accent{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-accent:hover{background:#1a5fc9;}
.btn-green{background:var(--paid); color:#fff; border-color:var(--paid);}
.btn-green:hover{background:#158049;}
.btn-red{background:var(--unpaid); color:#fff; border-color:var(--unpaid);}
.btn-red:hover{background:#b93838;}
.btn-sm{padding:6px 10px; font-size:11.5px;}

/* ===== Stat cards ===== */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px;}
.stat{border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; position:relative; overflow:hidden; animation:fadeSlideUp .45s ease both; transition:box-shadow .18s ease;}
.stat:hover{box-shadow:0 4px 16px rgba(15,17,19,.06);}
.stat:nth-child(1){animation-delay:.02s;} .stat:nth-child(2){animation-delay:.07s;}
.stat:nth-child(3){animation-delay:.12s;} .stat:nth-child(4){animation-delay:.17s;}
.stat:nth-child(5){animation-delay:.22s;}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;}
.stat.c1::before{background:var(--accent);} .stat.c2::before{background:var(--paid);}
.stat.c3::before{background:var(--unpaid);} .stat.c4::before{background:var(--disc);}
.stat.c5::before{background:var(--free);}
.stat-icon{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12.5px;}
.stat.c1 .stat-icon{background:rgba(31,111,235,.1); color:var(--accent);}
.stat.c2 .stat-icon{background:var(--paid-bg); color:var(--paid);}
.stat.c3 .stat-icon{background:var(--unpaid-bg); color:var(--unpaid);}
.stat.c4 .stat-icon{background:var(--disc-bg); color:var(--disc);}
.stat.c5 .stat-icon{background:var(--free-bg); color:var(--free);}
.stat .lbl{font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.3px; max-width:75%;}
.stat .val{font-size:21px; font-weight:800; margin-top:6px;}
.collector-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
.collector-work-strip{margin-top:-8px;}
.collector-work-strip a{color:var(--accent); font-weight:700;}

/* ===== Panel / table ===== */
.panel{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;}
.panel-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line);}
.filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.chip{padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--line); color:var(--ink-soft); background:#fff;}
.chip.active{background:#0f1113; color:#fff; border-color:#0f1113;}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:7px 12px; font-size:12.5px; color:var(--ink-soft); min-width:180px;}
.search input{border:none; outline:none; font-family:'Inter',sans-serif; font-size:12.5px; width:100%; background:transparent;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:12.8px;}
thead th{text-align:left; padding:11px 16px; background:var(--panel); color:var(--ink-soft); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; font-weight:700; border-bottom:1px solid var(--line); white-space:nowrap;}
tbody td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafbfc;}
.cust{font-weight:700;} .sub{color:var(--ink-soft); font-size:11.5px;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge.paid{background:var(--paid-bg); color:var(--paid);}
.badge.unpaid{background:var(--unpaid-bg); color:var(--unpaid);}
.badge.disconnected{background:var(--disc-bg); color:var(--disc);}
.badge.reconnected{background:var(--recon-bg); color:var(--recon);}
.badge.free{background:var(--free-bg); color:var(--free);}
.badge.pullout{background:var(--disc-bg); color:var(--disc);}
.badge i{font-size:9px;}

.row-actions{display:flex; gap:6px;}
.mini-btn{width:29px; height:29px; border-radius:7px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11.5px;}
.mini-btn.edit{color:var(--accent);} .mini-btn.del{color:var(--unpaid);} .mini-btn.pay{color:var(--paid);}
.equipment-customer-notice{justify-content:flex-start;}
.equipment-customer-notice span{flex:1;}
.equipment-customer-link{color:var(--accent); font-weight:700;}
.equipment-customer-link:hover{text-decoration:underline;}
.equipment-row-action{min-height:29px; display:inline-flex; align-items:center; gap:5px; padding:5px 8px; color:var(--ink-soft); border:1px solid var(--line); border-radius:7px; background:#fff; font:600 10.5px Inter,sans-serif; white-space:nowrap; cursor:pointer;}
.equipment-row-action:hover{color:var(--ink); background:var(--panel);}
.equipment-row-action.assign{color:var(--accent);}
.equipment-row-action.danger{color:var(--unpaid);}
.inventory-page{background:#f7f9fc;}
.inventory-low-alert span{flex:1; line-height:1.45;}
.inventory-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:11px; margin-bottom:16px;}
.inventory-kpis article{min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:14px 15px; border:1px solid #e1e7ef; border-radius:11px; background:#fff; box-shadow:0 2px 5px rgba(16,33,59,.025);}
.inventory-kpis article>i{width:34px; height:34px; display:grid; place-items:center; border-radius:9px; font-size:12px;}
.inventory-kpis article>i.blue{color:#2563eb;background:#eaf1ff}.inventory-kpis article>i.green{color:#15945d;background:#e8f7f1}.inventory-kpis article>i.teal{color:#078f83;background:#e3f7f4}.inventory-kpis article>i.amber{color:#b87908;background:#fff3d4}.inventory-kpis article>i.red{color:#d64545;background:#fdecec}
.inventory-kpis span{overflow:hidden; color:#59697d; font-size:10.5px; font-weight:700; white-space:nowrap; text-overflow:ellipsis;}
.inventory-kpis span small{display:block; margin-top:2px; color:#97a2b0; font-size:8.5px; font-weight:500;}
.inventory-kpis article>b{color:#10213b; font:800 20px Manrope,sans-serif;}
.inventory-kpis-simple{grid-template-columns:repeat(4,minmax(0,1fr));}
.inventory-kpis article.needs-attention{border-color:#f1cf82;background:#fffaf0;}
.inventory-add-actions{display:flex;gap:8px;}
.inventory-how-it-works{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px;padding:13px 18px;border:1px solid #dbe5f0;border-radius:11px;background:#fff;color:#607087;}
.inventory-how-it-works>div{display:flex;align-items:center;gap:9px;font-size:11px;}
.inventory-how-it-works>div>i{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#edf4ff;color:#2563eb;}
.inventory-how-it-works b{display:block;color:#10213b;font-size:11.5px;}
.inventory-flow-arrow{color:#b3beca;font-size:10px;}
.inventory-primary-number{font:800 17px Manrope,sans-serif;}
.inventory-history-details{padding:0;overflow:hidden;margin-bottom:16px;}
.inventory-history-details>summary{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;cursor:pointer;list-style:none;}
.inventory-history-details>summary::-webkit-details-marker{display:none;}
.inventory-history-details>summary span{display:flex;flex-direction:column;gap:3px;}
.inventory-history-details>summary small{color:var(--ink-soft);font-size:10.5px;font-weight:500;}
.inventory-history-details>summary>i{color:#7a889a;font-size:11px;transition:transform .2s;}
.inventory-history-details[open]>summary>i{transform:rotate(180deg);}
.inventory-history-details[open]>summary{border-bottom:1px solid var(--line);}
.inventory-stock-panel,.inventory-detail-panel{margin-bottom:16px;}
.quantity-stock-panel,.quantity-history-panel{margin-bottom:16px;}
.quantity-stock-table td>.sub,.quantity-history-panel td>.sub{display:block; margin-top:3px;}
.quantity-balance{font-size:12.5px; white-space:nowrap;}
.equipment-row-action:disabled{cursor:not-allowed; opacity:.45;}
.inventory-mode-fields{padding:12px; border:1px solid #e4e9ef; border-radius:9px; background:#fafbfd;}
.inventory-mode-fields[hidden]{display:none!important;}
.nested-form-grid{gap:11px;}
.nested-form-grid .field.full{grid-column:1/-1;}
.inventory-stock-table td>.sub,.inventory-detail-panel td>.sub{display:block; margin-top:3px;}
.inventory-utilization{display:flex; align-items:center; gap:7px; min-width:105px;}
.inventory-utilization>span{width:67px; height:6px; overflow:hidden; border-radius:999px; background:#e7edf4;}
.inventory-utilization>span i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#0d9488);}
.inventory-utilization>b{font-size:9.5px;}
.reorder-form{display:flex; align-items:center; gap:5px;}
.reorder-form input{width:60px; padding:6px 7px; border:1px solid var(--line); border-radius:7px; font:600 11px Inter,sans-serif;}
.inventory-filter-head{align-items:flex-end;}
.inventory-search-form{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.inventory-search-form select{min-height:34px; padding:0 9px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink-soft); font:600 11px Inter,sans-serif;}
.inventory-search-form .search{min-height:34px; padding-top:0; padding-bottom:0;}
.inventory-movement-panel{margin-top:0;}
.inventory-state-change{display:inline-flex; align-items:center; gap:6px; color:#617187; font-size:10px; font-weight:600; text-transform:capitalize; white-space:nowrap;}
.inventory-state-change i{font-size:8px; color:#9aa6b4;}
.row-actions form{display:inline-flex; margin:0;}
.modal-context{margin:-7px 0 16px; padding:9px 11px; color:var(--ink-soft); border-radius:8px; background:var(--panel); font-size:12px; font-weight:700;}
.billing-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
.document-actions{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.collector-report-card{max-width:760px;}
.report-form-intro{grid-column:1/-1; display:flex; align-items:flex-start; gap:10px; margin-bottom:2px; padding:12px 13px; color:#43546b; border:1px solid #dce6f2; border-radius:9px; background:#f4f8fd;}
.report-form-intro>i{margin-top:2px; color:var(--accent);}
.report-form-intro b,.report-form-intro span{display:block;}
.report-form-intro b{margin-bottom:3px; color:var(--ink); font-size:12px;}
.report-form-intro span{font-size:11px; line-height:1.5;}
.field-help.text-danger{color:var(--unpaid);}
.report-submit-success{display:flex; align-items:center; gap:9px;}
.report-submit-success>span{flex:1;}
.report-submit-success .btn{flex:0 0 auto; background:#fff;}
.report-status-strip{grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:16px;}
.admin-report-strip{grid-template-columns:repeat(4,minmax(0,1fr));}
.receipt-link{display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-size:10.5px; font-weight:700; white-space:nowrap;}
.receipt-link:hover{text-decoration:underline;}
.dashboard-assignment-alert{margin-top:0;}
.dashboard-assignment-alert span{flex:1;}
.expense-claim-stats,.expense-admin-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
.expense-admin-stats{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:850px;}
.stat-meta{display:block; margin-top:3px; color:var(--ink-soft); font-size:10px;}
.expense-workflow-note span{line-height:1.5;}
.claim-submitted-at,.claim-description,.claim-review-note,.claim-origin{display:block; margin-top:3px; line-height:1.4;}
.claim-description{max-width:360px; white-space:normal;}
.claim-origin{color:#536987; font-size:9.5px;}
.expense-claims-panel{margin-bottom:16px;}
.claim-review-actions{display:grid; gap:7px; min-width:310px;}
.claim-review-actions form{display:grid; grid-template-columns:minmax(135px,1fr) auto; gap:6px; align-items:center;}
.claim-review-actions input{min-width:0; width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:500 10.5px Inter,sans-serif;}
.claim-reject-btn{color:var(--unpaid); background:var(--unpaid-bg); border-color:#f4cece;}
.empty-state.compact{padding:24px 16px;}
.empty-state.compact i{font-size:20px; color:var(--paid);}

/* ===== In-app notifications ===== */
.notification-summary{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}
.notification-summary>div{display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:12px;}
.notification-summary>div b{min-width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--accent); font-size:11px;}
.notification-summary nav{display:flex; gap:7px;}
.notification-panel{overflow:hidden;}
.notification-item{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:13px; padding:15px 17px; border-bottom:1px solid var(--line); transition:background .15s;}
.notification-item:last-child{border-bottom:0;}
.notification-item.unread{background:#f7faff;}
.notification-item:hover{background:#f8fafc;}
.notification-icon{width:38px; height:38px; display:grid; place-items:center; border-radius:11px; font-size:13px;}
.notification-icon.info{color:#2563eb;background:#eaf2ff}.notification-icon.success{color:var(--paid);background:var(--paid-bg)}.notification-icon.warning{color:#b87808;background:#fff3d4}.notification-icon.danger{color:var(--unpaid);background:var(--unpaid-bg)}.notification-icon.finance{color:#078f83;background:#e3f7f4}
.notification-copy{min-width:0;}
.notification-copy>div{display:flex; align-items:center; gap:7px;}
.notification-copy b{font-size:12.5px;}
.notification-copy p{margin:3px 0 4px; color:var(--ink-soft); font-size:11.5px; line-height:1.45;}
.notification-copy small{color:#9299a4; font-size:9.5px;}
.notification-unread-dot{width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--accent);}
.notification-actions{display:flex; align-items:center; gap:7px;}
.notification-actions form{margin:0;}
.notification-toast{position:fixed; right:22px; bottom:22px; z-index:100; width:min(330px,calc(100vw - 32px)); display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid #dbe5f2; border-radius:11px; background:#fff; color:var(--ink); box-shadow:0 14px 38px rgba(15,32,55,.18); opacity:0; transform:translateY(12px); transition:.22s ease;}
.notification-toast.show{opacity:1; transform:translateY(0);}
.notification-toast>i{width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--accent);}
.notification-toast span b,.notification-toast span small{display:block;}.notification-toast span b{font-size:11.5px;}.notification-toast span small{margin-top:2px; color:var(--ink-soft); font-size:10px;}

/* ===== two column layout ===== */
.grid2{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-top:16px; align-items:start;}
.grid2.even{grid-template-columns:1fr 1fr;}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:#fff; transition:box-shadow .18s ease, transform .18s ease;}
.card:hover{box-shadow:0 4px 18px rgba(15,17,19,.06);}
.card h3{font-size:13.5px; margin:0 0 12px; display:flex; align-items:center; gap:8px;}
.feed-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center;}
.feed-item:last-child{border-bottom:none;}
.feed-avatar{width:30px; height:30px; border-radius:8px; background:#eef0f2; color:#0f1113; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0;}
.feed-txt b{font-size:12.5px;} .feed-txt p{margin:2px 0 0; font-size:11.5px; color:var(--ink-soft);}
.feed-time{margin-left:auto; font-size:10.5px; color:#a3a7ac; white-space:nowrap;}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--paid); display:inline-block; animation:pulse 1.6s infinite;}
.live-dot.pulse-strong{width:9px; height:9px; animation:pulse 0.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,158,92,.5);}70%{box-shadow:0 0 0 6px rgba(26,158,92,0);}100%{box-shadow:0 0 0 0 rgba(26,158,92,0);}}
@keyframes flashNew{0%{background:var(--paid-bg);}100%{background:transparent;}}
.feed-item.flash-new{animation:flashNew 2.5s ease-out; border-radius:8px;}

/* ===== Forms (modals + report form) ===== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-grid>.full{grid-column:1/-1;}
.form-grid .field.full{grid-column:1/-1;}
.form-grid .field label{font-size:11.5px; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:6px;}
.form-section-title{display:flex; align-items:center; gap:9px; margin:5px 0 1px; padding:11px 13px; border-radius:10px; background:#f2f6fb; color:var(--navy); font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; letter-spacing:.02em;}
.form-section-title i{color:var(--blue);}
.address-dependent-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.address-dependent-fields>.full{grid-column:1/-1;}
.address-picker-status{display:flex; align-items:center; gap:8px; margin:-2px 0 2px; padding:9px 12px; border:1px solid #dce7f3; border-radius:9px; background:#f8fbff; color:#55708d; font-size:11.5px;}
.address-picker-status.ready{border-color:#c9eadc; background:#f2fbf7; color:#187a56;}
.address-picker-status.error{border-color:#f1caca; background:#fff5f5; color:var(--unpaid);}
.address-picker-status i{width:14px; text-align:center;}
.form-subsection-label{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 1px; padding:3px 1px 0; color:var(--ink-soft);}
.form-subsection-label span{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;}
.form-subsection-label small{font-size:10.5px; color:#7890aa;}
.address-postal-field select:disabled{opacity:1; color:#55708d; background:#f3f7fb;}
.form-grid .field input, .form-grid .field select, .form-grid .field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink);
}
.view-only-tag{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); padding:5px 10px; border-radius:999px;}

.modal-overlay{position:fixed; inset:0; background:rgba(15,17,19,.45); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:12px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:22px 24px;}
.modal h3{margin:0 0 16px; font-size:15px; display:flex; align-items:center; gap:8px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

.empty-state{text-align:center; padding:40px 20px; color:var(--ink-soft);}
.empty-state i{font-size:26px; margin-bottom:10px; display:block;}

.profile-avatar-row{display:flex; align-items:center; gap:20px;}
.profile-avatar-lg{width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--line);}
.profile-avatar-placeholder{width:88px; height:88px; border-radius:50%; background:#0f1113; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; font-family:'Manrope',sans-serif; flex-shrink:0;}
.profile-avatar-actions{display:flex; flex-direction:column; gap:8px;}

.pagination{display:flex; gap:6px; padding:14px 18px; justify-content:flex-end;}
.pagination a{padding:6px 11px; border:1px solid var(--line); border-radius:7px; font-size:12px; font-weight:600; color:var(--ink-soft);}
.pagination a.active{background:#0f1113; color:#fff; border-color:#0f1113;}

/* ===== Executive dashboard ===== */
.executive-dashboard{background:#f6f8fb; min-height:100vh;}
.executive-topbar{margin-bottom:18px;}
.executive-topbar h1{font-size:24px; color:#10213b;}
.eyebrow,.section-kicker{display:block; color:#2563eb; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px;}
.reporting-period{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px; border:1px solid #e1e7ef; border-radius:8px; background:#fff; color:#607086; font-size:12px; font-weight:600;}

.executive-summary{display:flex; justify-content:space-between; align-items:center; gap:28px; padding:22px 26px; margin-bottom:14px; border-radius:14px; background:linear-gradient(115deg,#0d1d36 0%,#123966 62%,#185895 100%); color:#fff; box-shadow:0 12px 30px rgba(15,42,75,.13);}
.summary-label{display:block; margin-bottom:5px; color:#a9c8ed; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;}
.executive-summary strong{display:block; font-family:'Manrope',sans-serif; font-size:27px; line-height:1.15;}
.executive-summary p{margin:5px 0 0; color:#b9cce1; font-size:11.5px;}
.summary-health{min-width:170px; padding-left:24px; border-left:1px solid rgba(255,255,255,.16);}
.summary-health>span,.summary-health small{display:block; color:#afc6df; font-size:10.5px;}
.summary-health b{display:inline-block; margin:5px 0; padding:4px 9px; border-radius:999px; font-size:11px;}
.summary-health b.healthy{background:rgba(52,211,153,.16); color:#7ce8bd;}
.summary-health b.watch{background:rgba(251,191,36,.16); color:#f9d16f;}
.summary-health b.risk{background:rgba(248,113,113,.16); color:#f9a0a0;}

.executive-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px;}
.executive-kpi{min-width:0; padding:16px 17px; border:1px solid #e1e7ef; border-radius:12px; background:#fff; box-shadow:0 2px 4px rgba(16,33,59,.02); position:relative; overflow:hidden;}
.executive-kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:3px;}
.executive-kpi.blue::before{background:#2563eb}.executive-kpi.green::before{background:#16a36a}.executive-kpi.red::before{background:#e25555}.executive-kpi.dark::before{background:#10213b}
.kpi-heading{display:flex; align-items:center; justify-content:space-between; gap:10px; color:#66768c; font-size:10px; font-weight:700; letter-spacing:.35px; text-transform:uppercase;}
.kpi-heading i{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:11px;}
.executive-kpi.blue .kpi-heading i{color:#2563eb;background:#eaf1ff}.executive-kpi.green .kpi-heading i{color:#16a36a;background:#e8f7f1}.executive-kpi.red .kpi-heading i{color:#e25555;background:#fdecec}.executive-kpi.dark .kpi-heading i{color:#10213b;background:#edf0f4}
.executive-kpi>strong{display:block; margin:6px 0 5px; color:#10213b; font-family:'Manrope',sans-serif; font-size:21px; line-height:1.2; white-space:nowrap;}
.executive-kpi>strong.negative-value{color:#d64545;}
.executive-kpi>small{display:block; overflow:hidden; color:#7a899b; font-size:10.5px; text-overflow:ellipsis; white-space:nowrap;}
.metric-delta.positive{color:#138757}.metric-delta.negative{color:#d64545}.metric-delta.neutral{color:#7a899b}

.metric-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; border:1px solid #e1e7ef; border-radius:12px; background:#fff; overflow:hidden;}
.metric-strip>div{display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:10px; padding:13px 16px; border-right:1px solid #e8edf3;}
.metric-strip>div:last-child{border-right:0;}
.metric-strip>div>i{grid-row:1/3; width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:#f0f4f9; color:#45617f; font-size:12px;}
.metric-strip span{display:flex; justify-content:space-between; align-items:center; gap:8px; color:#69798c; font-size:10.5px;}
.metric-strip span b{color:#10213b; font-family:'Manrope',sans-serif; font-size:17px;}
.metric-strip small{color:#98a4b3; font-size:9.5px;}

.analytics-grid{display:grid; gap:14px; margin-bottom:14px;}
.primary-analytics{grid-template-columns:minmax(0,1.75fr) minmax(280px,.75fr);}
.secondary-analytics{grid-template-columns:repeat(2,minmax(0,1fr));}
.detail-analytics{grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);}
.analytics-card{min-width:0; padding:17px 18px; border:1px solid #e1e7ef; border-radius:12px; background:#fff; box-shadow:0 2px 5px rgba(16,33,59,.025);}
.analytics-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.analytics-head h2{margin:0; color:#10213b; font-family:'Manrope',sans-serif; font-size:14px;}
.analytics-head>a{align-self:center; color:#2563eb; font-size:10.5px; font-weight:700; white-space:nowrap;}
.analytics-head>a i{margin-left:4px; font-size:9px;}
.data-note{align-self:center; padding:5px 8px; border-radius:6px; background:#f3f6fa; color:#78879a; font-size:9.5px; font-weight:600;}
.chart-container{position:relative; width:100%;}
.chart-large{height:245px}.chart-medium{height:205px}.chart-doughnut{height:220px}
.native-chart{overflow:hidden; border-radius:8px; background:#fbfcfe;}
.native-chart>svg{display:block; width:100%; height:100%; font-family:'Inter',sans-serif;}
.native-chart-state{height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:24px; color:#7f8ea1; font-size:11.5px; line-height:1.45; text-align:center;}
.native-chart-state i{font-size:19px; color:#9babbd;}.native-chart-state.error i{color:var(--unpaid);}
.native-donut-layout{height:100%; display:grid; grid-template-columns:minmax(110px,145px) minmax(120px,1fr); align-items:center; justify-content:center; gap:18px; padding:16px;}
.native-donut{position:relative; width:138px; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(16,33,59,.04);}
.native-donut::after{content:""; position:absolute; inset:25%; border-radius:50%; background:#fff; box-shadow:0 0 0 1px #edf1f5;}
.native-donut>div{position:absolute; inset:25%; z-index:1; display:grid; place-content:center; text-align:center;}
.native-donut strong{color:#10213b; font:800 20px/1 Manrope,sans-serif;}.native-donut span{margin-top:4px; color:#8290a2; font-size:9px; text-transform:uppercase;}
.native-donut-legend{display:flex; min-width:0; flex-direction:column; gap:7px;}
.native-donut-legend>div{display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:6px; color:#65758a; font-size:9.5px;}
.native-donut-legend i{width:7px; height:7px; border-radius:50%;}.native-donut-legend b{color:#263950; font-size:9.5px; white-space:nowrap;}
.native-bar-list{height:100%; display:flex; justify-content:center; flex-direction:column; gap:13px; padding:10px 8px; overflow-y:auto;}
.native-bar-row>div:first-child{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px;}
.native-bar-row span{overflow:hidden; color:#40536a; font-size:10.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap;}
.native-bar-row b{color:#10213b; font-size:10px; white-space:nowrap;}.native-bar-row>div:nth-child(2){height:7px; overflow:hidden; border-radius:999px; background:#e8eef5;}
.native-bar-row>div:nth-child(2) i{display:block; height:100%; border-radius:inherit; transition:width .35s ease;}.native-bar-row small{display:block; margin-top:4px; color:#8997a8; font-size:9px;}
.chart-unavailable::after{content:attr(data-empty-message); position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#8795a6; font-size:12px; text-align:center; background:#fafbfd; border-radius:8px;}
.empty-state>b,.empty-state>span{display:block;}
.empty-state>b{margin-bottom:5px; color:var(--ink); font-size:13px;}
.empty-state>span{margin:0 auto 10px; max-width:460px; line-height:1.5;}
.empty-state>.btn{display:inline-flex; margin-top:9px;}
.health-caption{display:flex; justify-content:center; gap:14px; margin-top:4px; color:#7a899a; font-size:10.5px;}
.health-caption b{color:#138757;}

.executive-table-wrap{overflow-x:auto; margin:0 -18px -17px;}
.executive-table{font-size:11.5px;}
.executive-table thead th{padding:9px 18px; background:#f8fafc; font-size:9px;}
.executive-table tbody td{padding:11px 18px;}
.executive-table tbody tr:hover{background:#f8fbff;}
.rate-cell{display:flex; align-items:center; gap:8px; min-width:110px;}
.rate-cell>span{width:65px; height:5px; border-radius:999px; background:#e8edf3; overflow:hidden;}
.rate-cell>span i{display:block; height:100%; border-radius:inherit; background:#16a36a;}
.rate-cell>b{font-size:10px;}
.text-danger{color:#d64545; font-weight:700;}
.text-success{color:var(--paid); font-weight:700;}
.review-credit-note{display:block; margin-top:3px; color:#9a6700; font-size:9px; font-weight:600; white-space:nowrap;}
.annual-native-chart{width:100%; height:315px; margin-top:8px; overflow:hidden; border-radius:9px; background:#fbfcfe;}
.annual-native-chart>svg{display:block; width:100%; height:100%; font-family:'Inter',sans-serif;}
.leaflet-control-layers-expanded{padding:7px 9px; border:1px solid rgba(15,17,19,.14)!important; border-radius:8px!important; box-shadow:0 4px 14px rgba(15,17,19,.12)!important; font:600 10px/1.5 Inter,sans-serif;}
.leaflet-control-layers-expanded label{margin:2px 0; color:#334155;}

.operations-card{padding-bottom:7px;}
.operation-row{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #edf0f4;}
.operation-row:last-child{border-bottom:0;}
.operation-row>i{width:32px; height:32px; display:grid; place-items:center; border-radius:9px; font-size:11px;}
.operation-row>i.blue{color:#2563eb;background:#eaf1ff}.operation-row>i.amber{color:#c4830d;background:#fff5dc}.operation-row>i.red{color:#d64545;background:#fdecec}
.operation-row span b,.operation-row span small{display:block;}
.operation-row span b{color:#263950; font-size:11px;}.operation-row span small{margin-top:2px; color:#8b98a8; font-size:9.5px;}
.operation-row>strong{min-width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:#f0f4f8; color:#10213b; font-size:11px;}

.plan-table-card{margin-bottom:4px;}
.plan-performance-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
.plan-performance-item{min-width:0; padding:12px; border:1px solid #e8edf3; border-radius:9px; background:#fbfcfe;}
.plan-performance-item>div:first-child b,.plan-performance-item>div:first-child span{display:block;}
.plan-performance-item>div:first-child b{color:#10213b; font-size:11.5px;}.plan-performance-item>div:first-child span{margin-top:2px; color:#8492a3; font-size:9.5px;}
.plan-performance-item>strong{display:block; margin:10px 0 8px; color:#10213b; font-family:'Manrope',sans-serif; font-size:18px;}.plan-performance-item>strong small{font-family:'Inter',sans-serif; color:#8290a1; font-size:9.5px; font-weight:500;}
.plan-share>span{display:block; height:5px; border-radius:999px; background:#e7edf4; overflow:hidden;}.plan-share>span i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#0891b2);}
.plan-share em{display:block; margin-top:5px; color:#7d8b9c; font-size:9px; font-style:normal;}

@media (max-width:1200px){
  .executive-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .metric-strip>div:nth-child(2){border-right:0}.metric-strip>div:nth-child(-n+2){border-bottom:1px solid #e8edf3;}
  .primary-analytics,.detail-analytics{grid-template-columns:1fr;}
  .plan-performance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inventory-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:680px){
  .form-grid{grid-template-columns:1fr;}
  .address-dependent-fields{grid-template-columns:1fr;}
  .address-dependent-fields>.full{grid-column:auto;}
  .form-subsection-label{align-items:flex-start; flex-direction:column; gap:2px;}
  .executive-summary{align-items:flex-start; flex-direction:column; padding:19px 20px;}
  .summary-health{width:100%; padding:14px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.16);}
  .executive-kpis,.metric-strip,.secondary-analytics,.plan-performance-grid{grid-template-columns:1fr;}
  .metric-strip>div{border-right:0; border-bottom:1px solid #e8edf3;}.metric-strip>div:last-child{border-bottom:0;}
  .executive-kpi>strong{font-size:19px;}
  .native-donut-layout{grid-template-columns:1fr; justify-items:center; gap:10px;}.native-donut{width:112px;}.native-donut-legend{width:100%;}
  .annual-native-chart{height:260px;}
  .notification-item{grid-template-columns:36px minmax(0,1fr); align-items:start; padding:13px;}.notification-icon{width:34px;height:34px}.notification-actions{grid-column:2;}.notification-summary{align-items:flex-start; flex-direction:column;}
  .inventory-kpis{grid-template-columns:1fr;}.inventory-search-form{width:100%;}.inventory-search-form .search{flex:1; min-width:160px;}
  .inventory-how-it-works{align-items:flex-start;flex-direction:column;gap:9px;}.inventory-flow-arrow{display:none;}.inventory-add-actions{width:100%;}.inventory-add-actions .btn{flex:1;justify-content:center;}
}

@media (max-width:920px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .collector-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .expense-claim-stats,.expense-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none;}
  .grid2, .grid2.even{grid-template-columns:1fr;}
  .app{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:relative; overflow:visible;}
  .sidebar-scroll{width:100%; height:auto; flex-direction:row; align-items:center; overflow-x:auto; overflow-y:hidden; padding:12px 14px;}
  .sidebar.collapsed{width:100%;} /* collapse doesn't apply on mobile — always full nav */
  .sidebar.collapsed .sidebar-scroll{padding:12px 14px;}
  .sidebar.collapsed .nav-label-text, .sidebar.collapsed .brand-text{display:inherit;}
  .sidebar-toggle{display:none;} /* collapse only makes sense in the desktop vertical layout */
  .sidebar-foot{display:flex; flex-direction:row; align-items:center; gap:6px; margin:0 0 0 6px; padding:0; border:none; flex-shrink:0;}
  .user-chip{display:none;} /* saves space on mobile — profile is still reachable via its nav item */
  .logout-link{flex-direction:column; font-size:9.5px; gap:4px; padding:6px 10px; white-space:nowrap;}
  .nav-label{display:none;}
  .nav-item{flex-direction:column; font-size:9.5px; gap:4px; padding:6px 10px; white-space:nowrap;}
  table{font-size:11.5px;}
  thead th, tbody td{padding:9px 10px;}
  .main{padding:18px 16px 30px;}
}

/* Customer collection-priority dashboard */
.billing-priority-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.priority-card{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;gap:2px 12px;padding:15px 16px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;color:#22344b;transition:.16s ease;}
.priority-card:hover,.priority-card.active{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.08);border-color:currentColor;}
.priority-card>i{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-size:14px;}
.priority-card span{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.priority-card small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b;}
.priority-card b{font-family:'Manrope',sans-serif;font-size:21px;color:#10213b;}
.priority-card em{font-style:normal;font-size:9.5px;color:#94a3b8;}
.priority-card.due-today>i{background:#fff1df;color:#d97706;}.priority-card.due-soon>i{background:#fff8d9;color:#b77900;}
.priority-card.overdue>i{background:#feecec;color:#dc2626;}.priority-card.outstanding>i{background:#eaf1ff;color:#2563eb;}
.customer-priority-panel table{min-width:1380px;}
.customer-priority-row td:first-child{border-left:4px solid transparent;}
.customer-priority-row.overdue td:first-child{border-left-color:#dc2626;}.customer-priority-row.due-today td:first-child{border-left-color:#f97316;}
.customer-priority-row.due-soon td:first-child{border-left-color:#eab308;}.customer-priority-row.billing-paid td:first-child{border-left-color:#16a36a;}.customer-priority-row.expired td:first-child{border-left-color:#64748b;}
.customer-priority-row.overdue{background:#fffafa;}.customer-priority-row.due-today{background:#fffdf8;}
.payment-state-badge{display:inline-flex;align-items:center;gap:8px;min-width:128px;padding:7px 9px;border-radius:10px;line-height:1.15;}
.payment-state-badge>i{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;font-size:9px;background:rgba(255,255,255,.72);}
.payment-state-badge span,.payment-state-badge b,.payment-state-badge small{display:block;}
.payment-state-badge b{font-size:10.5px;}.payment-state-badge small{margin-top:2px;font-size:8.5px;opacity:.78;white-space:nowrap;}
.payment-state-badge.billing-paid{background:#e7f8ef;color:#087a49;}.payment-state-badge.due-soon{background:#fff7d6;color:#936700;}
.payment-state-badge.due-today{background:#fff0df;color:#b45309;}.payment-state-badge.overdue{background:#feeaea;color:#b91c1c;}
.payment-state-badge.open-bill{background:#edf3fa;color:#42617f;}.payment-state-badge.free{background:#e8f7fb;color:#08758a;}
.payment-state-badge.disconnected,.payment-state-badge.pullout,.payment-state-badge.expired{background:#f0f1f3;color:#59616d;}
@media(max-width:1180px){.billing-priority-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.billing-priority-strip{grid-template-columns:1fr;}}

/* Shared live customer collection tracker */
.live-tracker-pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid #bce8d5;border-radius:999px;background:#f0fdf7;color:#08734a;font-size:12px;font-weight:700;white-space:nowrap;}
.live-tracker-pill>i{width:8px;height:8px;border-radius:50%;background:#16a36a;box-shadow:0 0 0 4px rgba(22,163,106,.13);}
.live-tracker-pill.offline{border-color:#fed7aa;background:#fff7ed;color:#b45309;}.live-tracker-pill.offline>i{background:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.12);}
.collection-flow-note{display:flex;align-items:center;gap:10px;margin:14px 16px 0;padding:10px 12px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1e4f8f;font-size:12px;line-height:1.45;}
.collection-flow-note>i{font-size:15px;color:#2563eb}.collection-flow-note b{display:block;color:#163d70;}
.pending-report-state{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:6px;padding:4px 7px;border-radius:999px;background:#fff7ed;color:#b45309;font-size:10.5px;font-weight:700;}
.pending-report-state[hidden]{display:none!important;}
.customer-priority-row.tracker-changed{animation:trackerRowUpdate 1.5s ease-out;}
@keyframes trackerRowUpdate{0%{box-shadow:inset 0 0 0 999px rgba(37,99,235,.12)}100%{box-shadow:inset 0 0 0 999px rgba(37,99,235,0)}}
@media(max-width:760px){.live-tracker-pill{min-height:34px}.collection-flow-note{align-items:flex-start;}}

/* Monthly bill breakdown and oldest-first collection guidance */
.billing-account-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px;}
.billing-overview-card{padding:16px 18px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;}
.billing-overview-card span,.billing-overview-card strong,.billing-overview-card small{display:block;}
.billing-overview-card span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b;}
.billing-overview-card strong{margin:5px 0 3px;font-family:'Manrope',sans-serif;font-size:23px;color:#10213b;}
.billing-overview-card small{font-size:10px;color:#8492a6;}
.billing-overview-card.previous{border-color:#fecaca;background:#fffafa;}.billing-overview-card.previous strong{color:#b91c1c;}
.billing-overview-card.current{border-color:#bfdbfe;background:#f8fbff;}.billing-overview-card.current strong{color:#1d4ed8;}
.billing-overview-card.total{border-color:#bbf7d0;background:#f7fef9;}.billing-overview-card.total strong{color:#087a49;}
.collection-breakdown-cell{min-width:170px;}
.collection-breakdown-cell>div{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;line-height:1.6;}
.collection-breakdown-cell>div span{color:#64748b;}.collection-breakdown-cell>small{display:block;margin-top:4px;color:#9a5b00;font-weight:700;line-height:1.35;}
.collection-allocation-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;padding:12px;border:1px solid #bfdbfe;border-radius:11px;background:#f8fbff;}
.collection-allocation-guide[hidden]{display:none;}.collection-allocation-guide div{padding:8px 10px;border-radius:8px;background:#fff;}
.collection-allocation-guide span,.collection-allocation-guide b{display:block;}.collection-allocation-guide span{font-size:9.5px;color:#64748b;}.collection-allocation-guide b{margin-top:2px;color:#10213b;}
.collection-allocation-guide p{grid-column:1/-1;margin:2px 0 0;color:#1e4f8f;font-size:11px;line-height:1.45;}
@media(max-width:760px){.billing-account-overview,.collection-allocation-guide{grid-template-columns:1fr;}.collection-allocation-guide p{grid-column:1;}}