/* Interior Firm Management — App Overrides
   Milestone 2: the visual/interaction foundation is now leadpro's own real
   vendored theme (public/assets/vendor/leadpro/files/assets/css/style.css —
   the pcoded/Gull admin theme, Bootstrap 4), not a hand-matched Bootstrap 5
   rebuild. This file only holds what that theme doesn't already provide:
   our brand-color binding, the module-wide status-badge vocabulary, and the
   couple of screens (login, portal) that deliberately don't reuse leadpro's
   separate/inconsistent login bundle — see docs/07-UI-UX-DESIGN-SYSTEM.md. */

:root {
    /* leadpro's own real default primary (style.css .btn-primary) — using
       their actual value, not a hand-picked approximation. */
    --brand: #01a9ac;
    --brand-dark: #016d6f;
    --brand-light: #e0f7f7;

    --status-draft: #87909f;
    --status-pending: #fe9365;
    --status-active: #0ac282;
    --status-danger: #fe5d70;
    --status-info: #2dcee3;

    --card-radius: 5px;
}

/* ─── Status badges — shared vocabulary across every module; leadpro has no
   equivalent fixed set, this is app-specific. ───────────────────────────── */

.badge-status-draft   { background: var(--status-draft); color: #fff; }
.badge-status-pending { background: var(--status-pending); color: #fff; }
.badge-status-active  { background: var(--status-active); color: #fff; }
.badge-status-danger  { background: var(--status-danger); color: #fff; }
.badge-status-info    { background: var(--status-info); color: #fff; }

/* ─── Icon-tile links — colored icon badge + title + description, used on
   the Masters and Settings landing pages. ───────────────────────────────── */

.tile-link { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; border: none; }
.tile-link:hover { text-decoration: none; filter: brightness(1.05); }
.tile-link .icon-tile { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; color: #fff; }
.tile-link .tile-link-title { font-weight: 600; color: #fff; }
.tile-link .small { display: block; color: rgba(255,255,255,.85) !important; }

.tile-link.bg-teal        { background: #1abc9c; }
.tile-link.bg-green       { background: #2ecc71; }
.tile-link.bg-blue        { background: #3498db; }
.tile-link.bg-purple      { background: #9b59b6; }
.tile-link.bg-red         { background: #e74c3c; }
.tile-link.bg-navy        { background: #34495e; }
.tile-link.bg-orange      { background: #f39c12; }
.tile-link.bg-dark-orange { background: #d35400; }
.tile-link.bg-dark-red    { background: #c0392b; }
.tile-link.bg-gray        { background: #7f8c8d; }

/* ─── Module sub-navigation — row of pill buttons (views/partials/subnav-
   dropdown.php), replacing the old single dropdown-toggle button. ───────── */

.subnav-btn-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.subnav-btn {
    background: var(--brand); color: #fff; border-radius: 20px;
    padding: .4rem 1rem; font-size: .85rem; font-weight: 500;
}
.subnav-btn:hover { background: var(--brand-dark); color: #fff; }
.subnav-btn.subnav-btn-active { background: #34495e; color: #fff; }

/* ─── Help manual (views/pages/help/index.php) — screenshot frames + sticky
   in-page table of contents. ──────────────────────────────────────────────── */

.help-toc { position: sticky; top: 1rem; }
.help-toc .list-group-item { border-left: 3px solid transparent; }
.help-toc .list-group-item.active-scroll { border-left-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.help-section { scroll-margin-top: 1rem; }
.help-section + .help-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e9ecef; }
.help-shot { max-width: 100%; border: 1px solid #dee2e6; border-radius: var(--card-radius); box-shadow: 0 1px 12px rgba(69, 90, 100, .1); margin: .5rem 0 1.25rem; display: block; }
.help-step-list { padding-left: 1.25rem; }
.help-step-list li { margin-bottom: .4rem; }
.help-role-badge { font-weight: 500; }

/* ─── Modal body cap — a real fix from the Milestone 1 UI pass (a modal
   taller than the viewport pushed its own footer/Save button off-screen).
   leadpro's theme doesn't set this either; keep it as a genuine addition. ── */

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* ─── KPI stat cards — used on every role's dashboard. Bridges until Sub-
   Phase 4 evaluates swapping these for landpro_v2's own widget-data/
   widget-statistic markup. ──────────────────────────────────────────────── */

.stat-card {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    color: #87909f;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.stat-card-accent {
    background: var(--brand);
}
.stat-card-accent .stat-value,
.stat-card-accent .stat-label { color: #fff; }

/* ─── Table overflow safety net — a real fix from the Milestone 1 UI pass
   (a wide table pushing page content past the viewport). ────────────────── */

.app-content, .portal-content { overflow-x: auto; }

/* ─── Portal shell (customer/vendor) — simple top-nav, not the full pcoded
   staff shell, but still on leadpro's theme foundation/colors. ──────────── */

.portal-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: var(--brand);
    color: #fff;
}

.portal-header a { color: #fff; }

.portal-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

/* ─── Auth pages (login/forgot/reset) — leadpro's own login.php pulls in a
   separate, older, internally-inconsistent asset bundle (its own jQuery/
   Bootstrap/owl-carousel/metisMenu, not the pcoded theme the rest of the app
   uses). Not adopted — it doesn't even visually match leadpro's own
   dashboard. Kept on the same pcoded/style.css foundation + brand color
   instead, so the app has one consistent look throughout. ──────────────── */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--brand-dark), var(--brand));
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: var(--card-radius);
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

/* ─── Colored panel headers — modals (crud-page.js renderModal()) and the
   collapsible "Add X" inline-form cards share the same brand-teal treatment;
   an orange accent variant is available for edit/warning-themed panels. ──── */

.modal-header-brand, .card-header.card-header-brand {
    background: var(--brand);
    color: #fff;
}
.modal-header-accent, .card-header.card-header-accent {
    background: var(--status-pending);
    color: #fff;
}
.modal-header-brand .modal-title, .modal-header-accent .modal-title,
.card-header-brand strong, .card-header-accent strong { color: #fff; }
.modal-header-brand .close, .modal-header-accent .close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
}
.modal-header-brand .close:hover, .modal-header-accent .close:hover { opacity: 1; }

.card-header-brand, .card-header-accent {
    cursor: pointer;
    user-select: none;
}
.card-header-brand .chevron, .card-header-accent .chevron {
    transition: transform .15s;
    float: right;
}
/* Bootstrap's collapse plugin toggles .collapsed on the trigger automatically —
   panel open = trigger NOT collapsed = chevron flipped to point up. */
.card-header-brand:not(.collapsed) .chevron, .card-header-accent:not(.collapsed) .chevron {
    transform: rotate(180deg);
}

/* ─── SmartTable sort-arrow — active column arrow picks up the brand color;
   inactive columns keep smart-table.js's own inline faint opacity. ──────── */

.st-sort-icon { font-weight: 700; }
th[data-sort] .st-sort-icon:not(.text-muted) { color: var(--brand); }

/* ─── KPI stat card color variety — same .stat-card shell, an optional
   gradient class per card so a metric row reads at a glance instead of one
   flat accent card among plain-white siblings. Also used as clickable
   status-filter cards (Inquiries dashboard KPIs), hence the hover-lift and
   active-filter selected-state ring. ──────────────────────────────────────── */

.stat-card-blue   { background: linear-gradient(to right, #01a9ac, #01dbdf); }
.stat-card-green  { background: linear-gradient(to right, #0ac282, #0df3a3); }
.stat-card-yellow { background: linear-gradient(to right, #fe9365, #feb798); }
.stat-card-pink   { background: linear-gradient(to right, #eb3422, #ef5f51); }
.stat-card-orange { background: linear-gradient(to right, #fe8a7d, #feb8b0); }

.stat-card-blue .stat-value, .stat-card-blue .stat-label,
.stat-card-green .stat-value, .stat-card-green .stat-label,
.stat-card-yellow .stat-value, .stat-card-yellow .stat-label,
.stat-card-pink .stat-value, .stat-card-pink .stat-label,
.stat-card-orange .stat-value, .stat-card-orange .stat-label { color: #fff; }

.stat-card-clickable {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    border: 3px solid transparent;
}
.stat-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.stat-card-clickable.active-filter {
    border-color: rgba(255, 255, 255, .8);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
}

/* ─── Status-pill filter bar — same badge-status-* colors as the table
   badges, applied to the "Last Status" filter buttons (Inquiries dashboard)
   so the active filter is visually obvious, matching leadpro's fixed
   ci_status → Bootstrap-contextual-color pattern. ────────────────────────── */

.status-filter-btn {
    border-radius: 12px;
    color: #fff;
    opacity: .7;
    transition: opacity .15s;
}
.status-filter-btn:hover { opacity: .9; color: #fff; }
.status-filter-btn.active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
}