/* =============================================================================
   AesthetIQ CRM — brand theme + mobile-first layout.
   Same SaaS palette as /apps/admin: primary #6D2E46 applied through
   Bootstrap 5.3 CSS variables. Change the palette via the --aq-* tokens.
   Breakpoint targets: 360px / 768px / 1280px (dev-standards.md).
   ========================================================================== */

:root {
    --aq-primary: #6D2E46;
    --aq-primary-dark: #57243A;
    --aq-primary-soft: #F4E9EE;
    --aq-ink: #2b2026;
    --bs-primary: var(--aq-primary);
    --bs-primary-rgb: 109, 46, 70;
    --bs-link-color: var(--aq-primary);
    --bs-link-color-rgb: 109, 46, 70;
    --bs-link-hover-color: var(--aq-primary-dark);
    --bs-link-hover-color-rgb: 87, 36, 58;
}

body {
    background: #f6f4f5;
    color: var(--aq-ink);
}

/* Bootstrap component remaps */
.btn-primary {
    --bs-btn-bg: var(--aq-primary);
    --bs-btn-border-color: var(--aq-primary);
    --bs-btn-hover-bg: var(--aq-primary-dark);
    --bs-btn-hover-border-color: var(--aq-primary-dark);
    --bs-btn-active-bg: var(--aq-primary-dark);
    --bs-btn-active-border-color: var(--aq-primary-dark);
    --bs-btn-disabled-bg: var(--aq-primary);
    --bs-btn-disabled-border-color: var(--aq-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--aq-primary);
    --bs-btn-border-color: var(--aq-primary);
    --bs-btn-hover-bg: var(--aq-primary);
    --bs-btn-hover-border-color: var(--aq-primary);
    --bs-btn-active-bg: var(--aq-primary-dark);
    --bs-btn-active-border-color: var(--aq-primary-dark);
}
.form-control:focus, .form-select:focus {
    border-color: var(--aq-primary);
    box-shadow: 0 0 0 .25rem rgba(109, 46, 70, .15);
}
.nav-tabs .nav-link.active { color: var(--aq-primary); font-weight: 600; }
.page-link { color: var(--aq-primary); }

/* top bar */
.aq-topbar {
    background: linear-gradient(135deg, var(--aq-primary) 0%, var(--aq-primary-dark) 100%);
    box-shadow: 0 2px 8px rgba(87, 36, 58, .25);
}
.aq-nav-link {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    padding: .35rem .75rem;
    border-radius: .375rem;
    font-size: .9rem;
}
.aq-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.aq-nav-link.active { color: #fff; background: rgba(255, 255, 255, .18); font-weight: 600; }

/* login */
.aq-login-body { background: linear-gradient(160deg, var(--aq-primary-soft), #fff 60%); }
.aq-login-card { width: 100%; max-width: 380px; border: 0; border-radius: 1rem; }
.aq-login-badge {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--aq-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

/* blocking loading overlay */
.aq-loading {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(43, 32, 38, .45);
    display: flex; align-items: center; justify-content: center;
}

/* keep content clear of the fixed bottom nav on phones, plus the iOS/Android
   gesture safe-area */
.pb-nav {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { .pb-nav { padding-bottom: 1rem; } }

/* bottom nav has a known height so action bars can dock right above it */
.navbar.fixed-bottom { min-height: 3.5rem; }

/* Calling Save/Skip: on phones, dock as a fixed bar ABOVE the bottom nav so
   it is always reachable without scrolling; normal card-footer on md+. */
@media (max-width: 767.98px) {
    .aq-call-actions {
        position: fixed;
        left: 0; right: 0;
        bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 1031;                 /* above the fixed-bottom nav */
        margin: 0;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -2px 10px rgba(43, 32, 38, .12);
    }
    /* extra clearance (calling page only) so the form's last field isn't
       hidden behind that fixed bar */
    #panelLead { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

.nav-bottom-link {
    display: flex; flex-direction: column; align-items: center;
    font-size: .7rem; color: #495057; text-decoration: none; line-height: 1.1;
}
.nav-bottom-link i { font-size: 1.25rem; }
.nav-bottom-link.active, .nav-bottom-link:active { color: var(--aq-primary); }

/* cards / lists */
.lead-card { cursor: pointer; border: 0; }
.lead-card:active { background: var(--aq-primary-soft); }
.overdue-card  { border-left: 4px solid #dc3545; }
.duetoday-card { border-left: 4px solid #fd7e14; }
.new-card      { border-left: 4px solid #0dcaf0; }

/* stage/status chips — background colors arrive from tenant config
   (tblLeadStage.lsg_color / tblLeadStatus.lst_color), set inline by JS */
.aq-chip {
    display: inline-block; padding: .2rem .55rem; border-radius: 1rem;
    font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap;
}

/* Lead card tinted by stage (user 2026-08-23): an 8% wash of the stage's
   own colour plus a solid left edge, so a caller recognises Appointment
   Fixed / Converted / Closed before reading a word. The colours come from
   tblLeadStage.lsg_color - the same value the stage chip uses - so a tenant
   that recolours a stage gets the matching tint for free. Both properties
   are set inline by calling.js; these are just the defaults + transition. */
.aq-lead-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-left: 4px solid #adb5bd;
    transition: background-color .18s ease, border-left-color .18s ease;
}

/* printing a lead should not burn ink on the wash */
@media print {
    .aq-lead-card { background: #fff !important; }
}

/* origin badge: outline, not filled — it must be readable at a glance but
   never compete with the stage chip or the stage tint behind it */
.aq-origin {
    display: inline-block; margin-left: .35rem;
    padding: .05rem .4rem; border-radius: .8rem;
    font-size: .68rem; font-weight: 600; line-height: 1.5;
    border: 1px solid currentColor; background: #fff;
    white-space: nowrap; vertical-align: 1px;
}
.aq-origin-manual { color: #0d6efd; }   /* a caller typed it in       */
.aq-origin-upload { color: #6f42c1; }   /* admin CSV upload           */
.aq-origin-system { color: #6c757d; }   /* go-live migration / feed   */

/* ---- search-result row tint -------------------------------------------
   Bootstrap paints table cells from --bs-table-bg, so setting that on the
   ROW keeps striping, hover and the clickable cursor working - a plain
   background on the <tr> would be painted over by the cells.
   Kept pale on purpose: this is a whole-row wash behind ordinary text, so
   it has to read as a tint and never fight the stage and status chips. */
.aq-row-closed { --bs-table-bg: rgba(220, 53, 69, .07); }
.aq-row-active { --bs-table-bg: rgba(25, 135, 84, .09); }
@media print {
    /* a colour wash prints as grey mush - the badges carry the meaning */
    .aq-row-closed, .aq-row-active { --bs-table-bg: transparent; }
}

/* spreadsheet lineage: deliberately quiet. It answers "where did this come
   from" when someone asks, and stays out of the way when nobody does. */
.aq-fact-src {
    font-size: .68rem; color: #8a9099; margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aq-list-src { font-size: .68rem; color: #8a9099; }

/* ---- end-of-day cards --------------------------------------------------
   A caller reads these at 8pm, tired, on a phone. Big number first, the
   breakdown under it, and the one percentage that matters on the footer. */
.aq-eod { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); }
.aq-eod .aq-eod-head {
    font-size: .74rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #6c757d;
}
.aq-eod .aq-eod-big { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.aq-eod .aq-eod-rows { font-size: .86rem; }
.aq-eod .aq-eod-rows > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .18rem 0; border-bottom: 1px solid rgba(0,0,0,.05);
}
.aq-eod .aq-eod-rows > div:last-child { border-bottom: 0; }
.aq-eod .aq-eod-rows b { font-variant-numeric: tabular-nums; }
.aq-eod .aq-eod-foot {
    border-top: 1px solid rgba(0,0,0,.08); margin-top: .5rem; padding-top: .5rem;
    font-size: .82rem;
}
.aq-eod .progress { height: 6px; margin-top: .35rem; }
/* the grade chips reuse the stage palette the caller already reads */
.aq-eod .aq-grade {
    display: inline-block; font-size: .72rem; font-weight: 600;
    padding: .05rem .45rem; border-radius: 999px; margin-right: .25rem;
    color: #14201f;
}
.aq-grade-hot  { background: #ffc107; }
.aq-grade-warm { background: #ffe08a; }
.aq-grade-cold { background: #cfe2ff; }
.aq-grade-none { background: #e9ecef; color: #6c757d; }
@media print { .aq-eod { box-shadow: none; border: 1px solid #ccc; } }

/* calling workspace */
.aq-call-phone { font-size: 1.6rem; font-weight: 700; letter-spacing: .5px; }
.aq-status-btn {
    min-width: 110px;
    border-width: 2px;
    font-weight: 600;
}

/* danger zone: closing statuses live apart so a mis-tap can't hit them */
.lcp-close-zone {
    background: #fdf1f2;
    border: 1px dashed #dc3545;
}

/* appointment (CRM -> ERP handoff) block in the disposition form */
.lcp-appt-zone {
    background: #f4e9ee;
    border: 1px solid var(--aq-primary);
}

/* follow-up slot grid (Reconnect-style) */
.lcp-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: .3rem;
    max-height: 200px;
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
}
.lcp-slot-btn {
    border: 1px solid transparent;
    border-radius: .3rem;
    font-size: .72rem;
    padding: .3rem .1rem;
    font-weight: 600;
}
.lcp-slot-btn.slot-free     { background: #d1e7dd; color: #0f5132; }
.lcp-slot-btn.slot-busy     { background: #fff3cd; color: #664d03; }
/* at capacity (fuPerSlot): RED + locked (user rule 2026-08-10) */
.lcp-slot-btn.slot-full     { background: #f8d7da; color: #842029; text-decoration: line-through; }
.lcp-slot-btn.slot-selected { outline: 2px solid var(--aq-primary); background: var(--aq-primary); color: #fff; }

/* score widget */
.aq-score-bar-wrap {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.aq-score-bar { height: 100%; transition: width .4s; }

/* pipeline stepper (lead detail) */
.pipeline { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; }
.pipeline .step {
    flex: 1 0 auto; min-width: 92px; text-align: center; font-size: .75rem;
    padding: .35rem .5rem; border-radius: .375rem;
    background: #e9ecef; color: #495057; white-space: nowrap;
}
.pipeline .step.current { color: #fff; font-weight: 600; }

/* compact tables on desktop */
@media (min-width: 768px) {
    .table-leads td, .table-leads th { vertical-align: middle; }
}

/* lead facts grid (calling workspace) — labelled, scannable */
.aq-fact-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a93a2;
}
.aq-fact-value {
    font-size: .875rem;
    font-weight: 600;
    color: #212529;
    overflow-wrap: anywhere;   /* long campaign names wrap, never overflow */
}

/* recent-calls list on the lead card: outcome leads, time right-aligned,
   who/next on a second muted line, the note indented under its call */
.aq-call-line { padding: .4rem 0; }
.aq-call-line + .aq-call-line { border-top: 1px dashed #e9ecef; }
.aq-call-outcome { font-weight: 600; color: #212529; }
.aq-call-when    { font-size: .78rem; color: #8a93a2; white-space: nowrap; }
.aq-call-meta    { font-size: .78rem; color: #6c757d; margin-top: .1rem; }
.aq-call-meta .aq-call-who  { margin-right: .75rem; }
.aq-call-meta .aq-call-next { color: var(--aq-primary, #6D2E46); font-weight: 600; }
.aq-call-note {
    font-size: .78rem;
    color: #6c757d;
    margin-top: .2rem;
    padding-left: .5rem;
    border-left: 2px solid #e9ecef;
    overflow-wrap: anywhere;
}

/* editable client name on the lead card — reads as a heading until touched */
.aq-name-input {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: transparent;
    padding: .1rem .4rem;
    max-width: 100%;
}
.aq-name-input:hover  { border-color: #dee2e6; }
.aq-name-input:focus  { border-color: #86b7fe; background: #fff; outline: 0;
                        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.aq-name-input:disabled { background: transparent; color: #212529; border-color: transparent; }

/* editable cells inside the facts grid keep the grid's compact rhythm */
.aq-fact-edit { font-size: .875rem; font-weight: 600; padding: .15rem 1.6rem .15rem .4rem; }
.aq-fact-edit:disabled { background: transparent; border-color: transparent;
                         color: #212529; padding-left: 0; }

/* follow-up cards: the WHEN leads, everything else is context */
.aq-fu-when {
    font-weight: 700;
    font-size: .95rem;
    color: var(--aq-primary, #7a1f3d);
    white-space: nowrap;
}

/* NC retry window: slots outside the rotated day-part */
.lcp-slot-btn.slot-out { opacity: .35; text-decoration: line-through; }

/* A lead belonging to another clinic, surfaced only by a full-number search
   (owner 2026-09-14). Visible so a caller stops being told the number does
   not exist; inert because it is not theirs to work. Greyed and not
   clickable - the server sends no lead_token for these, so there is nothing
   to open even from the page source. */
.aq-row-other, tr.aq-row-other { background:#f1f3f5; color:#6c757d; cursor:default; }
tr.aq-row-other:hover { background:#f1f3f5; }