/* =====================================================
   Hydranten Manager v0.6.1
   static/style.css
===================================================== */

:root{

    --sidebar-width:260px;

    --primary:#0d6efd;
    --primary-dark:#0a58ca;

    --success:#198754;
    --danger:#dc3545;

    --background:#f5f7fb;

    --card-radius:16px;

}

/* -------------------------------------------------- */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:var(--background);
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
    color:#222;

}

#offline-banner {
    margin-bottom: 1rem;
}

#offline-banner .btn {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

#toast-container .toast {
    min-width: 240px;
    max-width: 320px;
}

#install-button {
    white-space: nowrap;
}

/* -------------------------------------------------- */
/* Layout */
/* -------------------------------------------------- */

.wrapper{

    display:flex;
    min-height:100vh;

}

/* -------------------------------------------------- */
/* Sidebar */
/* -------------------------------------------------- */

.sidebar{

    width:var(--sidebar-width);

    background:#1e293b;

    color:white;

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    overflow-y:auto;

    box-shadow:0 0 15px rgba(0,0,0,.15);

}

.sidebar-header{

    padding:28px 20px;

    font-size:24px;

    font-weight:bold;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-header i{

    margin-right:10px;

    color:#ff4444;

}

.sidebar-menu{

    list-style:none;

    margin:0;
    padding:15px 0;

}

.sidebar-menu li{

    margin:0;

}

.sidebar-menu a{

    display:block;

    padding:15px 25px;

    color:#d7dde7;

    text-decoration:none;

    transition:.25s;

    font-size:16px;

}

.sidebar-menu a:hover{

    background:#334155;

    color:white;

    padding-left:32px;

}

.sidebar-menu i{

    width:24px;

    margin-right:10px;

}

/* -------------------------------------------------- */
/* Content */
/* -------------------------------------------------- */

.content{

    margin-left:var(--sidebar-width);

    width:100%;

}

/* -------------------------------------------------- */

.topbar{

    background:white;

    padding:20px 35px;

    border-bottom:1px solid #dee2e6;

    box-shadow:0 2px 5px rgba(0,0,0,.04);

}

.page-content{

    padding:30px;

}

/* -------------------------------------------------- */
/* Dashboard */
/* -------------------------------------------------- */

.dashboard-card{

    border-radius:var(--card-radius);

    transition:.2s;

}

.dashboard-card:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

/* -------------------------------------------------- */
/* Karten */
/* -------------------------------------------------- */

.card{

    border-radius:var(--card-radius);

}

.card-header{

    font-weight:600;

}

/* -------------------------------------------------- */
/* Tabellen */
/* -------------------------------------------------- */

.table{

    vertical-align:middle;

}

.table th{

    white-space:nowrap;

}

.table-hover tbody tr:hover{
    
    background:#eef6ff;
    
}

.photo-thumb{
    width:100%;
    height:auto;
    object-fit:cover;
}

.photo-card{
    border-radius:16px;
    overflow:hidden;
}

/* -------------------------------------------------- */
/* Buttons */
/* -------------------------------------------------- */

.btn{

    border-radius:10px;

}

.btn-primary{

    background:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

}

/* -------------------------------------------------- */
/* Badges */
/* -------------------------------------------------- */

.badge{

    font-size:.85rem;

    padding:8px 12px;

}

/* -------------------------------------------------- */
/* Suchfeld */
/* -------------------------------------------------- */

#suchfeld{

    border-radius:10px;

}

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

@media (max-width:992px){

    .sidebar{

        position:relative;

        width:100%;

        height:auto;

    }

    .content{

        margin-left:0;

    }

    .wrapper{

        flex-direction:column;

    }

    .page-content{

        padding:15px;

    }

}

@media (max-width:768px){

    .topbar{

        padding:15px;

    }

    .dashboard-card{

        margin-bottom:15px;

    }

    .btn{

        width:100%;
        margin-bottom:8px;

    }

}