/* ============================================================
   omfay-fit-guide.css
   Fit Conversation Tracker (/admin/fit-guide-admin)
   Palette: OMFAY purple #231543, orange #f04b22, pale #f2f2ff / #e5e5ff,
            gray #a7b5c4 / #f0f2f5, green #D8EAD2
   All classes are prefixed fg- so nothing leaks into other pages.
   Buttons reuse aa-button-* from omfay-buttons.css.
   ============================================================ */

.fg-page [hidden] { display: none !important; }

.fg-title { text-align: center; }
.fg-title-sub { font-size: 0.6em; }

/* ---------- list view ---------- */
.fg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 12px;
}

.fg-search { flex: 1 1 280px; max-width: 520px; }

.fg-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #231543;
    cursor: pointer;
}

.fg-list-msg {
    min-height: 1.4em;
    margin-bottom: 8px;
    color: #5b5470;
    font-size: 0.9rem;
}

.fg-table-wrap { overflow-x: auto; }

.fg-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.fg-table th {
    text-align: left;
    padding: 10px 12px;
    background: #231543;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.fg-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e5ff;
    vertical-align: top;
}

.fg-row { cursor: pointer; }
.fg-row:hover,
.fg-row:focus { background: #f2f2ff; outline: none; }
.fg-row:focus-visible { box-shadow: inset 0 0 0 2px #f04b22; }
.fg-row-archived { color: #7b7690; }
.fg-cell-name { font-weight: 600; color: #231543; }

.fg-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 12px;
    background: #f0f2f5;
    border: 1px solid #a7b5c4;
    color: #231543;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ---------- form bar / status ---------- */
.fg-form-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 0;
    margin-bottom: 14px;
    background: #fff;
    border-bottom: 1px solid #e5e5ff;
}

.fg-form-bar-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }

.fg-status {
    flex: 1 1 220px;
    font-size: 0.9rem;
    color: #5b5470;
}
.fg-status-ok    { color: #0B3500; }
.fg-status-busy  { color: #5b5470; }
.fg-status-warn  { color: #8a4b00; }
.fg-status-error { color: #b00020; font-weight: 500; }

.fg-banner {
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 6px;
    font-size: 0.95rem;
}
.fg-banner-info     { background: #f2f2ff; border: 1px solid #e5e5ff; color: #231543; }
.fg-banner-archived { background: #FFEDC9; border: 1px solid #FFE086; color: #231543; }
.fg-banner-archived .aa-button-grey2 { margin-left: 10px; }

.fg-call-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.fg-label-inline { font-weight: 600; color: #231543; }
.fg-select-inline { width: auto; min-width: 220px; }

/* ---------- cards / fields ---------- */
.fg-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.fg-card {
    background: #fff;
    border: 1px solid #e5e5ff;
    border-left: 4px solid #231543;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.fg-card-title {
    margin: 0 0 14px;
    font-size: 1.2rem;
    color: #231543;
}

.fg-grid { display: grid; gap: 14px 18px; }
.fg-grid-calllog  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.fg-field { margin-bottom: 16px; }
.fg-grid .fg-field { margin-bottom: 0; }

/* Prospect card: three rows (name / email + phone / age + gender) */
.fg-fields-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}
.fg-fields-row-about { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); }

.fg-sublabel {
    display: block;
    margin: 12px 0 4px;
    font-weight: 600;
    color: #231543;
}

.fg-field label,
.fg-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: #231543;
}

.fg-hint {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #5b5470;
}

.fg-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid #a7b5c4;
    border-radius: 4px;
    background: #fff;
    color: #231543;
    font: inherit;
}
.fg-input:focus {
    outline: 2px solid #f04b22;
    outline-offset: 1px;
    border-color: #f04b22;
}
.fg-input.fg-invalid { border-color: #b00020; background: #fff5f6; }

.fg-textarea { resize: vertical; min-height: 70px; line-height: 1.45; }

.fg-needs-attention .fg-input { border-color: #f04b22; background: #fff4f0; }
.fg-needs-attention label::after { content: " \2014 needed for Not Yet"; font-weight: 400; color: #cc2900; }

.fg-checks,
.fg-radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
}

.fg-check,
.fg-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #231543;
}
.fg-check input,
.fg-radio input { width: 18px; height: 18px; accent-color: #f04b22; }

.fg-reveal {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f2f2ff;
    border-radius: 6px;
}
.fg-reveal .fg-field { margin-bottom: 0; }

/* ---------- client account link ---------- */
.fg-link-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #D8EAD2;
    border-radius: 6px;
    color: #0B3500;
    font-weight: 500;
}

.fg-user-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

.fg-user-option {
    text-align: left;
    padding: 9px 12px;
    border: 1px solid #a7b5c4;
    border-radius: 4px;
    background: #fff;
    color: #231543;
    font: inherit;
    cursor: pointer;
}
.fg-user-option:hover,
.fg-user-option:focus { background: #e5e5ff; outline: none; }
.fg-user-option:focus-visible { box-shadow: 0 0 0 2px #f04b22; }
.fg-user-none { padding: 8px 4px; color: #5b5470; font-size: 0.9rem; }

/* ---------- history modal ---------- */
.fg-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 12px;
    background: rgba(35, 21, 67, 0.55);
    overflow-y: auto;
}

.fg-modal-content {
    width: 100%;
    max-width: 960px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.fg-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: #231543;
    color: #fff;
    border-radius: 8px 8px 0 0;
}
.fg-modal-header h2 { margin: 0; font-size: 1.25rem; }

.fg-modal-close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.fg-modal-close:hover { opacity: 0.7; }
.fg-modal-close:focus-visible { outline: 2px solid #f04b22; }

.fg-modal-body { padding: 18px 22px 24px; max-height: 75vh; overflow-y: auto; }

.fg-log-table td { font-size: 0.9rem; }
.fg-log-when { white-space: nowrap; }
.fg-log-val { white-space: pre-wrap; word-break: break-word; max-width: 280px; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
    .fg-fields-row,
    .fg-fields-row-about { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .fg-card { padding: 14px; }
    .fg-form-bar-actions { margin-left: 0; width: 100%; }
    .fg-select-inline { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fg-page * { transition: none !important; animation: none !important; }
}


/* ============================================================
   REPORT VIEW, NOTES, "MARK COMPLETE", PRINT
   ============================================================ */

.fg-badge-done   { background: #D8EAD2; border-color: #89C179; color: #0B3500; }
.fg-badge-update { background: #FFEDC9; border-color: #FFE086; color: #231543; }

.fg-banner-complete { background: #D8EAD2; border: 1px solid #89C179; color: #0B3500; }
.fg-banner-complete .aa-button-grey2 { margin-left: 10px; }

.fg-form-error { min-height: 1.3em; margin: 4px 0 8px; color: #b00020; font-weight: 500; }
.fg-modal-narrow { max-width: 620px; }
.fg-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- report header ---------- */
.fg-report { color: #231543; }

.fg-rp-head {
    padding: 4px 0 16px;
    margin-bottom: 18px;
    border-bottom: 2px solid #e5e5ff;
}
.fg-rp-name { margin: 0 0 6px; font-size: 1.7rem; font-weight: 500; color: #231543; }
.fg-rp-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 6px; }
.fg-rp-meta-item { color: #231543; }
.fg-rp-link { font-size: 0.92rem; color: #5b5470; margin-bottom: 10px; }
.fg-rp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fg-rp-status-note { font-size: 0.88rem; color: #5b5470; }

.fg-chip {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 14px;
    background: #f0f2f5;
    border: 1px solid #a7b5c4;
    color: #231543;
    font-size: 0.85rem;
    font-weight: 500;
}
.fg-chip-yes     { background: #D8EAD2; border-color: #89C179; color: #0B3500; }
.fg-chip-not_yet { background: #FFEDC9; border-color: #FFE086; }
.fg-chip-not_fit { background: #fcd8cf; border-color: #f04b22; }
.fg-chip-done    { background: #231543; border-color: #231543; color: #fff; }

/* ---------- latest updates ---------- */
.fg-rp-latest {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f2f2ff;
    border-radius: 6px;
}
.fg-rp-latest .fg-sec-title { margin-bottom: 8px; }

/* ---------- calls ---------- */
.fg-call {
    margin-bottom: 18px;
    border: 1px solid #e5e5ff;
    border-left: 4px solid #231543;
    border-radius: 6px;
    background: #fff;
}
.fg-call-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style-position: inside;
}
.fg-call-summary:focus-visible { outline: 2px solid #f04b22; outline-offset: -2px; }
.fg-call-title { font-size: 1.15rem; font-weight: 500; color: #231543; margin-right: 6px; }

.fg-call-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 0 18px 12px;
}
.fg-call-lock { font-size: 0.88rem; color: #5b5470; }

.fg-sec { padding: 4px 18px 14px; border-top: 1px solid #f2f2ff; }
.fg-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.fg-sec-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; color: #231543; }
.fg-sec-note-btn { margin-bottom: 6px; }

/* ---------- question / answer rows ---------- */
.fg-qa { margin-bottom: 12px; }
.fg-q { font-size: 0.9rem; color: #5b5470; margin-bottom: 2px; }
.fg-a { color: #231543; white-space: pre-wrap; word-break: break-word; }
.fg-qa-sub { margin-left: 18px; }
.fg-qa-current .fg-a { font-weight: 500; }
.fg-empty { color: #a7b5c4; }

/* ---------- notes ---------- */
.fg-note {
    margin: 10px 0;
    padding: 10px 14px;
    background: #FFEDC9;
    border-left: 4px solid #f04b22;
    border-radius: 0 6px 6px 0;
}
.fg-note-meta { font-size: 0.85rem; color: #231543; margin-bottom: 4px; }
.fg-note-context { font-size: 0.82rem; color: #5b5470; margin-bottom: 4px; }
.fg-note-text { white-space: pre-wrap; word-break: break-word; color: #231543; }
.fg-note-change { margin-top: 6px; font-weight: 500; color: #cc2900; }
.fg-note-actions { margin-top: 6px; }

.fg-btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: #5b5470;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}
.fg-btn-link:hover { color: #cc2900; }
.fg-btn-link:focus-visible { outline: 2px solid #f04b22; }

.fg-timeline { margin-top: 26px; padding-top: 16px; border-top: 2px solid #e5e5ff; }

.fg-form-bar button[disabled],
.fg-form-bar-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- print / save as PDF ---------- */
@media print {
    [data-fg-hide] { display: none !important; }
    .fg-noprint { display: none !important; }
    .fg-report { color: #000; }
    .fg-call, .fg-note, .fg-rp-latest { break-inside: avoid; }
    .fg-call { border: 1px solid #999; border-left: 4px solid #231543; }
    .fg-call-summary { list-style: none; }
    .fg-note { background: #fff; border: 1px solid #999; border-left: 4px solid #231543; }
    .fg-chip, .fg-badge { border: 1px solid #666; background: #fff !important; color: #000 !important; }
    .fg-sec-note-btn { display: none !important; }
    body { visibility: visible !important; }
}