/* Core Programme customer portal — "My Programmes" WooCommerce My Account endpoint. */

/* Nav icon for our custom account tab inside the Essential Addons "Woo Account
   Dashboard" widget. EA gives its built-in tabs icons from a proprietary icon font
   ("eaicon") keyed by endpoint; our endpoint has no glyph there, so we supply a
   self-contained SVG (a mortarboard) via CSS mask. `background-color: currentColor`
   makes it take the tab's text colour, so it matches active/hover states like the
   others. Scoped to .eael-account-dashboard-navbar so it only appears in the widget
   (where every tab has an icon) — the plain WC account page shows no tab icons. */
.eael-account-dashboard-navbar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--my-programmes a::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 6.14V11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-.5-.866V5.85l.884-.353a.5.5 0 0 0 .025-.917z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 6.14V11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-.5-.866V5.85l.884-.353a.5.5 0 0 0 .025-.917z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.atb-portal {
    --atb-border: #e3e6ea;
    --atb-muted: #6b7280;
    --atb-bg-soft: #f7f8fa;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2733;
}

.atb-portal-heading {
    margin: 22px 0 12px;
    font-size: 16px;
    font-weight: 600;
}
.atb-portal-heading:first-child {
    margin-top: 0;
}

.atb-portal-empty {
    color: var(--atb-muted);
    margin: 8px 0;
}

/* ---- enrolment card ---- */
.atb-portal-card {
    border: 1px solid var(--atb-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
    background: #fff;
}

.atb-portal-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}
.atb-portal-student {
    font-weight: 500;
    color: #2563eb;
}
.atb-portal-student::before { content: "· "; color: var(--atb-muted); font-weight: 400; }
.atb-portal-slot {
    font-weight: 400;
    color: var(--atb-muted);
}
.atb-portal-slot::before { content: "· "; }

.atb-portal-meta {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.atb-portal-meta th,
.atb-portal-meta td {
    text-align: left;
    padding: 5px 0;
    vertical-align: top;
    border: 0;
    background: none;
}
.atb-portal-meta th {
    width: 130px;
    color: var(--atb-muted);
    font-weight: 500;
}

/* ---- badges ---- */
.atb-portal-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    background: #eef0f3;
    color: #374151;
}
.atb-status-active    { background: #e6f6ec; color: #147a3d; }
.atb-status-withdrawn { background: #fdecec; color: #b3261e; }
.atb-status-forfeited { background: #fdecec; color: #b3261e; }
.atb-status-completed { background: #e8eefb; color: #1d4ed8; }

.atb-deposit-held        { background: #e6f6ec; color: #147a3d; }
.atb-deposit-applied     { background: #e8eefb; color: #1d4ed8; }
.atb-deposit-transferred { background: #e8eefb; color: #1d4ed8; }
.atb-deposit-forfeited   { background: #fdecec; color: #b3261e; }
.atb-deposit-refunded    { background: #eef0f3; color: #374151; }

.atb-order-completed  { background: #e6f6ec; color: #147a3d; }
.atb-order-processing { background: #e8eefb; color: #1d4ed8; }
.atb-order-pending,
.atb-order-on-hold,
.atb-order-failed     { background: #fff4e5; color: #a15c07; }
.atb-order-cancelled,
.atb-order-refunded   { background: #eef0f3; color: #6b7280; }

/* ---- upcoming lessons ---- */
.atb-portal-upcoming {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--atb-border);
}
.atb-portal-upcoming-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--atb-muted);
    margin-bottom: 6px;
}
.atb-portal-lessons {
    background: var(--atb-bg-soft);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

/* ---- history ---- */
.atb-portal-history {
    margin: 6px 0 4px;
}
.atb-portal-history > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--atb-muted);
    margin-bottom: 10px;
}

/* ---- invoices ---- */
.atb-portal-invoices {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 8px;
    font-size: 13px;
}
.atb-portal-invoices th,
.atb-portal-invoices td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--atb-border);
    background: none;
}
.atb-portal-invoices thead th {
    color: var(--atb-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.atb-portal-link {
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 480px) {
    .atb-portal-meta th { width: 100px; }
    .atb-portal-invoices th:nth-child(2),
    .atb-portal-invoices td:nth-child(2) { display: none; } /* hide Date on narrow screens */
}

/* ---- flash notices (portal redirects) ---- */
.atb-portal-notice {
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 16px;
    font-size: 14px;
}
.atb-portal-notice--success { background: #e6f6ec; color: #147a3d; }
.atb-portal-notice--info    { background: #e8eefb; color: #1d4ed8; }
.atb-portal-notice--error   { background: #fdecec; color: #b3261e; }

/* ---- withdrawal request control (My Programmes card) ---- */
.atb-withdraw {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--atb-border);
}
.atb-withdraw--pending {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #a15c07;
    font-size: 13px;
    font-weight: 600;
}
.atb-withdraw-note {
    margin: 0 0 8px;
    color: var(--atb-muted);
    font-size: 13px;
}
.atb-withdraw form { margin: 0; }
.atb-btn-outline {
    background: #fff;
    border: 1px solid #d1495b;
    color: #d1495b;
    padding: 7px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}
.atb-btn-outline:hover { background: #fdecec; }
.atb-btn-link {
    background: none;
    border: 0;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-size: 13px;
}

/* ---- holiday gate: withdrawing now would FORFEIT the deposit ----
   Shown in place of the request button when no notice remains to serve
   (MEMBERSHIP-PLAN §5.1). Styled as a warning, not an error: nothing has gone
   wrong — the customer is being given a choice with real money attached. */
.atb-withdraw--holiday {
    background: #fff8e6;
    border: 1px solid #f0c860;
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
}
.atb-withdraw-warning {
    margin: 0 0 12px;
    color: #7a5200;
    font-size: 13px;
    line-height: 1.5;
}
.atb-withdraw-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* "Wait" is the SAFE option and leads, so it must not wear the red the
   destructive request button uses everywhere else on this card. */
.atb-withdraw--holiday .atb-btn-outline {
    display: inline-block;
    border-color: #2563eb;
    color: #2563eb;
    text-decoration: none;
}
.atb-withdraw--holiday .atb-btn-outline:hover { background: #eff4fe; }
.atb-btn-danger { color: #b3261e; }

/* ==================================================================
   "Classes" tab — date-range filter + timeline (mirrors [ameliacustomerpanel])
   ================================================================== */

/* ---- date-range filter ---- */
.atb-classes-filter {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--atb-border);
    border-radius: 10px;
    background: var(--atb-bg-soft);
}
.atb-classes-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atb-classes-filter-field label {
    font-size: 12px;
    color: var(--atb-muted);
    font-weight: 600;
}
.atb-classes-filter input[type="date"] {
    padding: 7px 10px;
    border: 1px solid var(--atb-border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: inherit;
}
.atb-classes-filter-btn {
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
}
.atb-classes-filter-btn:hover { background: #1d4ed8; }

/* ---- timeline ---- */
.atb-timeline-day {
    position: relative;
    padding-left: 30px;
    padding-bottom: 18px;
}
.atb-timeline-day:last-child { padding-bottom: 0; }
.atb-timeline-day::before { /* dashed connector between date dots */
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 0;
    border-left: 2px dashed #d3d8de;
}
.atb-timeline-day:last-child::before { display: none; }

.atb-timeline-date {
    position: relative;
    font-weight: 600;
    color: #4b5563;
    font-size: 15px;
    margin-bottom: 10px;
}
.atb-timeline-dot {
    position: absolute;
    left: -30px;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6b7280;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e3e6ea;
}
.atb-timeline-day--next .atb-timeline-dot { background: #2563eb; } /* next upcoming */

/* ---- class card ---- */
.atb-class-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--atb-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #fff;
}
.atb-class-time {
    background: #eef0f3;
    color: #374151;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
}
.atb-class-name {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}
/* leading status dot, like the Amelia panel */
.atb-class-card .atb-portal-badge::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
}
.atb-class-status-approved { background: #e6f6ec; color: #147a3d; }
.atb-class-status-pending,
.atb-class-status-waiting  { background: #fff4e5; color: #a15c07; }
.atb-class-status-canceled,
.atb-class-status-rejected,
.atb-class-status-no-show  { background: #fdecec; color: #b3261e; }

@media (max-width: 480px) {
    .atb-class-card { flex-wrap: wrap; gap: 8px 12px; }
    .atb-class-name { flex-basis: 100%; order: 3; }
}

/* ---- pagination ---- */
.atb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--atb-border);
}
.atb-page-link {
    padding: 7px 15px;
    border: 1px solid var(--atb-border);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    color: inherit;
    background: #fff;
    white-space: nowrap;
}
.atb-page-link:hover { background: var(--atb-bg-soft); }
.atb-page-link--disabled {
    color: #b6bcc4;
    background: var(--atb-bg-soft);
    cursor: default;
}
.atb-page-info {
    color: var(--atb-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* Nav icon for the "Classes" tab in the EA widget (calendar), same self-contained
   mask technique as the My Programmes mortarboard above. */
.eael-account-dashboard-navbar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--classes a::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E") no-repeat center / contain;
}