body {
    background-color: #121212;
    color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 98vh;
}

#dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    width: 100vw;
    height: calc(100vw / 16 * 9);
    margin: 10px;
}

body.hide-cursor {
  cursor: none;
}

#settings-box label {
    font-size: 0.7rem;
}

#theme-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.settings-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#settings-icon {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    filter: brightness(1.2);
    z-index: 1000; /* make sure it stays on top */
}

.stat-header img {
    width: 128px;
    height: 128px;
    margin-right: 10px;
    object-fit: contain;
}

/* Add this to cap any rogue image sizing */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

#settings-box {
    display: none; /* make sure it's hidden initially */
    position: fixed;
    top: 60px;
    right: 20px;
    width: 250px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 15px;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* THEME: DARK (default) */
body[data-theme="DARK"] {
    background-color: #121212;
    color: #f0f0f0;
}

body[data-theme="DARK"] #settings-box {
    background-color: #2a2a2a;
    border: 1px solid #444;
}

/* THEME: LIGHT */
body[data-theme="LIGHT"] {
    background-color: #f5f5f5;
    color: #111;
}

body[data-theme="LIGHT"] #settings-box {
    background-color: #ffffff;
    border: 1px solid #ccc;
}

/* THEME: CLASSIC (lighter version of DARK) */
body[data-theme="CLASSIC"] {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body[data-theme="CLASSIC"] #settings-box {
    background-color: #333;
    border: 1px solid #555;
}

/* THEME: RETRO */
body[data-theme="RETRO"] {
    background-color: #002b44;
    color: #fffdd0;
}

body[data-theme="RETRO"] #settings-box {
    background-color: #002244;
    border: 1px solid #666;
}

.stat-box {
    padding: 10px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.stat-title {
    margin: 0;
    font-size: 1.2rem;
}

/* Field lines */
.stat-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-line {
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-name {
    font-weight: bold;
    flex: 1;
}

.stat-value {
    font-weight: normal;
    flex: 0;
    white-space: nowrap;
}

/* THEME COLORS FOR TITLES */
body[data-theme="DARK"] .stat-title {
    color: #4fc3f7;
}

body[data-theme="LIGHT"] .stat-title {
    color: #007acc;
}

body[data-theme="CLASSIC"] .stat-title {
    color: #5ab4e3;
}

body[data-theme="RETRO"] .stat-title {
    color: #ffcc00;
}

/* LEVEL COLORS BY THEME */

/* DARK THEME */
body[data-theme="DARK"] .level-low {
    color: #8bc34a;
}

body[data-theme="DARK"] .level-medium {
    color: #ffeb3b;
}

body[data-theme="DARK"] .level-high {
    color: #ff9800;
}

body[data-theme="DARK"] .level-critical {
    color: #f44336;
}

body[data-theme="DARK"] .level-neutral {
    color: #b2b2b2;
}

/* LIGHT THEME */
body[data-theme="LIGHT"] .level-low {
    color: #558b2f;
}

body[data-theme="LIGHT"] .level-medium {
    color: #a47e21;
}

body[data-theme="LIGHT"] .level-high {
    color: #a15b00;
}

body[data-theme="LIGHT"] .level-critical {
    color: #880200;
}

body[data-theme="LIGHT"] .level-neutral {
    color: #424242;
}

/* CLASSIC THEME */
body[data-theme="CLASSIC"] .level-low {
    color: #7cb342;
}

body[data-theme="CLASSIC"] .level-medium {
    color: #fdd835;
}

body[data-theme="CLASSIC"] .level-high {
    color: #ffb300;
}

body[data-theme="CLASSIC"] .level-critical {
    color: #e53935;
}

body[data-theme="CLASSIC"] .level-neutral {
    color: #b6b6b6;
}

/* RETRO THEME */
body[data-theme="RETRO"] .level-low {
    color: #80cbc4;
}

body[data-theme="RETRO"] .level-medium {
    color: #fff59d;
}

body[data-theme="RETRO"] .level-high {
    color: #ffb74d;
}

body[data-theme="RETRO"] .level-critical {
    color: #ef5350;
}

body[data-theme="RETRO"] .level-neutral {
    color: #b0bec5;
}
@media (min-width: 1400px) {
    html {
        font-size: 2em;
    }

    .stat-box {
        padding: 1.9em;
    }

    .stat-header h1 {
        font-size: 3.5em;
    }

    .stat-fields .stat-line {
        font-size: 1.35em;
    }

    #settings-box {
        width: 400px;
        font-size: 1em;
    }

    #settings-icon {
        width: 36px;
        height: 36px;
    }
}
.source-label {
    background-color: black;
    color: white;
    font-size: 0.7em;
    padding: 2px 4px;
    margin-left: 8px;
    border-radius: 4px;
}