/* =====================================================
   Tunnel Manager – Strukturelles Basis-CSS
   Filepath: static/css/styles.css

   Wird immer geladen, unabhängig vom aktiven Theme.
   Enthält NUR strukturelle/funktionale Stile ohne
   Farben, Hintergründe oder visuelle Effekte.
   Das aktive Theme (static/themes/<name>/theme.css)
   überschreibt diese Werte mit seinen Farb- und
   Glassmorphism-Definitionen.
   ===================================================== */

/* -------------------------------------------------------
   Reset
   ------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------
   Strukturelle Layout-Variablen
   (können vom Theme überschrieben werden)
   ------------------------------------------------------- */
:root {
    --sidebar-width: 210px;
    --sidebar-collapsed-width: 60px;
    --header-height: 60px;
    --footer-height: 46px;
}

/* -------------------------------------------------------
   Body – Flex-Spalten-Layout
   ------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -------------------------------------------------------
   Strukturelle Flex-Verhalten der Blöcke
   ------------------------------------------------------- */
header#site-header {
    flex-shrink: 0;
    position: relative;
}

nav#breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
}

footer#site-footer {
    flex-shrink: 0;
}

/* -------------------------------------------------------
   Site-Wrapper: Sidebar + Hauptbereich nebeneinander
   ------------------------------------------------------- */
.site-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* -------------------------------------------------------
   Sidebar – Strukturelles Verhalten
   ------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .menu-text {
    display: none;
}

.sidebar.collapsed .toggle-arrow {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0 0 16px 0;
}

.sidebar.collapsed .nav-menu > li > a {
    justify-content: center;
    padding: 12px 0;
}

.sidebar-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* -------------------------------------------------------
   Navigationsmenü – Strukturell
   ------------------------------------------------------- */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.nav-menu li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

/* -------------------------------------------------------
   Hauptbereich
   ------------------------------------------------------- */
main.site-main {
    flex: 1;
    overflow-y: auto;
}

/* -------------------------------------------------------
   Toast-Benachrichtigungen
   (visuelles Styling hier, damit Toasts auch ohne
    Theme korrekt dargestellt werden)
   ------------------------------------------------------- */
#tm-toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 320px;
    max-width: calc(100vw - 2.5rem);
    pointer-events: none;
}

.tm-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: .4rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    font-size: .875rem;
    line-height: 1.4;
    pointer-events: all;
    animation: tmToastIn .25s ease;
    transition: opacity .3s ease, transform .3s ease;
}

.tm-toast.tm-toast-hiding {
    opacity: 0;
    transform: translateX(30px);
}

@keyframes tmToastIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tm-toast-msg {
    flex: 1;
}

.tm-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    opacity: .75;
    flex-shrink: 0;
}

.tm-toast-close:hover {
    opacity: 1;
}

.tm-toast-danger {
    background: #b91c1c;
    color: #fff;
}

.tm-toast-danger .tm-toast-close {
    color: #fff;
}

.tm-toast-warning {
    background: #d97706;
    color: #111;
}

.tm-toast-warning .tm-toast-close {
    color: #111;
}

.tm-toast-info {
    background: #38bdf8;
    color: #0c2a3a;
}

.tm-toast-info .tm-toast-close {
    color: #0c2a3a;
}

.tm-toast-success {
    background: #15803d;
    color: #fbbf24;
}

.tm-toast-success .tm-toast-close {
    color: #fbbf24;
}