/**
 * AIRI native radar + pillar table styling for /airi-dashboard/.
 *
 * Replaces NinjaCharts + NinjaTables visual defaults. Matches the brand
 * monochrome palette (#C00000 red + #1A1A1A…#999999 greys) and the
 * visual layout established in website/aiready-15-airi-dashboard-kadence.html.
 *
 * @since 5.1.3
 */

/* ==========================================================================
   Radar canvas — aspect-ratio box so the canvas is always square + responsive
   ========================================================================== */
.airi-radar-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.airi-radar-wrap canvas.airi-radar {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
}

/* ==========================================================================
   Pillar breakdown table — replaces NinjaTables 553/586 output
   Uses the same black header + zebra rows as the NinjaTables default so the
   cutover is visually neutral.
   ========================================================================== */
.airi-pillar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: #1A1A1A;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    overflow: hidden;
}
.airi-pillar-table thead th {
    background: #1A1A1A;
    color: #FFFFFF;
    text-align: left;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 16px;
    letter-spacing: 0.02em;
}
.airi-pillar-table thead th:last-child {
    text-align: right;
}
.airi-pillar-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid #F2F2F2;
    color: #1A1A1A;
}
.airi-pillar-table tbody tr:first-child td {
    border-top: none;
}
.airi-pillar-table tbody td.airi-pillar-label {
    font-weight: 500;
}
.airi-pillar-table tbody td.airi-pillar-score {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ==========================================================================
   Responsive — stack on narrow viewports, tighten text
   ========================================================================== */
@media (max-width: 768px) {
    .airi-radar-wrap {
        max-width: 360px;
    }
    .airi-pillar-table {
        font-size: 0.9rem;
    }
    .airi-pillar-table thead th,
    .airi-pillar-table tbody td {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .airi-radar-wrap {
        max-width: 320px;
    }
}