body {
    background: #f5f7fb;
    font-family: "Poppins", sans-serif;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}
.dark-mode body {
    background: #121212;
    color: #f5f7fb;
}

/* =========================================================
   DARK MODE — GLOBAL LUMEN THEME
   ========================================================= */

body.dark-mode {
    background: #090a0c;
    color: #e5e7eb;
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f8fafc;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode small {
    color: #fcfcfc;
}

body.dark-mode .text-muted {
    color: #94a3b8;
}

/* Lists */
body.dark-mode .list-group-item {
  border-bottom: 1px solid #424242;
}

/* Links */
body.dark-mode a {
    color: #e5e7eb;
}
body.dark-mode a:hover {
    color: #cdcdcd;
}

/* Cards & Containers */
body.dark-mode .card,
body.dark-mode .lumen-card {
    background: #000000;
    border: 0px solid #060606;
    color: #e5e7eb;
}

body.dark-mode .lumen-shadow {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

body.dark-mode .embedded-card {
    background: #1F2128;
    border-bottom: 0px solid #424242;
}

/* Buttons */
body.dark-mode .btn-primary {
    background: #ffffff0a;
    border-color: #404554;
}

body.dark-mode .btn-primary:hover {
    background: #e0e0e021;
    border-color: #ffffff;
}

body.dark-mode .btn-outline-light {
    color: #e5e7eb;
    border-color: #ffffff30;
}

body.dark-mode .btn-outline-light:hover {
    background: #393939;
    color: #ffffff;
}

/* Badges / Pills / KPIs */
body.dark-mode .badge {
    background: #334155;
    color: #e5e7eb;
}

body.dark-mode .kpi-label {
    color: #c3c3c3;
}

body.dark-mode .kpi-value {
    color: #f8fafc;
}

body.dark-mode .kpi-badge {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

body.dark-mode .kpi-badge.kpi-up {
    background: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

body.dark-mode .kpi-badge.kpi-down {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* Tables */
body.dark-mode .table {
    color: #e5e7eb;
}

body.dark-mode .table thead th {
    color: #c0c0c0;
    border-bottom-color: #1f2937;
    font-weight: 600;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Charts (D3 / SVG) */
body.dark-mode svg text {
    fill: #ececec !important;
}

body.dark-mode .guide-line {
    stroke: #475569;
}

body.dark-mode .d3-tooltip {
    background: #020617 !important;
    color: #f8fafc !important;
    border-color: #1f2937 !important;
}

/* Icons */
body.dark-mode .material-symbols-rounded {
    color: #e5e7eb;
}

/* Footer */
body.dark-mode footer {
    color: #b3b3b3;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.jura {
  font-family: "Jura", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}


/** Buttons **/

.btn {
    padding: 2px 20px;
    border-radius: 6px;
}

.btn-primary {
    border: none;
    background-color: #404554;
    border-radius: 6px;
}

/** Slot Animations **/
.slot-number {
    display: inline-flex;
    font-size: 2.8rem;
    font-weight: 700;
    overflow: hidden;
    height: 3.5rem;
}

.slot-digit {
    display: flex;
    flex-direction: column;
    transition: transform 1.2s;
}

.slot-digit span {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/** Lists **/
.lumen-list .list-group-item {
    border: none;
    padding: 14px 0;
    font-size: 1rem;
    background: transparent;
    border-bottom: 1px solid #e5e7eb;
}

.lumen-list .list-group-item:last-child {
    border-bottom: none;
}

.list-name {
    color: #4a4a4a;
    font-weight: 500;
}

.list-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
}

/** Cards **/
.lumen-card {
    border-color: #ffffff;
}

.embedded-card {
    background-color: #f2f3f3;
    border-radius: 6px;
}

.lumen-shadow {
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}

/** Icons **/
.icon-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 8px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}

.icon-badge .material-symbols-rounded {
font-size: 22px;
}

/** Charts **/
#donutChart {
width: 100%;
height: 420px;
}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.footer-icon {
    width: 28px;
    height: 28px;
    background-image: url('/assets/images/logo-white.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}