/**
 * ===========================================================================
 * STYLES.CSS - Unified Application Stylesheet (Dark Theme)
 * ===========================================================================
 * 
 * Obsahuje všechny styly aplikace v tmavém designu
 * 
 * ZMĚNY: Zakomentovány nepoužité CSS styly (15 sekcí)
 * 
 * Sekce:
 * 1. CSS Proměnné
 * 2. Základní elementy (Body, Odkazy)
 * 3. Typography & Utility Classes
 * 4. Spacing Utilities (Margin, Padding, Width)
 * 5. Layout (Wrapper & Sidebar)
 * 6. Navigace - Navbar
 * 7. Logo a branding
 * 8. Breadcrumb navigace
 * 9. Menu items
 * 10. Komponenty - Cards/Panels
 * 11. Formulářové prvky
 * 12. Tabulky a Datagrid
 * 13. Tlačítka a Dropdown Menu
 * 14. Bootstrap Overrides
 * 15. Dashboard komponenty
 * 16. Síťové elementy a topologie
 * 17. Stavové indikátory a úrovně
 * 18. RSRP (Signal Quality) indikátory
 * 19. Legendy a popisky
 * 20. Statistiky a trendy
 * 21. Timestamp a refresh komponenty
 * 22. Kalendář a datepicker
 * 23. QoS metriky a panely
 * 24. Heatmap komponenty
 * 25. Grafy
 * 26. Loading overlay a AJAX spinner
 * 27. Úkoly (Tasks)
 * 28. Scheduler Logs
 * 29. Search
 * 30. Pre/Code
 * 31. Modální okna
 * 32. Footer
 * 33. Responzivní úpravy
 * 34. Login styles
 * 35. Flash messages / Alerts
 * 36. MAP COMPONENTS - PIXIJS INTERACTIVE MAP
 *
 * @author Tomáš Zemánek
 * ===========================================================================
 */


/* ===========================================================================
   1. CSS PROMĚNNÉ - DARK THEME
   =========================================================================== */

:root {
    /* === Základní barevná škála === */
    --color-white: #ffffff;
    --color-almost-white: #fefefe;
    --color-off-white: #f7f7f7;
    --color-light-gray: #f8f9fa;
    --color-lighter-gray: #dae0e5;
    --color-very-light-gray: #e2e6ea;
    --color-gray: #6c757d;
    --color-dark-gray: #212529;
    --color-black: #000000;
    --color-light-gray-border: #dfdfdf;

    /* === Odkazy === */
    --aColor: lightgray;
    --aColorHover: white;

    /* === Ikony === */
    --logo-filter: none;
    --faGlobe-color: lightgray;

    /* === Základní layout s gradientem === */
    --background-color: #1a1a2e;
    --background-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    --color: lightgray;
    --title-color: #FFFFFF;

    /* === Navigační lišta === */
    --background-color-navbar: #2a2a3e;
    --background-color-sidebar: #1a1a2e;
    --bgNavbar-bgcolor: #2a2a3e;
    --bgNavbarBrand-color: #81C0DF;
    --navbarLighNav: rgba(255,255,255,.5);
    --navbarBrandText: #ffffff;

    /* === Breadcrumb === */
    --breadcrumb-bgcolor: #2a2a3e;
    --breadcrumbActive-color: #d1d1d1;

    /* === Tlačítka === */
    --btnInfoColor: lightgray;
    --btnNavbar-color: lightgray;
    --btnLight-color: lightgray;
    --btnLight-background-color: #2a2a3e;
    --btnLight-border-color: #3a3a4e;
    --btnLightSelected-color: lightgray;
    --btnLightSelected-background-color: #3a3a4e;
    --btnLightSelected-border-color: #4a4a5e;
    --btnLight-hover-color: #ffffff;
    --btnLight-hover-bgcolor: #3a3a4e;
    --btnLight-hover-bordercolor: #4a4a5e;

    /* === Dashboard === */
    --dashboardText-color: lightgray;
    --dashboardNum-color: lightgray;
    --dashboardCardTitle-color: #cccccc;

    /* === Dropdown menu === */
    --dropdownMenu-color: lightgray;
    --dropdownMenuDisabled-color: lightgray;
    --dropdownMenu-bgcolor: #2a2a3e;
    --dropdownMenuActive-color: lightgray;
    --dropdownMenuActive-background-color: #3a3a4e;

    /* === Karty (Cards) === */
    --card-bgcolor: #2a2a3e;
    --card-border-color: #3a3a4e;
    --cardHeaderInfo: #1f4e5f ; /*#31708f;*/
    --cardHeaderWarning: #ff8c00;
    --cardHeaderAdmin: #3a3a4e;
    --cardHeaderMonitoring: #3f4c5a;
    --cardFooterBackground: rgba(31, 78, 95, 0.2);

    /* === Formulářové prvky === */
    --formControl-color: #BFC9D2;
    --formControl-bgcolor: #1f2937;
    --inputGroupText-background-color: #2a2a3e;

    /* === Heatmap === */
    --color-light-blue: #7093c1;
    --color-medium-blue: #3b7fb1;
    --color-darker-blue: #3a5a80;
    --color-deep-blue: #336080;
    --color-night-blue: #2a4053;
    --heatmap-border-color: #3a3a4e;
    --heatmap-border-left-color: #4a4a5e;
    --heatmap-border-top-color: #5a5a6e;
    --heatmap-cell-bg: #2a2a3e;

    /* === Panely === */
    --panelElementValuer: #fff;

    /* === Datagrid / Tabulky === */
    --datagridBorder: #3a3a4e;
    --datagridTable-background-color: #f9f9f9;
    --textMuted: lightgray;
    --trOdd: rgba(255,255,255,.05);

    /* === Modální okna === */
    --close-color: white;

    /* === Calendar === */
    --calHeatmap-border: #3a3a4e;

    /* === Footer === */
    --footer-bgcolor: rgba(42, 42, 62, 0.8);
    --footer-border-color: #3a3a4e;
    --text-muted: #adb5bd;

    /* === Síťové elementy === */
    --network-element: white;
}


/* ===========================================================================
   2. ZÁKLADNÍ ELEMENTY
   =========================================================================== */

/* === Body a základní stylizace === */
body {
    background: var(--background-gradient) !important;
    background-attachment: fixed;
    color: var(--color);
}

/* === Odkazy === */
a {
    color: var(--aColor);
}

a:hover {
    color: var(--aColorHover);
}


/* ===========================================================================
   3. TYPOGRAPHY & UTILITY CLASSES
   =========================================================================== */

/* === Nadpisy === */
.title {
    color: var(--title-color);
    font-weight: lighter;
    margin: 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 1.5em;
    white-space: nowrap;
}

.title i {
    color: var(--title-color);
}

.navbar-brand-text {
    color: var(--title-color);
    font-weight: lighter;
    font-size: 1em;
}

.devel {
    color: #00f080;
}

/* === Text utilities === */
.text-muted {
    color: var(--textMuted) !important;
}

.columnFont75 {
    font-size: 75%;
}

/* === Layout utilities === */
.float-right {
    float: right;
}

.d-flex {
    display: flex !important;
}


/* ===========================================================================
   4. SPACING UTILITIES (Margin, Padding, Width, Height)
   =========================================================================== */

/* === Margin všechny strany === */
.margin0 {
    margin: 0;
}
.margin5 {
    margin: 5px;
}
.margin10 {
    margin: 10px;
}
.margin15 {
    margin: 15px;
}

/* === Margin top === */
.mt0 {
    margin-top: 0px;
}
.mt5 {
    margin-top: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}

/* === Margin left === */
.ml0 {
    margin-left: 0px;
}
.ml5 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px!important;
}
.ml20 {
    margin-left: 20px;
}

/* === Margin right === */
.mr0 {
    margin-right: 0px;
}
.mr5 {
    margin-right: 5px;
}
.mr10 {
    margin-right: 10px;
}
.mr15 {
    margin-right: 15px;
}
.mr20 {
    margin-right: 20px;
}
.mr25 {
    margin-right: 25px;
}

/* === Margin bottom === */
.mb0 {
    margin-bottom: 0px;
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}

/* === Padding všechny strany === */
.padding0 {
    padding: 0px!important;
}
.padding5 {
    padding: 5px!important;
}
.padding10 {
    padding: 10px!important;
}
.padding15 {
    padding: 15px!important;
}
.padding20 {
    padding: 20px;
}
.padding25 {
    padding: 25px;
}
.padding30 {
    padding: 30px;
}

/* === Padding top === */
.pt0 {
    padding-top: 0px;
}
.pt5 {
    padding-top: 5px;
}
.pt10 {
    padding-top: 10px;
}
.pt15 {
    padding-top: 15px;
}
.pt20 {
    padding-top: 20px;
}

/* === Padding left === */
.pl0 {
    padding-left: 0px;
}
.pl5 {
    padding-left: 5px;
}
.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}

/* === Padding right === */
.pr0 {
    padding-right: 0px;
}
.pr5 {
    padding-right: 5px;
}
.pr10 {
    padding-right: 10px;
}
.pr15 {
    padding-right: 15px;
}
.pr20 {
    padding-right: 20px;
}

/* === Padding bottom === */
.pb0 {
    padding-bottom: 0px;
}
.pb5 {
    padding-bottom: 5px;
}
.pb10 {
    padding-bottom: 10px;
}
.pb15 {
    padding-bottom: 15px;
}
.pb20 {
    padding-bottom: 20px;
}

/* === Width === */
.w25 {
    width: 25%;
}
.w50 {
    width: 50%;
}
.w75 {
    width: 75%;
}
.w80 {
    width: 80%;
}
.w100 {
    width: 100%;
}

/* === Height === */
.height20 {
    height: 20px;
}


/* ===========================================================================
   5. LAYOUT - WRAPPER & SIDEBAR
   =========================================================================== */

/* === Main wrapper === */
#wrapper {
    overflow-x: hidden;
}

/* === Sidebar === */
#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -12rem;
    transition: margin 0.25s ease-out;
}

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

#sidebar-wrapper .list-group {
    width: 12rem;
    text-align: left;
}

#sidebar-wrapper .btn {
    padding-left: 15px !important;
    border-radius: 0px !important;
}

/* === Page content === */
#page-content-wrapper {
    min-width: 100vw;
}

/* === Sidebar toggle states === */
body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0px;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
        margin-left: -12rem;
    }
}


/* ===========================================================================
   6. NAVIGACE - NAVBAR
   =========================================================================== */

/* === Základní navbar styling === */
.navbar {
    display: flex;
    align-items: center;
}

.bg-navbar {
    background-color: var(--bgNavbar-bgcolor);
}

.nav-item {
    background-color: var(--bgNavbar-bgcolor);
}

/* === Navbar brand === */
.navbar-light .navbar-brand {
    color: var(--bgNavbarBrand-color);
}

.logo {
    margin: 0px;
    padding: 0px;
    filter: var(--logo-filter);
}

/* === Navbar links === */
.navbar-light .navbar-nav .nav-link {
    color: var(--navbarLighNav);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    color: var(--navbarLighNav);
}

/* === Navbar toggler === */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-light .navbar-toggler {
    color: rgba(255,255,255,.5) !important;
    border-color: rgba(255,255,255,.2) !important;
}

/* === Ikony v navigaci === */
.fa-globe,
.fa-user {
    color: var(--faGlobe-color);
}

/* === Page title === */
.navbar .page-title {
    padding-left: 15px;
}

.navbar .page-title .title {
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .page-title .refresh {
    white-space: nowrap;
}

/* === Refresh select === */
.navbar .refresh select {
    width: auto;
    font-size: 0.875rem;
}

.navbar .refresh #countdown {
    min-width: 30px;
    text-align: center;
}

/* === Nav link overrides === */
.nav-item .btn-light.nav-link {
    background: none;
    border: none;
    color: var(--btnNavbar-color);
}

.nav-item .btn-light.nav-link:hover,
.nav-item .btn-light.nav-link:focus {
    background-color: var(--btnLight-hover-bgcolor);
    color: var(--btnLight-hover-color);
}

/* === Nav link styling === */
.nav-item .nav-link {
    color: var(--btnNavbar-color);
    background-color: var(--btnLight-background-color);
    transition: all 0.3s ease;
    padding: 10px 15px;
}

.nav-item .nav-link:hover {
    background-color: var(--btnLight-hover-bgcolor);
    color: var(--btnLight-hover-color);
}

.nav-item .nav-link.active {
    background-color: var(--btnLightSelected-background-color);
    color: var(--btnLight-hover-color);
    border-left: 3px solid var(--bgNavbarBrand-color);
}

.nav-item .nav-link i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

/* === Počítadlo událostí === */
.nav-item .position-relative {
    display: inline-block;
}

.nav-item .event-count {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 0.75rem;
    padding: 0.25em 0.4em;
    line-height: 1;
}

/* === Enhanced Page Toolbar === */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    /*background: rgba(42, 42, 62, 0.5);*/
    border-radius: 4px;
    /*margin-bottom: 20px;*/
    margin-top: 5px;
    /*border: 1px solid var(--card-border-color);*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, rgba(42, 42, 62, 0.6) 0%, rgba(31, 78, 95, 0.4) 100%);
    border: 1px solid rgba(129, 192, 223, 0.2);
}

.page-actions {
    z-index: 10;
    position: relative;
}

.page-title {
    font-size: 1.3em;
    font-weight: 500;
    margin: 0;
    color: var(--title-color);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-title i {
    color: var(--bgNavbarBrand-color);
}

.page-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-filters label {
    color: var(--color);
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
}

.page-filters select {
    min-width: 200px;
}

.page-actions .btn {
    padding: 8px 15px;
}

/* === Element Detail Tabs === */
.element-tabs-wrapper {
    background: var(--card-bgcolor);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.element-tabs-wrapper .nav-tabs {
    border-bottom: 2px solid var(--card-border-color);
    background: rgba(42, 42, 62, 0.3);
    margin-bottom: 0;
    padding: 0 15px;
}

.element-tabs-wrapper .nav-tabs .nav-item {
    margin-bottom: -2px;
}

.element-tabs-wrapper .nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color);
    padding: 12px 20px;
    transition: all 0.2s;
    background: transparent;
}

.element-tabs-wrapper .nav-tabs .nav-link:hover {
    color: var(--btnLight-hover-color);
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--bgNavbarBrand-color);
}

.element-tabs-wrapper .nav-tabs .nav-link.active {
    color: var(--bgNavbarBrand-color);
    background: rgba(129, 192, 223, 0.1);
    border-bottom-color: var(--bgNavbarBrand-color);
    font-weight: 500;
}

.element-tabs-wrapper .nav-tabs .nav-link i {
    margin-right: 6px;
}

.element-tabs-content {
    padding: 20px;
}

/* ===========================================================================
   7. LOGO A BRANDING
   =========================================================================== */

/* === Navbar brand === */
.navbar-brand {
    font-size: 22px;
    cursor: pointer;
    font-family: system-ui, -apple-system, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0;
}

.navbar-brand:hover {
    cursor: pointer;
}

/* === Logo container === */
.navbar-brand-logo {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* === Logo image === */
.logo {
    height: 30px;
    display: block;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

/* === Logo dark variant (pouze tmavé) === */
.logo-light {
    opacity: 0;
    visibility: hidden;
}

.logo-dark {
    opacity: 1;
    visibility: visible;
}

/* === Logo preloading === */
.navbar-brand-logo::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

/* === Brand text === */
.navbar-brand-text {
    display: flex;
    height: 100%;
    font-size: 24px;
    line-height: 1;
}

.logo-text {
    color: var(--navbarBrandText);
    padding: 0px;
    margin: 0px;
}

.title-blue {
    color: var(--bgNavbarBrand-color);
}

/* === Footer logo === */
.logo-footer {
    font-size: 20px;
    color: white;
}

/* === Presentation title === */
.presentation-title {
    color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 2em;
    white-space: nowrap;
}


/* ===========================================================================
   8. BREADCRUMB NAVIGACE
   =========================================================================== */

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: var(--breadcrumb-bgcolor) !important;
    border-radius: 4px;
}

.breadcrumb-item.active {
    color: var(--breadcrumbActive-color);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--breadcrumbActive-color);
}


/* ===========================================================================
   9. MENU ITEMS
   =========================================================================== */

/* === Menu item colors === */
.menu-item-qosmonitor,
.menu-item-qos24hours,
.menu-item-qos5Mins,
.menu-item-dashboard,
.menu-item-systemmonitor,
.menu-item-map,
.menu-item-elements,
.menu-item-events,
.menu-item-aggregated,
.menu-item-timeseries,
.menu-item-tools,
.menu-item-administration {
    color: var(--bgNavbarBrand-color);
}

/* === Menu spacer === */
.menu-spacer {
    height: 20px;
}


/* ===========================================================================
   10. KOMPONENTY - CARDS/PANELS
   =========================================================================== */

/* === Základní card styling === */
.card {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--card-bgcolor);
    border: 1px solid var(--card-border-color);
}

.card-body {
    background-color: transparent;
}

.card-header {
    padding: 0.5rem 1rem;
}

.card-footer {
    background-color: var(--cardFooterBackground);
}

.card-info .card-header {
    background-color: var(--cardHeaderInfo);
}

.card-warning .card-header {
    background-color: var(--cardHeaderWarning);
}

.card-admin .card-header {
    background-color: var(--cardHeaderAdmin);
}

.card-monitoring .card-header {
    background-color: var(--cardHeaderMonitoring);
}

/* === Panel hodnoty === */
.panel-value {
    font-size: 3em;
    color: #000;
    height: 100%;
    text-align: center;
}

.panel-element-value {
    font-size: 1.2em;
    color: var(--panelElementValuer);
    height: 100%;
    text-align: center;
}

.panel-datetime {
    font-size: 0.7em;
    color: #ccc;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px;
}

/* === Panel default styly === */
.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

/* === Info panel === */
.infoPanel .odd {
    background: rgba(255, 255, 255, 0.05);
}

.infoPanel .even {
    background: var(--background-color);
}

/* === Elements Panel === */
.elements-panel {
    padding: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
}

.element-card {
    padding: 2px 4px !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--card-border-color);
}

.element-card:last-child {
    border-bottom: none;
}

.element-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.element-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.element-info {
    display: flex;
    flex-direction: column;
}

.element-name {
    margin: 0;
    font-size: 16px;
    color: var(--color);
    white-space: nowrap;
}

.element-name a {
    color: inherit;
    text-decoration: none;
}

.element-name a:hover {
    text-decoration: underline;
}

.element-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
}

.element-meta .badge {
    font-size: 10px;
    padding: 2px 6px;
}

.element-qos-24h {
    flex: 1;
    min-width: 0;
}

/* Kontejnery pro konfiguraci */
#snmp-config-container,
#ping-config-container,
#iperf-config-container {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

#snmp-config-container:hover,
#ping-config-container:hover,
#iperf-config-container:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Pre element pro zobrazení JSON */
.snmp-config pre,
.ping-config pre,
.iperf-config pre,
.simulation-config pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
}

/* ===========================================================================
   11. FORMULÁŘOVÉ PRVKY
   =========================================================================== */

/* === Form controls === */
.form-control {
    color: var(--formControl-color) !important;
    background-color: var(--formControl-bgcolor) !important;
}

.input-group-text {
    background-color: var(inputGroupText-background-color);
}

button,
select {
    background-color: var(--formControl-bgcolor);
    color: var(--formControl-color);
}

/* === Area selector in toolbar === */
.page-filters select.form-control {
    background-color: var(--formControl-bgcolor);
    border-color: var(--card-border-color);
    color: var(--formControl-color);
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

.page-filters select.form-control:focus {
    border-color: var(--bgNavbarBrand-color);
    box-shadow: 0 0 0 2px rgba(129, 192, 223, 0.1);
}

/* Override Bootstrap select height for better visibility */
select.form-control:not([size]):not([multiple]) {
    height: auto;
    min-height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
}

/* Pro selectboxy ve formulářích */
.modal-body select.form-control,
form select.form-control {
    height: auto;
    min-height: 38px;
}

/* JSON Editor Wrapper */
.json-editor-wrapper {
    position: relative;
    margin-bottom: 20px;
}

/* JSON Editor Textarea */
.json-editor {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre;
    font-size: 13px;
    line-height: 1.5;
}

/* JSON Validation Indicator - základní styl */
.json-validation-indicator {
    margin-top: 5px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* JSON Validation - Valid State */
.json-validation-indicator.valid {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

/* JSON Validation - Invalid State */
.json-validation-indicator.invalid {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ===========================================================================
   SIMPLE MODERN CHECKBOXES - jako na login stránce
   =========================================================================== */

/* Checkbox wrapper */
.checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/* Checkbox input styling */
.checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: #81C0DF;
    flex-shrink: 0;
}

/* Checkbox label */
.checkbox label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    color: var(--color);
    font-size: 0.95rem;
    font-weight: normal;
    user-select: none;
}

.checkbox label:hover {
    color: var(--btnLight-hover-color);
}

/* Modal body checkbox spacing */
.modal-body .checkbox {
    margin-bottom: 0;
}

.modal-body .form-group {
    margin-bottom: 1rem;
}


/* ===========================================================================
   12. TABULKY A DATAGRID
   =========================================================================== */

/* === Tabulka borders === */
.table-bordered td,
.table-bordered th {
    border: 1px solid var(--datagridBorder);
}

.table thead th {
    border-bottom: 2px solid var(--datagridBorder);
}

/* === Zebra striping === */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--trOdd);
}

/* === Table cell line height === */
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    line-height: 1 !important;
}

/* === Datagrid specifické styly === */
.datagrid {
    padding: 0px !important;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 100%;
    background-color: transparent !important;
}

.datagrid table thead tr.row-group-actions th {
    background-color: transparent !important;
}

.datagrid table th.col-checkbox {
    background-color: transparent !important;
}

.datagrid .row-grid-bottom {
    border: 1px solid var(--datagridBorder) !important;
    background-color: transparent !important;
}

/* === Reset filter button === */
.reset-filter,
.reset-filter.active {
    color: #000;
    background-color: #dae0e5 !important;
    border-color: #d3d9df !important;
}


/* ===========================================================================
   13. TLAČÍTKA A DROPDOWN MENU
   =========================================================================== */

/* === Základní tlačítka === */
.btn-light {
    color: var(--btnLight-color);
    background-color: var(--btnLight-background-color);
    border-color: var(--btnLight-border-color);
}

.btn-light:hover,
.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--btnLight-hover-color);
    background-color: var(--btnLight-hover-bgcolor);
    border-color: var(--btnLight-hover-bordercolor);
}

.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
    color: var(--btnLight-hover-color);
    background-color: var(--btnLightSelected-background-color);
    border-color: var(--btnLightSelected-border-color);
}

.btn-info {
    color: var(--btnInfoColor);
}

/* === Primary Button (Save, Submit) === */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    color: #ffffff;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

.btn-primary:disabled {
    background: #374151;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* === Secondary Button (Cancel) === */
.btn-secondary {
    background-color: #374151;
    border: 1px solid #4b5563;
    color: #d1d5db;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #f3f4f6;
    transform: translateY(-1px);
}

.btn-secondary:active {
    background-color: #1f2937;
    transform: translateY(0);
}

/* === Danger Button (Delete) === */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    color: #ffffff;
}

.btn-danger:active {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(0);
}

/* === Success Button === */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    color: #ffffff;
}

/* === Základní tlačítka === */
.btn-light {
    color: var(--btnLight-color);
    background-color: var(--btnLight-background-color);
    border-color: var(--btnLight-border-color);
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-light:hover,
.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--btnLight-hover-color);
    background-color: var(--btnLight-hover-bgcolor);
    border-color: var(--btnLight-hover-bordercolor);
    transform: translateY(-1px);
}

.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
    color: var(--btnLight-hover-color);
    background-color: var(--btnLightSelected-background-color);
    border-color: var(--btnLightSelected-border-color);
}

.btn-info {
    color: var(--btnInfoColor);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-info:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* === Odstranění podtržení při hoveru === */
.btn:hover,
.btn-info:hover,
.btn-inverse:hover,
a:hover {
    text-decoration: none !important;
}

/* === Obecné pro všechna tlačítka === */
.btn {
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    font-weight: 500;
}

.btn:focus,
.btn:active:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* === Dropdown menu === */
.dropdown-menu {
    color: var(--dropdownMenu-color);
    background-color: var(--dropdownMenu-bgcolor);
    border-radius: 8px;
    border: 1px solid rgba(129, 192, 223, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 6px 0;
}

.dropdown-item {
    color: var(--dropdownMenu-color);
    padding: 10px 20px;
    transition: all 0.15s ease;
}

.dropdown-item.disabled {
    color: var(--dropdownMenuDisabled-color);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--dropdownMenuActive-color);
    background-color: var(--dropdownMenuActive-background-color);
}

.dropdown-menu .dropdown-item {
    padding-left: 20px;
    color: var(--dropdownMenu-color);
    background-color: var(--dropdownMenu-bgcolor);
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--dropdownMenuActive-background-color);
    color: var(--dropdownMenuActive-color);
}

/* === Info button toggle === */
.btn-info-toggle {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--bgNavbarBrand-color);
}

.btn-info-toggle:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* === Odstranění podtržení při hoveru === */
.btn:hover,
.btn-info:hover,
.btn-inverse:hover,
a:hover {
    text-decoration: none !important;
}

/* === Dropdown menu === */
.dropdown-menu {
    color: var(--dropdownMenu-color);
    background-color: var(--dropdownMenu-bgcolor);
}

.dropdown-item {
    color: var(--dropdownMenu-color);
}

.dropdown-item.disabled {
    color: var(--dropdownMenuDisabled-color);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--dropdownMenuActive-color);
    background-color: var(--dropdownMenuActive-background-color);
}

/* === Dropdown menu overrides === */
.dropdown-menu .dropdown-item {
    padding-left: 25px;
    color: var(--dropdownMenu-color);
    background-color: var(--dropdownMenu-bgcolor);
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--dropdownMenuActive-background-color);
    color: var(--dropdownMenuActive-color);
}

/* === Info button === */
.btn-info-toggle {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--bgNavbarBrand-color);
}

.btn-info-toggle:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* ===========================================================================
   14. BOOTSTRAP OVERRIDES
   =========================================================================== */

/* === Progress bar === */
.progress {
    height: 5px !important;
    margin: 0px !important;
    overflow: hidden;
    background-color: #fff !important;
    border-radius: 4px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* === Tablesorter === */
table.tablesorter {
    box-shadow: none !important;
    border: 0px !important;
}


/* ===========================================================================
   15. DASHBOARD KOMPONENTY
   =========================================================================== */

/* === Dashboard card title === */
.dashboardCardTitle {
    font-size: 1em;
    text-transform: uppercase;
    color: var(--dashboardCardTitle-color);
    text-shadow: 2px 2px 4px #000;
}

.dashboardCardTitle a:hover,
.dashboardCardTitle a:link,
.dashboardCardTitle a:visited,
.dashboardCardTitle a:active {
    background-color: transparent;
}

/* === Dashboard text a čísla === */
.dashboardText {
    font-size: 1em;
    color: var(--dashboardText-color);
}

.dashboardNum {
    font-size: 1em;
    font-family: inherit;
    color: var(--dashboardNum-color);
}

.dashboardIco {
    font-size: 1em;
    color: #99bad7;
}

/* === Dashboard scroll area === */
.dashboard-scroll {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 #1a1a1a;
}

.dashboard-scroll::-webkit-scrollbar {
    width: 18px;
}

.dashboard-scroll::-webkit-scrollbar-track {
    background: #555;
}

.dashboard-scroll::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 10px;
    border: 2px solid #1a1a1a;
}

/* === Column descriptions === */
.column-descriptions {
    font-weight: bold;
    font-size: 14px;
    color: var(--bgNavbarBrand-color);
    border-bottom: 1px solid var(--color-gray);
    padding-bottom: 5px;
    margin-bottom: 10px;
}


/* ===========================================================================
   16. SÍŤOVÉ ELEMENTY A TOPOLOGIE
   =========================================================================== */

/* === Tree container === */
.tree-container {
    margin-bottom: 20px;
    font-family: Consolas, "Courier New", monospace;
}

/* === Network element vizualizace === */
.network-element {
    position: relative;
    margin-left: var(--level-offset, 20px);
    padding-left: 15px;
}

.network-element::before,
.network-element::after {
    content: '';
    position: absolute;
    background-color: var(--network-element);
}

/* Vertikální čára */
.network-element::before {
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
}

/* Horizontální spojka */
.network-element::after {
    top: 10px;
    left: 0;
    width: 10px;
    border-bottom: 1px solid var(--network-element);
}

/* === Net availability === */
.netavailability {
    font-size: 1.2em;
}


/* ===========================================================================
   17. STAVOVÉ INDIKÁTORY A ÚROVNĚ
   =========================================================================== */

/* === Úrovně stavů (background) === */
.level-green {
    background-color: #0e0;
}

.level-orange {
    background-color: #f08080;
}

.level-red {
    background-color: #fad163;
}

.level-gray {
    background-color: #ccc;
}

/* === Stavové ikony === */
.status-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    margin-right: 5px;
    background-color: #fff;
}

.actual-status {
    margin-left: 2px;
    margin-top: 7px;
    height: 18px;
    width: 18px;
    border-radius: 10px;
}

/* === Availability stavy (background) === */
.available-green {
    background-color: #0e0;
}

.available-orange {
    background-color: orange;
}

.available-red {
    background-color: red;
}

.available-gray {
    background-color: gray;
}

/* === UpdatedAt stavy (text color) === */
.updatedAt-green {
    color: #0e0;
}

.updatedAt-orange {
    color: orange;
}

.updatedAt-red {
    color: red;
}

.updatedAt-gray {
    color: gray;
}

/* === Stáří dat (opacity based) === */
.data-fresh {
    opacity: 1.0;
}

.data-recent {
    opacity: 0.8;
}

.data-old {
    opacity: 0.6;
}

.data-stale {
    opacity: 0.4;
    filter: grayscale(30%);
}

/* === QoS Status Colors === */
.qos-good {
    background-color: #1cc88a;
}

.qos-warning {
    background-color: #f6c23e;
}

.qos-critical {
    background-color: #e74a3b;
}

/* QoS Status Colors - text (pro statistiky) */
.stat-value-group .value.qos-good {
    background: none;
    color: #1cc88a;
    font-weight: bold;
}

.stat-value-group .value.qos-warning {
    background: none;
    color: #f6c23e;
    font-weight: bold;
}

.stat-value-group .value.qos-critical {
    background: none;
    color: #e74a3b;
    font-weight: bold;
}

/* QoS Thresholds info pod metrikou */
.stat-thresholds {
    margin-top: 2px;
    padding: 2px 0;
    font-size: 0.75em;
    opacity: 0.7;
}

.stat-thresholds span {
    margin-right: 8px;
}

.qos-good-text { color: #1cc88a; }
.qos-warning-text { color: #f6c23e; }
.qos-critical-text { color: #e74a3b; }

/* === Dashboard === */
.dashboard-big-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ===========================================================================
   18. RSRP (SIGNAL QUALITY) INDIKÁTORY
   =========================================================================== */

/* === RSRP stavy === */
.rsrp-good {
    color: #28a745;
}

.rsrp-medium {
    color: #ffc107;
}

.rsrp-poor {
    color: #ff4d4d;
}

.rsrp-highlight {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}


/* ===========================================================================
   19. LEGENDY A POPISKY
   =========================================================================== */

/* === Legend section === */
.legend-section h4 {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--bgNavbarBrand-color);
}

/* === Legend item === */
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend-color {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
}

.legend-text {
    font-size: 12px;
}

/* === Legend colors === */
.legend-green {
    background-color: #0e0;
}

.legend-orange {
    background-color: orange;
}

.legend-red {
    background-color: red;
}

/* === Legend right alignment === */
.legend-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.legend-right .legend-text {
    order: 1;
    margin-right: 5px;
}

.legend-right .legend-color {
    order: 2;
}

/* === Legend incident count === */
.legend-item .badge {
    margin-right: 5px;
    font-size: 0.8em;
    vertical-align: middle;
}

.legend-item .fa-bell-o {
    margin-right: 5px;
    vertical-align: middle;
}

/* ===========================================================================
   19. QOS KOMPONENTY
   =========================================================================== */

/* ... existující QoS styly ... */

/* === QoS Content Wrapper === */
.qos-content-wrapper {
    background: var(--card-bgcolor);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

/* === QoS 5 Min - Klikatelné karty === */
.qos-card-clickable {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.qos-card-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(129, 192, 223, 0.3);
    border-color: var(--bgNavbarBrand-color);
}

.qos-card-clickable .card-header {
    transition: background-color 0.3s ease;
}

.qos-card-clickable:hover .card-header {
    background-color: rgba(129, 192, 223, 0.2) !important;
}

.qos-card-clickable:hover .card-header small.text-muted {
    color: var(--bgNavbarBrand-color) !important;
}

/* Animace pro canvas při hover */
.qos-card-clickable:hover canvas {
    opacity: 0.95;
}

/* === QoS 5 Min - Loading stav === */
.qos-5min-loading {
    color: var(--color);
    font-size: 1.1rem;
    padding: 20px;
}

.qos-5min-loading i {
    margin-right: 10px;
}

/* === QoS 5 Min - Timestamp === */
.qos-5min-timestamp {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 15px;
    font-style: italic;
}


/* ===========================================================================
   20. STATISTIKY A TRENDY
   =========================================================================== */

/* === Stats value === */
.stats-value {
    padding: 15px;
    background-color: var(--card-bgcolor);
    border-radius: 4px;
}

.stats-value strong {
    font-size: 1.2em;
    color: var(--panelElementValuer);
}

/* === Trend indicator === */
.trend-indicator {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.trend-indicator i {
    margin-right: 10px;
}

.trend-indicator span {
    font-size: 1.1em;
    color: var(--dashboardText-color);
}


/* ===========================================================================
   21. TIMESTAMP A REFRESH KOMPONENTY
   =========================================================================== */

/* === Panel datetime override === */
.panel-datetime {
    padding-bottom: 0px;
}

/* === Timestamp buttons === */
.timestamp-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
}

.timestamp-buttons .btn {
    font-size: 12px;
    padding: 5px 8px;
    line-height: 1.2;
}

.timestamp-buttons .btn i {
    font-size: 10px;
}

/* === Interval buttons === */
.interval-buttons .btn {
    font-size: 11px;
    padding: 4px 6px;
}

/* === Timestamp container === */
.timestamp-container {
    display: flex;
    align-items: center;
}

.timestamp-wrapper {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    line-height: 1.1;
}

.timestamp-display {
    text-align: right;
    font-size: 0.75rem;
    white-space: nowrap;
}

.timestamp-date,
.timestamp-time {
    display: block;
}

/* === Refresh dropdown === */
#refreshDropdown {
    padding-right: 1.5em;
}

#refreshDropdown::after {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

/* === Countdown === */
#countdown {
    position: absolute;
    top: 0;
    right: 0px;
    background-color: transparent;
    font-size: 0.75rem;
    padding: 0.1em 0.5em;
    color: var(--bgNavbarBrand-color);
}

/* === Selected interval (hidden) === */
#selectedInterval {
    display: none;
}


/* ===========================================================================
   22. KALENDÁŘ A DATEPICKER
   =========================================================================== */

/* === Historical timestamp input === */
#historicalTimestamp {
    color: var(--formControl-color);
    background-color: var(--formControl-bgcolor);
    border-color: var(--btnLight-border-color);
}

/* === Calendar icon invert === */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-clear-button {
    filter: invert(1);
}

/* === Datepicker icons invert === */
.datepicker-dropdown:after,
.date-picker-wrapper .month-wrapper table .day.toMonth.valid,
.bootstrap-datepicker-widget .prev,
.bootstrap-datepicker-widget .next,
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker table tr td span {
    filter: invert(1);
}

/* === Bootstrap datepicker === */
.datepicker-dropdown {
    background-color: #343a40;
    color: #fff;
    border-color: #666;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background-color: #495057;
    color: #fff;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: var(--bgNavbarBrand-color);
    color: #fff;
}

.datepicker table tr td,
.datepicker table tr th {
    color: #fff;
}


/* ===========================================================================
   23. QoS METRIKY A PANELY
   =========================================================================== */

/* === Timeline Selected Time === */
.timeline-selected-time {
    font-size: 0.85em;
    color: var(--bgNavbarBrand-color);
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(129, 192, 223, 0.15);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid var(--bgNavbarBrand-color);
}

.timeline-selected-time i {
    color: var(--bgNavbarBrand-color);
    font-size: 1.1em;
}

.timeline-selected-time strong {
    font-weight: 600;
}

/* === QoS Chart Container === */
.qos-chart-container {
    background: var(--card-bgcolor);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.borderChart {
    height: 400px;
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
}

/* === QoS Controls === */
.qos-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.qos-controls .btn {
    border-radius: 9999px;
    transition: transform .12s ease, box-shadow .12s ease,
        background-color .12s ease, border-color .12s ease;
    will-change: transform;
    padding: 6px 16px;
    font-size: 0.875rem;
}

.qos-controls .btn:hover,
.qos-controls .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.qos-controls .btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.qos-controls .btn-check:checked + .btn,
.qos-controls .btn.active {
    color: #fff;
    background-color: #666666;
    border-color: #777777;
}

.btn-check {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* === QoS Statistics Panel === */
.qos-statistics-panel-compact {
    background: var(--card-bgcolor);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.qos-statistics-panel-compact .stats-section {
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 15px;
}

.stat-item-extended {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border-left: 3px solid rgba(129, 192, 223, 0.3);
}

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.stat-label {
    font-weight: 600;
    color: var(--title-color);
    font-size: 0.95em;
}

.stat-values {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.stat-value-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    gap: 2px;
}

.stat-value-group.primary {
    background: rgba(129, 192, 223, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(129, 192, 223, 0.4);
}

.value-label {
    color: var(--textMuted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7em;
}

.stat-value-group.primary .value-label {
    color: var(--bgNavbarBrand-color);
    font-weight: 600;
}

.value {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color);
}

.stat-value-group.primary .value {
    color: var(--title-color);
    font-size: 1em;
}

.measurement-count {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border-color);
    text-align: right;
}

.measurement-count small {
    font-size: 0.8em;
    color: var(--textMuted);
}

/* === QoS metrics detail === */
.qos-metrics-detail {
    font-size: 0.8em;
    line-height: 1.3;
}

.metric-row {
    margin-bottom: 3px;
}

.metric-label {
    color: var(--dashboardText-color);
    font-weight: normal;
}

.metric-time {
    color: var(--textMuted);
    font-size: 0.85em;
}

/* === QoS detail info === */
.qos-detail-info {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 8px;
    color: #ddd;
}

.qos-main-status {
    font-size: 13px;
    margin-bottom: 5px;
    text-align: center;
}

.qos-metric-line {
    margin: 3px 0;
    display: flex;
    align-items: center;
}

/* === QoS measurement time === */
.qos-measurement-time {
    color: #aaa;
    font-style: italic;
    margin: 2px 0;
}

.qos-measurement-time small {
    font-size: 10px;
}

/* === QoS Content Wrapper === */
.qos-content-wrapper {
    background: var(--card-bgcolor);
    border-radius: 8px;
    padding: 20px;
}

.qos-table-wrapper {
    overflow-x: auto;
    margin: 0 -15px;
    padding: 0 15px;
}

/* === QoS 24 Hours Grid === */
.qos-24hours-component {
    margin: 1px 0;
}

.hours-grid-24 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
    padding: 2px;
    background: transparent;
    border-radius: 6px;
}

.hour-item {
    position: relative;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hour-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Kvalitní barvy pro dark theme */
.hour-item.quality-green {
    background: rgba(40, 167, 69, 0.3);
    border-color: rgba(40, 167, 69, 0.5);
}

.hour-item.quality-yellow {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.5);
}

.hour-item.quality-red {
    background: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.5);
}

.hour-item.quality-gray {
    background: rgba(108, 117, 125, 0.2);
    border-color: rgba(108, 117, 125, 0.3);
}

/* Aktuální hodina */
.hour-item.current-hour {
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

.hour-item.current-hour.quality-green {
    background: rgba(40, 167, 69, 0.5);
    border-color: #28a745;
}

.hour-item.current-hour.quality-yellow {
    background: rgba(255, 193, 7, 0.5);
    border-color: #ffc107;
}

.hour-item.current-hour.quality-red {
    background: rgba(220, 53, 69, 0.5);
    border-color: #dc3545;
}

.hour-item.current-hour.quality-gray {
    background: rgba(108, 117, 125, 0.4);
    border-color: #6c757d;
}

.hour-label {
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.hour-loss {
    font-size: 9px;
    font-weight: 500;
    margin-top: 2px;
    color: #d1d5db;
}

/* === QoS Timeline Container === */
.qos-timeline-wrapper {
    background: var(--card-bgcolor);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
}

.qos-timeline-container {
    background: transparent;
    border-radius: 4px;
}
.qos-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.qos-timeline-title {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--title-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.qos-timeline-title i {
    color: var(--bgNavbarBrand-color);
}

.timeline-toggle-btn {
    padding: 6px 12px;
    font-size: 0.9em;
}

/* ===========================================================================
   QoS 5 MIN ACTUAL - Grafy za posledních 5 minut
   =========================================================================== */

/* === QoS 5min karty === */
.qos-5min-card {
    background: #1e1e2e;
    border: 1px solid #2d2d3d;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.qos-5min-card:hover {
    border-color: #4a4a5a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.qos-5min-card .card-header {
    background: #252535;
    border-bottom: 1px solid #2d2d3d;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
}

.qos-5min-card .card-header strong {
    color: #e0e0e0;
    font-size: 14px;
}

.qos-5min-card .card-header small {
    color: #a0a0b0;
}

.qos-5min-card .card-body {
    padding: 16px;
    background: #1a1a28;
    border-radius: 0 0 8px 8px;
}

/* === Timestamp a loading === */
.qos-5min-timestamp {
    color: #8888a0;
    font-size: 13px;
    margin-top: 16px;
}

.qos-5min-loading {
    color: #a0a0b0;
    font-size: 14px;
}

/* === Timeline Level Containers === */
.timeline-level-container {
    margin-bottom: 10px;
    border: 1px solid var(--card-border-color);
    border-radius: 6px;
    background: rgba(42, 42, 62, 0.3);
    padding: 8px;
}

.timeline-grid {
    display: grid;
    gap: 6px;
}

/* Grid layouts pro různé úrovně */
.years-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.months-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.hours-grid {
    grid-template-columns: repeat(24, 1fr);
}

/* === Timeline Items - Dark Theme === */
.timeline-item {
    position: relative;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--card-bgcolor);
    min-height: 28px;
    padding: 4px 8px;
}

.timeline-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: var(--bgNavbarBrand-color);
}

/* Kvalitní barvy - přizpůsobené dark theme s nižší průsvitností */
.timeline-item.quality-green {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
    color: #90ee90;
}

.timeline-item.quality-yellow {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffd966;
}

.timeline-item.quality-red {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
}

.timeline-item.quality-gray {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #adb5bd;
}

/* Selected items - modrý rámeček */
.timeline-item.selected {
    border-color: var(--bgNavbarBrand-color) !important;
    box-shadow: 0 0 0 3px rgba(129, 192, 223, 0.3) !important;
    background: rgba(129, 192, 223, 0.1) !important;
}

.timeline-item.selected.quality-green,
.timeline-item.selected.quality-yellow,
.timeline-item.selected.quality-red,
.timeline-item.selected.quality-gray {
    filter: brightness(1.2);
}

/* === Timeline Links === */
.timeline-link {
    display: block;
    text-decoration: none;
    color: inherit !important;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-link:hover {
    text-decoration: none;
    color: inherit !important;
}

.timeline-label {
    font-weight: 600;
    font-size: 13px;
    color: inherit;
}

/* === Breadcrumb === */
.qos-timeline-container .breadcrumb {
    background-color: rgba(42, 42, 62, 0.5);
    border: 1px solid var(--card-border-color);
    margin-bottom: 15px;
    padding: 8px 16px;
}

.qos-timeline-container .breadcrumb-item a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
    color: var(--color);
}

.qos-timeline-container .breadcrumb-item a:hover {
    text-decoration: none;
    background-color: rgba(129, 192, 223, 0.2);
    color: var(--aColorHover);
}

.qos-timeline-container .breadcrumb-item.active {
    color: var(--bgNavbarBrand-color);
}

/* === Týdenní zobrazení === */
.days-weekly-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.days-week-row-with-button {
    display: grid;
    grid-template-columns: 90px repeat(7, 1fr);
    gap: 6px;
    align-items: center;
}

/* Týdenní tlačítka */
.week-summary-button {
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--card-bgcolor);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-width: 90px;
    padding: 4px 8px;
}

.week-summary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: var(--bgNavbarBrand-color);
}

.week-summary-button.empty-week-button {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.week-button-link {
    display: block;
    text-decoration: none;
    color: inherit !important;
    width: 100%;
}

.week-button-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-label {
    font-weight: 600;
    font-size: 11px;
    color: inherit;
    line-height: 1.2;
}

.week-range {
    font-size: 9px;
    color: inherit;
    opacity: 0.7;
    line-height: 1;
}

/* Kvalitní barvy pro týdenní tlačítka */
.week-summary-button.quality-green {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
    color: #90ee90;
}

.week-summary-button.quality-yellow {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffd966;
}

.week-summary-button.quality-red {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
}

.week-summary-button.quality-gray {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #adb5bd;
}

/* === Dny v týdenních řádcích === */
.day-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    min-height: 28px;
}

.day-item.empty-slot {
    background: transparent;
    border: none;
    pointer-events: none;
}

.day-item.empty-day {
    opacity: 0.3;
    cursor: not-allowed;
}

.day-item.empty-day .timeline-label {
    color: var(--textMuted);
}

/* ===========================================================================
   24. HEATMAP KOMPONENTY
   =========================================================================== */

/* === CalHeatmap container === */
.calHeatmap {
    font-size: 10px;
    color: #777;
    border: 1px solid var(--calHeatmap-border);
    border-radius: 4px;
    overflow-y: auto;
    width: 100%;
}

.calHeatmap table {
    border-collapse: separate;
    border-spacing: 0px;
    border-radius: 4px;
    padding: 5px;
}

.calHeatmap td {
    padding: 0px;
    margin: 0px;
    height: 10px;
    background-color: var(--background-color);
}

.calHeatmap td div {
    width: 10px;
    height: 10px;
}

/* === Heatmap buňky === */
.heatmap-cell {
    background-color: var(--heatmap-cell-bg);
    border-radius: 10px;
}

.heatmap-color-1 {
    background-color: var(--color-light-blue);
    border-radius: 10px;
}

.heatmap-color-2 {
    background-color: var(--color-medium-blue);
    border-radius: 10px;
}

.heatmap-color-3 {
    background-color: var(--color-darker-blue);
    border-radius: 10px;
}

.heatmap-color-4 {
    background-color: var(--color-deep-blue);
    border-radius: 10px;
}

.heatmap-color-5 {
    background-color: var(--color-night-blue);
    border-radius: 10px;
}

/* === Heatmap borders === */
.heatmap-today {
    border: 1px solid var(--color-white);
}

.heatmap-border {
    border: 1px solid var(--heatmap-border-color);
}

.heatmap-border-left {
    border-left: 1px solid var(--heatmap-border-left-color);
}

.heatmap-border-top {
    border-top: 1px solid var(--heatmap-border-top-color);
}

/* === Heatmap container === */
.heatmap {
    display: flex;
    min-height: 20px;
    margin: 5px 0;
    border-radius: 3px;
    overflow: hidden;
}

.heatmap-cell {
    flex: 1;
    height: 100%;
    min-width: 8px;
    margin: 0 1px;
    border-radius: 2px;
}

/* === Heatmap no data === */
.heatmap-cell.no-data {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    opacity: 0.7;
}


/* ===========================================================================
   25. GRAFY
   =========================================================================== */

.borderChart {
    box-shadow: 1px 1px 8px -1px rgba(0,0,0,.1);
    padding-right: 20px;
    border-radius: 2px;
    padding-left: 10px;
    padding-bottom: 10px;
}


/* ===========================================================================
   26. LOADING OVERLAY A AJAX SPINNER
   =========================================================================== */

/* === Loading overlay === */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay p {
    color: white;
    margin-top: 10px;
}

/* === AJAX Spinner === */
#ajax-spinner {
    visibility: hidden;
    position: fixed;
    height: 33px;
    width: 33px;
    margin: auto;
    top: 0px;
    right: 0px;
    bottom: 50%;
    right: 50%;
    background: url(data:image/gif;base64,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) no-repeat 50% 50%;
    z-index: 123456;
}

#ajax-spinner:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
}


/* ===========================================================================
   27. ÚKOLY (TASKS)
   =========================================================================== */

.task-resolved {
    color: #c6c6c6;
}

.task-medium {
    background-color: #e9f7bc;
}

.task-high {
    background-color: #f7e1bc;
}

.task-urgent {
    background-color: #f7bebc;
}

.task-milestone {
    background-color: #bcf5f7;
}


/* ===========================================================================
   28. SCHEDULER LOGS
   =========================================================================== */

/* ============================================================================
   ZAKOMENTOVÁNO - SCHEDULER LOGS FRONTEND
   ============================================================================
   Důvod: Scheduler logs nejsou implementovány ve frontendu
   ============================================================================

.sched-not-succes {
    color: #ff5555;
}
============================================================================ */


/* ===========================================================================
   29. SEARCH
   =========================================================================== */

/* ============================================================================
   ZAKOMENTOVÁNO - SEARCH KOMPONENTA
   ============================================================================
   Důvod: Search box komponenta není implementována v projektu
   ============================================================================

.search {
    background-color: var(#000);
}

.search input {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}
============================================================================ */


/* ===========================================================================
   30. PRE/CODE
   =========================================================================== */

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
}


/* ===========================================================================
   31. MODÁLNÍ OKNA - DARK THEME
   =========================================================================== */

/* === Backdrop === */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 1;
}

/* === Modal Dialog === */
.modal-dialog {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* === Modal Content === */
.modal-content {
    background-color: var(--card-bgcolor, #2a2a3e);
    border: 1px solid rgba(129, 192, 223, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* === Modal Header === */
.modal-header {
    background: linear-gradient(135deg, #2a2a3e 0%, #1f2937 100%);
    border-bottom: 2px solid rgba(129, 192, 223, 0.3);
    padding: 1.25rem 1.5rem;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #81C0DF 50%,
        transparent 100%);
}

.modal-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-title i {
    color: #81C0DF;
    font-size: 1.1em;
}

/* === Close Button === */
.modal-header .close {
    color: #ffffff !important;
    opacity: 0.7;
    text-shadow: none;
    transition: all 0.2s ease;
    font-size: 1.5rem;
    font-weight: 300;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.modal-header .close:hover {
    opacity: 1;
    color: #81C0DF !important;
    transform: rotate(90deg);
}

.modal-header .close:focus {
    outline: none;
}

/* === Modal Body === */
.modal-body {
    background-color: var(--card-bgcolor, #2a2a3e);
    padding: 1.5rem;
    color: lightgray;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* Scrollbar pro modal body */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(129, 192, 223, 0.3);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 192, 223, 0.5);
}

/* === Modal Footer === */
.modal-footer {
    background-color: rgba(31, 41, 55, 0.5);
    border-top: 1px solid rgba(129, 192, 223, 0.2);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* === Modal Animations === */
.modal.fade .modal-dialog {
    transform: scale(0.9) translateY(-50px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* === Info Panel uvnitř modalu === */
.modal-body .infoPanel .row {
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
}

.modal-body .infoPanel .row:hover {
    background-color: rgba(129, 192, 223, 0.1);
}

.modal-body .infoPanel .row:last-child {
    border-bottom: none;
}



/* ===========================================================================
   32. FOOTER
   =========================================================================== */

footer {
    width: 100%;
    padding: 10px 0;
    background-color: var(--footer-bgcolor);
    border-top: 1px solid var(--footer-border-color);
    margin-top: auto;
    color: #aaa;
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    max-width: 100%;
}

/* === Verze vlevo === */
.version-footer {
    flex: 0 0 auto;
    order: 1;
}

.version-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* === Logo vpravo === */
.footer-right {
    flex: 0 0 auto;
    order: 2;
    margin-left: auto;
}

.logo-footer {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* === Footer hover efekt === */
p .after {
    display: none;
}

p:hover .before {
    display: none;
}

p:hover .after {
    display: inline;
}


/* ===========================================================================
   33. RESPONZIVNÍ ÚPRAVY
   =========================================================================== */

/* === Footer responzivita === */
@media (max-width: 576px) {
    .footer-content {
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    .version-footer {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .footer-right {
        flex-shrink: 0;
    }

    .version-text,
    .logo-footer {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .footer-content {
        padding: 5px 10px;
    }

    .version-text,
    .logo-footer {
        font-size: 0.7rem;
    }
}

/* === Tablet a menší === */
@media (max-width: 1000px) {
    .network-element {
        margin-left: 10px;
    }

    .dashboardNum {
        font-size: 12px;
    }

    .dashboard-legend {
        flex-wrap: wrap;
    }

    .legend-item {
        margin-bottom: 5px;
    }
}

/* === Navbar responzivita === */
@media (max-width: 991.98px) {
    .navbar .page-title .title {
        font-size: 1rem;
    }
}

/* === Timestamp responzivita === */
@media (max-width: 992px) {
    .timestamp-display {
        font-size: 0.7rem;
    }

    .timestamp-wrapper {
        margin-right: 5px;
    }
}

/* === Legend responzivita === */
@media (max-width: 768px) {
    .dashboard-legend {
        flex-direction: column;
    }

    .legend-section {
        margin-bottom: 15px;
    }

    /* QoS panel responsive */
    .qos-detail-info {
        font-size: 11px;
    }

    .qos-metric-line {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* === QoS 24 Hours Responsive === */
@media (max-width: 1400px) {
    .hours-grid-24 {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 1200px) {
    .element-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .element-card .col-md-3 {
        padding-left: 15px !important;
        margin-bottom: 10px;
    }

    .hours-grid-24 {
        grid-template-columns: repeat(8, 1fr);
    }

    .hour-item {
        min-height: 50px;
        padding: 6px 2px;
    }

    .hour-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hours-grid-24 {
        grid-template-columns: repeat(6, 1fr);
    }

    .hour-item {
        min-height: 45px;
    }
}

/* === Page header responsive === */
@media (max-width: 992px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .page-filters {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 1400px) {
    .qos-table-wrapper {
        overflow-x: scroll;
    }
}

/* === Element Detail Responsive === */
@media (max-width: 992px) {
    .element-detail-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .element-selector-wrapper {
        width: 100%;
    }

    .element-selector-wrapper select {
        flex: 1;
    }

    .element-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .element-tabs-wrapper .nav-tabs {
        flex-direction: column;
        padding: 0;
    }

    .element-tabs-wrapper .nav-tabs .nav-link {
        border-bottom: 1px solid var(--card-border-color);
        border-left: 3px solid transparent;
    }

    .element-tabs-wrapper .nav-tabs .nav-link.active {
        border-bottom-color: var(--card-border-color);
        border-left-color: var(--bgNavbarBrand-color);
    }
}

/* === Timeline Responsive === */
@media (max-width: 1200px) {
    .hours-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 768px) {
    .timeline-level-container {
        padding: 6px;
    }

    .hours-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .years-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .months-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .timeline-label {
        font-size: 11px;
    }

    .timeline-item {
        min-height: 32px;
    }

    .days-week-row-with-button {
        grid-template-columns: 70px repeat(7, 1fr);
        gap: 4px;
    }

    .week-summary-button {
        min-width: 70px;
    }

    .week-label {
        font-size: 10px;
    }

    .week-range {
        font-size: 8px;
    }

    .qos-timeline-container .breadcrumb {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .timeline-item {
        min-height: 36px;
        padding: 2px 4px;
    }

    .hours-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .days-week-row-with-button {
        grid-template-columns: 55px repeat(7, 1fr);
        gap: 2px;
    }

    .week-summary-button {
        min-width: 55px;
        padding: 3px 5px;
    }

    .week-label {
        font-size: 9px;
    }

    .week-range {
        font-size: 7px;
    }

    .day-item {
        font-size: 11px;
        min-height: 32px;
    }

    .timeline-label {
        font-size: 10px;
    }
}

/* === QoS Components Responsive === */
@media (max-width: 768px) {
    .borderChart {
        height: 300px;
        padding: 10px;
    }

    .qos-controls {
        gap: 6px;
    }

    .qos-controls .btn {
        font-size: 0.75rem;
        padding: 4px 12px;
    }

    .stat-values {
        flex-direction: column;
        gap: 8px;
    }

    .stat-value-group {
        flex-direction: row;
        gap: 10px;
        min-width: auto;
        width: 100%;
        justify-content: space-between;
    }

    .stat-value-group.primary {
        padding: 8px 14px;
    }

    .timeline-selected-time {
        font-size: 0.75em;
        padding: 4px 10px;
    }
}

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-body {
        padding: 1rem;
        max-height: calc(100vh - 200px);
    }

    .modal-footer {
        padding: 0.75rem 1rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .alert {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===========================================================================
   34. LOGIN PAGE STYLES
   =========================================================================== */

.login-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;  /* zvýšit top/bottom padding */
}

.login-container {
    width: 100%;
    max-width: 450px;
}

.login-box {
    background: #2a2a3e;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid #3a3a4e;
}

.logo-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 35px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: #1f2937;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.logo-icon img.logo {
    width: auto;
    height: 30px;
}

.logo-text {
    font-size: 28px;
    font-weight: 600;
    color: white;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    color: #d1d5db;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.form-control {
    color: var(--formControl-color) !important;
    background-color: var(--formControl-bgcolor) !important;
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 6px;
    line-height: 1.4;
    border: 1px solid #374151;
    transition: all 0.2s;
}

/* Override Bootstrap select height for better visibility */
select.form-control:not([size]):not([multiple]) {
    height: auto;
    min-height: calc(2.25rem + 2px);
    padding: 10px 14px;  /* ZMĚNIT z 0.375rem 0.75rem */
    cursor: pointer;  /* PŘIDAT */
}

/* Pro selectboxy ve formulářích */
.modal-body select.form-control,
form select.form-control {
    height: auto;
    min-height: 38px;
    padding: 10px 14px;  /* ZMĚNIT */
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control::placeholder {
    color: #6b7280;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 16px;  /* změnit z 12px na 16px */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 8px;  /* přidat více paddingu pro lepší klikatelnost */
    transition: color 0.2s;
}

.password-toggle:hover {
    color: #d1d5db;
}

.password-toggle i {
    font-size: 18px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.checkbox-input {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.checkbox-label {
    color: #d1d5db;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

/* === Checkbox styling === */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.checkbox-group .checkbox-input {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
}

.checkbox-group .checkbox-input label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    color: #d1d5db;
    font-size: 14px;
    user-select: none;
    white-space: nowrap;
}

.checkbox-group .checkbox-input label:hover {
    color: #fff;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #3b82f6;
    flex-shrink: 0;
}

.btn-signin {
    width: 100%;
    padding: 14px;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-signin:hover {
    background: #2563eb;
}

.btn-signin:active {
    transform: translateY(1px);
}

.forgot-password {
    text-align: center;
    margin-top: 24px;  /* zvýšit z 20px na 24px */
}

.forgot-password a {
    color: #60a5fa;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.forgot-password a:hover {
    color: #93c5fd;
}

.login-version {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: #6b7280;
    font-size: 13px;
}

.login-brand {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
    font-size: 18px;
    font-weight: 300;
}

.error-message {
    background: #ef4444;
    color: white;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

@media (max-width: 640px) {
    .login-box {
        padding: 30px 25px;
    }

    .logo-text {
        font-size: 24px;
    }

    .login-version,
    .login-brand {
        display: none;
    }
}

/* === Language switcher === */
.language-switcher {
    text-align: center;
    margin-top: 24px;
    padding: 20px 0 0 0;  /* přidat top padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1);  /* jemný oddělovač */
}

.lang-link {
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lang-link:hover {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
}

.lang-link.active {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
}

.lang-link i {
    font-size: 18px;
}

.lang-separator {
    color: #4b5563;
    margin: 0 8px;
}


/* ===========================================================================
   35. FLASH MESSAGES / ALERTS - MODERNÍ DESIGN
   =========================================================================== */

.alert {
    border-radius: 8px;
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

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

/* Levá barevná linka */
.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.alert i {
    font-size: 1.25em;
    flex-shrink: 0;
}

/* === Alert Success === */
.alert-success {
    background: linear-gradient(135deg,
        rgba(28, 200, 138, 0.15) 0%,
        rgba(28, 200, 138, 0.05) 100%);
    color: #6EE7B7;
    border-left: 4px solid #1cc88a;
}

.alert-success::before {
    background: linear-gradient(180deg, #1cc88a 0%, #16a771 100%);
}

.alert-success i {
    color: #1cc88a;
}

.alert-success .close {
    color: #6EE7B7;
}

/* === Alert Info === */
.alert-info {
    background: linear-gradient(135deg,
        rgba(129, 192, 223, 0.15) 0%,
        rgba(129, 192, 223, 0.05) 100%);
    color: #93C5FD;
    border-left: 4px solid #81C0DF;
}

.alert-info::before {
    background: linear-gradient(180deg, #81C0DF 0%, #5A9FC4 100%);
}

.alert-info i {
    color: #81C0DF;
}

.alert-info .close {
    color: #93C5FD;
}

/* === Alert Warning === */
.alert-warning {
    background: linear-gradient(135deg,
        rgba(246, 194, 62, 0.15) 0%,
        rgba(246, 194, 62, 0.05) 100%);
    color: #FCD34D;
    border-left: 4px solid #f6c23e;
}

.alert-warning::before {
    background: linear-gradient(180deg, #f6c23e 0%, #d4a534 100%);
}

.alert-warning i {
    color: #f6c23e;
}

.alert-warning .close {
    color: #FCD34D;
}

/* === Alert Danger === */
.alert-danger {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.15) 0%,
        rgba(239, 68, 68, 0.05) 100%);
    color: #FCA5A5;
    border-left: 4px solid #ef4444;
}

.alert-danger::before {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.alert-danger i {
    color: #ef4444;
}

.alert-danger .close {
    color: #FCA5A5;
}

/* === Close button pro alerts === */
.alert .close {
    opacity: 0.7;
    text-shadow: none;
    font-size: 1.25rem;
    font-weight: 300;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

.alert .close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.alert .close:focus {
    outline: none;
}

/* === Alert strong text === */
.alert strong {
    font-weight: 600;
    margin-right: 6px;
}

/* === Speciální alert pro chyby ve formuláři v modalu === */
.form-modal-error {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* === Alert v modalu === */
.modal-body .alert {
    margin-bottom: 1.5rem;
}

.modal-body .alert:first-child {
    margin-top: 0;
}

/* Pro animaci při zavírání */
.modal.fade-out .modal-dialog {
    transform: scale(0.9) translateY(-50px);
    opacity: 0;
}

/* Pro alert dismissible */
.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

/* ===========================================================================
   KONEC SOUBORU
   
   SHRNUTÍ ZMĚN:
   - Zakomentováno 15 nepoužitých CSS sekcí
   - Všechny spacing utilities ponechány (ml5, mr5, mb10, atd.) - POUŽÍVAJÍ SE!
   - Task styly ponechány (task-resolved, task-medium, atd.) - POUŽÍVAJÍ SE!
   - QoS komponenty ponechány - POUŽÍVAJÍ SE!
   - Dashboard komponenty ponechány - POUŽÍVAJÍ SE!
   
   refactor: zakomentovány nepoužité CSS styly v styles.css
   =========================================================================== */