/* ─────────────────────────────────────────────────────────────
   Paradise Pools CRM — theme.css
      ─────────────────────────────────────────────────────────────
         Warm-stone palette with slate-teal accent and deep teal-navy sidebar.
            This file loads AFTER app.css and overrides the colour scheme only.
               No layout, spacing, or behaviour changes.

                  To revert: remove the <link> tag for theme.css from index.html.
                     ───────────────────────────────────────────────────────────── */


/* ─── Root palette overrides ─────────────────────────────── */
:root {
    /* Warm shadcn-stone foundation */
    --bg:          #FAF8F3;   /* warm off-white page background */
    --border:      #E5E2D8;   /* warm hairline border */
    --text:        #1A1A1A;   /* primary text */
    --text-muted:  #6B6960;   /* secondary text — warm grey */

    /* Slate-teal accent system */
    --ocean:       #0F766E;   /* primary accent — buttons, links, focus */
    --ocean-deep:  #0F2E2C;   /* deep teal-navy — sidebar background */
    --aqua:        #5EEAD4;   /* bright teal — active nav on dark sidebar */
    --aqua-light:  #E1F5EE;   /* soft teal tint */
    --sand:        #FAF8F3;
}


/* ─── Logo mark: solid teal block (was gradient) ─────────── */
.logo-mark {
    background: #14B8A6;
}


/* ─── Sidebar active states ──────────────────────────────── */
/* On the dark teal-navy sidebar, the active nav and active stage
   filter need a BRIGHT teal so they pop against the dark background.
      Original used dark aqua which would disappear on the new sidebar. */
.nav-item.active {
    background: rgba(94, 234, 212, 0.10);
    color: #5EEAD4;
}
.nav-item.active:hover {
    background: rgba(94, 234, 212, 0.14);
}

.stage-filter.active {
    background: rgba(94, 234, 212, 0.10);
    color: #5EEAD4;
}


/* ─── KPI stat cards ─────────────────────────────────────── */
/* Kill the four colour-gradient top stripes (aqua/green/gold/red).
   Cards become uniform white-on-warm-stone with hairline borders.
      The hierarchy comes from one teal hero number, not stripes. */
.stat-card::before {
    display: none;
}
.stat-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
}

/* Pipeline Value — the single teal hero number on the dashboard.
   accent-green is the class the HTML uses on the Pipeline Value tile. */
.stat-card.accent-green .stat-value {
    color: #0F766E;
}


/* ─── Buttons ────────────────────────────────────────────── */
/* Primary button stays teal (via --ocean override above).
   Hover transitions to deeper teal-navy for a darker press feel. */
.btn-primary:hover {
    background: var(--ocean-deep);
}


/* ─── Form focus rings — teal instead of ocean-blue ──────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.search-box:focus-within {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}


/* ─── Follow-up tabs ─────────────────────────────────────── */
.fu-tab:hover {
    border-color: #0F766E;
    color: #0F766E;
}
.fu-tab.active {
    background: #0F766E;
    border-color: #0F766E;
}


/* ─── Hover shadows: teal-tinted instead of blue-tinted ──── */
/* Original used rgba(0,119,182, …) which was the old ocean blue.
   Update to match the new accent so coloured shadows look right. */
.kanban-card:hover {
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.10);
}
.funnel-item:hover {
    box-shadow: 0 2px 12px rgba(15, 118, 110, 0.08);
}
.lead-card:hover {
    box-shadow: 0 2px 12px rgba(15, 118, 110, 0.06);
}


/* ─── Small accent details ───────────────────────────────── */
/* History arrow in the stage-history list */
.history-arrow {
    color: #0F766E;
}

/* Kanban card quote amount */
.kanban-card-quote {
    color: #0F766E;
}


/* ─── Success toast — match the teal accent ──────────────── */
.toast.success {
    background: #0F766E;
}


/* ─── Mobile header — match new sidebar colour ───────────── */
/* .mobile-header uses var(--ocean-deep) so it picks up the deep
   teal-navy automatically. No override needed. Listed here for clarity. */


/* ─── End of theme.css ───────────────────────────────────── */