/* ============================================================
   نظام مناديب مجمدات الريف — الثيم الرسمي (RTL)
   ============================================================ */
:root{
  --gold:#D4A017; --gold-light:#E8C254; --gold-soft:#F6E9C4;
  --green:#4E7A35; --green-mid:#6FA049; --green-soft:#C9E2B0; --green-pale:#EAF4DF;
  --green-dark:#2F4A22;
  --ink:#2B2B26; --muted:#6E6E66; --line:#E7E3D7; --bg:#F6F5F0; --card:#FFFFFF;
  --red:#B24A2E; --red-soft:#F8DED7;
  --radius:16px; --shadow:0 4px 18px rgba(0,0,0,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Tajawal','Cairo',system-ui,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
  direction:rtl;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}

/* ---------- App shell ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex-shrink:0;background:linear-gradient(180deg,var(--green-dark),#3C5C2C);
  color:#EAF4DF;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.sidebar .brand img{height:46px;width:46px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}
.sidebar .brand .t{font-weight:900;font-size:16px;color:var(--gold-light);line-height:1.2}
.sidebar .brand .s{font-size:11px;color:#BCD3A6}
.nav a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;
  color:#CFE3BC;font-weight:600;font-size:14.5px;margin-bottom:3px;transition:.15s;
}
.nav a .i{font-size:18px;width:22px;text-align:center}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background:rgba(255,255,255,.14);color:#fff;font-weight:800}
.nav .sep{font-size:11px;color:#9CB987;padding:14px 13px 6px;font-weight:700;letter-spacing:.5px}
.sidebar .userbox{margin-top:auto;padding:12px;background:rgba(0,0,0,.18);border-radius:12px;font-size:13px}
.sidebar .userbox .nm{font-weight:800;color:#fff}
.sidebar .userbox .role{font-size:11px;color:var(--gold-light)}
.sidebar .userbox a{color:#E9B6A6;font-size:12px;display:inline-block;margin-top:6px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:19px;font-weight:900}
.topbar .sub{font-size:12.5px;color:var(--muted);font-weight:500}
.topbar .right{display:flex;align-items:center;gap:10px}
.content{padding:22px 24px 90px;max-width:1200px;width:100%;margin:0 auto}

/* mobile top brand (hidden on desktop) */
.mobile-top{display:none}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{font-size:15px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.section-title{font-size:16px;font-weight:900;margin:6px 0 12px;display:flex;align-items:center;gap:9px}
.section-title .bar{width:34px;height:4px;background:var(--gold);border-radius:3px}

/* ---------- KPI ---------- */
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .ic{position:absolute;left:14px;top:14px;font-size:22px;opacity:.85}
.kpi .l{font-size:12.5px;color:var(--muted);margin-bottom:7px;font-weight:600}
.kpi .v{font-size:24px;font-weight:900;color:var(--ink);line-height:1}
.kpi .c{font-size:11.5px;font-weight:800;margin-top:6px}
.kpi .c.up{color:var(--green-mid)} .kpi .c.gold{color:var(--gold)} .kpi .c.down{color:var(--red)}

/* ---------- bars chart ---------- */
.bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding:6px 4px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars .b .val{font-size:11px;font-weight:800;color:var(--muted)}
.bars .b .bar{width:100%;max-width:44px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--green-mid),var(--green));min-height:4px;transition:.3s}
.bars .b .bar.gold{background:linear-gradient(180deg,var(--gold-light),var(--gold))}
.bars .b .nm{font-size:11.5px;color:var(--muted);font-weight:600}

/* ---------- progress (target) ---------- */
.rep-row{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--green-pale);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.rep-row .info{flex:1;min-width:0}
.rep-row .info .nm{font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;gap:8px}
.rep-row .info .nm span{color:var(--muted);font-weight:800}
.track{height:9px;background:#EDEAE0;border-radius:6px;margin-top:6px;overflow:hidden}
.track .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.track .fill.green{background:linear-gradient(90deg,var(--green),var(--green-mid))}

/* ---------- pills ---------- */
.pill{font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pill-done{background:var(--green-pale);color:var(--green)}
.pill-prog{background:var(--gold-soft);color:#9C7212}
.pill-late{background:var(--red-soft);color:var(--red)}
.pill-muted{background:#ECEAE2;color:#777}
.pill-manager{background:var(--green-pale);color:var(--green)}
.pill-rep{background:var(--gold-soft);color:#9C7212}
.pill-lock{background:var(--red-soft);color:var(--red)}
.pill-role{background:#ECEAE2;color:#555}
.pill-role.role-admin{background:#e7e0f3;color:#5b3b9c}
.pill-role.role-company_manager{background:var(--green-pale);color:var(--green)}
.pill-role.role-supervisor{background:#e0eef3;color:#1d6a87}
.pill-role.role-accountant{background:var(--gold-soft);color:#9C7212}
.pill-role.role-rep{background:#ECEAE2;color:#555}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.tbl th{background:var(--green-pale);color:var(--green);font-weight:800;text-align:right;padding:11px 13px;font-size:12.5px;white-space:nowrap}
table.tbl th:first-child{border-radius:0 10px 10px 0}
table.tbl th:last-child{border-radius:10px 0 0 10px}
table.tbl td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:hover td{background:#FBFAF6}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:11px;font-weight:800;font-size:14px;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#446b2e}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#bb8c12}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green-soft);background:var(--green-pale)}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px}
.btn-block{width:100%}

/* ---------- forms ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(111,160,73,.12)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* chips (choice) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:9px 15px;font-size:13px;font-weight:700;color:var(--ink);transition:.15s}
.chip:hover{border-color:var(--green-mid)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.chip.gold.on{background:var(--gold);border-color:var(--gold)}

/* empty / banners */
.empty{text-align:center;padding:42px 20px;color:var(--muted)}
.empty .em{font-size:40px;margin-bottom:10px}
.banner{display:flex;align-items:center;gap:14px;border-radius:14px;padding:15px 18px}
.banner.green{background:var(--green-pale);border:1px solid var(--green-soft);color:var(--green)}
.banner.gold{background:var(--gold-soft);border:1px solid var(--gold-light);color:#8A6410}
.banner.red{background:var(--red-soft);border:1px solid #E79A82;color:var(--red)}
.banner .bi{font-size:26px}
.banner h4{font-size:14.5px;font-weight:900;margin-bottom:2px}
.banner p{font-size:12.5px;opacity:.9}

.flash{padding:12px 16px;border-radius:11px;margin-bottom:16px;font-weight:700;font-size:13.5px}
.flash.ok{background:var(--green-pale);color:var(--green)}
.flash.err{background:var(--red-soft);color:var(--red)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1000px 500px at 80% -10%,rgba(212,160,23,.16),transparent 60%),linear-gradient(160deg,#FBFAF5,#EEF4E6)}
.login-card{background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.12);width:100%;max-width:400px;padding:34px 30px;text-align:center}
.login-card img.logo{height:90px;margin-bottom:6px}
.login-card .cal{height:34px;opacity:.85;margin-bottom:18px;mix-blend-mode:multiply}
.login-card h2{font-size:20px;font-weight:900;margin-bottom:4px}
.login-card p.sub{font-size:13px;color:var(--muted);margin-bottom:22px}
.login-card .field{text-align:right}
.login-card .demo{margin-top:16px;font-size:11.5px;color:var(--muted);background:var(--bg);border-radius:10px;padding:10px}

/* ---------- mobile bottom nav ---------- */
.bottom-nav{display:none}

@media(max-width:880px){
  .sidebar{display:none}
  .mobile-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--green-dark);color:#fff;position:sticky;top:0;z-index:30}
  .mobile-top img{height:38px;width:38px;background:#fff;border-radius:9px;padding:2px;object-fit:contain}
  .mobile-top .t{font-weight:900;font-size:15px;color:var(--gold-light)}
  .mobile-top a.out{margin-right:auto;color:#E9B6A6;font-size:18px}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:16px}
  .content{padding:16px 14px 90px}
  .g-4{grid-template-columns:1fr 1fr}
  .g-3{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
    z-index:40;padding:6px 4px 8px;box-shadow:0 -4px 18px rgba(0,0,0,.06);
  }
  .bottom-nav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);font-weight:700;padding:5px 2px}
  .bottom-nav a .i{font-size:20px}
  .bottom-nav a.active{color:var(--green)}
}
@media(max-width:420px){
  .g-4{grid-template-columns:1fr 1fr}
}

/* ============================================================
   مكوّنات إضافية (لوحات، قوائم، معالج الزيارة، تقارير)
   ============================================================ */
.muted{color:var(--muted)}
.hint{font-size:11.5px;color:var(--muted)}
.link{font-size:12.5px;font-weight:800;color:var(--green)}
.grid{margin-bottom:16px}

/* KPI (نسخة الواجهة) */
.kpi-i{position:absolute;left:14px;top:13px;font-size:22px;opacity:.85}
.kpi-v{font-size:23px;font-weight:900;line-height:1.1}
.kpi-l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:5px}
.kpi-sub{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:5px}
.kpi .track{margin-top:9px}

/* card head */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-head h3{margin-bottom:0}

/* rep rows */
.rep-body{flex:1;min-width:0}
.rep-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rep-name{font-size:14px;font-weight:800;color:var(--ink)}
.rep-val{font-size:13px;font-weight:900;color:var(--green)}
.rep-val small{color:var(--muted);font-weight:600}
.rep-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:11.5px;color:var(--muted);font-weight:700}
.avatar.lg{width:48px;height:48px;font-size:16px}
.rep-card{display:block;transition:.15s}
.rep-card:hover{border-color:var(--green-soft);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.rep-card .rep-row{margin-bottom:0}

/* منتقي الموقع على الخريطة (Leaflet) */
.map-pick-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.map-box{height:280px;border-radius:12px;border:1px solid var(--line);margin-top:8px;z-index:0;overflow:hidden}
.leaflet-container{font-family:inherit;border-radius:12px}

/* قائمة المستخدمين (بطاقات متجاوبة بدل الجدول) */
.user-row{align-items:flex-start;margin-bottom:0;padding:14px 0;border-bottom:1px solid var(--line)}
.user-row:last-child{border-bottom:none;padding-bottom:2px}
.user-row.is-off{opacity:.55}
.user-row .rep-top{flex-wrap:wrap}

/* generic list rows */
.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.lr-title{font-size:13.5px;font-weight:800;color:var(--ink)}
.lr-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}

/* task cards */
.task-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;margin-bottom:9px;transition:.15s;background:#fff}
.task-card:hover{border-color:var(--green-soft);background:#FBFAF6}
.task-main{min-width:0}
.task-title{font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filter-bar .search{flex:1;min-width:200px;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14px}
.filter-bar select{padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14px;background:#fff}
.filter-bar .search:focus,.filter-bar select:focus{outline:none;border-color:var(--green-mid)}

/* chip active alias */
.chip.active{background:var(--green);color:#fff;border-color:var(--green)}

/* pill gold */
.pill-gold{background:var(--gold-soft);color:#9C7212}

/* key-value table */
table.kv{width:100%;border-collapse:collapse;font-size:13.5px}
table.kv td{padding:9px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.kv td:first-child{color:var(--muted);font-weight:700;width:38%;white-space:nowrap}
table.kv tr:last-child td{border-bottom:none}

/* row actions */
.row-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.row-actions form{margin:0}

/* banners (alias to brand colors) */
.banner-green{background:var(--green-pale);border:1px solid var(--green-soft);color:var(--green)}
.banner-gold{background:var(--gold-soft);border:1px solid var(--gold-light);color:#8A6410}
.banner-red{background:var(--red-soft);border:1px solid #E79A82;color:var(--red)}
.banner{margin-bottom:14px;font-weight:700;font-size:13.5px;line-height:1.5;display:block}

/* form card */
.form-card{max-width:680px;margin:0 auto}
.check{display:flex;align-items:center;gap:9px;font-weight:700}
.check input{width:auto}

/* wizard steps */
.wizard-steps{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.ws-step{font-size:11.5px;font-weight:800;padding:6px 13px;border-radius:20px;background:#ECEAE2;color:#999}
.ws-step.active{background:var(--green-pale);color:var(--green)}

/* outcome tabs (visit) */
.outcome-tabs{display:flex;gap:8px;margin-bottom:16px}
.ot-btn{flex:1;padding:11px;border:1.5px solid var(--line);background:#fff;border-radius:11px;font-weight:800;font-size:13.5px;color:var(--muted)}
.ot-btn.active{background:var(--green-pale);border-color:var(--green-soft);color:var(--green)}
.outcome-form{margin-top:4px}

/* product picker grid */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 4px}
.prod-chip{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer}
.prod-chip input[type=checkbox]{width:auto}
.prod-chip:has(input[type=checkbox]:checked){background:var(--green-pale);border-color:var(--green-soft);color:var(--green)}
.prod-chip .qty-in{display:none;width:54px;margin-inline-start:auto;padding:5px 7px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;font-weight:800;text-align:center}
.prod-chip .qty-in.show{display:inline-block}

/* kind toggle (visit/task) */
.kind-toggle{display:flex;gap:8px}
.kind-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line);border-radius:11px;padding:11px;font-weight:800;font-size:13.5px;color:var(--muted);cursor:pointer}
.kind-opt input{display:none}
.kind-opt:has(input:checked){background:var(--green-pale);border-color:var(--green-soft);color:var(--green)}

/* opportunities */
.opp-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;padding:13px}
.opp-emoji{font-size:26px}
.opp-card .lr-title{flex:1}

/* funnel */
.funnel{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 0}
.fn-stage{text-align:center;background:var(--green-pale);border-radius:14px;padding:16px 22px;min-width:120px}
.fn-stage.fn-win{background:var(--gold-soft)}
.fn-v{font-size:26px;font-weight:900;color:var(--green)}
.fn-win .fn-v{color:#9C7212}
.fn-l{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}
.fn-p{font-size:11px;font-weight:800;color:var(--green);margin-top:4px}
.fn-arrow{font-size:22px;color:var(--muted)}

/* horizontal bar rows (reports) */
.bar-row{display:grid;grid-template-columns:1fr 120px auto;align-items:center;gap:12px;margin-bottom:12px}
.bar-label{font-size:13px;font-weight:700}
.bar-val{font-size:12.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.fill-red{background:linear-gradient(90deg,var(--red),#d3795f)!important}
.fill-gold{background:linear-gradient(90deg,var(--gold),var(--gold-light))!important}

/* error page */
.err-code{font-size:64px;font-weight:900;color:var(--gold);line-height:1;margin:8px 0}

@media(max-width:880px){
  .prod-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr 80px auto;gap:8px}
  .fn-arrow{transform:rotate(90deg)}
  .funnel{flex-direction:column}
}

/* reset password block (rep profile) */
.reset-pw{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.reset-pw label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.reset-pw input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14px}
.reset-pw input:focus{outline:none;border-color:var(--green-mid)}
.userbox a+a{margin-right:10px}

/* إجراءات سريعة صديقة للهاتف: اتصال + واتساب + توجّه */
.quick-actions{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 16px}
.qa{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:12px;
  font-family:inherit;font-size:13.5px;font-weight:800;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;line-height:1;transition:transform .08s,box-shadow .15s,filter .15s;-webkit-user-select:none;user-select:none}
.qa:active{transform:scale(.96)}
.qa svg{flex:none}
.qa-call{background:var(--green-pale);color:var(--green-dark);border-color:var(--green-soft)}
.qa-call:hover{box-shadow:0 4px 12px rgba(78,122,53,.18)}
.qa-wa{background:#25D366;color:#fff}
.qa-wa:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(37,211,102,.32)}
.qa-go{background:var(--gold-soft);color:#7A560E;border-color:var(--gold-light)}
.qa-go:hover{box-shadow:0 4px 12px rgba(212,160,23,.22)}

/* قائمة اختيار تطبيق الملاحة عبر <details> (بدون جافاسكربت) */
.qa-nav{position:relative}
.qa-nav>summary{list-style:none}
.qa-nav>summary::-webkit-details-marker{display:none}
.qa-nav>summary::after{content:"▾";margin-inline-start:2px;font-size:11px;opacity:.8}
.qa-nav[open]>summary::after{content:"▴"}
.qa-menu{position:absolute;z-index:30;top:calc(100% + 6px);inset-inline-start:0;min-width:200px;
  background:var(--card);border:1.5px solid var(--line);border-radius:13px;box-shadow:var(--shadow);
  padding:6px;display:flex;flex-direction:column;gap:2px}
.qa-menu a{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:9px;
  text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:700}
.qa-menu a:hover{background:var(--green-pale)}

/* أزرار تواصل مصغّرة داخل صفوف القوائم */
.qa-mini{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;border:1.5px solid transparent;text-decoration:none;flex:none;
  transition:transform .08s,filter .15s,box-shadow .15s}
.qa-mini:active{transform:scale(.92)}
.qa-mini svg{width:17px;height:17px;flex:none}
.qa-mini.qa-call{background:var(--green-pale);color:var(--green-dark);border-color:var(--green-soft)}
.qa-mini.qa-call:hover{box-shadow:0 3px 9px rgba(78,122,53,.2)}
.qa-mini.qa-wa{background:#25D366;color:#fff}
.qa-mini.qa-wa:hover{filter:brightness(1.05);box-shadow:0 3px 9px rgba(37,211,102,.32)}

/* صف قابل للنقر بالكامل مع أزرار إجراء مستقلة (نمط الرابط الممتد) */
.linkrow{position:relative}
.row-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.row-side{display:flex;align-items:center;gap:8px}
.row-side .qa-mini{position:relative;z-index:2}

/* مجموعة أزرار التواصل (خلية جدول العملاء) */
.mini-group{display:inline-flex;gap:6px;white-space:nowrap}
.mini-group .qa-mini{width:34px;height:34px}

/* حاوية تمرير أفقي للجداول على الجوال (تمنع تمدد الصفحة) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* شارات عدّ على التنقّل (مهام اليوم / المهمَلون) */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:10px;background:var(--gold);color:#3A2C06;font-size:11px;font-weight:900;line-height:1}
.nav a .nav-badge{margin-inline-start:auto}
@media(max-width:880px){
  .bottom-nav a .nav-badge{position:absolute;top:-1px;left:calc(50% + 3px);min-width:17px;height:17px;font-size:10px;padding:0 4px;box-shadow:0 0 0 2px var(--card)}
}

/* بحث منسدل قابل لإعادة الاستخدام (searchable select) */
.ss{position:relative}
.ss-native{display:none}
.ss-input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.ss-input:focus{outline:none;border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(111,160,73,.12)}
.ss.open .ss-input{border-color:var(--green-mid)}
.ss-invalid .ss-input{border-color:var(--red);box-shadow:0 0 0 3px rgba(178,74,46,.12)}
.ss-menu{position:absolute;z-index:40;top:calc(100% + 5px);inset-inline:0;max-height:260px;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.ss-opt{padding:11px 12px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--ink);line-height:1.35}
.ss-opt:hover,.ss-opt.active{background:var(--green-pale)}
.ss-opt.sel{font-weight:700;color:var(--green-dark)}
.ss-empty{padding:14px;text-align:center;color:var(--muted);font-size:14px}

/* بانر جولة اليوم: ملاحة متعددة المحطات بنقرة واحدة */
.tour-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;padding:14px 16px;border-radius:var(--radius);
  background:linear-gradient(120deg,var(--green-pale),var(--gold-soft));
  border:1px solid var(--green-soft);box-shadow:var(--shadow)}
.tour-info{display:flex;align-items:center;gap:12px;min-width:0}
.tour-icon{font-size:26px;line-height:1}
.tour-title{font-weight:800;color:var(--green-dark)}
.tour-sub{font-size:13px;color:var(--muted);margin-top:2px}
.tour-nav{flex:0 0 auto}
.tour-nav .qa-menu{inset-inline-start:auto;inset-inline-end:0}

/* المديونيات / الفوترة */
.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:10px;background:var(--gold);color:#3A2C06;font-size:11px;font-weight:900;margin-inline-start:6px}
.banner-soft{background:var(--green-pale);border:1px solid var(--green-soft);color:var(--green-dark);
  border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:13px;font-weight:700}
.btn-xs{padding:5px 10px;font-size:12px;border-radius:9px}
.tbl-sm{font-size:12.5px;min-width:0}
table.tbl-sm th,table.tbl-sm td{padding:8px 10px}
.row-overdue td{background:rgba(178,74,46,.05)}

.balance-card{margin-bottom:16px;border-top:3px solid var(--green-soft)}
.balance-card.has-debt{border-top-color:var(--gold)}
.balance-card.has-overdue{border-top-color:var(--red)}
.bal-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 16px}
.bal-fig{background:var(--green-pale);border-radius:12px;padding:13px 14px;text-align:center}
.bal-v{font-size:19px;font-weight:900;color:var(--green-dark);line-height:1.1}
.bal-v.neg{color:var(--red)}
.bal-l{font-size:12px;color:var(--muted);font-weight:700;margin-top:5px}
.bal-sub{font-size:13px;font-weight:800;color:var(--green);margin:14px 0 8px}
.row-rejected td{background:rgba(178,74,46,.05)}
@media(max-width:560px){
  .bal-figs{grid-template-columns:1fr;gap:8px}
  .bal-fig{display:flex;align-items:center;justify-content:space-between;text-align:right;padding:11px 14px}
  .bal-l{margin-top:0}
}

/* نموذج تسجيل تحصيل ميداني */
.pay-form{margin:4px 0 16px;border:1px solid var(--green-soft);border-radius:12px;background:var(--green-pale);overflow:hidden}
.pay-form>summary{list-style:none;cursor:pointer;padding:12px 15px;font-weight:800;color:var(--green-dark);font-size:13.5px}
.pay-form>summary::-webkit-details-marker{display:none}
.pay-form[open]>summary{border-bottom:1px solid var(--green-soft)}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 15px;background:#fff}
.pay-grid .field{margin-bottom:0}
.pay-grid .pay-note,.pay-grid .row-actions{grid-column:1 / -1}
@media(max-width:560px){ .pay-grid{grid-template-columns:1fr} }

/* صفوف التحصيلات بانتظار التأكيد (لوحة المحاسب) */
.pending-pay{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line)}
.pending-pay:last-child{border-bottom:none}
.pp-main{min-width:0;flex:1}
.pp-top{display:flex;align-items:center;gap:10px;font-weight:800}
.pp-top a{color:var(--green-dark);text-decoration:none}
.pp-amt{color:var(--ink)}
.pp-actions{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.pp-reject{position:relative}
.pp-reject>summary{list-style:none}
.pp-reject>summary::-webkit-details-marker{display:none}
.pp-reject-form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.pp-reject-form input{padding:8px 11px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:13px;min-width:200px}
.pp-reject-form input:focus{outline:none;border-color:var(--red)}

/* تقرير أعمار الديون */
.aging-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.aging-bucket{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px;border-top:3px solid var(--line)}
.aging-bucket .ab-l{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:7px}
.aging-bucket .ab-v{font-size:19px;font-weight:900;color:var(--green-dark);line-height:1.1}
.aging-bucket.b-current{border-top-color:var(--green-soft)}
.aging-bucket.b-30{border-top-color:var(--gold)}
.aging-bucket.b-60{border-top-color:#E08A2B}
.aging-bucket.b-90{border-top-color:var(--red)}
.aging-bucket.b-90 .ab-v{color:var(--red)}
.aging-bucket.b-total{background:var(--green-pale);border-top-color:var(--green)}
.tbl-aging td.num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-aging th:nth-child(n+3){text-align:left}
.tbl-aging td.cell-30{color:#9C7212;font-weight:700}
.tbl-aging td.cell-60{color:#C2691A;font-weight:700}
.tbl-aging td.cell-90{color:var(--red);font-weight:800}
@media(max-width:780px){ .aging-summary{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .aging-summary{grid-template-columns:1fr} }

/* شريط أعمار الديون (لوحة المدير) */
.aging-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px;text-decoration:none}
.aging-strip .as-item{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:5px}
.aging-strip .as-l{font-size:12px;color:var(--muted);font-weight:700}
.aging-strip .as-v{font-size:17px;font-weight:900;color:var(--green-dark);line-height:1.05}
.aging-strip .as-30 .as-v{color:#9C7212}
.aging-strip .as-60 .as-v{color:#C2691A}
.aging-strip .as-90 .as-v{color:var(--red)}
.aging-strip .as-total{background:var(--green-pale)}
.aging-strip:hover .as-total{background:var(--green-soft)}
@media(max-width:780px){ .aging-strip{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .aging-strip{grid-template-columns:1fr} }

/* ---------- صلاحيات الأدوار (مصفوفة دور × صلاحية) ---------- */
.perm-intro{margin-bottom:16px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.perm-matrix{width:100%;border-collapse:collapse;min-width:640px}
.perm-matrix th,.perm-matrix td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.perm-matrix thead th{position:sticky;top:0;background:var(--green-pale);color:var(--green-dark);font-weight:800;font-size:13px;z-index:1}
.perm-matrix thead th.is-admin{background:var(--gold-soft);color:#7a5b00}
.perm-matrix .role-emoji{display:block;font-size:18px;margin-bottom:3px}
.perm-matrix .role-name{display:block;line-height:1.3}
.perm-matrix .role-lock{display:block;font-size:10.5px;font-weight:700;color:var(--gold);margin-top:3px}
.perm-matrix th.cap-col{text-align:right;min-width:220px;background:#fff}
.perm-matrix thead th.cap-col{background:var(--green-pale)}
.perm-matrix .cap-label{font-weight:800;font-size:13.5px;color:var(--ink)}
.perm-matrix .cap-desc{font-weight:500;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.perm-matrix tbody tr:hover td,.perm-matrix tbody tr:hover th.cap-col{background:#FBFAF5}
.perm-matrix td.is-admin{background:rgba(212,160,23,.05)}

/* مفتاح التبديل (toggle switch) — RTL */
.switch{position:relative;display:inline-block;width:46px;height:26px;vertical-align:middle}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#CFCABA;border-radius:26px;transition:background .18s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;height:20px;width:20px;top:3px;right:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked + .slider{background:var(--green-mid)}
.switch input:checked + .slider::before{transform:translateX(-20px)}
.switch input:disabled + .slider{background:var(--gold-light);cursor:not-allowed;opacity:.85}
.switch input:disabled:checked + .slider{background:var(--gold)}
.switch input:focus-visible + .slider{outline:2px solid var(--green);outline-offset:2px}