/**
 * My Campaigns Page
 *
 * Page-specific styles for the brand's campaign management table.
 * Columns: Campaign, Status, Applications, Budget, Created, Actions
 *
 * @package    Micro-Influencer Marketplace
 * @subpackage Page CSS
 * @version    1.0.0
 */

/* ========================================
   TABLE GRID — scoped to avoid conflicts with other data tables
   ======================================== */

.inzc-campaigns-table.inzc-data-table .inzc-table-header,
.inzc-campaigns-table.inzc-data-table .inzc-table-row {
    grid-template-columns: 3fr 0.8fr 1.2fr 0.8fr 0.8fr 60px;
}

/* ========================================
   STATUS GUIDE MODAL CONTENT
   ======================================== */

.inzc-status-guide-grid {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-4);
}

.inzc-status-guide-item {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    background: var(--inzc-bg-secondary);
    border-radius: var(--inzc-radius-md);
    border: 1px solid var(--inzc-border-light);
}

.inzc-status-guide-badge {
    flex-shrink: 0;
    min-width: 90px;
}

.inzc-status-guide-desc strong {
    display: block;
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-status-guide-desc p {
    margin: 0;
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    line-height: 1.5;
}

/* ========================================
   RESPONSIVE — Desktop tweaks
   ======================================== */

@media (max-width: 1200px) {

    .inzc-campaigns-table.inzc-data-table .inzc-table-header,
    .inzc-campaigns-table.inzc-data-table .inzc-table-row {
        grid-template-columns: 2.5fr 0.8fr 1.1fr 0.8fr 0.8fr 60px;
    }
}

@media (max-width: 992px) {

    .inzc-campaigns-table.inzc-data-table .inzc-table-header,
    .inzc-campaigns-table.inzc-data-table .inzc-table-row {
        grid-template-columns: 2fr 0.8fr 1fr 0.7fr 0.7fr 60px;
    }
}

/* ========================================
   RESPONSIVE — Mobile Card Transformation (≤768px)
   ======================================== */

@media (max-width: 768px) {

    /* Dissolve the card wrapper — cards are the individual rows */
    .inzc-data-table-wrapper.inzc-card {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    .inzc-data-table-wrapper.inzc-card::after {
        display: none;
    }

    /* Row body: flex column of cards */
    #campaignsTableBody {
        display: flex;
        flex-direction: column;
        gap: var(--inzc-spacing-4);
    }

    /* Hide the desktop table header */
    .inzc-campaigns-table.inzc-data-table .inzc-table-header {
        display: none !important;
    }

    /* Each row becomes a single-column card — overrides base component 768px grid */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--inzc-spacing-2);
        padding: var(--inzc-spacing-4);
        border-radius: var(--inzc-radius-lg);
        margin-bottom: 0;
        min-width: 0;
        background: var(--inzc-bg-primary);
        border: 1px solid var(--inzc-border-light);
        box-shadow: var(--inzc-shadow-xs);
    }

    .inzc-campaigns-table.inzc-data-table .inzc-table-row:hover {
        box-shadow: var(--inzc-shadow-md);
        border-color: var(--inzc-border-medium);
    }

    /* All column divs: reset base component overrides */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div {
        display: flex !important;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    /* Reset position on non-actions columns (actions keeps relative for dropdown) */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(1),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(2),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(3),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(4),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(5) {
        position: static !important;
    }

    /* Stat rows: label on left (::before), value on right */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(2),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(3),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(4),
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(5) {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: var(--inzc-spacing-2) 0;
        border-bottom: 1px solid var(--inzc-border-light);
        gap: var(--inzc-spacing-2);
    }

    /* Remove border-bottom from the last stat row */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(5) {
        border-bottom: none;
    }

    /* Inline column label styles */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(2)::before,
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(3)::before,
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(4)::before,
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(5)::before {
        font-size: var(--inzc-font-size-xs);
        font-weight: var(--inzc-font-weight-semibold);
        color: var(--inzc-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
    }

    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(2)::before {
        content: 'Status';
    }

    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(3)::before {
        content: 'Applications';
    }

    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(4)::before {
        content: 'Budget';
    }

    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(5)::before {
        content: 'Created';
    }

    /* Actions row: separated by top border */
    .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(6) {
        padding-top: var(--inzc-spacing-2);
        border-top: 1px solid var(--inzc-border-light);
    }

    /* Campaign col: icon + details align to top */
    .inzc-campaigns-table.inzc-data-table .inzc-campaign-info {
        align-items: flex-start;
    }

    /* Applications col: right-align value half */
    .inzc-campaigns-table.inzc-data-table .inzc-applications-count {
        align-items: flex-end;
        min-width: 0;
    }
}

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

[data-inzc-theme="dark"] .inzc-status-guide-item {
    background: var(--inzc-bg-secondary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-status-guide-desc strong {
    color: var(--inzc-text-primary);
}

[data-inzc-theme="dark"] .inzc-status-guide-desc p {
    color: var(--inzc-text-secondary);
}

/* Dark Mode: Mobile cards */
@media (max-width: 768px) {
    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row {
        background: var(--inzc-bg-secondary);
        border: none;
        box-shadow: var(--inzc-shadow-md);
    }

    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row:hover {
        box-shadow: var(--inzc-shadow-lg);
    }

    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(2),
    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(3),
    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(4),
    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(5) {
        border-bottom-color: var(--inzc-border-light);
    }

    [data-inzc-theme="dark"] .inzc-campaigns-table.inzc-data-table .inzc-table-row>div:nth-child(6) {
        border-top-color: var(--inzc-border-light);
    }
}

/* ========================================
   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;
    background: var(--inzc-bg-secondary);
    border-radius: var(--inzc-radius-md);
    border: 1px dashed var(--inzc-border-color);
}

.inzc-empty-state svg {
    margin-bottom: var(--inzc-spacing-4);
    color: var(--inzc-text-tertiary);
    opacity: 0.5;
}

.inzc-empty-state h3 {
    margin: 0 0 var(--inzc-spacing-2);
    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-base);
    color: var(--inzc-text-secondary);
    max-width: 400px;
    font-weight: var(--inzc-font-weight-medium);
}

[data-inzc-theme="dark"] .inzc-empty-state {
    background-color: var(--inzc-bg-secondary);
    border-color: var(--inzc-border-medium);
}