/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SUBSCRIPTIONS MODULE — shared layout for SUB/SubscriptionCockpit, SUB/DayPreparation and the
   AtqComponent.Subscriptions dialogs. Sprint U1 (2026-09-11), from the approved mockups
   D:\Projects\Claude\mockups\dmm-subs\08-cockpit-redesign.html and 09b-day-preparation-stepper.html.

   🔴 GLOBAL, NOT SCOPED, AND DELIBERATELY SO. The same classes are used by the pages AND by the
   child components' own markup (SubscriptionStatusDialog, VisitOperationDialog, SubsModal). Blazor
   CSS isolation cannot cross that boundary, so a scoped copy would have had to live in four files.
   Every class is prefixed `subs-` so nothing here can reach another module. Same precedent as
   css/pos.css.

   🔴 COLOURS COME ONLY FROM THE PLATFORM TOKENS (tailwind-input.css :root / .dark), so a tenant
   palette and dark mode both apply without a rule here. And text colour is set EXPLICITLY on every
   container: this application defines no dark-aware inherited text colour, which is how two earlier
   sprints shipped black-on-dark text that looked fine in a light-mode screenshot.

   The platform loads no Bootstrap, so .btn has no base rule; `subs-btn` supplies one and is used
   ALONGSIDE the platform colour classes (btn-info, btn-success …) which app.css does define.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* numbers, dates, ids: isolated LTR inside RTL text so "10 × 10.00" never reorders */
.subs-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.subs-muted { color: var(--color-text-muted); }
.subs-t2 { color: var(--color-text-secondary); }
.subs-xs { font-size: 0.72rem; }
.subs-sm { font-size: 0.8rem; }
.subs-b { font-weight: 600; }
.subs-tdanger { color: var(--color-danger); }
.subs-twarn { color: #b45309; }
.dark .subs-twarn { color: var(--color-warning); }
.subs-tok { color: #15803d; }
.dark .subs-tok { color: var(--color-success); }
.subs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.subs-ms-auto { margin-inline-start: auto; }
.subs-root { color: var(--color-text-primary); }
.subs-root a { color: var(--color-primary); }
.dark .subs-root a { color: #93c5fd; }

/* ── buttons ───────────────────────────────────────────────────────────────────────────── */
.subs-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    height: 1.9rem; padding: 0 0.7rem; font-size: 0.8rem; font-weight: 500; line-height: 1;
    border-radius: var(--radius-sm); cursor: pointer;
}
.subs-btn i { font-size: 0.72rem; }
.subs-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.subs-btn-xs { height: 1.6rem; padding: 0 0.55rem; font-size: 0.76rem; }
.subs-btn-lg { height: 2.6rem; padding: 0 1.3rem; font-size: 0.95rem; font-weight: 700; }
.subs-btn-lg i { font-size: 0.9rem; }
.subs-btn-ico { width: 1.9rem; padding: 0; justify-content: center; }
.subs-btn-o {
    background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border);
}
.subs-btn-o:not(:disabled):hover { background: var(--color-surface-raised); }
.subs-btn-o-primary { background: transparent; color: var(--color-primary); border: 1px solid rgb(var(--color-primary-rgb) / 0.55); }
.subs-btn-o-primary:not(:disabled):hover { background: rgb(var(--color-primary-rgb) / 0.08); }
.subs-btn-o-danger { background: transparent; color: var(--color-danger); border: 1px solid rgb(var(--color-danger-rgb) / 0.55); }
.subs-btn-o-danger:not(:disabled):hover { background: rgb(var(--color-danger-rgb) / 0.08); }
.subs-btn-o-warning { background: transparent; color: #b45309; border: 1px solid rgb(var(--color-warning-rgb) / 0.7); }
.dark .subs-btn-o-warning { color: var(--color-warning); }
.subs-btn-o-warning:not(:disabled):hover { background: rgb(var(--color-warning-rgb) / 0.1); }
.subs-btn-o-success { background: transparent; color: #15803d; border: 1px solid rgb(var(--color-success-rgb) / 0.6); }
.dark .subs-btn-o-success { color: var(--color-success); }
.subs-btn-o-success:not(:disabled):hover { background: rgb(var(--color-success-rgb) / 0.1); }
.subs-btn-sel { background: var(--color-primary); color: var(--color-primary-text); border: 1px solid var(--color-primary); }
.subs-btn-warning-solid { background: var(--color-warning); color: #111; border: 1px solid var(--color-warning); }

/* ── alerts (the platform defines only success/danger) ─────────────────────────────────── */
.subs-al {
    display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap;
    padding: 0.4rem 0.65rem; margin-bottom: 0.5rem; font-size: 0.8rem;
    border-radius: var(--radius-sm); border: 1px solid; color: var(--color-text-primary);
}
.subs-al > i { margin-top: 0.2rem; }
.subs-al-info { background: rgb(var(--color-primary-rgb) / 0.07); border-color: rgb(var(--color-primary-rgb) / 0.28); }
.subs-al-warn { background: rgb(var(--color-warning-rgb) / 0.12); border-color: rgb(var(--color-warning-rgb) / 0.5); }
.subs-al-danger { background: rgb(var(--color-danger-rgb) / 0.08); border-color: rgb(var(--color-danger-rgb) / 0.5); }
.subs-al-ok { background: rgb(var(--color-success-rgb) / 0.1); border-color: rgb(var(--color-success-rgb) / 0.45); }
.subs-al-title { font-weight: 700; }
.subs-al ul { margin: 0; padding-inline-start: 1.1rem; }
.subs-wl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.65rem; align-items: baseline; width: 100%; }

.subs-badge {
    display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
    border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.7rem; font-weight: 600;
}
.subs-bg-ok { background: rgb(var(--color-success-rgb) / 0.15); color: #15803d; }
.subs-bg-warn { background: rgb(var(--color-warning-rgb) / 0.2); color: #b45309; }
.subs-bg-dan { background: rgb(var(--color-danger-rgb) / 0.13); color: #b91c1c; }
.subs-bg-pri { background: rgb(var(--color-primary-rgb) / 0.13); color: var(--color-primary); }
.subs-bg-mut { background: var(--color-surface-raised); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.dark .subs-bg-ok { color: var(--color-success); }
.dark .subs-bg-warn { color: var(--color-warning); }
.dark .subs-bg-dan { color: var(--color-danger); }
.dark .subs-bg-pri { color: #93c5fd; }

/* ── card header actions / identity line ───────────────────────────────────────────────── */
.subs-hdr-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.subs-sep { width: 1px; height: 1.4rem; background: var(--color-border); margin: 0 0.15rem; }
.subs-ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.55rem; }
.subs-ident .subs-name { font-size: 1rem; font-weight: 700; }
.subs-ident .subs-it { font-size: 0.78rem; color: var(--color-text-secondary); }
.subs-ident .subs-it b { color: var(--color-text-primary); font-weight: 600; }

/* ── KPI tiles: ONE row each, label beside figure ──────────────────────────────────────── */
.subs-kpis { display: grid; gap: 0.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subs-kpis.subs-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.subs-kpis.subs-k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.subs-kpis.subs-k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .subs-kpis, .subs-kpis.subs-k5, .subs-kpis.subs-k6, .subs-kpis.subs-k7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.subs-kpi {
    display: flex; align-items: center; gap: 0.6rem; min-height: 2.8rem; padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface);
    color: var(--color-text-primary); min-width: 0;
}
.subs-kpi-k { font-size: var(--label-font-size); color: var(--color-text-secondary); line-height: 1.3; }
.subs-kpi-v { margin-inline-start: auto; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.subs-kpi-v.subs-big { font-size: 1.3rem; }
.subs-kpi-sub { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 400; margin-inline-start: 0.35rem; }
.subs-kpi.subs-is-primary { border: 2px solid var(--color-primary); background: rgb(var(--color-primary-rgb) / 0.05); }
.subs-kpi.subs-is-debt { border: 2px solid var(--color-danger); background: rgb(var(--color-danger-rgb) / 0.05); }
.subs-kpi.subs-is-debt .subs-kpi-k, .subs-kpi.subs-is-debt .subs-kpi-v { color: var(--color-danger); }
.subs-kpi.subs-is-frozen { border: 2px solid var(--color-warning); }
.subs-kpi.subs-is-frozen .subs-kpi-v, .subs-kpi.subs-is-warn .subs-kpi-v { color: #b45309; }
.dark .subs-kpi.subs-is-frozen .subs-kpi-v, .dark .subs-kpi.subs-is-warn .subs-kpi-v { color: var(--color-warning); }
.subs-kpi.subs-is-ok .subs-kpi-v { color: #15803d; }
.dark .subs-kpi.subs-is-ok .subs-kpi-v { color: var(--color-success); }
.subs-kpi.subs-is-money { border: 2px solid var(--color-danger); background: rgb(var(--color-danger-rgb) / 0.05); }
.subs-kpi.subs-is-money .subs-kpi-k, .subs-kpi.subs-is-money .subs-kpi-v { color: var(--color-danger); }
.subs-kpi.subs-is-money .subs-kpi-v { font-size: 1.25rem; }

/* ── read-only label : value grid (configuration panel, recaps) ────────────────────────── */
.subs-kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
.subs-kvi { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--color-border); min-width: 0; }
.subs-kvi > .subs-kvl { font-size: var(--label-font-size); color: var(--color-text-secondary); white-space: nowrap; min-width: 5.8rem; }
.subs-kvi > .subs-kvv { font-weight: 600; min-width: 0; color: var(--color-text-primary); }
.subs-kvi.subs-span2 { grid-column: span 2; }
.subs-kvi:last-child { border-bottom: 0; }
.subs-kvi .subs-hint { font-weight: 400; font-size: 0.7rem; color: var(--color-text-muted); margin-inline-start: 0.4rem; }
@media (max-width: 700px) { .subs-kv2 { grid-template-columns: 1fr; } .subs-kvi.subs-span2 { grid-column: auto; } }

/* ── the transaction-form grid: label and control are separate 12-column children,
      as DocumentSetupComponent lays out <AtqField LabelClass="col-md-N col-form-label"> ──── */
.subs-fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.45rem 0.65rem; align-items: center; }
.subs-fgrid > label, .subs-fgrid > .subs-lbl {
    font-size: var(--label-font-size); color: var(--color-label); font-weight: 500; line-height: 1.25; margin: 0;
}
.subs-fgrid .subs-req { color: var(--color-danger); }
.subs-top { align-self: start; padding-top: 0.3rem; }
.subs-l2 { grid-column: span 2; } .subs-l3 { grid-column: span 3; }
.subs-c2 { grid-column: span 2; } .subs-c3 { grid-column: span 3; } .subs-c4 { grid-column: span 4; }
.subs-c5 { grid-column: span 5; } .subs-c6 { grid-column: span 6; } .subs-c7 { grid-column: span 7; }
.subs-c8 { grid-column: span 8; } .subs-c9 { grid-column: span 9; } .subs-c10 { grid-column: span 10; }
.subs-c12 { grid-column: span 12; }
@media (max-width: 760px) {
    .subs-fgrid > * { grid-column: span 8 !important; }
    .subs-fgrid > label, .subs-fgrid > .subs-lbl { grid-column: span 4 !important; }
    .subs-fgrid > .subs-c12 { grid-column: span 12 !important; }
}
/* 🔴 values align to the START of the line — right in Arabic, left in English (operator,
   2026-09-11). Numbers keep their digit order through the input's own LTR run. */
.subs-fgrid .form-control, .subs-fc { text-align: start; }
[dir="rtl"] .subs-fgrid input[type="date"] { direction: ltr; text-align: right; }
.subs-ig { display: flex; }
.subs-ig > .form-control { border-start-end-radius: 0; border-end-end-radius: 0; min-width: 0; }
.subs-ig > .subs-add {
    display: flex; align-items: center; padding: 0 0.5rem; white-space: nowrap; font-size: 0.72rem;
    border: 1px solid var(--color-input-disabled-border); border-inline-start: 0;
    background: var(--color-surface-raised); color: var(--color-text-secondary);
    border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
}
.subs-help { font-size: 0.7rem; color: var(--color-text-secondary); }

/* the three-pattern editor: segmented choice, weekday toggles, a 10-per-row month grid.
   🔴 The real inputs stay in the tab order (visually hidden, not display:none) so the editor is
   usable from the keyboard; focus shows on the label. */
.subs-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-input-disabled-border); border-radius: var(--radius-sm); overflow: hidden; }
.subs-seg label, .subs-days label, .subs-mdays label {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    height: var(--field-height); padding: 0 0.7rem; margin: 0; cursor: pointer; user-select: none;
    font-size: 0.78rem; background: var(--color-surface); color: var(--color-text-primary);
}
.subs-seg label + label { border-inline-start: 1px solid var(--color-input-disabled-border); }
.subs-seg input, .subs-days input, .subs-mdays input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.subs-seg label:has(input:checked), .subs-days label:has(input:checked), .subs-mdays label:has(input:checked) {
    background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary);
}
.subs-seg label:has(input:focus-visible), .subs-days label:has(input:focus-visible), .subs-mdays label:has(input:focus-visible) {
    outline: 2px solid rgb(var(--color-primary-rgb) / 0.55); outline-offset: 1px; z-index: 1;
}
.subs-seg label:has(input:disabled), .subs-days label:has(input:disabled), .subs-mdays label:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.subs-days { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.subs-days label, .subs-mdays label { min-width: 3.4rem; border: 1px solid var(--color-input-disabled-border); border-radius: var(--radius-sm); }
.subs-mdays { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.25rem; }
.subs-mdays label { min-width: 0; padding: 0; }

.subs-pv {
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem;
    background: var(--color-surface-raised); font-size: 0.8rem; color: var(--color-text-primary);
}
.subs-pv-t { font-size: 0.7rem; color: var(--color-text-secondary); font-weight: 600; margin-bottom: 0.2rem; }
.subs-pv > div + div { margin-top: 0.15rem; }

/* ── modal (SubsModal) ─────────────────────────────────────────────────────────────────────
   🔴 z-index 1040 — BELOW the platform <Dialog> (1050) on purpose, so a YesNo confirm raised from
   inside one of these popups draws on top of it rather than underneath. */
.subs-modal-back {
    position: fixed; inset: 0; z-index: 1040; background: rgb(15 23 42 / 0.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 5vh 0.75rem; overflow: auto;
}
.subs-modal {
    width: 100%; max-width: 52rem; display: flex; flex-direction: column; outline: none;
    background: var(--color-surface); color: var(--color-text-primary);
    border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
}
.subs-modal.subs-md { max-width: 38rem; }
.subs-modal.subs-xl { max-width: 68rem; }
.subs-mh {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised);
    border-radius: var(--radius) var(--radius) 0 0;
}
.subs-mh.subs-mh-danger { background: var(--color-danger); color: #fff; }
.subs-mt { font-size: 0.9rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.subs-mx {
    margin-inline-start: auto; width: 1.9rem; height: 1.9rem; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-secondary); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.subs-mx:not(:disabled):hover { background: var(--color-border); }
.subs-mx:disabled { opacity: 0.4; cursor: not-allowed; }
.subs-subj {
    display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; padding: 0.4rem 0.9rem; font-size: 0.78rem;
    border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary);
    background: rgb(var(--color-primary-rgb) / 0.04);
}
.subs-subj b { color: var(--color-text-primary); }
.subs-mb { padding: 0.75rem 0.9rem; }
.subs-mf {
    display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; align-items: center;
    padding: 0.55rem 0.9rem; border-top: 1px solid var(--color-border);
}
.subs-mf .subs-lead { margin-inline-end: auto; font-size: 0.75rem; color: var(--color-text-secondary); }

/* ── tables ─────────────────────────────────────────────────────────────────────────────── */
.subs-tscroll { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.subs-tbl { width: 100%; border-collapse: collapse; font-size: 0.8rem; color: var(--color-text-primary); margin: 0; }
.subs-tbl th {
    background: var(--color-surface-raised); color: var(--color-text-secondary); font-weight: 600; font-size: 0.75rem;
    text-align: start; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.subs-tbl td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.subs-tbl tr:last-child td { border-bottom: 0; }
.subs-tbl .subs-e { text-align: end; }
.subs-tbl td.subs-empty { color: var(--color-text-muted); text-align: center; padding: 0.9rem; }
.subs-tbl tr.subs-click { cursor: pointer; }
.subs-tbl tr.subs-click:hover td, .subs-tbl tr.subs-click:focus-visible td { background: rgb(var(--color-primary-rgb) / 0.06); }
/* Sprint U5: the visit whose log the «سجل الزيارة» tab is showing. */
.subs-tbl tr.subs-sel td, .subs-tbl tr.subs-sel:hover td { background: rgb(var(--color-primary-rgb) / 0.13); }
/* Operator, 2026-09-16: labels and cells broke onto two lines and overlapped.
   1. A label never shrinks. Its min-width (5.8rem) replaced the flex item's automatic minimum
      (its text), so a long label - «الخدمة متوقعة حتى» - was squeezed to 5.8rem and its nowrap
      text ran under the value beside it.
   2. A value made of several pieces wraps piece by piece, beside the label, never inside a piece.
   3. The day panel's cells stay on one line (the table scrolls); only the notes may wrap. */
.subs-kvi > .subs-kvl { flex-shrink: 0; }
/* ...and a number or a date never breaks at its hyphen once the label keeps its width. */
.subs-kvi .subs-num, .subs-kvi > .subs-kvv.subs-num { white-space: nowrap; }
/* ...and when a label and its value genuinely do not fit side by side, the value moves under the
   label instead of being drawn over it. A multi-piece value keeps 12rem beside its label first. */
.subs-kvi { flex-wrap: wrap; }
.subs-kvi > .subs-kvv.subs-kvv-wrap { flex: 1 1 12rem; }
.subs-kvi > .subs-kvv.subs-kvv-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
.subs-kvi > .subs-kvv.subs-kvv-wrap > * { white-space: nowrap; }
.subs-kvi > .subs-kvv.subs-kvv-wrap .subs-hint,
.subs-kvi > .subs-kvv.subs-kvv-wrap .subs-chip { margin-inline-start: 0 !important; }
.subs-daypanel .subs-tbl th, .subs-daypanel .subs-tbl td { white-space: nowrap; }
.subs-daypanel .subs-tbl td.subs-notes { white-space: normal; min-width: 11rem; }
.subs-acts { display: flex; gap: 0.3rem; justify-content: flex-end; white-space: nowrap; }

/* ── cockpit body ───────────────────────────────────────────────────────────────────────── */
.subs-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0.75rem; align-items: start; }
@media (max-width: 1100px) { .subs-cols { grid-template-columns: 1fr; } }
.subs-daypanel { margin-top: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.subs-dph { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); }
.subs-chip { display: inline-block; font-size: 0.72rem; border-radius: 3px; padding: 0 0.4rem; line-height: 1.15rem; white-space: nowrap; }
.subs-st-billed { background: rgb(var(--color-success-rgb) / 0.18); color: #15803d; }
.subs-st-prep { background: rgb(var(--color-warning-rgb) / 0.22); color: #92400e; }
.subs-st-planned { border: 1px dashed var(--color-primary); color: var(--color-primary); }
.subs-st-cancel { background: var(--color-surface-raised); color: var(--color-text-muted); text-decoration: line-through; }
.subs-st-other { background: var(--color-surface-raised); color: var(--color-text-secondary); }
.dark .subs-st-billed { color: var(--color-success); }
.dark .subs-st-prep { color: var(--color-warning); }

/*  Tabs (operator, 2026-09-14): the card header already draws the coloured line, so the selected
    tab is FILLED — background and text — rather than underlined a second time. Its count badge
    inverts with it; the payment-orders count turns amber while an order is open.                */
.subs-tabs { display: flex; gap: 0.25rem; align-self: flex-end; }
.subs-tab {
    border: 0; background: transparent; cursor: pointer; padding: 0.4rem 0.85rem;
    font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: background-color 0.15s, color 0.15s;
}
.subs-tab:not([aria-selected="true"]):hover { background: rgb(var(--color-primary-rgb) / 0.08); color: var(--color-primary); }
.subs-tab[aria-selected="true"] { background: var(--color-primary); color: var(--color-primary-text); }
.subs-tab-count { background: rgb(var(--color-primary-rgb) / 0.14); color: var(--color-primary); border: 0; }
.subs-tab[aria-selected="true"] .subs-tab-count { background: var(--color-primary-text); color: #111; }
.subs-tab-count.subs-tab-count-warn { background: rgb(var(--color-warning-rgb) / 0.25); color: #b45309; }
.dark .subs-tab-count.subs-tab-count-warn { color: var(--color-warning); }
.subs-tab[aria-selected="true"] .subs-tab-count.subs-tab-count-warn { background: var(--color-warning); color: #111; }
.subs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.subs-toolbar select.form-control { width: auto; min-width: 8rem; }
.subs-sumchip {
    display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.15rem 0.55rem; font-size: 0.74rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface-raised); color: var(--color-text-secondary);
}
.subs-sumchip b { color: var(--color-text-primary); }
.subs-pager { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ── day preparation: the stepper ───────────────────────────────────────────────────────── */
.subs-steps {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0.75rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 1000px) { .subs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.subs-step {
    display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.6rem 0.85rem; cursor: pointer;
    border: 0; border-inline-start: 1px solid var(--color-border); border-bottom: 3px solid transparent;
    background: var(--color-surface); color: var(--color-text-primary); text-align: start; font: inherit;
}
.subs-step:first-child { border-inline-start: 0; }
.subs-step:hover { background: var(--color-surface-raised); }
.subs-step[aria-selected="true"] { background: rgb(var(--color-primary-rgb) / 0.07); border-bottom-color: var(--color-primary); }
.subs-step-n {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; border: 2px solid var(--color-border);
    background: var(--color-surface-raised); color: var(--color-text-secondary);
}
.subs-step-tt { font-weight: 700; font-size: 0.82rem; line-height: 1.3; }
.subs-step-ss { font-size: 0.72rem; line-height: 1.35; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subs-step-body { min-width: 0; }
.subs-step.subs-s-done .subs-step-n { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.subs-step.subs-s-done .subs-step-ss { color: #15803d; }
.dark .subs-step.subs-s-done .subs-step-ss { color: var(--color-success); }
.subs-step.subs-s-warn .subs-step-n { background: var(--color-warning); border-color: var(--color-warning); color: #111; }
.subs-step.subs-s-warn .subs-step-ss { color: #b45309; }
.dark .subs-step.subs-s-warn .subs-step-ss { color: var(--color-warning); }
.subs-step.subs-s-err .subs-step-n { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.subs-step.subs-s-err .subs-step-ss { color: var(--color-danger); }
.subs-step.subs-s-ready .subs-step-n { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.subs-step.subs-s-ready .subs-step-ss { color: var(--color-primary); }
.subs-step.subs-s-lock .subs-step-tt { color: var(--color-text-secondary); }
.subs-step.subs-s-lock .subs-step-n { color: var(--color-text-muted); }

/* ── cockpit: the new-subscriber set-up checklist (Sprint U2) — the stepper's look, not its behaviour ── */
.subs-setup {
    border: 1px solid rgb(var(--color-primary-rgb) / 0.35); background: rgb(var(--color-primary-rgb) / 0.04);
    border-radius: var(--radius); padding: 0.5rem 0.65rem; margin: 0 0 0.65rem;
}
.subs-setup-h { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 600; }
.subs-setup-h i { color: var(--color-primary); }
.subs-setup-lead { font-weight: 400; font-size: 0.72rem; color: var(--color-text-secondary); }
.subs-setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 1000px) { .subs-setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.subs-setup-step {
    display: flex; align-items: center; gap: 0.5rem; min-width: 0; min-height: 2.6rem; padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
}
.subs-setup-step .subs-step-n { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; }
.subs-setup-act { margin-inline-start: auto; flex: none; }
.subs-setup-step.subs-s-done { border-color: rgb(var(--color-success-rgb) / 0.5); }
.subs-setup-step.subs-s-done .subs-step-n { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.subs-setup-step.subs-s-done .subs-step-ss { color: #15803d; }
.dark .subs-setup-step.subs-s-done .subs-step-ss { color: var(--color-success); }
.subs-setup-step.subs-s-ready .subs-step-n { border-color: var(--color-primary); color: var(--color-primary); }
.subs-pnl-nav { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border-top: 1px solid var(--color-border); }
.subs-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; max-width: 48rem; }
.subs-recap > div { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--color-border); }
.subs-recap > div > span:first-child { font-size: var(--label-font-size); color: var(--color-text-secondary); min-width: 8.5rem; }
.subs-recap > div > span + span { font-weight: 700; }
.subs-last {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.85rem; margin-top: 0.5rem; padding: 0.3rem 0.6rem;
    font-size: 0.78rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface-raised); color: var(--color-text-secondary);
}
.subs-last b { color: var(--color-text-primary); margin-inline-start: 0.25rem; }
.subs-cnt { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.subs-cnt > span {
    padding: 0.15rem 0.55rem; font-size: 0.74rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface-raised); color: var(--color-text-secondary);
}
.subs-cnt b { color: var(--color-text-primary); margin-inline-start: 0.25rem; }
.subs-stchips { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; }
.subs-stchips > span {
    padding: 0 0.3rem; font-size: 0.72rem; white-space: nowrap; border-radius: 3px;
    border: 1px solid var(--color-border); background: var(--color-surface-raised); color: var(--color-text-primary);
}
.subs-money-card { border: 2px solid var(--color-danger) !important; }
.subs-spin {
    display: inline-block; width: 0.95rem; height: 0.95rem; flex: none; border-radius: 50%;
    border: 2px solid rgb(var(--color-primary-rgb) / 0.3); border-top-color: var(--color-primary);
    animation: subs-spin 0.8s linear infinite;
}
@keyframes subs-spin { to { transform: rotate(360deg); } }
[dir="rtl"] .subs-flip { transform: scaleX(-1); }

/* ── Sprint U3: the payment order ─────────────────────────────────────────────────────────── */
.subs-order {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; margin: 0 0 0.6rem; padding: 0.45rem 0.65rem;
    font-size: 0.8rem; border: 1px solid rgb(var(--color-primary-rgb) / 0.45); border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--radius-sm); background: rgb(var(--color-primary-rgb) / 0.05);
}
.subs-order > i { color: var(--color-primary); }
.subs-order-t { font-weight: 700; }
.subs-order-i { color: var(--color-text-secondary); }
.subs-order-drift { flex-basis: 100%; font-size: 0.75rem; color: #b45309; }
.dark .subs-order-drift { color: var(--color-warning); }
.subs-stepper { display: inline-flex; align-items: center; gap: 0.3rem; }
.subs-stepper input { width: 5.5rem; text-align: center; font-weight: 700; }
.subs-calc { margin-top: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.subs-calc-r { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.65rem; font-size: 0.8rem; border-bottom: 1px solid var(--color-border); }
.subs-calc-r:last-child { border-bottom: 0; }
.subs-calc-r > :last-child { margin-inline-start: auto; }
.subs-calc-sub { font-size: 0.76rem; color: var(--color-text-secondary); }
.subs-calc-debt > :last-child { color: var(--color-danger); }
.subs-calc-tot { font-weight: 700; background: rgb(var(--color-success-rgb) / 0.08); }
.subs-calc-tot > :last-child { font-size: 1.1rem; color: #15803d; }
.dark .subs-calc-tot > :last-child { color: var(--color-success); }

/* ── Sprint C4: the call-centre ticket an operation carries (mockup 16) ──────────────────────── */
.subs-tkchip {
    display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-size: 0.75rem;
    border: 1px solid rgb(var(--color-primary-rgb) / 0.5); background: rgb(var(--color-primary-rgb) / 0.08);
    border-radius: 999px; padding: 0.05rem 0.3rem 0.05rem 0.6rem; color: var(--color-text-primary);
}
.subs-subj .subs-tkchip { margin-inline-start: auto; }
.subs-tkchip > button {
    border: 0; background: transparent; color: var(--color-text-secondary); width: 1.3rem; height: 1.3rem;
    border-radius: 50%; cursor: pointer; line-height: 1; font-size: 0.95rem;
}
.subs-tkchip > button:hover { background: var(--color-border); }
.subs-tkrow-sel > td { background: rgb(var(--color-primary-rgb) / 0.10); }
.subs-sec { font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); }