/**
 * Celentis Reserve Plugin — Styles
 * Updated to match the CI Design System.
 *
 * CSS variables are used with hardcoded fallbacks so styles render correctly
 * on the frontend (theme vars available) AND in WP admin (they aren't).
 */


/* ── 0. Page wrapper ─────────────────────────────────────────────────────── */

.cr-reserve-page {
    padding: 2rem 2rem 4rem;
    max-width: var(--container, 1360px);
    margin: 0 auto;
}


/* ── 1. Table wrapper ────────────────────────────────────────────────────── */

.cr-wrap {
    overflow-x: auto;
    max-width: 1360px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: var(--hull, #0C1A23);
    border: 1px solid var(--rule, #223E54);
    border-radius: var(--r-lg, 14px);
}


/* ── 2. Base table styles ────────────────────────────────────────────────── */

.cr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif);
    color: var(--ink, #E3EDF4);
}

.cr-table th,
.cr-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule, #223E54);
    color: inherit;
}

.cr-table th {
    background: transparent;
    color: var(--ink-mute, #6F8597);
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--beam, #5FB6D4);
}

/* Unconfirmed donation rows — dimmed until verified in-game */
.cr-table tr.cr-row-unconfirmed td { opacity: 0.5; }
.cr-table tr.cr-row-unconfirmed:hover td { opacity: 1; }

/* Row hover */
.cr-table tr:hover td {
    background: var(--bg-3, #1A3346);
    transition: background 0.2s;
}


/* ── 3. Summary table ────────────────────────────────────────────────────── */

.cr-summary-table td:first-child {
    font-weight: 600;
    width: 200px;
    color: var(--ink-mute, #6F8597);
}


/* ── 4. Status badges ────────────────────────────────────────────────────── */

.cr-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.cr-badge-approved   { background: rgba(95,207,154,.12); color: #5FCF9A; border-color: rgba(95,207,154,.3); }
.cr-badge-pending    { background: rgba(240,165,0,.12);  color: #f0a500; border-color: rgba(240,165,0,.3); }
.cr-badge-donation   { background: rgba(95,182,212,.12); color: #5FB6D4; border-color: rgba(95,182,212,.3); }
.cr-badge-loan       { background: rgba(226,106,92,.12); color: #E26A5C; border-color: rgba(226,106,92,.3); }
.cr-badge-loan-payment { background: rgba(95,207,154,.12); color: #5FCF9A; border-color: rgba(95,207,154,.3); }
.cr-badge-confirmed  { background: rgba(95,207,154,.12); color: #5FCF9A; border-color: rgba(95,207,154,.3); }
.cr-badge-paid-off   { background: rgba(95,207,154,.12); color: #5FCF9A; border-color: rgba(95,207,154,.3); }
.cr-badge-denied     { background: rgba(226,106,92,.12); color: #E26A5C; border-color: rgba(226,106,92,.3); }


/* ── 5. Buttons ──────────────────────────────────────────────────────────── */

.cr-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--r-sm, 6px);
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .18s, border-color .18s, color .18s;
}

.cr-btn-approve { background: rgba(95,207,154,.12); color: #5FCF9A; border-color: rgba(95,207,154,.35); }
.cr-btn-approve:hover { background: rgba(95,207,154,.22); color: #8fe8bc; border-color: #5FCF9A; }

.cr-btn-confirm { background: rgba(95,182,212,.12); color: #5FB6D4; border-color: rgba(95,182,212,.35); }
.cr-btn-confirm:hover { background: rgba(95,182,212,.22); color: #8fd1e6; border-color: #5FB6D4; }

.cr-btn-deny { background: rgba(226,106,92,.12); color: #E26A5C; border-color: rgba(226,106,92,.35); }
.cr-btn-deny:hover { background: rgba(226,106,92,.22); color: #f08c80; border-color: #E26A5C; }


/* ── 6. Action links ──────────────────────────────────────────────────────── */

.cr-actions a { margin-right: 6px; font-size: 0.8rem; text-decoration: none; transition: color .15s; }
a.cr-delete { color: #E26A5C; }
a.cr-delete:hover { color: #f08c80; }
a.cr-approve { color: #5FCF9A; }
a.cr-approve:hover { color: #8fe8bc; }


/* ── 7. Notice / alert boxes ─────────────────────────────────────────────── */

.cr-notice {
    max-width: 1360px;
    margin: 0 auto 1rem;
    padding: 12px 16px;
    border-radius: var(--r-sm, 6px);
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.cr-notice-success { background: rgba(95,207,154,.1); color: #5FCF9A; border-color: rgba(95,207,154,.35); }
.cr-notice-error   { background: rgba(226,106,92,.1); color: #E26A5C; border-color: rgba(226,106,92,.35); }


/* ── 8. My Account section headings ──────────────────────────────────────── */

.cr-my-account h3 {
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-mute, #6F8597);
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule, #223E54);
}

.cr-my-account h3:first-child { margin-top: 0; }


/* ── 9. Tabs — CI Design System style ───────────────────────────────────── */

/*
 * One bordered card, equal-width tab columns divided by hairlines.
 * Active tab: beam underline at bottom. No filled background on active.
 *
 * HTML structure (generated by [cr_tabs]):
 *   <div class="cr-tabs" id="cr-tabs-N">
 *     <div class="cr-tab-nav">
 *       <button class="cr-tab-btn active" data-index="0">Tab One</button>
 *       <button class="cr-tab-btn" data-index="1">Tab Two</button>
 *       <div class="cr-reserve-stat">...</div>  ← optional, right-aligned
 *     </div>
 *     <div class="cr-tab-panel active" data-index="0">content</div>
 *     <div class="cr-tab-panel" data-index="1">content</div>
 *   </div>
 */

.cr-tab-nav {
    display: flex;
    max-width: 1360px;
    margin: 1.5rem auto 0;
    background: var(--hull, #0C1A23);
    border: 1px solid var(--rule, #223E54);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
}

.cr-tab-btn {
    /* Full button reset — removes all browser defaults */
    all: unset;
    box-sizing: border-box;

    flex: 1;
    display: block;
    padding: 18px 0;
    background: transparent;
    border-right: 1px solid var(--rule, #223E54);
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--ink-mute, #6F8597);
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: color .2s;
}

.cr-tab-btn:last-of-type {
    border-right: 0;
}

.cr-tab-btn:hover {
    color: var(--ink, #E3EDF4);
}

.cr-tab-btn.active {
    color: var(--ink, #E3EDF4);
}

/* Beam underline on active tab — centered, sits at card bottom edge */
.cr-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 24%; right: 24%; bottom: 0;
    height: 2px;
    background: var(--beam, #5FB6D4);
}

/* Reserve balance stat — right-aligned, separated by a hairline divider */
.cr-reserve-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-left: 1px solid var(--rule, #223E54);
    flex-shrink: 0;
}

.cr-reserve-label {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-mute, #6F8597);
}

.cr-reserve-value {
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #E3EDF4);
}

/* Tab panels */
.cr-tab-panel { display: none; }
.cr-tab-panel.active { display: block; }

/* Inner card sits flush under the tab nav — no top margin, squared top corners */
.cr-tab-panel .cr-wrap {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 var(--r-lg, 14px) var(--r-lg, 14px);
}


/* ── 10. Pagination ──────────────────────────────────────────────────────── */

.cr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--rule, #223E54);
}

.cr-page-btn {
    background: transparent;
    border: 1px solid var(--rule, #223E54);
    color: var(--ink-soft, #B2C4D2);
    padding: 5px 14px;
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    border-radius: var(--r-sm, 6px);
    transition: color .2s, border-color .2s, background .2s;
}

.cr-page-btn:hover:not(:disabled) {
    color: var(--ink, #E3EDF4);
    border-color: var(--ember, #C73F05);
    background: rgba(199,63,5,.1);
}

.cr-page-btn:disabled { opacity: 0.3; cursor: default; }

.cr-page-info {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute, #6F8597);
    min-width: 90px;
    text-align: center;
}


/* ── 11. View switcher — CI Design System style ──────────────────────────── */

/*
 * HTML structure (inside [cr_reserve_page], admin-only):
 *   <div class="cr-view-switcher">
 *     <button class="cr-view-btn active" data-view="member">My Account</button>
 *     <button class="cr-view-btn" data-view="admin">Org View</button>
 *     <div class="cr-reserve-stat">...</div>
 *   </div>
 */

.cr-view-switcher {
    display: flex;
    max-width: 1360px;
    margin: 1.5rem auto;
    background: var(--hull, #0C1A23);
    border: 1px solid var(--rule, #223E54);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
}

.cr-view-btn {
    all: unset;
    box-sizing: border-box;

    display: block;
    padding: 16px 32px;
    background: transparent;
    border-right: 1px solid var(--rule, #223E54);
    font-family: var(--display, "Barlow", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--ink-mute, #6F8597);
    cursor: pointer;
    position: relative;
    transition: color .2s;
    white-space: nowrap;
}

.cr-view-btn:last-of-type { border-right: 0; }
.cr-view-btn:hover { color: var(--ink, #E3EDF4); }
.cr-view-btn.active { color: var(--ink, #E3EDF4); }

.cr-view-btn.active::after {
    content: "";
    position: absolute;
    left: 24%; right: 24%; bottom: 0;
    height: 2px;
    background: var(--beam, #5FB6D4);
}

/* Reserve stat inside the view switcher */
.cr-view-switcher .cr-reserve-stat {
    margin-left: auto;
}

.cr-reserve-page .cr-tab-nav {
    margin-top: 0;
}


/* ── 12. Donor stat cards ────────────────────────────────────────────────── */

.cr-stats-row {
    display: flex;
    gap: 16px;
    max-width: 1360px;
    margin: 0 auto 1.5rem;
}

.cr-stat-card {
    flex: 1;
    min-width: 0;
    background: var(--hull, #0C1A23);
    border: 1px solid var(--rule, #223E54);
    border-radius: var(--r-md, 10px);
    padding: 1.75rem;
}

.cr-stat-card h4 {
    margin: 0 0 0.75rem;
    font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-mute, #6F8597);
    padding-bottom: 8px;
}

.cr-stat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: stat-counter;
}

.cr-stat-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--rule, #223E54);
    counter-increment: stat-counter;
}

.cr-stat-list li:last-child { border-bottom: none; }

.cr-stat-list li::before {
    content: counter(stat-counter);
    min-width: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ember, #C73F05);
    text-align: right;
    flex-shrink: 0;
}

.cr-stat-name {
    flex: 1;
    color: var(--ink, #E3EDF4);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-stat-amount {
    color: #5FCF9A;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 0.82rem;
}

.cr-stat-empty {
    font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--ink-mute, #6F8597);
    margin: 0;
}

@media (max-width: 700px) {
    .cr-stats-row { flex-direction: column; }
}


/* ── 13. Payment history ─────────────────────────────────────────────────── */

.cr-payment-amount { color: #5FCF9A; font-weight: 600; }
.cr-balance-owing  { color: #f0a500; font-weight: 600; }
.cr-balance-zero   { color: #5FCF9A; font-weight: 600; }

.cr-payment-totals td {
    background: var(--panel, #122632);
    border-top: 1px solid var(--rule-strong, #2F536E);
    font-weight: 600;
}


/* ── 14. Page background ─────────────────────────────────────────────────── */

body.page-celentis-reserve .page-main,
body.page-celentis-reserve .page-hero {
    background: var(--void, #081116) !important;
    border-bottom-color: transparent !important;
}