:root{
  --ink:#14201F; --paper:#E8ECEA; --paper-raised:#F4F6F5;
  --copper:#C97A3D; --copper-deep:#A8622D; --teal:#1F6F64; --teal-deep:#154F47;
  --line:#C2CCC8; --line-soft:#D6DDDA; --danger:#A63D2F; --success:#3F7D5C; --muted:#5C6B67;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; min-height:100vh; font-size:calc(14px * var(--fs, 1.3)); }
button, input, select, textarea{ font-size:inherit; }
body[dir="rtl"]{ font-family:'IBM Plex Sans Arabic',sans-serif; }
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; }
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3{ font-family:'Cairo',sans-serif; }
a{color:inherit;} button{font-family:inherit;cursor:pointer;} input,select{font-family:inherit;}

.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; background:var(--ink); color:var(--paper); flex-wrap:wrap; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{ width:28px;height:28px; border:2px solid var(--copper); border-radius:50%; position:relative; flex-shrink:0; }
.brand .mark::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--copper); }
.brand-name{ font-family:'Space Grotesk',sans-serif; font-size:calc(18px * var(--fs, 1.3)); font-weight:600; }
body[dir="rtl"] .brand-name{ font-family:'Cairo',sans-serif; }
.topbar-right{ display:flex; gap:10px; align-items:center; }
.lang-btn, .logout-btn{ background:transparent; border:1px solid #3A4B47; color:#C7D3CF; border-radius:8px; padding:8px 14px; font-size:calc(13px * var(--fs, 1.3)); }
.lang-btn:hover, .logout-btn:hover{ filter:brightness(1.2); }

.stage{ max-width:1180px; margin:0 auto; padding:28px; }
.admin-layout{ display:flex; gap:22px; align-items:flex-start; }
.rail{ width:190px; flex-shrink:0; background:var(--paper-raised); border:1px solid var(--line-soft); }
.rail-item{ padding:14px 16px; font-size:calc(14px * var(--fs, 1.3)); border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; color:var(--muted); cursor:pointer;}
.rail-item.on{ color:var(--ink); font-weight:600; border-inline-start:3px solid var(--copper); background:#fff; }
.rail-dot{ width:7px;height:7px;border-radius:50%; background:currentColor; flex-shrink:0; }
.admin-main{ flex:1; min-width:0; }
.admin-panel{ display:none; } .admin-panel.on{ display:block; }
.admin-header{ margin-bottom:20px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.admin-header h1{ font-size:calc(24px * var(--fs, 1.3)); margin:0 0 4px; } .admin-header p{ margin:0; color:var(--muted); font-size:calc(13.5px * var(--fs, 1.3)); }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat{ background:#fff; border:1px solid var(--line-soft); padding:16px; }
.stat .label{ font-size:calc(12px * var(--fs, 1.3)); color:var(--muted); margin-bottom:8px; }
.stat .value{ font-size:calc(24px * var(--fs, 1.3)); font-weight:600; font-family:'Space Grotesk',sans-serif; }
body[dir="rtl"] .stat .value{ font-family:'Cairo',sans-serif; }
.stat.warn .value{ color:var(--danger); } .stat.good .value{ color:var(--success); }

.panel{ background:#fff; border:1px solid var(--line-soft); margin-bottom:22px; }
.panel-head{ padding:14px 18px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.panel-head h2{ font-size:calc(16px * var(--fs, 1.3)); margin:0; }
.svc-bars{ padding:18px; display:flex; flex-direction:column; gap:14px; }
.svc-bar-row{ display:flex; align-items:center; gap:12px; }
.svc-name{ width:100px; flex-shrink:0; font-size:calc(13px * var(--fs, 1.3)); }
.svc-track{ flex:1; background:var(--paper); height:10px; }
.svc-fill{ height:100%; }
.svc-amt{ font-size:calc(13px * var(--fs, 1.3)); text-align:end; font-variant-numeric:tabular-nums; }
.svc-amt-block{ width:120px; flex-shrink:0; text-align:end; }
.svc-count{ font-size:calc(11px * var(--fs, 1.3)); color:var(--muted); margin-top:2px; }

table{ width:100%; border-collapse:collapse; font-size:calc(13.5px * var(--fs, 1.3)); }
th{ text-align:start; padding:10px 18px; color:var(--muted); font-weight:500; font-size:calc(12px * var(--fs, 1.3)); border-bottom:1px solid var(--line-soft); }
td{ padding:11px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tr.clickable{ cursor:pointer; } tr.clickable:hover{ background:var(--paper-raised); }
.pill{ display:inline-block; padding:3px 9px; font-size:calc(11.5px * var(--fs, 1.3)); font-weight:600; }
.pill.overdue{ background:#DDEBE3; color:var(--success); }
.pill.paid{ background:#F4E1DC; color:var(--danger); }
.pill.due{ background:#EFE6D6; color:var(--copper-deep); }
.pill.partial{ background:#DDE9E8; color:var(--teal-deep); }
.pill.info{ background:#DCE8E6; color:var(--teal-deep); }
.svc-tags{ display:flex; gap:5px; } .svc-tag{ width:9px; height:9px; border-radius:50%; }
.row-actions{ display:flex; gap:6px; }
.icon-btn{ border:1px solid var(--line-soft); background:#fff; font-size:calc(12px * var(--fs, 1.3)); padding:5px 9px; color:var(--muted); }
.icon-btn:hover{ border-color:var(--ink); color:var(--ink); }
.icon-btn.danger:hover{ border-color:var(--danger); color:var(--danger); }
.btn{ padding:10px 16px; border:none; font-size:calc(13px * var(--fs, 1.3)); font-weight:600; }
.btn-primary{ background:var(--copper); color:#1B1208; }
.btn-outline{ background:none; border:1px solid var(--ink); color:var(--ink); }
.btn.small{ padding:7px 12px; font-size:calc(12.5px * var(--fs, 1.3)); }
.svc-chip-row{ display:flex; flex-wrap:wrap; gap:8px; padding:18px; }
.svc-chip-card{ border:1px solid var(--line-soft); padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:calc(13px * var(--fs, 1.3)); }
.svc-chip-card .dot{ width:10px;height:10px;border-radius:50%; }
.empty-note{ padding:24px 18px; color:var(--muted); font-size:calc(13px * var(--fs, 1.3)); text-align:center; }
.seg-light{ display:flex; border:1px solid var(--line); overflow:hidden; }
.seg-light button{ background:#fff; border:none; color:var(--muted); font-size:calc(12.5px * var(--fs, 1.3)); padding:8px 14px; border-inline-start:1px solid var(--line); }
.seg-light button:first-child{ border-inline-start:none; }
.seg-light button.active{ background:var(--ink); color:#fff; font-weight:600; }
.collector-card{ background:#fff; border:1px solid var(--line-soft); margin-bottom:18px; }
.collector-card-head{ padding:14px 18px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.collector-card-head .name{ font-weight:600; font-size:calc(15px * var(--fs, 1.3)); }
.collector-card-head .zone{ font-size:calc(12px * var(--fs, 1.3)); color:var(--muted); }
.collector-mini-stats{ display:flex; gap:18px; }
.collector-mini-stats div{ font-size:calc(12px * var(--fs, 1.3)); color:var(--muted); }
.collector-mini-stats b{ display:block; font-size:calc(15px * var(--fs, 1.3)); color:var(--ink); font-family:'Space Grotesk',sans-serif;}

.modal-overlay{ position:fixed; inset:0; background:rgba(20,32,31,.45); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.show{ display:flex; }
.modal{ background:#fff; width:440px; max-width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal-head{ padding:16px 20px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3{ margin:0; font-size:calc(16px * var(--fs, 1.3)); }
.modal-close{ background:none; border:none; font-size:calc(18px * var(--fs, 1.3)); color:var(--muted); }
.modal-body{ padding:20px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:calc(12.5px * var(--fs, 1.3)); color:var(--muted); margin-bottom:5px; }
.field input, .field select, .field textarea{ width:100%; padding:9px 10px; border:1px solid var(--line); font-size:calc(13.5px * var(--fs, 1.3)); background:#fff; font-family:inherit; line-height:1.5; }
.field textarea{ resize:vertical; }
.rail-badge{ margin-inline-start:auto; background:var(--copper); color:#1B1208; font-size:calc(11px * var(--fs, 1.3)); font-weight:700; padding:1px 7px; border-radius:10px; }
.rail-badge:empty{ display:none; }
.svc-pick-list{ display:flex; flex-direction:column; gap:8px; }
.svc-pick-row{ display:flex; align-items:center; gap:8px; border:1px solid var(--line-soft); padding:8px 10px; }
.svc-pick-row input[type="checkbox"]{ width:auto; }
.svc-pick-row input[type="number"]{ width:80px; padding:6px 8px; border:1px solid var(--line); }
.svc-pick-row select{ flex:1; max-width:230px; padding:6px 8px; border:1px solid var(--line); font-size:calc(12.5px * var(--fs, 1.3)); background:#fff; }
.svc-pick-row span.nm{ flex:1; font-size:calc(13px * var(--fs, 1.3)); }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--line-soft); display:flex; justify-content:flex-end; gap:10px; }
.swatch-row{ display:flex; gap:8px; }
.swatch{ width:26px;height:26px;border-radius:50%; border:2px solid transparent; cursor:pointer; }
.swatch.on{ border-color:var(--ink); }
.sub-line{ display:flex; justify-content:space-between; align-items:center; font-size:calc(13px * var(--fs, 1.3)); padding:8px 0; border-bottom:1px solid var(--line-soft); }
.sub-line .actions{ display:flex; gap:6px; }
.drawer-section-title{ font-size:calc(12.5px * var(--fs, 1.3)); color:var(--muted); font-weight:500; margin:18px 0 8px; display:flex; justify-content:space-between; align-items:center;}
.drawer-section-title:first-child{ margin-top:0; }
.detail-drawer{ position:fixed; inset-inline-end:0; top:0; height:100%; width:400px; max-width:92vw; background:#fff; box-shadow:-8px 0 24px rgba(0,0,0,.15); transform:translateX(110%); transition:transform .25s ease; z-index:90; overflow-y:auto; border-inline-start:1px solid var(--line-soft); }
body[dir="rtl"] .detail-drawer{ transform:translateX(-110%); }
body[dir="rtl"] .detail-drawer.open{ transform:translateX(0); }
.detail-drawer.open{ transform:translateX(0); }
.drawer-head{ padding:18px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:start; }
.drawer-close{ background:none;border:none;font-size:calc(20px * var(--fs, 1.3));color:var(--muted); line-height:1; }
.drawer-body{ padding:18px; }
.overlay{ position:fixed; inset:0; background:rgba(20,32,31,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:80; }
.overlay.show{ opacity:1; pointer-events:auto; }
.inv-row{ display:flex; justify-content:space-between; font-size:calc(13px * var(--fs, 1.3)); padding:8px 0; border-bottom:1px solid var(--line-soft); }
.toast{ position:fixed; bottom:20px; inset-inline-start:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 20px; font-size:calc(13px * var(--fs, 1.3)); z-index:200; display:none; }
body[dir="rtl"] .toast{ transform:translateX(50%); }
.toast.show{ display:block; }

@media (max-width:760px){
  .admin-layout{ flex-direction:column; }
  .rail{ width:100%; display:flex; overflow-x:auto; }
  .rail-item{ border-bottom:none; border-inline-end:1px solid var(--line-soft); white-space:nowrap; }
  .rail-item.on{ border-inline-start:none; border-bottom:3px solid var(--copper); }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .stage{ padding:16px; }
}

/* history of money received from a collector, shown under their card header */
.handover-log{ padding:8px 18px; font-size:calc(13px * var(--fs, 1.3)); background:#F6F3EC; border-bottom:1px solid var(--line-soft); color:var(--ink); }
.handover-log b{ display:block; margin-bottom:3px; font-size:calc(12px * var(--fs, 1.3)); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }