/* =========================================================================
   Ovation Mortgage CRM — shared stylesheet (Phase 3).
   Black-and-gold shell, light "paper" work area. No frameworks, no build.
   ========================================================================= */

/* ---------- Brand font: Rubik (self-hosted, free SIL OFL) ----------------
   Rubik is a single variable woff2 covering weights 300–700, so one
   @font-face with a weight RANGE replaces the four GT Walsheim files.
   (GT Walsheim is a paid Grilli Type font — kept out until a webfont
   license is purchased. The old .woff2 files remain in assets/fonts/ so
   switching back later is a one-block edit.) Path is relative to THIS css. */
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --black:      #0A0A0A;   /* brand base */
    --black-2:    #161412;   /* sidebar hover / card gradient end */
    --gold:       #C9A227;   /* brand accent — use sparingly */
    --gold-deep:  #8A6E14;   /* gold-toned text on light backgrounds */
    --gold-tint:  #F7EFD8;   /* pale gold wash for badges/highlights */
    --paper:      #F4F2EC;   /* main content background */
    --surface:    #FFFFFF;   /* cards, table */
    --ink:        #1C1A16;   /* primary text on light */
    --muted:      #6E6757;   /* secondary text on light */
    --line:       #E4DFD2;   /* hairline borders on light */
    --green-bg:   #E2F0E4;  --green-ink: #1E6B33;
    --purple-bg:  #EAE6F8;  --purple-ink:#5A43A8;
    --red-bg:     #F8E4E1;  --red-ink:   #93302A;
    --radius:     10px;
    --shadow:     0 1px 2px rgba(20, 16, 8, .06), 0 4px 16px rgba(20, 16, 8, .05);
    --sidebar-w:  232px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
}

a { color: inherit; }

/* ---------- App frame: sidebar + main ---------------------------------- */

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

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--black) 0%, var(--black-2) 100%);
    color: #D8D4CB;
    display: flex;
    flex-direction: column;
    padding: 1.1rem .9rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar .logo-chip {
    background: #FFFFFF;
    border-radius: var(--radius);
    padding: .8rem .9rem;
    display: block;
    text-align: center;
}
.sidebar .logo-chip img { max-width: 100%; height: auto; display: block; }

.sidebar nav { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .15rem; }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem .75rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    color: #B9B4A8;
    border-left: 3px solid transparent;
    transition: background-color .18s ease, color .18s ease;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .06); color: #F2EFE8; }
.sidebar nav a.active {
    background: rgba(201, 162, 39, .14);
    color: var(--gold);
    font-weight: 600;
}
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar .add-lead {
    margin-top: 1.3rem;
    display: block;
    text-align: center;
    background: var(--gold);
    color: var(--black);
    font-weight: 700;
    font-size: .95rem;
    padding: .68rem .8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .18s ease;
}
.sidebar .add-lead:hover { background: #DDB73B; }

.sidebar .side-foot {
    margin-top: auto;
    padding-top: 1rem;
    font-size: .72rem;
    color: #6F6A60;
    text-align: center;
    letter-spacing: .04em;
}
.sidebar .side-user { color: #C9C3B6; font-size: .8rem; letter-spacing: 0; margin-bottom: .35rem; }
.sidebar .side-logout {
    display: inline-block;
    color: var(--gold);
    text-decoration: none;
    font-size: .78rem;
    letter-spacing: .02em;
    padding: .35rem .7rem;
    border: 1px solid rgba(201, 162, 39, .35);
    border-radius: 7px;
}
.sidebar .side-logout:hover { background: rgba(201, 162, 39, .12); }

.main {
    flex: 1;
    min-width: 0;            /* lets the table area shrink instead of overflowing */
    padding: 1.6rem 2rem 3rem;
}

/* ---------- Page header -------------------------------------------------- */

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.page-head h1 .scope { color: var(--muted); font-weight: 500; font-size: 1rem; margin-left: .4rem; }
.page-head .actions { display: flex; gap: .55rem; }

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

.btn {
    display: inline-block;
    padding: .55rem 1.05rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease;
}
.btn-dark  { background: var(--black); color: #fff; }
.btn-dark:hover { background: #2A2722; }
.btn-gold  { background: var(--gold); color: var(--black); font-weight: 700; }
.btn-gold:hover { background: #DDB73B; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); }

/* ---------- Summary cards ------------------------------------------------ */

.cards { display: flex; gap: 1rem; margin-top: 1.3rem; flex-wrap: wrap; }
.card {
    background: linear-gradient(150deg, #131210 0%, #1E1B16 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    min-width: 168px;
    box-shadow: var(--shadow);
    border: 1px solid #2A2620;
}
.card .n { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1.2; }
.card .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: #9A938A; margin-top: .15rem; }

/* ---------- Filter bar --------------------------------------------------- */

.filters {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .9rem 1rem;
    margin-top: 1.3rem;
}
.filters form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.filters input[type=search], .filters select {
    font-family: inherit;
    font-size: .88rem;
    padding: .48rem .6rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #FBFAF7;
    color: var(--ink);
}
.filters input[type=search] { flex: 1 1 180px; min-width: 150px; }
.filters select { max-width: 200px; }
.filters input:focus, .filters select:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--gold);
}

.months { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.months a {
    padding: .3rem .7rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--line);
    background: #FBFAF7;
    transition: border-color .18s ease, color .18s ease;
}
.months a:hover { border-color: var(--gold); color: var(--ink); }
.months a.active { background: var(--black); color: var(--gold); border-color: var(--black); }

.letters { display: flex; gap: .15rem; flex-wrap: wrap; margin-top: .75rem; }
.letters a {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    padding: .22rem .25rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.letters a:hover { background: var(--gold-tint); color: var(--gold-deep); }
.letters a.active { background: var(--black); color: var(--gold); }
.letters .lbl { font-size: .76rem; color: var(--muted); align-self: center; margin-right: .35rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Data table --------------------------------------------------- */

.section-title { display: flex; align-items: baseline; gap: .5rem; margin: 1.7rem 0 .55rem; }
.section-title h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.section-title .n { color: var(--muted); font-size: .88rem; }
.section-title .sub { color: var(--muted); font-size: .8rem; font-weight: 400; }

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}
/* Horizontal scrollbar (shows when extra columns make the table wider). */
.table-wrap::-webkit-scrollbar { height: 11px; }
.table-wrap::-webkit-scrollbar-track { background: #F1EEE6; border-radius: 0 0 var(--radius) var(--radius); }
.table-wrap::-webkit-scrollbar-thumb { background: #CFC8B6; border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--gold); }
table.data { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; }

/* Dashboard table: every column has a FIXED pixel width so columns never shift
   when you switch months. Content too wide for its column is clipped with "…"
   and shown in full via a tooltip (added by JS — see markOverflow). The table
   is exactly the sum of its visible columns (no stretching to fill the area);
   it scrolls sideways when that sum is wider than the area. */
table.data.cols { table-layout: fixed; width: max-content; min-width: 0; }
.cols th, .cols td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cols .col-name      { width: 200px; max-width: 200px; }
.cols .col-phone     { width: 180px; }
.cols .col-email     { width: 220px; }
.cols .col-loan      { width: 100px; }
.cols .col-status    { width: 95px;  }
.cols .col-contact   { width: 95px;  }
.cols .col-attempts  { width: 95px;  }
.cols .col-partner   { width: 175px; }
.cols .col-reftype   { width: 110px; }
.cols .col-received  { width: 120px; }
.cols .col-contacted { width: 140px; }
.cols .col-lolp      { width: 140px; }
.cols .col-month     { width: 110px; }
.cols .col-notes     { width: 240px; color: var(--muted); }
.col-phone .more {
    display: inline-block;
    margin-left: .35rem;
    font-size: .73rem;
    font-weight: 700;
    color: #6E6757;
    background: #ECEAE3;
    border-radius: 999px;
    padding: .05rem .42rem;
    cursor: default;
    vertical-align: 1px;
}

/* "Columns" dropdown (a native <details> styled as a menu). */
.col-picker { position: relative; display: inline-block; }
.col-picker summary { list-style: none; }
.col-picker summary::-webkit-details-marker { display: none; }
.col-picker[open] summary.btn { border-color: var(--gold); }
.col-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(10, 10, 10, .16);
    padding: .75rem .9rem;
    z-index: 30;
    min-width: 215px;
    display: grid;
    gap: .4rem;
}
.col-menu .menu-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.col-menu label { display: flex; align-items: center; gap: .55rem; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.col-menu label.locked { color: var(--muted); cursor: default; }
.col-menu input { accent-color: var(--gold-deep); margin: 0; }
.col-menu .reset {
    margin-top: .35rem;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: .82rem; font-weight: 600;
    color: var(--gold-deep); cursor: pointer; text-align: left;
}
.col-menu .reset:hover { text-decoration: underline; }
table.data th, table.data td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
    vertical-align: top;
    overflow-wrap: break-word;
}
table.data th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    background: #FBFAF7;
    font-weight: 700;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.rowlink { cursor: pointer; transition: background-color .15s ease; }
table.data tbody tr.rowlink:hover td { background: var(--gold-tint); }
table.data td .name { font-weight: 600; }
table.data td .mini { color: var(--muted); font-size: .8rem; }

.badge {
    display: inline-block;
    padding: .14rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    background: #EFECE3;
    color: var(--muted);
    white-space: nowrap;
}
/* Status badge colors follow the sheet's stage logic (see status_badge_class). */
.badge-gold  { background: var(--gold-tint);  color: var(--gold-deep); }  /* qualified / approved */
.badge-green { background: var(--green-bg);   color: var(--green-ink); }  /* under contract / locked */
.badge-purple{ background: var(--purple-bg);  color: var(--purple-ink); } /* closed (won) */
.badge-red   { background: var(--red-bg);     color: var(--red-ink); }    /* lost / dead / credit repair */

.empty { margin: 1.6rem 0; color: var(--muted); }

/* Custom tooltip (one shared element, floated above the hovered status badge
   via JS so the scrolling table can't clip it). */
.tip {
    position: fixed;
    z-index: 60;
    background: var(--black);
    color: #F3EFE6;
    font-size: .8rem;
    font-weight: 600;
    padding: .4rem .65rem;
    border-radius: 7px;
    box-shadow: 0 6px 22px rgba(10, 10, 10, .28);
    pointer-events: none;
    white-space: pre-line;   /* honors line breaks so a tooltip can list several phones */
    overflow-wrap: anywhere; /* wrap long emails/notes instead of running off-screen */
    max-width: 320px;
    text-align: center;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .14s ease, transform .14s ease;
}
.tip.show { opacity: 1; transform: translateY(0); }
.tip::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
}
.tip:not(.below)::after { top: 100%; border-top-color: var(--black); }      /* arrow points down */
.tip.below::after       { bottom: 100%; border-bottom-color: var(--black); } /* arrow points up   */

/* ---------- Slide-over detail panel -------------------------------------- */

.overlay {
    position: fixed; inset: 0;
    background: rgba(10, 10, 10, .45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 40;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 400px; max-width: 92vw;
    background: var(--surface);
    box-shadow: -8px 0 30px rgba(10, 10, 10, .25);
    transform: translateX(102%);
    transition: transform .22s ease;
    z-index: 50;
    display: flex; flex-direction: column;
}
.panel.open { transform: translateX(0); }

.panel-head {
    background: var(--black);
    color: #fff;
    padding: 1.1rem 1.3rem;
    display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem;
}
.panel-head h2 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.panel-head .close {
    background: none; border: none; color: #B9B4A8; font-size: 1.5rem; line-height: 1;
    cursor: pointer; padding: .1rem .3rem; border-radius: 6px; font-family: inherit;
}
.panel-head .close:hover { color: var(--gold); }

.panel-body { padding: 1.1rem 1.3rem; overflow-y: auto; flex: 1; }
.panel-body dl { margin: 0; display: grid; grid-template-columns: 9.5rem 1fr; row-gap: .55rem; column-gap: .6rem; }
.panel-body dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-top: .15rem; }
.panel-body dd { margin: 0; font-size: .92rem; }
.panel-body .notes-block { margin-top: 1.1rem; }
.panel-body .notes-block h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .3rem; }
.panel-body .notes-block p { margin: 0; font-size: .92rem; white-space: pre-wrap; background: #FBFAF7; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; }

.panel-foot { padding: 1rem 1.3rem; border-top: 1px solid var(--line); display: flex; gap: .6rem; }

/* ---------- Forms (Add/Edit, Import) -------------------------------------- */

.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.7rem 1.8rem;
    max-width: 680px;
    margin-top: 1.3rem;
}
.form-card label { display: block; margin-top: 1rem; font-weight: 600; font-size: .88rem; }
.form-card input, .form-card select, .form-card textarea {
    width: 100%;
    padding: .55rem .65rem;
    margin-top: .3rem;
    font-size: .95rem;
    font-family: inherit;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #FBFAF7;
    color: var(--ink);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--gold);
}
.form-card .row { display: flex; gap: 1rem; }
.form-card .row > div { flex: 1; }
.form-card .hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
.form-card .check {
    display: flex; align-items: center; gap: .6rem; margin-top: .4rem;
    background: var(--gold-tint); border: 1px solid #E6D9AE; border-radius: 8px; padding: .75rem .9rem;
}
.form-card .check input { width: auto; margin: 0; accent-color: var(--gold-deep); }
.form-card .check label { margin: 0; font-weight: 600; }
.form-card .check .hint { display: block; font-weight: 400; }
.form-card .phone-input { margin-top: .4rem; }
.form-card .add-phone {
    margin-top: .5rem;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: .85rem; font-weight: 600;
    color: var(--gold-deep); cursor: pointer;
}
.form-card .add-phone:hover { text-decoration: underline; }
.form-card .actions { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; }
.form-card .error {
    background: var(--red-bg); border: 1px solid #E8B6B0; color: var(--red-ink);
    padding: .8rem 1rem; border-radius: 8px; margin-top: 1rem;
}
.form-card ol { line-height: 1.65; padding-left: 1.3rem; }

.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.stat { background: var(--gold-tint); border: 1px solid #E6D9AE; border-radius: 8px; padding: .7rem 1rem; min-width: 116px; }
.stat .n { font-size: 1.5rem; font-weight: 800; }
.stat .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.warnings { font-size: .88rem; }
.warnings li { color: var(--gold-deep); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
    .app { flex-direction: column; }
    .sidebar {
        width: 100%; height: auto; position: static;
        flex-direction: row; align-items: center; flex-wrap: wrap; gap: .7rem;
        padding: .8rem 1rem;
    }
    .sidebar .logo-chip { padding: .45rem .7rem; }
    .sidebar .logo-chip img { max-height: 34px; width: auto; }
    .sidebar nav { margin-top: 0; flex-direction: row; flex-wrap: wrap; }
    .sidebar nav a { border-left: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
    .sidebar nav a.active { border-left: none; border-bottom-color: var(--gold); background: none; }
    .sidebar .add-lead { margin-top: 0; margin-left: auto; padding: .5rem .9rem; }
    .sidebar .side-foot { display: none; }
    .main { padding: 1.1rem 1rem 2.5rem; }
    .panel { width: 100%; max-width: 100%; }
    .panel-body dl { grid-template-columns: 8rem 1fr; }
    .form-card .row { flex-direction: column; gap: 0; }
}

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

/* ---------- Login screen (no sidebar) ----------------------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(120% 120% at 50% 0%, #16130D 0%, var(--black) 60%);
}
.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.5rem 1.8rem;
}
.login-logo {
    background: #FBF6E6;             /* very light, subtle gold wash */
    border: 1px solid #E6D6A1;      /* slightly darker gold edge around the wash */
    border-radius: var(--radius);
    padding: 1.35rem 1rem .65rem;   /* more top, less bottom: nudges the wordmark down to sit centered */
    text-align: center;
    margin-bottom: 1.3rem;
}
.login-logo img { max-width: 170px; width: 100%; height: auto; display: inline-block; }
.login-card h1 { font-size: 1.15rem; margin: 0 0 .2rem; }
.login-card .sub { color: var(--muted); font-size: .85rem; margin: 0 0 1.2rem; }
.login-card label { display: block; font-weight: 500; font-size: .85rem; margin: 0 0 .3rem; }
.login-card input[type="email"],
.login-card input[type="password"] {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    margin-bottom: 1rem;
}
.login-card input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.login-card .btn-gold { width: 100%; justify-content: center; padding: .65rem; }
.login-error {
    background: var(--red-bg);
    color: var(--red-ink);
    border-radius: 8px;
    padding: .6rem .7rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.login-foot { text-align: center; color: var(--muted); font-size: .72rem; margin-top: 1.3rem; letter-spacing: .04em; }