/* ===== LOCAL FONTS (DSGVO-konform, keine externen Quellen) ===== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-variable.woff2") format("woff2"); /* Fallback auf Inter, da Space Grotesk optional */
}

/* intentionally left blank: all styling provided by Preline */

/* ===== CoreApp Body Background Override =====
   oros-design-system.css sets `html, body { background-color: transparent !important }`
   for EMS premium dashboard backgrounds. CoreApp needs solid backgrounds. */
html body {
    background-color: #fafafa !important; /* neutral-50 / gray-50 */
}
html.dark body {
    background-color: #0a0a0a !important; /* neutral-950 */
}

/* The selected system mode is distinct from its effective light/dark appearance. */
html[data-oros-theme-mode] button[data-hs-theme-click-value] {
    display: none;
}

html[data-oros-theme-mode="light"] button[data-hs-theme-click-value="dark"],
html[data-oros-theme-mode="dark"] button[data-hs-theme-click-value="auto"],
html[data-oros-theme-mode="system"] button[data-hs-theme-click-value="default"] {
    display: inline-flex;
}

/* Pass the host brand color to the generic kiosk controls. */
.kiosk-device-page {
    --kiosk-primary-color: var(--oros-primary, #0256dc);
}

/* Keep the existing management footer below long pages, including the kiosk fleet. */
#main-content + footer {
    position: static;
    height: auto;
}

#main-content + footer > div {
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}

.dark #main-content + footer p,
.dark #main-content + footer li {
    color: #a3a3a3;
}

/* Remove white box around text selection in headings */
h1, h2, h3, h4, h5, h6 {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

h1:focus,
h1:focus-visible,
h1:active,
h2:focus,
h2:focus-visible,
h2:active,
h3:focus,
h3:focus-visible,
h3:active,
h4:focus,
h4:focus-visible,
h4:active,
h5:focus,
h5:focus-visible,
h5:active,
h6:focus,
h6:focus-visible,
h6:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
    background: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===== ApexCharts Dark Mode Overrides ===== */
.dark .apexcharts-gridline,
.dark .apexcharts-grid-borders line {
    stroke: rgba(255, 255, 255, .1);
}

.dark .apexcharts-tooltip {
    background: #27272a !important;
    color: #fafafa !important;
    border-color: #3f3f46 !important;
}

.dark .apexcharts-tooltip-title {
    background: #18181b !important;
    border-color: #3f3f46 !important;
    color: #fafafa !important;
}

.dark .apexcharts-xaxistooltip,
.dark .apexcharts-yaxistooltip {
    background: #27272a;
    color: #fafafa;
    border-color: #3f3f46;
}

.dark .apexcharts-xaxistooltip-text,
.dark .apexcharts-yaxistooltip-text {
    color: #fafafa;
}

.dark .apexcharts-legend-text {
    color: currentColor !important;
}