.rgft-costs{
    --ck-accent: var(--rgft-primary, #b8963e);
    --ck-ink: #15171b;
    --ck-line: #e3e3e6;
    --ck-muted: #78787b;
    --ck-faint: #969699;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    color: #15171b;
    background: #f7f7f5;
    -webkit-font-smoothing: antialiased;
}
.rgft-costs *{ box-sizing: border-box; }
.rgft-costs a{ color: var(--ck-accent); text-decoration: none; }
.rgft-costs a:hover{ color: #8a6f23; }

/* ── Header ─────────────────────────────────────────────────────────── */
/* Title/date/logo now uses the shared .rgft-page-head-v2 (rtl.css) — same
   header everywhere. Just position it inside this page's own width. */
.rgft-costs > .rgft-page-head-v2{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
}
@media (max-width: 900px){
    .rgft-costs > .rgft-page-head-v2{ padding-left: 14px; padding-right: 14px; }
}

/* ── Page grid ──────────────────────────────────────────────────────── */
.rgft-costs-grid{
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 26px 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Range chips ────────────────────────────────────────────────────── */
.rgft-costs-chips{
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.rgft-costs-chip{
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ck-line);
    color: var(--ck-muted);
}
.rgft-costs-chip.is-active{
    background: var(--ck-ink);
    border-color: var(--ck-ink);
    color: #fff;
    font-weight: 500;
}

.rgft-costs-note{
    margin: 0;
    background: #f7f7fb;
    border: 1px solid #f0dfc0;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 12.5px;
    color: #8a6a12;
    line-height: 1.7;
    text-align: center;
}

/* ── KPI cards ──────────────────────────────────────────────────────── */
.rgft-costs-kpis{
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
}
/* Waste logged => a 6th KPI card exists; the base 5-col grid would leave
   a dangling orphan row, so the modifier widens to 6. Below 1200px both
   variants collapse the same way. */
.rgft-costs-kpis--6{ grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1200px){ .rgft-costs-kpis--6{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1080px){ .rgft-costs-kpis, .rgft-costs-kpis--6{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rgft-costs-kpi{
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.rgft-costs-kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-costs-kpi__label{ font-size: 12.5px; color: var(--ck-muted); }
.rgft-costs-kpi__value{ font-size: 24px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rgft-costs-kpi__sub{ font-size: 11.5px; color: var(--ck-faint); }
.rgft-costs-kpi--total{ background: var(--ck-ink); border-color: var(--ck-ink); color: #fff; }
.rgft-costs-kpi--total .rgft-costs-kpi__label{ color: #b5b5b8; }
.rgft-costs-kpi--total .rgft-costs-kpi__sub{ color: #87878a; }

/* ── Cards (distribution + category breakdown) ─────────────────────────── */
.rgft-costs-card{
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rgft-costs-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-costs-card h2{ margin: 0; font-size: 14px; font-weight: 600; font-family: inherit; }

.rgft-costs-split-bar{
    display: flex;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: #ededef;
}
.rgft-costs-split-legend{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.rgft-costs-split-legend__item{ display: flex; align-items: center; gap: 7px; }
.rgft-costs-split-legend__dot{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rgft-costs-split-legend__label{ font-size: 12.5px; color: #3d3f45; }
.rgft-costs-split-legend__pct{ font-size: 12.5px; color: var(--ck-faint); font-variant-numeric: tabular-nums; }

/* ── Category breakdown table (grid rows, not a <table>) ──────────────── */
.rgft-costs-table{
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    overflow: hidden;
}
.rgft-costs-table:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-costs-table__title{
    padding: 14px 18px;
    border-bottom: 1px solid #ededef;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.rgft-costs-table__title span:first-child{ font-size: 14px; font-weight: 600; }
.rgft-costs-table__title span:last-child{ font-size: 12px; color: var(--ck-faint); }
.rgft-costs-row{
    display: grid;
    gap: 12px;
    align-items: center;
    grid-template-columns: minmax(0,1fr) 120px minmax(0,1.1fr) 84px;
    grid-template-areas: "cat total bar pct";
    padding: 14px 18px;
    border-bottom: 1px solid #f1f1f3;
}
.rgft-costs-row:last-child{ border-bottom: 0; }
.rgft-costs-row--head{
    padding: 11px 18px;
    background: #faf9f7;
    border-bottom: 1px solid #ededef;
    font-size: 11px;
    color: var(--ck-faint);
}
.rgft-costs-row--head [data-area]{ font-size: 11px; font-weight: 400; color: var(--ck-faint); }
.rgft-costs-row [data-area="cat"]{ grid-area: cat; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgft-costs-row [data-area="total"]{ grid-area: total; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; }
.rgft-costs-row [data-area="bar"]{ grid-area: bar; display: block; height: 8px; border-radius: 999px; background: #ededef; overflow: hidden; }
.rgft-costs-row [data-area="bar"] i{ display: block; height: 100%; border-radius: 999px; background: var(--ck-accent); }
.rgft-costs-row [data-area="pct"]{ grid-area: pct; justify-self: end; font-size: 12.5px; color: var(--ck-muted); font-variant-numeric: tabular-nums; text-align: left; }
.rgft-costs-row--head [data-area="pct"]{ text-align: left; }
.rgft-costs-row__lbl{ display: none; }

@media (max-width: 1080px){
    .rgft-costs-row--head{ display: none; }
    .rgft-costs-row{
        grid-template-columns: minmax(0,1fr) auto;
        gap: 6px 10px;
        grid-template-areas: "cat total" "bar bar" "pct pct";
        padding: 14px 16px;
    }
    .rgft-costs-row__lbl{ display: inline; color: var(--ck-faint); }
    .rgft-costs-row [data-area="pct"]{ justify-self: start; text-align: right; }
}

/* ── Monthly overhead entry card ───────────────────────────────────── */
.rgft-overhead-month-row{
    display: flex;
    align-items: center;
    gap: 10px;
}
.rgft-overhead-month-row label{ font-size: 13px; color: var(--ck-muted); }
.rgft-overhead-month-row input[type="month"]{
    font-family: inherit;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--ck-line);
    background: #fff;
    color: inherit;
}
.rgft-overhead-fields{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.rgft-overhead-field{ display: flex; flex-direction: column; gap: 6px; }
.rgft-overhead-field label{ font-size: 12.5px; color: var(--ck-muted); }
.rgft-overhead-field input[type="number"]{
    font-family: inherit;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--ck-line);
    background: #fff;
    color: inherit;
}
.rgft-overhead-summary{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--ck-line);
}
.rgft-overhead-summary > div{ display: flex; flex-direction: column; gap: 4px; }
.rgft-overhead-summary span{ font-size: 12px; color: var(--ck-faint); }
.rgft-overhead-summary strong{ font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* LTR (English) override — see the equivalent block in rtl.css for the
   full rationale. Only this file's one local text-align:right rule needs
   re-declaring; the padding-left/padding-right pair above is already
   symmetric and needs no change. */
.rgft-costs[dir="ltr"] .rgft-costs-row [data-area="pct"]{
    text-align: left;
}

/* v2.7.273: 7-card grid when both الهادر and فوق المعيار cards render */
.rgft-costs-kpis--7{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1200px){ .rgft-costs-kpis--7{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1080px){ .rgft-costs-kpis--7{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* v2.7.274: over-standard drill-down rows (the dashboard alert lands here) */
.rgft-overstd-row{
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #ececef;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}
.rgft-overstd-row:hover{ background: #faf9f7; }
.rgft-overstd-row__order{ font-weight: 600; font-size: 13.5px; }
.rgft-overstd-row__mats{ font-size: 12.5px; color: #7d7d84; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgft-overstd-row__value{ font-size: 13.5px; color: #b26a00; white-space: nowrap; }
@media (max-width: 700px){
    .rgft-overstd-row{ grid-template-columns: 1fr auto; }
    .rgft-overstd-row__mats{ grid-column: 1 / -1; white-space: normal; }
}

/* v2.7.275: live over-standard group */
.rgft-overstd-group{ padding: 12px 16px 4px; font-size: 12px; font-weight: 700; color: #8a6d1f; letter-spacing: .02em; }
.rgft-overstd-row--live .rgft-overstd-row__value{ color: #b3382c; }
.rgft-overstd-row__livebadge{
    display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; margin-inline-start: 6px;
    background: rgba(179,56,44,.1); color: #b3382c; border: 1px solid rgba(179,56,44,.25);
}