/**
 * All Projects Hub - Page-Specific Styles
 *
 * Styles for the brand-facing projects overview page (all-projects.php).
 * Shows all campaigns with their project health at a glance.
 *
 * Depends on: inzc-dashboard-layout.css, influenzic.min.css (bundled core + components)
 */

/* ============================================================
   STATS GRID
   ============================================================ */

#allProjStatsGrid {
    margin-bottom: var(--inzc-spacing-6);
}

/* ============================================================
   TABLE LAYOUT — 5-column grid
   Campaign | Status | Projects | Last Activity | Actions
   ============================================================ */

.inzc-all-proj-table .inzc-table-header,
.inzc-all-proj-table .inzc-all-proj-row {
    grid-template-columns: 2fr 130px 1fr 130px 90px;
}

@media (max-width: 1024px) {

    .inzc-all-proj-table .inzc-table-header,
    .inzc-all-proj-table .inzc-all-proj-row {
        grid-template-columns: 2fr 120px 1fr 100px 80px;
    }
}

@media (max-width: 768px) {
    .inzc-all-proj-table .inzc-table-header {
        display: none;
    }

    #allProjTableWrapper {
        padding: 0px;
        background-color: transparent;
        box-shadow: none;
        border: 0;
    }

    .inzc-all-proj-table .inzc-all-proj-row {
        display: flex;
        flex-direction: column;
        gap: var(--inzc-spacing-3);
        padding: var(--inzc-spacing-4);
        background-color: var(--inzc-bg-primary);
        border-radius: var(--inzc-radius-lg);
        margin-bottom: var(--inzc-spacing-4);
        align-items: unset;
    }

    [data-inzc-theme="dark"] .inzc-all-proj-table .inzc-all-proj-row {
        background-color: var(--inzc-bg-secondary);
    }
}

/* ============================================================
   PROJECTS BREAKDOWN CELL
   ============================================================ */

.inzc-proj-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-1);
}

.inzc-proj-breakdown-header {
    padding-left: var(--inzc-spacing-1);
}

.inzc-proj-breakdown-counts {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
    font-size: var(--inzc-font-size-base);
    line-height: var(--inzc-line-height-tight);
}

.inzc-proj-count-total {
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

.inzc-proj-count-sep {
    color: var(--inzc-text-tertiary);
}

.inzc-proj-count-attention {
    color: var(--inzc-text-secondary);
}

.inzc-proj-count-attention.inzc-proj-urgent {
    color: var(--inzc-warning-dark);
    font-weight: var(--inzc-font-weight-medium);
}

.inzc-proj-count-active {
    color: var(--inzc-success-dark);
}

/* ============================================================
   MINI PROGRESS BAR
   ============================================================ */

.inzc-proj-progress-bar {
    display: flex;
    height: 4px;
    border-radius: var(--inzc-radius-full);
    overflow: hidden;
    background-color: var(--inzc-gray-200);
    gap: 1px;
}

.inzc-proj-progress-active {
    background-color: var(--inzc-success);
    border-radius: var(--inzc-radius-full) 0 0 var(--inzc-radius-full);
    min-width: 0;
    transition: width var(--inzc-transition-base) var(--inzc-ease-in-out);
}

.inzc-proj-progress-attention {
    background-color: var(--inzc-warning);
    min-width: 0;
    transition: width var(--inzc-transition-base) var(--inzc-ease-in-out);
}

.inzc-proj-progress-completed {
    background-color: var(--inzc-gray-400);
    border-radius: 0 var(--inzc-radius-full) var(--inzc-radius-full) 0;
    min-width: 0;
    transition: width var(--inzc-transition-base) var(--inzc-ease-in-out);
}

/* ============================================================
   BREAKDOWN LABELS ROW
   ============================================================ */

.inzc-proj-breakdown-labels {
    display: flex;
    gap: var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
}

.inzc-proj-label-active {
    color: var(--inzc-success-dark);
}

.inzc-proj-label-completed {
    color: var(--inzc-text-tertiary);
}

/* ============================================================
   ACTIONS CELL
   ============================================================ */

.inzc-all-proj-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Attention-count pill on the View button */
.inzc-proj-attention-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--inzc-spacing-1);
    border-radius: var(--inzc-radius-full);
    background-color: rgba(255, 255, 255, 0.25);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    line-height: 1;
    margin-left: var(--inzc-spacing-1);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.inzc-all-proj-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-16) var(--inzc-spacing-4);
    text-align: center;
    color: var(--inzc-text-secondary);
}

.inzc-all-proj-empty svg {
    color: var(--inzc-text-tertiary);
}

.inzc-all-proj-empty h3 {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0;
}

.inzc-all-proj-empty p {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    margin: 0;
}

/* ============================================================
   DARK MODE
   ============================================================ */

[data-inzc-theme="dark"] .inzc-proj-progress-bar {
    background-color: var(--inzc-gray-700);
}

[data-inzc-theme="dark"] .inzc-proj-count-attention.inzc-proj-urgent {
    color: var(--inzc-warning-light);
}

[data-inzc-theme="dark"] .inzc-proj-count-active {
    color: var(--inzc-success-light);
}

[data-inzc-theme="dark"] .inzc-proj-label-active {
    color: var(--inzc-success-light);
}

[data-inzc-theme="dark"] .inzc-proj-progress-completed {
    background-color: var(--inzc-gray-600);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.inzc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--inzc-spacing-12) var(--inzc-spacing-6);
    text-align: center;
    gap: var(--inzc-spacing-3);
    color: var(--inzc-text-secondary);
}

.inzc-empty-state svg {
    opacity: 0.35;
    flex-shrink: 0;
    color: var(--inzc-text-muted);
}

.inzc-empty-state h3 {
    margin: 0;
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

.inzc-empty-state p {
    margin: 0;
    font-size: var(--inzc-font-size-sm);
    max-width: 420px;
}