/* Edles Nachtblau, nur für die App-Oberfläche.
   Liegt über mobile-style.css. Fehlt diese Datei, bleibt das braune Design. */

:root {
    --primary-color: #161d2c;
    --header-bg: #161d2c;
    --list-bg: #f3f5f8;
    --ink: #161d2c;
    --ivory: #f4f6fa;
    --accent: #5c8ac4;
}

html, body {
    background-color: #161d2c;
}

.top-nav,
.header,
.toolbar-fixed {
    background: #161d2c;
    color: #f4f6fa;
    box-shadow: none;
}

.header h1 {
    color: #f4f6fa;
    text-shadow: none;
}

.toolbar-fixed {
    border-bottom: 1px solid rgba(244, 246, 250, 0.08);
}

.search-wrapper-m {
    background: rgba(244, 246, 250, 0.08);
    border: 1px solid rgba(244, 246, 250, 0.16);
}

.search-wrapper-m:focus-within {
    background: #ffffff;
    border-color: #5c8ac4;
    box-shadow: 0 0 0 3px rgba(92, 138, 196, 0.35);
}

.search-box,
.search-wrapper-m:focus-within .search-box {
    color: #f4f6fa;
}

.search-wrapper-m:focus-within .search-box {
    color: #161d2c;
}

.search-box::placeholder {
    color: rgba(244, 246, 250, 0.55);
}

.search-wrapper-m:focus-within .search-box::placeholder {
    color: #94a3b8;
}

.btn-list-m {
    background: rgba(244, 246, 250, 0.08);
    border: 1px solid rgba(244, 246, 250, 0.16);
    color: #f4f6fa;
}

.btn-clear-m {
    background: rgba(244, 246, 250, 0.14);
    color: #f4f6fa;
}

.search-wrapper-m:focus-within .btn-clear-m {
    background: #e8edf4;
    color: #161d2c;
}

.btn-safety-m {
    background: #3e6ea8;
}

.safety-dropdown {
    background: #1c2538;
    border-top: 1px solid rgba(244, 246, 250, 0.1);
    box-shadow: 0 16px 32px rgba(8, 12, 20, 0.35);
}

#btn-aussteller-info circle:first-child {
    fill: #161d2c;
}

.map-area {
    background: #161d2c;
}

.map-zoom-slider::-webkit-slider-runnable-track,
.map-zoom-slider::-moz-range-track {
    background: rgba(22, 29, 44, 0.22);
}

.map-zoom-slider::-webkit-slider-thumb,
.map-zoom-slider::-moz-range-thumb {
    background: #161d2c;
}

.mobile-overlay {
    background: rgba(10, 14, 24, 0.55);
}

.overlay-header,
.overlay-header b,
.overlay-header button {
    background: #161d2c;
    color: #f4f6fa !important;
    border-bottom-color: rgba(244, 246, 250, 0.1);
}

.overlay-header button {
    background: none;
}

.drag-indicator {
    background: rgba(244, 246, 250, 0.35);
}

.sort-btn {
    background: rgba(244, 246, 250, 0.08);
    border: 1px solid rgba(244, 246, 250, 0.16);
    color: #f4f6fa;
}

.scroll-area {
    background: #f3f5f8;
}

.list-item {
    border-bottom: 1px solid #e4e8ef;
}

.list-item:active {
    background-color: #e7edf5;
}

.list-item:not(.empty-msg)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1 L7 7 L1 13' fill='none' stroke='%23161d2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'/%3E%3C/svg%3E");
}

.list-info b {
    color: #161d2c;
}

.list-info small {
    color: #5c6b82;
}

.impressum-box-m {
    color: #161d2c;
    border-top-color: #5c8ac4;
    box-shadow: 0 8px 24px rgba(22, 29, 44, 0.06);
}

.prog-day,
.prog-item,
.prog-title {
    color: #161d2c;
}

.prog-time {
    color: #3e6ea8;
}

.prog-desc {
    color: #5c6b82;
}

#welcome-screen {
    background: #161d2c;
    color: #f4f6fa;
}

.welcome-content {
    background: #1c2538;
    border: 1px solid rgba(197, 214, 236, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.welcome-logo {
    filter: invert(1);
    mix-blend-mode: screen;
}

.welcome-title {
    color: #f4f6fa;
    text-shadow: none;
}

.welcome-text {
    color: rgba(244, 246, 250, 0.78);
}

.btn-start {
    background: #3e6ea8;
    box-shadow: 0 8px 22px rgba(8, 12, 20, 0.28);
}

.btn-start:active {
    box-shadow: none;
}

.welcome-links a {
    color: #f4f6fa;
    background: transparent;
    border: 1px solid rgba(244, 246, 250, 0.22);
}

.welcome-links a:active {
    background: rgba(244, 246, 250, 0.1);
}

.btn-install {
    background: rgba(244, 246, 250, 0.08);
    color: #f4f6fa;
    border: 1px solid rgba(244, 246, 250, 0.22);
}

#portrait-lock {
    background: #161d2c;
    color: #f4f6fa;
}

.portrait-icon {
    filter: none;
}

.install-box h3,
.edit-modal-box h3 {
    color: #161d2c;
}

.install-icon {
    background: #f4f6fa;
    border: 1px solid #e4e8ef;
}

.install-icon svg {
    stroke: #3e6ea8;
}

.btn-close-install {
    background: #161d2c;
    box-shadow: none;
}

#text-edit-area {
    border: 1px solid #e4e8ef;
}

#text-edit-area:focus {
    border-color: #5c8ac4;
    box-shadow: 0 0 0 3px rgba(92, 138, 196, 0.28);
}

.btn-safety-m.waiting {
    color: #161d2c;
}

.action-toast {
    background: #3e6ea8;
}

#popup .close-btn > div {
    background: #161d2c;
}