/*
 * app.css — AvaHR Core shared component styles
 * Loaded after colors_and_type.css in layouts/crm.php.
 * Design tokens (CSS custom properties) are defined in colors_and_type.css.
 *
 * Page-header system:
 *   .ph-section  — Type A: plain white band (dashboard, reports, settings)
 *   .ph-stat     — Type D: stat-chip band (list/queue pages)
 *   .ph-hero     — Type E: hero gradient with tabs (detail pages)
 */

/* ─────────────────────────────────────────────────────────────────────────────
   TYPE A — ph-section  (plain header band)
   ───────────────────────────────────────────────────────────────────────────── */
.ph-section {
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #E2E4E8);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}
.ph-section h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg, #0B2428);
    line-height: 1.3;
}
.ph-section p {
    font-size: 13px;
    color: var(--muted-fg, #6B7280);
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPE D — ph-stat  (stat-chip header band for list/queue pages)
   ───────────────────────────────────────────────────────────────────────────── */
.ph-stat {
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #E2E4E8);
    padding: 14px 24px 12px;
    flex-shrink: 0;
}
.ph-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ph-stat-top h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--fg, #0B2428);
}
.ph-stat-top p {
    font-size: 13px;
    color: var(--muted-fg, #6B7280);
    margin-top: 2px;
}
.ph-stat-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Stat chips (used in both ph-stat and ph-section right slot) */
.ph-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    background: var(--muted, #F0F1F3);
    color: var(--fg, #0B2428);
    border: 1px solid var(--border, #E2E4E8);
}
.ph-chip-num { font-weight: 700; font-feature-settings: "tnum"; }
.ph-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ph-chip-dot.green { background: var(--primary,     #1BB387); }
.ph-chip-dot.warn  { background: var(--warning,     #F5A623); }
.ph-chip-dot.red   { background: var(--destructive, #E02424); }
.ph-chip-dot.blue  { background: var(--info,        #1A9BE6); }
.ph-chip-dot.muted { background: var(--muted-fg,    #6B7280); }

/* Segment-control in the ph-stat right slot */
.ph-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--muted, #F0F1F3);
    border: 1px solid var(--border, #E2E4E8);
    border-radius: 8px;
    padding: 3px;
}
.ph-seg-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-fg, #6B7280);
    cursor: pointer;
    background: none;
    border: none;
    transition: background .12s, color .12s;
}
.ph-seg-btn.active {
    background: var(--card, #fff);
    color: var(--fg, #0B2428);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPE E — ph-hero  (gradient hero with embedded tab bar, for detail pages)
   ───────────────────────────────────────────────────────────────────────────── */
.ph-hero {
    background: linear-gradient(135deg, #184866 0%, #0B363C 100%);
    padding: 20px 24px 0;
    width: 100%;
    flex-shrink: 0;
}
.ph-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
}
.ph-hero-back {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s;
    margin-top: 3px;
}
.ph-hero-back:hover { color: rgba(255,255,255,.85); text-decoration: none; }
.ph-hero-left { flex: 1; min-width: 0; }
.ph-hero-left h1 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
    line-height: 1.2;
}

/* Hero badges */
.ph-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
}
.ph-badge-status      { background: rgba(27,179,135,.20);  color: #6DDFBC; border: 1px solid rgba(27,179,135,.30); }
.ph-badge-type        { background: rgba(255,255,255,.12);  color: rgba(255,255,255,.80); border: 1px solid rgba(255,255,255,.18); }
.ph-badge-plan        { background: rgba(27,179,135,.15);   color: #7DE8C8; border: 1px solid rgba(27,179,135,.25); }
.ph-badge-id          { background: rgba(255,255,255,.08);  color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.12); font-size: 11px; font-feature-settings: "tnum"; }
.ph-badge-destructive { background: rgba(224,36,36,.25);    color: #FF8A8A; border: 1px solid rgba(224,36,36,.35); }

/* Hero quick-links */
.ph-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.ph-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.80);
    text-decoration: none;
    transition: background .12s, color .12s;
    border: none;
}
.ph-hero-link:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }

/* Hero tab bar */
.ph-hero-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ph-hero-tabs::-webkit-scrollbar { display: none; }
.ph-hero-tab {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all .15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
.ph-hero-tab.active        { color: #fff; border-bottom-color: var(--primary, #1BB387); font-weight: 600; }
.ph-hero-tab:hover:not(.active) { color: rgba(255,255,255,.80); text-decoration: none; }

/* Shared action buttons */
.ph-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 600;
    background: var(--primary, #1BB387); color: #fff;
    border: none; cursor: pointer; transition: background .12s;
    text-decoration: none;
}
.ph-btn-primary:hover { background: var(--primary-dark, #148A68); }

.ph-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 500;
    background: rgba(255,255,255,.10); color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.20);
    cursor: pointer; transition: background .12s;
}
.ph-btn-ghost:hover { background: rgba(255,255,255,.18); }

.ph-btn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 500;
    background: var(--card, #fff); color: var(--fg, #0B2428);
    border: 1px solid var(--border, #E2E4E8);
    cursor: pointer; transition: background .12s;
    text-decoration: none;
}
.ph-btn-outline:hover { background: var(--muted, #F0F1F3); }

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL BASE
   ───────────────────────────────────────────────────────────────────────────── */
body { font-feature-settings: 'tnum', 'cv11'; }

/* ─────────────────────────────────────────────────────────────────────────────
   CRM LAYOUT — sidebar report groups
   ───────────────────────────────────────────────────────────────────────────── */
.rpt-group-items { display: none; padding-left: 16px; }
.rpt-group.open .rpt-group-items { display: block; }
.rpt-group.open .rpt-chev { transform: rotate(180deg); }

/* Sidebar wordmark — lighten blend so the dark-block logo reads on the teal shell */
.sidebar-logo { mix-blend-mode: lighten; }

/* ─────────────────────────────────────────────────────────────────────────────
   CRM LAYOUT — slide panel
   ───────────────────────────────────────────────────────────────────────────── */
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; }
.panel-overlay.open { opacity: 1; pointer-events: auto; }
.panel-drawer { position: fixed; top: 0; right: -520px; width: 520px; height: 100vh; background: var(--card); z-index: 100; box-shadow: -10px 0 40px rgba(0,0,0,.1); transition: right .3s ease; }
.panel-drawer.open { right: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeSlideIn .25s ease-out both; }

.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────────────────────
   SEGMENT PILLS — accounts index filter bar (shared pattern, usable anywhere)
   ───────────────────────────────────────────────────────────────────────────── */
.seg-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--card);
    color: var(--muted-fg);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seg-pill:hover {
    background: var(--muted);
    color: var(--fg);
}
.seg-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.seg-pill.active .pill-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--muted);
    color: var(--muted-fg);
    font-feature-settings: "tnum";
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST — shared fixed-position notification (all pages)
   ───────────────────────────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    background: var(--brand-accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 200;
}
.toast.show { opacity: 1; }

/* data-tone modifier (jobs page and any future page using .job-toast)
   JS sets el.dataset.tone = tone instead of el.style.background = hex. */
.job-toast[data-tone="error"]   { background: var(--destructive) !important; }
.job-toast[data-tone="warning"] { background: var(--warning) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   TAB COUNT — inline count badge inside hero tab buttons
   ───────────────────────────────────────────────────────────────────────────── */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.55);
    font-feature-settings: "tnum";
}
.ph-hero-tab.active .tab-count {
    background: rgba(27,179,135,.25);
    color: #6DDFBC;
}