@import '_content/Rheasys.Therapy.UI/Rheasys.Therapy.UI.ulh5i7doha.bundle.scp.css';

/* /Components/ChildDocumentsList.razor.rz.scp.css */
/* #571 — «Έγγραφα» child-card tab. */

.child-documents__toolbar[b-yx74i233fv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* The confirm block spells out recipient + filenames before the operator
   presses «Αποστολή» — visually separated so it reads as a checkpoint and
   not as more form. */
.child-documents-send-modal__confirm[b-yx74i233fv] {
    border: 1px solid var(--line, #d4d4d8);
    border-radius: 6px;
    padding: 0.75rem;
    background: var(--surface-muted, #f8fafc);
}

.child-documents-send-modal__confirm p[b-yx74i233fv] {
    margin: 0 0 0.35rem;
}

.child-documents-send-modal__confirm ul[b-yx74i233fv] {
    margin: 0;
    padding-inline-start: 1.25rem;
}
/* /Components/DocumentPreviewModal.razor.rz.scp.css */
.document-preview-modal__toolbar[b-yax63ol2hx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.document-preview-modal__frame[b-yax63ol2hx] {
    width: 100%;
    height: 70vh;
    min-height: 24rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.document-preview-modal__image[b-yax63ol2hx] {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.document-preview-modal__help[b-yax63ol2hx] {
    margin: 0.5rem 0 0;
}
/* /Components/FamilyLedger.razor.rz.scp.css */
/* Child/payee selector on top of the combined (parent) ledger view.
   Component-scoped (REQ-F29-008: no global app.css). The ledger-sheet
   classes themselves live in the shared app.css and are reused as-is. */
.family-ledger-selector[b-7x15yjkph7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-muted, #f5f5f7);
    border-radius: 0.5rem;
}

.family-ledger-selector-label[b-7x15yjkph7] {
    font-weight: 600;
}

.family-ledger-selector-item[b-7x15yjkph7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* «Παιδί» column in the combined view — keep the payee name compact. */
.ledger-child-name[b-7x15yjkph7] {
    white-space: nowrap;
    font-variant: small-caps;
}

/* ── ΑΠΥ modal action bar (Stage 2 A/B) ─────────────────────────────
   The «Υποβολή στη ΑΑΔΕ» + σύνδεση/αποσύνδεση controls live inside the
   shared DocumentPreviewModal footer. Reset the session lists so they
   read as compact rows, not bulleted lists. */
/* #653 — both ΑΠΥ session lists scroll rather than grow.
   Christina, live demo: «Both should be scrollable lists. in case there are
   more». A month of twice-weekly therapy is 8-10 rows per receipt, and each
   row carries a button, so an unbounded list pushes the modal's own actions
   off the bottom of the screen — the buttons you need in order to leave.
   One rule covers both lists because they already share this class.

   max-height, not height: a two-row list must NOT gain a scrollbar or a gap.
   ~14rem is about six rows, so scrolling only starts where the report says
   it should. */
.apy-modal-sessions[b-7x15yjkph7] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 14rem;
    overflow-y: auto;
    /* Keeps the last row's border off the scroll edge. */
    padding-inline-end: 0.25rem;
    /* Scroll this list, not the modal behind it, when it reaches its end. */
    overscroll-behavior: contain;
}

.apy-modal-sessions li[b-7x15yjkph7] {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border, #e5e5e8);
}
/* /Components/MaterializationPreviewDialog.razor.rz.scp.css */
/*
    #587 item 2 — the plan a programme is about to write.

    The list can be long (a 40-week programme with three slots is 120
    rows), so the body scrolls inside the dialog rather than growing the
    card past the viewport — same treatment as #653's ΑΠΥ lists, and for
    the same reason: a card taller than the screen puts its own confirm
    button out of reach.
*/

.materialization-preview[b-7m64wvgaxe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: min(60vh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.materialization-preview__headline[b-7m64wvgaxe] {
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
}

.materialization-preview__group h3[b-7m64wvgaxe] {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted-fg, #555);
}

.materialization-preview__list[b-7m64wvgaxe] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.materialization-preview__list li[b-7m64wvgaxe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    background: var(--surface-2, #f6f6f6);
}

.materialization-preview__when[b-7m64wvgaxe] {
    font-variant-numeric: tabular-nums;
}

/* The reason is the actionable half of a skipped row, so it is the part
   that carries the emphasis — not the date, which merely locates it. */
.materialization-preview__reason[b-7m64wvgaxe] {
    color: var(--warn-fg, #8a5300);
    font-size: 0.875rem;
}
/* /Components/NewBuildBanner.razor.rz.scp.css */
/*
    #656 — the «refresh» hint for a client left behind by a redeploy.

    Fixed to the bottom, above the toast host's usual corner, because it is
    not a transient notification: it stays until the page is reloaded, and
    something that persists must not sit where transient messages are
    dismissed from.
*/

.new-build-banner[b-zklpwuix2m] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;

    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;

    padding: 0.75rem 1rem;
    /* Safe-area inset so it clears the iOS home indicator — the Admin shell
       declares viewport-fit=cover, so this resolves to a real value there. */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));

    background: var(--warn-bg, #fff4d6);
    color: var(--warn-fg, #6b4a00);
    border-top: 1px solid var(--warn-border, #e6c46a);
    box-shadow: 0 -2px 8px rgb(0 0 0 / 12%);

    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
}

.new-build-banner button[b-zklpwuix2m] {
    flex: none;
}

/* 🔴 «Τι άλλαξε» opened onto NOTHING, and this is why.
   The panel used to render as a SIBLING after `.new-build-banner` — which
   is `position: fixed; bottom: 0` — so it landed in normal document flow at
   the very end of the page, underneath a bar pinned to the viewport. It had
   no rule of its own anywhere either: zero matches in app.css AND in this
   file. Clicking toggled a div nobody could see.

   It now lives INSIDE the fixed banner, and `flex-basis: 100%` makes the
   existing `flex-wrap` drop it onto its own line so the bar grows upward. */
.new-build-whats-new[b-zklpwuix2m] {
    flex-basis: 100%;
    max-height: 40vh;
    overflow-y: auto;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.new-build-whats-new__version[b-zklpwuix2m] {
    font-weight: 600;
    margin: var(--space-2) 0 var(--space-1);
}
.new-build-whats-new ul[b-zklpwuix2m] {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-5);
}
/* /Components/PlanningGridHost.razor.rz.scp.css */
/* Host chrome for the planning grid (#622). Kept separate from the grid
   itself so the modal and the page can restyle the controls without
   touching the surface they wrap. */

.planning-host[b-9ilxj7hccb] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
    flex: 1 1 auto;
}

.planning-host-controls[b-9ilxj7hccb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.planning-host-field[b-9ilxj7hccb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.planning-host-rows[b-9ilxj7hccb],
.planning-host-picker[b-9ilxj7hccb] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #e4e4e7;
    border-radius: 6px;
    padding: 0.25rem 0.6rem 0.4rem;
    margin: 0;
}

.planning-host-rows legend[b-9ilxj7hccb],
.planning-host-picker legend[b-9ilxj7hccb] {
    font-size: 0.75rem;
    color: #52525b;
    padding: 0 0.25rem;
}

.planning-host-rows label[b-9ilxj7hccb],
.planning-host-picker label[b-9ilxj7hccb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* The picker can list a dozen rooms; cap it so the controls never push
   the grid itself off a modal. */
.planning-host-picker[b-9ilxj7hccb] {
    max-height: 4.5rem;
    overflow-y: auto;
}

/* #654 — the one-off session's own therapist / room / duration. It holds
   three short controls rather than a dozen checkboxes, so the scroll cap
   above would clip it for no gain: an operator who cannot see the room
   dropdown cannot give the session a venue, and the apply then reports
   «χωρίς αίθουσα». */
.planning-host-single[b-9ilxj7hccb] {
    max-height: none;
    overflow: visible;
}

.planning-host-single .planning-host-field select[b-9ilxj7hccb] {
    max-width: 12rem;
}

/* Note under the row controls when the grid is scoped to a child. */
.planning-host-note[b-9ilxj7hccb] {
    align-self: flex-end;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
}
/* /Components/SessionTimeRangeEditor.razor.rz.scp.css */
/* Start + duration side by side; stacks on narrow modals. The inner
   .form-field elements are rendered by this component so the scoped
   selector reaches them and drops the default bottom margin (the grid
   gap already provides the rhythm). */
.time-range-editor[b-iys4e9y4f0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 30rem) {
    .time-range-editor[b-iys4e9y4f0] {
        grid-template-columns: 1fr;
    }
}

.time-range-editor .form-field[b-iys4e9y4f0] {
    margin-bottom: 0;
}
/* /Pages/Audit/Logins.razor.rz.scp.css */
/* Red badge marking a user seen from ≥2 distinct IPs, and a subtle tint on
   its row, so a shared/compromised account stands out at a glance. */
.badge[b-9rkfi498hv] {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-danger[b-9rkfi498hv] {
    color: #fff;
    background: var(--danger, #c0392b);
}

[b-9rkfi498hv] tr.row-flagged {
    background: oklch(0.98 0.02 25);
}
/* /Pages/Customers/Children/ChildSchedulingPreferenceEditor.razor.rz.scp.css */
/* «Προτιμήσεις προγραμματισμού» — compact layout.

   Owner report R-20260731-03 (#573 §2, v0.81 live demo):
   «"Προτιμήσεις προγραμματισμού" make this tab compact, so you dont have to
   scroll up and down as much.»

   The tab was four full-width fieldsets stacked vertically, each with its
   own 0.75rem border box and the global .form-field 1.5rem bottom margin,
   plus a full-width notes field — roughly two screens of scrolling for a
   handful of checkboxes. Everything below is LAYOUT ONLY: same controls,
   same ids, same bindings, same Greek labels.

   1. The blocks lay out in an auto-fitting grid — 2-up on a laptop, 1-up
      on a phone — instead of stacking.
   2. Padding / margins tightened; the checkbox rows wrap as a flex list
      with a real gap rather than a per-label `margin-right`.
   3. «Σημειώσεις» spans the full grid width — the one field that
      genuinely wants the room.

   NOTE on specificity: the blocks also carry the global `.form-field`
   class (0,1,0). CSS isolation appends the scope attribute to every
   selector here, so these rules are at least (0,2,0) and win — but ONLY
   for properties they actually declare. `flex-direction` is therefore
   re-declared explicitly below; inheriting `column` from `.form-field`
   would turn the wrapping checkbox rows back into a tall stack.        */

.csp-card[b-vhzbroe5dj] {
    margin-top: 1rem;
}

.csp-intro[b-vhzbroe5dj] {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-size: 0.85rem;
    line-height: 1.35;
}

.csp-grid[b-vhzbroe5dj] {
    display: grid;
    /* 18rem fits the widest block (7 weekday checkboxes over two rows)
       and collapses to a single column on a 430px phone. */
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-2);
    align-items: start;
    margin-bottom: var(--space-2);
}

.csp-block[b-vhzbroe5dj] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem 0.55rem;
    margin: 0;
    min-width: 0;
}

.csp-block legend[b-vhzbroe5dj] {
    /* A <legend> is not laid out as a flex item in every engine; make it
       span the row explicitly so the checkboxes start underneath it. */
    flex: 1 0 100%;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 0.3rem;
}

.csp-check[b-vhzbroe5dj] {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 400;
    white-space: nowrap;
}

/* The two time inputs share one block and sit side by side. */
.csp-times[b-vhzbroe5dj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    width: 100%;
}

.csp-times .form-field[b-vhzbroe5dj] {
    flex: 1 1 9rem;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    gap: 0.15rem;
}

.csp-times .form-field label[b-vhzbroe5dj] {
    font-size: 0.85rem;
}

.csp-times .form-field input[b-vhzbroe5dj] {
    padding: 0.4rem 0.5rem;
}

.csp-hint[b-vhzbroe5dj] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.25;
}

/* Notes take the whole grid width — the only field that needs it. */
.csp-notes[b-vhzbroe5dj] {
    grid-column: 1 / -1;
    margin: 0;
    min-width: 0;
}

.csp-notes textarea[b-vhzbroe5dj] {
    width: 100%;
    min-height: 3.2rem;
}

.csp-actions[b-vhzbroe5dj] {
    display: flex;
    gap: 0.5rem;
}
/* /Pages/Customers/Children/Edit.razor.rz.scp.css */
/* Child edit page «στοιχεία παιδιού» layout (owner reports v0.40→v0.49
   «autosize and stretch to occupy only one line, no wrapping»). The scalar
   fields lay out as a flex row that autosizes each field and stretches it
   to fill the line — replacing the earlier form-grid minmax() columns that
   kept wrapping to a few fields per row with ragged gaps. Layout only. */

/* v0.56 owner report: «bring the two columns next to each other (e.g.
   connected parents and details)». The global .child-edit-grid sizes the
   info card to `auto` (its content), which both starves the scalar-fields
   row of horizontal room (forcing it to wrap) AND leaves the two cards
   sitting apart instead of a balanced side-by-side pair. Scoped to THIS
   page (CSS isolation → this rule wins on specificity over the global one),
   lay the details card and the «Συνδεδεμένα πρόσωπα» card out as two
   columns that sit right next to each other above 900px. Single column
   below (mobile/tablet). Layout only — no markup/binding change.

   v0.81 refinement (R-20260731-04 «there is a big gap between the two
   columns», Windows Chrome): an even 1fr/1fr split reserved half the page
   for the right card while the «Συνδεδεμένα πρόσωπα» table sizes to its
   CONTENT (width:auto, see the ::deep block below) — the unused half of
   that column read as a big empty gap between the two blocks. Size the
   right column to the table (`auto`) and hand every remaining pixel to
   the details card. Two effects, both wanted:
     • the columns end up adjacent, separated by exactly one gap;
     • the details card absorbs the slack, so .child-edit-fields fits on
       ONE line (R-20260724-09/-04/-16 «autosize and stretch to occupy
       only one line. no wrapping») instead of wrapping inside a
       half-width column.
   minmax(0, 1fr) keeps a long value from blowing the grid out; the right
   column stays capped by max-width:100% on the table itself. */
/* Elias, 2026-08-13: «the child's details tab should span the whole tab, not
   be restricted like a column, and be arranged so you don't have to scroll up
   and down.»

   Two things were making it a column, and only one of them was visible.

   1. THE GRID IS VESTIGIAL. Everything above describes a TWO-CARD layout —
      details on the left, «Συνδεδεμένα πρόσωπα» on the right — and #844 moved
      that second card out to its own tab. The `auto` second column has had
      nothing in it since. The reasoning above is kept because it explains the
      shape the page grew from, but it no longer describes this page.

   2. THE CARD IS CAPPED AT 32rem. `.login-card` is the LOGIN form's card, and
      its `max-width: 32rem` came along with the class name. That cap was
      invisible while the card was one column of two — a column is narrow
      anyway. On a full tab it is the whole complaint: ~512px of fields on a
      1920px screen, which is also why the page scrolls, because
      `.child-edit-fields` has no room to lay out across and stacks instead.

   Both fixed here rather than in app.css: `.login-card` is used by the actual
   login page and by other cards that DO want to be 32rem. */
.child-edit-grid[b-cfpdoqzclp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

/* The tab is the card's container now, so the card takes the tab. */
.child-edit-grid > .login-card[b-cfpdoqzclp] {
    max-width: none;
    width: 100%;
}
/* Keep the global mobile collapse: the scoped rule above has higher
   specificity than the global @media, so re-assert the single column. */
@media (max-width: 900px) {
    .child-edit-grid[b-cfpdoqzclp] {
        grid-template-columns: 1fr;
    }
}

.child-edit-fields.form-grid[b-cfpdoqzclp] {
    /* Owner report (v0.48/v0.49 «autosize and stretch to occupy only one
       line, no wrapping»): the earlier grid with minmax() columns kept
       breaking the scalar fields onto several rows with ragged right-edge
       gaps. Switch to a flex row that autosizes each field to its content
       and stretches the row edge-to-edge so short fields (ΑΜΚΑ, Φύλο, ημ.
       γέννησης) sit together and the row fills the full width with no gap.
       It wraps ONLY when the viewport truly can't fit the line (kept for
       phones); on the normal edit width the fields lay out on one line. */
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.6rem;
    column-gap: 1rem;
    align-items: stretch;
}

.child-edit-field[b-cfpdoqzclp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    /* Grow to fill the row (stretch), shrink when tight, sized from a small
       content basis so many fields share one line instead of one-per-row. */
    flex: 1 1 8rem;
}

.child-edit-field dt[b-cfpdoqzclp] {
    font-size: 0.85rem;
    color: var(--ink-soft);
    padding: 0;
}

.child-edit-field dd[b-cfpdoqzclp] {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Owner v0.48 — let the editor controls stretch to fill their cell so a field
   uses the whole width of its column instead of sitting at its intrinsic size
   with empty space to the right. Layout only; the inline-edit ✓/✕ buttons keep
   their natural size (they are flex siblings, not the flexed input). */
.child-edit-field .inline-edit-trigger[b-cfpdoqzclp] {
    display: block;
    width: 100%;
}
.child-edit-field .inline-edit-row input[b-cfpdoqzclp],
.child-edit-field .inline-edit-row select[b-cfpdoqzclp],
.child-edit-field .inline-edit-row textarea[b-cfpdoqzclp] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The «Συνδεδεμένα πρόσωπα» table rules that used to live here moved with
   the table itself to People.razor.css when Elias made it a tab
   (2026-08-12). They are CSS-isolation ::deep rules and only work in the
   component that renders the table. */
/* /Pages/Customers/Children/History.razor.rz.scp.css */
.history-filters[b-5895xxkudu] {
    margin-bottom: var(--space-3);
}

.history-create-bar[b-5895xxkudu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}

.history-inline-form[b-5895xxkudu] {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
    padding: var(--space-4) 1.25rem;
    margin: 0 0 var(--space-4);
}

.history-inline-form h3[b-5895xxkudu] {
    font-family: 'Fraunces', serif;
    color: var(--teal-900);
    margin: 0 0 var(--space-3);
    font-size: 1.05rem;
}

.history-filters .filters-label[b-5895xxkudu] {
    font-weight: 600;
    color: var(--ink);
}

.history-meta[b-5895xxkudu] {
    display: flex;
    /* Live stamp + record count + «Ανανέωση» is 299 px, wider than the card
       on a 320 px phone; without wrapping it pushed the page sideways. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.history-live[b-5895xxkudu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.history-live__dot[b-5895xxkudu] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: oklch(0.65 0.18 145);
    box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0.55);
    animation: history-live-pulse-b-5895xxkudu 2.4s ease-out infinite;
}

.history-live__dot--busy[b-5895xxkudu] {
    animation-duration: 0.9s;
}

@keyframes history-live-pulse-b-5895xxkudu {
    0%   { box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0.55); }
    70%  { box-shadow: 0 0 0 0.5rem oklch(0.65 0.18 145 / 0); }
    100% { box-shadow: 0 0 0 0   oklch(0.65 0.18 145 / 0); }
}

@media (prefers-reduced-motion: reduce) {
    .history-live__dot[b-5895xxkudu] { animation: none; }
}

.history-scroll[b-5895xxkudu] {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.history-scroll:focus-visible[b-5895xxkudu] {
    outline: 2px solid var(--teal-800);
    outline-offset: 2px;
}

.history-table[b-5895xxkudu] {
    /* R-20260720-06 (re-report): size the table to its content instead of
       stretching to 100% width. The earlier percentage-column fix still
       filled the whole width, so the short cells («Συνεδρία», a name,
       «Κεντρικό») were spread out with big empty gaps and the 60rem floor
       forced a horizontal scrollbar. table-layout: auto + width: auto lets
       every column fit its content (cells are white-space: nowrap, so they
       won't crush); the .history-scroll wrapper still scrolls if the
       content is genuinely wider than the viewport. */
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.9rem;
}

/* Title can grow but shouldn't hog the row; the rest fit content. */
.history-col--title[b-5895xxkudu] { max-width: 22rem; }

.history-th[b-5895xxkudu] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--cream, oklch(0.97 0.02 80));
    border-bottom: 1px solid var(--line);
    text-align: left;
    padding: 0;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.history-th__inner[b-5895xxkudu] {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 2.25rem;
}

.history-th__sort[b-5895xxkudu] {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-2) 0.6rem;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.history-th__sort:hover[b-5895xxkudu],
.history-th__sort:focus-visible[b-5895xxkudu] {
    background: oklch(0.94 0.04 230);
    outline: none;
}

.history-th__sortGlyph[b-5895xxkudu] {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.history-th__filterBtn[b-5895xxkudu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    min-width: 1.4rem;
    background: transparent;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 0.85rem;
}

.history-th__filterBtn:hover[b-5895xxkudu],
.history-th__filterBtn:focus-visible[b-5895xxkudu] {
    background: oklch(0.94 0.04 230);
    color: var(--ink);
    outline: none;
}

.history-th__filterBtn--active[b-5895xxkudu] {
    color: oklch(0.45 0.18 230);
    background: oklch(0.94 0.06 230);
}

.history-th--actions[b-5895xxkudu] {
    background: var(--cream, oklch(0.97 0.02 80));
}

.history-row[b-5895xxkudu] {
    border-bottom: 1px solid var(--line);
}

.history-row:last-child[b-5895xxkudu] {
    border-bottom: none;
}

.history-row:hover[b-5895xxkudu] {
    background: oklch(0.985 0.01 230);
}

.history-cell[b-5895xxkudu] {
    padding: 0.55rem 0.7rem;
    vertical-align: top;
    word-break: break-word;
}

.history-cell--date[b-5895xxkudu] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* R-20260721-02: keep the date and time on one row (was stacked) so the
   row stays compact. The cell is already white-space: nowrap. */
.history-cell__day[b-5895xxkudu] {
    display: inline;
    font-weight: 600;
    color: var(--ink);
}

.history-cell__time[b-5895xxkudu] {
    display: inline;
    margin-left: 0.4rem;
    font-size: 0.85rem;
}

.history-cell--type[b-5895xxkudu] {
    white-space: nowrap;
}

.history-cell__title[b-5895xxkudu] {
    display: block;
    font-weight: 600;
    color: var(--ink);
}

.history-cell__notes[b-5895xxkudu] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.825rem;
}

.history-cell--actions[b-5895xxkudu] {
    white-space: nowrap;
    text-align: right;
}

.history-cell--actions > * + *[b-5895xxkudu] {
    margin-left: 0.3rem;
}

.history-empty-row[b-5895xxkudu] {
    padding: 1.25rem var(--space-4);
    text-align: center;
    color: var(--ink-soft);
}

.history-status[b-5895xxkudu] {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.visually-hidden[b-5895xxkudu] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.history-badge[b-5895xxkudu] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
}

.history-badge--evaluation[b-5895xxkudu] {
    background: oklch(0.95 0.06 230);
    color: oklch(0.35 0.10 230);
    border-color: oklch(0.85 0.08 230);
}

.history-badge--diagnosis[b-5895xxkudu] {
    background: oklch(0.95 0.07 30);
    color: oklch(0.35 0.12 30);
    border-color: oklch(0.85 0.08 30);
}

.history-badge--service[b-5895xxkudu] {
    background: oklch(0.94 0.09 145);
    color: oklch(0.32 0.12 145);
    border-color: oklch(0.82 0.10 145);
}

.history-badge--absence[b-5895xxkudu] {
    background: oklch(0.94 0.07 60);
    color: oklch(0.35 0.12 60);
    border-color: oklch(0.84 0.09 60);
}

.history-badge--scheduled[b-5895xxkudu] {
    background: oklch(0.94 0.05 260);
    color: oklch(0.34 0.11 260);
    border-color: oklch(0.82 0.08 260);
}

/* R-v0.42: εγκρίσεις + επικοινωνίες folded into the timeline as rows. */
.history-badge--approval[b-5895xxkudu] {
    background: oklch(0.94 0.06 310);
    color: oklch(0.34 0.12 310);
    border-color: oklch(0.83 0.08 310);
}

.history-badge--communication[b-5895xxkudu] {
    background: oklch(0.94 0.06 195);
    color: oklch(0.33 0.11 195);
    border-color: oklch(0.82 0.08 195);
}

/* #658: the continuation decision («Δεν συνεχίζει») as a timeline row.
   Warm hue, distinct from the cool approval/communication pair, because a
   membership change is the one row that alters the child's standing rather
   than recording something that happened to them. */
.history-badge--membership[b-5895xxkudu] {
    background: oklch(0.94 0.06 65);
    color: oklch(0.34 0.11 65);
    border-color: oklch(0.82 0.08 65);
}

/* R-v0.42: read-only contact detail modal definition list. */
.history-contact-detail[b-5895xxkudu] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.history-contact-detail dt[b-5895xxkudu] {
    font-weight: 600;
    color: var(--muted, #64748b);
}

.history-contact-detail dd[b-5895xxkudu] {
    margin: 0;
}

.history-badge--new[b-5895xxkudu] {
    background: oklch(0.92 0.14 95);
    color: oklch(0.30 0.14 95);
    border-color: oklch(0.78 0.14 95);
}

.history-row--new[b-5895xxkudu] {
    animation: history-row-flash-b-5895xxkudu 4s ease-out 1;
    box-shadow: inset 3px 0 0 0 oklch(0.78 0.14 95);
}

@keyframes history-row-flash-b-5895xxkudu {
    0%   { background: oklch(0.97 0.10 95); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .history-row--new[b-5895xxkudu] { animation: none; }
}

.history-row--actionable[b-5895xxkudu] {
    cursor: context-menu;
}

.filter-backdrop[b-5895xxkudu] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.filter-dropdown[b-5895xxkudu] {
    position: fixed;
    z-index: 1001;
    min-width: 16rem;
    max-width: 22rem;
    max-height: 22rem;
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.9rem;
}

.filter-dropdown__header[b-5895xxkudu] {
    padding: var(--space-2) 0.85rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--line);
}

.filter-dropdown__item[b-5895xxkudu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.85rem;
    cursor: pointer;
}

.filter-dropdown__item:hover[b-5895xxkudu] {
    background: oklch(0.95 0.02 230);
}

.filter-dropdown__item--all[b-5895xxkudu] {
    border-bottom: 1px solid var(--line);
}

.filter-dropdown__list[b-5895xxkudu] {
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 0.15rem 0;
}

.filter-dropdown__actions[b-5895xxkudu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: var(--space-2) 0.6rem;
    border-top: 1px solid var(--line);
    background: oklch(0.985 0.01 80);
}

.context-menu-backdrop[b-5895xxkudu] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.context-menu[b-5895xxkudu] {
    position: fixed;
    z-index: 1001;
    min-width: 14rem;
    background: var(--card, #fff);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

.context-menu__header[b-5895xxkudu] {
    padding: 0.35rem 0.85rem 0.4rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-1);
}

.context-menu__item[b-5895xxkudu] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.45rem 0.85rem;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.context-menu__item:hover:not(:disabled)[b-5895xxkudu],
.context-menu__item:focus-visible[b-5895xxkudu] {
    background: oklch(0.95 0.02 230);
    outline: none;
}

.context-menu__item:disabled[b-5895xxkudu] {
    opacity: 0.55;
    cursor: not-allowed;
}

.context-menu__divider[b-5895xxkudu] {
    height: 1px;
    background: var(--line);
    margin: var(--space-1) 0;
}

.context-menu__note[b-5895xxkudu] {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
}

.context-menu__section[b-5895xxkudu] {
    padding: 0.4rem 0.85rem var(--space-1);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /Pages/Customers/Children/People.razor.rz.scp.css */
/* «Συνδεδεμένα πρόσωπα» tab (Elias, 2026-08-12). These rules moved here
   verbatim from Edit.razor.css when the table left the «Στοιχεία» screen —
   they are ::deep CSS-isolation rules and only reach the table from the
   component that renders it, so leaving them behind would have silently
   restored the wrap-and-spread the reports below were about. */

/* =============================================================
   «Συνδεδεμένα πρόσωπα» (connected-persons) table — RECURRING owner
   report v0.48 → v0.49 → v0.52: «the parents name should be auto
   resized to fit one line» / «the connected parents column is too far
   away» (a column pushed far right with a big empty gap).

   WHY earlier fixes didn't stick: the table carries the global
   `.data-table` class, whose rules force `width:100%` and (via an
   earlier attempt in app.css) `word-break/overflow-wrap` on the cells.
   Those live OUTSIDE this component, so a component tweak was silently
   overridden and the wrap + spread returned every release. The fix now
   lives HERE, scoped to the component and reaching the (unscoped) table
   DOM with ::deep, which also adds the isolation scope attribute and so
   wins on specificity over the plain global `.linked-parents-table`
   selectors. The global app.css rules were brought into agreement too.

   Two goals, both content-driven:
   1. Table sizes to its content (`width:auto`) instead of the full
      panel — the 5 short columns sit together, no far-right column.
   2. The Πρόσωπο (name) cell never wraps (`white-space:nowrap`) so the
      full name stays on ONE line, sized to the name.
   Restored to the global card-stacking layout under 768px (where the
   table becomes stacked cards) so mobile is unaffected. ============= */
[b-zdedh2x36o] .linked-parents-table {
    width: auto;
    max-width: 100%;
    table-layout: auto;
}
/* Name column («Πρόσωπο»): one line, sized to the name — never wrap. */
[b-zdedh2x36o] .linked-parents-table td[data-label="Πρόσωπο"],
[b-zdedh2x36o] .linked-parents-table td[data-label="Πρόσωπο"] a {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
/* Selects size to their widest option, not the whole column, so the
   Σχέση / Επιμέλεια columns stop stretching and shoving the trailing
   columns to the far right. */
[b-zdedh2x36o] .linked-parents-table .link-edit-select {
    width: auto;
    max-width: 100%;
    min-width: 0;
}
/* Trailing action / payer columns hug their content instead of
   absorbing slack. */
[b-zdedh2x36o] .linked-parents-table th,
[b-zdedh2x36o] .linked-parents-table td {
    white-space: nowrap;
}

/* Under the global 768px card breakpoint the table restructures into
   stacked cards (display:block cells); let text flow normally there so
   long names don't overflow a phone card. */
@media (max-width: 768px) {
    [b-zdedh2x36o] .linked-parents-table,
    [b-zdedh2x36o] .linked-parents-table th,
    [b-zdedh2x36o] .linked-parents-table td,
    [b-zdedh2x36o] .linked-parents-table td[data-label="Πρόσωπο"],
    [b-zdedh2x36o] .linked-parents-table td[data-label="Πρόσωπο"] a {
        white-space: normal;
    }
}

/* Elias, 2026-08-13: «the connected persons tab should span the whole tab, not
   be restricted like a column.»

   The card carries `.login-card`, whose `max-width: 32rem` is the login form's
   width and arrived with the class name. It was harmless while this card was
   the right-hand column of `.child-edit-grid`; now that it is a tab of its own
   it capped the whole screen at ~512px.

   🔴 The TABLE deliberately stays `width: auto` (see below). That is not an
   oversight: v0.48→v0.52 and R-20260731-04 were owner reports about this exact
   table stretched to full width, which pushed its five short columns apart and
   left a far-right column with a gap. Widening the CARD gives the tab the
   screen; widening the TABLE would bring those reports back. */
[b-zdedh2x36o] .login-card.child-edit-parents,
.child-edit-parents[b-zdedh2x36o] {
    max-width: none;
    width: 100%;
}
/* /Pages/Customers/CustomerConsentsTab.razor.rz.scp.css */
/* #652 — «"Κάλυψη συγκαταθέσεων" tab should be more compact. especialy the
   list» (Christina, live demo).

   Following #573 §2's precedent on the scheduling-preferences tab: tighten
   rather than remove. Every row here is one consent type the clinic is
   legally required to be able to see the state of, so hiding any of them
   would trade a compliance surface for whitespace.

   The saving is vertical: base .data-table cells are 0.65rem tall in padding
   alone, and each row also carries a button whose own padding sets the floor.
   Trimming both takes the tab from scrolling to fitting on a laptop screen.
   Scoped to .consent-coverage, so no other .data-table in the app moves. */
.consent-coverage th[b-dfkhtnsjtf],
.consent-coverage td[b-dfkhtnsjtf] {
    padding: 0.4rem 0.75rem;
}

/* The buttons are what actually set the row height once the padding is
   trimmed, so they have to come down with it. */
.consent-coverage .row-actions .btn-primary[b-dfkhtnsjtf],
.consent-coverage .row-actions .btn-secondary[b-dfkhtnsjtf] {
    padding-block: 0.25rem;
    font-size: 0.85rem;
}

.consent-coverage .row-actions[b-dfkhtnsjtf] {
    gap: 0.25rem;
}

/* The badge is the tallest thing in its cell; leaving it untouched would
   cancel most of the saving above. */
.consent-coverage .status-badge[b-dfkhtnsjtf] {
    padding-block: 0.1rem;
}

/* Per-row status-dependent action buttons for both the coverage
   summary and the recorded-consents table. Mirrors the inline action
   rows used by the sibling Παιδιά / receipt lists: keep the buttons on
   one line, right-aligned, with a small gap; wrap gracefully on narrow
   viewports. */
.row-actions[b-dfkhtnsjtf] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Keep the actions column from stretching; align its header/content
   to the right so the buttons sit at the end of the row. */
.col-actions[b-dfkhtnsjtf] {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
/* /Pages/Customers/CustomerContactsTab.razor.rz.scp.css */
/*
    Styling for «Επικοινωνίες» — the parent/child contact timeline and the
    F31 quick-capture panel. Shipped with the component (PR #428) referenced
    the class names below but no stylesheet was ever added, so the panel
    rendered as raw, cramped browser controls: a selected channel looked
    identical to an unselected one (no .active feedback → "doesn't let me
    select channel") and the primary «Καταχώρηση» button fell below the fold
    in the unspaced block. This restores the F29 usability contract: clear
    field rhythm, a visible selected state, and one obvious primary action.

    Scoped (CSS isolation) so these generic class names cannot collide with
    other pages.
*/

/* ---------- Quick-capture panel ---------- */

.contact-capture[b-jkernxkjbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px);
    margin-bottom: var(--space-5, 24px);
    background: var(--cream, oklch(0.98 0.01 90));
    border: 1px solid var(--line, oklch(0.88 0.02 210));
    border-radius: var(--radius, 12px);
}

/* One field per row: a fixed-width label column, controls flowing after it.
   On narrow screens the label drops above its controls. */
.contact-capture .field-row[b-jkernxkjbp] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
}

.contact-capture .field-label[b-jkernxkjbp],
.contact-capture .field-row > label:first-child[b-jkernxkjbp] {
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-weight: 600;
    font-size: 0.9rem;
}

.contact-capture .field-optional[b-jkernxkjbp] {
    font-weight: 400;
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-size: 0.8rem;
}

/* Θέμα + Παιδί share one row as two label/select pairs. */
.contact-capture .field-row-pair[b-jkernxkjbp] {
    grid-template-columns: 7.5rem 1fr max-content 1fr;
}

.contact-capture .field-row-pair > label:not(:first-child)[b-jkernxkjbp] {
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: var(--space-3, 12px);
    justify-self: end;
}

/* Note row: label column, then textarea + its helper stacked in column 2. */
.contact-capture .field-row-note[b-jkernxkjbp] {
    align-items: start;
}

.contact-capture .field-row-note .field-help[b-jkernxkjbp] {
    grid-column: 2;
    margin: 0;
}

.contact-capture select[b-jkernxkjbp],
.contact-capture input[type="date"][b-jkernxkjbp] {
    padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--line, oklch(0.85 0.02 210));
    border-radius: var(--radius-sm, 8px);
    background: var(--card, #fff);
    color: var(--ink, oklch(0.22 0.03 215));
    font-size: 0.95rem;
    min-width: 0;
}

.contact-capture textarea[b-jkernxkjbp] {
    width: 100%;
    padding: var(--space-2) 0.65rem;
    border: 1.5px solid var(--line, oklch(0.85 0.02 210));
    border-radius: var(--radius-sm, 8px);
    background: var(--card, #fff);
    color: var(--ink, oklch(0.22 0.03 215));
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.contact-capture select:focus[b-jkernxkjbp],
.contact-capture textarea:focus[b-jkernxkjbp],
.contact-capture input:focus[b-jkernxkjbp] {
    outline: none;
    border-color: var(--teal-800, oklch(0.54 0.11 210));
    box-shadow: 0 0 0 3px oklch(0.85 0.19 128 / 0.25);
}

/* ---------- Segmented control (Κανάλι, Αποτέλεσμα) ---------- */

.contact-capture .segmented[b-jkernxkjbp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.contact-capture .segmented-item[b-jkernxkjbp] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1.5px solid var(--line, oklch(0.85 0.02 210));
    border-radius: 999px;
    background: var(--card, #fff);
    color: var(--ink, oklch(0.22 0.03 215));
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.contact-capture .segmented-item:hover[b-jkernxkjbp] {
    border-color: var(--teal-700, oklch(0.62 0.11 208));
}

.contact-capture .segmented-item:focus-visible[b-jkernxkjbp] {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.85 0.19 128 / 0.30);
}

/* The selected state — the whole reason a user can tell a channel is picked. */
.contact-capture .segmented-item.active[b-jkernxkjbp] {
    background: var(--teal-800, oklch(0.54 0.11 210));
    border-color: var(--teal-800, oklch(0.54 0.11 210));
    color: #fff;
    font-weight: 600;
}

/* ---------- Direction radios ---------- */

.contact-capture .radio-inline[b-jkernxkjbp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: var(--space-4, 16px);
    color: var(--ink, oklch(0.22 0.03 215));
    cursor: pointer;
    user-select: none;
}

.contact-capture .radio-inline input[type="radio"][b-jkernxkjbp] {
    accent-color: var(--teal-800, oklch(0.54 0.11 210));
}

/* The direction row hosts two inline radios after the label. */
.contact-capture .field-row:has(.radio-inline)[b-jkernxkjbp] {
    grid-template-columns: 7.5rem 1fr;
}

/* ---------- Helper text + errors ---------- */

.contact-capture .field-help[b-jkernxkjbp] {
    margin: calc(-1 * var(--space-2, 8px)) 0 0;
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-size: 0.825rem;
}

.contact-capture .form-error[b-jkernxkjbp] {
    margin: 0;
    color: var(--danger, oklch(0.55 0.16 25));
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---------- Actions: one obvious primary button ---------- */

.contact-capture .form-actions[b-jkernxkjbp] {
    display: flex;
    gap: var(--space-3, 12px);
    align-items: center;
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--line, oklch(0.9 0.01 210));
}

/* ---------- Timeline filters ---------- */

.contact-filters[b-jkernxkjbp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
    margin: var(--space-4, 16px) 0;
    padding: var(--space-3, 12px);
    background: var(--teal-50, oklch(0.975 0.015 205));
    border-radius: var(--radius-sm, 8px);
}

.contact-filters label[b-jkernxkjbp] {
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-size: 0.875rem;
    font-weight: 600;
}

.contact-filters select[b-jkernxkjbp] {
    padding: 0.35rem 0.55rem;
    border: 1.5px solid var(--line, oklch(0.85 0.02 210));
    border-radius: var(--radius-sm, 8px);
    background: var(--card, #fff);
    color: var(--ink, oklch(0.22 0.03 215));
    font-size: 0.9rem;
}

.contact-filters .checkbox-inline[b-jkernxkjbp] {
    margin-left: auto;
    font-size: 0.9rem;
}

/* ---------- Timeline ---------- */

.contact-timeline[b-jkernxkjbp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.contact-row[b-jkernxkjbp] {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--line, oklch(0.88 0.02 210));
    border-left: 3px solid var(--teal-600, oklch(0.70 0.10 205));
    border-radius: var(--radius-sm, 8px);
    background: var(--card, #fff);
}

.contact-row-head[b-jkernxkjbp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
}

.contact-channel[b-jkernxkjbp] {
    font-size: 1.15rem;
    line-height: 1;
}

.contact-when[b-jkernxkjbp] {
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.contact-direction[b-jkernxkjbp] {
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-size: 0.875rem;
}

.contact-note[b-jkernxkjbp] {
    margin: var(--space-2, 8px) 0 0;
    color: var(--ink, oklch(0.22 0.03 215));
    font-size: 0.95rem;
    white-space: pre-wrap;
}

.contact-related[b-jkernxkjbp] {
    margin: var(--space-1, 4px) 0 0;
    color: var(--ink-soft, oklch(0.44 0.04 215));
    font-size: 0.85rem;
}

.contact-row .btn-sm[b-jkernxkjbp] {
    margin-top: var(--space-2, 8px);
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

/* ---------- Status badges (chronological outcome pills) ---------- */

.status-badge[b-jkernxkjbp] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}

.status-badge.status-granted[b-jkernxkjbp] {
    background: oklch(0.62 0.13 145 / 0.15);
    color: oklch(0.42 0.13 145);
    border-color: oklch(0.62 0.13 145 / 0.35);
}

.status-badge.status-info[b-jkernxkjbp] {
    background: var(--teal-100, oklch(0.93 0.035 205));
    color: var(--teal-900, oklch(0.38 0.08 215));
    border-color: oklch(0.62 0.11 208 / 0.35);
}

.status-badge.status-warn[b-jkernxkjbp] {
    background: oklch(0.85 0.13 85 / 0.30);
    color: oklch(0.45 0.10 75);
    border-color: oklch(0.75 0.13 85 / 0.45);
}

.status-badge.status-missing[b-jkernxkjbp] {
    background: var(--line, oklch(0.90 0.01 210));
    color: var(--ink-soft, oklch(0.44 0.04 215));
    border-color: var(--line, oklch(0.82 0.02 210));
}

.status-badge.status-withdrawn[b-jkernxkjbp] {
    background: oklch(0.55 0.16 25 / 0.15);
    color: oklch(0.45 0.16 25);
    border-color: oklch(0.55 0.16 25 / 0.35);
}

/* ---------- Responsive: stack labels above controls ---------- */

@media (max-width: 640px) {
    .contact-capture .field-row[b-jkernxkjbp],
    .contact-capture .field-row-pair[b-jkernxkjbp] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .contact-capture .field-row-pair > label:not(:first-child)[b-jkernxkjbp] {
        margin-left: 0;
        justify-self: start;
    }

    .contact-capture .field-row-note .field-help[b-jkernxkjbp] {
        grid-column: 1;
    }

    .contact-filters .checkbox-inline[b-jkernxkjbp] {
        margin-left: 0;
    }
}
/* /Pages/Customers/Detail.razor.rz.scp.css */
/* Actions cell in the Παιδιά table: keep «Προβολή» + «Επεξεργασία»
   on one line, right-aligned, with a small gap. Mirrors the inline
   action rows used by the sibling receipt / financials lists. */
.children-row-actions[b-w23kma9nyp] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* v0.54 report: «Πληρώνει;» column on the Παιδιά table — centre the
   Ναι/Όχι value under its centred header so it reads as a compact yes/no
   marker, matching the child-edit «Συνδεδεμένα πρόσωπα» payer column. */
.children-table .payer-col[b-w23kma9nyp] {
    text-align: center;
    white-space: nowrap;
}
/* /Pages/Sessions/Composition.razor.rz.scp.css */
/* «Σύνθεση ωρολογίου» (#587 item 1). Scoped to the composition board.
   The palette reuses the calendar legend's semantics so an ok / warning
   / blocked row reads the same way as a confirmed / pending / no-show
   block does one screen over. */

.composition-actions[b-zysatfd44a] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.composition-intro[b-zysatfd44a] {
    max-width: 70ch;
}

.composition-week[b-zysatfd44a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.composition-week label[b-zysatfd44a] {
    font-weight: 600;
}

.composition-summary[b-zysatfd44a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.composition-pill[b-zysatfd44a] {
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.composition-pill.is-ok[b-zysatfd44a] {
    background: #e7f6ec;
    color: #1b5e34;
    border-color: #a9d9bb;
}

.composition-pill.is-warning[b-zysatfd44a] {
    background: #fdf4e3;
    color: #7a5200;
    border-color: #e6cf9a;
}

.composition-pill.is-blocked[b-zysatfd44a] {
    background: #fdeaea;
    color: #8a1c1c;
    border-color: #e8b1b1;
}

.composition-table-wrap[b-zysatfd44a] {
    overflow-x: auto;
}

.composition-table[b-zysatfd44a] {
    width: 100%;
    border-collapse: collapse;
}

.composition-table th[b-zysatfd44a],
.composition-table td[b-zysatfd44a] {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #e4e4e7;
    vertical-align: top;
}

.composition-table th[b-zysatfd44a] {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* A 3 px left rule rather than a full-row tint: the row is full of form
   controls and a background wash makes them hard to read. */
.composition-table tbody tr.is-ok[b-zysatfd44a] {
    border-left: 3px solid #2f9e5c;
}

.composition-table tbody tr.is-warning[b-zysatfd44a] {
    border-left: 3px solid #d9a441;
}

.composition-table tbody tr.is-blocked[b-zysatfd44a] {
    border-left: 3px solid #c0392b;
}

.composition-table select[b-zysatfd44a],
.composition-table input[type="time"][b-zysatfd44a],
.composition-table input[type="number"][b-zysatfd44a] {
    width: 100%;
    min-width: 6rem;
}

.composition-duration[b-zysatfd44a] {
    max-width: 5.5rem;
}

.composition-verdict[b-zysatfd44a] {
    min-width: 20rem;
}

.composition-issues[b-zysatfd44a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.composition-issues li[b-zysatfd44a] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.composition-badge[b-zysatfd44a] {
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.composition-badge.is-ok[b-zysatfd44a] {
    background: #e7f6ec;
    color: #1b5e34;
}

.composition-badge.is-warning[b-zysatfd44a] {
    background: #fdf4e3;
    color: #7a5200;
}

.composition-badge.is-blocked[b-zysatfd44a] {
    background: #fdeaea;
    color: #8a1c1c;
}

.composition-conflict[b-zysatfd44a] {
    color: #52525b;
    font-variant-numeric: tabular-nums;
}

.composition-conflict-link[b-zysatfd44a] {
    font-size: 0.85rem;
}

.composition-notes[b-zysatfd44a] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #52525b;
}

.composition-row-actions[b-zysatfd44a] {
    white-space: nowrap;
}

.composition-hint[b-zysatfd44a],
.composition-result[b-zysatfd44a] {
    margin-top: 0.75rem;
}

/* Under 900 px the table becomes stacked cards — nine columns of form
   controls do not survive a phone, and reception does compose from a
   laptop but reviews from anywhere. */
@media (max-width: 900px) {
    .composition-table thead[b-zysatfd44a] {
        display: none;
    }

    .composition-table tbody tr[b-zysatfd44a] {
        display: block;
        border: 1px solid #e4e4e7;
        border-radius: 6px;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
    }

    .composition-table td[b-zysatfd44a] {
        display: grid;
        grid-template-columns: 8rem 1fr;
        gap: 0.5rem;
        align-items: center;
        border-bottom: none;
        padding: 0.25rem 0;
    }

    .composition-table td[b-zysatfd44a]::before {
        content: attr(data-label);
        font-size: 0.8rem;
        font-weight: 600;
        color: #52525b;
    }

    .composition-verdict[b-zysatfd44a] {
        min-width: 0;
    }
}
/* /Pages/Sessions/Detail.razor.rz.scp.css */
/* Cancel + find replacement modal. Scoped via Blazor CSS isolation so
   these class names cannot collide with a global .modal-* rule added
   elsewhere (e.g. the slot-suggester modal on program edit). */

.modal-backdrop[b-oh0ydkea6r] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-oh0ydkea6r] {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: min(720px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-header[b-oh0ydkea6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h2[b-oh0ydkea6r] {
    margin: 0;
    font-size: 1.1rem;
}

.modal-close[b-oh0ydkea6r] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--space-1);
}

.modal-body[b-oh0ydkea6r] {
    padding: var(--space-4);
}

.modal-body label[b-oh0ydkea6r] {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.modal-body textarea[b-oh0ydkea6r],
.modal-body input[type="datetime-local"][b-oh0ydkea6r],
.modal-body select[b-oh0ydkea6r] {
    width: 100%;
    box-sizing: border-box;
}

.modal-body fieldset[b-oh0ydkea6r] {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: var(--space-3);
}

.modal-body fieldset legend[b-oh0ydkea6r] {
    padding: 0 var(--space-1);
    font-weight: 600;
}

.modal-footer[b-oh0ydkea6r] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid #e5e7eb;
}

/* Dark-mode pair. The rest of the app flips via the tokens on :root,
   but this scoped stylesheet hard-coded light-mode colors — without
   these overrides the modal stays bright white over the dark shell. */
@media (prefers-color-scheme: dark) {
    .modal-backdrop[b-oh0ydkea6r] { background: rgba(0, 0, 0, 0.65); }
    .modal-card[b-oh0ydkea6r] { background: var(--card); color: var(--ink); }
    .modal-header[b-oh0ydkea6r] { border-bottom-color: var(--line); }
    .modal-footer[b-oh0ydkea6r] { border-top-color: var(--line); }
    .modal-body fieldset[b-oh0ydkea6r] { border-color: var(--line); }
}
/* /Pages/Sessions/SessionInlineEditPanel.razor.rz.scp.css */
/* Compact variant of .login-card used when the inline session editor is
   hosted inside the «Λεπτομέρειες ραντεβού» modal. Tightens the default
   card padding + field rhythm so the popup stays short now that it also
   carries the time / notes fields previously on a separate edit page. */
.session-inline-edit[b-xeghpfunok] {
    max-width: none;
    margin: var(--space-3) 0 0;
    padding: var(--space-4) 1.1rem 1.1rem;
}

.session-inline-edit__title[b-xeghpfunok] {
    margin: 0;
    font-size: 1.05rem;
}

.session-inline-edit__hint[b-xeghpfunok] {
    margin: 0.15rem 0 var(--space-3);
    font-size: 0.825rem;
}

/* Tighter field rhythm than the global 1rem so the form reads as one
   compact block inside the modal. */
.session-inline-edit .form-field[b-xeghpfunok] {
    margin-bottom: 0.6rem;
}

.session-inline-edit hr[b-xeghpfunok] {
    margin: 0.9rem 0;
}

.session-inline-edit h3[b-xeghpfunok] {
    margin-top: 0;
}
/* /Pages/Users/List.razor.rz.scp.css */
/* «Προσωπικό» list toolbar — the role filter above the staff table.
   Component-scoped (REQ: no global app.css). */
.staff-toolbar[b-ofgogdpio1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.staff-role-filter[b-ofgogdpio1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.staff-role-filter > span[b-ofgogdpio1] {
    font-weight: 600;
    color: var(--text-muted, #555);
}

.staff-role-filter select[b-ofgogdpio1] {
    min-width: 12rem;
    padding: 0.4rem 0.5rem;
}
/* /Pages/Users/StaffCard.razor.rz.scp.css */
/* «Προσωπικό» wave 2: unified staff card. Component-scoped styling only —
   the global app.css is intentionally left untouched. */

.staff-identity-line[b-2v16dnl1q8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Role badge(s) rendered from UserDto.Roles. Neutral, distinct from the
   active/inactive status badges so the two read as different things. */
.badge-role[b-2v16dnl1q8] {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

/* Transparent-stamp preview: checkerboard so removed background reads as
   transparent rather than white. */
.stamp-preview[b-2v16dnl1q8] {
    max-height: 6rem;
    max-width: 16rem;
    border: 1px solid #ddd;
    padding: 4px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}