/*
 * rc-page-polish.css — heavy-traffic page polish for The Right Choice HVAC.
 *
 * Targets the daily-driver pages: lead_management, jobs, customers,
 * schedule, invoices. Applies premium HVAC styling on top of the existing
 * markup without rewriting any PHP.
 *
 * Brand: orange #fb8e28 (--gt-primary), teal #00364a (--gt-secondary).
 * "Call or Text for Great Service" — clean, fast, confidence-inspiring.
 *
 * Loaded by includes/theme.php on every page that uses the theme. Page
 * specificity scopes most rules — these are last-resort enhancements that
 * never collide with page-local CSS that has the same or higher specificity.
 */

/* --------------------------------------------------------------------------
   Universal status pills — used across lead_management, jobs, invoices.
   Brand red for "new/draft", teal for "contacted/scheduled", green for
   "won/paid", muted for "lost/cancelled".
   -------------------------------------------------------------------------- */
.rc-pill,
.status-pill,
.lead-status-pill,
.job-status-pill,
.invoice-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Brand-coded variants (page CSS can also use these) */
.rc-pill.is-new,        .status-pill.is-new,        .status--new,
.rc-pill.is-draft,      .status-pill.is-draft,      .status--draft {
    background: var(--gt-primary-light);
    color: var(--gt-primary-text);
}
.rc-pill.is-contacted,  .status-pill.is-contacted,  .status--contacted,
.rc-pill.is-scheduled,  .status-pill.is-scheduled,  .status--scheduled,
.rc-pill.is-in-progress, .status-pill.is-in-progress, .status--in-progress {
    background: var(--gt-secondary-light);
    color: var(--gt-secondary-text);
}
.rc-pill.is-won,        .status-pill.is-won,        .status--won,
.rc-pill.is-paid,       .status-pill.is-paid,       .status--paid,
.rc-pill.is-completed,  .status-pill.is-completed,  .status--completed {
    background: var(--gt-success-light);
    color: var(--gt-success);
}
.rc-pill.is-overdue,    .status-pill.is-overdue,    .status--overdue {
    background: var(--gt-danger-light);
    color: var(--gt-danger);
}
.rc-pill.is-lost,       .status-pill.is-lost,       .status--lost,
.rc-pill.is-cancelled,  .status-pill.is-cancelled,  .status--cancelled {
    background: var(--gt-bg-badge);
    color: var(--gt-text-muted);
}

/* --------------------------------------------------------------------------
   Empty state polish — every page with a `.empty-state` div gets the
   updated brand treatment. Pages that override these with greater
   specificity will win.
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--gt-text-secondary);
    border: 2px dashed var(--gt-border);
    border-radius: 14px;
    background: var(--gt-bg-card);
    margin: 16px 0;
}
.empty-state i,
.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 14px;
    opacity: 0.55;
    color: var(--gt-primary);
    display: block;
}
.empty-state h3,
.empty-state .empty-title {
    margin: 0 0 8px;
    color: var(--gt-text);
    font-size: 18px;
    font-weight: 600;
}
.empty-state p,
.empty-state .empty-msg {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gt-text-secondary);
}
.empty-state .btn,
.empty-state a.empty-cta {
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   LEAD MANAGEMENT — filter bar, lead rows, search box
   Targets `body.lp-page`, `body.lead-management-page`, or any container
   with `.lead-management-container`. Falls back to general `.lead-card`
   selectors that the page already uses.
   -------------------------------------------------------------------------- */
body.lp-page .filter-bar,
body.lead-management-page .filter-bar,
.lead-management-container .filter-bar,
.lead-filters {
    background: var(--gt-bg-card);
    border: 1px solid var(--gt-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px var(--gt-shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lead-filters .filter-pill,
.lead-filters .filter-btn,
.filter-bar .filter-pill {
    border: 1px solid var(--gt-border);
    background: var(--gt-bg-input);
    color: var(--gt-text-secondary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.lead-filters .filter-pill:hover,
.lead-filters .filter-btn:hover,
.filter-bar .filter-pill:hover {
    border-color: var(--gt-primary);
    color: var(--gt-primary);
}
.lead-filters .filter-pill.active,
.lead-filters .filter-btn.active,
.filter-bar .filter-pill.active {
    background: var(--gt-primary);
    border-color: var(--gt-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(251, 142, 40, 0.25);
}

/* Lead row — subtle lift + accent on hover */
.lead-card,
.lead-row,
.lead-item {
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
    position: relative;
}
.lead-card:hover,
.lead-row:hover,
.lead-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--gt-shadow-lg);
    border-color: var(--gt-primary);
}
.lead-card:hover::before,
.lead-row:hover::before,
.lead-item:hover::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--gt-primary);
    border-radius: 3px 0 0 3px;
}

/* Search box red focus ring */
.lead-management-container input[type="search"]:focus,
.lead-management-container input[type="text"][placeholder*="earch"]:focus,
.lead-filters input[type="search"]:focus,
body.lp-page input[type="search"]:focus {
    outline: none;
    border-color: var(--gt-primary);
    box-shadow: 0 0 0 3px var(--gt-primary-light);
}

/* --------------------------------------------------------------------------
   JOBS — stat tiles + priority indicators
   -------------------------------------------------------------------------- */
body.jobs-page .stat-tile,
.jobs-stats .stat-tile {
    position: relative;
    overflow: hidden;
}
body.jobs-page .stat-tile::after,
.jobs-stats .stat-tile::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gt-primary);
    opacity: 0.85;
}

/* Job priority indicators — left border accent */
.job-row,
.job-card {
    border-left: 3px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.job-row.priority-urgent,
.job-card.priority-urgent,
.job-row[data-priority="urgent"],
.job-card[data-priority="urgent"] {
    border-left-color: var(--gt-danger);
}
.job-row.priority-high,
.job-card.priority-high,
.job-row[data-priority="high"],
.job-card[data-priority="high"] {
    border-left-color: var(--gt-warning);
}
.job-row.priority-normal,
.job-card.priority-normal,
.job-row[data-priority="normal"],
.job-card[data-priority="normal"] {
    border-left-color: var(--gt-success);
}
.job-row:hover,
.job-card:hover {
    background: var(--gt-bg-card-hover);
    box-shadow: 0 2px 8px var(--gt-shadow);
}

/* --------------------------------------------------------------------------
   CUSTOMERS — premium tab nav with red active underline
   -------------------------------------------------------------------------- */
body.customers-page .nav-tabs .nav-link,
body.customers-page .tab-btn,
.customer-detail-tabs .tab-btn {
    position: relative;
    color: var(--gt-text-secondary);
    border: none;
    background: transparent;
    padding: 10px 16px;
    transition: color 0.15s ease;
}
body.customers-page .nav-tabs .nav-link:hover,
body.customers-page .tab-btn:hover,
.customer-detail-tabs .tab-btn:hover {
    color: var(--gt-text);
}
body.customers-page .nav-tabs .nav-link.active,
body.customers-page .tab-btn.active,
.customer-detail-tabs .tab-btn.active {
    color: var(--gt-primary);
    background: transparent;
}
body.customers-page .nav-tabs .nav-link.active::after,
body.customers-page .tab-btn.active::after,
.customer-detail-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    inset: auto 12px -1px 12px;
    height: 2px;
    background: var(--gt-primary);
    border-radius: 2px 2px 0 0;
}

/* --------------------------------------------------------------------------
   SCHEDULE — today highlight ring + sticky tech availability column
   -------------------------------------------------------------------------- */
body.schedule-page .calendar-day.today,
body.schedule-page .schedule-cell.today,
.calendar-day.is-today {
    box-shadow: inset 0 0 0 2px var(--gt-primary);
    border-radius: 8px;
}
body.schedule-page .schedule-job-card,
.schedule-job-card {
    border-left: 3px solid var(--gt-secondary);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.schedule-page .schedule-job-card:hover,
.schedule-job-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px var(--gt-shadow);
}
body.schedule-page .tech-availability-column,
.tech-availability-column.sticky-right {
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   INVOICES — status pills + row hover with red left accent
   -------------------------------------------------------------------------- */
body.invoices-page .invoice-row,
.invoices-table tbody tr {
    border-left: 3px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body.invoices-page .invoice-row:hover,
.invoices-table tbody tr:hover {
    border-left-color: var(--gt-primary);
    background: var(--gt-bg-table-row-hover);
}

/* --------------------------------------------------------------------------
   Generic "stat tile" enhancement — used across jobs/leads/invoices.
   Adds a subtle hover lift if the page-local CSS hasn't already.
   -------------------------------------------------------------------------- */
.stat-tile,
.kpi-tile,
.metric-tile {
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.stat-tile:hover,
.kpi-tile:hover,
.metric-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--gt-shadow-lg);
}

/* --------------------------------------------------------------------------
   Mobile defaults — universal tightening that helps every page using these
   shared classes. Page-local CSS at higher specificity still wins.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Filter bars stack vertically below 768 to avoid pill-row overflow */
    .lead-filters,
    .filter-bar { padding: 10px; gap: 6px; }
    .lead-filters .filter-pill,
    .lead-filters .filter-btn,
    .filter-bar .filter-pill { padding: 6px 11px; font-size: 12px; min-height: 36px; }

    /* Empty states fit small phones */
    .empty-state { padding: 40px 16px; }
    .empty-state i,
    .empty-state .empty-icon { font-size: 36px; }
    .empty-state h3,
    .empty-state .empty-title { font-size: 16px; }
    .empty-state p,
    .empty-state .empty-msg { font-size: 13px; }

    /* Generic CTA buttons inside cards: enforce a 44px touch target */
    .empty-state .btn,
    .empty-state a.empty-cta,
    .lead-filters .btn,
    .filter-bar .btn { min-height: 44px; }
}
@media (max-width: 480px) {
    /* Status pills shouldn't blow up — keep them compact */
    .rc-pill,
    .status-pill,
    .lead-status-pill,
    .job-status-pill,
    .invoice-status-pill { font-size: 10.5px; padding: 3px 8px; }
}