/* ============================================================================
   Real Estate CRM — Stylesheet
   ----------------------------------------------------------------------------
   All visual styles for the application.  Extracted from the inline <style>
   block of the previous monolithic index.php.

   Layout:
       :root        — color palette + radius/typography variables
       Reset & base — universal box-sizing reset, body font
       Forms        — inputs, selects, textareas, buttons
       Badges       — status / purpose / type / role pills
       Components   — cards, avatars, topbar, tabbar, segmented control
       Dashboard    — stat cards, bar charts, lead cards, timeline
       Utilities    — alerts, toast, loaders, empty state, agent rows
   ============================================================================ */

/* ── Universal reset + tap highlight off (mobile) ────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── Theme tokens ─────────────────────────────────────────────────────────
   Single source of truth for every brand color used throughout the app.
   Change one variable here to re-skin the whole CRM. */
:root {
    --blue: #185FA5;       --blue-lt: #E6F1FB;     --blue-dk: #0C447C;
    --green: #1A5C35;      --green-lt: #E6F4ED;
    --amber: #92500A;      --amber-lt: #FEF3E2;
    --red: #8B1A1A;        --red-lt: #FDECEA;
    --teal: #0F6E56;       --teal-lt: #E1F5EE;
    --purple: #534AB7;     --purple-lt: #EEEDFE;
    --orange: #C2410C;     --orange-lt: #FFF7ED;
    --gray: #444;          --gray-lt: #F5F5F5;
    --border: #E0E0E0;     --text: #1A1A1A;        --muted: #666;
    --bg: #F7F8FA;         --white: #fff;
    --radius: 10px;
}

/* ── Base typography & layout ─────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}
.hidden { display: none !important; }

/* ── Form controls ────────────────────────────────────────────────────── */
input, select, textarea {
    font-family: inherit;
    font-size: 15px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    width: 100%;
    outline: none;
    -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
input.err-field { border-color: var(--red); background: #fff8f8; }
textarea         { resize: vertical; min-height: 80px; }

/* ── Filter bar on the Leads screen ───────────────────────────────────
   The base `select` rule above sets width:100%.  In the filter row we
   want the three dropdowns to render side-by-side (desktop) or stacked
   on two rows (mobile), so we override width and tune the wrapper.

   Layout:
     • Desktop (≥ 600px): all three selects on one row, each at its own
       min-width.  Wrapper still allows horizontal scroll as a graceful
       fallback for very narrow desktop windows.
     • Mobile (< 600px):  status (fs) takes the full width on row 1.
       Purpose (fp) + type (ft) share row 2 at ~50% each.  No horizontal
       scrolling — every filter visible without sliding.
   ─────────────────────────────────────────────────────────────────── */
#screen-leads .leads-filters select#fs,
#screen-leads .leads-filters select#fp,
#screen-leads .leads-filters select#ft {
    width: auto;
}

@media (max-width: 599px) {
    /* Wrap onto multiple rows; disable horizontal scroll. */
    #screen-leads .leads-filters {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    /* Row 1: status spans the full width.
       The inline HTML on these selects sets min-width to fixed pixel
       values, which would prevent shrinking on very narrow phones — so
       we override with !important.  Scoped to a media query and an ID,
       so the override is tightly contained. */
    #screen-leads .leads-filters select#fs {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0 !important;
    }
    /* Row 2: purpose + type share equally.  `calc(50% - 3px)` because
       the wrapper has gap:6px, half of which is allocated to each child. */
    #screen-leads .leads-filters select#fp,
    #screen-leads .leads-filters select#ft {
        flex: 1 1 calc(50% - 3px);
        width: calc(50% - 3px);
        min-width: 0 !important;
    }
}

button {
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    padding: 11px 18px;
    transition: opacity .15s;
}
button:active   { opacity: .75; }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    width: 100%;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
}
.btn-danger {
    background: var(--red-lt);
    color: var(--red);
    border-color: var(--red);
}
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ── Badges (used for status / purpose / type / source) ──────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 99px;
    font-weight: 500;
    white-space: nowrap;
}
.b-new           { background: var(--blue-lt);   color: var(--blue-dk); }
.b-contacted     { background: #EEF2FF;          color: #3730A3; }
.b-followup      { background: var(--amber-lt);  color: var(--amber); }
.b-sitevisit     { background: var(--teal-lt);   color: var(--teal); }
.b-siterevisit   { background: #F0FDF4;          color: #166534; }
.b-negotiation   { background: var(--purple-lt); color: var(--purple); }
.b-closedwon     { background: var(--green-lt);  color: var(--green); }
.b-closedlost    { background: var(--red-lt);    color: var(--red); }
.b-onhold        { background: var(--gray-lt);   color: var(--gray); }
.b-buy           { background: var(--blue-lt);   color: var(--blue-dk); }
.b-sell          { background: var(--teal-lt);   color: var(--teal); }
.b-rent          { background: var(--amber-lt);  color: var(--amber); }
.b-res           { background: var(--green-lt);  color: var(--green); }
.b-com           { background: var(--purple-lt); color: var(--purple); }
.b-ref           { background: var(--orange-lt); color: var(--orange); }

/* ── Role pills ───────────────────────────────────────────────────────── */
.role-admin    { background: #DBEAFE;          color: #1E3A8A;       font-size: 11px; padding: 2px 7px; border-radius: 99px; font-weight: 600; }
.role-manager  { background: var(--purple-lt); color: var(--purple); font-size: 11px; padding: 2px 7px; border-radius: 99px; font-weight: 600; }
.role-agent    { background: var(--green-lt);  color: var(--green);  font-size: 11px; padding: 2px 7px; border-radius: 99px; font-weight: 600; }
.role-referrer { background: var(--orange-lt); color: var(--orange); font-size: 11px; padding: 2px 7px; border-radius: 99px; font-weight: 600; }

/* ── Layout primitives ───────────────────────────────────────────────── */
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 14px 16px;
}
.avatar {
    border-radius: 50%;
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Top bar / tab bar ───────────────────────────────────────────────── */
.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.tab-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 4px 7px;
    font-size: 10px;
    color: var(--muted);
    border: none;
    background: transparent;
    cursor: pointer;
    gap: 3px;
}
.tab-btn.active   { color: var(--blue); }
.tab-btn svg      { width: 22px; height: 22px; stroke-width: 1.8; }

.screen { padding-bottom: 80px; min-height: 100vh; }

/* ── Sub-tabs (dashboard tabs) ───────────────────────────────────────── */
.stabs {
    display: flex;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 50px;
    z-index: 90;
}
.stabs::-webkit-scrollbar { display: none; }
.stab {
    flex: 1;
    min-width: 80px;
    padding: 11px 6px;
    font-size: 13px;
    color: var(--muted);
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-weight: 500;
}
.stab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Form helpers ────────────────────────────────────────────────────── */
.form-group  { margin-bottom: 14px; }
.form-label  {
    font-size: 13px;
    color: var(--muted);
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.seg {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--gray-lt);
}
.seg-btn {
    flex: 1;
    padding: 10px 4px;
    font-size: 14px;
    text-align: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    font-weight: 500;
}
.seg-btn.active { background: var(--blue); color: #fff; }

/* ── Dashboard widgets ───────────────────────────────────────────────── */
.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 14px;
    border: 1px solid var(--border);
    text-align: center;
}
.stat-num { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }

.lead-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 14px 16px;
    margin: 0 14px 10px;
    cursor: pointer;
}
.lead-card:active { opacity: .85; }
.overdue          { border-left: 3px solid var(--red); }

.notif-dot {
    width: 8px; height: 8px;
    background: var(--red);
    border-radius: 50%;
    position: absolute;
    top: 1px; right: 1px;
}
.bar-wrap { background: var(--gray-lt); border-radius: 4px; height: 9px; overflow: hidden; }
.bar-fill { height: 9px; border-radius: 4px; transition: width .4s; }

.timeline-entry { padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline-entry:last-child { border-bottom: none; }

/* ── Alerts / toasts / loaders ───────────────────────────────────────── */
.alert      { border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 10px; }
.alert-warn { background: var(--amber-lt); border: 1px solid #F59E0B; color: var(--amber); }
.alert-err  { background: var(--red-lt);   border: 1px solid #EF4444; color: var(--red); }
.alert-ok   { background: var(--green-lt); border: 1px solid #22C55E; color: var(--green); }

#toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: #1A1A1A;
    color: #fff;
    padding: 10px 20px;
    border-radius: 99px;
    font-size: 14px;
    z-index: 999;
    display: none;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}
.loader { text-align: center; padding: 30px; color: var(--muted); font-size: 14px; }
.empty  { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; }

/* ── Agent checkbox rows (lead-form multi-assign) ────────────────────── */
.agent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: 8px;
    transition: background .1s;
    user-select: none;
    -webkit-user-select: none;
}
.agent-row:last-child { border-bottom: none; }
.agent-row:active     { background: var(--blue-lt); }
.agent-row input[type=checkbox] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--blue);
    pointer-events: none;
}