/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

:root {
    --header-height: 57px;
    --vh: 1vh;
}

/* =============== ZÁKLAD =============== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin-bottom: 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    z-index: 1;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a6a6a6;
    }

/* =============== NAVBAR / HEADER =============== */
.navbar {
    padding: .5rem 1rem;
    margin: 0;
}

.navbar-toggler {
    border: none !important;
    outline: none !important;
    margin: 0;
    padding: 2px;
}

    .navbar-toggler:hover {
        color: black;
        border: 2px solid #ffffff1c !important;
        padding: 0;
    }

.bg-ima {
    background: #25476c;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* =============== LAYOUT KONTEJNER =============== */
#wrapper {
    overflow: hidden;
    height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    min-height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    display: flex;
    flex-direction: row;
}

/* =============== SIDEBAR =============== */
#sidebar-wrapper {
    box-sizing: border-box;
    background: #fff;
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    min-height: calc(var(--vh, 1vh) * 100 - var(--header-height));
}

    #sidebar-wrapper .sidebar-heading {
        padding: .875rem 1.25rem;
        font-size: 1.2rem;
    }

    #sidebar-wrapper .list-group {
        width: 100%;
        flex: 1 1 auto;
        margin-top: 0;
    }

    #sidebar-wrapper .list-group-item {
        background: #fff;
        transition: background 0.2s ease;
    }

        #sidebar-wrapper .list-group-item:hover {
            background: #f8f9fa;
        }

    #sidebar-wrapper .border-top {
        flex-shrink: 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    }

/* Sidebar toggle animace */
#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

/* =============== OBSAH STRÁNKY =============== */
#page-content-wrapper {
    flex: 1;
    min-width: 100vw;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#wrapper > .container-fluid {
    height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    overflow: auto;
    padding: 0 10px;
}

.full-height-scroll {
    min-height: calc(var(--vh, 1vh) * 100 - var(--header-height));
}

/* =============== DESKTOP =============== */
@media (min-width:854px) {
    #sidebar-wrapper {
        position: relative;
        top: 0;
        margin-left: 0;
        width: 20rem;
        z-index: 1;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -20rem;
    }
}

/* =============== MOBIL =============== */
@media (max-width:853px) {
    #sidebar-wrapper {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        margin-left: -100%;
        transition: margin-left 0.3s ease;
        z-index: 1000;
        height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
    }

    #sidebar-wrapper .list-group-item {
        width: 100%;
        display: block;
        border: none;
        border-bottom: 1px solid #e5e5e5;
        border-radius: 0;
        text-align: left;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

        #sidebar-wrapper .list-group-item.ps-5 {
            padding-left: 2rem;
        }

    #sidebar-wrapper .collapse.show .list-group-item {
        background-color: #f8f9fa;
    }

    body.sidebar-open #page-content-wrapper {
        overflow: hidden;
    }

    body.sidebar-open #wrapper > .container-fluid {
        overflow: hidden !important;
    }
}

/* =============== FOOTER SIDEBARU =============== */
#sidebar-wrapper .border-top {
    text-align: center;
    color: #6c757d;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

/* =============== OBECNÉ STYLY =============== */
a { color:#0366d6; text-decoration:none; }
.btn-primary { color:#fff; background-color:#1b6ec2; border-color:#1861ac; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color:#fff; background-color:#1b6ec2; border-color:#1861ac; }
.border-top { border-top:1px solid #e5e5e5; }
.border-bottom { border-bottom:1px solid #e5e5e5; }
.box-shadow { box-shadow:0 .25rem .75rem rgba(0,0,0,.05); }
button.accept-policy { font-size:1rem; line-height:inherit; }
.w-31px { width:31px; }
.select2-container .select2-selection--single .select2-selection__rendered { overflow:visible; }

/* Dekorativní plochy */
.area { background:#25476c; background:-webkit-linear-gradient(to left,#8f94fb,#496686); width:100%; height:100vh; position:fixed; top:0; left:0; }
.circles { padding:0; position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.circles li { position:absolute; border-radius:25%; display:block; list-style:none; width:20px; height:20px; background:rgba(255,255,255,0.2); animation:animate 25s linear infinite; bottom:-150px; }
.circles li:nth-child(1){ left:25%; width:80px; height:80px; animation-delay:0s; }
.circles li:nth-child(2){ left:10%; width:20px; height:20px; animation-delay:2s; animation-duration:12s; }
.circles li:nth-child(3){ left:70%; width:20px; height:20px; animation-delay:4s; }
.circles li:nth-child(4){ left:40%; width:60px; height:60px; animation-delay:0s; animation-duration:18s; }
.circles li:nth-child(5){ left:65%; width:20px; height:20px; animation-delay:0s; }
.circles li:nth-child(6){ left:75%; width:110px; height:110px; animation-delay:3s; }
.circles li:nth-child(7){ left:35%; width:150px; height:150px; animation-delay:7s; }
.circles li:nth-child(8){ left:50%; width:25px; height:25px; animation-delay:15s; animation-duration:45s; }
.circles li:nth-child(9){ left:20%; width:15px; height:15px; animation-delay:2s; animation-duration:35s; }
.circles li:nth-child(10){ left:85%; width:150px; height:150px; animation-delay:0s; animation-duration:11s; }
@keyframes animate { 0% { transform:translateY(0) translateZ(0) rotate(0deg); opacity:1;} 100% { transform:translateY(-1000px) translateZ(0) rotate(720deg); opacity:0;} }

/* Stromy / seznamy */
.tree, .subtree, .tree-item { list-style-type:none; padding-top:5px; padding-bottom:0; }
.subtree { overflow:hidden; transition:all .2s ease-in-out; margin-bottom:0; border-left:2px dotted black; padding-left:0; }
.tree-leading-dots { margin-left:2px; margin-right:5px; border-bottom:2px dotted black; width:20px; height:14px; }
.tree-item { display:flex; align-items:start; }
.td-buttons { white-space:nowrap; width:1px!important; }
td { vertical-align:middle!important; }
.flex-gap-md { gap:0 15px; }
#select-group { min-width:200px; max-width:100%; width:auto; white-space:nowrap; }
.select2-selection--single { min-width:200px; }
.select2-selection__rendered { min-width:200px; }
.select2-container { width:auto!important; }
.justify-items-center { justify-items:center; }
.table-head-styling { padding:1.5rem; border-top-left-radius:10px; border-top-right-radius:10px; background-color:rgba(0,0,0,.05); border:1px solid #dee2e6; }
.tree-head-styling, .tree-filter-panel { position:sticky; z-index:100; }
.tree-head-styling { top:0; background:#F7F5F5; }
.tree-filter-panel { border-bottom:1px solid #dee2e6; background:white; }
.table-custom-styling { border:1px solid #dee2e6; }
.filter-panel { overflow:hidden; max-height:0; transition:all .5s ease; padding:0 0; border-left:1px solid #dee2e6; border-right:1px solid #dee2e6; padding:0rem 1.5rem; }
.filter-panel.show { max-height:600px; height:auto; padding:.5rem 1.5rem; flex:1; }

/* Jednodušší mobilní layout pro slave-simple */
#slave-simple .card { box-shadow:0 1px 3px rgba(0,0,0,.1); }
#slave-simple .card-header { background:#f8f9fa; }
#slave-simple .slave-name { font-weight:600; }
#slave-simple .actions a { margin-right:.35rem; }
#slave-simple .actions a:last-child { margin-right:0; }
#slave-simple .list-group-item { padding:.5rem .75rem; }
#slave-simple .socket-label i { margin-right:.25rem; }
#slave-simple .status .badge { white-space:normal; }
@media (max-width:774px){ #expandAllBtn, #collapseAllBtn { display:none; } .tree-head-styling { flex-wrap:wrap; } #filterPanel { margin-top:0; } #slave-simple .list-group-item { flex-direction:column!important; align-items:flex-start!important; } #slave-simple .list-group-item .socket-meta { width:100%; justify-content:space-between; } }

.nav-link { padding:.5rem 1rem; }
.list-group-item { padding:.75rem 1.25rem; }
.kiosk-group-btn { padding:4px 6px; border-radius:4px; transition:background-color .2s ease; }
.kiosk-group-btn:hover { background-color:rgba(0,0,0,.05); text-decoration:none; }
.tree-wrapper { overflow-x:auto; max-width:100%; }
#kiosk-tree { white-space:nowrap; }
.jstree-proton-large .jstree-node { min-height:40px; line-height:40px; margin-left:40px; min-width:40px; }
.jstree-proton-large .jstree-anchor { line-height:40px; margin:unset; height:40px; }
.jstree-proton-large .jstree-icon { width:40px; height:40px; line-height:40px; }
.jstree-proton-large .jstree-icon:empty { width:40px; height:40px; line-height:40px; }
.jstree-proton-large .jstree-wholerow { height:40px; border-bottom:1px solid lightgrey; border-right:1px solid lightgrey; border-left:1px solid lightgrey; }
.jstree-proton-large > .jstree-no-dots .jstree-open > .jstree-ocl { background-position:-32px 3px!important; }
.jstree-proton-large > .jstree-no-dots .jstree-closed > .jstree-ocl { background-position:0 3px!important; }
.jstree-proton-large .jstree-wholerow-hovered { background:#F7F5F5; border-radius:3px; box-shadow:inset 0 0 1px #F7F5F5; }
.jstree-proton .jstree-wholerow-clicked { background:#F7F5F5; background:linear-gradient(to bottom,#F7F5F5 0%,#F7F5F5 100%); }
.table-group-row { font-weight:bold; }
.jstree-grid-cell { border-right:1px solid #ccc; }
div.jstree-grid-cell-root-slave-tree { border-bottom:1px solid #ccc; }
.jstree-proton-large .jstree-anchor { border-bottom:1px solid #ccc; }

/* Master status */
.card .status-badge { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); }
.card.status-error .status-badge { background:rgba(220,53,69,.08); border-color:rgba(220,53,69,.35); color:var(--bs-danger); }
.card.status-ok .status-badge { background:rgba(25,135,84,.08); border-color:rgba(25,135,84,.35); color:var(--bs-success); }
.status-dot { width:.9rem; height:.9rem; border-radius:50%; background:var(--bs-success); box-shadow:0 0 0 4px rgba(25,135,84,.15); }
.status-error .status-dot { background:var(--bs-danger); box-shadow:0 0 0 4px rgba(220,53,69,.20); animation:status-pulse 1.4s ease-in-out infinite; }
@keyframes status-pulse { 0% { transform:scale(1); box-shadow:0 0 0 4px rgba(220,53,69,.25);} 50% { transform:scale(.9); box-shadow:0 0 0 2px rgba(220,53,69,.35);} 100% { transform:scale(1); box-shadow:0 0 0 4px rgba(220,53,69,.25);} }
.list-group-item:hover { background:rgba(0,123,255,0.1); }

/* Calendar */
#socketCalendar .fc-event { font-size:.70rem; padding:2px 3px; min-height:28px; }
#socketCalendar .fc-event-current { box-shadow:0 0 0 2px rgba(25,135,84,.35); border-radius:4px; }
#socketCalendar .fc-event-past { opacity:.45; filter:saturate(60%); }
#socketCalendar .fc-custom-content { display:flex; flex-direction:column; gap:2px; line-height:1.15; }
#socketCalendar .fc-custom-content .fc-time-range { font-weight:600; font-size:.65rem; letter-spacing:.3px; }
#socketCalendar .fc-custom-content .fc-title-line { font-size:.65rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar-legend { display:inline-block; width:18px; height:18px; border-radius:4px; vertical-align:middle; margin-right:4px; background:#e9ecef; }
.calendar-legend.color-consumption { background:#dc3545; }
.calendar-legend.color-block { background:#ffc107; }
.calendar-legend.color-past { background:#dc354580; }
.past-faded { filter:saturate(60%); }
.ongoing-soft { background:linear-gradient(135deg,#ffffff 0%,#e7f7ef 100%); border-color:#19875455!important; }

/* ==================== Balíčkový výběr ==================== */
.package-grid .package-btn {
    border: 2px solid var(--bs-border-color,#dee2e6);
    background: #fff;
    border-radius: .75rem;
    padding: .9rem 1rem;
    width: 100%;
    text-align: left;
    position: relative;
    transition: .15s;
    cursor: pointer;
    min-height: 120px;
}

.package-grid .package-name {
    font-weight: 600;
    margin-bottom: .25rem;
}

/* ==================== ELEKTŘINA (zelená) ==================== */
.is-electric .package-grid .package-btn:hover {
    border-color: #198754;
    box-shadow: 0 0 0 .15rem rgba(25,135,84,.15);
}

.is-electric .package-grid .package-btn.active {
    border-color: #198754;
    background: #f4fdf7;
    box-shadow: 0 0 0 .15rem rgba(25,135,84,.15);
}

/* Custom karta – elektřina */
.is-electric .package-grid .package-btn.custom {
    background: linear-gradient(135deg, #f5f9f5 0%, #eef6ee 100%);
    border-style: dashed;
    border-color: #6c757d;
}

    .is-electric .package-grid .package-btn.custom:hover {
        border-color: #198754;
        box-shadow: 0 0 0 .15rem rgba(25,135,84,.25);
    }

    .is-electric .package-grid .package-btn.custom.active {
        border-style: solid;
        border-color: #198754;
        background: #f4fdf7;
        box-shadow: 0 0 0 .18rem rgba(25,135,84,.25);
    }

    .is-electric .package-grid .package-btn.custom .badge-custom {
        background: #198754;
        color: #fff;
    }

/* ==================== VODA (modrá) ==================== */
.is-water .package-grid .package-btn:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}

.is-water .package-grid .package-btn.active {
    border-color: #0d6efd;
    background: #f4f8fd;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
}

.is-water .package-grid .package-btn.custom {
    background: linear-gradient(135deg, #f5f9fb 0%, #eef4fb 100%);
    border-style: dashed;
    border-color: #6c757d;
}

    .is-water .package-grid .package-btn.custom:hover {
        border-color: #0d6efd;
        box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
    }

    .is-water .package-grid .package-btn.custom.active {
        border-style: solid;
        border-color: #0d6efd;
        background: #f4f8fd;
        box-shadow: 0 0 0 .18rem rgba(13,110,253,.25);
    }

    .is-water .package-grid .package-btn.custom .badge-custom {
        background: #0d6efd;
        color: #fff;
    }

.is-electric button[type=submit][name=action][value=start] {
    background-color: #198754;
    border-color: #198754;
}

.is-water button[type=submit][name=action][value=start] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.is-readonly {
    background-color: #f8f9fa;
}


/* Hover efekt přímo na button */
.package-btn.is-electric:hover {
    border-color: #198754;
    box-shadow: 0 0 0 .15rem rgba(25,135,84,.15);
}

.package-btn.is-electric.active {
    border-color: #198754;
    background: #f4fdf7;
    box-shadow: 0 0 0 .15rem rgba(25,135,84,.15);
}

.package-btn.is-water:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}

.package-btn.is-water.active {
    border-color: #0d6efd;
    background: #f4f8fd;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
}

.equal-height-row > [class*='col-'] {
    display: flex;
}

.equal-height-row .card {
    display: flex;
    flex-direction: column;
}

.equal-height-row .card-body {
    flex: 1 1 auto;
}


.btn-toggle-sockets .toggle-icon {
    transition: transform .2s ease;
}

.btn-toggle-sockets.collapsed .toggle-icon {
    transform: rotate(180deg);
}

/* Status cell layout */
.sockets-table td.status-cell .status-wrapper {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.sockets-table td.status-cell .status-range {
    line-height: 1;
    display: inline-block;
    padding: 2px 6px;
    border-radius: .25rem;
    background-color: var(--bs-secondary-bg);
    font-weight: 500;
    font-size: .7rem;
    white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .sockets-table td.status-cell .status-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    .sockets-table td.status-cell .badge {
        font-size: .65rem;
    }

    .sockets-table td.status-cell .status-range {
        font-size: .6rem;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    .sockets-table td.actions-cell .btn {
        padding: .25rem .4rem;
    }
}

/* Status color overrides (adjust as needed to match design/system) */
.badge.socket-status-occupied {
    background-color: var(--bs-danger);
}

.badge.socket-status-free {
    background-color: var(--bs-success);
}

.badge.socket-status-blocked {
    background-color: var(--bs-warning);
    color: #000;
}

.badge.socket-status-error {
    background-color: #6c757d;
}

.badge.socket-status-unknown {
    background-color: #343a40;
}