/* ============================================================
   EduJA — Admin Dashboard styles
   ============================================================ */

.admin-content { padding: 16px; color: #f5e7c8; }

.admin-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.admin-header-row h1 { color: #FDB827; font-size: 1.5rem; }

.admin-sub { color: #ccc; font-size: 0.85rem; margin-bottom: 14px; }

.admin-gate {
    background: #7f1d1d;
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
}

.admin-search {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border-radius: 30px;
    border: 1px solid #3a4a3a;
    background: #1e2a1e;
    color: #f5e7c8;
    margin-bottom: 14px;
    font-size: 0.9rem;
    display: block;
}

.admin-status { font-size: 0.85rem; color: #aaa; margin-bottom: 10px; min-height: 1.2em; }

.admin-table-wrap {
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    padding: 10px;
}

.admin-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.admin-table th {
    text-align: left;
    padding: 10px 12px;
    color: #FDB827;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #3a4a3a;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #2a3a2a;
    font-size: 0.85rem;
    vertical-align: middle;
}

.user-name { font-weight: bold; color: #f5e7c8; }
.user-sub { font-size: 0.7rem; color: #888; }
.you-tag {
    background: #FDB827;
    color: #000;
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
    font-weight: bold;
}

.role-badge, .status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: bold;
    white-space: nowrap;
}
.role-badge.admin { background: #FDB827; color: #000; }
.role-badge.teacher { background: #1d4ed8; color: #dbeafe; }
.role-badge.student { background: #2a3a2a; color: #f5e7c8; border: 1px solid #3a4a3a; }
.status-badge.active { background: #14532d; color: #86efac; }
.status-badge.disabled { background: #7f1d1d; color: #fca5a5; }
.role-select { background: #1e2a1e; color: #f5e7c8; border: 1px solid #3a4a3a; border-radius: 8px; padding: 4px 6px; font-size: 0.72rem; margin-right: 4px; }

.user-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-action-btn {
    background: #1e2a1e;
    border: 1px solid #3a4a3a;
    color: #f5e7c8;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    min-height: 32px;
}
.admin-action-btn:hover { border-color: #FDB827; }
.admin-action-btn.danger { border-color: #b91c1c; color: #fca5a5; }

@media (max-width: 600px) {
    .admin-table { min-width: 600px; }
}

/* ---- tabs ---- */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-tab {
    background: #1e2a1e; border: 1px solid #3a4a3a; color: #f5e7c8;
    padding: 8px 16px; border-radius: 30px; font-size: 0.82rem; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}
.admin-tab.active { background: #FDB827; color: #000; border-color: #FDB827; }
.admin-tab-badge {
    background: #b91c1c; color: #fff; font-size: 0.62rem; font-weight: bold;
    border-radius: 30px; padding: 1px 7px;
}
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

/* ---- pending payments table ---- */
.order-status-badge { display: inline-block; padding: 3px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: bold; }
.order-status-badge.pending_review { background: #78350f; color: #fde68a; }
.order-status-badge.paid { background: #14532d; color: #86efac; }
.order-status-badge.rejected { background: #7f1d1d; color: #fca5a5; }
.order-status-badge.refunded { background: #4c1d95; color: #ddd6fe; }
.order-items-note { font-size: 0.68rem; color: #999; margin-top: 2px; }
.receipt-link-btn { background: none; border: 1px solid #3a4a3a; color: #FDB827; border-radius: 8px; font-size: 0.68rem; padding: 2px 8px; cursor: pointer; margin-top: 3px; }

/* ---- Live Activity tab (recommendation #3c) — a rolling feed of
   bookings/messages/calls, populated purely by Supabase Realtime
   subscriptions started the moment this tab's data loads; nothing
   here is fetched or paginated, it only ever grows from live events
   for as long as the admin has the tab open. ---- */
.activity-feed-list {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    padding: 6px 10px;
    max-height: 520px;
    overflow-y: auto;
}
.activity-feed-empty { color: #888; font-size: 0.82rem; padding: 14px 6px; text-align: center; }
.activity-feed-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid #2a3a2a;
    font-size: 0.82rem;
}
.activity-feed-item:last-child { border-bottom: none; }
.activity-feed-text { color: #f5e7c8; }
.activity-feed-time { color: #888; font-size: 0.68rem; white-space: nowrap; flex-shrink: 0; }
.activity-feed-item.kind-booking .activity-feed-text { color: #93c5fd; }
.activity-feed-item.kind-cancel .activity-feed-text { color: #fca5a5; }
.activity-feed-item.kind-message .activity-feed-text { color: #f5e7c8; }
.activity-feed-item.kind-call .activity-feed-text { color: #86efac; }

/* ---- Referrals tab (recommendation #6) ---- */
.referral-status-badge { display: inline-block; padding: 3px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: bold; white-space: nowrap; }
.referral-status-badge.qualified { background: #78350f; color: #fde68a; }
.referral-status-badge.flagged { background: #7f1d1d; color: #fca5a5; }
.referral-flag-reason { font-size: 0.68rem; color: #fca5a5; margin-top: 2px; }

/* ---- Sales Commissions tab (read-only report) ---- */
.commission-status-badge { display: inline-block; padding: 3px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: bold; white-space: nowrap; }
.commission-status-badge.pending { background: #78350f; color: #fde68a; }
.commission-status-badge.paid { background: #14532d; color: #86efac; }
.commission-status-badge.clawed_back { background: #7f1d1d; color: #fca5a5; }
.commission-summary-table th:nth-child(1), .commission-summary-table td:nth-child(1) { width: 40%; }
.commission-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.commission-filter-row select {
    background: #1a2a1a; color: #f5e7c8; border: 1px solid #3a4a3a;
    border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; min-height: 34px;
}

/* ---- QR Code tab ---- */
.qr-poster-wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.qr-poster-preview-box {
    background: #111; border: 1px solid #3a4a3a; border-radius: 12px;
    padding: 10px; flex-shrink: 0;
}
#qrPosterPreviewCanvas { display: block; max-width: 320px; width: 100%; height: auto; border-radius: 4px; }
.qr-poster-actions { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.qr-poster-actions .assign-submit-btn,
.qr-poster-actions .footer-btn { width: 100%; text-align: center; }
.qr-personal-link-row {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem;
    color: #f5e7c8; background: rgba(0,0,0,0.35); border: 1px solid #3a4a3a;
    border-radius: 10px; padding: 8px 10px; cursor: pointer;
}
.qr-personal-link-row input { margin-top: 2px; flex-shrink: 0; }
.qr-share-link-box {
    display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.35);
    border: 1px solid #3a4a3a; border-radius: 10px; padding: 6px 10px;
}
.qr-share-link-box code {
    flex: 1; overflow-x: auto; white-space: nowrap; font-size: 0.72rem; color: #93c5fd;
}
.qr-share-link-box .admin-action-btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .qr-poster-wrap { flex-direction: column; }
    .qr-poster-preview-box { width: 100%; }
    #qrPosterPreviewCanvas { max-width: 100%; }
}
/* ---- Teacher Payroll tab: fixed column proportions ----
Each payroll table has a different column count/meaning, so give
each its own explicit widths rather than letting plain table
auto-layout size columns from cell content, with only 2-3 columns
and a mix of long names, a narrow input, and a single button, auto
layout made "Teacher" swing wildly wide/narrow between renders and
threw the header out of visual balance with the rows underneath it. */
.payroll-rates-table th:nth-child(1), .payroll-rates-table td:nth-child(1) { width: 55%; }
.payroll-rates-table th:nth-child(2), .payroll-rates-table td:nth-child(2) { width: 25%; }
.payroll-rates-table th:nth-child(3), .payroll-rates-table td:nth-child(3) { width: 20%; white-space: nowrap; }

.payroll-sessions-table th:nth-child(1), .payroll-sessions-table td:nth-child(1) { width: 22%; }
.payroll-sessions-table th:nth-child(2), .payroll-sessions-table td:nth-child(2) { width: 22%; }
.payroll-sessions-table th:nth-child(3), .payroll-sessions-table td:nth-child(3) { width: 20%; white-space: nowrap; }
.payroll-sessions-table th:nth-child(4), .payroll-sessions-table td:nth-child(4) { width: 22%; }
.payroll-sessions-table th:nth-child(5), .payroll-sessions-table td:nth-child(5) { width: 14%; white-space: nowrap; }

.payroll-report-table th:nth-child(1), .payroll-report-table td:nth-child(1) { width: 36%; }
.payroll-report-table th:nth-child(2), .payroll-report-table td:nth-child(2) { width: 16%; }
.payroll-report-table th:nth-child(3), .payroll-report-table td:nth-child(3) { width: 16%; }
.payroll-report-table th:nth-child(4), .payroll-report-table td:nth-child(4) { width: 16%; }
.payroll-report-table th:nth-child(5), .payroll-report-table td:nth-child(5) { width: 16%; }