/* ============================================================================
   AffPaymentDateDrawer.css
   ----------------------------------------------------------------------------
   All styling for the Atlas AffPaymentDateDrawer component (Components/Atlas/
   AffPaymentDateDrawer.razor) — the date-selection bottom sheet: body gutter,
   the inline PaymentCalendar's chrome (wrapper, grid→legend hairline override,
   Selected/Due-date/Today legend chips), and the locked-account branch panel.

   Single source of truth — both /makepayment and /selectPaymentDate render the
   ONE AffPaymentDateDrawer component, so there is no duplicated/drifting CSS.
   The 16px .payment-date-drawer-body gutter lives here (was PaymentDateDrawer-
   local, which caused /selectPaymentDate to render full-bleed).
   ============================================================================ */

/* ── Drawer-body container — 16px lateral gutters. BottomDrawer host owns the
   scroll region + is full-bleed (NoBodyPadding), so this restores the gutters
   the calendar / warning / legend expect. Owned by the component → every
   consumer gets it (fixes the prior full-bleed drift). ────────────────────── */
.payment-date-drawer-body {
    padding: 0 16px;
}

/* ── Calendar wrapper ─────────────────────────────────────────────────────
   Lightweight layout container — no card chrome; the calendar sits directly
   on the drawer body's white surface. */
.payment-date-calendar-wrapper {
    margin: 0;
    /* No lateral padding — the drawer body already provides the 16px gutters. */
    padding: 0;
}
/* Hairline between grid and legend. Reuses the canonical .account-details-divider
   (0.5px Grey-20) but drops its 0 16px inset so it sits flush with the calendar
   block (the drawer body already supplies the gutters). Scoped to the wrapper so
   the global .account-details-divider rule is untouched. */
.payment-date-calendar-wrapper .account-details-divider {
    margin: 0;
}
.payment-date-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 6px;
    /* Symmetric band: mirror the existing 16px top gap below the legend so it
       sits evenly between the calendar hairline and the Confirm button (was
       16px 0 0 0 — tight against Confirm). Same value top and bottom. */
    padding: 16px 0;
    font-family: var(--font-body, Roboto, sans-serif);
    /* Scaled to match the calendar day-number size (16px); lh 24 vertically
       centers the 20px chip indicators. */
    font-size: 16px;
    line-height: 24px;
    color: var(--color-grey-60, #434343);
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}
.legend-chip-today {
    border: 2px solid var(--color-grey-40, #8C8C8C);
    border-radius: 50%;
}
.legend-chip-selected {
    background: var(--color-brand-pink, #F91D71);
    border-radius: 50%;
}
.legend-chip-due {
    border: 2px solid var(--color-brand-pink, #F91D71);
    border-radius: 50%;
}
.legend-label {
    white-space: nowrap;
}

/* ── Preview mode: inline static showcase (styleguide / documentation use). ───
   Wrapper styled to LOOK like the drawer sheet (white, rounded, subtle shadow)
   but rendered as in-flow content, not a fixed overlay. Used by
   AffPaymentDateDrawer when Preview=true. ────────────────────────────────────── */
.aff-payment-date-drawer-preview {
    background: var(--color-white, #FFFFFF);
    border-radius: var(--radius-16, 16px);
    box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.08));
    max-width: 390px;
    margin: 16px auto;
    padding: 24px 0 0;  /* top spacing approximates where the drawer header would sit */
    overflow: hidden;
}
.aff-payment-date-drawer-preview-footer {
    padding: 16px;
    border-top: 1px solid var(--color-grey-20, #D4D4D5);
}

/* ── Locked-account branch panel (Make-a-Payment only; inert when not locked) ─ */
.payment-date-locked-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--color-white, #FFFFFF);
    border: 1px solid var(--color-grey-20, #D4D4D5);
    border-radius: var(--radius-8, 8px);
    margin: 8px 0;
}
.payment-date-locked-icon {
    font-family: var(--font-icon, "Font Awesome 6 Pro");
    font-weight: 300;  /* FA Light per Atlas Helper component */
    font-size: 24px;
    color: var(--color-black, #000000);
    flex-shrink: 0;
    margin-top: 2px;
}
.payment-date-locked-text h3 {
    margin: 0 0 4px;
    font-family: var(--font-body, Roboto, sans-serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black, #000000);
}
.payment-date-locked-text p {
    margin: 0;
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: 14px;
    line-height: 22px;
    /* Atlas Helper body uses Type-Secondary (softer than other alerts). */
    color: var(--color-grey-60, #434343);
}