body {
    font-family: 'Segoe UI', 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    letter-spacing: 0.01em;
    transition: background 0.3s;
}

:root{
    /* Primary theme */
    --primary: #1976d2; /* blue */
    --primary-600: #1565c0;
    --primary-700: #0f4f8a;
    --accent: #ffd600;
    /* Darker global theme: deeper background and panels */
    --bg: #05060a; /* page background */
    --panel: #0a0d11; /* panel/card background */
    --muted: #8fa6c6;
    --text: #dfeefe; /* slightly less bright than before */
    --border: rgba(255,255,255,0.03);
}
 
h1, h2, h3, h4 {
    color: var(--heading) ;
    text-shadow: none;
    letter-spacing: 0.6px;
    font-weight: 700;
}

nav {
    background: #1a237e;
    box-shadow: 0 2px 8px 0 rgba(21,101,192,0.08);
    border-bottom: 2px solid #1976d2;
}

nav,
nav * {
    color: #fff !important;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.13);
    letter-spacing: 0.02em;
}

/* Buttons und Links im Nav-Balken bei Hover */
nav a:hover,
nav .button-like:hover,
nav .dropdown-content a:hover {
    color: #ffd600 !important;
    background: #1565c0 !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* Dropdown-Menü: dark mode friendly */
nav .dropdown-content {
    color: #cfe8ff !important;
    background: #232c3b !important;
    text-shadow: none;
    border-color: #26304a !important;
}


nav .group .dropdown-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
    transition-delay: 0s, 0.5s; /* 0.5s Verzögerung beim Ausblenden */
}

nav .group:hover .dropdown-content,
nav .group:focus-within .dropdown-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block;
    transition-delay: 0s, 0s;
}

/* Optional: fallback für display */
nav .group:not(:hover):not(:focus-within) .dropdown-content {
    transition-delay: 0.5s, 0s;
}

.button-like {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(90deg,var(--primary) 0%, var(--primary-600) 100%);
    border: 1px solid rgba(0,0,0,0.12);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.button-like:hover { transform: translateY(-3px); filter: brightness(1.06); }
.btn-primary {
    background: linear-gradient(90deg,var(--primary) 0%, var(--primary-600) 100%);
    color: #fff;
    padding: 0.52rem 1.05rem;
    border-radius: 0.6rem;
    border: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,0.55); }
.dropdown-content a {
    color: #1565c0;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid #e3eaf2;
    font-size: 1rem;
}

.dropdown-content a:hover {
    background: #e3eaf2;
    color: #0d47a1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

.button-like {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 1.5px solid #1976d2;
    border-radius: 0.7rem;
    color: #fff;
    background: linear-gradient(90deg, #1976d2 70%, #42a5f5 100%);
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    font-weight: 500;
    box-shadow: 0 1px 6px rgba(21,101,192,0.08);
    letter-spacing: 0.2px;
    text-shadow: none;
    font-size: 1rem;
}
.button-like:hover {
    background: #1565c0;
    color: #fff;
    box-shadow: 0 2px 12px rgba(21,101,192,0.15);
    cursor: pointer;
    border-color: #0d47a1;
    transform: translateY(-2px) scale(1.03);
}

input, select, textarea {
    /* matte inputs: slightly lighter than panel for contrast */
    background: var(--panel);
    border: 1.5px solid rgba(80,90,110,0.12);
    color: var(--text);
    border-radius: 0.5rem;
    padding: 0.6rem;
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
    transition: border 0.2s, box-shadow 0.2s;
    font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
    border: 1.5px solid #1565c0;
    outline: none;
    box-shadow: 0 0 0 2px #90caf9;
}

::-webkit-scrollbar {
    width: 8px;
    background: #e3eaf2;
}
::-webkit-scrollbar-thumb {
    background: #1976d2;
    border-radius: 8px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px);}
    to { opacity: 1; transform: translateY(0);}
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(33,150,243,0.5);}
    70% { box-shadow: 0 0 0 10px rgba(33,150,243,0);}
    100% { box-shadow: 0 0 0 0 rgba(33,150,243,0);}
}

.card {
    /* matte card surface */
    background: var(--panel);
    border-radius: 0.7rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55);
    border: 1px solid rgba(80,90,110,0.12);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    transition: transform 0.15s;
}
.card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 24px rgba(21,101,192,0.13);
}

.icon {
    color: #1976d2;
    font-size: 1.5rem;
    vertical-align: middle;
    margin-right: 0.4rem;
    transition: color 0.2s;
}
.icon:hover {
    color: #1565c0;
}

.table th, .table td {
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding: 0.6rem;
    color: var(--text);
    background: var(--panel);
}

a {
    color: #1976d2;
    transition: color 0.2s;
    text-decoration: none;
}
a:hover {
    color: #1565c0;
    text-decoration: underline;
}

/* Dark mode enforced globally (previously scoped under .darkmode) */
body {
    background: var(--bg) !important;
    color: var(--text) !important;
}
.tab-content,
.card,
.bg-white,
.bg-blue-50,
.bg-yellow-50,
.bg-gray-50 {
    background: var(--panel) !important;
    color: var(--text) !important;
    border-color: var(--bg) !important;
}
input,
select,
textarea {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1.5px solid rgba(80,100,140,0.12) !important;
}
input:focus,
select:focus,
textarea:focus {
    border: 1.5px solid #3b83c6 !important;
    box-shadow: 0 0 0 2px rgba(59,131,198,0.06) !important;
}
.table th,
.table td {
    color: var(--text) !important;
    background: var(--panel) !important;
}
hr,
.border-blue-200 {
    border-color: var(--bg) !important;
}
nav {
    background: linear-gradient(180deg,#061222 0%, #071226 100%) !important;
    border-bottom: 2px solid rgba(20,40,60,0.6) !important;
}
body, body * { color: var(--text) !important; }
a { color: var(--primary) !important; }
a:hover { color: var(--accent) !important; }

/* Cards and panels use panel color */
.card, .tab-content { background: var(--panel) !important; border-color: var(--border) !important; }
.card { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }

/* Tabs: hide non-active tab contents */
.tab-content {
    display: none !important;
    animation: none;
}
.tab-content.active {
    display: block !important;
    animation: fadeIn 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* File-tile tweaks for official look */
.file-tile { border-radius: 0.75rem !important; }
.file-tile .file-name { font-weight: 600; color: var(--text) !important; }

/* Stronger headings */
h1, h2, h3, h4 { color: #cfe8ff !important; }

/* Styles moved from inline <style> in welcome.php */
.leaflet-draw-toolbar-top {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}
#draw-toggle {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1001;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(21,101,192,0.18);
    transition: background 0.2s;
}
#draw-toggle.active {
    background: #ffb300;
    color: #232c3b;
}

#floating-notification {
    position: fixed;
    top: 2rem;
    right: -400px;
    min-width: 260px;
    max-width: 350px;
    background: linear-gradient(90deg, #1976d2 80%, #42a5f5 100%);
    color: #fff;
    padding: 1.2rem 2rem 1.2rem 1.2rem;
    border-radius: 1rem 0.7rem 0.7rem 1rem;
    box-shadow: 0 8px 32px rgba(21,101,192,0.18);
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 9999;
    opacity: 0.98;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 6px solid #ffb300;
    transition: right 0.7s cubic-bezier(.4,2,.6,1), opacity 0.3s;
}
#floating-notification.show {
    right: 2rem;
}
#floating-notification .icon {
    font-size: 2rem;
    color: #ffb300;
    flex-shrink: 0;
    animation: bellshake 0.7s;
}
@keyframes bellshake {
    0% { transform: rotate(0deg);} 
    20% { transform: rotate(-15deg);} 
    40% { transform: rotate(10deg);} 
    60% { transform: rotate(-8deg);} 
    80% { transform: rotate(6deg);} 
    100% { transform: rotate(0deg);} 
}

/* Flash notifications (moved from inline) */
.flash {
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    z-index: 9999;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    color: #222;
}
.flash-success { background: #d4edda; }
.flash-error { background: #ffbaba; }

/* Map and info panel */
.map-container { height: 70vh; min-width: 0; }
.map-inner { width: 100%; height: 100%; }
.info-panel { min-height: 220px; }

/* File/folder name wrapping */
.file-name { word-break: break-all; max-width: 140px; display: block; }
.folder-name { word-break: break-all; max-width: 120px; display: block; }

/* Preview iframe */
.preview-iframe { height: 80vh; border: 0; }

/* Final enforced dark overrides (placed at end so they win over earlier white rules) */
nav .dropdown-content,
.dropdown-content,
.card,
.tab-content,
.tile,
.tile-yellow,
.card-soft {
    background: #232c3b !important;
    color: #f4f8fb !important;
    border-color: #26304a !important;
}

.button-like,
.btn-full,
.btn-primary,
.btn-danger,
.btn-success,
.icon-btn {
    background: #2b3440 !important; /* slightly lighter than panels */
    color: #f4f8fb !important;
    border-color: #2f3a4a !important;
}

.button-like:hover,
.btn-full:hover,
.btn-primary:hover,
.btn-danger:hover,
.btn-success:hover,
.icon-btn:hover {
    background: #38424e !important;
    color: #ffffff !important;
}

/* Dropdown links contrast */
.dropdown-content a {
    color: #cfe8ff !important;
}
.dropdown-content a:hover {
    background: #2e3946 !important;
    color: #fff !important;
}

/* Ensure flash notifications remain readable */
.flash-success { background: rgba(46,125,50,0.12) !important; color: #dff6e1 !important; }
.flash-error { background: rgba(229,83,83,0.12) !important; color: #ffdede !important; }
.form-input {
    background: #374151; /* gray-700 */
    color: #ffffff;
    padding: 0.5rem;
    border-radius: 0.375rem;
    width: 100%;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66,165,245,0.12);
}
.btn-full {
    background: #1976d2;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.375rem;
    width: 100%;
    border: none;
    cursor: pointer;
}
.btn-full:hover { background:#1565c0; }
.btn-danger {
    background:#e53935;
    color:#fff;
    padding:0.5rem;
    border-radius:0.375rem;
    border:none;
    cursor:pointer;
}
.btn-success {
    background:#2e7d32;
    color:#fff;
    padding:0.5rem;
    border-radius:0.375rem;
    border:none;
    cursor:pointer;
}

.pacifico-heading { font-family: 'Pacifico', 'Comic Sans MS', cursive; font-size: 1.3rem; letter-spacing: 2px; }

/* Consolidated component classes to reduce Tailwind duplication */
.button-like {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(90deg,var(--primary) 0%, var(--primary-600) 100%);
    border: 1px solid rgba(10,70,140,0.25);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.button-like:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }

.btn-primary {
    background: #1976d2;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(21,101,192,0.08);
    transition: background .18s ease, transform .05s ease;
}
.btn-primary:hover { background: #1565c0; }
.btn-primary.btn-lg { padding: 0.6rem 1.25rem; }

.btn-full {
    background: linear-gradient(90deg,var(--primary) 0%, var(--primary-600) 100%);
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.375rem;
    width: 100%;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.btn-full:hover { background: #1565c0; }
.btn-danger {
    background:#e53935;
    color:#fff;
    padding:0.5rem;
    border-radius:0.375rem;
    border:none;
    cursor:pointer;
}
.btn-success {
    /* success uses a desaturated green but can remain as accent */
    background:#2e7d32;
    color:#fff;
    padding:0.5rem;
    border-radius:0.375rem;
    border:none;
    cursor:pointer;
}
    
.tile:hover { background: rgba(255,255,255,0.03); }
.tile-yellow { background: rgba(255,214,0,0.06); border-color: rgba(255,214,0,0.12); }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1976d2;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(21,101,192,0.08);
    border: none;
    cursor: pointer;
    /* Start hidden and slightly lifted for a pop-in effect */
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
    transition: background .12s ease, transform .12s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
    /* Ensure icon buttons (preview/delete) sit above the tile link when visible */
    z-index: 60;
    pointer-events: none; /* disabled until visible to avoid accidental clicks */
}
.icon-btn:hover { background: #1565c0; }
.danger-icon-btn { background: #e53935; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(-6px) scale(0.95); transition: background .12s ease, transform .12s cubic-bezier(.2,.8,.2,1), opacity .15s ease; }
.danger-icon-btn:hover { background: #c62828; }

/* Show icons when hovering the file/group container */
.group:hover .icon-btn,
.group:focus-within .icon-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.group:hover .danger-icon-btn,
.group:focus-within .danger-icon-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Prevent filename text colliding with the top-left / top-right icons */
.file-tile {
    /* increase top padding to make room for the icon row */
    padding-top: 2.5rem !important; /* ensures icons don't overlap the content */
}
.file-tile .file-name {
    /* leave horizontal breathing room so centered names don't collide with left/right icons */
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Small utilities to keep semantics */
.map-container { height: 70vh; min-width: 0; }
.map-inner { width: 100%; height: 100%; }
.info-panel { min-height: 220px; }
.file-name { word-break: break-all; max-width: 140px; display: block; }
.folder-name { word-break: break-all; max-width: 120px; display: block; }
.preview-iframe { height: 80vh; border: 0; }

/* Ultimate EOF override to guarantee dark button backgrounds in Darkmode */
body .button-like,
body .btn-full,
body .btn-primary,
body .btn-danger,
body .btn-success,
body .icon-btn {
    background: #2b3440 !important;
    color: #f4f8fb !important;
    border-color: #2f3a4a !important;
}
body .button-like,
body .btn-full,
body .btn-primary,
body .btn-success,
body .btn-full,
body .icon-btn {
    /* Force blue buttons in dark mode */
    background: linear-gradient(90deg,var(--primary) 0%, var(--primary-600) 100%) !important;
    color: #fff !important;
    border-color: rgba(10,70,140,0.25) !important;
}
body .button-like:hover,
body .btn-full:hover,
body .btn-primary:hover,
body .btn-success:hover,
body .btn-full:hover,
body .icon-btn:hover {
    background: #1565c0 !important;
    color: #ffffff !important;
}
.tile .ri-folder-2-line.text-red-500,
.tile .ri-folder-2-fill.personalakten,
.tile .ri-folder-2-line.personalakten {
    color: #ff6b6b !important; /* Personalakten red */
}

/* Specific class for the Personalakten folder (also applied server-side) */
.folder-personal .ri-folder-2-fill,
.folder-personal .ri-folder-2-line {
    color: #ff6b6b !important;
}

/* Personalakten: force folder names to one line with ellipsis */
.in-personalakten .folder-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px; /* keep folders compact */
    display: block;
}

/* File tiles: make files 'pop' with subtle elevated card and accent icon color */
.file-tile {
    background: linear-gradient(180deg, rgba(40,48,58,0.75), rgba(35,40,51,0.85)) !important;
    border: 1px solid rgba(80,90,110,0.18) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease, filter 180ms ease;
    /* provide more vertical room for long filenames */
    padding-top: 2.5rem !important; /* keeps room for icons */
    padding-bottom: 1rem !important;
    min-height: 8rem !important;
}

/* Display full filenames: allow wrapping across multiple lines */
.file-name.truncated {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
    word-break: break-word; /* allow sensible breaks so the whole name is visible */
    line-height: 1.15;
}
.file-name.truncated:hover {
    text-decoration: none; /* keep clean look */
}

/* Ensure wrapped names center nicely inside tiles */
.file-tile .file-name.truncated {
    display: block;
    width: 100%;
    text-align: center;
}

/* Style for the creation date shown under filenames (especially Personalakten) */
.file-tile .text-xs {
    display: block;
    margin-top: 0.4rem;
    color: #9fb0c9 !important;
}

/* Responsive grid: use auto-fit so tiles occupy full width when needed (long filenames) */
.responsive-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem; /* matches existing gap-6 */
}

/* If filenames are very long, prefer a single column layout on small viewports */
@media (max-width: 640px) {
    .responsive-file-grid {
        grid-template-columns: 1fr;
    }
    .file-tile {
        min-height: auto !important;
        padding-top: 2rem !important;
    }
}

/* Modern toolbar */
.doc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.doc-toolbar .flex-col { display:flex; flex-direction:column; }
.search-input {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    min-width: 260px;
}
.search-input:focus { outline: none; box-shadow: 0 6px 18px rgba(21,101,192,0.08); }
.sort-select {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
}
.view-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    cursor: pointer;
}
.view-toggle.active, .view-toggle:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.04); }

/* Card-style file tiles */
.tile.file-tile {
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
    text-align: center; /* center icon and text by default */
}
.tile.file-tile:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,0.35); }
.tile.file-tile i { display:block; margin: 0 auto 0.6rem auto; font-size: 2.4rem; }

/* List view adjustments */
.list-view .responsive-file-grid {
    display: block;
}
.list-view .file-tile {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem !important;
    min-height: auto !important;
}
.list-view .file-tile i { font-size: 2.2rem !important; margin: 0; }
.list-view .file-tile .w-full { text-align: left; }
.list-view .file-tile .file-name { font-size: 1rem; }
.list-view .file-tile .text-xs { margin-top: 0.25rem; }

/* Make icons subtle and consistent */
.icon-btn { width:34px; height:34px; }
.danger-icon-btn { width:34px; height:34px; }

/* Small screens: toolbar stacks */
@media (max-width: 640px) {
    .doc-toolbar { flex-direction: column; align-items: stretch; }
    .search-input { width: 100%; }
}
.file-tile .ri-file-3-line,
.file-tile .ri-image-2-line,
.file-tile .ri-file-pdf-2-line,
.file-tile .ri-file-word-2-line,
.file-tile .ri-file-excel-2-line,
.file-tile .ri-folder-zip-line {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

.file-tile:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55) !important;
    filter: saturate(1.08) contrast(1.03) !important;
}
.file-tile:active { transform: translateY(-4px) scale(0.995) !important; }

/* Folder icon hover: no shimmer, keep lift and reduced-motion fallback */
.tile { position: relative; }

.tile .ri-folder-2-fill,
.tile .ri-folder-2-line {
    position: relative;
    display: inline-block;
    z-index: 1;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
}

/* small lift + color brighten on hover (no shimmer) */
.tile:hover .ri-folder-2-fill,
.tile:hover .ri-folder-2-line {
    transform: translateY(-4px) scale(1.06);
    filter: drop-shadow(0 6px 14px rgba(90,150,255,0.14));
    color: #a8d4ff !important;
}

/* Respect users who prefer reduced motion: disable transform */
@media (prefers-reduced-motion: reduce) {
    .tile .ri-folder-2-fill,
    .tile .ri-folder-2-line {
        transition: none !important;
    }
    .tile:hover .ri-folder-2-fill,
    .tile:hover .ri-folder-2-line {
        transform: none !important;
        filter: none !important;
    }
}

/* Muted/matte overall adjustments */

/* Matte overrides: force pale components to use desaturated dark surfaces */
.matte-overrides .card,
.matte-overrides .card-soft,
.matte-overrides .tile,
.matte-overrides .tile-yellow,
.matte-overrides .table th,
.matte-overrides .table td,
.matte-overrides .bg-white,
.matte-overrides .bg-blue-50,
.matte-overrides .bg-yellow-50,
.matte-overrides .bg-gray-50 {
    background: var(--panel) !important;
    color: var(--text) !important;
    border-color: rgba(255,255,255,0.03) !important;
}

.matte-overrides .card-soft { background: rgba(255,255,255,0.02) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important; }
.matte-overrides .tile { background: var(--panel) !important; border-color: var(--border) !important; }
.matte-overrides .tile-yellow { background: rgba(255,214,0,0.06) !important; border-color: rgba(255,214,0,0.12) !important; }
.matte-overrides .table th, .matte-overrides .table td { background: var(--panel) !important; color: var(--text) !important; }

body, body * {
    transition: none !important;
}
/* Replace bright blues/yellows with desaturated variants */
.text-blue-500, .text-blue-700, .text-blue-900 { color: #7fb0e8 !important; }
.text-yellow-500, .text-yellow-600, .text-yellow-700 { color: #c7a43a !important; }
.bg-red-600 { background: #a83b3b !important; }
.bg-blue-600 { background: #2f6fa8 !important; }
.border-blue-200 { border-color: #38424e !important; }

/* File name and meta color tweaks for contrast */
.file-tile .file-name { color: #e6eef9 !important; }
.file-tile .text-xs { color: #9fb0c9 !important; }

/* Strong enforcement: hide all tab contents unless they have the 'active' class */
html body .tab-content:not(.active) {
    display: none !important;
}
html body .tab-content.active {
    display: block !important;
}

/* Make vehicle/info panels darker for better contrast in the "Fahrzeuginformationen" tab */
#sites .card,
.tab-content#sites .card {
    background: #070a0d00 !important; /* deeper, matte panel */
    border-color: rgba(255,255,255,0.02) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.75) !important;
}

/* Info panels (map sidebar, legends) slightly darker and flatter */
.info-panel {
    background: linear-gradient(180deg, rgba(10,16,22,0.9), rgba(8,12,16,0.85));
    border: 1px solid rgba(255,255,255,0.03);
    color: var(--text) !important;
}

/* Login background image: keep centered, cover, and add dark overlay for readability */
.login-bg {
    background: linear-gradient(180deg, rgba(4,6,8,0.6), rgba(4,6,8,0.8)), url('../auswahl/sonstiges/img/login_background.jpeg') center center/cover no-repeat !important;
    background-attachment: fixed;
}

.login-bg .login-card {
    background: linear-gradient(180deg, rgba(20,26,34,0.85), rgba(13,16,20,0.9)) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Main page background uses same hero image as login but subtler overlay */
.main-bg {
    background: linear-gradient(180deg, rgba(6,8,10,0.6), rgba(8,10,12,0.85)), url('sonstiges/img/bg_2.png') center center/cover no-repeat !important;
    background-attachment: fixed;
}

.main-bg .card,
.main-bg .tab-content {
    background: linear-gradient(180deg, rgba(10,14,20,0.85), rgba(8,10,12,0.9)) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Make inner panels/boxes transparent on the main page so the hero image is visible */
.main-bg .card,
.main-bg .tab-content,
.main-bg .bg-white,
.main-bg .card-soft,
.main-bg .tile,
.main-bg .file-tile,
.main-bg .card-lg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.main-bg input.bg-white,
.main-bg .bg-blue-50,
.main-bg .bg-gray-50,
.main-bg .bg-yellow-50 {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* More targeted fixes for remaining opaque elements on the main page */
.main-bg .matte-overrides .card-soft,
.main-bg .matte-overrides .tile,
.main-bg .matte-overrides .tile-yellow,
.main-bg .matte-overrides .table th,
.main-bg .matte-overrides .table td,
.main-bg .flash-success,
.main-bg .flash-error,
.main-bg .tile:hover,
.main-bg .file-tile {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
}

/* Keep buttons intact: re-apply button backgrounds if needed */
/* Buttons keep their existing styles; no overrides here to avoid empty rulesets */

/* Keep the panel/background for Einsatzprotokolle (#fw_doku) and related file management boxes */
.main-bg #fw_doku > .max-w-3xl > .bg-white,
.main-bg #fw_doku .bg-white.rounded-lg,
.main-bg #fw_doku .rounded-lg.shadow,
.main-bg #fw_doku .card,
.main-bg #fw_doku .tile,
.main-bg #fw_doku .file-tile {
    background: var(--panel) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 26px rgba(0,0,0,0.55) !important;
    color: var(--text) !important;
}

/* Dateiverwaltung: keep tiles, file-list and form boxes with panel backgrounds */
.main-bg #documents .max-w-4xl,
.main-bg #documents .tile,
.main-bg #documents .file-tile,
.main-bg #documents .bg-white,
.main-bg #intranet_verwaltung_datei_erstellen .max-w-lg,
.main-bg #intranet_verwaltung_datei_erstellen .bg-white,
.main-bg #intranet_verwaltung_datei_erstellen .tile {
    background: var(--panel) !important;
    border-color: var(--border) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
    color: var(--text) !important;
}


/* Force individual page elements that use pale utility classes to the dark theme
   This keeps templates untouched while making page backgrounds dark */
.container .bg-white,
.container .bg-gray-50,
.container input.bg-white,
.container input[class*="bg-"],
.container .border-blue-200,
.container .text-gray-600,
.container .shadow {
    background: var(--panel) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Specific override for elements using inline Tailwind-like bg utilities */
[class*="bg-[#"], [class*="bg-\#"] {
    background: var(--panel) !important;
    color: var(--text) !important;
}