/* ==========================================================================
   GravityCerts InsureU2 Analytics Dashboard
   Dark theme with brand color palette
   --------------------------------------------------------------------------
   Black scale (10% lightness increments):
     #000000  page background
     #1A1A1A  subtle layer
     #333333  elevated elements
     #4C4C4C  borders
     #666666  muted text
     #808080  secondary text

   Brand colors:
     #14ee93  primary highlight  (green)
     #201cff  secondary highlight (blue)
     #79affa  additional         (light blue)
     #de6fc3  additional         (pink)
     #ea7735  additional         (orange)
     #f0cf45  additional         (yellow)
     #9f44f5  additional         (purple)
     #00c3e5  additional         (cyan)
   ========================================================================== */

/* CSS custom properties */
:root {
    --iu2-bg:          #000000;
    --iu2-card-bg:     #0A0A0A;
    --iu2-layer-10:    #1A1A1A;
    --iu2-layer-20:    #333333;
    --iu2-border:      #4C4C4C;
    --iu2-muted:       #666666;
    --iu2-secondary:   #808080;
    --iu2-text:        #FDFEFF;
    --iu2-radius:      28px;
    --iu2-radius-sm:   14px;

    --iu2-green:       #14ee93;
    --iu2-green-dim:   rgba(20,238,147,0.15);
    --iu2-green-glow:  rgba(20,238,147,0.25);
    --iu2-blue:        #201cff;
    --iu2-blue-dim:    rgba(32,28,255,0.18);
    --iu2-lblue:       #79affa;
    --iu2-lblue-dim:   rgba(121,175,250,0.15);
    --iu2-pink:        #de6fc3;
    --iu2-pink-dim:    rgba(222,111,195,0.15);
    --iu2-orange:      #ea7735;
    --iu2-orange-dim:  rgba(234,119,53,0.15);
    --iu2-yellow:      #f0cf45;
    --iu2-yellow-dim:  rgba(240,207,69,0.15);
    --iu2-purple:      #9f44f5;
    --iu2-purple-dim:  rgba(159,68,245,0.15);
    --iu2-cyan:        #00c3e5;
    --iu2-cyan-dim:    rgba(0,195,229,0.15);
}

/* ==========================================================================
   Base
   ========================================================================== */

.iu2-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--iu2-text);
    background: transparent;
    box-sizing: border-box;
    width: 100%;
}

.iu2-dashboard *,
.iu2-dashboard *::before,
.iu2-dashboard *::after {
    box-sizing: inherit;
}

.iu2-section {
    margin-bottom: 48px;
}

.iu2-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iu2-green);
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--iu2-layer-10);
    display: flex;
    align-items: center;
    gap: 10px;
}

.iu2-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--iu2-green);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Period header */
.iu2-period-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--iu2-layer-20);
}

.iu2-period-label {
    font-size: 11px;
    color: var(--iu2-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.iu2-period-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--iu2-lblue);
    letter-spacing: 0.03em;
}

/* ==========================================================================
   KPI Cards
   ========================================================================== */

.iu2-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.iu2-kpi-card {
    background: var(--iu2-card-bg);
    border: 1px solid var(--iu2-border);
    border-radius: var(--iu2-radius);
    padding: 22px 24px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}

.iu2-kpi-card:hover {
    border-color: var(--iu2-layer-20);
}

/* Colored top accent strip */
.iu2-kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--iu2-accent, var(--iu2-green));
    opacity: 0.7;
}

.iu2-kpi-card:nth-child(1) { --iu2-accent: var(--iu2-green); }
.iu2-kpi-card:nth-child(2) { --iu2-accent: var(--iu2-lblue); }
.iu2-kpi-card:nth-child(3) { --iu2-accent: var(--iu2-cyan);  }
.iu2-kpi-card:nth-child(4) { --iu2-accent: var(--iu2-green); }
.iu2-kpi-card:nth-child(5) { --iu2-accent: var(--iu2-yellow); }
.iu2-kpi-card:nth-child(6) { --iu2-accent: var(--iu2-orange); }
.iu2-kpi-card:nth-child(7) { --iu2-accent: var(--iu2-purple); }
.iu2-kpi-card:nth-child(8) { --iu2-accent: var(--iu2-pink);  }

.iu2-kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--iu2-muted);
    margin: 0 0 12px 0;
}

.iu2-kpi-value {
    font-size: 34px;
    font-weight: 700;
    color: var(--iu2-text);
    line-height: 1;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

.iu2-kpi-delta {
    font-size: 11px;
    color: var(--iu2-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.iu2-kpi-delta.positive {
    color: var(--iu2-green);
}

.iu2-kpi-delta.negative {
    color: var(--iu2-pink);
}

/* ==========================================================================
   Chart cards & grid
   ========================================================================== */

.iu2-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.iu2-chart-card {
    background: var(--iu2-card-bg);
    border: 1px solid var(--iu2-border);
    border-radius: var(--iu2-radius);
    padding: 28px 28px 24px;
    position: relative;
    transition: border-color 0.2s;
}

.iu2-chart-card:hover {
    border-color: var(--iu2-layer-20);
}

.iu2-chart-card.full-width {
    grid-column: 1 / -1;
}

.iu2-chart-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--iu2-secondary);
    margin: 0 0 22px 0;
}

.iu2-chart-wrap {
    position: relative;
    width: 100%;
}

.iu2-chart-wrap canvas {
    max-width: 100%;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.iu2-table-wrap {
    overflow-x: auto;
    border-radius: var(--iu2-radius-sm);
    border: 1px solid var(--iu2-border);
}

.iu2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--iu2-card-bg);
}

.iu2-table th {
    background: #050505;
    color: var(--iu2-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 13px 18px;
    text-align: left;
    border-bottom: 1px solid var(--iu2-border);
    white-space: nowrap;
}

.iu2-table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--iu2-layer-10);
    color: #b0b8c8;
    vertical-align: middle;
}

.iu2-table tr:last-child td {
    border-bottom: none;
}

.iu2-table tr:hover td {
    background: rgba(255,255,255,0.025);
}

.iu2-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--iu2-text);
    font-weight: 500;
}

.iu2-table .label-cell {
    color: var(--iu2-text);
    font-weight: 500;
}

/* ==========================================================================
   State / sentiment pills
   ========================================================================== */

.iu2-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.iu2-pill.positive {
    background: var(--iu2-green-dim);
    color: var(--iu2-green);
    border: 1px solid rgba(20,238,147,0.3);
}
.iu2-pill.neutral {
    background: var(--iu2-yellow-dim);
    color: var(--iu2-yellow);
    border: 1px solid rgba(240,207,69,0.3);
}
.iu2-pill.negative {
    background: var(--iu2-pink-dim);
    color: var(--iu2-pink);
    border: 1px solid rgba(222,111,195,0.3);
}
.iu2-pill.active {
    background: var(--iu2-lblue-dim);
    color: var(--iu2-lblue);
    border: 1px solid rgba(121,175,250,0.3);
}
.iu2-pill.passive {
    background: var(--iu2-orange-dim);
    color: var(--iu2-orange);
    border: 1px solid rgba(234,119,53,0.3);
}
.iu2-pill.silent {
    background: var(--iu2-purple-dim);
    color: var(--iu2-purple);
    border: 1px solid rgba(159,68,245,0.3);
}

/* ==========================================================================
   Progress bars (utilization)
   ========================================================================== */

.iu2-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iu2-bar-track {
    flex: 1;
    height: 5px;
    background: var(--iu2-layer-20);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.iu2-bar-fill {
    height: 100%;
    background: var(--iu2-green);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.iu2-bar-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--iu2-green);
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}

/* ==========================================================================
   Feedback / thumbs items
   ========================================================================== */

.iu2-feedback-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.iu2-feedback-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--iu2-layer-10);
    border: 1px solid var(--iu2-border);
    border-radius: var(--iu2-radius-sm);
    padding: 20px 28px;
    min-width: 110px;
    flex: 1;
}

.iu2-feedback-item:nth-child(1) {
    border-color: rgba(20,238,147,0.3);
    background: var(--iu2-green-dim);
}
.iu2-feedback-item:nth-child(2) {
    border-color: rgba(222,111,195,0.3);
    background: var(--iu2-pink-dim);
}

.iu2-feedback-icon {
    font-size: 22px;
}

.iu2-feedback-num {
    font-size: 30px;
    font-weight: 700;
    color: var(--iu2-text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.iu2-feedback-item:nth-child(1) .iu2-feedback-num { color: var(--iu2-green); }
.iu2-feedback-item:nth-child(2) .iu2-feedback-num { color: var(--iu2-pink);  }

.iu2-feedback-label {
    font-size: 10px;
    color: var(--iu2-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* ==========================================================================
   Dashboard header (full-dashboard template)
   ========================================================================== */

.iu2-dashboard-header-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--iu2-text);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.iu2-dashboard-header-sub {
    font-size: 12px;
    color: var(--iu2-muted);
    margin: 0;
}

.iu2-dashboard-header-sub span {
    color: var(--iu2-lblue);
}

/* ==========================================================================
   Error / empty states
   ========================================================================== */

.iu2-access-denied,
.iu2-error {
    background: var(--iu2-card-bg);
    border: 1px solid var(--iu2-border);
    border-radius: var(--iu2-radius);
    padding: 32px;
    color: var(--iu2-muted);
    font-size: 14px;
    text-align: center;
}

.iu2-no-data {
    color: var(--iu2-layer-20);
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
}

/* ==========================================================================
   Scrollbar — subtle styling for overflow tables
   ========================================================================== */

.iu2-table-wrap::-webkit-scrollbar {
    height: 4px;
}
.iu2-table-wrap::-webkit-scrollbar-track {
    background: var(--iu2-layer-10);
}
.iu2-table-wrap::-webkit-scrollbar-thumb {
    background: var(--iu2-border);
    border-radius: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 800px) {
    .iu2-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .iu2-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .iu2-kpi-value {
        font-size: 26px;
    }
    .iu2-chart-card {
        padding: 20px 18px;
        border-radius: 18px;
    }
    .iu2-kpi-card {
        border-radius: 18px;
    }
    .iu2-feedback-row {
        gap: 10px;
    }
}

@media (max-width: 400px) {
    .iu2-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}