/* ── Admin: Enrollment pages (/admin/enrollment-pages) ───────────────
   Builds on the shared admin table/modal/form styles in admin.css. Every
   class here is prefixed `ep-`.

   This page's UI copy is Hebrew, so the page root re-establishes RTL inside
   the LTR-pinned .admin-main - the same self-contained island pattern
   .ct-page uses in admin-contracts.css. LTR-sensitive values (URLs, phones,
   emails, dates, amounts) keep their dir="ltr" attributes in the template.
   The overflow rule comes with it: RTL content overflows LEFTWARD, which the
   LTR .admin-main scroller cannot reach, so the island scrolls itself. */

.ep-page {
    direction: rtl;
    text-align: right;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* admin.css positions the hint physically (margin-left) for the LTR pages. */
.ep-page .form-label-hint {
    margin-left: 0;
    margin-right: 0.35rem;
}

/* ── Filter bar ─────────────────────────────────────────────────── */

.ep-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ep-filter-field {
    min-width: 190px;
}

.ep-filter-field .form-select {
    direction: rtl;
    text-align: right;
}

/* ── Card list ──────────────────────────────────────────────────── */

.ep-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ep-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 1px 3px rgba(0, 60, 130, 0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ep-card:hover {
    box-shadow: 0 4px 16px rgba(0, 60, 130, 0.07);
}

/* The default page is the one the bare subdomain serves - it earns a rail. */
.ep-card--default {
    border-color: #cfe3ff;
    box-shadow: inset 4px 0 0 0 #0071e3, 0 1px 3px rgba(0, 60, 130, 0.04);
}

.ep-card--archived {
    background: #fafafa;
    opacity: 0.75;
}

/* Rehearsal page. Crimson is unused elsewhere on this screen (status chips are
   green/amber/grey, the default badge is blue), so the rail alone separates a
   test page from a selling one in a list scan. Listed after --default so that
   if a page somehow carries both, the louder warning wins the rail. */
.ep-card--test {
    border-color: #f3c6d3;
    box-shadow: inset 4px 0 0 0 #c2185b, 0 1px 3px rgba(0, 60, 130, 0.04);
}

/* Solid fill, not a tint: every other chip on the card is tinted, so a filled
   badge is the one thing the eye lands on first. */
.ep-test-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    padding: 3px 11px;
    border-radius: 999px;
    background: #c2185b;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ep-test-badge i {
    font-size: 0.68rem;
}

.ep-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ep-card-titles {
    min-width: 0;
    flex: 1 1 340px;
}

.ep-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color, #191a23);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.ep-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ── Status + flags ─────────────────────────────────────────────── */

.ep-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.ep-status--active {
    background: rgba(31, 157, 85, 0.12);
    color: #1f7a44;
}

.ep-status--paused {
    background: rgba(255, 163, 4, 0.16);
    color: #9a6b00;
}

.ep-status--archived {
    background: rgba(90, 91, 106, 0.12);
    color: #5a5b6a;
}

.ep-default-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: #e8f0fe;
    color: #0071e3;
    border: 1px solid #cfe3ff;
}

.ep-default-badge i {
    font-size: 0.65rem;
}

.ep-flag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f3f4f6;
    color: #6b7280;
}

.ep-flag--warn {
    background: rgba(196, 85, 26, 0.1);
    color: #b23c17;
}

/* ── Counters ───────────────────────────────────────────────────── */

.ep-card-counts {
    display: flex;
    gap: 1.5rem;
    flex: 0 0 auto;
}

.ep-count {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.ep-count-value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-color, #191a23);
    direction: ltr;
}

.ep-count-cap {
    font-size: 0.95rem;
    font-weight: 400;
    color: #8e8f9e;
}

.ep-count-label {
    font-size: 0.72rem;
    color: #8e8f9e;
}

/* ── Closed-state note ──────────────────────────────────────────── */

.ep-closed-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(196, 85, 26, 0.07);
    color: #b23c17;
    font-size: 0.8rem;
}

/* ── Public URL row ─────────────────────────────────────────────── */

.ep-url-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.ep-url {
    flex: 1 1 auto;
    min-width: 0;
    direction: ltr;
    text-align: left;
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    background: #fafbfd;
}

.ep-url-row .btn {
    white-space: nowrap;
}

/* ── Meta grid ──────────────────────────────────────────────────── */

.ep-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.ep-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ep-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #8e8f9e;
}

.ep-meta-value {
    font-size: 0.85rem;
    color: #444;
}

.ep-meta-empty {
    font-size: 0.82rem;
    color: #8e8f9e;
}

.ep-cohort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

/* The cohort list holds N long chips while every other meta cell holds one
   short value, so it takes a row of its own and lets the chips run across it.
   `1 / -1` rather than `span 2`: with auto-fit, a span can conjure an extra
   column at narrow widths, whereas 1/-1 is the full row at any column count. */
.ep-meta--cohorts {
    grid-column: 1 / -1;
}

/* Deliberately NOT white-space:nowrap. A cohort label runs long
   ("Developer & Architect מחזור 1 - 04/09/2026"), and nowrap inside a
   minmax(190px,1fr) grid cell pushed the chip straight over the neighbouring
   date. Wrapping keeps the whole label readable - truncating with an ellipsis
   would hide the serial or the start date, which is the entire point of the
   chip. max-width pins it to its cell no matter how long the label gets. */
.ep-cohort-chip {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    background: #f3f5f9;
    color: #5b6470;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ── Course pills ───────────────────────────────────────────────── */

.ep-course-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ep-course-pill {
    display: inline-flex;
    align-items: baseline;
    /* Wraps only when it has run out of room, which the ex-VAT figure the sale
       price now carries made possible on a narrow bundle pill. This page's RTL
       island answers an overflow by scrolling the whole card sideways, so a pill
       that cannot wrap moves the card instead of itself. */
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    background: #eef2f7;
    color: #5b6470;
}

.ep-course-pill--developer {
    background: #e8f0fe;
    color: #0071e3;
}

.ep-course-pill--architect {
    background: #f3e8fe;
    color: #8b34c9;
}

.ep-course-pill--bundle {
    background: #fff4e0;
    color: #b06c00;
}

.ep-course-name {
    font-weight: 600;
}

.ep-course-price {
    font-weight: 600;
    direction: ltr;
}

.ep-course-list {
    font-size: 0.75rem;
    opacity: 0.65;
    text-decoration: line-through;
    direction: ltr;
}

.ep-course-pct {
    font-size: 0.72rem;
    opacity: 0.8;
}

/* ── Card actions ───────────────────────────────────────────────── */

.ep-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #f0f0f0;
}

.ep-btn-danger {
    color: #b23c17;
    border-color: #f0d5cb;
}

.ep-btn-danger:hover:not(:disabled) {
    border-color: #b23c17;
}

/* ── Enrollments drill-down ─────────────────────────────────────── */

.ep-drill {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #e5e5e5;
}

/* Explains the ₪1 rows before the reader can misread them as a shortfall. */
.ep-drill-test-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: #fdf2f6;
    color: #a3134a;
    font-size: 0.78rem;
    line-height: 1.55;
}

.ep-drill-test-note i {
    margin-top: 0.15rem;
    flex: 0 0 auto;
    font-size: 0.72rem;
    opacity: 0.8;
}

.ep-drill-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.ep-drill-table {
    font-size: 0.82rem;
    min-width: 880px;
}

.ep-drill-table th,
.ep-drill-table td {
    text-align: right;
}

.ep-drill-sub {
    font-size: 0.75rem;
    color: #8e8f9e;
}

.ep-drill-error {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    font-size: 0.82rem;
}

.ep-lead-link {
    color: var(--primary-color, #0071e3);
    font-weight: 600;
    text-decoration: none;
}

.ep-lead-link:hover {
    text-decoration: underline;
}

.ep-paid-short {
    color: #b23c17;
}

/* A cancelled enrollment still counts in the audit trail but is not a live
   sale - mute the whole row so it cannot be misread as one. */
.ep-drill-row--cancelled td {
    opacity: 0.55;
}

.ep-drill-row--cancelled .ep-mini {
    opacity: 1;
}

/* Compact status chips inside the drill-down table. */
.ep-mini {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f3f4f6;
    color: #6b7280;
}

.ep-mini--signed,
.ep-mini--tp-verified {
    background: rgba(31, 157, 85, 0.12);
    color: #1f7a44;
}

.ep-mini--pending,
.ep-mini--tp-created,
.ep-mini--tp-redirected,
.ep-mini--tp-callback_received {
    background: rgba(255, 163, 4, 0.16);
    color: #9a6b00;
}

.ep-mini--cancelled,
.ep-mini--tp-failed,
.ep-mini--tp-mismatch,
.ep-mini--tp-unmatched {
    background: rgba(196, 85, 26, 0.1);
    color: #b23c17;
}

/* ── Create / edit modal ────────────────────────────────────────── */

.ep-modal {
    width: 680px;
    max-width: min(680px, calc(100vw - 32px));
}

.ep-section-title {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.ep-section-title:first-child {
    margin-top: 0;
}

.ep-cohort-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.4rem;
    max-height: 190px;
    overflow-y: auto;
    padding: 0.6rem;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafbfd;
}

.ep-cohort-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
    padding: 0.2rem 0.1rem;
}

.ep-cohort-option input {
    flex: 0 0 auto;
    accent-color: var(--primary-color, #0071e3);
}

/* The cohort is not marketed publicly. A hint, never a block - selling a
   closed cohort in the room is a legitimate use of an enrollment page. */
.ep-cohort-closed {
    flex: 0 0 auto;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #8e8f9e;
    white-space: nowrap;
}

/* Per-course price block */

.ep-course-block {
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    transition: opacity 0.2s, background 0.2s;
}

.ep-course-block--off {
    background: #fafafa;
    opacity: 0.6;
}

.ep-course-block-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

/* The logo components size themselves off the parent font-size - this is the
   only knob that scales them, never the SVG. */
.ep-course-block-name {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.ep-course-block .form-row {
    margin-bottom: 0.35rem;
}

/* List price | sale price | discount preset. The select is narrower than the
   two number fields - it holds "50%" at most. The phone override lives beside
   this rule, not in the shared .ep-modal .form-row block at the end of the
   file: this selector out-specifies that one, so leaving the collapse to it
   silently kept three columns at 358px and squeezed the number inputs to
   76px. */
.ep-course-block .form-row.ep-price-row {
    grid-template-columns: 1fr 1fr 116px;
}

@media (max-width: 767px) {
    .ep-course-block .form-row.ep-price-row {
        grid-template-columns: 1fr;
    }
}

/* Percent options are LTR-safe on their own (digits are weak-LTR and the
   trailing % attaches to them), so the select stays in the page's RTL flow
   and keeps "ללא" reading correctly. */
.ep-discount-select {
    text-align: right;
}

.ep-course-block .form-group {
    margin-bottom: 0;
}

/* Deadline entry: a date input beside a time input, replacing the single
   datetime-local that used to discard a date typed without a time. The time is
   fixed-width - it holds "23:59" and nothing longer - so the date field takes
   the slack and both stay readable at the modal's two-column width. */
.ep-datetime {
    display: flex;
    gap: 0.5rem;
}

.ep-datetime .ep-dt-date {
    flex: 1 1 auto;
    min-width: 0;
}

.ep-datetime .ep-dt-time {
    flex: 0 0 108px;
}

@media (max-width: 767px) {
    .ep-datetime {
        flex-wrap: wrap;
    }

    .ep-datetime .ep-dt-date {
        flex: 1 1 100%;
    }

    .ep-datetime .ep-dt-time {
        flex: 1 1 100%;
    }
}

/* Read-only derived hints (discount percent, deposit explainer). */
.ep-derived {
    font-size: 0.78rem;
    color: #8e8f9e;
    line-height: 1.5;
}

/* An enabled course with no matching cohort is dropped from the public page -
   amber, not red: it is a misconfiguration to notice, not a blocked save. */
.ep-course-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 159, 10, 0.12);
    color: #8a5300;
    font-size: 0.78rem;
    line-height: 1.55;
    font-weight: 500;
}

.ep-course-warn i {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.ep-deposit-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.4rem;
}

.ep-deposit-label {
    font-size: 0.85rem;
    color: #555;
    flex: 1 1 auto;
}

.ep-deposit-input {
    flex: 0 0 140px;
    width: 140px;
}

/* The amount and its ex-VAT hint travel as one flex item so the hint sits under
   the NUMBER rather than at the start of the row. It shrink-wraps to the input's
   own 140px, so the row's geometry is exactly what it was before the wrapper. */
.ep-deposit-amount {
    flex: 0 0 auto;
    min-width: 0;
}

/* Test-mode panel in the modal. Its own bordered block rather than another
   row in the settings list: this is the switch that stops a page selling for
   real, so it must not be flippable absently or skimmable when reading a page
   back. Stays visibly inert until it is on, then goes loud. */
.ep-test-panel {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafbfd;
    transition: background 0.2s, border-color 0.2s;
}

.ep-test-panel--on {
    border-color: #f3c6d3;
    background: #fdf2f6;
}

.ep-test-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.ep-test-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color, #191a23);
}

.ep-test-panel--on .ep-test-title {
    color: #a3134a;
}

.ep-test-title i {
    font-size: 0.8rem;
    opacity: 0.75;
}

.ep-test-help {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #8e8f9e;
}

.ep-test-panel--on .ep-test-help {
    color: #6b6c7a;
}

/* Blocks the save, so it reads as an error rather than a note. */
.ep-test-conflict {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.09);
    color: #b02a37;
    font-size: 0.78rem;
    line-height: 1.55;
    font-weight: 500;
}

.ep-test-conflict i {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

/* ── The ex-VAT parenthetical ───────────────────────────────────── */
/* Base styling is shared (.exvat / .exvat-legend, admin-money.css). Only what
   this screen's own surfaces need is tuned here. */

/* The legend rides the filter bar, whose `align-items: flex-end` would
   otherwise pin it to the very bottom of the select beside it. */
.ep-filter-bar .exvat-legend {
    margin: 0 0 0.45rem;
}

/* Inside a course pill the ex-VAT figure keeps the pill's own hue and steps back
   with opacity instead. The shared grey is tuned for ink on white, and a neutral
   grey sitting inside a tinted blue/violet/amber pill reads as a rendering fault
   rather than as small print. Size, weight and the gap are left to the shared
   `.exvat` / `.exvat--inline` - the markup nests the component INSIDE
   `.ep-course-price` rather than beside it, so it stays inline text within one
   flex item and keeps the single space ExVat.vue emits, instead of being
   blockified into a second flex item and taking a second helping of the pill's
   `gap`. */
.ep-course-pill .exvat {
    color: inherit;
    opacity: 0.62;
}

/* ── Share panel ────────────────────────────────────────────────── */

.ep-share-modal {
    width: 480px;
    max-width: min(480px, calc(100vw - 32px));
}

.ep-share-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}

.ep-share-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color, #191a23);
}

.ep-qr {
    width: 100%;
    max-width: 320px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

.ep-share-url {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #f6f8fc;
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    color: var(--text-color, #191a23);
    word-break: break-all;
    text-align: center;
}

.ep-share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .ep-card-counts {
        gap: 1.1rem;
    }
}

@media (max-width: 767px) {
    .ep-card {
        padding: 1rem;
    }

    .ep-card-head {
        gap: 0.75rem;
    }

    .ep-card-counts {
        width: 100%;
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .ep-url-row {
        flex-wrap: wrap;
    }

    .ep-url {
        flex: 1 1 100%;
    }

    .ep-meta-grid {
        grid-template-columns: 1fr;
    }

    .ep-modal .form-row {
        grid-template-columns: 1fr;
    }

    .ep-cohort-picker {
        grid-template-columns: 1fr;
    }

    .ep-deposit-row {
        flex-wrap: wrap;
    }

    .ep-deposit-input {
        flex: 1 1 100%;
        width: 100%;
    }

    /* The wrapper is the flex item now, so it is the one that has to take the
       whole row - the input's own rule above then fills it. */
    .ep-deposit-amount {
        flex: 1 1 100%;
    }
}