@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    /* CRITICAL: This ensures padding/borders don't push elements outside their containers */
    box-sizing: border-box !important;
    outline: none !important;
    -webkit-font-smoothing: antialiased;
}
/* assets/custom.css */
:root {
    /*--bg-dark: #0b0c0e;*/
    --bg-dark: #0F172A;
    --bg-light: #F5F5F5;
    --panel-bg: #E8F0F5;
    --border-color: #797d83;
    --text-primary: #000000;
    --text-secondary: #8b949e;
    --accent-blue: #2d9cdb;
    --accent-alert: #ff4d4d;
    --accent-warn: #ffcc00;
    --accent-good: #00cc66;
    /*--font-mono: 'Segoe UI', 'Courier New', monospace;*/
    --font-mono: 'Inter', "sans-serif";
    --gotham-bg: #A5B8C1;
    --gotham-card: #E8F0F5;
    --gotham-border: #30363d;
    --gotham-text: #070707;
    --gotham-accent: #58a6ff;
    --gotham-success: #238636;
    --sidebar-width: 14%;
    --nav-font-size: 18px;
    --logo-size: 32px;
    --nav-icon-size: 27px;
}

#_pages_content {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    display: block !important;
}

html, body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-primary);
    margin: 0 !important;
    padding: 0 !important;
    /*overflow: hidden !important;*/
    overflow-y: auto !important;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Remove default Mantine gaps */
.mantine-Group-root, .mantine-Stack-root {
    margin: 0 !important;
}

/* Make sparklines more responsive */
.mantine-Sparkline-root {
    width: 100% !important;
}

/* Adjust font size for smaller notebook screens */
@media screen and (max-height: 800px) {
    :root {
        font-size: 13px;
    }
}

/* assets/style.css */
@font-face {
    font-family: 'Inter';
    src: url('Inter-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Inter';
    src: url('Inter-Bold.ttf') format('truetype');
    font-weight: 700;
}

@media (max-width: 1500px) {
    :root { --sidebar-width: 15%; --nav-font-size: 14px; --logo-size: 28px; }
}
@media (max-width: 1200px) {
    :root { --sidebar-width: 13%; --nav-font-size: 13px; --logo-size: 24px; }
}

/* --- SIDEBAR CONTAINER --- */
.responsive-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed; top: 0; left: 0;
    display: flex; 
    flex-direction: column; 
    padding: 10px;
    /* The Gradient Background */
    background-image: linear-gradient(180deg, #2D5463 0%, #283E4A 100%);
    transition: width 0.3s ease;
    z-index: 100;
}

/* ── Bootstrap Accordion arrow fix ─────────────────────────────────────────
   The global flex/margin resets above interfere with the accordion button's
   internal layout, pushing the chevron to inconsistent positions.          */
.accordion-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;
}
.accordion-button::after {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    min-width: 1.25rem;
}

/* 1. Remove the strange black line under the table */
.tabulator {
    border-bottom: none !important;
}
.tabulator-tableholder {
    border-bottom: none !important;
}

/* 2. Ensure the first column (The Tree) is readable */
.tabulator-row.tabulator-tree-level-0 .tabulator-cell:first-child {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* 3. FIX THE EXPANDER ICON (The '▶') */
/* Sometimes the icon is black on a dark background. Let's force it to white. */
.tabulator-row.tabulator-tree-level-0 .tabulator-tree-indicator {
    border: 1px solid white !important;
    color: rgb(0, 0, 0) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin-right: 10px !important;
}

/* 4. Fix row level 1 (Rooms) readability */
.tabulator-row.tabulator-tree-level-1 {
    background-color: #fcfcfc !important;
    color: #2c3e50 !important;
}

.bw-map-tiles {
    filter: grayscale(60%) contrast(70%);
    /* Optional: Lower brightness if it's too bright */
    /* filter: grayscale(100%) contrast(110%) brightness(90%); */
}

.marker-red { filter: hue-rotate(140deg); }
.marker-orange {
    /* 1. Rotate 155deg (Blue -> Orange) */
    /* 2. Brightness 1.1 (Make it pop) */
    /* 3. Saturate 3 (Make it intense, not brown) */
    filter: hue-rotate(155deg) brightness(1.1) saturate(300%);
}
.marker-green { filter: hue-rotate(250deg); }

/* Rotates the marker based on a custom property 'track' */
.plane-icon-rotated {
    transition: transform 0.5s linear;
}

/* --- Accordions --- */
.accordion-container {
    /* height: 40vh;  Bottom 40% */
    overflow-y: auto;
    background-color: var(--panel-bg);
    padding: 1vh;
}

/* Override Bootstrap Accordion */
.accordion-item {
    background-color: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0 !important; /* Sharp edges */
    /*margin-bottom: 1vh;*/
}

.accordion-button {
    /*color: #E8F0F5;*/
    background-color: #f5f5f5 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 1rem;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: #f5f5f5 !important;
    border-left: 4px solid var(--accent-blue);
}

.accordion-body {
    background-color: white !important;
    padding: 2%;
    border-top: 1px solid var(--border-color);
}

/* Nested depth styling */
.accordion-item .accordion-item {
    margin-left: 15px; /* Indent nested items */
    border-left: 1px solid #444 !important;
}




/* --- Status Circles --- */
.status-circle {
    width: 1vh;
    height: 1vh;
    border-radius: 50%;
    display: inline-block;
    margin-right: 1vh;
    box-shadow: 0 0 5px currentColor;
}

/* --- Control Panel Elements --- */
.control-btn {
    border-radius: 0 !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin: 2px;
    background-color: #1f242b;
    border: 1px solid #444;
}

.control-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #b0b8c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7f8c9a; }


.liquid-glass-container {
    /*position: relative;*/
    /* width: 640px; */
    margin-top: 32px;
    /*border-radius: 30px;*/
    background: linear-gradient(120deg, rgba(112, 127, 136, 0.22) 0%, rgba(210,220,235,0.22) 90%);
    box-shadow: 0 8px 20px 0 rgba(60,110,170,0.13), 0 1.5px 12px 0 rgba(27,40,67,0.09);
    /*border: 1.5px solid rgba(60,110,170, 0.24);
    border: 1.5px solid rgba(79, 134, 247, 0.24);
    z-index: 2;*/
    isolation: isolate;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    overflow: hidden;
    padding: 34px 38px 18px 38px;
    border-radius: 8px !important;
}

.liquid-glass-container2 {
    position: relative;
    /* width: 640px; */
    margin-top: 50px;
    /*border-radius: 30px;*/
    background: rgba(232,240,245,0.50);
    /*box-shadow: 0 8px 20px 0 rgba(60,110,170,0.13), 0 1.5px 12px 0 rgba(27,40,67,0.09);
    border: 2.5px solid rgba(180, 205, 240, 0.24);*/
    /*border: 2.5px solid rgba(79, 134, 247, 0.24);
     z-index: 2;
    isolation: isolate;
    backdrop-filter: blur(12px) saturate(140%); */
    /*-webkit-backdrop-filter: blur(12px) saturate(140%);*/
    overflow: hidden;
    padding: 34px 38px 18px 38px;
    border-radius: 10px !important;
}

.gotham-card {
    background-color: var(--gotham-card);
    border: 1px solid var(--gotham-border);
    border-radius: 6px;
    padding: 20px;
    color: var(--gotham-text);
}

.gotham-badge {
    font-family: 'Inter';
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- Sidebar --- */
.sidebar {
    /*background-color: '#0F172A';*/
    background-image: linear-gradient(180deg, #2D5463 0%, #283E4A 100%);
    border-right: 1px solid var(--border-color);
    width: 4.7vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    z-index: 1000;
}

.sidebar-icon {
    color: var(--text-secondary);
    font-size: 1.2rem;
    margin-bottom: 25px;
    cursor: pointer;
    transition: color 0.2s, text-shadow 0.2s;
}

.sidebar-icon:hover {
    color: var(--accent-blue);
    text-shadow: 0 0 8px rgba(45, 156, 219, 0.6);
}

/* --- Main Layout --- */
.main-content {
    margin-left: 4.7vw; /* Sidebar width */
    min-height: 100vh;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
}

/* --- Map Container --- */
.map-container {
    position: relative;
    height: 60vh; /* Takes top 60% */
    width: 100%;
    border-bottom: 2px solid var(--border-color);
}

/* Map Corners Overlays */
.map-overlay {
    position: absolute;
    z-index: 999; /* Above map */
    background: rgba(11, 12, 14, 0.85);
    border: 1px solid var(--border-color);
    padding: 10px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    max-width: 300px;
}

.top-left { top: 20px; left: 20px; }
.top-right { top: 20px; right: 20px; }
.bottom-left { bottom: 20px; left: 20px; }
.bottom-right { bottom: 20px; right: 20px; }

.profile-section {
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    /*padding: 2rem 1.5rem;*/
    gap: 0.5rem;
    transition: all var(--transition-speed);
    justify-content: space-between;
}

.profile-img {
    width: var(--nav-icon-size, 27px);
    height: var(--nav-icon-size, 27px);
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    padding: 2px;
    flex-shrink: 0;
    align-items: center;
    position: relative;
    margin-bottom: 1rem;
}

/* ------ BUTTON IN SIDE BAR HOSPITAL ------- */

.custom-back-btn {
    /* Color & Background */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent white over your sidebar color */
    color: white !important;
    border: none !important;

    /* Shape & Spacing */
    border-radius: 2px !important; /* Adjust for that specific roundness */
    padding: 5px 5px !important;
    
    /* Typography */
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 400;
    
    /* Alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
}

.custom-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    cursor: pointer;
}

.css-icon {
  width: 20px;
  height: 20px;
  -webkit-mask: var(--svg) no-repeat 50% 50%;
  mask: var(--svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: currentColor; /* CRITICAL: Inherits color from parent */
  display: inline-block;
}

/* --- 3. THE CIRCLE WRAPPER --- */
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1); /* Inactive Grey Circle */
    color: white;                               /* Inactive White Icon */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* --- 3b. DEFAULT (INACTIVE) STATE --- */
.nav-btn {
    color: white !important;
}

/* --- 4. HOVER STATE --- */
.nav-btn:hover {
    background-color: rgba(198, 245, 170, 0.12) !important;
    color: #C6F5AA !important;
}
.nav-btn:hover .icon-circle {
    background-color: rgba(198, 245, 170, 0.2) !important;
    color: #C6F5AA !important;
}

/* --- 5. ACTIVE STATE --- */
.nav-btn[data-active] {
    background-color: rgba(167, 243, 208, 0.18) !important;
    color: #a7f3d0 !important;
    border-left: 3px solid #a7f3d0;
}
.nav-btn[data-active] .icon-circle {
    background-color: rgba(167, 243, 208, 0.25) !important;
    color: #a7f3d0 !important;
}


/* ------------- SEGMENTED CONTROL IN BETTENUEBERSICHT !!! */
/* Force the active SegmentedControl button to turn Dark Green */
#station-selector .mantine-SegmentedControl-label[data-active="true"],
#station-selector .mantine-SegmentedControl-label[data-active] {
    background-color: #00695c !important;
    border-color: #00695c !important;
    color: white !important;
}

/* Optional: Add a subtle hover effect to inactive buttons */
#station-selector .mantine-SegmentedControl-label:hover {
    background-color: #e2e8ea;
    cursor: pointer;
}

/* ______________ ICONS _____________ */

.fluent--home-24-regular {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.55 2.532a2.25 2.25 0 0 1 2.9 0l6.75 5.692c.507.428.8 1.057.8 1.72v9.31a1.75 1.75 0 0 1-1.75 1.75h-3.5a1.75 1.75 0 0 1-1.75-1.75v-5.007a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25v5.007a1.75 1.75 0 0 1-1.75 1.75h-3.5A1.75 1.75 0 0 1 3 19.254v-9.31c0-.663.293-1.292.8-1.72zm1.933 1.147a.75.75 0 0 0-.966 0L4.767 9.37a.75.75 0 0 0-.267.573v9.31c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-5.007c0-.967.784-1.75 1.75-1.75h3.5c.966 0 1.75.783 1.75 1.75v5.007c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-9.31a.75.75 0 0 0-.267-.573z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fluent--bed-24-regular {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.75 4h10.5a2.75 2.75 0 0 1 2.745 2.582L20 6.75v3.354a2.75 2.75 0 0 1 1.994 2.459l.006.187v7.5a.75.75 0 0 1-1.493.102l-.007-.102V18h-17v2.25a.75.75 0 0 1-.648.743L2.75 21a.75.75 0 0 1-.743-.648L2 20.25v-7.5c0-1.259.846-2.32 2-2.647V6.75a2.75 2.75 0 0 1 2.582-2.745zm12.5 7.5H4.75a1.25 1.25 0 0 0-1.244 1.122l-.006.128v3.75h17v-3.75a1.25 1.25 0 0 0-1.122-1.243zm-2-6H6.75a1.25 1.25 0 0 0-1.244 1.122L5.5 6.75V10H7a1 1 0 0 1 1-1h2a1 1 0 0 1 .993.883L11 10h2a1 1 0 0 1 1-1h2a1 1 0 0 1 .993.883L17 10h1.5V6.75a1.25 1.25 0 0 0-1.122-1.244z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fluent--people-community-24-regular {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 4.5A1.75 1.75 0 1 0 12 8a1.75 1.75 0 0 0 0-3.5M8.75 6.25a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0M5 6.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M2 8a3 3 0 1 1 6 0a3 3 0 0 1-6 0m15.5 0a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M19 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6M7.5 12.75c0-.966.784-1.75 1.75-1.75h5.5c.966 0 1.75.784 1.75 1.75v3.75a4.5 4.5 0 1 1-9 0zm1.75-.25a.25.25 0 0 0-.25.25v3.75a3 3 0 1 0 6 0v-3.75a.25.25 0 0 0-.25-.25zm-2.64-.522q-.109.369-.11.772v.81l-2.814.754a.25.25 0 0 0-.177.306l.712 2.657a3 3 0 0 0 3.161 2.212c.315.486.705.919 1.153 1.282a4.5 4.5 0 0 1-5.763-3.107l-.712-2.656a1.75 1.75 0 0 1 1.237-2.143zm8.855 8.793q.125.042.253.076a4.5 4.5 0 0 0 5.511-3.182l.712-2.656a1.75 1.75 0 0 0-1.237-2.144l-3.314-.888q.109.37.11.773v.81l2.816.754a.25.25 0 0 1 .176.306l-.712 2.657a3 3 0 0 1-3.162 2.212a5.5 5.5 0 0 1-1.153 1.282'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.bi--person-gear {
  display: inline-block;
  width: 16px;
  height: 16px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M11 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382zM14 12.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fluent--settings-32-regular {
  display: inline-block;
  width: 32px;
  height: 32px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M16 11a5 5 0 1 0 0 10a5 5 0 0 0 0-10m-3 5a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-.16 13.628c1.035.247 2.096.372 3.16.372a13.6 13.6 0 0 0 3.156-.375a1.48 1.48 0 0 0 1.13-1.276l.234-2.13a1.47 1.47 0 0 1 2.066-1.2l1.955.856a1.47 1.47 0 0 0 1.671-.345a14.25 14.25 0 0 0 3.156-5.443a1.48 1.48 0 0 0-.535-1.627l-1.729-1.275a1.48 1.48 0 0 1 .003-2.396l1.72-1.27a1.47 1.47 0 0 0 .537-1.63a14.2 14.2 0 0 0-3.157-5.443a1.48 1.48 0 0 0-1.674-.345l-1.946.856a1.483 1.483 0 0 1-2.067-1.2l-.236-2.12a1.48 1.48 0 0 0-1.147-1.283a15 15 0 0 0-3.127-.363a15.4 15.4 0 0 0-3.146.363a1.47 1.47 0 0 0-1.147 1.28l-.237 2.122a1.493 1.493 0 0 1-2.073 1.206l-1.946-.857a1.49 1.49 0 0 0-1.67.35a14.25 14.25 0 0 0-3.16 5.446a1.48 1.48 0 0 0 .536 1.625l1.725 1.272a1.488 1.488 0 0 1 0 2.397L3.167 18.47a1.48 1.48 0 0 0-.535 1.63a14.25 14.25 0 0 0 3.16 5.45a1.46 1.46 0 0 0 1.077.465c.203 0 .404-.042.591-.123l1.955-.859a1.485 1.485 0 0 1 2.065 1.2l.235 2.126a1.48 1.48 0 0 0 1.125 1.27m5.501-1.866a11.6 11.6 0 0 1-4.677 0l-.195-1.74a3.48 3.48 0 0 0-1.14-2.208a3.53 3.53 0 0 0-3.718-.6l-1.606.7a12.2 12.2 0 0 1-2.348-4.05l1.424-1.052a3.488 3.488 0 0 0 0-5.616l-1.421-1.05a12.2 12.2 0 0 1 2.348-4.046l1.6.7a3.45 3.45 0 0 0 1.4.294a3.5 3.5 0 0 0 3.467-3.108l.194-1.747c.774-.15 1.56-.23 2.347-.24c.782.01 1.562.09 2.33.24l.186 1.74a3.48 3.48 0 0 0 1.137 2.216a3.53 3.53 0 0 0 3.727.6l1.6-.7a12.2 12.2 0 0 1 2.35 4.047l-1.423 1.046a3.48 3.48 0 0 0 0 5.62l1.422 1.05A12.3 12.3 0 0 1 25 23.901l-1.6-.7a3.473 3.473 0 0 0-4.866 2.81z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fluent--alert-24-regular {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.25 1.25 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5M13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145zM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.003-.225A5.99 5.99 0 0 0 12 3.496'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Ensure the map tiles look clean and modern */
.leaflet-container {
    background: #F5F5F5 !important;
}

/* Style for the Cluster Cards to look like Image 2 */
.cluster-card {
    background: rgba(15, 23, 42, 0.9) !important; /* Dark slate for contrast */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    pointer-events: all; /* Re-enable clicks on the cards */
    transition: transform 0.2s ease;
}

.cluster-card:hover {
    transform: translateY(-5px);
    border-color: #00d084 !important;
}

/* Customizing the Mantine inputs for a cleaner look */
.mantine-TextInput-input, .mantine-NumberInput-input, .mantine-Select-input {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
}

/* Add to custom.css */
.cluster-card-btn {
    transition: transform 0.2s ease;
}

.cluster-card-btn:hover {
    transform: translateY(-8px);
}

.cluster-card-btn:active {
    transform: translateY(-2px);
}

/* Optional: Subtle glow for the teal badge */
.mantine-Badge-filled[data-color="teal"] {
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
}

/* Independent scrollbar for the right control panel */
.right-panel-scroll::-webkit-scrollbar {
    width: 6px;
}
.right-panel-scroll::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

/* Scaling fonts globally based on common screen sizes */
@media screen and (max-width: 1366px) {
    /* 13" Laptops */
    :root { font-size: 13px; }
    .cluster-card-padding { padding: 12px !important; }
}

@media screen and (min-width: 1367px) and (max-width: 1920px) {
    /* Standard 1080p Monitors */
    :root { font-size: 15px; }
}

@media screen and (min-width: 1921px) {
    /* Ultrawide / 4K Monitors */
    :root { font-size: 18px; }
}

/* Fix for Sparkline visibility */
.mantine-Sparkline-root {
    width: 100% !important;
}

/* --- CUSTOM DARK TOOLTIP --- */
/* Tighten the popup padding so the inner Div controls the space */
.leaflet-popup-content {
    margin: 8px 12px !important;
    width: auto !important;
}

/* Ensure the custom link looks like a button-lite */
.custom-popup-link {
    color: #00d084;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.custom-popup-link:hover {
    opacity: 0.8;
}

/* Make the Tooltip even more minimal */
.leaflet-tooltip-custom {
    font-size: 16px !important;
    color: white;
    padding: 2px 8px !important;
    background: rgba(31, 41, 55, 1) !important;
    border: 2px solid rgba(255,255,255,0.1) !important;
}

/* Removes the default small triangle pointing to the marker */
.leaflet-tooltip-left::before, .leaflet-tooltip-right::before {
    display: none !important;
}

/* --- CUSTOM DARK POPUP --- */
.leaflet-popup-content-wrapper {
    background: rgba(45, 84, 99, 0.8) !important; /* Dark slate */
    color: white !important;
    border-radius: 12px !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 208, 132, 0.4) !important; /* Subtle green accent border */
}

/* Links inside popups */
.custom-popup-link {
    color: #00d084 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.custom-popup-link:hover {
    border-bottom: 1px solid #00d084;
}

.scrollable-panel {
    height: 100%;
    overflow-y: auto; /* Enables vertical scrolling only here */
}

/* GENERAL PAGE PARTS HOSPITAL */

/* Page Background */
.subpage-container {
    background-color: #F8F9FA;
    min-height: 100vh;
    padding: 2rem;
}

/* Card Styling to match Image 2da627 */
.custom-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E9ECEF !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Typography */
.card-title-text {
    color: #063931; /* Deep teal from the bottom of image_2da627 */
    font-weight: 700;
    font-size: 1.25rem;
}

.metric-value {
    color: #333333;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: -1px;
}

.trend-text {
    font-size: 0.9rem;
    font-weight: 600;
}

.kpi-value {
    color: #1A1B1E;
    font-weight: 800;
    line-height: 1.1;
    margin-top: -2px; /* Pull text closer to the 'BELEGT' label */
}

.kpi-title {
    color: #063931; /* Your deep teal from image_2da627 */
    font-size: 0.8rem;
    font-weight: 700;
}