/* ITBUN — additions on top of morvarid.css (project-specific only) */

html{overflow-x:hidden}
.s-logo-img{max-width:34px;max-height:34px;object-fit:contain;border-radius:9px}
.btn .btn-text{display:inline}
@media (max-width:900px){ .btn-text{display:none} }

/* ── Dense editable grid (invoice items / installments) ──
   morvarid.css has no spreadsheet-style component; built with its tokens. */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{font-size:11px;font-weight:700;color:var(--ink3);text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.dtable .inp{padding:8px 10px;font-size:13px}
.dtable td.num, .dtable th.num{text-align:left}

/* Print emoji-icon controls -> line icons happen inside p_print.php itself */

/* Utility used by invoice-form JS (column show/hide toggling) — morvarid.css
   has no display-none utility since it favors data-pane/hidden attribute. */
.d-none{display:none!important}

/* ── Dashboard reminders: alert-flavoured card (not the plain white one) ──
   Warm coral surface, accent bar on top, rows sit as white cards on the tint. */
.card.warncard{background:var(--coral-soft);box-shadow:var(--sh);position:relative}
.card.warncard::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--coral),var(--gold))}
.card.warncard .c-head{padding:18px 20px 14px;align-items:flex-start}
.card.warncard .c-title{color:var(--coral-on)}
.card.warncard .wico{width:30px;height:30px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;background:var(--coral);color:#fff;margin-top:1px}
.card.warncard .c-sub{color:var(--coral-on);opacity:.75}
.card.warncard .rows{padding:0 12px 12px}
.card.warncard .row{background:var(--card);box-shadow:var(--sh)}
.card.warncard .row:hover{background:var(--card2)}
.card.warncard .row + .row{border-top:0;margin-top:8px}
.card.warncard .row .col small{color:var(--ink3)}

/* Reminder rows: fixed-width columns so every row lines up vertically. */
.reminders .row{flex-wrap:nowrap}
.reminders .col{width:112px;min-width:112px;flex-shrink:0}
.reminders .col.mono{text-align:right}
.reminders .chip{width:104px;min-width:104px;flex-shrink:0;justify-content:center;text-align:center;
  margin-inline-start:6px}
.reminders .racts{display:flex;gap:6px;justify-content:flex-end;flex-shrink:0;min-width:104px}
@media (max-width:760px){
  .reminders .row{flex-wrap:wrap;gap:10px}
  .reminders .col,.reminders .chip,.reminders .racts{width:auto;min-width:0}
  .reminders .col.mono{text-align:start}
  .reminders .who{flex:1 0 100%}
}

/* Equal-height cards inside a .cols-2 pair */
.cols-2.eq{align-items:stretch}
.cols-2.eq > .card{display:flex;flex-direction:column}
.cols-2.eq > .card > .c-body{flex:1;display:flex;flex-direction:column;justify-content:center}

/* ── Dashboard KPI block ──
   عدد کلیدی (طلب) باید با یک نگاه خوانده شود، بعد تفکیکش کنارش بیاید. */
.kpi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.kpi-main{padding:22px 24px;border-inline-end:1px solid var(--line)}
.kpi-lbl{font-size:12px;color:var(--ink2)}
.kpi-val{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-top:4px;
  color:var(--coral);font-variant-numeric:tabular-nums}
.kpi-val small{font-size:12px;font-weight:500;color:var(--ink3);margin-inline-start:5px;letter-spacing:0}
.kpi-sub{font-size:11.5px;color:var(--ink3);margin-top:3px}
.kpi-split{display:grid;grid-template-rows:1fr 1fr}
.kpi-part{display:flex;align-items:center;gap:12px;padding:16px 22px;transition:background .13s}
.kpi-part:hover{background:var(--card2)}
.kpi-part + .kpi-part{border-top:1px solid var(--line)}
.kpi-part .kp-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.kpi-part.red  .kp-ico{background:var(--red-soft);color:var(--red-on)}
.kpi-part.blue .kp-ico{background:var(--blue-soft);color:var(--blue-on)}
.kpi-part .kp-txt{min-width:0}
.kpi-part .kp-txt b{display:block;font-size:17px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.kpi-part .kp-txt b small{font-size:11px;font-weight:500;color:var(--ink3);margin-inline-start:4px}
.kpi-part.red  .kp-txt b{color:var(--red)}
.kpi-part .kp-txt span{font-size:11.5px;color:var(--ink2)}
@media (max-width:760px){
  .kpi{grid-template-columns:1fr}
  .kpi-main{border-inline-end:0;border-bottom:1px solid var(--line)}
  .kpi-val{font-size:25px}
}

/* مبالغ ریالی ۱۰ رقمی در ستون ۲۷px از کادر بیرون می‌زنند */
.stat.money .val{font-size:19px}

/* نوار فیلتر طلب (وقتی از کاشی داشبورد وارد فهرست می‌شوی) */
.duebar{border-inline-start:4px solid var(--ink3)}
.duebar.overdue{border-inline-start-color:var(--red)}
.duebar.future{border-inline-start-color:var(--blue)}
.duebar .due-amt{font-size:24px;font-weight:800;line-height:1.3;margin-top:3px;
  font-variant-numeric:tabular-nums}
.duebar.overdue .due-amt{color:var(--red)}
.duebar.future  .due-amt{color:var(--blue)}
.duebar .due-amt small{font-size:11px;font-weight:500;color:var(--ink3);margin-inline-start:5px}

/* ── کارکرد سال مالی: عدد سرتیتر + نمودار ماهانه ──
   تک‌سری و تک‌رنگ (تیل برند) — پس نه راهنمای رنگ لازم دارد نه پالت دسته‌ای.
   برچسب مقدار فقط روی هاور/فوکوس می‌آید تا نمودار شلوغ نشود. */
.fy-card{overflow:visible}          /* تولتیپ نباید با overflow کارت بریده شود */
.fy-card .c-head{flex-wrap:wrap;gap:16px}
.fy-figs{display:flex;gap:22px;margin-inline-start:auto}
.fy-fig span{display:block;font-size:11px;color:var(--ink3)}
.fy-fig b{display:block;font-size:18px;font-weight:800;line-height:1.35;margin-top:2px;
  font-variant-numeric:tabular-nums}
.fy-fig b small{font-size:10.5px;font-weight:500;color:var(--ink3);margin-inline-start:4px}
.fy-fig.teal b{color:var(--teal)}

.fy-chart{position:relative;display:flex;align-items:flex-end;gap:6px;
  height:104px;padding-bottom:22px;margin-top:8px}
.fy-chart::after{content:'';position:absolute;inset-inline:0;bottom:22px;height:1px;background:var(--line)}
.fy-bar{position:relative;flex:1;min-width:0;height:100%;display:flex;
  align-items:flex-end;justify-content:center;outline:0}
.fy-track{display:flex;align-items:flex-end;justify-content:center;
  width:100%;max-width:30px;height:100%}
.fy-track i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--teal);
  opacity:.45;transition:opacity .13s}
.fy-bar.best .fy-track i{opacity:1}
.fy-bar:hover .fy-track i,.fy-bar:focus-visible .fy-track i{opacity:1}
.fy-m{position:absolute;bottom:-20px;font-size:10px;color:var(--ink3);white-space:nowrap}
.fy-bar.now .fy-m{color:var(--teal-on);font-weight:700}
.fy-tip{position:absolute;bottom:calc(100% + 6px);inset-inline-start:50%;
  transform:translateX(50%);white-space:nowrap;z-index:5;
  background:var(--ink);color:var(--card);font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:8px;box-shadow:var(--sh);
  opacity:0;pointer-events:none;transition:opacity .13s}
.fy-bar:hover .fy-tip,.fy-bar:focus-visible .fy-tip{opacity:1}
.fy-note{font-size:11.5px;color:var(--ink2);margin-top:26px;text-align:center}
.fy-note b{color:var(--ink);font-weight:700}
@media (max-width:760px){
  .fy-figs{margin-inline-start:0;gap:18px}
  .fy-fig b{font-size:16px}
  .fy-chart{gap:3px}
  .fy-m{font-size:9px}
}

/* ── ردیف فایل پیوست (فایل قرارداد) ── */
.files-rows .row{cursor:default;flex-wrap:wrap;gap:12px}
.files-rows .racts{display:flex;gap:6px;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
.fico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  font-size:10px;font-weight:800;letter-spacing:.02em;
  background:var(--card2);color:var(--ink3)}
.fico.pdf{background:var(--red-soft);color:var(--red-on)}
.fico.jpg,.fico.jpeg,.fico.png,.fico.webp{background:var(--blue-soft);color:var(--blue-on)}
.fico.doc,.fico.docx{background:var(--teal-soft);color:var(--teal-on)}
.fico.xls,.fico.xlsx{background:var(--gold-soft);color:var(--gold-on)}
.fico.zip,.fico.rar{background:var(--coral-soft);color:var(--coral-on)}
input[type=file].inp{padding:8px 10px;font-size:12.5px;cursor:pointer}
input[type=file].inp::file-selector-button{font-family:inherit;font-size:12px;font-weight:700;
  border:0;border-radius:99px;padding:6px 14px;margin-inline-end:10px;cursor:pointer;
  background:var(--teal-soft);color:var(--teal-on)}

/* Stack several cards inside one .cols grid cell */
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ── Generic fixed-column list rows (customers/invoices/payments/
   commitments/sms-log lists): keeps .col/.chip/.racts the same width
   on every row regardless of content length, so columns line up. ── */
.rows.fixcols .row{flex-wrap:nowrap;gap:18px}
.rows.fixcols .col{width:120px;min-width:120px;flex-shrink:0}
/* .mono flips to LTR, so its text hugs the chip side — pull it back. */
.rows.fixcols .col.mono{width:140px;min-width:140px;text-align:right;padding-inline-end:4px}
.rows.fixcols .chip{width:112px;min-width:112px;flex-shrink:0;justify-content:center;text-align:center;
  margin-inline-start:8px}
.rows.fixcols .racts{display:flex;gap:6px;justify-content:flex-end;flex-shrink:0;margin-inline-start:8px;min-width:34px}

/* ── Sortable column header for .rows.fixcols lists ──
   Mirrors the row geometry exactly (logo 42 + gap 18 + col widths) so the
   labels sit above the values they belong to. Morvarid has no table header. */
.rows-head{display:flex;align-items:center;gap:18px;padding:12px 24px 10px;
  border-bottom:1px solid var(--line)}
.rows-head .h-logo{width:42px;flex-shrink:0}
.rows-head .h-who{flex:1;min-width:0}
.rows-head .h-col{width:120px;min-width:120px;flex-shrink:0}
.rows-head .h-col.num{width:140px;min-width:140px}
.rows-head .h-chip{width:112px;min-width:112px;flex-shrink:0;text-align:center;margin-inline-start:8px}
.rows-head .h-acts{width:34px;flex-shrink:0;margin-inline-start:8px}
.sort-h{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--ink3);padding:3px 7px;border-radius:8px;transition:color .13s,background .13s}
.sort-h:hover{color:var(--teal);background:var(--card2)}
.sort-h.on{color:var(--teal);background:var(--teal-soft)}
.sort-h .sar{opacity:.9}
/* With a header present the per-cell labels are redundant on desktop; below
   900px the header hides and the rows wrap, so the labels come back. */
@media (min-width:901px){ .rows-head + .rows.fixcols .col small{display:none} }
@media (max-width:900px){ .rows-head{display:none} }
@media (max-width:900px){
  .rows.fixcols .row{flex-wrap:wrap;gap:10px}
  .rows.fixcols .col,.rows.fixcols .col.mono,.rows.fixcols .chip{width:auto;min-width:0}
  .rows.fixcols .col.mono{text-align:start}
}