/* css variables */
:root {
    --activity-recent: #23AC20;
    --activity-online: #267FCA;
    --activity-warning1: #CBC52B;
    --activity-warning2: #CA8224;
    --activity-offline: #C82E46;
    --activity-unknown: #aaa;
}




/* theme.min.css overrides */
div#page-content {
    min-height: auto;
}

div#db-wrapper {
    overflow-x: clip; /* for sticky elements like device-cover and light-output-cover! */
}

div.progress {
    border: 1px solid #ccc;
    /*background-color: #fff;*/
}

div.bg-primary {
	background-color: #004488;
	/*background: linear-gradient(180deg, #004488 0%, #0077cc 1%);*/
}

.navbar-vertical div.navbar-heading {
	border-top: 1px solid #444;
    color: #a8afa0;
    /*background-color: #252f3f;	
	border-bottom: 1px solid #444;*/
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active {
    color: #f4f6f8;
	background-color: #0077cc !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link:hover {
    color: #f4f6f8;
    background-color: #003355;
}

.navbar-vertical .navbar-heading {
    padding: 0.6rem 3.0rem;
}

li.nav-item div ul.nav li.nav-item a.nav-link {
    background-color: #1c2428;
}

.navbar-nav li.nav-item {
    background-color:#212b36;
    z-index: 1;
}

.btn-default {
    border-color: #bbb;
    background-color: #f8f8f8;
}

.navbar-brand {
    background-color: #212b36;
    z-index: 1;
    position: relative;
    font-size: 1.27rem;
}

button.accordion-button:not(.collapsed) {
    font-weight: initial;
    color: initial;
}

button.accordion-button:focus {
    box-shadow: none;
}

/* table header ovverride */
table.table thead tr th {
    background-color: #0077cc !important;
    color: #fff !important;
    font-weight: bold;
}

/* navbar text */
.navbar-brand-text-1 {
    font-weight:bold; 
    color: #fff; 
}
.navbar-brand-text-2 {
    font-weight:bold; 
    color: #0af; 
}

.navbar-banner {
    display: block;
    margin: 50px auto 30px auto;
    opacity: 0.7;
    bottom: 0;
    position: absolute;
    z-index: 0;
    width: 100%;
    text-align: center;
}

.navbar-banner img {
    width: 120px;
}

.navbar-banner:hover {
    opacity: 0.9;
}

/* brand-text */
.brand-text-1 {
    color: #00ccff;
    font-weight: bold;
    font-size: 1.40rem;
}

.brand-text-2 {
    color: #0066ff;
    font-weight: bold;
    font-size: 1.40rem;
}

/* brand background div */
.brand-bg-div {
    /*background-image: 
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), /* Transparent overlay */
    /*url('/assets/img/logos/metrotechnika1.png');*/
    background-image: url('/assets/img/logos/metrotechnika1.png'); /* Replace with your image URL */
    background-position: calc(100% - 30px) calc(100% - 5px); /* Add margin to the right and bottom */
    background-size: 150px auto; /* Control the size of the image (width: 100px) */
    background-repeat: no-repeat;
    /*min-height:max-content;*/
}


/* extra small boostrap button */
.btn-xs {
    padding: 0.25rem 0.5rem; /* Adjust padding as needed */
    font-size: 0.70rem; /* Adjust font size as needed */
    line-height: 1.0; /* Adjust line height as needed */
}

.btn-xs svg {
    width: 1.5em; /* Adjust icon size as needed */
    height: 1.5em; /* Adjust icon size as needed */
    vertical-align: middle; /* Align icon with text */
}


/* alert blinking */
.blinking {
    animation: blink 1s infinite;
    z-index: 9999999 !important;
}

@keyframes blink {
    0% { opacity: 1; }
    20% { opacity: 0; }
    40% { opacity: 1; }
  }
  
/*.blinking-alert {
    animation: blink 1s infinite;
    z-index: 9999999 !important;
    color: #fff !important;
    background-color: #f00;
    border-radius: 5px;
    padding: 0 5px;
    border: 1px solid #fff;
}

.blinking-alert * {
    color: #fff !important;
/* }* */

/* activities */
.activity {
    border-radius: 5px;
    padding: 5px 10px;
}

.activity-recent {
    background-color: var(--activity-recent);
}

.activity-online {
    background-color: var(--activity-online);
}

.activity-warning1 {
    background-color: var(--activity-warning1);
}

.activity-warning2 {
    background-color: var(--activity-warning2);
}

.activity-offline {
    background-color: var(--activity-offline);
    animation: blink 1s infinite;
    z-index: 9999999 !important;    
}

.activity-unknown {
    background-color: var(--activity-unknown);
}

/* leaflet */

/* darkmode 
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}*/

.leaflet-control-attribution svg {
    width:0;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  /*transition: transform 0.8s;*/
}

.leaflet-marker-icon.blinking {
    animation: blink 1s infinite;
    z-index: 9999999 !important;
}

.leaflet-marker-icon.glow { 
    color: yellow;
    background-color: yellow;
    border-radius: 13px 13px 10px 10px;
    box-shadow: 0px 0px 0px 3px; /* box shadow defaults to color */
}


/* marker wrapper (activity dots) */
.marker-wrapper {
    position: relative;
    display: inline-block;
    z-index: 999999999 !important;
}
  
.marker-wrapper::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /*background-color: #0066ff; /* Default dot color transparent */
    /*background-color: transparent; /* Default dot color transparent */
    /*z-index:9999999 !important;*/
 
}

/* Define background colors for different activity levels */
.activity-recent .marker-wrapper::after { 
    background-color: var(--activity-recent) !important;
    border: 1px solid #333;
}

.activity-online .marker-wrapper::after {
    background-color: var(--activity-online) !important;
    border: 1px solid #333;
    box-shadow: 0px 0px 0px 3px; /* box shadow defaults to color */
}

.activity-warning1 .marker-wrapper::after {
    background-color: var(--activity-warning1) !important;
    border: 1px solid #333;
}

.activity-warning2 .marker-wrapper::after {
    background-color: var(--activity-warning2) !important;
    border: 1px solid #333;
}

.activity-offline .marker-wrapper::after {
    /*background-color: var(--activity-offline) !important;*/
    /* do nothing, offline are blinking and has background-color layer up */
}

.activity-unknown .marker-wrapper::after {
    background-color: var(--activity-unknown) !important;
    border: 1px solid #333;
}




/* css class color filters */
.dark-filter, .dark-filter-img img {
    filter: brightness(0.85);
}

.yellow-filter, .yellow-filter-img img {
    filter: sepia(1) saturate(1000%) hue-rotate(0deg) brightness(1);
}

.yellow2-filter, .yellow2-filter-img img {
    filter: sepia(1) saturate(1000%) hue-rotate(10deg) brightness(1.3);
}

.none-filter, .none-filter-img img {
    filter: none !important;
}

.marker-gateway {
    z-index: 10000 !important;
}

.no-border-radius {
    border-radius: 0 !important;
}

/* leaflet map legend */
/*Legend specific*/
.legend {
    padding: 6px 18px;
    font: 14px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
    /*border-radius: 5px;*/
    line-height: 24px;
    color: #555;
  }
  .legend h4 {
    text-align: center;
    font-size: 16px;
    margin: 2px 12px 8px;
    color: #777;
  }
  
  .legend span {
    position: relative;
    bottom: 3px;
  }
  
  .legend i, i.activity-box {
    width: 18px;
    height: 18px;
    /*float: left;*/
    margin: 0 8px 0 0;
    opacity: 0.7;
    display:inline-block;
}

  i.activity-box {
    vertical-align: bottom;
    margin: 0;
    border-radius: 3px;
  }
  
.legend i.icon {
    background-size: 18px;
    background-color: rgba(255, 255, 255, 1);
}


.map-legend-counter {
    padding-left: 20px;
    float:right;
}

/* map tooltip*/
.pixi-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid #333;
}

.map-tooltip {

}

.map-tooltip h4 {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

/* rapid grid overrides */
table.rapid-table thead th {
	background-color: #0077cc;
	color: #fff;
}

table.rapid-table thead th a {
	color: #fff;
    text-decoration: underline;
}




/* rapid pagination */
.rapid-pagination {
    display: inline-block;
    width: 100%;
    margin: 5px 0px;
    /*background-color: #eee;*/
}

.rapid-pagination span {
    display: inline-block;
    color: #666;
    padding: 7px 16px;
}

.rapid-pagination span.right {
    float: right;
}
  
.rapid-pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #fff;
	background-color: #ddeeff;
	border-radius: 3px;
}

.rapid-pagination a.active {
    background-color: #0077cc;
    color: white;
}

.rapid-pagination a.right {
    float: right;
}

.rapid-pagination a:hover:not(.active) {
    background-color: #fff;
    border: 1px solid #0077cc;
	border-radius: 3px;
}

.rapid-pagination form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.rapid-pagination form input[type=text] {
    width: 40px;
    text-align: right;
}

/* new */
input.invalid {
	background-color: #ffeeee;
	color: red;
}




/* htmx indicator */
#htmx-indicator {
    position: absolute;
    right: 1rem;
    top: 1.1rem;

    z-index: 99999;
    
    opacity: 0.0;
    transition: opacity 0ms ease-in;
    transition-delay: 0ms;
}

#htmx-indicator.htmx-request{
    opacity: 1.0;
    transition: opacity 100ms ease-in;
    transition-delay: 150ms;
}

.htmx-fade-out {
    opacity: 0.7;
    transition: opacity 200ms ease; /* Adjust the duration and easing as needed */
    transition-delay: 150ms;
}



/* covers */
.cover {
    display: flex;
    justify-content: space-between; /* Align items to the left and right */
    align-items: center; /* Align items vertically */
    /*background: url(/assets/img/device-cover.jpg) no-repeat;
    background-size: cover;*/
}

.cover h3 small {
    font-size:0.6em;
    color: #b0b0b0;
    padding-left: 5px;
}

h4 span {
    color: #aaa;
    font-size: 0.8em;
}

.device-cover {
   background-color: #212b36;
}

.device-cover .cover-info a {
    color: #fff;
}

.lighting-group-cover, .lighting-profile-cover {
    background-color: #ffe484;
    color: #000;
}

.cover-info {
    /*color: white;*/
    margin-bottom: 0; /* Remove bottom margin if necessary */
}

.cover-info a {
    /*color: #fff;*/
}


/* device */
.device-last-seen {
    color: white;
    text-align: right;

}
.light-outputs-container {
    margin-top: 0px; 
}

.light-output-small {
    padding: 3px 6px;
    border-radius: 3px;
    display: inline-block;
    background-color: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #777;

    display: inline-flex;
    align-items: center; /* Vertically centers the content */    
    width: auto;
    /* monospace font */
    font-weight: bold;
    font-size: 0.8rem;
}

.light-output-small img {
    margin-right: 5px;
}

/* light output full */
table.light-output {
    /*width: 100%;*/
    border-collapse: separate;
    border: 1px solid #aaa;
    background-color: #fff;
    border-radius: 5px;
    display: inline-block;
    /*margin-left: 10px;*/
}
table.light-output td {
    padding: 0px;
    text-align: center;
}
table.light-output td.col-1 {
    width: 20px;
}
table.light-output td.col-2 {
    width: 120px;
}

table.light-output td.col-3 {
    width: 40px;
}

table.light-output table {
    width: 100%;
}

table.light-output table td {
    border: 0;
    margin: 0;
    padding: 0;    
}

table.light-output table td {
    border: 0;
    margin: 0;
    padding: 0;    
}

table.light-output table td.small {
    font-size: 0.7rem;
}



/* nav-tabs fixes */
.tab-content {
    border-left: 1px solid #dfe3e8;
}

/* CLEAR */
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }









/* users */
.auth-icon-badge {
    background-image: url(/assets/img/city-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
}

/* Panel */

.fw-versions {
    font-size: 0.7rem;
    color: #aaa;
}

.accordion-button:not(.collapsed) {
    background-color: #eee;
    font-weight: bold;
}

.form-check-input:checked:disabled {
    background-color: #ccc;
    border-color: #ccc;
}





#sun-angle-legend {
    background-color: #fff; position: absolute; top: -145px; padding: 20px; border: 1px solid #ccc; border-radius: 5px;
    display: none;    
    box-shadow: 0px 0px 10px 1px #fff
}

#sun-zenith-chart {
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
}

@keyframes flash {
    0% { background-color: initial; box-shadow: 0px 0px 20px 0px #fff; }
    50% { background-color: lime; box-shadow: 0px 0px 20px 0px lime; }
    100% { background-color: initial; box-shadow: 0px 0px 20px 0px #fff; }
}
  
.one-shot-highlight {
    animation: flash 1s; /* 1s is the duration of the animation */
}

/* quick-search */
.quick-search-results {
    width: 40vw;
    position: absolute;
    left: 0;
    padding-left: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px; 
    display: none;
    z-index: 999999;
    max-height: 60vh;
    overflow-y: scroll;
    box-shadow: 0 0 1px rgba(60,66,87,.05), 0 3px 6px rgba(60,66,87,.1), 0 9px 24px rgba(60,66,87,.2);
}

.quick-search-results div {
    border-bottom: 1px solid #eef;
    padding: 2px 0;
}

/* ---- device show etc. */
.interfaces-list {
    font-size: 0.7em;
}

.interfaces-list i, .interfaces-list svg {
    width: 1.4em; height: 1.4em;
    vertical-align: middle; 
}

.interfaces-list i, .interfaces-list svg {
    color: #333;
}

#device-gallery {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping, ensuring all images are in one line */
    justify-content: flex-start; /* Align items to the left */
    overflow-x: auto; /* Enable horizontal scrolling */
}

#device-gallery a {
    margin: 0 3px;
    border-radius: 3px;
    display: inline-block; /* Ensure anchor tag behaves like a block for layout */
}

#device-gallery a img {
    height: 120px; /* Set a fixed height */
    object-fit: cover; /* Ensure image maintains its aspect ratio and is centered */
    border-radius: 3px;
}
 
/* --- lighting groups info */
.lighting-groups-info {
    max-width: 190px;
    overflow: hidden;
    display: block;
}

.lighting-groups-info img {
    vertical-align: middle; /* Align image with the middle of the text */
}

.lighting-groups-info a {
    display: inline-block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle; /* Ensure the text is aligned similarly */
}

table tr.table-need-sync, table tr.table-need-sync td {
    background-color: #ffbf00 !important;
    --bs-table-accent-bg: #ffbf00 !important;
}

/* feather icon small */
.small-icon {
    width: 16px;
    height: 16px;
}

.text-gray {
    color: #bbb;
}


/* lighting / metrics */
.light-output-cover {
    background-color: #fff;
    border: 1px solid #999;
}

.sticky {
    position: sticky;
    top: 0;
    z-index: 9999;  /* ensures it stays above other content */
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 9999;  /* ensures it stays above other content */
}

.separator {
    border-bottom: 1px dashed #ccc; margin: 10px 0;
}

/* rotation animation */
.rotate, .rotate svg {
    animation: rotation 5s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.bg-alert {
    background-color: #fdd;
}

.bg-ok {
    background-color: #dfd;
}



.property-bar {
    border-radius: 5px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #eee;
}

.property-bar small {
    padding-left: 20px;
    color: #999;
}

h5 span.right {
    float: right;
    vertical-align: middle;
    clear: both;
    padding: 0 20px;
}

.report td small {
    color: #aaa !important;
    font-size: 0.7em;
}

h5.card-title-accent {
    background-color: #0077cc;
    color:#eee;
    padding: 20px 20px;
    font-weight: bolder;
    /* 
    text-transform: uppercase;*/
    font-size: 1.1rem;
    border-radius: 5px;
}


/*
   =============================================================
   PRINTING
   1.  BASE RULES – work in all browsers, keep layout intact
   ============================================================= */
   @media print {

    @page {
        margin: 1cm 1cm;

        @bottom-center {
            content: counter(page) ' / ' counter(pages);
            font-size: 0.7em;
            color: #666;
            vertical-align: middle;
        }   

        @bottom-right {
            content: attr(data-print-date);
            font-size: 0.7em;
            color: #666;
            vertical-align: middle;
        }   

        @bottom-left {
            content: url('/assets/img/logos/logo-small.png');
            font-size: 0.8em;
            vertical-align: middle;
        }
    }

    /* Hide the whole document, but keep boxes in the flow         */
    body *{
      visibility:hidden !important;
    }
  
    /* Reveal the printable fragment and everything inside it       */
    .print,
    .print *{
      visibility:visible !important;
    }
  
    /* Also reveal every ancestor so the block can actually paint   */
    body *:has(.print){
      visibility:visible !important;      /* :has() is ignored by very old browsers */
    }

    body {
        background-color: #fff;
    }

    .card {
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }    

    #db-wrapper, body.bg-light, #page-content {
        background-color: #fff !important;
        margin: 0;
        padding: 0;
    }
    
    .apexcharts-canvas {
        transform: scale(0.5); /* Scale down to fit */
        transform-origin: top left;
        width: 200% !important; /* Compensate for scale */
        height: 100px !important; /* Compensate for scale */
         
    }

    .report-bar-chart {
        min-height: 120px !important; /* Ensure the chart has a minimum height */
    }

    .no-page-break {
        page-break-inside: avoid; /* Prevent page breaks inside this element */
    }

    .container-fluid, .card-body {
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden; /* to hide scrollbars */
    }

    #main-navbar {
        display: none; /* Hide the main navbar */
    }
  }
  
  /* =============================================================
  PRINTING
     2.  UPGRADE for modern browsers (≈ 95 % global support)       *
         — removes non-print boxes and restores native display
     ============================================================= */
  @supports (display:revert){
    @media print{
  
      /* Now hard-hide the things we don’t want on the page         */
      body *{
        display:none    !important;
        visibility:visible !important;    /* overrides rule above   */
      }
  
      /* And put the printable bits back to their natural display   */
      .print,
      .print *,
      body *:has(.print){
        display:revert !important;        /* block, flex, grid…     */
      }

      .print-100 {
        width: 100%;
      }
    }
  }

  .bottom-fixed-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      margin: 0;
      padding: 0;
  }

  .downlink-progress-bar {
      /*display: none;*/
      background-color: #fff;
      border-top: 1px solid #aaa;
      opacity: 1.0;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      box-shadow: 0px 0px 2px #ccc;
  }