/* Global Variables and Base */
html,
body {
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-white);
    font-family: var(--font-work-sans);
}

body {
    background: #1C1C24 url(https://files.supernova-analytics.com/sn-app-icons/Profile/Page-Background-dark.png);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Global icon style */
.icon {
    width: 18px;
    height: 20px;
    object-fit: contain;
}

.trend-arrow-icon {
    width: 9px;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.playstyle .trend-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* space between text and icon */
    color: #3cb4cc;
    /* keep your existing link color */
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
    font-size: 14px;
}

.trend-link:hover {
    color: #4dd2ff;
}

/* =====================
   Chat Grids
   ===================== */

:root {
    --slot-bg: rgba(255, 255, 255, 0.06);
    --slot-border: rgba(255, 255, 255, 0.08);
}

.tab-nav {
    display: flex;
    gap: 10px;
    position: relative;
    top: 60px;
    left: 90px;
    max-width: 362px;
    flex-wrap: wrap;
}

.tab-link {
    padding: 8px 18px;
    background: var(--color-gray-100);
    color: #a8aaaf;
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
    border: none;
    display: inline-block;
}

.tab-link:hover {
    background: #383944;
    color: #fff;
}

.tab-link.active {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.chat-grids {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    /* LEFT | RIGHT */
    gap: 16px;

    /* existing positioning */
    position: relative;
    width: calc(100% - 112px);
    /* 24px under the tab strip — matches summary.css so every insights page
       starts at the same height. Was 72px in the app, which sits under a
       sticky topbar instead of the demo header + banner. */
    top: 24px;
    left: 90px;
    margin-bottom: 80px;

    align-items: flex-start;
    /* important: prevents stretching */
    padding-bottom: 40px;
}

.right-col {
    grid-column: 2;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: flex-start;
}

/* ---- KPI ROW 1 ---- */
.right-col .kpi-kda {
    grid-column: 1 / 7;
}

.right-col .kpi-winrate {
    grid-column: 7 / 10;
}

.right-col .kpi-gmp {
    grid-column: 10 / 13;
}

/* ---- KPI ROW 2 ---- */
.right-col .kpi-xpm {
    grid-column: 1 / 4;
}

.right-col .kpi-hero-dmg {
    grid-column: 4 / 7;
}

.right-col .kpi-tower-dmg {
    grid-column: 7 / 13;
}

/* ---- Recent Matches ---- */


/* ---- Row 3 (Power Ranking + Rank Balance) ---- */
.right-col .power-ranking {
    grid-column: 1 / 8;
}

.right-col .rank-balance {
    grid-column: 8 / 13;
}

/* Generic placeholder tile */
.slot {
    background: #1c1c24;
    border: 1px solid #454857;
    border-radius: 9px;
    min-height: 120px;
}

/* Row 1 */
.playstyle {
    grid-column: 1 / 5;
    padding: 14px 14px 12px;
}

.top-right {
    grid-column: 5 / 13;
}

/* Row 2 */
.recent-matches {
    grid-column: 5 / 13;
    grid-row: 2 / 4;
}

/* Row 3: 6 tiles */
.guardian {
    grid-column: 1 / 5;
    grid-row: 3;
    height: 224px;
    padding: 16px;
}

/* Row 4: 4 tiles */
.resources {
    grid-column: 5 / 13;
}



/* =====================
   Playstyle (Radar) Widget
   ===================== */
.playstyle {
    grid-column: 1;
    /* no grid-row, no height, no min-height */
}

.playstyle .radar-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto !important;
}

.playstyle .ps-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
}


.playstyle .ps-body {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 16px;
}

.playstyle .playstyle-info {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
}

.playstyle .ps-info-heading {
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.playstyle .ps-info-title {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}

.playstyle .ps-info-desc {
    line-height: 1.4;
    font-size: 12px;
    margin-bottom: 0px;
}

.playstyle .ps-chart {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
    min-width: 280px;
}

.playstyle .widget-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
}

.radar-data {
    --radar-stroke-width: 1;
}



/* ===== Playstyle Snapshot (Performance Trends page) ===== */
.ps-head-left {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.ps-subtitle {
    font-size: 14px;
    color: #a8aaaf;
    margin-top: -4px;
}

.ps-meta {
    display: grid;
    gap: 12px;
    width: 100%;
}

.ps-card {
    background: #24252C;
    border-radius: 6px;
    padding: 12px;
}

.ps-card.current {
    border: 1px solid transparent;
    border-radius: 6px;
    background: linear-gradient(#24252C, #24252C) padding-box,
        linear-gradient(90deg, #8810F9 0%, #4392F3 50%, #4CD2E4 100%) border-box;
}

.ps-card.last10 {
    border: #F9BD2C 1px solid;
}

.ps-card-head .ps-card-title {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 600;
}

.ps-card-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-direction: column;
}

.ps-badge-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ps-badge {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.ps-meta-title {
    font-weight: 600;
}

.ps-meta-desc {
    font-size: 12px;
    margin: 0px;
    color: #A8AAB8;
    line-height: 1.5;
}

.ps-card-title {
    color: #CAD5E2;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}


.ps-trends {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-row {
    display: flex;
    align-items: center;
    background: #24252C;
    border-radius: 6px;
    padding: 10px 12px;
    justify-content: space-between;
}

.ps-row-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ps-row-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.ps-row-label {
    font-weight: 600;
}

.ps-spark {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 246px;
    height: 36px;
    border-radius: 6px;
    margin: 0 10px;
}

.ps-row-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chip {
    letter-spacing: 0.5px;
    font-size: 12px;
    padding: 3px 6px;
    line-height: 1;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.chip.is-up {
    color: #3EC569;
    border: 1px solid #3EC569;
    background: #3ec5691d;
}

.chip.is-down {
    color: #F42746;
    border: #F42746 1px solid;
    background: #f427460d;
}

.chip.is-neutral {
    color: #C6CAD6;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.08);
}

.ps-patch {
    font-size: 14px;
    color: white;
    font-weight: 500;
}

/* =====================
   KPI Card Grid (Top two rows)
   ===================== */
.top-right {
    padding: 16px;
    display: grid;
    gap: 16px;
}

.kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.kpi-grid.row-1>.kpi-card {
    grid-column: span 3;
}

.kpi-grid.row-2>.kpi-card {
    grid-column: span 4;
}

.kpi-card {
    background: #1c1c24;
    border: 1px solid #454857;
    border-radius: 9px;
    padding: 12px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

.kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.kpi-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.kpi-sub {
    font-size: 14px;
    color: #a8aaaf;
    font-weight: 400;
}


.kpi-spark {
    flex: 1 1 auto;
    min-height: 56px;
    margin: 4px 0 6px;
    border-radius: 8px;
    min-width: 0;
    /* IMPORTANT for flex layouts */
}

.kpi-spark .spark-svg {
    width: 100%;
    /* fill the kpi-spark width */
    height: 56px;
    /* or `height: auto;` if you prefer */
    display: block;
}

.kpi-spark .spark-svg {
    max-width: 100%;
}

.kpi-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
}

/* Optional column guide (toggle by adding .show-layout to body) */
body.show-layout .kpi-grid {
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .06) 0 1px, transparent 1px 8.333%);
}


/* ===== KPI Widgets (Top two rows) ===== */
.kpi-widget {
    padding: 0;
    display: block;
    min-height: 174px;
    /* one row height */
}


/* Grid placement (12-column chat-grids) */
.kpi-kda {
    grid-column: 5 / 9;
    grid-row: 1;
}

/* span 4 */
.kpi-winrate {
    grid-column: 9 / 11;
    grid-row: 1;
}

/* span 2 */
.kpi-gmp {
    grid-column: 11 / 13;
    grid-row: 1;
}

/* span 2 */

.kpi-xpm {
    grid-column: 5 / 7;
    grid-row: 2;
}

/* span 2 */
.kpi-hero-dmg {
    grid-column: 7 / 9;
    grid-row: 2;
}

/* span 2 */
.kpi-tower-dmg {
    grid-column: 9 / 13;
    grid-row: 2;
}

.widget-icon {
    width: 18px;
    height: 20px;
    object-fit: contain;
}

.kpi-title-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* span 4 */

/* Optional: show vertical guides for the 12-col grid while iterating */
body.show-layout .chat-grids {
    background-image: repeating-linear-gradient(to right,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) calc((100% - 112px) / 12),
            transparent calc((100% - 112px) / 12),
            transparent calc(2 * (100% - 112px) / 12));
}

/* --- Remove double framing when KPI widgets use the generic .slot container --- */
.kpi-kda,
.kpi-winrate,
.kpi-gmp,
.kpi-xpm,
.kpi-hero-dmg,
.kpi-tower-dmg {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    /* let the inner .kpi-card control spacing */
}

/* Also neutralize .slot chrome if the KPI element itself carries .slot */
.kpi-widget.slot,
.slot.kpi-widget {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* ===== KPI card: benchmark + big value layout ===== */
.kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.kpi-foot .kpi-sub {
    font-size: 14px;
    color: #a8aaaf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    line-height: 1;
}

.kpi-big {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.kpi-benchmark {
    font-size: 14px;
    color: #a8aaaf;
    white-space: nowrap;
}

.kpi-benchmark span {
    font-weight: 500;
    color: white;
}

/* Tighten header spacing so the delta chip sits near the title */
.kpi-head {
    margin-bottom: 6px;
}

.kpi-card {
    padding: 14px 14px 12px;
}

/* ========== Row 3 widgets: Power Ranking & Power Rank Balance ========== */
.power-ranking {
    grid-column: 5 / 10;
    grid-row: 3;
    min-height: 260px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.rank-balance {
    grid-column: 10 / 13;
    grid-row: 3;
    min-height: 260px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Shared visual card shell (reuse KPI look) */
.viz-card {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    background: #1c1c24;
    border: 1px solid #454857;
    border-radius: 9px;
}

/* Chart canvases */
.viz-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    margin: 6px 0 0px;
    border-radius: 8px;
    color: var(--kpi-accent, #4dd0e1);
    max-height: 230px;
}

/* Legend */
.viz-foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.viz-legend {
    display: flex;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    padding-left: 28px;
    margin-top: 8px;
    margin-bottom: 8px;
    justify-content: center;
}

.viz-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.viz-legend .key {
    width: 20px;
    height: 3px;
    display: inline-block;
    background: currentColor;
    border-radius: 2px;
}

/* Small note/pills under the radar */
.viz-foot.note {
    gap: 4px;
    margin-top: 14px;
}

.viz-foot .muted {
    color: #a8aaaf;
    font-size: 14px;
    white-space: nowrap;
}

.pill {
    font-size: 14px;
    white-space: nowrap;
}

.pill-primary {
    color: #3EC569;
}

.pill-accent {
    color: #3EC569;
}



@media (max-width: 1800px) {

    .playstyle .ps-body {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0px;
    }


}

@media (max-width: 1500px) {

    .right-col {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }

    .right-col .kpi-kda {
        grid-column: 1 / 4;
    }

    .right-col .kpi-winrate {
        grid-column: 4 / 7;
    }

    .right-col .kpi-gmp {
        grid-column: 7 / 10;
    }

    .right-col .kpi-xpm {
        grid-column: 1 / 4;
    }

    .right-col .kpi-hero-dmg {
        grid-column: 4 / 7;
    }

    .right-col .kpi-tower-dmg {
        grid-column: 7 / 10;
    }

    .right-col .power-ranking {
        grid-column: 1 / 6;
    }

    .right-col .rank-balance {
        grid-column: 6 / 10;
    }

}


/* At 1366px and below: use a single 12-col grid,
   keep Playstyle on the left and put some widgets on the same row */
   @media (max-width: 1366px) {
    /* 12-column grid instead of 2 big columns */
    .chat-grids {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: 174px;
    }
  
    /* Playstyle is left side of row 1 (columns 1–6) */
    .playstyle {
        grid-column: 1 / 7;
        grid-row: 1 / 5;
        min-height: 874px;
    }
  
    /* Flatten right-col so its children are direct grid items */
    .right-col {
      grid-column: auto;
      display: contents;
    }
  
    /* --- ROW 1 (to the right of Playstyle) --- */
    .right-col .kpi-kda {
        grid-column: 7 / 10;
        grid-row: 1;
    }
  
    /* --- ROW 2 (two KPI cards) --- */
    .right-col .kpi-winrate {
        grid-column: 10 / 13;
        grid-row: 1;
    }
  
    .right-col .kpi-gmp {
        grid-column: 7 / 10;
        grid-row: 2;
    }
  
    /* --- ROW 3 (three KPI cards) --- */
    .right-col .kpi-xpm {
        grid-column: 10 / 13;
        grid-row: 2;
    }
  
    .right-col .kpi-hero-dmg {
        grid-column: 7 / 10;
        grid-row: 3;
    }
  
    .right-col .kpi-tower-dmg {
        grid-column: 10 / 13;
        grid-row: 3;
    }
  
    /* --- ROW 5: Power ranking + rank balance --- */
    .right-col .power-ranking {
        grid-column: 1 / 13;
        grid-row: 5;
    }
  
    .right-col .rank-balance {
        grid-column: 7 / 13;
        grid-row: 4;
    }
  }





/* Responsive: stack to 2 cols on medium, 1 on small */
@media (max-width: 1024px) {

    .chat-grids {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .playstyle {
        grid-column: 1 / 13;
        grid-row: 1;
        min-height: unset;
    }

    .right-col .kpi-kda {
        grid-column: 1 / 5;
        grid-row: 2;
    }

    .right-col .kpi-winrate {
        grid-column: 5 / 9;
        grid-row: 2;
    }

    .right-col .kpi-gmp {
        grid-column: 9 / 13;
        grid-row: 2;
    }

    .right-col .kpi-xpm {
        grid-column: 1 / 5;
        grid-row: 3;
    }

    .right-col .kpi-hero-dmg {
        grid-column: 5 / 9;
        grid-row: 3;
    }

    .right-col .kpi-tower-dmg {
        grid-column: 9 / 13;
        grid-row: 3;
    }

    .right-col .power-ranking {
        grid-column: 1 / 13;
        grid-row: 5;
    }

    .right-col .rank-balance {
        grid-column: 1 / 13;
        grid-row: 4;
    }

    .playstyle .ps-body {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
    }

    .playstyle .ps-chart {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 280px;
        min-width: 50%;
    }


}




@media (max-width: 768px) {

    .chat-grids {
        width: unset;
        padding: 0 18px;
        left: 0;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-auto-rows: auto;
        padding-bottom: 90px;
        gap: 12px;
    }

    .tab-nav {
        left: 0px;
        padding: 0 18px;
    }

    .playstyle {
        grid-column: 1 / 9;
    }

    .right-col .kpi-kda {
        grid-column: 1 / 5;
        grid-row: 2;
    }

    .right-col .kpi-winrate {
        grid-column: 5 / 9;
        grid-row: 2;
    }

    .right-col .kpi-gmp {
        grid-column: 1 / 5;
        grid-row: 3;
    }

    .right-col .kpi-xpm {
        grid-column: 5 / 9;
        grid-row: 3;
    }

    .right-col .kpi-hero-dmg {
        grid-column: 1 / 5;
        grid-row: 4;
    }

    .right-col .kpi-tower-dmg {
        grid-column: 5 / 9;
        grid-row: 4;
    }

    .right-col .power-ranking {
        grid-column: 1 / 9;
        grid-row: 6;
    }

    .right-col .rank-balance {
        grid-column: 1 / 9;
        grid-row: 5;
    }


}

@media (max-width: 600px) {

    .playstyle .ps-body {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0px;
    }


}

@media (max-width: 500px) {

    .right-col .kpi-kda {
        grid-column: 1 / 9;
        grid-row: 2;
    }

    .right-col .kpi-winrate {
        grid-column: 1 / 9;
        grid-row: 3;
    }

    .right-col .kpi-gmp {
        grid-column: 1 / 9;
        grid-row: 4;
    }

    .right-col .kpi-xpm {
        grid-column: 1 / 9;
        grid-row: 5;
    }

    .right-col .kpi-hero-dmg {
        grid-column: 1 / 9;
        grid-row: 6;
    }

    .right-col .kpi-tower-dmg {
        grid-column: 1 / 9;
        grid-row: 7;
    }

    .right-col .power-ranking {
        grid-column: 1 / 9;
        grid-row: 9;
    }

    .right-col .rank-balance {
        grid-column: 1 / 9;
        grid-row: 8;
    }

    /* Shrink the container inside the card */
.power-ranking .viz-area {
    width: 400px;        /* or %: e.g. 80% */
    max-width: 100%;     /* don’t overflow the card */
    margin: 0 auto;      /* center it in the slot */
  }
  
  /* Make the SVG follow the container width */
  .power-ranking .viz-area svg {
    width: 100%;
  }

  .ps-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* LEFT stays top-left */
  .ps-row-left {
    order: 1;
  }

  /* RIGHT stays top-right */
  .ps-row-right {
    order: 2;
    margin-left: auto; /* push to right side */
  }

  /* SPARK goes below as full-width row */
  .ps-spark {
    order: 3;
    width: 100%;
    margin-top: 4px;
    flex: unset;
    min-width: unset;
    max-width: unset;
    margin: unset;
  }


}

@media (max-width: 420px) {

    .right-col .power-ranking {
        display: none;
    }

    .right-col .rank-balance {
        grid-row: 8;
    }

    .viz-area.radar {
        width: 320px;   /* or whatever you want */
        max-width: 100%;
        height: auto;
    }
    
    .viz-area.radar svg {
        width: 100%;
        height: auto;
    }

}