/* ══════════════════════════════════════ 
   Müritz Seenotalarm – Custom Overrides
   Nach Bootstrap laden!
   ══════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   CSS Variables
   --------------------------------------------------------------------------- */
:root {
    --sa-blue: #0B5ED7;
    --sa-white: #ffffff;
    --sa-gray: #c8c8c8;
    --sa-bgbody: #eeeeee;
    --sa-bgbody-brighter: #fafafa;
    --sa-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    --sa-alert-bg: #eee;
    --sa-active-nav: #fff;
    --sa-active-bg: #0B5ED7;
    --sa-danger: darkred;
    --sa-stale: crimson;
    --sa-stale-minutes: 120;
}

/* ---------------------------------------------------------------------------
   modal
   --------------------------------------------------------------------------- */

.modal-header
{
    background-color: var(--sa-blue);
    color:white !important;
}
.modal-header .btn-close{
    filter: invert(1);
}
.modal-content code{
    color: var(--sa-blue);
}

/* ---------------------------------------------------------------------------
   Base & Links
   --------------------------------------------------------------------------- */
a {
    text-decoration: underline;
    color: var(--sa-active-bg);
}

a:hover {
    text-decoration: underline;
}

a:active,
a:hover,
.sidebar a:hover,
.sidebar p {
    color: var(--sa-active-bg);
}

ul:not(.nav):not(.navbar-nav):not(.dropdown-menu):not(.footer-links) {
    list-style-type: circle;
}

.sidebar a {
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: underline;
}
.number-notification{
    display: inline-block;
    background-color: var(--sa-stale);
    padding: 3px 6px 3px 6px ;
    margin: 0 6px 0 3px;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgb(219, 219, 219);
    font-size: 18px;
    line-height: 18px !important;
}
.size-1{
    font-size: 90%;
}
/* ---------------------------------------------------------------------------
   Lists (content + sidebar) 
   --------------------------------------------------------------------------- */
#content-area ul,
.sidebar ul {
    list-style-type: none;
    padding-left: 1.5em; /* Indent for dash space */
}

#content-area li::before,
.sidebar li::before {
    content: "–"; /* En dash; use "-" for hyphen */
    position: absolute;
    margin-left: -1em; /* Pull dash left to align with indent */
}

#content-area li.active::before,
.sidebar li.active::before {
    content: ">";
}

#content-area li.active,
.sidebar li.active {
    color: darkred;
}

/* ---------------------------------------------------------------------------
   Alerts & Body
   --------------------------------------------------------------------------- */
.alert {
    background-color: var(--sa-alert-bg);
    border: 2px dashed var(--sa-gray);
}

body {
    background-color: var(--sa-bgbody);
    color: black;
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    color: var(--sa-blue);
    margin-top: 1.5em;
    font-weight: 400;
    margin-bottom: 0.6em;
}

h1 {
    font-size: calc(1.3rem + 0.6vw);
    margin-top: 0;
}

h2.card-title {
    margin-top: 0;
}

strong {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   nachrichten konfiguration
   --------------------------------------------------------------------------- */

.card .nav{
    background-color: var(--sa-bgbody);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid lightgray;
}
.card .nav-link,
.card th,
.card td{
    font-size: 16px !important;
    color: black;
}


/* ---------------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------------- */
.navbar {
    background-color: var(--sa-blue) !important;
    box-shadow: var(--sa-shadow);
    margin-bottom: 20px;
    z-index: 1050;
}
.navbar-brand{
    padding-top: 0;
}

.navbar-brand-title {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    margin-right: 2em;
    font-style: italic;
    font-weight: 600;
}

.nav-divider {
    width: 1px;
    background: rgba(255, 255, 255, 1);
    margin: 0.5rem 1.2rem 0.5rem 0;
}

.navbar-nav .nav-link,
.notification button{
    color: white;
    border: 1px solid transparent !important;
    padding: 1px 8px 5px 8px;
    margin-right: 1.5rem !important;
    font-size: 16px;
}
.btn-check.checked.btn,
.navbar-nav .nav-link:hover,
.notification button:hover {
    color: white !important;
    text-decoration: underline;
    background-color: var(--sa-blue) !important;
}

.navbar-nav .nav-link.active:hover {
    text-decoration: underline;
}

.navbar-nav .nav-link.active {
    color: var(--sa-active-nav);
    border-radius: 3px;
    border-color: #fff;
}

.navbar-nav i.bi,
.notification i.bi{
    margin-right: 5px !important;
}

.btn-success {
    background-color: var(--sa-blue);
}

.nav-tabs .nav-link.active {
    background-color: var(--sa-bgbody);
}
i.bi{
    width:15px;
    display: inline-block;
}
h3 i.bi{
    width: 36px;
}
.navbar-collapse .dropdown-menu.show{
    width:auto !important;
    display:inline-block;
}
.navbar-collapse .nav-item.dropdown,
.navbar-collapse .nav-item.dropdown .dropdown-item{
    width:auto !important;
}
/* --------------------------------------------------------------------------- 
   Auth Dropdown
   -------------------------------------------------------------------------- */
.auth-dropdown {
    min-width: 320px;
    padding: 1.25rem;
}

.form-check-input[type="checkbox"] {
    border: 1px solid black;
}

/* ---------------------------------------------------------------------------
   Map – Container
   --------------------------------------------------------------------------- */
#map {
    width: 100%;
    height: 400px;
}

#map-section {
    position: relative;
}

/* Map – Info bar */
#map-info-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    visibility: hidden;
}

#map-info-bar.active {
    visibility: visible;
}

.is-fullscreen #map-info-bar {
    top: 3px;
}

#map-info-bar li {
    box-shadow: var(--sa-shadow);
    border-radius: 0 0 4px 4px;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #999;
    border-top-width: 0;
    pointer-events: auto;
}

.is-fullscreen #map-info-bar li {
    border-radius: 4px;
    border-width: 1px;
}

.map-info-bar-inner {
    text-align: center;
}

#map-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5em;
    justify-content: center;
}

/* Map – Info bar skeleton */
#map-info-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    pointer-events: none;
    display: flex;
    justify-content: center;
    visibility: hidden;
}

#map-info-skeleton.active {
    visibility: visible;
}

#map-info-bar.active ~ #map-info-skeleton {
    visibility: hidden;
}


#map-info-skeleton ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5em;
    justify-content: center;
}

#map-info-skeleton li {
    box-shadow: var(--sa-shadow);
    border-radius: 0 0 4px 4px;
    background: rgba(255, 255, 255, 0.8);
    padding: 0 12px;
    border: 1px solid #666;
    border-top-width: 0;
    min-width: 80px;
    min-height: 1.4em;
    animation: infobar-fade 1.5s ease-in-out infinite;
}

@keyframes infobar-fade {
    0%, 100% { background: rgba(255, 255, 255, 0.8); }
    50%      { background: rgba(255, 255, 255, 0.1); }
}

.is-fullscreen #map-info-skeleton {
    top: 10px;
}

.is-fullscreen #map-info-skeleton li{
    border-top: 1px solid #666;
    border-radius: 4px 4px 4px 4px;
}
.ruler-li{
    background-image: url('../images/rulerBlack.png') !important;
    background-size: 16px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    padding-left: 33px !important;
}

/* ---------------------------------------------------------------------------
   Map – Markers
   --------------------------------------------------------------------------- */
.marker-tracker {
    width: 12px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid #fff;
    z-index: 10;
}

.marker-tracker--gps {
    background-color: crimson;
    box-shadow: 0 0 0 2px crimson;
}

.marker-tracker--lora {
    background-color: midnightblue;
    box-shadow: 0 0 0 2px midnightblue;
}

.marker-tracker--fixed {
    background-color: gray;
    box-shadow: 0 0 0 2px gray;
}

/* waypoints */

.marker-waypoint {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 0 solid white;
}

.marker-waypoint--gps {
    background-color: crimson;
    border-color: crimson;
    box-shadow: 0 0 0 0 crimson;
}

.marker-waypoint--lora {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: midnightblue;
    border: 2px solid white;
    box-shadow: 0 0 0 2px midnightblue;
}

.marker-waypoint--fixed {
    background-color: lightslategray;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 0 0 2px crimson;
    width: 12px;
    height: 16px;
    border-radius: 3px;
}

.marker-waypoint--oldest {
    width: 8px;
    height: 8px;
    border-width: 2px;
    background-color: white;
}
/*
.marker-waypoint--fixed.marker-waypoint--oldest {
    display: none;
}
*/

/* notruf (öffentlich)  okay*/

.marker-tracker--notruf {
    background-color: crimson;
    box-shadow: 0 0 0 0px white, 0 0 0 2px crimson;
}

.marker-tracker--notruf {
    position: relative;
    /* Dein Marker-Styling (Breite/Höhe) hier */
}


/* Gemeinsame Styles für beide Ringe */
.marker-tracker--notruf::before,
.marker-tracker--notruf::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 210%;
    height: 150%;
    border-radius: 50%;
    /* Box-Shadow ist auf iOS stabiler als Border */
    box-shadow: 0 0 0 2px crimson; 
    
    /* Hardware-Beschleunigung & Layer-Fixes */
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    
    will-change: transform, opacity;
}

/* Ring 1 */
.marker-tracker--notruf::after {
    animation: notruf-ring 3s linear infinite;
}

/* Ring 2 (Startet mit Verzögerung) */
.marker-tracker--notruf::before {
    animation: notruf-ring 3s linear infinite;
    animation-delay: 1.5s;
}

@keyframes notruf-ring {
    /* 0-5%: Absolut unsichtbar beim Reset auf Scale 1 */
    0%, 5% { 
        transform: translate3d(-50%, -50%, 0) scale(1); 
        opacity: 0; 
    }
    /* 20%: Voll sichtbar */
    20% { 
        opacity: 0.9; 
    }
    /* 80%: Beginnt langsam zu verschwinden */
    80% { 
        opacity: 0.3; 
    }
    /* 95-100%: Komplett unsichtbar, bevor Scale 3 erreicht wird */
    95%, 100% { 
        transform: translate3d(-50%, -50%, 0) scale(3); 
        opacity: 0; 
    }
}

.marker-waypoint--notruf {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: red;
    opacity: 0.6;
}

.marker-waypoint--notruf-oldest {
    width: 10px;
    height: 10px;
    border: 2px solid white;
    box-shadow: 0 0 0 2px red;
    background-color: red;
    opacity: 1;
}

/* gateways */

.marker-gateway {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px dotted rgb(42, 80, 42);
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--sa-shadow);
}

/* lines */ 

.marker-direction-info {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0 solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    font-size: 22px;
    box-shadow: var(--sa-shadow);
    background-color: rgba(220, 20, 60, 0.6);
    color: white;
}

.marker-direction-info:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: crimson;
}

/* ---------------------------------------------------------------------------
   Map – Popups & Controls
   --------------------------------------------------------------------------- */
.popup-direction .maplibregl-popup-close-button {
    display: block;
}

.maplibregl-popup {
    z-index: 20;
}

.sa-meldung {
    background-color: var(--sa-white);
    text-align: center;
    padding: 0 0 2px 0;
    color: var(--sa-blue);
    box-shadow: var(--sa-shadow);
    border-top: 1px solid var(--sa-blue);
    min-height: 30px;
}

#sa-no-nachrichten {
    display: none;
}

#sa-nachrichten {
    position: relative;
    display: none;
    max-height: 7em;
    overflow-y: auto;
    text-align: left;
    padding: 4px 35px 4px 35px;
    scrollbar-width: none;
}
#sa-nachrichten::-webkit-scrollbar {
    display: none;
}

.sa-scroll-btn,
.sa-nachrichten-plus-btn {
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--sa-white);
    border: 1px solid rgb(219, 219, 219);
    cursor: pointer;
    z-index: 2;
    width: 22px;
    height: 22px;
    color: rgb(85, 85, 85) !important;
    box-shadow: var(--sa-shadow);
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    padding-left: 1px;
}

.sa-scroll-btn {
    display: none;
    position: sticky;
    float: right;
    clear: right;
    right: 0;
}
.sa-scroll-btn--up {
    top: 0px;
}
.sa-scroll-btn--down {
    bottom: 0px;
}
.sa-scroll-btn.visible {
    display: flex;
}
.sa-nachrichten-plus-btn {
    display: none;
    position: sticky;
    float: right;
    clear: right;
    right: -1px;
    top: calc(50% - 11px);
    background: var(--sa-white);
    color: var(--sa-blue);
    font-size: 22px;
    padding-bottom: 4px;
}
.sa-nachrichten-plus-btn{
    box-shadow: var(--sa-shadow);
}
.sa-nachrichten-plus-btn:hover,
.sa-scroll-btn:hover {
    color: crimson;
    border-color: crimson;
}
.sa-nachricht-item {
    display: flex;
    gap: 0.4em;
    padding: 5px 0px;
    border-bottom: 1px solid #eee;
}
.sa-nachricht-item i.bi-life-preserver{
    margin-right: 3px;
}

.sa-nachricht-item:last-child {
    border-bottom: none;
}
.sa-nachricht-item--notruf {
    border-left: 0px;
    font-weight: 600;
}
.sa-notruf-titel {
    display: inline;
    color: white;
    background-color: crimson;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.3em;
    padding: 2px 12px 3px 10px;
    box-shadow: var(--sa-shadow);
    border-radius: 5px;
}
.sa-notruf-titel i {
    font-size: 1em;
}
.sa-nachricht-item--notruf-beendet {
    border-left: 0px;
    font-weight: 600;
}
.sa-notruf-beendet-titel {
    display: inline;
    color: white;
    background-color: seagreen;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.3em;
    padding: 2px 12px 3px 10px;
    box-shadow: var(--sa-shadow);
    border-radius: 5px;
}
.sa-notruf-beendet-titel i {
    font-size: 1em;
}
.sa-nachricht-zeit {
    white-space: nowrap;
    color: #000000;
    flex-shrink: 0;
    min-width: 9em;
    padding-right: 0.5em;
}
.sa-nachricht-zeit span{
    color:gray;
}

@media screen and (max-width: 500px) {
    .sa-nachricht-zeit {
        min-width: 3em;
    }
    .sa-nachricht-zeit span{
        display: none;
    }
}

.sa-nachricht-text {
    color: #000;
    font-weight: 600;
    min-width: 0;
    word-wrap: break-word;
    margin-right:55px;
}

#map-section.notruf-aktiv .maplibregl-ctrl-attrib a {
    pointer-events: none;
}

.maplibregl-ctrl-group {
    background-color: transparent !important;
    margin-top: 3px !important;
    box-shadow: 0 0 0 0 !important;
}
.maplibregl-ctrl-fullscreen{
    margin-top: 11px;
}

.maplibregl-ctrl-group button {
    background-color: white !important;
    border-radius: 5px !important;
    box-shadow: var(--sa-shadow);
    color: black;
}

.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate {
    padding-top: 0;
    padding-right: 4px !important;
}
.maplibregl-ctrl-seamap{
    padding-top: 6px !important;
    padding-left: 4px !important;
}
.maplibregl-ctrl-admin-props,
.maplibregl-ctrl-gateways,
.maplibregl-ctrl-connection-lines{
    padding-right: 4px !important;
}

.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate.mein-standort-active {
    background: rgba(255, 255, 255, 1) !important;
    color: crimson;
}

.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate.mein-standort-active i {
    color: crimson;
}

/* Fullscreen / Seamap active = crimson */
#map-section.is-fullscreen .maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen,
#map-section.is-fullscreen .maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen i {
    color: crimson !important;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-seamap.active,
.maplibregl-ctrl-group button.maplibregl-ctrl-seamap.active i,
.maplibregl-ctrl-group button.maplibregl-ctrl-seamap.active svg,
.maplibregl-ctrl-group button.maplibregl-ctrl-gateways.active,
.maplibregl-ctrl-group button.maplibregl-ctrl-gateways.active i,
.maplibregl-ctrl-group button.maplibregl-ctrl-connection-lines.active,
.maplibregl-ctrl-group button.maplibregl-ctrl-connection-lines.active i,
.maplibregl-ctrl-group button.maplibregl-ctrl-admin-props.active,
.maplibregl-ctrl-group button.maplibregl-ctrl-admin-props.active i {
    color: crimson !important;
}

.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate i,
.maplibregl-ctrl-group button.maplibregl-ctrl-seamap i,
.maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen i,
.maplibregl-ctrl-group button.maplibregl-ctrl-gateways i,
.maplibregl-ctrl-group button.maplibregl-ctrl-connection-lines i,
.maplibregl-ctrl-group button.maplibregl-ctrl-admin-props i {
    font-size: 140% !important;
}

/* Map – Fullscreen */
#map-section.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #fff;
}

#map-section.is-fullscreen #map {
    width: 100%;
    height: 100%;
}

#fullscreen-close {
    display: none;
}

#map-section.is-fullscreen #fullscreen-close {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
}

#map-section.is-fullscreen #fullscreen-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Expand-Icon 45° im Uhrzeigersinn */
.icon-rotate-45 {
    display: inline-block;
    transform: rotate(45deg);
}

.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right {
    margin-top: 35px;
    z-index: 100 !important;
}

.maplibregl-ctrl-refresh-counter {
    background-color: white !important;
    border-radius: 5px !important;
    box-shadow: var(--sa-shadow);
    border-left: 2px solid crimson !important;
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 9px 10px 5px 8px;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
    margin-top: 0px !important;
    cursor: pointer;
    box-shadow: var(--sa-shadow) !important;
    line-height: 19px;  
    font-size: 19px;
    color: #000;
}
.maplibregl-ctrl-refresh-counter:hover,
.maplibregl-ctrl-refresh-counter:hover i{
    color: #000;
}
.maplibregl-ctrl-refresh-counter i{
    margin-right: 3px;
    line-height: 17px;  
    font-size: 17px;
}
.counter-intervall{
    font-size: 70% !important;
}

/* Nachrichten-Button (top-left, neben Refresh-Counter) */
.maplibregl-ctrl-nachrichten-btn {
    display: none;
    background-color: white !important;
    border-radius: 5px !important;
    box-shadow: var(--sa-shadow) !important;
    border-left: 2px solid #6c757d !important;
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 8px 13px 3px 8px;
    min-width: 40px;
    text-align: center;
    margin-top: 6px !important;
    cursor: pointer;
    line-height: 19px;
    font-size: 19px;
    color: #000;
}
#map-section.is-fullscreen .maplibregl-ctrl-nachrichten-btn {
    display: block;
}
.maplibregl-ctrl-nachrichten-btn:hover {
    color: #000;
}
.maplibregl-ctrl-nachrichten-btn i {
    margin-right: 3px;
    line-height: 17px;
    font-size: 17px;
    margin-bottom: 5px;
    margin-right: 8px;
}
.nachrichten-badge {
    font-size: 19px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.nachrichten-badge.hat-neue,
.maplibregl-ctrl-nachrichten-btn.hat-neue i {
    color: #fff;
    font-size: 19px;
}
.maplibregl-ctrl-nachrichten-btn.hat-neue {
    background-color: crimson !important;
    border-left: 3px solid var(--sa-blue) !important;
    animation: nachrichten-shake 2s ease-in-out infinite;
}
@keyframes nachrichten-shake {
    0%, 20%, 100% { transform: rotate(0deg); }
    2%  { transform: rotate(-12deg); }
    4%  { transform: rotate(10deg); }
    6%  { transform: rotate(-8deg); }
    8%  { transform: rotate(6deg); }
    10% { transform: rotate(-3deg); }
    12% { transform: rotate(0deg); }
}

/* Nachrichten-Lese-Modal */
#saNachrichtenLeseModal {
    z-index: 10010;
}
#saNachrichtenLeseModal ~ .modal-backdrop {
    z-index: 10009;
}
#saNotfallMeldungModal {
    z-index: 10012;
}
#saNachrichtenLeseModal .modal-dialog {
    max-width: min(90vw, 800px);
}
#saNachrichtenLeseModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.75rem;
}
#saNachrichtenLeseModal .sa-nachricht-item {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
#saNachrichtenLeseModal .sa-nachricht-item:last-child {
    border-bottom: none;
}

.maplibregl-ctrl-admin-element {
    position: absolute;
    z-index: 100;
    pointer-events: none;
}

.maplibregl-ctrl-admin-element button,
.maplibregl-ctrl-admin-props {
    pointer-events: auto;
    width: 29px;
    height: 29px;
    border: none;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.maplibregl-ctrl-group.maplibregl-ctrl-admin-element.maplibregl-ctrl-group:has(.maplibregl-ctrl-gateways) {
    top: 56px;
    right: 50px;
}

.maplibregl-ctrl-group.maplibregl-ctrl-admin-element.maplibregl-ctrl-group:has(.maplibregl-ctrl-connection-lines) {
    top: 92px;
    right: 50px;
}

.maplibregl-ctrl-admin-element.maplibregl-ctrl-zeitraum {
    top: 13px;
    right: 50px;
}

.maplibregl-ctrl-zeitraum {
    display: flex;
    flex-direction: row;
    margin-top: 0 !important;
}

.maplibregl-ctrl-zeitraum button {
    font-size: 16px;
    border-left: solid #2e7d32 2px !important;
    border-radius: 6px !important;
    margin-right: 3px;
}
button.maplibregl-ctrl-zeitraum-6h{
    margin-right: 0;
}
.maplibregl-ctrl-zeitraum button.active{
    color: crimson;
}

.maplibregl-ctrl-zeitraum button:disabled {
    opacity: 1;
    color: lightgray;
    cursor: default;
}
.maplibregl-ctrl-zeitraum-heute,
.maplibregl-ctrl-zeitraum-6h {
    font-weight: 400;
    width: auto !important;
    white-space: nowrap;
    padding: 0 7px !important;
}
.maplibregl-ctrl-zeitraum-6h {
    min-width: 22px;
}
.maplibregl-ctrl-zeitraum-heute{
    min-width: 100px;
}

.maplibregl-popup-content {
    border-radius: 7px !important;
    border: 1px solid #999;
    padding: 5px 10px !important;
    text-align: center;
}

.maplibregl-popup-tip {
    display: none;
}

.maplibregl-popup-close-button {
    display: none;
    border-color: #eee;
    border-width: 1px !important;
}

button.maplibregl-ctrl-zoom-in {
    margin-top: 12px;
}

button.maplibregl-ctrl-zoom-in,
button.maplibregl-ctrl-zoom-out,
button.maplibregl-ctrl-compass {
    border-left: 2px solid #333 !important;
    margin-bottom: 3px;
}

.maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen,
.maplibregl-ctrl-group button.maplibregl-ctrl-seamap,
.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate,
.maplibregl-ctrl-group button.maplibregl-ctrl-gateways,
.maplibregl-ctrl-group button.maplibregl-ctrl-connection-lines,
.maplibregl-ctrl-group button.maplibregl-ctrl-admin-props {
    border-left: 2px solid crimson !important;
    border-radius: 5px !important;
    width: 33px !important;
    height: 33px !important;
    padding-top: 4px;
    box-shadow: var(--sa-shadow);
}
.mein-standort-active{
    box-shadow: var(--sa-shadow) !important;
}

/* --------------------------------------------------------------------------- mein-standort-active
   Home Page
   --------------------------------------------------------------------------- */
body.app_home .navbar {
    margin-bottom: 0;
}

.container.teaser {
    margin-top: 20px !important;
}

.teaser .text-box {
    background-color: var(--sa-bgbody-brighter);
    border-radius: 8px;
    box-shadow: var(--sa-shadow);
    border: 1px solid silver;
}

.teaser .text-box h5 {
    margin-top: 0;
    color: black;
    border-bottom: 1px solid var(--sa-blue);
}

.sidebar,
.main {
    background-color: var(--sa-white);
    border-radius: 8px;
    border: 1px solid var(--sa-gray);
}

.sidebar h5 {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.footer {
    width: 100%;
    background-color: var(--sa-white);
    text-align: center;
    padding: 20px 0;
    border-top: 0 #ccc solid;
    border-bottom: 0 #ccc solid;
}

ul.footer-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.footer-links a {
    color: var(--sa-blue);
    text-decoration: none;
}

.footer-links a.active,
.footer-links a:hover {
    color: var(--sa-blue);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Tables & Buttons
   --------------------------------------------------------------------------- */
.table th a {
    color: black;
}

tr.row-stale td {
    color: var(--sa-stale) !important;
}

i.bi.bi-trash {
    color: gray;
}

.btn.btn-outline-danger.btn-sm {
    border: 1px solid gray;
}

.btn.btn-outline-danger.btn-sm:hover {
    background-color: crimson;
}

.btn.btn-outline-danger.btn-sm:hover i.bi.bi-trash {
    color: white;
}

.btn-wrapper a,
#toggleColsBtn,
#toggleColsBtn.active {
    background-color: var(--sa-blue);
    color: white;
}
#toggleColsBtn {
    margin-right: 0.7em;
}

.bg-danger{
    background-color: crimson;
}
.text-warning{
    color: crimson !important;
}
.btn-outline-warning{
    color:black;
    border-width: 0px;
    font-size: 22px;
    padding:0 0 0 10px;
}
th i{
    color: gray;
    font-size: 80%;
}
th:has(i) {
  white-space: nowrap;
}
#toggleGeloeschte.btn{
    color:white;
}
.btn.cta{ /* call to action */
    background-color: crimson;
    border-color: crimson;
}
.btn.btn-outline-danger:hover i{
    color:white;
}
/* ---------------------------------------------------------------------------
   Gateway-Liste 
   --------------------------------------------------------------------------- */
#gateway-delay{
    margin-bottom: 1em;
}

.nav-item .dropdown-menu{
    background-color: var(--sa-blue);
    border: 1px solid lightslategray;
    box-shadow: var(--sa-shadow);
}
.nav-item .dropdown-menu a{
    color: white;
}
.nav-item .dropdown-menu a:hover{
    background-color: var(--sa-blue);
    color: white;
}
hr.dropdown-divider{
    margin: 5px 10px;
    border-top: 1px solid lightslategray;
}
.nav-item hr.dropdown-divider{
    border-top: 1px solid rgb(220, 220, 220);
}

.hoverList tbody tr:hover td,
.hoverList tbody tr:hover td a,
.hoverList tbody tr:hover td i,
.hoverList tbody tr:hover .btn,
.hoverList tbody tr:hover td iframe{
    background-color: transparent !important;
    color: #fff !important;
    border-color: white !important;
}
.hoverList tbody tr:hover{
    background-color: var(--sa-blue) !important;
}
.hoverList tbody tr:hover td .bg-secondary{
    background-color: #eee !important;
    color: #000;
}
.offcanvas{
    padding-top: 30px;
}

/* ---------------------------------------------------------------------------
   Responsive 
   --------------------------------------------------------------------------- */

.navbar-brand-abbr {
    display: none;
}
@media screen and (max-width: 380px) {
    .navbar-brand-title {
        display: none !important;
    }
    .navbar-brand-abbr {
        display: inline-block !important;
    }
}

@media screen and (max-width: 560px) {
    .text-notification {
        display: none !important;
    }
}

@media screen and (max-width: 500px) {
    .small-displaynone {
        display: none;
    }
}

/* Navbar ab 1024px aufklappen (statt Bootstrap-Standard 1200px) */
@media (min-width: 1024px) {
    .navbar-expand-xl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
    }
    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xl .navbar-toggler {
        display: none;
    }
    .navbar-expand-xl .dropdown-menu {
        position: absolute;
    }
    .dropdown-menu-end[data-bs-popper] {
        position: absolute;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 1023px) {
    .dropdown-menu-end[data-bs-popper] {
        position: absolute;
        left: 0;
        right: auto;
    }
}

@media screen and (max-width: 770px) { 
    .maplibregl-ctrl-admin-element.maplibregl-ctrl-zeitraum {
        top: auto;
        bottom: 13px;
        right: 110px;
    }
    .maplibregl-ctrl-group.maplibregl-ctrl-admin-element.maplibregl-ctrl-group.wrapper-ctrl-gateways{
        top: auto;
        bottom: 13px;
        right: 47px;
    }
    .maplibregl-ctrl-group.maplibregl-ctrl-admin-element.maplibregl-ctrl-group.wrapper-ctrl-connection-lines{
        top: auto;
        bottom: 13px;
        right: 10px;
    }
}


@media screen and (max-width: 1400px) {
    body.kontakte_list .container-xl.small-nomargin {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }
}

/* ── Benachrichtigungs-Konfiguration: Sidebar + Detail ── */
.card-header{
    color: var(--sa-blue);
}

#bn-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#bn-nav::-webkit-scrollbar {
    height: 4px;
}

#bn-nav::-webkit-scrollbar-thumb {
    background: var(--sa-gray);
    border-radius: 2px;
}

#bn-nav .nav-link {
    color: #333;
    border-radius: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

#bn-nav .nav-link:hover {
    background-color: var(--sa-bgbody);
    text-decoration: none;
}

#bn-nav .nav-link.active {
    background-color: rgba(11, 94, 215, 0.08);
    color: var(--sa-blue);
    border-left-color: var(--sa-blue);
    font-weight: 600;
}

@media (max-width: 991px) {
    #bn-nav {
        flex-direction: row !important;
        gap: 0.25rem;
        padding: 0.5rem;
    }

    #bn-nav .nav-link {
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    #bn-nav .nav-link.active {
        border-left-color: transparent;
        border-bottom-color: var(--sa-blue);
    }
}

@media (min-width: 992px) {
    #bn-sidebar {
        position: sticky;
        top: 80px;
    }
}

.t-group > div:first-of-type{
    min-width: 18rem;
}
.t-group{
    border-bottom: 1px solid silver;
}
.t-group-wrapper div:last-child{
    border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Scroll-to-top Button
   --------------------------------------------------------------------------- */
#scroll-top-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
    display: none;
    width: 2rem;
    height: 2rem;
    border-radius: 10%;
    background-color: var(--sa-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: var(--sa-shadow);
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#scroll-top-btn:hover {
    opacity: 1;
}