/**
 * INZC Dashboard Content
 * 
 * Styles for dashboard content area components (stats, widgets, charts, etc.).
 * All styles use CSS custom properties from inzc-variables.css.
 * 
 * @package    Micro-Influencer Marketplace
 * @subpackage Page CSS
 * @version    1.0.0
 */

/* ========================================
   DASHBOARD PARTIAL VISIBILITY
   ======================================== */

/* Default: brand visible, influencer hidden (matches body data-inzc-role="brand" default) */
.inzc-dashboard-influencer-content {
    display: none;
}

body[data-inzc-role="brand"] .inzc-dashboard-brand-content {
    display: block;
}

body[data-inzc-role="brand"] .inzc-dashboard-influencer-content {
    display: none;
}

body[data-inzc-role="influencer"] .inzc-dashboard-brand-content {
    display: none;
}

body[data-inzc-role="influencer"] .inzc-dashboard-influencer-content {
    display: block;
}

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

.inzc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--inzc-grid-stats-col-min), 1fr));
    gap: var(--inzc-spacing-4);
    margin-bottom: var(--inzc-spacing-6);
}

/* ========================================
   INFLUENCER STATS ROW
   Hero reach card (left 50%) beside a 2×2 stat grid (right 50%).
   ======================================== */

.inzc-inf-stats-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--inzc-spacing-4);
    margin-bottom: var(--inzc-spacing-6);
    align-items: stretch;
}

/* Hero card inside the row: remove standalone margin, stretch to grid height */
.inzc-inf-stats-row>.inzc-hero-card {
    margin-bottom: 0;
}



/* ========================================
   ACTIVITY FEED
   ======================================== */

.inzc-activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inzc-activity-item {
    display: flex;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) 0;
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-activity-item:last-child {
    border-bottom: none;
}

.inzc-activity-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--inzc-radius-full);
    background-color: var(--inzc-bg-secondary);
}

.inzc-activity-content {
    flex: 1;
}

.inzc-activity-text {
    font-size: var(--inzc-font-size-lg);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-activity-time {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-tertiary);
}

.inzc-progress-bar-fill {
    height: 100%;
    background-color: var(--inzc-primary);
    border-radius: var(--inzc-radius-full);
    transition: width var(--inzc-transition-base) var(--inzc-ease-out);
}

/* ========================================
   QUICK ACTIONS
   ======================================== */

.inzc-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--inzc-spacing-3);
}

.inzc-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--inzc-spacing-4);
    background-color: var(--inzc-bg-secondary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-md);
    text-decoration: none;
    transition: var(--inzc-transition-all);
    cursor: pointer;
}

.inzc-quick-action:hover {
    background-color: var(--inzc-primary);
    color: var(--inzc-white);
    transform: translateY(-2px);
    box-shadow: var(--inzc-shadow-md);
}

.inzc-quick-action-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-quick-action-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    text-align: center;
}

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

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

.inzc-empty-state-icon {
    width: 120px;
    height: 120px;
    margin-bottom: var(--inzc-spacing-4);
    opacity: 0.5;
}

.inzc-empty-state-title {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-empty-state-text {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    margin-bottom: var(--inzc-spacing-4);
    max-width: 400px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* dia (max-width: 1024px) {

    .inzc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {

    /* Brand stats grid: hero full-width, two stat cards share 50/50 */
    .inzc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inzc-stats-grid .inzc-hero-card {
        grid-column: 1 / -1;
    }

    /* Influencer stats row: mirrors brand stats grid at same breakpoint */
    .inzc-inf-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .inzc-inf-stats-row>.inzc-hero-card {
        grid-column: 1 / -1;
    }

    /* Influencer Row 1: first card (Profile Completion) full-width; remaining two share 50/50 */
    .inzc-dash-row-1-1-1 {
        grid-template-columns: 1fr 1fr;
    }

    .inzc-dash-row-1-1-1 .inzc-dash-col:first-child {
        grid-column: 1 / -1;
    }

    .inzc-page-actions {
        flex-direction: column;
    }

    .inzc-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Both stats rows collapse to single column at the same breakpoint
       as .inzc-dash-row-3-2 (brand: applications + spend // influencer: invitations + earnings) */
    .inzc-dash-row-3-2,
    .inzc-dash-row-2-3 {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   RELIABILITY RATING WIDGET
   Visible to influencers only — shows their own account standing.
   This widget intentionally does NOT appear on the brand-facing profile view.
   ======================================== */

.inzc-reliability-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-3);
    background-color: rgba(245, 158, 11, 0.1);
    border: var(--inzc-border-width-thin) solid var(--inzc-warning);
    border-radius: var(--inzc-radius-md);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-warning-dark);
    margin-bottom: var(--inzc-spacing-3);
}

.inzc-reliability-warning svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--inzc-warning);
}

.inzc-reliability-suspended,
.inzc-reliability-banned {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-3);
    border-radius: var(--inzc-radius-md);
    font-weight: var(--inzc-font-weight-semibold);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-reliability-suspended {
    background-color: rgba(245, 158, 11, 0.1);
    border: var(--inzc-border-width-thin) solid var(--inzc-warning);
    color: var(--inzc-warning-dark);
}

.inzc-reliability-banned {
    background-color: var(--inzc-danger-lighter);
    border: var(--inzc-border-width-thin) solid var(--inzc-danger);
    color: var(--inzc-danger-dark);
}

.inzc-reliability-suspended-text,
.inzc-reliability-banned-text {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    margin-bottom: 0;
}

.inzc-reliability-history {
    margin-top: var(--inzc-spacing-3);
    padding-top: var(--inzc-spacing-3);
    border-top: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-reliability-history-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--inzc-spacing-2) 0;
    background: none;
    border: none;
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-primary);
    cursor: pointer;
    transition: color var(--inzc-transition-base) var(--inzc-ease-in-out);
}

.inzc-reliability-history-toggle:hover {
    color: var(--inzc-primary-hover);
}

.inzc-reliability-history-toggle svg {
    transition: var(--inzc-transition-transform);
}

.inzc-reliability-history-toggle.active svg {
    transform: rotate(180deg);
}

.inzc-reliability-history-content {
    display: none;
    margin-top: var(--inzc-spacing-2);
}

.inzc-reliability-history-content.show {
    display: block;
}

.inzc-strike-item {
    padding: var(--inzc-spacing-3);
    background-color: var(--inzc-bg-secondary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-md);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-strike-date {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-strike-reason {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-danger);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-strike-project {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
}


/* ========================================
   DASHBOARD TWO-COLUMN WIDGET ROW
   ======================================== */

.inzc-dash-row {
    display: grid;
    gap: var(--inzc-spacing-6);
    margin-bottom: var(--inzc-spacing-6);
    align-items: stretch;
}

/* 3fr + 2fr split */
.inzc-dash-row-3-2 {
    grid-template-columns: 3fr 2fr;
}

/* 2fr + 3fr split */
.inzc-dash-row-2-3 {
    grid-template-columns: 2fr 3fr;
}

/* 2 equal columns */
.inzc-dash-row-1-1 {
    grid-template-columns: 1fr 1fr;
}

/* 3 equal columns */
.inzc-dash-row-1-1-1 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Ensures inner cards fill their column height consistently */
.inzc-dash-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.inzc-dash-col>.inzc-widget,
.inzc-dash-col>.inzc-card {
    flex: 1;
    margin-bottom: 0;
    /* prevent double-gap: .inzc-widget global margin stacks on .inzc-dash-row margin */
}

/* ========================================
   VERTICAL BAR CHART (CSS-only)
   Used for Spend Over Time / Earnings Over Time
   Pass data height via style="--bar-pct: 65%"
   ======================================== */

.inzc-vchart {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-2);
}

/* Row 3: Spend Over Time chart stretches to match Applications card height */
.inzc-dash-row-3-2 .inzc-dash-col:last-child .inzc-card-body {
    display: flex;
    flex-direction: column;
}

.inzc-dash-row-3-2 .inzc-dash-col:last-child .inzc-vchart {
    flex: 1;
    min-height: 0;
}

.inzc-dash-row-3-2 .inzc-dash-col:last-child .inzc-vchart-bars {
    flex: 1;
    height: auto;
    min-height: 140px;
}

.inzc-vchart-period {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inzc-vchart-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--inzc-spacing-2);
    height: 140px;
}

.inzc-vchart-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--inzc-spacing-1);
    height: 100%;
    justify-content: flex-end;
}

.inzc-vchart-bar-val {
    font-size: 0.6rem;
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-secondary);
    white-space: nowrap;
}

.inzc-vchart-bar-track {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.inzc-vchart-bar-fill {
    width: 100%;
    height: var(--bar-pct, 40%);
    background-color: var(--inzc-primary-lighter);
    border-radius: var(--inzc-radius-sm) var(--inzc-radius-sm) 0 0;
    transition: background-color var(--inzc-transition-base);
}

.inzc-vchart-bar-fill.inzc-vchart-bar-current {
    background-color: var(--inzc-primary);
}

.inzc-vchart-axis {
    height: 1px;
    background-color: var(--inzc-border-light);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-vchart-labels {
    display: flex;
    gap: var(--inzc-spacing-2);
}

.inzc-vchart-bar-lbl {
    flex: 1;
    font-size: 0.6rem;
    color: var(--inzc-text-tertiary);
    text-align: center;
}

/* Chart empty state — shown when all 6 months are $0 */
.inzc-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-8) var(--inzc-spacing-4);
    text-align: center;
    flex: 1;
    min-height: 140px;
}

.inzc-chart-empty svg {
    opacity: 0.3;
    color: var(--inzc-text-muted);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-chart-empty-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    margin: 0;
}

.inzc-chart-empty-text {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-muted);
    margin: 0;
}

/* Compact empty state for narrow column cards (Action Required, Pending lists etc.) */
.inzc-empty-state-sm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-6) var(--inzc-spacing-4);
    text-align: center;
}

.inzc-empty-state-sm .inzc-empty-state-icon {
    width: 32px;
    height: 32px;
    opacity: 0.4;
    color: var(--inzc-text-tertiary);
}

.inzc-empty-state-sm .inzc-empty-state-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    margin: 0;
}

.inzc-empty-state-sm .inzc-empty-state-text {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-muted);
    margin: 0;
    max-width: 220px;
}

/* ========================================
   DONUT / PIE STATUS CHART (CSS-only)
   Pass segment values via inline conic-gradient on .inzc-donut
   ======================================== */

.inzc-donut-wrap {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-6);
}

.inzc-donut {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* Centre hole cutout */
.inzc-donut::after {
    content: '';
    position: absolute;
    inset: 22px;
    background-color: var(--inzc-bg-primary);
    border-radius: 50%;
}

.inzc-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.inzc-donut-center-val {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    line-height: 1;
}

.inzc-donut-center-lbl {
    font-size: 0.55rem;
    color: var(--inzc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inzc-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-3);
}

.inzc-donut-legend-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-base);
}

.inzc-donut-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.inzc-donut-dot-success {
    background-color: var(--inzc-success);
}

.inzc-donut-dot-primary {
    background-color: var(--inzc-primary);
}

.inzc-donut-dot-warning {
    background-color: var(--inzc-warning);
}

.inzc-donut-dot-secondary {
    background-color: var(--inzc-gray-400);
}

.inzc-donut-dot-info {
    background-color: var(--inzc-info);
}

.inzc-donut-dot-danger {
    background-color: var(--inzc-danger);
}

.inzc-donut-legend-name {
    flex: 1;
    color: var(--inzc-text-secondary);
}

.inzc-donut-legend-val {
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

/* ========================================
   DEADLINE LIST WIDGET
   ======================================== */

.inzc-deadline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inzc-deadline-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) 0;
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-deadline-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inzc-deadline-info {
    flex: 1;
    min-width: 0;
}

.inzc-deadline-project {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inzc-deadline-task {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inzc-deadline-days {
    flex-shrink: 0;
    padding: var(--inzc-spacing-1) var(--inzc-spacing-2);
    border-radius: var(--inzc-radius-full);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    white-space: nowrap;
}

.inzc-deadline-days-ok {
    background-color: var(--inzc-success-lighter);
    color: var(--inzc-success-dark);
}

.inzc-deadline-days-warning {
    background-color: var(--inzc-warning-lighter);
    color: var(--inzc-warning-dark);
}

.inzc-deadline-days-urgent {
    background-color: var(--inzc-danger-lighter);
    color: var(--inzc-danger-dark);
}

/* ========================================
   APPLICATIONS AWAITING REVIEW LIST
   ======================================== */

.inzc-review-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inzc-review-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) 0;
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inzc-review-avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--inzc-radius-lg);
    background-color: var(--avatar-color, var(--inzc-primary));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-white);
}

.inzc-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inzc-review-info {
    flex: 1;
    min-width: 0;
}

.inzc-review-name {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inzc-review-campaign {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inzc-review-actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--inzc-spacing-2);
}

/* ========================================
   PENDING INVITATIONS MINI LIST (influencer)
   ======================================== */

.inzc-invite-mini-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inzc-invite-mini-item {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) 0;
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-invite-mini-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inzc-invite-mini-info {
    flex: 1;
    min-width: 0;
}

.inzc-invite-mini-brand {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

.inzc-invite-mini-campaign {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
    margin-top: 2px;
}

.inzc-invite-mini-offer {
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-success);
    margin-top: 2px;
}

.inzc-invite-mini-expiry {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--inzc-spacing-1);
}

.inzc-invite-mini-days {
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-warning-dark);
}

/* ========================================
   ATTENTION LIST (influencer dashboard)
   Used by: dashboard-influencer.php upcoming deliverables widget
   ======================================== */

.inzc-attention-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inzc-attention-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) 0;
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    text-decoration: none;
    color: inherit;
    transition: var(--inzc-transition-colors);
}

.inzc-attention-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inzc-attention-item:hover .inzc-attention-name {
    color: var(--inzc-primary);
}

.inzc-attention-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--inzc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inzc-attention-icon-warning {
    background-color: var(--inzc-warning-lighter);
    color: var(--inzc-warning-dark);
}

.inzc-attention-icon-danger {
    background-color: var(--inzc-danger-lighter);
    color: var(--inzc-danger-dark);
}

.inzc-attention-icon-primary {
    background-color: var(--inzc-primary-lighter);
    color: var(--inzc-primary);
}

.inzc-attention-info {
    flex: 1;
    min-width: 0;
}

.inzc-attention-name {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    transition: var(--inzc-transition-colors);
}

.inzc-attention-reason {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
}

/* ========================================
   ACTION REQUIRED WIDGET (brand dashboard)
   ======================================== */

.inzc-action-req-list {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-2);
}

.inzc-action-req-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) var(--inzc-spacing-3);
    border-radius: var(--inzc-radius-md);
    background-color: var(--inzc-bg-secondary);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background-color 150ms ease;
}

.inzc-action-req-item:hover {
    background-color: var(--inzc-bg-tertiary);
}

/* Left accent bar — urgency colour */
.inzc-action-req-item--danger {
    border-left-color: var(--inzc-danger);
}

.inzc-action-req-item--warning {
    border-left-color: var(--inzc-warning);
}

.inzc-action-req-item--primary {
    border-left-color: var(--inzc-primary);
}

.inzc-action-req-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inzc-action-req-type {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    line-height: 1.3;
}

.inzc-action-req-label {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    line-height: 1.4;
}

/* Count pill — right-aligned, colour-matched to accent */
.inzc-action-req-count {
    flex-shrink: 0;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--inzc-spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--inzc-radius-full);
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-bold);
    background-color: var(--inzc-gray-100);
    color: var(--inzc-text-primary);
    transition: background-color 150ms ease, color 150ms ease;
}

.inzc-action-req-item--danger .inzc-action-req-count {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--inzc-danger);
}

.inzc-action-req-item--warning .inzc-action-req-count {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--inzc-warning);
}

.inzc-action-req-item--primary .inzc-action-req-count {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--inzc-primary);
}

/* Chevron */
.inzc-action-req-chevron {
    flex-shrink: 0;
    color: var(--inzc-text-tertiary);
    transition: color 150ms ease, transform 150ms ease;
}

.inzc-action-req-item:hover .inzc-action-req-chevron {
    color: var(--inzc-text-secondary);
    transform: translateX(2px);
}

/* ========================================
   RESPONSIVE — DASHBOARD TWO-COL ROWS
   ======================================== */

/* Collapse to single column on tablet */
@media (max-width: 1024px) {

    /* Stats Grid Row 1: hero full-width, two stat cards share 50/50 */
    .inzc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inzc-stats-grid .inzc-hero-card {
        grid-column: 1 / -1;
    }

    /* Influencer stats row: stack hero above stat cards */
    .inzc-inf-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .inzc-inf-stats-row>.inzc-hero-card {
        grid-column: 1 / -1;
    }

    .inzc-dash-row-3-2,
    .inzc-dash-row-2-3 {
        grid-template-columns: 1fr;
    }

    /* Row 2 three-col: first card full-width, remaining two share 50/50 */
    .inzc-dash-row-1-1-1 {
        grid-template-columns: 1fr 1fr;
    }

    .inzc-dash-row-1-1-1 .inzc-dash-col:first-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 768px) {

    .inzc-vchart-bars {
        height: 100px;
    }

    .inzc-donut-wrap {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width:576px) {

    .inzc-stats-grid,
    .inzc-dash-row-1-1,
    .inzc-dash-row-1-1-1,
    .inzc-inf-stats-row {
        grid-template-columns: 1fr;
    }

    .inzc-inf-stats-row>.inzc-hero-card {
        grid-column: auto;
    }

    .inzc-donut-wrap {
        flex-direction: row;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {

    /* All rows: every card its own row */
    .inzc-dash-row-1-1-1 .inzc-dash-col:first-child,
    .inzc-stats-grid .inzc-hero-card,
    .inzc-inf-stats-row>.inzc-hero-card {
        grid-column: auto;
    }

    .inzc-stats-grid,
    .inzc-inf-stats-row,
    .inzc-dash-row-1-1,
    .inzc-dash-row-1-1-1 {
        grid-template-columns: 1fr;
    }

    .inzc-card-header {
        padding: var(--inzc-card-padding) var(--inzc-spacing-4);
    }

    .inzc-card-body {
        padding-left: var(--inzc-spacing-4);
        padding-right: var(--inzc-spacing-4);
    }

    /* Profile Completion: stack donut below text on very small screens */
    .inzc-profile-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--inzc-spacing-4);
    }

    /* Reliability gauge: stack donut above score text on very small screens */
    .inzc-reliability-gauge-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */
[data-inzc-theme="dark"] .inzc-widget {
    background-color: var(--inzc-bg-secondary);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

[data-inzc-theme="dark"] .inzc-stat-card:hover,
[data-inzc-theme="dark"] .inzc-widget:hover {
    box-shadow: var(--inzc-card-shadow-hover-dark);
}

/* ========================================
   ACTIVE CAMPAIGN PROJECTS TABLE
   Uses .inzc-table for base (collapse, width) then .inzc-cp-table
   overrides sizing, header, and row hover rules.
   ======================================== */

/* Modern minimal thead: no background, just a bottom line */
.inzc-cp-table thead th {
    background-color: transparent;
    padding: var(--inzc-spacing-2) var(--inzc-spacing-4);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--inzc-text-tertiary);
    font-weight: var(--inzc-font-weight-semibold);
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    white-space: nowrap;
    overflow: visible;
}

/* Header label + info icon wrapper */
.inzc-cp-th-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ⓘ info icon for column header tooltips */
.inzc-cp-th-info {
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: var(--inzc-text-tertiary);
    opacity: 0.6;
    transition: opacity var(--inzc-transition-fast);
    vertical-align: middle;
}

.inzc-cp-th-info:hover {
    opacity: 1;
}

/* Rows: suppress inzc-table-hover bg — cells handle their own hover */
.inzc-cp-table.inzc-table tbody tr {
    background-color: transparent !important;
}

/* Influencer Active Projects table: row hover (light mode) */
.inzc-cp-table--inf.inzc-table tbody tr:hover {
    background-color: var(--inzc-bg-secondary) !important;
}

td.inzc-cp-td-campaign {
    min-width: 180px;
    white-space: normal;
}

/* Campaign name */
.inzc-cp-name {
    display: block;
    font-weight: var(--inzc-font-weight-semibold);
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    margin-bottom: var(--inzc-spacing-1);
    transition: color var(--inzc-transition-fast);
}

.inzc-cp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inzc-spacing-1);
}

/* All link cells: strip td padding — <a> carries it */
td.inzc-cp-td-link {
    padding: 0;
    white-space: nowrap;
}

/* Campaign column <a>: normal flow — this cell drives row height */
td.inzc-cp-td-campaign>a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    text-decoration: none;
    transition: background-color var(--inzc-transition-fast);
    height: 100%;
}

/* Metric columns (Slots / Apps / Invites / Projects):
   position: absolute fills full row height without breaking table layout. */
td.inzc-cp-td-link:not(.inzc-cp-td-campaign) {
    position: relative;
}

td.inzc-cp-td-link:not(.inzc-cp-td-campaign)>a {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--inzc-spacing-1);
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    text-decoration: none;
    transition: background-color var(--inzc-transition-fast);
}

td.inzc-cp-td-link>a:hover {
    background-color: var(--inzc-primary-lighter);
}

td.inzc-cp-td-link>a:hover .inzc-cp-name {
    color: var(--inzc-primary);
}

/* Dash cell */
td.inzc-cp-td-dash {
    color: var(--inzc-text-tertiary);
    text-align: left;
    white-space: nowrap;
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    font-size: var(--inzc-font-size-lg);
}

/* Primary metric number — larger and bolder than before */
.inzc-cp-val {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    line-height: 1;
}

/* Muted /total denominator — visually subordinate */
.inzc-cp-sep {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-normal);
    color: var(--inzc-text-tertiary);
}

/* Pending alert — primary colour */
.inzc-cp-val--alert {
    color: var(--inzc-primary);
}

/* Slots mini progress bar */
.inzc-cp-slot-bar {
    width: 72px;
    height: 3px;
    border-radius: var(--inzc-radius-full);
    background-color: var(--inzc-border-light);
    overflow: hidden;
    margin-top: 4px;
}

.inzc-cp-slot-fill {
    height: 100%;
    width: var(--w, 0%);
    background-color: var(--inzc-primary);
    border-radius: var(--inzc-radius-full);
}

/* ── Influencer Active Collaborations table: tighter column sizing ── */
.inzc-cp-table--inf td.inzc-cp-td-campaign {
    min-width: 150px;
}

.inzc-cp-table--inf .inzc-cp-name {
    max-width: 180px;
}

.inzc-cp-table--inf thead th {
    white-space: normal;
}

/* Dark mode */
[data-inzc-theme="dark"] .inzc-cp-table thead th {
    border-bottom-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-cp-table--inf.inzc-table tbody tr:hover {
    background-color: var(--inzc-bg-light) !important;
}

[data-inzc-theme="dark"] td.inzc-cp-td-link>a:hover {
    background-color: var(--inzc-bg-light);
}

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

/* ======================================== */

.inzc-widget-footer {
    padding-top: var(--inzc-spacing-3);
    border-top: 1px solid var(--inzc-border-light);
    display: flex;
    align-items: center;
}

.inzc-widget-footer--end {
    justify-content: flex-end;
}

.inzc-widget-footer--between {
    justify-content: space-between;
}

[data-inzc-theme="dark"] .inzc-quick-action {
    background-color: var(--inzc-bg-tertiary);
}

[data-inzc-theme="dark"] .inzc-donut::after {
    background-color: var(--inzc-bg-secondary);
}

[data-inzc-theme="dark"] .inzc-vchart-bar-fill {
    background-color: rgba(99, 102, 241, 0.2);
}

[data-inzc-theme="dark"] .inzc-vchart-bar-fill.inzc-vchart-bar-current {
    background-color: var(--inzc-primary);
}

/* ========================================
   HERO HIGHLIGHT CARD
   ======================================== */

.inzc-hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--inzc-primary) 0%, var(--inzc-primary-hover, #5b4fd5) 100%);
    margin-bottom: var(--inzc-spacing-6);
    padding: var(--inzc-spacing-6);
    border-radius: var(--inzc-radius-lg);
}

/* When hero card is a grid item (inside stats-grid), grid gap handles spacing */
.inzc-stats-grid>.inzc-hero-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inzc-hero-card-body {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.inzc-hero-card-label {
    font-size: var(--inzc-font-size-sm);
    color: rgba(255, 255, 255, 0.8);
}

.inzc-hero-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inzc-spacing-3);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-hero-card-link {
    font-size: var(--inzc-font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--inzc-transition-fast);
}

.inzc-hero-card-link:hover {
    color: #fff;
    text-decoration: underline;
}

.inzc-hero-card-title {
    font-size: var(--inzc-font-size-2xl);
    font-weight: var(--inzc-font-weight-bold);
    color: #fff;
    margin-bottom: var(--inzc-spacing-4);
    line-height: 1.2;
}

.inzc-hero-card-stats {
    display: flex;
    gap: var(--inzc-spacing-8);
    flex-wrap: wrap;
}

.inzc-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inzc-hero-stat-val {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-bold);
    color: #fff;
    line-height: 1;
}

.inzc-hero-stat-lbl {
    font-size: var(--inzc-font-size-xs);
    color: rgba(255, 255, 255, 0.7);
}

.inzc-hero-card-accent {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 0;
}

.inzc-hero-card-accent::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Reach card: wide body (no 600px cap) ── */
.inzc-hero-card-body--wide {
    max-width: none;
}

/* ── Two-column reach layout ── */
.inzc-hero-reach-layout {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-8);
    flex-wrap: wrap;
    margin-top: var(--inzc-spacing-3);
}

/* Left summary column */
.inzc-hero-reach-summary {
    flex-shrink: 0;
}

.inzc-hero-reach-summary .inzc-hero-card-title {
    margin-bottom: 2px;
}

.inzc-hero-reach-sub {
    font-size: var(--inzc-font-size-sm);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--inzc-spacing-3);
}

.inzc-hero-reach-updated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--inzc-radius-full);
    padding: 3px var(--inzc-spacing-3);
}

/* Vertical divider */
.inzc-hero-reach-divider {
    width: 1px;
    align-self: stretch;
    min-height: 60px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

/* Right platform list */
.inzc-hero-reach-platforms {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    min-width: 220px;
}

.inzc-hero-reach-platform {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Coloured platform dot */
.inzc-hero-reach-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.inzc-hero-reach-dot--instagram {
    background: var(--inzc-instagram);
}

.inzc-hero-reach-dot--tiktok {
    background: var(--inzc-tiktok);
}

.inzc-hero-reach-dot--youtube {
    background: var(--inzc-youtube);
}

.inzc-hero-reach-platform-name {
    font-size: var(--inzc-font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    min-width: 70px;
}

.inzc-hero-reach-count-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.inzc-hero-reach-platform-count {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-bold);
    color: #fff;
    min-width: 50px;
    text-align: right;
}

.inzc-hero-reach-platform-eng {
    font-size: var(--inzc-font-size-xs);
    color: rgba(255, 255, 255, 0.6);
    min-width: auto;
    text-align: right;
}

@media (max-width: 640px) {
    .inzc-hero-card-title {
        font-size: var(--inzc-font-size-xl);
    }

    .inzc-hero-card-stats {
        gap: var(--inzc-spacing-4);
    }

    /* Reach layout: stack vertically, hide divider */
    .inzc-hero-reach-layout {
        gap: var(--inzc-spacing-4);
    }

    .inzc-hero-reach-divider {
        display: none;
    }

}

/* ========================================
   PROFILE COMPLETION — COMPACT
   ======================================== */

.inzc-profile-compact {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-6);
    margin-bottom: var(--inzc-spacing-3);
}

.inzc-profile-compact-left {
    flex: 1;
    min-width: 0;
}

.inzc-profile-compact-pct {
    font-size: var(--inzc-font-size-3xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-primary);
    line-height: 1;
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-profile-compact-headline {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: 3px;
}

.inzc-profile-compact-sub {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    line-height: 1.4;
}

.inzc-profile-compact-cta {
    display: block;
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-primary);
    text-decoration: none;
    font-weight: var(--inzc-font-weight-medium);
    padding-top: var(--inzc-spacing-3);
    border-top: 1px solid var(--inzc-border-light);
    transition: var(--inzc-transition-colors);
}

.inzc-profile-compact-cta:hover {
    color: var(--inzc-primary-hover);
    text-decoration: underline;
}

.inzc-profile-compact-remaining {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inzc-spacing-1) var(--inzc-spacing-2);
    margin-top: var(--inzc-spacing-3);
    padding-top: var(--inzc-spacing-3);
    border-top: 1px solid var(--inzc-border-light);
}

.inzc-profile-compact-rem-item {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--inzc-spacing-2);
    border-radius: var(--inzc-radius-md);
    font-size: var(--inzc-font-size-xs);
    font-weight: 500;
    color: var(--inzc-primary);
    border: 1px solid var(--inzc-primary);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.inzc-profile-compact-rem-item:hover {
    background-color: var(--inzc-primary);
    color: #fff;
}

.inzc-profile-compact-rem-more {
    display: inline-flex;
    align-items: center;
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
    text-decoration: none;
}

.inzc-profile-compact-rem-more:hover {
    color: var(--inzc-primary);
    text-decoration: underline;
}

/* ========================================
   DONUT SM — size overrides removed; .inzc-donut-sm now
   renders at full 100px size (same as .inzc-donut).
   Class kept in HTML for semantic clarity.
   ======================================== */

/* ========================================
   RELIABILITY GAUGE (replaces star display)
   ======================================== */

.inzc-reliability-gauge-wrap {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-spacing-3);
    background-color: var(--inzc-bg-secondary);
    border-radius: var(--inzc-radius-md);
    margin-bottom: var(--inzc-spacing-3);
}

.inzc-reliability-gauge-score {
    flex: 1;
    min-width: 0;
}

.inzc-reliability-gauge-val {
    font-size: var(--inzc-font-size-2xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    line-height: 1;
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-reliability-gauge-of {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-normal);
    color: var(--inzc-text-tertiary);
}

.inzc-reliability-gauge-sub {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
    margin-top: 3px;
}

[data-inzc-theme="dark"] .inzc-reliability-gauge-wrap {
    background-color: var(--inzc-bg-tertiary);
}