/* ─────────────────────────────────────────────────────────────────────
   HOMEi «متابعة الدفعات والتنفيذ» (PAY-DUE-1, design v6 approved by Kamal
   2026-10-05 on the house design system).

   ONE page, no tabs: the four figures, the month calendar (calm day cards
   in the «النشر والتفاعل» manner — the ONLY period picker, a day or a
   week's total) with the period's side panel, the «معروض» bar with its two
   shortcuts and the filters, then one card per project — its money in the
   period beside its extracts' بنود — and the contractors' on-time share.

   Colours: the design system's own tokens (--lm-d-* in tokens.css, with
   their dark mirror); no colour literal here — the ratchet holds this sheet
   at zero. Text never under 12px. RTL-safe: logical properties only.
   Scoped by `.pdt-page` (the page class) and `.pdt`.

   Registered as a Filament asset — a change here ships NOTHING until
   `php artisan filament:assets` is run and public/css/app/ is committed in
   the same change.
   ──────────────────────────────────────────────────────────────────── */

/* ── the ground ── */
body:has(.pdt-page) { background: var(--lm-d-page); }
body:has(.pdt-page) .fi-main-ctn { background: transparent; }

.pdt { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }
.pdt :focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.pdt .pdt-num { font-variant-numeric: tabular-nums; }
.pdt bdi { unicode-bidi: isolate; }
.pdt .pdt-ic { inline-size: 18px; block-size: 18px; flex: none; }
.pdt .pdt-muted { color: var(--lm-d-muted); font-size: 13px; margin: 0; }
.pdt .is-accent { color: var(--lm-d-accent-ink); }
.pdt .is-info { color: var(--lm-d-info); }
.pdt .is-ok { color: var(--lm-d-ok); }
.pdt .is-warn { color: var(--lm-d-warn); }
.pdt .is-danger { color: var(--lm-d-danger); }
.pdt .is-quiet { color: var(--lm-d-muted); }
.pdt a { color: inherit; text-decoration: none; }
.pdt a:hover { text-decoration: underline; }
.pdt button { font: inherit; color: inherit; cursor: pointer; }

/* ── the head ── */
.pdt-head { display: flex; flex-direction: column; gap: 4px; }
.pdt-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.pdt-sub { margin: 0; font-size: 14px; color: var(--lm-d-muted); line-height: 1.6; }

/* ── 1 · the four figures ── */
.pdt-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 16px;
    overflow: hidden;
}
.pdt-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.pdt-kpi:first-child { border-inline-start: 0; }
.pdt-kpi.is-sel { background: var(--lm-d-accent-soft); box-shadow: inset 0 -3px 0 var(--lm-d-accent); }
.pdt-kpi-l { font-size: 13px; color: var(--lm-d-muted); font-weight: 600; }
.pdt-kpi-v { font-size: 26px; font-weight: 700; line-height: 1.3; }
.pdt-kpi-v small { font-size: 13px; font-weight: 600; color: var(--lm-d-muted); }
.pdt-kpi-s { font-size: 12.5px; line-height: 1.5; color: var(--lm-d-muted); }
.pdt-split { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin-block-start: 2px; }
.pdt-split span { display: inline-flex; align-items: center; gap: 5px; }
.pdt-split i { inline-size: 10px; block-size: 10px; border-radius: 3px; display: inline-block; }
.pdt-split i.is-ready { background: var(--lm-d-info); }
.pdt-split i.is-wait { border: 1.5px dashed var(--lm-d-info); }
.pdt-bar { display: block; block-size: 6px; border-radius: 99px; background: var(--lm-d-chip-bg); overflow: hidden; margin-block-start: 6px; max-inline-size: 260px; }
.pdt-bar i { display: block; block-size: 100%; border-radius: 99px; background: var(--lm-d-info); }
.pdt-bar.is-ok i { background: var(--lm-d-ok); }
.pdt-bar.is-warn i { background: var(--lm-d-warn); }
.pdt-bar.is-danger i { background: var(--lm-d-danger); }
.pdt-bar.is-quiet i { background: var(--lm-d-subtle); }

/* ── 2 · the calendar ── */
.pdt-cal-card { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; overflow: hidden; }
.pdt-cal-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-block-end: 1px solid var(--lm-d-divider); }
.pdt-h2 { margin: 0; font-size: 16px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.pdt-h2 .pdt-ic, .pdt-h3 .pdt-ic { color: var(--lm-d-info); }
.pdt-mn { display: flex; align-items: center; gap: 8px; }
.pdt-month { font-size: 14px; min-inline-size: 96px; text-align: center; }
.pdt-icon-btn {
    inline-size: 32px; block-size: 32px; display: grid; place-items: center;
    border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-muted);
}
.pdt-icon-btn .pdt-ic { inline-size: 16px; block-size: 16px; }
.pdt-btn { min-block-size: 32px; padding-inline: 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); font-size: 13px; font-weight: 700; }
.pdt-btn:hover, .pdt-icon-btn:hover { background: var(--lm-d-hover); }
.pdt-hint { margin-inline-start: auto; font-size: 12.5px; color: var(--lm-d-muted); }

.pdt-cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; padding: 12px 14px 14px; background: var(--lm-d-page); }
.pdt-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 92px; gap: 6px; align-content: start; }
.pdt-wd { font-size: 12px; font-weight: 700; color: var(--lm-d-muted); text-align: center; padding-block: 2px; }
.pdt-day {
    min-block-size: 72px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; text-align: start;
    background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px;
}
.pdt-day:hover { border-color: var(--lm-d-control-edge); }
.pdt-day.is-out { background: var(--lm-d-page); opacity: .7; }
.pdt-day.is-past { background: var(--lm-d-page); }
.pdt-day.in-sel { border-color: var(--lm-d-accent); }
.pdt-day.is-today { border-color: var(--lm-d-accent); box-shadow: 0 0 0 2px var(--lm-d-accent-soft); }
.pdt-day.is-sel { outline: 2px solid var(--lm-d-ink); outline-offset: 1px; }
.pdt-dn { font-size: 12px; font-weight: 700; color: var(--lm-d-ink); }
.pdt-dn-full { display: none; }
.pdt-day.is-out .pdt-dn, .pdt-day.is-past .pdt-dn { color: var(--lm-d-muted); }

.pdt-e {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    border: 1px solid transparent; border-radius: 8px; padding: 2px 6px;
    font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.pdt-e small { font-size: 12px; font-weight: 600; opacity: .85; }
.pdt-e.is-ready { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.pdt-e.is-wait { background: var(--lm-d-surface); color: var(--lm-d-info); border: 1px dashed var(--lm-d-info); font-weight: 600; }
.pdt-e.is-paid { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.pdt-e.is-late { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); border-color: var(--lm-d-gap-edge); }
.pdt-e.is-line { background: var(--lm-d-surface); color: var(--lm-d-muted); border: 1px dashed var(--lm-d-control-edge); font-weight: 600; }
.pdt-e.is-line.is-late { color: var(--lm-d-danger); }
.pdt-e.is-line.is-ok { color: var(--lm-d-ok); }
.pdt-e.is-line.is-warn { color: var(--lm-d-warn); }

.pdt-wk {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
    padding: 0 6px; border: 0; border-radius: 10px; background: transparent; text-align: start; font-size: 12px; color: var(--lm-d-muted);
}
.pdt-wk b { font-size: 13.5px; color: var(--lm-d-ink); }
.pdt-wk small { font-size: 12px; font-weight: 600; }
.pdt-wk:hover { background: var(--lm-d-hover); }
.pdt-wk.is-on { background: var(--lm-d-accent-soft); }
.pdt-wk.is-on b { color: var(--lm-d-accent-ink); }

.pdt-side {
    align-self: start; display: flex; flex-direction: column; gap: 10px;
    background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px; padding: 14px;
}
.pdt-h3 { margin: 0; font-size: 15.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pdt-h3 small { font-size: 12.5px; font-weight: 500; color: var(--lm-d-muted); margin-inline-start: auto; }
.pdt-sec { font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); margin-block-start: 4px; }
.pdt-it { display: flex; justify-content: space-between; gap: 8px; border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.pdt-it.is-late { border-color: var(--lm-d-gap-edge); background: var(--lm-d-danger-soft); }
.pdt-it b { display: block; }
.pdt-it small { display: block; color: var(--lm-d-muted); font-size: 12px; }
.pdt-it .r { text-align: end; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pdt-note { display: flex; gap: 6px; align-items: flex-start; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; }
.pdt-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.pdt-note .pdt-ic { inline-size: 16px; block-size: 16px; }

.pdt-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 0 14px 12px; font-size: 12px; color: var(--lm-d-muted); background: var(--lm-d-page); }
.pdt-leg .pdt-e { display: inline-flex; }

/* ── 3 · what is shown + the filters ── */
.pdt-selbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
    background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px;
}
.pdt-sel-t { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 700; }
.pdt-sel-t .pdt-ic { color: var(--lm-d-accent-ink); }
.pdt-link { display: inline-flex; gap: 4px; align-items: center; border: 0; background: none; color: var(--lm-d-info); font-weight: 700; font-size: 13px; }
.pdt-link .pdt-ic { inline-size: 16px; block-size: 16px; }
.pdt-sp { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pdt-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pdt-chip {
    display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: 12px;
    border: 1px solid var(--lm-d-border); border-radius: 99px; background: var(--lm-d-surface); font-size: 13px; font-weight: 600;
}
.pdt-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pdt-chip:hover { background: var(--lm-d-chip-bg); }
.pdt-chip.is-on { background: var(--lm-d-info-soft); border-color: var(--lm-d-info); color: var(--lm-d-info); }
.pdt-select {
    min-block-size: 34px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background-color: var(--lm-d-surface);
    color: var(--lm-d-ink); font-size: 13px; padding-block: 4px; padding-inline: 10px 30px;
}
.pdt-search {
    margin-inline-start: auto; display: flex; align-items: center; gap: 8px; min-inline-size: 260px; min-block-size: 36px; padding-inline: 10px;
    border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-muted);
}
.pdt-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--lm-d-ink); font-size: 13px; padding: 0; box-shadow: none; }
.pdt-search input:focus { outline: none; box-shadow: none; }

/* ── 4 · the project cards ── */
.pdt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pdt-list { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.pdt-proj { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; overflow: hidden; }
.pdt-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-block-end: 1px solid var(--lm-d-divider); background: var(--lm-d-page); }
.pdt-pn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.pdt-pn .pdt-ic { color: var(--lm-d-info); }
.pdt-pt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-inline-start: auto; }
.pdt-tot { font-size: 15px; }
.pdt-tot small { font-size: 12.5px; font-weight: 600; color: var(--lm-d-muted); }
.pdt-pb { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pdt-col { min-inline-size: 0; }
.pdt-col + .pdt-col { border-inline-start: 1px solid var(--lm-d-divider); }
.pdt-ch { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); border-block-end: 1px solid var(--lm-d-divider); }
.pdt-ch .pdt-ic { inline-size: 16px; block-size: 16px; }
.pdt-ch span { margin-inline-start: auto; font-weight: 600; }
.pdt-r { display: grid; align-items: center; gap: 10px; padding: 9px 14px; border-block-end: 1px solid var(--lm-d-divider); font-size: 13.5px; }
.pdt-r:last-child { border-block-end: 0; }
.pdt-r.is-link { background: var(--lm-d-danger-soft); }
.pdt-pay { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
.pdt-line { grid-template-columns: minmax(0, 1fr) auto; }
.pdt-rm { min-inline-size: 0; }
.pdt-rm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdt-rm small { display: block; color: var(--lm-d-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdt-rt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pdt-when { text-align: end; font-size: 12.5px; white-space: nowrap; color: var(--lm-d-muted); }
.pdt-when b { display: block; font-size: 14px; color: var(--lm-d-ink); }
.pdt-when.is-today b { color: var(--lm-d-accent-ink); }
.pdt-kind { inline-size: 30px; block-size: 30px; border-radius: 9px; display: grid; place-items: center; }
.pdt-kind .pdt-ic { inline-size: 16px; block-size: 16px; }
.pdt-kind.is-advance { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.pdt-kind.is-extract { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.pdt-kind.is-supplier { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.pdt-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--lm-d-danger); }
.pdt-flag .pdt-ic { inline-size: 14px; block-size: 14px; }
.pdt-tag {
    display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; padding-inline: 8px; border-radius: 99px;
    font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--lm-d-quiet-bg); color: var(--lm-d-muted);
}
.pdt-tag::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.pdt-tag.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.pdt-tag.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.pdt-tag.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.pdt-tag.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.pdt-empty { margin: 0; padding: 12px 14px; font-size: 13px; color: var(--lm-d-muted); }
.pdt-empty--page { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; padding: 24px; text-align: center; }

.pdt-cn { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.pdt-cn-r { padding-block: 8px; border-block-end: 1px solid var(--lm-d-divider); }
.pdt-cn-r:last-child { border-block-end: 0; }
.pdt-cn-r .t { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.pdt-cn-r .t span { font-weight: 700; }
.pdt-cn-r .pdt-bar { max-inline-size: none; margin-block: 6px 4px; }
.pdt-cn-r small { display: block; font-size: 12.5px; color: var(--lm-d-muted); }

/* ── wide screens: the period panel never grows past the calendar ──
   A busy week listed 10+ cards in the panel and stretched the calendar
   card to the panel's height, leaving a tall empty block under the month
   (Kamal 6-10). The panel now takes the calendar's height and scrolls. */
@media (min-width: 1101px) {
    .pdt-side { align-self: stretch; contain: size; overflow-y: auto; overscroll-behavior: contain; }
}

/* ── narrow screens: the calendar becomes the list of its busy days ── */
@media (max-width: 1100px) {
    .pdt-cal-body, .pdt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .pdt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdt-kpi:nth-child(3) { border-inline-start: 0; }
    .pdt-kpi { border-block-end: 1px solid var(--lm-d-divider); padding: 10px 12px; }
    .pdt-kpi-v { font-size: 20px; }
    .pdt-hint { display: none; }
    .pdt-cal { grid-template-columns: minmax(0, 1fr); }
    .pdt-wd, .pdt-wk, .pdt-day.is-out { display: none; }
    .pdt-day { min-block-size: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .pdt-day:not(:has(.pdt-e)) { display: none; }
    .pdt-dn { inline-size: 100%; font-size: 0; }
    .pdt-dn-full { display: inline; font-size: 13px; }
    .pdt-pb { grid-template-columns: minmax(0, 1fr); }
    .pdt-col + .pdt-col { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .pdt-pay { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .pdt-pay .pdt-rt { grid-column: 2 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
    .pdt-pt { margin-inline-start: 0; inline-size: 100%; }
    .pdt-search { min-inline-size: 0; inline-size: 100%; }
}