/* ============================================================
   Mastermind Marketing - Admin Area Styles
   Uses the same brand system as the public site.
   ============================================================ */

:root {
    --primary-color: #FF9900;
    --primary-dark: #e68a00;
    --dark-charcoal: #36453B;
    --muted-blue: #596869;
    --text-grey: #515751;
    --off-white: #F5F9E9;
    --white: #ffffff;
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-grey);
    background: var(--off-white);
    line-height: 1.6;
}

h1 {
    color: var(--dark-charcoal);
    font-size: 1.7rem;
    margin-bottom: 20px;
}

h2 {
    color: var(--dark-charcoal);
    font-size: 1.25rem;
    margin: 32px 0 16px;
}

/* ---------- Auth pages (login, 2FA) ---------- */

.auth-body {
    background: var(--dark-charcoal);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    background: var(--white);
    border-radius: 10px;
    padding: 40px 36px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.auth-card h1 {
    font-size: 1.4rem;
    margin-bottom: 14px;
}

.auth-card p {
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.auth-logo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-charcoal);
    margin-bottom: 18px;
}

.auth-logo span {
    color: var(--primary-color);
}

.auth-card form {
    text-align: left;
}

.auth-card label,
.admin-form label {
    display: block;
    font-weight: 700;
    color: var(--dark-charcoal);
    font-size: 0.9rem;
    margin: 14px 0 5px;
}

.auth-card input,
.admin-form input[type="text"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 1rem;
    background: var(--white);
    color: var(--text-grey);
    transition: var(--transition);
}

.auth-card input:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2);
}

.auth-note {
    font-size: 0.85rem;
    color: #888;
    margin-top: 16px;
}

.auth-note a {
    color: var(--muted-blue);
}

.qr-box {
    display: flex;
    justify-content: center;
    margin: 18px 0;
}

.secret-code {
    display: inline-block;
    background: var(--off-white);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin-top: 6px;
    color: var(--dark-charcoal);
}

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

.btn-admin {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    background: var(--primary-color);
    color: var(--dark-charcoal);
    border: none;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.btn-admin:hover {
    background: var(--primary-dark);
}

.btn-admin-small {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: 0.9rem;
    text-decoration: none;
}

/* ---------- Notices ---------- */

.notice-error {
    background: #fff0f0;
    color: #a13030;
    border-radius: 6px;
    padding: 12px;
    font-size: 0.92rem;
    margin-bottom: 14px;
}

.notice-success {
    background: #f0fff9;
    color: #1e6f4f;
    border-radius: 6px;
    padding: 12px;
    font-size: 0.92rem;
    margin-bottom: 14px;
}

/* ---------- Admin layout ---------- */

.admin-header {
    background: var(--dark-charcoal);
}

/* Simple single-row header (used by secondary admin pages: Media
   Kit, Welcome Kit, Discovery Guide, Admins, etc. - "Back to
   Dashboard" style navigation). */
.admin-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

/* Two-row header (used by the Dashboard, which carries the full
   primary navigation). Row 1: brand + account meta links. Row 2:
   the tool/pipeline links plus the primary call to action. */
.admin-header-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-header-top-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-header-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.admin-nav-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    /* Pairs with the button's margin-left: auto below - the free
       space splits evenly around the link group, keeping it
       visually centered while the button stays hard right. */
    margin-left: auto;
}

/* The "+ New Collateral" button rides the same flex row as the
   nav links (it used to be absolutely positioned at the right,
   which let the growing link list slide underneath it and get
   covered - the "View Portal" overlap bug). In normal flow it
   can never overlap: if the row runs out of room, flex-wrap
   moves it (or the links) to the next line instead. */
.admin-header-nav-inner .btn-admin-small {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .admin-header-nav-inner {
        flex-direction: column;
        padding-bottom: 16px;
    }
    .admin-header-nav-inner .btn-admin-small {
        margin-left: 0;
    }
}

.admin-nav-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.14);
    min-height: 18px;
}

.admin-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.admin-header .auth-logo {
    color: var(--white);
    margin-bottom: 0;
    white-space: nowrap;
}

.admin-header nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.admin-user {
    color: #a9b3a0;
    font-size: 0.82rem;
    white-space: nowrap;
}

.admin-link {
    color: #e7ece2;
    font-size: 0.93rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.admin-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.admin-link.admin-link-muted {
    color: #a9b3a0;
    font-size: 0.85rem;
    font-weight: 400;
}

.admin-link.admin-link-muted:hover {
    color: var(--primary-color);
}

.admin-link.active {
    color: var(--primary-color);
    font-weight: 700;
    border-bottom-color: var(--primary-color);
}

.admin-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 36px 28px 64px;
}

.narrow-main {
    max-width: 760px;
}

/* ---------- Stat cards ---------- */

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 12px;
}

.stat-card {
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(54, 69, 59, 0.08);
}

.stat-card-number {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-card-label {
    font-size: 0.85rem;
    color: var(--muted-blue);
}

/* ---------- Table ---------- */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(54, 69, 59, 0.08);
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.92rem;
    border-bottom: 1px solid #eee;
}

.admin-table th {
    background: var(--dark-charcoal);
    color: var(--white);
    font-weight: 700;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table .admin-link {
    color: var(--muted-blue);
    font-weight: 700;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.badge-draft {
    background: #eee;
    color: var(--text-grey);
}

.badge-published {
    background: #f0fff9;
    color: #1e6f4f;
}

.badge-archived {
    background: #fff0f0;
    color: #a13030;
}

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

.admin-form {
    background: var(--white);
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(54, 69, 59, 0.08);
}

.form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.inline-form {
    display: inline;
}

/* Lead pipeline stage badges */
.stage-submitted              { background: #eee;     color: var(--text-grey); }
.stage-qualified_conversation { background: #e8f0fe;  color: #2a5aa0; }
.stage-appointment_set        { background: #fff3e0;  color: #b26a00; }
.stage-appointment_showed     { background: #ede7f6;  color: #5e35b1; }
.stage-closed_won             { background: #f0fff9;  color: #1e6f4f; }
.stage-closed_lost            { background: #fff0f0;  color: #a13030; }

.stage-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.stage-form select,
.stage-form input {
    padding: 7px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    max-width: 180px;
}

.close-details summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--muted-blue);
    font-weight: 700;
}

/* "Run Audit" toggle on the Lead Pipeline: styled as the same
   orange button as every other admin action so it stands out.
   (It is a <summary>, so the browser's default disclosure
   triangle is hidden to complete the button look.) */
.audit-summary-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--primary-color);
    color: var(--dark-charcoal);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.audit-summary-btn::-webkit-details-marker,
.audit-summary-btn::marker {
    display: none;
    content: '';
}
.audit-summary-btn:hover {
    background: var(--primary-dark);
}

/* Projected commission callout on the lead pipeline */
.proj-box {
    background: var(--off-white);
    border: 1px solid #d8dcc9;
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
    padding: 6px 9px;
    margin-top: 6px;
}

/* PayPal payout groups */
.payout-group {
    margin-bottom: 18px;
}

.payout-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.payout-total {
    color: var(--dark-charcoal);
    font-weight: 700;
}

.payout-line {
    display: flex;
    margin-top: 8px !important;
    font-size: 0.92rem;
}

.payout-group input[type="text"] {
    width: 100%;
    max-width: 380px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-main);
    margin: 4px 0 6px;
}

/* Applicant review panel */
.review-box {
    background: var(--off-white);
    border: 1px solid #d8dcc9;
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
    max-width: 420px;
}

.review-box textarea,
.review-box input[type="password"],
.review-box input[type="text"] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 0.88rem;
    margin: 4px 0 10px;
}

.review-box label {
    font-weight: 700;
    color: var(--dark-charcoal);
    font-size: 0.85rem;
}

.review-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Prospect record page */
.record-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    margin-bottom: 28px;
}

.record-grid p {
    margin: 2px 0 12px;
}

.record-full {
    grid-column: 1 / -1;
}

.record-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted-blue);
}

.record-link {
    color: var(--muted-blue) !important;
}

@media (max-width: 560px) {
    .record-grid {
        grid-template-columns: 1fr;
    }
}

/* Prospects page: filter bar and tag chips */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(54, 69, 59, 0.08);
    flex-wrap: wrap;
}

.filter-bar label {
    font-weight: 700;
    color: var(--dark-charcoal);
    font-size: 0.95rem;
}

.filter-bar select {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-grey);
    background: var(--white);
    min-width: 260px;
}

.tag-chip {
    display: inline-block;
    background: var(--off-white);
    border: 1px solid #d8dcc9;
    color: var(--dark-charcoal);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    margin: 2px 2px;
    white-space: nowrap;
}

/* Service checkboxes on the AI client document tool */
.service-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    background: var(--off-white);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px 16px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    margin: 0 !important;
    font-size: 0.95rem;
    cursor: pointer;
}

.check-item input[type="checkbox"] {
    width: auto;
    accent-color: var(--primary-color);
}

@media (max-width: 560px) {
    .service-checks {
        grid-template-columns: 1fr;
    }
}

.link-danger {
    background: none;
    border: none;
    color: #a13030;
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}

.link-danger:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .form-split {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * Discovery Call red flag callout (mirrors associate/css/
 * associate.css so a submitted call looks the same to an admin
 * reviewing it on prospect-view.php as it did to the associate
 * who submitted it).
 * ============================================================ */

.flags-summary {
    border: 2px solid #b23b3b;
    background: #fdf1f1;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.flags-summary h4 {
    margin: 0 0 4px;
    color: #922f2f;
    font-size: 0.98rem;
}

.flags-summary ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.flags-summary li {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e6c6c6;
    border-radius: 8px;
    margin-bottom: 8px;
}

.flags-summary li:last-child {
    margin-bottom: 0;
}

.flags-summary li .flag-quote {
    display: block;
    font-style: italic;
    color: #596869;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

.flags-summary li .flag-signal {
    display: block;
    font-weight: 700;
    color: #922f2f;
    font-size: 0.85rem;
}

.flags-none-note {
    color: #4f7942;
    font-size: 0.85rem;
    margin: 0 0 16px;
}

/* ============================================================
 * Discovery Call form fields (admin/discovery-form.php) - exact
 * class-name mirror of associate/css/associate.css's version so
 * the form looks and behaves identically in both areas. Additive
 * only; nothing above this point is touched.
 * ============================================================ */

.form-hint {
    font-size: 0.85rem;
    color: #888;
    margin: -6px 0 16px;
}

.note {
    background: #F5F9E9;
    border-left: 4px solid #FF9900;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 0.88rem;
    color: #515751;
}

.discovery-phase {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 22px;
}

.discovery-phase h3 {
    margin: 0 0 4px;
    color: #36453B;
    font-size: 1.15rem;
}

.discovery-phase .phase-sub {
    margin: 0 0 18px;
    color: #596869;
    font-size: 0.9rem;
}

.discovery-question {
    margin-bottom: 20px;
}

.discovery-question:last-child {
    margin-bottom: 0;
}

.discovery-question label.q-label {
    display: block;
    font-weight: 600;
    color: #36453B;
    margin-bottom: 8px;
}

.quick-select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-select input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quick-select label {
    display: inline-block;
    padding: 9px 16px;
    border: 1.5px solid #d7dad3;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #515751;
    background: #F5F9E9;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.quick-select label:hover {
    border-color: #FF9900;
}

.quick-select input[type="radio"]:checked + label {
    background: #FF9900;
    border-color: #e68a00;
    color: #fff;
}

.quick-select input[type="radio"]:focus-visible + label {
    outline: 2px solid #e68a00;
    outline-offset: 2px;
}

.quick-select label.flag-risk {
    border-color: #e0b0b0;
}

.quick-select input[type="radio"]:checked + label.flag-risk {
    background: #b23b3b;
    border-color: #922f2f;
    color: #fff;
}

.discovery-notes textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}