/* ============================================
   GraceGuide — css/admin.css
   Loaded after base.css (shares its design tokens, reset,
   buttons/cards/forms). This file only adds admin-dashboard-
   specific layout: the access gate, sidebar, tab panels,
   tables, and stat/chart cards.
   ============================================ */

body {
    background: var(--bg-warm-ivory);
    /* base.css locks the body to overflow:hidden/100vh for the main
       app's fixed SPA shell (where #page-container scrolls internally
       instead) — this page is a normal scrolling document, so that has
       to be undone here or NOTHING on this page can ever scroll. */
    overflow: visible;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    width: auto;
    /* base.css also pins the body (position: fixed) so iPhones can't drag
       the app's top bar off screen. A pinned body cannot scroll and shrinks
       to its content's width, so that is undone here as well. */
    position: static;
    top: auto;
    left: auto;
    overscroll-behavior: auto;
}

.hidden { display: none !important; }

/* ---- Access gate ---- */
.admin-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--primary-deep-olive), var(--primary-dark));
}

.admin-gate-card {
    width: 100%;
    max-width: 380px;
    background: var(--card-white);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.admin-gate-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    object-fit: cover;
}

.admin-gate-card h1 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: 8px;
}

.admin-gate-message {
    color: var(--text-slate);
    font-size: var(--text-sm);
    margin-bottom: 20px;
    line-height: 1.5;
}

.admin-gate-signin {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-gate-error {
    color: var(--accent-terracotta);
    font-size: var(--text-xs);
    text-align: left;
    margin: -4px 0 0;
}

.admin-gate-back {
    display: inline-block;
    margin-top: 16px;
    font-size: var(--text-xs);
    color: var(--text-slate);
    text-decoration: none;
}

.admin-gate-back:hover { text-decoration: underline; }

/* ---- Dashboard shell ---- */
.admin-dashboard {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--primary-deep-olive);
    color: var(--bg-warm-ivory);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    transition: transform var(--transition-base);
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.2;
}

.admin-sidebar-brand img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.admin-sidebar-brand small {
    font-family: var(--font-primary);
    font-weight: 500;
    opacity: 0.7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
    flex: 1;
    overflow-y: auto;
}

.admin-nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: rgba(248,246,240,0.8);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-nav-btn i { width: 18px; text-align: center; }

.admin-nav-btn:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.admin-nav-btn.active {
    background: rgba(255,255,255,0.16);
    color: white;
}

.admin-sidebar-footer {
    padding: 16px 20px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 12px;
}

.admin-current-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-current-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-muted-gold);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.admin-current-user-name {
    font-size: var(--text-sm);
    font-weight: 600;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-current-user-role {
    font-size: 11px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-sidebar-footer .btn-outline {
    border-color: rgba(255,255,255,0.3);
    color: white;
}

.admin-sidebar-footer .btn-outline:hover {
    background: rgba(255,255,255,0.1);
}

/* "Back to GraceGuide" — always-visible way from the dashboard to the app */
.admin-back-to-app {
    margin-bottom: 14px;
    background: var(--accent-muted-gold);
    color: #202522;
    text-decoration: none;
}

.admin-back-to-app:hover {
    background: var(--gold-light, #d9bc7a);
    color: #202522;
}

/* Space moderation: comment list inside each post card */
.admin-comment-list {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 8px 14px 12px;
}

.admin-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.admin-comment-row .admin-comment-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.admin-comment-row .admin-comment-author {
    font-weight: 600;
    margin-right: 6px;
}

.admin-comment-row .admin-comment-deleted {
    font-style: italic;
    color: var(--text-slate);
}

.admin-settings-note {
    font-size: 12px;
    color: var(--text-slate);
    margin-top: 4px;
}

.admin-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--card-white);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 50;
}

.admin-menu-toggle {
    display: none;
    border: none;
    background: none;
    font-size: 20px;
    color: var(--text-charcoal);
    cursor: pointer;
}

.admin-topbar h1 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.admin-content {
    padding: 24px;
    max-width: 1100px;
    overflow-x: hidden;
}

.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 199;
}

@media (max-width: 900px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .admin-main {
        margin-left: 0;
    }
    .admin-menu-toggle {
        display: block;
    }
    .admin-sidebar-backdrop.visible {
        display: block;
    }
    .admin-content {
        padding: 16px;
    }
}

/* ---- Stat cards ---- */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.admin-stat-card {
    background: var(--card-white);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.admin-stat-card .value {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-deep-olive);
}

.admin-stat-card .label {
    font-size: var(--text-xs);
    color: var(--text-slate);
    margin-top: 2px;
}

.admin-chart-card {
    background: var(--card-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.admin-chart-card h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 16px;
}

.admin-chart-wrap {
    position: relative;
    height: 260px;
}

/* ---- Section cards / panels ---- */
.admin-panel {
    background: var(--card-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.admin-panel h2, .admin-panel h3 {
    font-weight: 700;
    margin-bottom: 14px;
}

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ---- Tables ---- */
.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.admin-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-slate);
    border-bottom: 2px solid rgba(0,0,0,0.06);
    white-space: nowrap;
}

.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    vertical-align: middle;
}

.admin-table tr:hover td {
    background: rgba(48,72,58,0.03);
}

.admin-search-input {
    width: 100%;
    max-width: 280px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

/* Users tab: search + sort, side by side on wide screens, stacked on phones */
.admin-users-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.admin-users-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.admin-users-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-slate);
    font-size: 13px;
    pointer-events: none;
}

.admin-users-search .admin-search-input {
    max-width: none;
    padding-left: 38px;
    background: var(--card-white);
    color: var(--text-charcoal);
}

.admin-sort-select {
    flex: 0 1 220px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    background: var(--card-white);
    color: var(--text-charcoal);
    cursor: pointer;
}

.admin-users-count {
    font-size: var(--text-xs);
    color: var(--text-slate);
    margin-bottom: 12px;
}

.admin-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.admin-table th.sortable:hover { color: var(--primary-deep-olive); }
.admin-table th.sortable i { margin-left: 4px; font-size: 10px; opacity: 0.35; }
.admin-table th.sortable.sorted { color: var(--primary-deep-olive); }
.admin-table th.sortable.sorted i { opacity: 1; }

@media (max-width: 600px) {
    .admin-users-tools { flex-direction: column; align-items: stretch; }
    .admin-users-search, .admin-sort-select { flex: 0 0 auto; width: 100%; }
}

.admin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    background: rgba(48,72,58,0.1);
    color: var(--primary-deep-olive);
}

.admin-badge-danger {
    background: rgba(200,117,82,0.14);
    color: var(--accent-terracotta);
}

.admin-badge-gold {
    background: rgba(199,166,90,0.18);
    color: #8a6d1f;
}

.admin-icon-btn {
    border: none;
    background: rgba(48,72,58,0.08);
    color: var(--primary-deep-olive);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
}

.admin-icon-btn:hover { background: rgba(48,72,58,0.16); }

.admin-icon-btn.danger {
    background: rgba(200,117,82,0.12);
    color: var(--accent-terracotta);
}

.admin-icon-btn.danger:hover { background: rgba(200,117,82,0.22); }

/* ---- Forms within admin panels ---- */
.admin-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.admin-form-row label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-slate);
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.admin-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-pill {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--bg-warm-ivory);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.admin-pill.active {
    background: var(--primary-deep-olive);
    border-color: var(--primary-deep-olive);
    color: white;
}

/* ---- Question editor ---- */
.admin-question-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
}

.admin-question-card .q-text {
    font-weight: 600;
    margin-bottom: 8px;
}

.admin-question-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    font-size: var(--text-xs);
}

.admin-question-option {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.03);
}

.admin-question-option.correct {
    background: rgba(48,72,58,0.14);
    font-weight: 700;
    color: var(--primary-deep-olive);
}

.admin-question-verse {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(199,166,90,0.1);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.admin-question-verse .admin-icon-btn {
    margin-left: auto;
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.admin-question-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

/* ---- Space post management ---- */
.admin-space-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.admin-space-card {
    margin: 0;
}

.admin-space-card .space-card-header {
    cursor: default;
}

.admin-space-post {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.admin-space-post-body {
    flex: 1;
    min-width: 0;
}

.admin-space-post-meta {
    font-size: 11px;
    color: var(--text-slate);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.admin-space-post-content {
    font-size: var(--text-sm);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ---- Admin modal (self-contained, no dependency on core.js) ---- */
.admin-modal-container {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
}

.admin-modal {
    background: var(--card-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.admin-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.admin-toast {
    background: var(--text-charcoal);
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-md);
    animation: adminToastIn 0.2s ease-out;
}

.admin-toast.success { background: var(--primary-deep-olive); }
.admin-toast.error { background: var(--accent-terracotta); }

@keyframes adminToastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-slate);
}

.admin-empty-state i {
    font-size: 36px;
    opacity: 0.3;
    margin-bottom: 12px;
}

.admin-loading-row {
    padding: 20px;
    text-align: center;
    color: var(--text-slate);
}

/* Compose notification: 'Pop up on phones' option */
.admin-push-toggle {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 16px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(199, 166, 90, 0.1);
    border: 1px solid rgba(199, 166, 90, 0.35);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}
.admin-push-toggle input { margin-top: 3px; accent-color: #30483A; }

/* ---- Messages tab (About Us → "Send to the GraceGuide team") ---- */
.admin-nav-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent-terracotta); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.admin-message-card { border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; background: var(--card-white); }
.admin-message-card.new { border-color: var(--accent-muted-gold); box-shadow: 0 0 0 2px rgba(199,166,90,0.18); }
.admin-message-card.resolved { opacity: 0.7; }
.admin-message-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-message-when { font-size: 12px; color: var(--text-slate); margin-right: auto; }
.admin-message-body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; margin-bottom: 8px; }
.admin-message-email { font-size: 13px; color: var(--text-slate); margin-bottom: 8px; word-break: break-all; }
.admin-message-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-message-actions .btn { text-decoration: none; }
@media (max-width: 600px) { .admin-message-actions { flex-direction: column; align-items: stretch; } .admin-message-actions .admin-icon-btn { width: 100%; } }