/* =================================================================== */
/* DeathsHeatmap.css                                                   */
/* Page-specific styles for DeathsHeatmap.html                        */
/* =================================================================== */


/* -------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------- */

main {
    background-color: #ffffff;
    color: #222222;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 1400px;
    margin: 20px auto;
}


/* -------------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------------- */

h1, h2 {
    color: #222;
}


/* -------------------------------------------------------------------
   CAPTION
   ------------------------------------------------------------------- */

.caption {
    max-width: 1200px;
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    color: #222;
    border-left: 4px solid #2e7d32;
    line-height: 1.6;
}

.caption ul {
    margin: 10px 0;
}


/* -------------------------------------------------------------------
   LEGEND
   ------------------------------------------------------------------- */

.legend {
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f0f0;
    color: #222;
    border-radius: 5px;
}

.legend-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-box {
    width: 30px;
    height: 20px;
    border: 1px solid #999;
}

/* Legend box color variants */
.legend-box.heat-very-good {
    background-color: #1a7a1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.legend-box.heat-good {
    background-color: #237e23;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-box.heat-slight-good {
    background-color: #66cc66;
}

.legend-box.heat-neutral {
    background-color: #ffffff;
}

.legend-box.heat-slight-bad {
    background-color: #fff3cd;
}

.legend-box.heat-bad {
    background-color: #ffeb99;
}

.legend-box.heat-very-bad {
    background-color: #ffb84d;
}

.legend-box.heat-critical {
    background-color: #dc3545;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/* -------------------------------------------------------------------
   BASE TABLE STYLES
   ------------------------------------------------------------------- */

table {
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
    color: #222;
}

th, td {
    border: 1px solid #999;
    padding: 10px 8px;
    text-align: center;
    min-width: 60px;
}

th {
    background-color: #2e7d32;
    color: white;
    font-weight: bold;
}


/* -------------------------------------------------------------------
   RESPONSIVE WRAPPER
   ------------------------------------------------------------------- */

.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* -------------------------------------------------------------------
   HEATMAP TABLE
   ------------------------------------------------------------------- */

.heatmap-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.heatmap-table td:first-child,
.heatmap-table th:first-child {
    font-weight: bold;
    background-color: #e8f5e9;
    color: #222;
    position: sticky;
    left: 0;
    z-index: 2;
}

.heatmap-table th:first-child {
    z-index: 3;
}

/* Heatmap cell color tiers */
.heat-very-good  { background-color: #1a7a1a; color: #ffffff; }
.heat-good       { background-color: #237e23; color: #ffffff; }
.heat-slight-good{ background-color: #66cc66; color: #000000; }
.heat-neutral    { background-color: #ffffff; color: #000000; }
.heat-slight-bad { background-color: #fff3cd; color: #000000; }
.heat-bad        { background-color: #ffeb99; color: #000000; }
.heat-very-bad   { background-color: #ffb84d; color: #000000; }
.heat-critical   { background-color: #dc3545; color: #ffffff; }


/* -------------------------------------------------------------------
   BASE STATS TABLE
   ------------------------------------------------------------------- */

.base-stats-table {
    max-width: 400px;
}

.base-stats-table th,
.base-stats-table td {
    padding: 10px 15px;
}

.base-stats-table td:first-child {
    text-align: left;
    font-weight: bold;
    background-color: #e8f5e9;
}