/*
 * Phantasm CRM — Gradient theme overlay
 * Applies one popular indigo→violet gradient to:
 *   • side menu (sidebar background, brand mark, active link)
 *   • table headers
 *   • card / panel headings
 *   • modal headings
 *   • page titles
 */

:root {
    --grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-soft: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.1) 0%,
        rgba(118, 75, 162, 0.1) 100%
    );
    --grad-text-c1: #667eea;
    --grad-text-c2: #764ba2;
}

/* ---------- Sidebar ---------- */

aside.sidebar {
    background-image: linear-gradient(
        180deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(240 245 243 / 4%) 100%
    );
    border-right: 1px solid rgba(118, 75, 162, 0.18);
    /* More breathing room so items feel like the ZEPTECK rail. */
    gap: 6px;
    padding: 22px 14px;
}

/* Slightly taller hit-area on every menu item — matches the reference's
   roomier rhythm so the rail doesn't feel cramped. */
.sb-link {
    padding: 10px 14px !important;
    gap: 12px !important;
}

.sb-brand-mark {
    background: var(--grad) !important;
    border: none !important;
    color: #fff !important;
}
.sb-brand-mark svg {
    color: #fff !important;
    stroke: #fff !important;
}

.sb-brand-name {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

.sb-section {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    /* Smaller + tracked, so the section label reads as hierarchy above
       the menu items — overrides the global 14px reset for this label
       only (every other element keeps the uniform body size). */
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 16px 14px 6px;
    margin-top: 4px;
}
/* The very first .sb-section (Workspace) sits right under the brand
   so trim its top padding — otherwise the rail feels top-heavy. */
.sb-brand + .sb-section {
    padding-top: 4px;
    margin-top: 0;
}

.sb-link.active,
a.sb-link.active {
    background: var(--grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.sb-link.active svg,
a.sb-link.active svg {
    color: #fff !important;
    stroke: #fff !important;
}
.sb-link.active .badge-count,
a.sb-link.active .badge-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* ---------- Page titles ---------- */

.page-title,
.wf-hero h1,
.pt-hero h1 {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    /* color: transparent !important; */
}

/* ---------- Card / panel headings ---------- */

.panel-title,
.idx-section-title,
.pt-section-title {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-weight: 700;
}

/* ---------- Table headings ---------- */

table thead,
table.data thead {
    background: var(--grad) !important;
}
table thead tr,
table thead th,
table.data thead tr,
table.data thead th,
.data thead th {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
}
table thead th svg,
.data thead th svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* round the top corners of the first/last header cells when inside a panel */
.panel > table thead th:first-child,
.panel table thead th:first-child,
.table-wrap table thead th:first-child {
    border-top-left-radius: 6px;
}
.panel > table thead th:last-child,
.panel table thead th:last-child,
.table-wrap table thead th:last-child {
    border-top-right-radius: 6px;
}

/* ---------- KPI cards (unify their background with the gradient theme) ---------- */

.kpi-grid {
    /* background: rgba(118, 75, 162, 0.18) !important; */
    border-color: rgba(118, 75, 162, 0.2) !important;
}
/* .kpi {
  background-image: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%) !important;
} */
.kpi-label {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-weight: 600;
}
.kpi-value {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

/* ---------- Modal headings ---------- */

.modal-card h2,
#logout-title {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-weight: 700;
}

/* ---------- Primary buttons inherit the gradient too ---------- */

.btn.btn-primary {
    background: var(--grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn.btn-primary:hover {
    filter: brightness(1.08);
}
.btn.btn-primary svg {
    color: #fff !important;
    stroke: #fff !important;
}