/* ============================================================
   دفتر العقار — نظام تصميم «ورق عاجي + حبر + خط شمبانيا»
   ============================================================ */

:root{
  --paper:#FAF8F4;
  --card:#FFFFFF;
  --ink:#131315;
  --ink-2:#3A3936;
  --muted:#8A857C;
  --line:#E7E2D9;
  --line-soft:#F1EDE5;
  --gold:#C6A664;
  --gold-soft:#E8DCC0;
  --gold-deep:#8F6B22;
  --paid-bg:#E9F0EA; --paid-fg:#2F6B4F; --paid-bd:#CBDDCF;
  --part-bg:#F7EFDD; --part-fg:#9A7420; --part-bd:#EBDCB4;
  --due-bg:#F7E6E3;  --due-fg:#A23A32;  --due-bd:#EFD3CE;
  --r:14px;
  --sh:0 1px 2px rgba(19,19,21,.05);
  --font:'Tajawal','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body.no-scroll{ overflow:hidden; }

button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
.hidden{ display:none !important; }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:#FFFFFF;
  border-bottom:1px solid var(--gold);
  box-shadow:0 1px 0 rgba(19,19,21,.03);
}
.topbar-inner{
  max-width:1440px; margin:0 auto;
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:var(--ink); color:#F6F2E9;
  display:grid;place-items:center;
}
.brand-mark svg{ width:21px;height:21px; }
.brand-text{ min-width:0; }
.brand-text h1{
  margin:0;font-size:17px;font-weight:800;letter-spacing:-.2px;line-height:1.2;
  white-space:nowrap;
}
.brand-text p{
  margin:0;font-size:11px;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.tabs{
  max-width:1440px;margin:0 auto;
  padding:0 10px 0 10px;
  display:flex; gap:2px;
  overflow-x:auto; scrollbar-width:none;
  border-top:1px solid var(--line-soft);
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  min-height:46px;padding:0 14px;
  border:0;background:transparent;
  color:var(--muted);font-size:13.5px;font-weight:500;
  white-space:nowrap;
  transition:color .16s ease;
}
.tab .ico{ width:17px;height:17px; }
.tab:hover{ color:var(--ink); }
.tab.is-active{ color:var(--ink); font-weight:700; }
.tab.is-active::after{
  content:"";position:absolute;inset-inline:10px;bottom:0;height:2px;
  background:var(--gold);border-radius:2px 2px 0 0;
}

/* ---------- Layout ---------- */
.main{
  max-width:1440px;margin:0 auto;
  padding:18px 16px 56px;
}
.foot{
  max-width:1440px;margin:0 auto;padding:0 16px 28px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  color:var(--muted);font-size:11.5px;
}
.foot-dot{ color:var(--gold); }

.view-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.view-title{ margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px; }
.view-sub{ margin:2px 0 0;font-size:13px;color:var(--muted); }
.view-actions{ display:flex;gap:8px;flex-wrap:wrap; }

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:16px;
}
.card-title{ margin:0;font-size:15px;font-weight:700;letter-spacing:-.1px; }
.card-sub{ margin:2px 0 0;font-size:12px;color:var(--muted); }
.card-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:12px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 16px;
  border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);
  font-size:13.5px;font-weight:500;
  transition:background .15s ease,border-color .15s ease,transform .1s ease,color .15s ease;
  user-select:none;
}
.btn:hover{ background:#F7F4EE; }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn .ico{ width:16px;height:16px; }
.btn-primary{ background:var(--ink); border-color:var(--ink); color:#FBF9F4; font-weight:700; }
.btn-primary:hover{ background:#2B2B30; border-color:#2B2B30; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn-ghost:hover{ background:#F3F0E9; color:var(--ink); }
.btn-danger{ color:var(--due-fg); border-color:var(--due-bd); background:#FDF4F2; }
.btn-danger:hover{ background:#FAE8E4; }
.btn-sm{ min-height:38px; padding:0 12px; font-size:12.5px; border-radius:9px; }
.btn-icon{ width:44px; padding:0; }
.btn-label{ white-space:nowrap; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

@media (max-width:479px){
  .btn-label{ display:none; }
  #btnPrintMonth{ width:44px; padding:0; }
}

/* ---------- Inputs ---------- */
.inp{
  width:100%;
  min-height:42px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:14px;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.inp::placeholder{ color:#B6B0A5; }
.inp:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,166,100,.16);
}
.inp-sm{ min-height:38px; font-size:12.5px; padding:6px 10px; width:auto; }
textarea.inp{ min-height:64px; resize:vertical; line-height:1.5; }
select.inp{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A857C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 10px center; background-size:14px; padding-left:30px; }
.inp-cell{ min-height:38px; font-size:13px; padding:5px 9px; }
.inp-cell.wide{ min-width:130px; }
.year-pick{ display:inline-flex; }
.year-pick .inp{ min-height:38px; font-weight:700; }

.field{ display:flex;flex-direction:column;gap:5px;min-width:0; }
.field > span{ font-size:11.5px;color:var(--muted);font-weight:500; }
.field-spacer{ display:block;height:11px; }
.field.justify-end{ justify-content:flex-end; }

/* ---------- KPI ---------- */
.kpi-card{ display:flex; align-items:center; gap:14px; padding:16px; }
.kpi-card.block{ display:block; }
.kpi-ring{ position:relative;width:84px;height:84px;flex:0 0 auto; }
.kpi-ring svg{ width:84px;height:84px;display:block; }
.ring-track{ fill:none;stroke:var(--line-soft);stroke-width:7; }
.ring-fill{
  fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .55s cubic-bezier(.22,.8,.3,1);
}
.ring-pct{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
}
.kpi-body{ min-width:0; }
.kpi-label{
  margin:0 0 4px;font-size:12.5px;font-weight:500;color:var(--muted);
}
.kpi-value{
  margin:0;font-size:24px;font-weight:800;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-sub{ margin:3px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45; }
.kpi-duo{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px; }
.duo-k{ display:block;font-size:11px;color:var(--muted); }
.duo-v{
  display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.duo-v.muted{ color:var(--muted);font-weight:600; }
.bar{ height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin:10px 0 0; }
.bar > span{ display:block;height:100%;border-radius:99px;background:var(--ink);transition:width .45s ease; }

.net-card{
  border-color:var(--gold-soft);
  background:linear-gradient(180deg,#FFFDF7 0%,#FFFFFF 62%);
}
.net-head{ display:flex;align-items:center;justify-content:space-between;gap:10px; }
.net-badge{
  font-size:11px;font-weight:700;color:var(--gold-deep);
  background:#FBF6EA;border:1px solid var(--gold-soft);
  padding:3px 9px;border-radius:99px;white-space:nowrap;
}
.net-value{
  margin:4px 0 10px;
  font-size:clamp(26px,7vw,36px);font-weight:800;letter-spacing:-.8px;
  color:var(--gold-deep);
  font-variant-numeric:tabular-nums;line-height:1.15;
  word-break:break-word;
}
.net-split{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }

.coll-nums{ display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px; }
.coll-item{
  text-align:center;border-radius:10px;padding:7px 2px;
  font-variant-numeric:tabular-nums;
}
.coll-item span{ display:block;font-size:19px;font-weight:800;line-height:1.15; }
.coll-item small{ font-size:10.5px;font-weight:600;opacity:.85; }
.c-ok{ background:var(--paid-bg); color:var(--paid-fg); }
.c-warn{ background:var(--part-bg); color:var(--part-fg); }
.c-bad{ background:var(--due-bg); color:var(--due-fg); }
.stack{ display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-soft);margin-top:10px; }
.stack > span{ display:block;height:100%;transition:width .4s ease; }
.s-ok{ background:var(--paid-fg); opacity:.85; }
.s-warn{ background:var(--part-fg); opacity:.8; }
.s-bad{ background:var(--due-fg); opacity:.75; }

/* ---------- Chart ---------- */
.chart-card{ padding:16px 14px 10px; }
.chart-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:6px;padding:0 4px;
}
.legend{ display:flex;gap:12px;flex-wrap:wrap;align-items:center; }
.lg-item{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted); }
.dot{ width:10px;height:10px;border-radius:3px;display:inline-block; }
.dot-income{ background:#232326; }
.dot-exp{ background:#D9D0C0; }
.dot-net{ background:var(--gold); border-radius:99px; height:3px; width:14px; }

.chart-wrap{ position:relative;width:100%;height:268px; }
.chart-wrap canvas{ display:block;width:100%;height:100%; }
.chart-tip{
  position:absolute;z-index:6;pointer-events:none;
  background:var(--ink);color:#FBF9F4;
  border-radius:10px;padding:7px 10px;
  font-size:11.5px;line-height:1.5;white-space:nowrap;
  transform:translate(-50%,-105%);
  box-shadow:0 6px 18px rgba(19,19,21,.18);
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .chart-wrap{ height:228px; }
}

/* ---------- Overdue list ---------- */
.overdue-list{ list-style:none;margin:0;padding:0; }
.od-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 4px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;border-radius:8px;
  transition:background .15s ease;
  min-height:44px;
}
.od-item:last-child{ border-bottom:0; }
.od-item:hover{ background:#FBF9F5; }
.od-main{ min-width:0; }
.od-name{ display:block;font-size:13.5px;font-weight:700; }
.od-sub{ display:block;font-size:11.5px;color:var(--muted); }
.od-right{ display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.od-amount{ font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--due-fg); }
.od-empty{ padding:18px 4px;color:var(--muted);font-size:13px;text-align:center; }

/* ---------- Chips / pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:99px;border:1px solid transparent;
  white-space:nowrap;
}
.pill-paid{ background:var(--paid-bg); color:var(--paid-fg); border-color:var(--paid-bd); }
.pill-part{ background:var(--part-bg); color:var(--part-fg); border-color:var(--part-bd); }
.pill-due{ background:var(--due-bg); color:var(--due-fg); border-color:var(--due-bd); }

.legend-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:10px;
}
.hint{ font-size:11.5px;color:var(--muted); }

/* ---------- Month strip ---------- */
.month-strip{
  display:flex;gap:6px;overflow-x:auto;
  padding:2px 0 6px;scrollbar-width:thin;
}
.month-strip::-webkit-scrollbar{ height:4px; }
.month-strip::-webkit-scrollbar-thumb{ background:var(--line);border-radius:99px; }
.mchip{
  min-height:38px;padding:0 13px;border-radius:99px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.mchip:hover{ background:#F7F4EE; }
.mchip.is-active{ background:var(--ink);color:#FBF9F4;border-color:var(--ink);font-weight:700; }

/* ---------- Tables ---------- */
.tbl-wrap{
  overflow:auto;
  max-height:70vh;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--sh);
  -webkit-overflow-scrolling:touch;
}
.tbl-wrap.flat{ border:0;border-radius:0;box-shadow:none;max-height:none; }

.grid-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.grid-table th,
.grid-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--line-soft);
  border-inline-end:1px solid var(--line-soft);
  text-align:start;
  vertical-align:middle;
  white-space:nowrap;
}
.grid-table thead th{
  position:sticky;top:0;z-index:3;
  background:#FBF9F5;
  border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--ink-2);
}
.grid-table tbody tr:last-child th,
.grid-table tbody tr:last-child td{ border-bottom:1px solid var(--line-soft); }
.grid-table tfoot th,
.grid-table tfoot td{
  background:#FCFAF5;font-weight:800;font-size:12.5px;
  border-top:1px solid var(--line);
  position:sticky;bottom:0;z-index:3;
}
.grid-table .col-month{
  position:sticky;inset-inline-start:0;z-index:2;
  background:#FBF9F5;font-weight:700;font-size:12.5px;
  min-width:94px;
  border-inline-end:1px solid var(--line);
  box-shadow:1px 0 0 rgba(231,226,217,.6);
}
.grid-table thead .col-month{ z-index:6; }
.grid-table tfoot .col-month{ z-index:4; }
.grid-table .total-col{
  background:#FCFAF5;font-weight:800;color:var(--ink);
  border-inline-start:1px solid var(--line);
}

.rent-table th.unit-col{
  min-width:106px;text-align:center;font-weight:500;
  background:#FBF9F5;
}
.rent-table th.unit-col .u-name{
  display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin:0 auto;
}
.rent-table th.unit-col .u-due{
  display:block;font-size:10.5px;color:var(--muted);font-weight:500;
}
.rent-table td{ padding:4px 5px; text-align:center; }

.cell{
  position:relative;
  display:block;width:100%;
  min-height:44px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:transform .1s ease,box-shadow .15s ease,filter .15s ease;
  user-select:none;
}
.cell:hover{ box-shadow:0 1px 4px rgba(19,19,21,.10); }
.cell:active{ transform:scale(.96); }
.cell:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.st-paid{ background:var(--paid-bg); color:var(--paid-fg); border-color:var(--paid-bd); }
.st-part{ background:var(--part-bg); color:var(--part-fg); border-color:var(--part-bd); }
.st-due { background:var(--due-bg);  color:var(--due-fg);  border-color:var(--due-bd); }
.st-none{ background:#F5F3EF; color:var(--muted); border-color:#EDE9E1; }
.note-dot{
  position:absolute;top:7px;inset-inline-end:7px;
  width:5px;height:5px;border-radius:99px;background:currentColor;opacity:.7;
}
.foot-cell{ text-align:center; }

/* ---------- Toggles (bills) ---------- */
.toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 12px;border-radius:99px;
  border:1px solid var(--due-bd);background:var(--due-bg);color:var(--due-fg);
  font-size:11.5px;font-weight:700;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
  user-select:none;
}
.toggle:active{ transform:scale(.96); }
.toggle.is-paid{ background:var(--paid-bg);color:var(--paid-fg);border-color:var(--paid-bd); }
.toggle:focus-visible{ outline:2px solid var(--gold);outline-offset:2px; }

/* ---------- Bills stats ---------- */
.stat{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:var(--sh);padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.stat-k{ font-size:11.5px;color:var(--muted);font-weight:500; }
.stat-v{ font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px; }
.stat-s{ font-size:11.5px;font-weight:600;color:var(--muted); }
.stat-s.warn{ color:var(--due-fg); }
.stat-s.ok{ color:var(--paid-fg); }

/* ---------- Segmented ---------- */
.seg{
  display:inline-flex;gap:2px;padding:3px;
  background:#F4F1EA;border:1px solid var(--line);border-radius:10px;
}
.seg button{
  min-height:34px;padding:0 12px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);font-size:12px;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.seg button.is-active{
  background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(19,19,21,.08);
}

/* ---------- Bars (expense grouping) ---------- */
.bars{ display:grid;gap:11px; }
.bar-row{
  display:grid;grid-template-columns:78px 1fr auto;
  align-items:center;gap:10px;
}
.bar-name{ font-size:12px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bar-track{ height:10px;border-radius:99px;background:#F4F0E8;overflow:hidden;display:block; }
.bar-fill{ display:block;height:100%;border-radius:99px;transition:width .45s ease; }
.bar-val{ font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap; }
.empty{ margin:0;font-size:13px;color:var(--muted);padding:14px 0;text-align:center; }

.mini-stats{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.mini{
  border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;background:#FDFCF9;
}
.mini span{ display:block;font-size:11px;color:var(--muted); }
.mini strong{ display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.2px;margin-top:2px; }

/* ---------- Demo banner ---------- */
.demo-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#FBF6EA;border:1px solid var(--gold-soft);
  border-radius:var(--r);padding:12px 14px;margin-bottom:14px;
}
.demo-banner .ico{ width:18px;height:18px;color:var(--gold-deep);flex:0 0 auto; }
.demo-banner-txt{ flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:1px; }
.demo-banner-txt strong{ font-size:13px;font-weight:800;color:var(--gold-deep); }
.demo-banner-txt span{ font-size:12px;color:#7A6A48;line-height:1.45; }
.demo-banner-actions{ display:flex;gap:8px;flex-wrap:wrap; }

/* ---------- Overlay / sheet ---------- */
.overlay{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:center;
}
.overlay.hidden{ display:none !important; }
.overlay-backdrop{
  position:absolute;inset:0;
  background:rgba(19,19,21,.42);
  animation:fadeIn .18s ease;
}
.sheet{
  position:relative;
  width:min(520px,100%);
  max-height:92vh;overflow:auto;
  background:#fff;
  border-radius:18px 18px 0 0;
  box-shadow:0 -10px 44px rgba(19,19,21,.22);
  padding:16px;
  animation:slideUp .22s cubic-bezier(.22,.8,.3,1);
}
@media (min-width:640px){
  .overlay{ align-items:center; }
  .sheet{ border-radius:18px; animation:pop .2s cubic-bezier(.22,.8,.3,1); }
}
@keyframes slideUp{ from{ transform:translateY(28px);opacity:.6 } to{ transform:none;opacity:1 } }
@keyframes pop{ from{ transform:scale(.96);opacity:.5 } to{ transform:none;opacity:1 } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

.sheet-head{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px; }
.sheet-head h3{ margin:0;font-size:16px;font-weight:800;letter-spacing:-.2px; }
.sheet-body{ display:grid;gap:12px; }
.due-line{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#FCFAF5;border:1px solid var(--line-soft);
  border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--muted);
}
.due-line strong{ font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums; }
.quick-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.quick{
  min-height:44px;border-radius:10px;border:1px solid transparent;
  font-size:12px;font-weight:700;padding:0 6px;
  transition:transform .1s ease,filter .15s ease;
}
.quick:active{ transform:scale(.97); }
.q-paid{ background:var(--paid-bg);color:var(--paid-fg);border-color:var(--paid-bd); }
.q-part{ background:var(--part-bg);color:var(--part-fg);border-color:var(--part-bd); }
.q-due { background:var(--due-bg); color:var(--due-fg); border-color:var(--due-bd); }
.sheet-foot{ display:flex;gap:8px;justify-content:flex-end;margin-top:14px; }
.sheet-foot .btn{ flex:1 1 auto; }
@media (min-width:640px){ .sheet-foot .btn{ flex:0 0 auto; min-width:110px; } }

/* ---------- Toast ---------- */
.toast{
  position:fixed;z-index:120;
  inset-inline:0;bottom:22px;margin:0 auto;
  width:max-content;max-width:calc(100vw - 32px);
  background:var(--ink);color:#FBF9F4;
  padding:10px 18px;border-radius:99px;
  font-size:13px;font-weight:500;
  opacity:0;transform:translateY(12px);
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
  box-shadow:0 10px 30px rgba(19,19,21,.24);
}
.toast.hidden{ display:none !important; }
.toast.show{ opacity:1;transform:none; }

/* ---------- Print ---------- */
.print-area{ display:none; }

@media print{
  body{
    background:#fff !important;
    background-image:none !important;
    color:#000;
  }
  .app-shell,.overlay,.toast,.demo-banner{ display:none !important; }
  .print-area{ display:block !important; }
  @page{ size:A4; margin:12mm; }
  .pr-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    border-bottom:2px solid #C6A664;padding-bottom:8px;margin-bottom:14px;
  }
  .pr-head h1{ margin:0;font-size:20px;font-weight:800; }
  .pr-head p{ margin:2px 0 0;font-size:12px;color:#444; }
  .pr-meta{ font-size:10.5px;color:#666;text-align:left; }
  .pr-summary{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;
  }
  .pr-box{ border:1px solid #ddd;border-radius:6px;padding:7px 9px; }
  .pr-box span{ display:block;font-size:9.5px;color:#666; }
  .pr-box strong{ display:block;font-size:13px;font-weight:800;margin-top:1px; }
  .pr-section-title{
    font-size:12.5px;font-weight:800;margin:14px 0 6px;
    border-inline-start:3px solid #C6A664;padding-inline-start:7px;
  }
  .pr-table{ width:100%;border-collapse:collapse;font-size:10px; }
  .pr-table th,.pr-table td{
    border:1px solid #ccc;padding:3px 5px;text-align:right;
    font-variant-numeric:tabular-nums;
  }
  .pr-table th{ background:#F2EFE8;font-weight:700; }
  .pr-foot{ margin-top:16px;font-size:9.5px;color:#777;text-align:center; }
  tr{ break-inside:avoid; }
}

/* ---------- Small screens ---------- */
@media (max-width:430px){
  .main{ padding:14px 12px 48px; }
  .card{ padding:14px; }
  .view-title{ font-size:19px; }
  .kpi-card{ gap:10px; }
  .kpi-ring,.kpi-ring svg{ width:70px;height:70px; }
  .ring-pct{ font-size:13px; }
  .kpi-value{ font-size:20px; }
  .net-split{ grid-template-columns:1fr 1fr; }
  .mini-stats{ grid-template-columns:1fr; }
  .bar-row{ grid-template-columns:64px 1fr auto; }
}

/* ---------- Currency picker ---------- */
#currencySelect{ max-width:160px; font-weight:700; }
.topbar-actions .year-pick{ min-width:0; }

/* ---------- Unit rename (rent table headers) ---------- */
.head-actions{ display:flex; align-items:center; gap:6px; }

.rent-table th.unit-col .u-name-btn{
  display:flex; align-items:center; justify-content:center; gap:4px;
  width:100%; max-width:104px; margin:0 auto;
  min-height:26px; padding:2px 5px;
  border:1px solid transparent; border-radius:7px;
  background:transparent; color:var(--ink);
  font-size:12.5px; font-weight:700; line-height:1.3;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
  user-select:none;
}
.rent-table th.unit-col .u-name-btn > span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rent-table th.unit-col .u-name-btn .u-pen{ width:11px; height:11px; flex:0 0 auto; opacity:.45; }
.rent-table th.unit-col .u-name-btn:hover{ background:#F1EDE5; border-color:var(--line); }
.rent-table th.unit-col .u-name-btn:hover .u-pen{ opacity:.95; }
.rent-table th.unit-col .u-name-btn:active{ transform:scale(.97); }
.rent-table th.unit-col .u-name-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
@media (hover:none){
  .rent-table th.unit-col .u-name-btn .u-pen{ opacity:.85; }
}

/* ---------- Narrow header: currency + year share a row ---------- */
@media (max-width:600px){
  .topbar-inner{ flex-wrap:wrap; row-gap:8px; }
  .topbar-actions{ width:100%; }
  .topbar-actions .year-pick{ flex:1 1 0; }
  .topbar-actions .year-pick .inp{ width:100%; max-width:none; min-width:0; }
  #currencySelect{ max-width:none; }
  #btnPrintMonth{ flex:0 0 auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Summary view ---------- */
.sum-table th,.sum-table td{ text-align:center; }
.sum-table thead th{ font-size:11px; }
.sum-table .col-month{ text-align:start; min-width:96px; }
.sum-table .col-serv{ background:#FCFAF5; }
.sum-table .col-net{ background:#F2F6F3; }
.sum-table .col-exp{ background:#FCFAF6; }
.sum-table .col-final{ background:#FBF6EA; }
.sum-table tbody td.col-net,
.sum-table tbody td.col-final{ font-weight:700; }
.sum-table tfoot .col-net,
.sum-table tfoot .col-final{ font-size:13px; }
.v-pos{ color:var(--paid-fg); }
.v-neg{ color:var(--due-fg); }
.v-muted{ color:var(--muted); }
.v-strong{ font-weight:700; }

.sum-mbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 11px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--ink);
  font-size:12.5px;font-weight:700;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
  user-select:none;
}
.sum-mbtn:hover{ background:#F1EDE5; border-color:var(--line); }
.sum-mbtn:active{ transform:scale(.97); }
.sum-mbtn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.sum-note{
  margin:10px 2px 0;
  font-size:11.5px;color:var(--muted);line-height:1.65;
  display:flex;gap:6px;align-items:flex-start;
}
.sum-note strong{ color:var(--ink-2);flex:0 0 auto; }

.sum-year{ grid-template-columns:1fr 1fr; }
@media (min-width:1024px){ .sum-year{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sum-year .mini strong.v-pos{ color:var(--paid-fg); }
.sum-year .mini strong.v-neg{ color:var(--due-fg); }

@media (max-width:430px){
  .sum-table .col-month{ min-width:82px; }
  .sum-table th,.sum-table td{ padding:7px 6px; font-size:12px; }
  .sum-table thead th{ font-size:10.5px; }
}