/* ==========================================================================
   Chaplain Admin — shared design system
   Consolidates styling previously duplicated inline across every admin page.
   No page markup, IDs, or JS behavior depends on anything changing here —
   only the visual treatment of existing classes.
   ========================================================================== */

:root {
    /* Core palette */
    --admin-navy: #0c1826;
    --admin-navy-light: #1b2c42;
    --admin-navy-softer: #2c4262;
    --admin-gold: #b8923f;
    --admin-gold-light: #d9b978;
    --admin-gold-tint: rgba(184, 146, 63, 0.14);

    --admin-bg: #f3f5f8;
    --admin-surface: #ffffff;
    --admin-text: #1c2430;
    --admin-muted: #5b6472;
    --admin-border: #e0e4ea;
    --admin-border-strong: #c7cedb;

    /* Semantic */
    --admin-success: #1f7a4d;
    --admin-success-bg: #e5f3ec;
    --admin-danger: #a4322a;
    --admin-danger-bg: #fbe9e7;
    --admin-warning: #92620f;
    --admin-warning-bg: #fbf0dc;
    --admin-info: #2b5a8c;
    --admin-info-bg: #e8f0f9;

    --admin-radius-sm: 6px;
    --admin-radius: 10px;
    --admin-radius-lg: 14px;
    --admin-shadow-sm: 0 1px 3px rgba(12, 24, 38, 0.07);
    --admin-shadow: 0 4px 14px rgba(12, 24, 38, 0.08);
    --admin-shadow-lg: 0 10px 30px rgba(12, 24, 38, 0.16);

    --admin-sidebar-width: 260px;
    --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---- Base ---------------------------------------------------------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--admin-bg);
    color: var(--admin-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--admin-navy);
    letter-spacing: -0.01em;
}

a { color: var(--admin-navy-softer); }

:focus-visible {
    outline: 2px solid var(--admin-gold);
    outline-offset: 2px;
}

.text-muted { color: var(--admin-muted); }
.helper-text { font-size: 0.85rem; color: var(--admin-muted); margin-top: 0.25rem; }
.section-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--admin-navy);
    margin: 1.75rem 0 0.75rem;
}
.back-link { font-size: 0.9rem; color: var(--admin-navy-softer); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ---- App shell: sidebar + header + content -------------------------- */

.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--admin-sidebar-width);
    background: linear-gradient(180deg, var(--admin-navy) 0%, #0a1420 100%);
    color: #fff;
    padding: 1.5rem 1.1rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1000;
}

.sidebar-close {
    display: none;
    position: absolute;
    top: 1rem; right: 1rem;
    background: none; border: none;
    color: #fff; font-size: 1.6rem;
    cursor: pointer; z-index: 1100;
}

.sidebar-header { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.sidebar-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: 0.01em; color: #fff; }
.sidebar-subtitle { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-top: 0.3rem; }

.nav-section-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--admin-gold-light);
    margin: 1.25rem 0 0.5rem;
    font-weight: 600;
}

.nav-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    border-radius: var(--admin-radius-sm);
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: rgba(255,255,255,0.09); color: #fff; }
.nav-link.active { background: rgba(184, 146, 63, 0.22); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--admin-gold); }
.nav-link-icon { width: 1.1rem; text-align: center; opacity: 0.9; }

.nav-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; color: rgba(255,255,255,0.6); }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(8,14,22,0.55); z-index: 500; }
.sidebar-backdrop.active { display: block; }

.admin-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.admin-header {
    background: var(--admin-navy-light);
    color: #fff;
    padding: 0.8rem 1.75rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: sticky; top: 0; z-index: 900;
    box-shadow: 0 2px 10px rgba(12,24,38,0.12);
}

.header-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.header-title { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.env-badge {
    background: var(--admin-gold);
    color: #1c1400;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-right { display: flex; align-items: center; gap: 0.75rem; }

.logout-link {
    color: #fff; text-decoration: none; font-size: 0.88rem; font-weight: 600;
    padding: 0.4rem 0.85rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    transition: background 0.15s ease;
}
.logout-link:hover { background: rgba(255,255,255,0.12); }

.sidebar-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: 0.25rem; }
.sidebar-toggle .bar { display: block; width: 20px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; }

.content { padding: 2rem 1.75rem 3rem; max-width: 1120px; margin: 0 auto; width: 100%; }

.admin-credit {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--admin-border);
    text-align: center;
    font-size: 0.8rem;
    color: var(--admin-muted);
}

.admin-credit a {
    color: var(--admin-navy-softer);
    text-decoration: underline;
}

.admin-credit a:hover {
    color: var(--admin-gold);
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 2px 0 16px rgba(0,0,0,0.3);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; }
    .sidebar-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
    .content { padding: 1.25rem 1rem 2rem; }
}

/* ---- Buttons ---------------------------------------------------------- */

.btn, .btn-gold, .btn-secondary, .secondary-btn, .btn-gray, .btn-red,
.btn-approve, .btn-decline, .btn-promote, .btn-retake, .save-btn, .btn-disabled {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: var(--admin-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:active, .btn-gold:active, .btn-secondary:active, .btn-gray:active,
.btn-red:active, .btn-approve:active, .btn-decline:active, .save-btn:active { transform: translateY(1px); }

.btn, .btn-gold, .btn-promote, .save-btn {
    background: var(--admin-gold);
    color: #1c1400;
}
.btn:hover, .btn-gold:hover, .btn-promote:hover, .save-btn:hover { background: #a37f34; }

.btn-secondary, .secondary-btn, .btn-gray {
    background: #eef0f3;
    color: var(--admin-navy);
    border-color: var(--admin-border-strong);
}
.btn-secondary:hover, .secondary-btn:hover, .btn-gray:hover { background: #e2e5ea; }

.btn-red, .btn-decline {
    background: var(--admin-surface);
    color: var(--admin-danger);
    border-color: rgba(164, 50, 42, 0.4);
}
.btn-red:hover, .btn-decline:hover { background: var(--admin-danger-bg); }

.btn-approve {
    background: var(--admin-success);
    color: #fff;
}
.btn-approve:hover { background: #175f3c; }

.btn-retake {
    background: var(--admin-surface);
    color: var(--admin-navy-softer);
    border-color: var(--admin-border-strong);
}
.btn-retake:hover { background: var(--admin-bg); }

.btn-disabled, button:disabled, .btn:disabled {
    background: #e4e6ea !important;
    color: #9aa1ab !important;
    border-color: transparent !important;
    cursor: not-allowed;
}

.btn-cancel {
    background: transparent;
    color: var(--admin-muted);
    border: 1px solid var(--admin-border-strong);
    padding: 0.55rem 1.1rem;
    border-radius: var(--admin-radius-sm);
    font-weight: 600;
    cursor: pointer;
}
.btn-cancel:hover { background: var(--admin-bg); }

.action-row, .modal-actions, .review-header-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* ---- Badges & status pills --------------------------------------------- */

.status-badge, .status-pill, .badge-complete, .badge-progress, .badge-inprogress,
.badge-approved, .badge-submitted, .badge-ready, .badge-warning, .badge-locked,
.yes-badge, .no-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.status-badge, .badge-progress, .badge-inprogress { background: var(--admin-gold-tint); color: #7a5c1f; }
.badge-complete, .badge-approved, .badge-ready, .yes-badge { background: var(--admin-success-bg); color: var(--admin-success); }
.badge-warning, .badge-submitted { background: var(--admin-warning-bg); color: var(--admin-warning); }
.badge-locked, .no-badge { background: #eceef1; color: var(--admin-muted); }

.status-badge.complete { background: var(--admin-success-bg); color: var(--admin-success); }
.status-badge.active { background: var(--admin-warning-bg); color: var(--admin-warning); }
.status-badge.locked { background: #eceef1; color: var(--admin-muted); }
.active-step { border-color: var(--admin-gold) !important; background: var(--admin-gold-tint); }

.correct { color: var(--admin-success); font-weight: 600; }
.incorrect { color: var(--admin-danger); font-weight: 600; }

/* ---- Cards & grids ------------------------------------------------------ */

.tile-grid, .directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.tile-card, .module-card, .training-card, .question-card, .quiz-card,
.review-card, .chap-card, .completion-card, .uniform-card, .upload-card,
.reference-card, .profile-card, .form-card, .info-block {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--admin-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.tile-card:hover, a.module-card:hover, a.training-card:hover, a.chap-card:hover {
    box-shadow: var(--admin-shadow);
    border-color: var(--admin-gold-light);
    text-decoration: none;
    color: inherit;
}

.tile-title, .module-title, .training-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--admin-navy);
}
.tile-subtitle, .module-subtitle, .training-subtitle { color: var(--admin-muted); font-size: 0.9rem; }
.tile-meta, .last-updated { font-size: 0.83rem; color: var(--admin-muted); margin-top: 0.2rem; }

.chap-card { text-align: center; align-items: center; }
.chap-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--admin-border); margin-bottom: 0.4rem; }
.chap-photo img { width: 100%; height: 100%; object-fit: cover; }
.chap-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--admin-navy); }
.chap-ranklabel { font-size: 0.95rem; font-weight: 600; color: #444; }
.chap-role { font-size: 0.9rem; color: var(--admin-muted); margin-bottom: 0.3rem; }
.chap-field { margin-bottom: 0.3rem; font-size: 0.93rem; text-align: left; width: 100%; }
.chap-label { font-weight: 600; color: var(--admin-muted); }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.dashboard-tile {
    background: var(--admin-surface);
    border-radius: var(--admin-radius);
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow-sm);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-tile:hover { border-color: var(--admin-gold-light); box-shadow: var(--admin-shadow); }
.dashboard-tile-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 0.4rem; color: var(--admin-navy); }
.dashboard-tile-icon { font-size: 1.15rem; }
.dashboard-tile-text { font-size: 0.9rem; color: var(--admin-muted); }

.form-card { padding: 0; overflow: hidden; }
.form-card-header {
    background: var(--admin-navy);
    color: #fff;
    padding: 0.85rem 1.2rem;
    font-weight: 600;
    font-size: 1rem;
}
.form-card-body { padding: 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
@media (max-width: 800px) { .form-card-body { grid-template-columns: 1fr; } }

/* ---- Forms --------------------------------------------------------- */

.form-row, .apply-field, .filter-row, .upload-row, .full-width, .full-width-field, .profile-field {
    margin-bottom: 1rem;
}
.full-width, .full-width-field { grid-column: 1 / -1; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
}
.checkbox-row input[type="checkbox"] { margin: 0; }
.checkbox-row-group { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-bottom: 1rem; }
.checkbox-row-group .checkbox-row { white-space: nowrap; margin-bottom: 0; }

.form-card-body.credentialing, .form-card-body.training {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-items: start !important;
    align-items: start !important;
}

input[readonly] { background: var(--admin-bg); cursor: not-allowed; }

label, .upload-label, .profile-label, .chap-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--admin-navy-softer);
    display: block;
    margin-bottom: 0.35rem;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="file"], select, textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--admin-surface);
    color: var(--admin-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--admin-gold);
    box-shadow: 0 0 0 3px var(--admin-gold-tint);
}

.profile-input { width: 100%; }

.form-errors, .error, .error-box {
    background: var(--admin-danger-bg);
    color: var(--admin-danger);
    padding: 0.7rem 0.9rem;
    border-radius: var(--admin-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.search-box { margin-bottom: 1.25rem; display: flex; justify-content: center; }
.search-box input { width: 100%; max-width: 420px; }

/* ---- Alerts, states, banners ---------------------------------------- */

.alert-success, .success, .success-box, .upload-success {
    background: var(--admin-success-bg);
    color: var(--admin-success);
    padding: 0.75rem 0.9rem;
    border-radius: var(--admin-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.92rem;
}
.alert-danger, .upload-error { background: var(--admin-danger-bg); color: var(--admin-danger); padding: 0.75rem 0.9rem; border-radius: var(--admin-radius-sm); margin-bottom: 1rem; font-size: 0.92rem; }

.preview-banner, .summary-box, .info-grid, .trainee-summary {
    background: var(--admin-info-bg);
    border: 1px solid rgba(43, 90, 140, 0.18);
    color: var(--admin-navy);
    border-radius: var(--admin-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--admin-muted);
    background: var(--admin-surface);
    border: 1px dashed var(--admin-border-strong);
    border-radius: var(--admin-radius);
}

.upload-instructions { font-size: 0.88rem; color: var(--admin-muted); margin-bottom: 0.75rem; }
.upload-box {
    border: 1.5px dashed var(--admin-border-strong);
    border-radius: var(--admin-radius);
    padding: 1.5rem;
    text-align: center;
    background: var(--admin-bg);
}
.uniform-photo-preview, .video-wrapper { border-radius: var(--admin-radius); overflow: hidden; box-shadow: var(--admin-shadow-sm); }
.uniform-note { font-size: 0.85rem; color: var(--admin-muted); }

/* ---- Modals ---------------------------------------------------------- */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 18, 28, 0.55);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000;
}
.modal-box {
    background: var(--admin-surface);
    padding: 1.6rem;
    border-radius: var(--admin-radius);
    width: 380px;
    max-width: 90vw;
    box-shadow: var(--admin-shadow-lg);
}
.modal-textarea { width: 100%; height: 90px; margin: 0.75rem 0; }

/* ---- Review / tabs / directory ---------------------------------------- */

.review-header-card, .edit-box {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--admin-shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.review-header-left { display: flex; flex-direction: column; gap: 0.25rem; }
.applicant-name { margin: 0; font-family: var(--font-display); color: var(--admin-navy); }
.applicant-email { color: var(--admin-muted); font-size: 0.92rem; }

.review-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.review-tabs .tab {
    padding: 0.5rem 0.9rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--admin-muted);
    cursor: pointer;
    text-decoration: none;
}
.review-tabs .tab.active-step, .review-tabs .tab.active, .review-tabs .tab:hover { background: var(--admin-navy); color: #fff; border-color: var(--admin-navy); }
.tab-content { background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 1.25rem; display: none; }
.tab-content.active { display: block; }

.info-item label { font-size: 0.85rem; font-weight: 600; color: var(--admin-muted); display: block; margin-bottom: 0.25rem; }
.info-item div { font-size: 1rem; color: var(--admin-text); }

.review-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: var(--admin-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--admin-navy);
}
.review-section-header .chevron { transition: transform 0.2s ease; font-size: 1rem; color: var(--admin-muted); }
.review-section-header.open .chevron { transform: rotate(90deg); }
.module-content { display: none; margin-top: 1rem; }
.review-content, .module-content, .question-content { font-size: 0.95rem; line-height: 1.55; }

.question-block { padding: 0.9rem 0; border-bottom: 1px solid var(--admin-border); }
.question-title { font-weight: 600; margin-bottom: 0.3rem; }
.question-type { font-size: 0.78rem; color: var(--admin-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.quiz-question { font-weight: 600; margin-bottom: 0.5rem; }

.step-details, .progress-block { font-size: 0.92rem; }
.substep-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.substep-item { padding: 0.4rem 0; border-bottom: 1px solid var(--admin-border); font-size: 0.92rem; }
.drag-handle { cursor: grab; color: var(--admin-muted); }

/* ---- Generic tables (used by list-style admin pages) ------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    overflow: hidden;
    font-size: 0.92rem;
}
thead th {
    background: var(--admin-navy);
    color: #fff;
    text-align: left;
    padding: 0.65rem 0.9rem;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
tbody td { padding: 0.65rem 0.9rem; border-top: 1px solid var(--admin-border); }
tbody tr:hover { background: var(--admin-bg); }

/* ---- Standalone login-style pages (index, forgot/first-time login) ---- */

body.auth-page {
    background: var(--admin-bg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    min-height: 100vh;
}

.login-box {
    background: var(--admin-surface);
    padding: 2.25rem;
    border-radius: var(--admin-radius-lg);
    width: 380px;
    max-width: 90vw;
    box-shadow: var(--admin-shadow-lg);
}
.login-box h1 { margin-top: 0; font-size: 1.5rem; text-align: center; }
.login-box button[type="submit"] {
    width: 100%;
    margin-top: 1.4rem;
    padding: 0.65rem;
    background: var(--admin-navy);
    color: #fff;
    border: none;
    border-radius: var(--admin-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.login-box button[type="submit"]:hover { background: var(--admin-navy-light); }
.login-links { margin-top: 1rem; text-align: center; }
.login-links a { color: var(--admin-navy-softer); font-weight: 600; text-decoration: none; display: block; margin-top: 0.4rem; }
.login-links a:hover { text-decoration: underline; }