/* سِجل — نظام إدارة مدفوعات العقار — Design tokens shared by admin + resident layouts */
:root{
  --ink:#16232E;
  --ink-soft:#4A5860;
  --paper:#EFEEE6;
  --surface:#FFFFFF;
  --line:#DBD7C9;
  --teal:#16A34A;
  --teal-dark:#073519;
  --teal-tint:#DFF3E6;
  --brass:#B07F28;
  --brass-tint:#F3E7C9;
  --rust:#A0432C;
  --rust-tint:#F3DED6;
  --blue:#2F6FA8;
  --blue-tint:#DDEAF3;
  --radius:10px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans Arabic',sans-serif;}
.num{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',sans-serif; direction:ltr; unicode-bidi:isolate;}
a{color:inherit;}

/* ---- App shell ---- */
.app{display:flex; min-height:100vh;}
.sidebar{width:260px; flex-shrink:0; background:var(--teal-dark); color:#EFEEE6; display:flex; flex-direction:column; padding:28px 22px;}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:38px;}
.brand-mark{width:40px;height:40px;border-radius:50%;border:2px solid var(--brass); display:flex;align-items:center;justify-content:center; font-family:'Amiri',serif;font-weight:700;font-size:19px;color:var(--brass); flex-shrink:0;}
.brand-text h1{font-family:'Amiri',serif;font-size:20px;margin:0;font-weight:700;letter-spacing:.5px;}
.brand-text p{margin:2px 0 0;font-size:11.5px;color:#A9BAB6;letter-spacing:.5px;}
nav.side-nav{display:flex;flex-direction:column;gap:4px;}
nav.side-nav a{color:#CFE0DC; text-decoration:none; font-size:14.5px; padding:11px 14px; border-radius:8px; display:flex; align-items:center; gap:12px; border-inline-start:3px solid transparent; transition:.15s;}
nav.side-nav a:hover{background:rgba(255,255,255,.06);}
nav.side-nav a.active{background:rgba(176,127,40,.18); color:#fff; border-inline-start-color:var(--brass); font-weight:600;}
.sidebar-foot{margin-top:auto; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);}
.nav-ic{width:18px; height:18px; flex-shrink:0;}
.foot-links{margin-top:12px; display:flex; flex-direction:column; gap:2px;}
.foot-links a{
  display:flex; align-items:center; gap:10px; color:#BFD1CC; text-decoration:none;
  font-size:12.5px; padding:7px 8px; border-radius:6px; transition:.15s;
}
.foot-links a:hover{background:rgba(255,255,255,.06); color:#fff;}
.foot-links .nav-ic{width:15px; height:15px;}
.whoami{display:flex; align-items:center; gap:10px; font-size:13px; color:#BFD1CC;}
.whoami .dot{width:8px;height:8px;border-radius:50%;background:#5FBF9B;}
.main{flex:1; min-width:0; padding:34px 40px 60px;}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap; gap:16px;}
.topbar h2{font-family:'Amiri',serif; font-size:26px; margin:0 0 4px; font-weight:700;}
.topbar .sub{color:var(--ink-soft); font-size:13.5px; margin:0;}

.flash{padding:12px 18px; border-radius:8px; font-size:13.5px; margin-bottom:20px;}
.flash.ok{background:var(--teal-tint); color:var(--teal-dark); border:1px solid var(--teal);}
.flash.err{background:var(--rust-tint); color:var(--rust); border:1px solid var(--rust);}

/* ---- Stat cards ---- */
.stats{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-bottom:28px;}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; position:relative; overflow:hidden;
  text-decoration:none; color:inherit; display:block;
  box-shadow:0 1px 3px rgba(18,51,47,.05);
  transition:transform .12s ease, box-shadow .12s ease;
}
a.stat:hover{transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(18,51,47,.22); border-color:var(--teal);}
.stat-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mini-ring{width:42px; height:42px; border-radius:50%; position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.mini-ring::before{content:''; position:absolute; inset:5px; background:var(--surface); border-radius:50%;}
.mini-ring span{position:relative; z-index:1; font-size:10px; font-weight:700; color:var(--teal-dark); font-family:'IBM Plex Mono';}
@media (max-width: 1100px){ .stats{grid-template-columns:repeat(3, 1fr);} }
@media (max-width: 700px){ .stats{grid-template-columns:repeat(2, 1fr);} }

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;}
.stat .label{font-size:12.5px; color:var(--ink-soft); margin-bottom:10px;}
.stat .value{font-family:'Amiri',serif; font-size:28px; font-weight:700;}
.stat .value small{font-family:'IBM Plex Sans Arabic'; font-size:14px; font-weight:400; color:var(--ink-soft);}
.stat.good{border-top:3px solid var(--teal);}
.stat.warn{border-top:3px solid var(--rust);}
.stat.brass-top{border-top:3px solid var(--brass);}
.stat.danger{border:1px solid var(--rust); border-top:3px solid var(--rust);}

/* ---- Panels ---- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:24px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line);}
.panel-head h3{font-family:'Amiri',serif; font-size:17px; margin:0; font-weight:700;}
.panel-body{padding:6px 22px 18px;}
.row-list{display:flex; flex-direction:column;}
.row-item{display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px dashed var(--line);}
.row-item:last-child{border-bottom:none;}
.row-item .who{font-size:14px; font-weight:500;}
.row-item .meta{font-size:12px; color:var(--ink-soft);}

/* ---- Badges ---- */
.stamp{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.4px; border:1.5px solid transparent;}
.stamp.paid{color:var(--teal); border-color:var(--teal); background:var(--teal-tint);}
.stamp.due{color:var(--rust); border-color:var(--rust); background:var(--rust-tint);}
.stamp.partial{color:var(--brass); border-color:var(--brass); background:var(--brass-tint);}

/* ---- Tables ---- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; direction:rtl; background:var(--surface);}
.table-wrap table{min-width:560px; background:var(--surface);}
thead th{text-align:right; font-weight:600; color:var(--ink-soft); font-size:12px; padding:10px 12px; border-bottom:2px solid var(--ink);}
tbody td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr{transition:background .1s ease;}
tbody tr:hover{background:var(--teal-tint);}
.unit-tag{font-family:'Amiri',serif; font-weight:700; font-size:15px; background:var(--teal-tint); color:var(--teal-dark); width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px;}

/* ---- Unit picker (announcements page) ---- */
.unit-picker-toolbar{display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; align-items:center;}
.unit-picker-toolbar input[type="text"]{flex:1; min-width:160px; margin:0;}
.unit-picker-toolbar .btn{white-space:nowrap;}
.unit-picker-count{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; margin-inline-start:auto;}
.unit-picker-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px;
  max-height:300px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; background:var(--paper);
}
.unit-check{
  display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:8px 12px; cursor:pointer; font-size:13px; min-width:0;
  transition:border-color .15s, background .15s;
}
.unit-check:hover{border-color:var(--teal);}
.unit-check.checked{background:var(--teal-tint); border-color:var(--teal);}
.unit-check input[type="checkbox"]{width:16px; height:16px; flex-shrink:0; accent-color:var(--teal); cursor:pointer; margin:0;}
.unit-check .unit-tag{width:28px; height:28px; font-size:13px; flex-shrink:0;}
.unit-check .u-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.unit-check.hidden{display:none;}

/* ---- Buttons / forms ---- */
.btn{
  border:1px solid var(--teal); color:var(--teal); background:transparent; padding:8px 16px; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block;
  transition:background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{background:var(--teal); color:#fff; box-shadow:0 4px 10px -4px rgba(22,163,74,.45);}
.btn.solid{background:var(--teal); color:#fff;}
.btn.solid:hover{background:var(--teal-dark); border-color:var(--teal-dark); color:#fff;}
.btn.brass{border-color:var(--brass); color:var(--brass);}
.btn.brass:hover{background:var(--brass); color:#fff; box-shadow:0 4px 10px -4px rgba(176,127,40,.45);}
.btn.small{padding:5px 10px; font-size:11.5px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:13.5px; background:#fff;
}

/* ---- Ledger grid ---- */
.legend{display:flex; gap:18px; padding:14px 22px 4px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:12px;height:12px;border-radius:3px; display:inline-block;}
.ledger-wrap{overflow-x:auto;}
.ledger{border-collapse:collapse; width:100%; min-width:760px;}
.ledger th, .ledger td{border:1px solid var(--line); text-align:center; padding:9px 6px;}
.ledger thead th{background:var(--teal-dark); color:#EFEEE6; font-weight:600; font-size:12px; border-color:var(--teal-dark);}
.ledger tbody th{text-align:right; background:#F7F6F0; font-weight:600; font-size:13px; padding-inline-start:14px;}
.cell{width:34px;height:34px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px; border:none; cursor:pointer; font-family:inherit; transition:filter .12s ease, box-shadow .12s ease;}
.cell:hover{filter:brightness(0.95); box-shadow:0 0 0 2px rgba(22,163,74,.25);}
.cell.paid{background:var(--teal); color:#fff;}
.cell.due{background:var(--rust-tint); color:var(--rust); border:1.5px dashed var(--rust);}
.cell.partial{background:var(--brass-tint); color:var(--brass); border:1.5px solid var(--brass);}

/* ---- Incidents ---- */
.incident-card{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; background:#fff;}
.incident-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:10px;}
.incident-top h4{font-family:'Amiri',serif; font-size:17px; margin:0 0 4px; font-weight:700;}
.incident-top .date{font-size:12px; color:var(--ink-soft);}
.incident-amount{font-family:'IBM Plex Mono'; font-size:20px; font-weight:600; color:var(--ink); direction:ltr;}
.incident-amount .cur{font-family:'IBM Plex Sans Arabic'; font-size:12px; color:var(--ink-soft); margin-inline-start:4px;}
.bar{height:6px; background:var(--line); border-radius:4px; overflow:hidden;}
.bar > div{height:100%; background:var(--teal);}
.progress-row{display:flex; align-items:center; gap:12px; margin-top:12px;}
.progress-row .bar{flex:1; margin:0;}
.progress-row .pct{font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono';}
.new-incident-btn{display:inline-flex; align-items:center; gap:8px; background:var(--brass); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit; text-decoration:none; transition:background .12s ease;}
.new-incident-btn:hover{background:#8f6A20;}

/* ---- Login page ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--paper);}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:38px 32px; width:100%; max-width:380px; box-shadow:0 14px 34px -16px rgba(0,0,0,.22);}
.login-card .brand-mark{margin:0 auto 16px;}
.login-card h1{font-family:'Amiri',serif; text-align:center; font-size:22px; margin:0 0 4px;}
.login-card .sub{text-align:center; color:var(--ink-soft); font-size:13px; margin:0 0 26px;}
.login-card .field{margin-bottom:18px;}
.login-card .field label{font-size:12.5px; color:var(--ink-soft); margin-bottom:7px;}
.login-card .input-icon-wrap{position:relative;}
.login-card .input-icon-wrap .field-ic{
  position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:16px;
  width:18px; height:18px; color:var(--ink-soft); pointer-events:none;
}
.login-card .input-icon-wrap input{
  width:100%; padding:13px 16px; padding-inline-start:46px;
  border:1px solid var(--line); border-radius:16px; font-family:inherit; font-size:14px;
  background:var(--paper); transition:border-color .15s, background .15s;
}
.login-card .input-icon-wrap input:focus{
  outline:none; border-color:var(--teal); background:var(--surface);
}
.login-card .field-toggle-btn{
  position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:14px;
  background:none; border:none; padding:2px; cursor:pointer; color:var(--ink-soft); display:flex;
}
.login-card .field-toggle-btn .field-ic{position:static; width:18px; height:18px; transform:none;}
.login-card .field-toggle-btn:hover{color:var(--teal);}
.login-card #password-input{padding-inline-end:44px;}
.login-card .btn.solid{width:100%; padding:13px; margin-top:8px; border-radius:16px; font-size:14.5px; font-weight:600;}
.login-hint{margin-top:18px; font-size:11.5px; color:var(--ink-soft); text-align:center; line-height:1.7;}

/* ---- Login role tabs (ساكن / مدير) ---- */
.role-tabs{display:flex; gap:6px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:4px; margin-bottom:22px;}
.role-tab{
  flex:1; border:none; background:transparent; color:var(--ink-soft); font-family:inherit; font-size:13px; font-weight:600;
  padding:9px 0; border-radius:11px; cursor:pointer; transition:background .15s, color .15s;
}
.role-tab.active{background:var(--teal); color:#fff;}

/* ---- Shared inline SVG icon sizing (replaces emoji across resident-facing UI) ---- */
.svg-ic{width:1em; height:1em; display:inline-block; vertical-align:-0.125em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

/* ---- Resident (mobile) view ---- */
.phone{width:100%; max-width:460px; margin:0 auto; min-height:100vh; background:var(--paper); padding-bottom:92px; position:relative;}
header.top{background:var(--teal-dark); color:#EFEEE6; padding:22px 24px 14px; position:relative;}
.hero-wave{position:absolute; left:0; top:100%; width:100%; height:34px; display:block;}
.hero-mount{position:relative; padding:0 24px; margin-top:18px;}
.status-hero{position:relative; background:var(--surface); border-radius:16px; padding:22px; box-shadow:0 10px 30px -14px rgba(0,0,0,.35);}
.top-row{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;}
.greet-group{display:flex; align-items:center; gap:12px;}
.greet p{margin:0; font-size:12.5px; color:#A9BAB6;}
.greet h1{margin:2px 0 0; font-family:'Amiri',serif; font-size:20px; font-weight:700;}
.unit-pill{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:rgba(255,255,255,.12); color:#EFEEE6; font-size:11.5px; font-weight:600;
  padding:5px 13px; border-radius:20px;
}
.avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16); color:#fff; display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.avatar .svg-ic{width:19px; height:19px; stroke-width:2;}
.bell-btn{
  position:relative; width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:transparent; color:#EFEEE6; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
}
.bell-btn .svg-ic{width:19px; height:19px;}
.bell-btn .tab-badge{position:absolute; top:-3px; inset-inline-end:-3px; border:1.5px solid var(--teal-dark);}

/* Hero card — current period's subscription: amount, progress ring, progress bar, 3-stat row */
.hero-title{display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; font-weight:600;}
.hero-title .svg-ic{width:14px; height:14px;}
.hero-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:20px;}
.hero-clip{width:54px; height:54px; border-radius:15px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;}
.hero-clip .svg-ic{width:24px; height:24px; color:var(--teal);}
.hero-clip .clip-check{
  position:absolute; bottom:-4px; inset-inline-end:-4px; width:21px; height:21px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface);
}
.hero-clip.due .clip-check{background:var(--rust);}
.hero-clip.partial .clip-check{background:var(--brass);}
.hero-clip .clip-check .svg-ic{width:12px; height:12px; stroke-width:3.2; color:#fff;}
.hero-amount{text-align:center; flex:1; min-width:0;}
.hero-amount .amt{font-family:'IBM Plex Mono'; font-size:32px; font-weight:700; color:var(--ink); line-height:1;}
.hero-amount .amt-label{font-size:12.5px; color:var(--ink-soft); margin-top:5px;}
.hero-ring{width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;}
.hero-ring::before{content:''; position:absolute; inset:7px; background:var(--surface); border-radius:50%;}
.hero-ring .ring-text{position:relative; z-index:1; text-align:center;}
.hero-ring .ring-pct{display:block; font-family:'IBM Plex Mono'; font-size:14px; font-weight:700; color:var(--teal);}
.hero-ring .ring-cap{display:block; font-size:8.5px; color:var(--ink-soft); margin-top:1px;}
.hero-ring.due .ring-pct{color:var(--rust);}
.hero-ring.partial .ring-pct{color:var(--brass);}
.hero-bar{height:9px; background:var(--line); border-radius:20px; overflow:hidden; margin-bottom:18px;}
.hero-bar > div{height:100%; background:var(--teal); border-radius:20px; transition:width .3s;}
.hero-bar.due > div{background:var(--rust);}
.hero-bar.partial > div{background:var(--brass);}
.hero-stats{display:flex; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line);}
.hero-stats .hs{text-align:center; flex:1;}
.hero-stats .hs + .hs{border-inline-start:1px solid var(--line);}
.hero-stats .hs .lbl{font-size:11.5px; color:var(--ink-soft); margin-bottom:5px;}
.hero-stats .hs .val{font-family:'IBM Plex Mono'; font-size:16px; font-weight:700; color:var(--teal-dark);}
.is-due{color:var(--rust) !important;}

/* Colored square icon badges used in section/card headers (سجل المتأخرات، مستحقات طارئة، ملخص الحساب) */
.card-badge{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.card-badge .svg-ic{width:18px; height:18px;}
.card-badge.mint{background:var(--teal-tint); color:var(--teal);}
.card-badge.brass{background:var(--brass-tint); color:var(--brass);}
.card-badge.blue{background:var(--blue-tint); color:var(--blue);}

/* Positive empty-state card (two-line: bold title + gray subtitle) */
.pos-card{background:var(--teal-tint); border:1px solid var(--teal); border-radius:14px; padding:14px 16px; display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;}
.pos-card .pc-check{width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pos-card .pc-check .svg-ic{width:15px; height:15px; stroke-width:2.5;}
.pos-card .pc-title{font-size:13.5px; font-weight:700; color:var(--teal-dark);}
.pos-card .pc-sub{font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.6;}

.card-more-link{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--teal); font-weight:600; text-decoration:none;}
.card-more-link .svg-ic{width:13px; height:13px;}

/* Account summary card */
.summary-stats{display:flex; justify-content:space-between; gap:6px; margin-bottom:16px;}
.summary-stat{display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
.summary-stat .ss-ic{width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.summary-stat .ss-ic .svg-ic{width:15px; height:15px;}
.summary-stat .ss-ic.mint{background:var(--teal-tint); color:var(--teal);}
.summary-stat .ss-ic.brass{background:var(--brass-tint); color:var(--brass);}
.summary-stat .ss-ic.blue{background:var(--blue-tint); color:var(--blue);}
.summary-stat .ss-text{display:flex; flex-direction:column; min-width:0;}
.summary-stat .ss-lbl{font-size:11px; color:var(--ink-soft);}
.summary-stat .ss-val{font-family:'IBM Plex Mono'; font-size:13.5px; font-weight:700; color:var(--teal-dark);}
.summary-updated{
  text-align:center; font-size:11px; color:var(--ink-soft); padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.summary-updated .svg-ic{width:12px; height:12px;}
.res-section{
  background:var(--surface); border-radius:16px; margin:16px 24px 0; padding:18px 20px;
  box-shadow:0 4px 18px -12px rgba(18,51,47,.18);
}
.sec-title{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.sec-title h2{font-family:'Amiri',serif; font-size:16px; margin:0; font-weight:700;}
.sec-title .count{font-size:11px; color:var(--ink-soft); background:#FAF9F5; border:1px solid var(--line); border-radius:20px; padding:3px 10px; font-weight:600;}
.receipt{background:var(--surface); border-radius:14px; margin-bottom:16px; padding:18px 20px 16px; border:1px solid var(--line);}
.receipt .perf{border-top:1.5px dashed var(--line); margin:12px 0;}
.receipt-top{display:flex; justify-content:space-between; align-items:flex-start;}
.receipt-top h3{font-size:14px; margin:0 0 4px; font-weight:600;}
.receipt-top .date{font-size:11.5px; color:var(--ink-soft);}
.receipt-amount{font-family:'IBM Plex Mono'; font-size:18px; font-weight:600; white-space:nowrap;}
.receipt-foot{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft);}
.badge{padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;}
.badge.due{background:var(--rust-tint); color:var(--rust);}
.badge.paid{background:var(--teal-tint); color:var(--teal);}
.badge.partial{background:var(--brass-tint); color:var(--brass);}
.empty-note{background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:16px 18px; font-size:13px; color:var(--ink-soft); text-align:center; margin-bottom:16px;}
.empty-note.positive{background:var(--teal-tint); border:1px solid var(--teal); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:500;}
.empty-note.positive .check{
  width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.timeline{padding:0 2px;}
.t-row{display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);}
.t-row:last-child{border-bottom:none;}
.t-dot{width:9px; height:9px; border-radius:50%; margin-top:6px; flex-shrink:0;}
.t-dot.paid{background:var(--teal);}
.t-dot.due{background:var(--rust);}
.t-dot.partial{background:var(--brass);}
.t-body{flex:1;}
.t-title{font-size:13.5px; font-weight:500;}
.t-date{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.t-amount{font-family:'IBM Plex Mono'; font-size:13.5px; align-self:center;}
.pay-cta{margin:22px 24px 0; background:var(--brass-tint); border:1px solid var(--brass); border-radius:12px; padding:14px 16px; font-size:12.5px; color:#7A5A1E; text-align:center; line-height:1.7;}
.pay-cta.warn{background:var(--rust-tint); border-color:var(--rust); color:#7A2F1E;}
.pay-cta .total-figure{font-family:'IBM Plex Mono'; font-size:17px; font-weight:700;}

/* Mobile nav toggle — hidden on desktop, shown under 980px */
.mobile-topbar{
  display:none; position:fixed; top:0; right:0; left:0; z-index:15;
  align-items:center; gap:12px; background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 16px; box-shadow:0 2px 10px -6px rgba(0,0,0,.15);
}
.mobile-topbar-title{font-family:'Amiri',serif; font-weight:700; font-size:16px; color:var(--teal-dark);}
.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; flex-shrink:0;
}
.nav-toggle svg{width:20px; height:20px;}
.nav-backdrop{display:none; position:fixed; inset:0; background:rgba(18,51,47,.45); z-index:19;}
.app.nav-open .nav-backdrop{display:block;}

@media (max-width: 980px){
  .mobile-topbar{display:flex;}
  .sidebar{
    position:fixed; inset-inline-start:0; top:0; bottom:0; z-index:20; width:260px;
    transform:translateX(105%); transition:transform .25s ease; box-shadow:0 0 30px rgba(0,0,0,.25);
  }
  .app.nav-open .sidebar{transform:none;}
  .main{padding:78px 20px 20px;}
  .form-grid{grid-template-columns:1fr;}
}

/* ---- Resident bottom tab bar (mobile app style) ---- */
nav.tabbar{
  position:fixed; bottom:0; right:0; left:0; max-width:460px; margin:0 auto;
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; justify-content:space-around; align-items:center;
  padding:9px 0 max(10px, env(safe-area-inset-bottom)); z-index:40;
  box-shadow:0 -6px 18px -12px rgba(0,0,0,.25);
}
nav.tabbar a{
  text-decoration:none; color:var(--ink-soft); font-size:11px; font-weight:500;
  display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; padding:4px 0;
}
nav.tabbar a.active{color:var(--teal); font-weight:700;}
nav.tabbar .ic{font-size:19px; line-height:1;}
nav.tabbar .tab-badge{
  position:absolute; top:-6px; inset-inline-end:-11px; background:var(--rust); color:#fff;
  font-size:10px; font-weight:700; border-radius:10px; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1;
  border:1.5px solid var(--surface);
}

/* ---- PWA install banner (شريط "ثبّت التطبيق") ---- */
.pwa-banner{
  display:none; align-items:center; gap:12px;
  position:fixed; top:0; right:0; left:0; z-index:60;
  background:var(--teal-dark); color:#EFEEE6;
  padding:10px 16px; box-shadow:0 4px 14px -6px rgba(0,0,0,.4);
  font-family:'IBM Plex Sans Arabic',sans-serif;
}
.pwa-banner-icon{font-size:22px; flex-shrink:0;}
.pwa-banner-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.pwa-banner-text strong{font-size:13px; font-weight:600;}
.pwa-banner-text span{font-size:11.5px; color:#A9BAB6; line-height:1.4;}
.pwa-banner .btn{white-space:nowrap; flex-shrink:0;}
.pwa-banner-close{
  background:none; border:none; color:#A9BAB6; font-size:20px; line-height:1; cursor:pointer;
  padding:2px 4px; flex-shrink:0;
}
body:has(.pwa-banner[style*="flex"]) .phone,
body:has(.pwa-banner[style*="flex"]) .login-wrap{ margin-top:54px; }

/* ---- Push notification permission prompt (مودال طلب تفعيل الإشعارات) ---- */
/* ---- Push notification permission prompt — compact toast, not a full modal ---- */
.push-toast{
  display:none; position:fixed; bottom:78px; right:12px; left:12px; max-width:436px; margin:0 auto;
  background:var(--teal-dark); color:#EFEEE6; border-radius:14px; padding:12px 14px;
  align-items:center; gap:10px; z-index:70; box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
}
.push-toast.open{display:flex;}
.push-toast .pt-icon{font-size:20px; flex-shrink:0;}
.push-toast .pt-text{flex:1; min-width:0;}
.push-toast .pt-text strong{display:block; font-size:12.5px; font-weight:600;}
.push-toast .pt-text span{display:block; font-size:11px; color:#A9BAB6; margin-top:1px;}
.push-toast .pt-actions{display:flex; flex-direction:column; gap:3px; flex-shrink:0;}
.push-toast .pt-actions button{
  border:none; cursor:pointer; font-family:inherit; font-size:11.5px; padding:5px 12px;
  border-radius:7px; white-space:nowrap;
}
.push-toast .pt-agree{background:var(--brass); color:#fff; font-weight:600;}
.push-toast .pt-later{background:none; color:#A9BAB6;}
@media (max-width: 380px){
  .push-toast{flex-wrap:wrap;}
  .push-toast .pt-actions{flex-direction:row; width:100%; justify-content:flex-end; margin-top:2px;}
}
/* ======================================================================
   لوحة التحكم — التصميم الجديد (KPI cards + charts + quick actions)
   ====================================================================== */

/* Dashboard palette — sampled from the approved mockup */
:root{
  --forest:#0F4C33;       /* deep green: chart bars, donut, KPI values */
  --forest-ic:#1F7A4D;    /* mid green: icons, quick-action tile */
  --dash-brass:#BC944C;
  --dash-red:#C63C3C;
  --dash-blue:#17639F;
  --dash-orange:#F2900C;
}

/* ---- Enhanced dashboard topbar: property name + search + bell + avatar ---- */
/* بار رئيسي واحد (navbar) يحتوي اللوجو + البحث + المستخدم + الإشعارات، بدل 3 عناصر متفرقة */
.dash-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 16px;
  box-shadow:0 1px 4px rgba(18,51,47,.06);
}
.dash-topbar .dt-title{display:flex; align-items:center; gap:10px;}
.dash-topbar .dt-title h2{font-family:'Amiri',serif; font-size:21px; margin:0; font-weight:700;}
.dash-topbar .dt-ic{width:30px;height:30px;color:var(--ink-soft); flex-shrink:0;}
.dash-search{
  flex:1; min-width:200px; max-width:420px; display:flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 14px; color:var(--ink-soft);
}
.dash-search input{border:none; outline:none; background:none; font-family:inherit; font-size:13px; flex:1; color:var(--ink); padding:0;}
.dash-search svg{width:16px;height:16px; flex-shrink:0;}
.dash-user-row{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.dash-bell{position:relative; width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); text-decoration:none;}
.dash-bell svg{width:17px;height:17px;}
.dash-bell .bell-count{position:absolute; top:-5px; inset-inline-end:-5px; background:var(--rust); color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper); padding:0 3px;}
.dash-user{display:flex; align-items:center; gap:10px;}
.dash-user .du-avatar{width:38px;height:38px;border-radius:50%; background:var(--teal-tint); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0;}
.dash-user .du-text{line-height:1.3;}
.dash-user .du-name{font-size:13.5px; font-weight:600;}
.dash-user .du-role{font-size:11px; color:var(--ink-soft);}
.dash-property{display:flex; align-items:center; gap:10px;}
.dash-property .dp-ic{width:34px;height:34px;border-radius:9px; background:var(--teal-dark); color:var(--brass); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.dash-property .dp-ic svg{width:17px;height:17px;}
.dash-property .dp-name{font-size:13.5px; font-weight:700;}
.dash-property .dp-sub{font-size:10.5px; color:var(--ink-soft);}

.page-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.page-title-row h2{font-family:'Amiri',serif; font-size:24px; margin:0;}
.page-home-ic{width:38px;height:38px;border-radius:10px; background:var(--surface); border:1px solid var(--line); color:var(--teal-dark); display:flex; align-items:center; justify-content:center;}
.page-home-ic svg{width:17px;height:17px;}

.month-picker{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--ink-soft); font-size:13px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:9px 16px;
  box-shadow:0 1px 3px rgba(18,51,47,.05);
}
.month-picker svg{width:15px;height:15px; flex-shrink:0;}
.month-picker select{
  border:none; background:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--teal-dark);
  cursor:pointer; padding:4px 2px; border-radius:6px; transition:background .12s ease;
}
.month-picker select:hover{background:var(--teal-tint);}
.month-picker select:focus{outline:2px solid var(--teal); outline-offset:1px;}

/* ---- Dashboard header: title (right) + month picker (left) in one row ---- */
.dash-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
.dash-title{display:flex; align-items:center; gap:10px;}
.dash-title .dt-home{width:22px; height:22px; color:var(--ink-soft); flex-shrink:0;}
.dash-title h2{font-family:'Amiri',serif; font-size:24px; margin:0; font-weight:700;}
.dash-head .month-picker{margin-bottom:0;}

/* ---- KPI cards ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:22px;}
.kpi-card{
  --kpi-bg:var(--surface); --kpi-line:var(--line); --kpi-ink:var(--forest);
  background:var(--kpi-bg); border:1px solid var(--kpi-line); border-radius:14px; padding:18px 20px 14px;
  box-shadow:0 1px 3px rgba(18,51,47,.05); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kpi-card.tone-mint {--kpi-bg:#F3F9F4; --kpi-line:#D6E9DB; --kpi-ink:var(--forest);}
.kpi-card.tone-amber{--kpi-bg:#FDF8F1; --kpi-line:#F0DFC6; --kpi-ink:#8A4B14;}
.kpi-card.tone-blue {--kpi-bg:#F5F8FC; --kpi-line:#D8E4F1; --kpi-ink:#14507F;}
.kpi-card.tone-red  {--kpi-bg:#FDF4F3; --kpi-line:#F2D6D3; --kpi-ink:#A8262A;}
a.kpi-card:hover{transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(18,51,47,.25); border-color:var(--kpi-ink);}
.kpi-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.kpi-text{min-width:0;}
.kpi-ic{width:48px;height:48px;border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.kpi-ic svg{width:22px;height:22px;}
.kpi-ic.mint {background:#DDEEE3; color:var(--forest-ic);}
.kpi-ic.amber{background:#F7E7D1; color:#A85A18;}
.kpi-ic.blue {background:#DCE8F4; color:var(--dash-blue);}
.kpi-ic.red  {background:#F9DAD7; color:var(--dash-red);}
.kpi-label{font-size:13px; color:var(--ink); font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.kpi-label.alert::before{content:''; width:3px; height:15px; border-radius:2px; background:var(--dash-red); flex-shrink:0;}
.kpi-value{font-family:'Amiri',serif; font-size:30px; line-height:1.15; font-weight:700; color:var(--kpi-ink); margin-bottom:6px;}
.kpi-value small{font-family:'IBM Plex Sans Arabic'; font-size:13px; font-weight:500; color:var(--ink-soft);}
.kpi-note{font-size:12px; color:var(--ink-soft); line-height:1.6;}
.kpi-note .kpi-trend{display:block; font-size:12.5px; font-weight:700;}
.kpi-note.up   .kpi-trend{color:var(--forest-ic);}
.kpi-note.down .kpi-trend{color:var(--dash-red);}
.kpi-note.warn{color:#A8262A; font-weight:500;}
.kpi-link{align-self:flex-end; font-size:11.5px; color:var(--kpi-ink); text-decoration:none; font-weight:600;}
@media (max-width: 1100px){ .kpi-grid{grid-template-columns:repeat(2, 1fr);} }


/* ---- Charts row ---- */
.charts-row{display:grid; grid-template-columns:.9fr 1.1fr 1.7fr; gap:16px; margin-bottom:22px; align-items:stretch;}
@media (max-width: 1250px){ .charts-row{grid-template-columns:1fr 1fr;} .charts-row > *:first-child{grid-column:1 / -1;} }
@media (max-width: 760px){ .charts-row{grid-template-columns:1fr;} .charts-row > *:first-child{grid-column:auto;} }
.panel-head h3 .ph-ic{width:17px; height:17px; vertical-align:-3px; margin-inline-end:8px; color:var(--forest-ic);}
.chart-legend{display:flex; gap:16px; justify-content:flex-end; font-size:12px; color:var(--ink-soft); padding:6px 0 10px;}
.chart-legend span{display:inline-flex; align-items:center; gap:6px;}
.chart-legend i{width:10px;height:10px;border-radius:50%; display:inline-block;}
.chart-period{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);}
.chart-period svg{width:14px; height:14px;}

/* Bar chart — y-axis + gridlines. Forced LTR so months read مايو → أكتوبر left-to-right and the axis sits on the left */
.bc-wrap{direction:ltr; display:flex; gap:8px; align-items:flex-start; min-width:0;}
.bc-axis{position:relative; width:40px; height:112px; flex-shrink:0;}
.bc-axis span{position:absolute; right:0; transform:translateY(50%); font-size:10.5px; color:var(--ink-soft); line-height:1;}
.bc-main{flex:1; min-width:0;}
.bc-plot{position:relative; height:112px; border-bottom:1px solid var(--line);}
.bc-grid i{position:absolute; left:0; right:0; height:0; border-top:1px dashed #E6E4D8;}
.bc-cols{position:absolute; inset:0; display:flex;}
.bc-col{flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:4px;}
.bc-bar{width:clamp(8px, 1.7vw, 20px); border-radius:5px 5px 0 0;}
.bc-bar.collected{background:var(--forest);}
.bc-bar.expenses{background:var(--dash-brass);}
.bc-labels{display:flex; direction:ltr;}
.bc-labels span{flex:1; text-align:center; font-size:11px; color:var(--ink-soft); padding-top:6px;}

/* Donut */
.donut-body{display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; flex:1; padding:6px 0;}
.donut-figure{position:relative; width:116px; height:116px; flex-shrink:0;}
.donut-figure svg{width:100%;height:100%; transform:rotate(-90deg);}
.donut-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.donut-center .dc-pct{font-family:'IBM Plex Mono'; font-size:20px; font-weight:700; color:var(--forest);}
.donut-center .dc-cap{font-size:11px; color:var(--ink-soft); margin-top:2px;}
.donut-legend{display:flex; flex-direction:column; gap:14px; flex:1; min-width:124px;}
.donut-legend .dl-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; white-space:nowrap;}
.donut-legend .dl-key{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--forest);}
.donut-legend .dl-key.late{color:#D9541E;}
.donut-legend .dl-key.unpaid{color:var(--dash-red);}
.donut-legend i{width:11px; height:11px; border-radius:50%; display:inline-block; flex-shrink:0;}
.donut-legend .dl-val{font-size:12px; color:var(--ink-soft);}
.donut-legend .dl-val .num{font-family:'IBM Plex Mono'; font-weight:700; color:var(--ink); margin-inline-start:2px;}

/* ---- Quick actions: light 2×2 tiles, small solid icon badge on top, colored label ---- */
.quick-actions{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:10px; flex:1;}
.qa-btn{
  --qa:var(--forest-ic); --qa-ink:var(--forest);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:72px; padding:8px 6px; border-radius:12px; background:var(--surface); border:1px solid var(--line);
  color:var(--qa-ink); text-decoration:none; text-align:center; line-height:1.3;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.qa-btn:hover{border-color:var(--qa); box-shadow:0 6px 14px -8px var(--qa); transform:translateY(-1px);}
.qa-bolt{color:var(--dash-brass); font-size:14px; margin-left:4px;}
.qa-ic{width:32px; height:32px; border-radius:10px; background:var(--qa); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.qa-btn svg{width:17px; height:17px; flex-shrink:0;}
.qa-btn.mint {--qa:var(--forest-ic); --qa-ink:var(--forest);}
.qa-btn.brass{--qa:var(--dash-brass); --qa-ink:#7A5A1E;}
.qa-btn.rust {--qa:var(--dash-red);  --qa-ink:#A8262A;}
.qa-btn.blue {--qa:var(--dash-blue); --qa-ink:#14507F;}

/* ---- Request / status badges used in the maintenance & transactions tables ---- */
.stamp.progress{color:var(--teal); border-color:var(--teal); background:var(--teal-tint);}
.stamp.pending{color:var(--ink-soft); border-color:var(--line); background:#F1F1EC;}
.pay-method{font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; background:#F1F1EC; color:var(--ink-soft);}
.kind-income{color:var(--teal-dark); font-weight:700;}
.kind-expense{color:var(--rust); font-weight:700;}

.dash-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width: 1100px){ .dash-grid-2{grid-template-columns:1fr;} }

@media (max-width: 860px){
  .dash-topbar{flex-direction:column; align-items:stretch;}
  .dash-search{max-width:none; order:3;}
  .dash-user-row{order:2; justify-content:space-between;}
  .dash-property{order:1;}
}

/* Grid items need an explicit min-width:0 — otherwise a wide child (a 560px-min-width
   table, or the bar chart) forces the whole grid track, and with it the page itself,
   wider than the viewport on narrow screens (a classic CSS grid/flex blow-out). */
.charts-row, .dash-grid-2{min-width:0;}
.charts-row > *, .dash-grid-2 > *{min-width:0;}
.bc-wrap{min-width:0;}
@media (max-width: 560px){
  .bc-col{gap:2px;}
  .bc-axis{width:34px;}
}

/* ---- Recent transactions table ---- */
.panel-head .panel-meta{font-size:12px; color:var(--ink-soft);}
.tx-table thead th{
  background:#FAF9F5; color:var(--ink-soft); font-size:12px; font-weight:600; white-space:nowrap;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.tx-table tbody td{padding:14px 16px; border-bottom:1px solid #EEECE2; font-size:13.5px; vertical-align:middle;}
.tx-table tbody tr:last-child td{border-bottom:none;}
.tx-table th:first-child, .tx-table td:first-child{padding-inline-start:22px;}
.tx-table th.c, .tx-table td.c{text-align:center; width:90px;}
.tx-table th.amt, .tx-table td.amt{text-align:left; width:170px; padding-inline-end:24px;}
/* شريط لوني على حافة الصف: أخضر = وارد، أحمر = صادر */
.tx-table tr.tx-in  td:first-child{box-shadow:inset -3px 0 0 var(--forest-ic);}
.tx-table tr.tx-out td:first-child{box-shadow:inset -3px 0 0 var(--dash-red);}
.tx-date .num{font-size:12.5px; color:var(--ink-soft);}
.tx-who{font-weight:600;}
.tx-none{color:var(--ink-soft);}
.tx-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap;}
.tx-badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.tx-badge.sub    {background:#E3F1E8; color:var(--forest);}
.tx-badge.maint  {background:#F7E7D1; color:#8A4B14;}
.tx-badge.expense{background:#F9DAD7; color:#A8262A;}
.tx-badge.other  {background:#F1F1EC; color:var(--ink-soft);}
.unit-chip{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:30px; padding:0 8px;
  border-radius:8px; background:#EEF1EC; color:var(--forest); font-family:'IBM Plex Mono','IBM Plex Sans Arabic',sans-serif; font-weight:700; font-size:13px;
}
.tx-amt{font-weight:700; white-space:nowrap;}
.tx-amt .num{font-family:'IBM Plex Mono'; font-size:14.5px;}
.tx-amt small{font-size:11.5px; font-weight:500; color:var(--ink-soft);}
.tx-amt.in {color:var(--forest-ic);}
.tx-amt.out{color:var(--dash-red);}

/* ---- Overdue units + maintenance tables (same .tx-table system) ---- */
.tx-table tr.tx-warn td:first-child{box-shadow:inset -3px 0 0 var(--dash-brass);}
.tx-badge.info{background:#DCE8F4; color:#14507F;}
.tx-amt.warn{color:#A8661A;}
.days-pill{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap;}
.days-pill.hi {background:#F9DAD7; color:#A8262A;}
.days-pill.mid{background:#F7E7D1; color:#8A4B14;}
.days-pill.lo {background:#F1F1EC; color:var(--ink-soft);}
.inc-id{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-soft); margin-inline-end:6px;}
.tx-prog{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.mini-bar{display:block; width:110px; height:5px; background:#E6E4D8; border-radius:4px; overflow:hidden;}
.mini-bar i{display:block; height:100%; background:var(--forest-ic); border-radius:4px;}

/* ---- Compact charts row: tighter headers/paddings ---- */
.charts-row .panel-head{padding:12px 18px;}
.charts-row .panel-body{padding:4px 18px 14px;}
.charts-row .panel{display:flex; flex-direction:column;}
.charts-row .panel-body{flex:1; display:flex; flex-direction:column;}

/* =====================================================================
   Mobile web view (≤ 640px): KPI 2×2, tables → cards, touch-friendly controls
   Tables opt in with class="tx-table stack" + data-label on each <td>.
   ===================================================================== */
@media (max-width: 640px){
  .dash-head .month-picker{display:flex; width:100%; justify-content:space-between;}
  .month-picker select{font-size:14px; padding:8px 4px;}

  /* KPI cards: 2×2, icon on top, tighter type */
  .kpi-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .kpi-card{padding:14px 14px 12px; gap:10px;}
  .kpi-top{flex-direction:column-reverse; align-items:flex-start; gap:10px;}
  .kpi-ic{width:38px; height:38px;}
  .kpi-ic svg{width:18px; height:18px;}
  .kpi-label{font-size:12.5px; margin-bottom:4px;}
  .kpi-value{font-size:24px;}
  .kpi-note{font-size:11.5px;}
  .kpi-link{font-size:11px;}

  .charts-row{gap:12px;}
  .bc-labels span{font-size:10px;}
  .panel-head{flex-wrap:wrap; gap:8px;}

  /* Tables → stacked cards */
  .table-wrap .tx-table.stack{min-width:0;}
  .tx-table.stack thead{display:none;}
  .tx-table.stack, .tx-table.stack tbody, .tx-table.stack tr{display:block; width:auto;}
  .tx-table.stack tbody tr{
    margin:10px 12px; padding:6px 0; background:var(--surface);
    border:1px solid var(--line); border-radius:12px; border-inline-start:3px solid var(--line);
  }
  .tx-table.stack tbody tr:last-child{margin-bottom:12px;}
  .tx-table.stack tr.tx-in {border-inline-start-color:var(--forest-ic);}
  .tx-table.stack tr.tx-out{border-inline-start-color:var(--dash-red);}
  .tx-table.stack tr.tx-warn{border-inline-start-color:var(--dash-brass);}
  .tx-table.stack tbody tr td:first-child{box-shadow:none;}
  .tx-table.stack tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:auto !important; padding:8px 14px !important; border:none; text-align:right !important;
  }
  .tx-table.stack tbody td[data-label]::before{
    content:attr(data-label); font-size:11.5px; font-weight:600; color:var(--ink-soft); flex-shrink:0;
  }
  .tx-table.stack tbody td.tx-title{
    display:block; padding:10px 14px 10px !important; margin-bottom:4px; border-bottom:1px dashed var(--line); font-size:14px;
  }
  .tx-table.stack tbody td.act{display:block; padding-top:10px !important;}
  .tx-table.stack .btn.small{display:block; width:100%; text-align:center; padding:11px 12px; font-size:13px;}
  .tx-prog{align-items:flex-end;}
}