@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
  --footer-height: 60px;
  --card-gap: 15px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    color: #fff;
    text-align: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--footer-height));
    width: 100%;
}

.main-content {
    flex-grow: 1;
    height: calc(100vh - var(--footer-height));
    overflow: hidden;
    padding: var(--card-gap);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.row {
    display: flex;
    gap: var(--card-gap);
    flex-shrink: 0;
}

.main-content > .row:nth-child(1) { flex: 0 0 8%; } /* Fixed height for Title Row */
.main-content > .row:nth-child(2),
.main-content > .row:nth-child(3),
.main-content > .row.chart-row-4 {
    flex: 1; /* Distribute remaining space equally */
    min-height: 0; /* Prevents flex items from overflowing when content is large */
}


.column {
    display: flex;
    flex-direction: column;
}
.column-100 { flex-basis: 100%; }
.column-75 { flex-basis: 75%; }
.column-25 { /*flex-basis: 25%; */ flex-basis: calc(25% - (var(--card-gap) * 0.75)); /* 25% width minus 3/4 of the gap */ }

.box {
    flex-grow: 1;
    border-radius: 10px;
    #background: linear-gradient(0.4turn, rgba(20,3,87,0.5), rgba(37,13,131,0.5), rgba(16,1,71,0.5));
    #border: 3px solid rgba(52, 41, 170, 1);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px;
    position: relative;
    overflow: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	
}
.box.shaded{
	background-color:#e8e9f6;
}

.box.titlebox {
	background:rgba(52, 41, 170, 1);
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.maintitle {
	
    text-shadow: rgba(0, 0, 0, 0.75) 2px 3px 5px;
    margin: 0;
    font-size: 1.6em;
    font-weight: 600;
}

.top-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    gap: 10px;
}

.data-box {
    text-align: center;
    flex: 1 1 150px;
    padding: 5px;
}
.data-box p { 
	line-height: 1.3; 
	margin-bottom: 5px;
	color: #3429AA
	}

.data {
    font-size: 1.6em;
    font-weight: bold;
    color: #000;
    display: block;
}
#temp, #vlaga {display: inline!important;} /* druga ob drugi, za portratit morda ni najboljš ta */

.vert-divider {
  display: inline-block;
  width: 1px;
  height: 1.2em;
  border-left:1px solid #000;
  margin:0 10px;
  vertical-align: middle;
}

.vreme-contrainer { width: 100%; }
.arso-icon {
    width: 30px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}
#vreme { vertical-align: middle; }

.sun-contrainer { width: 100%; margin-top: 5px;}
.sun-contrainer p { margin-bottom: 5px; }
.sun-icon {
    width: 25px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}
.sun-text { 
	vertical-align: middle; 
	color: #000;
	}

.data-box-SE {
    text-align: left;
    /*line-height: 1.4;*/
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    justify-content: space-evenly;
  	display: flex;
  	flex-direction: column;
}
.data-box-SE h4 {
	color: #3429AA;
    font-size: 1em;
    margin-bottom: 10px;
    font-weight: 600;
}
.data-box-SE p {
	color: #3429AA;
    font-size: 0.8em;
	color: #000;
    /*margin-bottom: 4px;*/
}
.data-box-SE span { font-weight: 600; }
.consumptionSE {font-weight: 600;}
.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#slideshow1,
#slideshow2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 4s ease-in-out;
}

#chartTotal {
    width: 100%;
    height: 100%;
    flex-grow: 1;
}
.chartSE {
    width: 100%;
    flex-shrink: 0;
    align-self: center;
}

.main-content > .row:nth-child(4) .chartSE {
    height: 100%;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #3429AA;
    padding: 5px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    z-index: 10;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
}
footer div { flex: 1; }
footer div:nth-child(1) { text-align: left; flex-basis: 25%; }
footer div:nth-child(2) { text-align: center; flex-basis: 50%;}
footer div:nth-child(3) { text-align: right; flex-basis: 25%;}
footer div img { margin: 10px 10px 10px 0; vertical-align: middle;}
.footertext { font-size: 12px; line-height: 1.3; }


/* ======================================================== */
/* == Fix for Gap Alignment & Column Width Consistency == */
/* ======================================================== */

/* --- Row 3 (Podatki + Total Chart) --- */
/* Explicitly calculate basis accounting for ONE gap */
.main-content > .row:nth-child(3) > .column-25 {
    /* flex-basis: calc(25% - (var(--card-gap) / 2)); /* 25% width minus half the gap */
  flex-basis: calc(25% - (var(--card-gap) * 0.75)); /* 25% width minus 3/4 of the gap */
    flex-grow: 0; /* Prevent growing/shrinking */
    flex-shrink: 0;
}
.main-content > .row:nth-child(3) > .column-75 {
    /* flex-basis: calc(75% - (var(--card-gap) / 2)); /* 75% width minus half the gap */
  flex-basis: calc(75% - (var(--card-gap) /4)); /* 25% width minus 3/4 of the gap */
    flex-grow: 0; /* Prevent growing/shrinking */
    flex-shrink: 0;
}

/* --- Row 4 (Small Charts) --- */
/* Explicitly calculate basis accounting for THREE gaps */
.main-content > .row.chart-row-4 > .column-25 {
    flex-basis: calc(25% - (var(--card-gap) * 0.75)); /* 25% width minus 3/4 of the gap */
    flex-grow: 1; /* Allow growing slightly to fill rounding errors */
    flex-shrink: 0; /* Prevent shrinking below basis */
}


@media screen and (orientation: portrait) {

    .main-content {
        padding: 5px;
        gap: 5px;
    }
    .row { gap: 5px; }

    .vert-hide {
        display: none !important;
    }
    .vert-100 {
        flex-basis: 100% !important;
    }
    .vert-50 {
        flex-basis: calc(50% - var(--card-gap) / 3) !important; /* deljeno s 3 ker so 3je gapi v vrsti*/
        height: calc(50% - var(--card-gap) / 2);
    }

    .maintitle { font-size: 1.3em; }

    .row:nth-child(2) .vert-100 .data {
        font-size: 1.8em;
    }
     .row:nth-child(2) .vert-100 .data-box {
        padding: 2px;
       /* flex-basis: 120px;  DELIMO RAJE V DVE VRSTI 4 boxe*/
       flex-basis: 48%;
    }

    .row.chart-row-4 {
        flex-wrap: wrap;
    }

    .row.chart-row-4 .vert-50 .box {
       padding: 5px;
    }
    .row.chart-row-4 .chartSE {
        height: 100%;
    }

    .footertext { font-size: 10px; }
    footer div img { height: 25px; margin: 0 5px;}
	
  	.copyulfe {display:none;}
  	footer div:nth-child(2) { /* ožji footer text- samo ura*/
  		text-align: center;
  		flex-basis: auto;
	}
	.main-content {overflow-y: auto;}

}

@media (orientation: portrait) and (min-width: 900px) {
  /* TEXT za DATA BOXES večji na porttrait */
    .row:nth-child(2) .vert-100 .data {
       font-size: 2.3em; 
    }
  .data-box p:first-child{
  font-size: 1.5em;
	}
  
  .data-box .sun-contrainer p:nth-child(2)  {
  font-size: 1.5em;
	}

  
}

/* ======================================== */
/* == MOBILNI TELEFONI:MANJŠE RESOLUCIJE == */
/* ======================================== */

@media (max-width: 768px) {

    /* Optional: Adjust base font size for smaller screens */
    html {
        font-size: 15px;
    } 

    .maintitle {
        font-size: 1.0rem; 
        line-height: 1.3;
    }
	.main-content {overflow-y: auto;}
    
  .data {
        font-size: 1.3rem;
    }

    .data-box-SE p {
        font-size: 0.8rem; 
    }

    footer img {
        height: 25px; 
    }

    .footertext {
        font-size: 0.75rem; 
    }

    /* Reduce gap slightly on mobile */
    /* :root {
        --gap-width: 8px;
    } */

    .arso-icon, .sun-icon {
      width: 24px;
      margin-right: 5px;
    }

    .vert-divider {
        margin: 0 8px;
    }
  .copyulfe {display:none;}
  	footer div:nth-child(2) { /* ožji footer text- samo ura*/
  		text-align: center;
  		flex-basis: auto;
      	display:none;
	}
   
 	footer div img { height: 20px!important; }
  footer {position:relative;}
  
  	:root {
  	--footer-height: 40px;
 	}
  
  	
}



@media (max-width: 380px) and (orientation: portrait) {
    .maintitle { font-size: 1.0rem; }
    .data { font-size: 1.1rem; }
    #livePower { font-size: 1.3rem; }
    #temp, #vlaga { font-size: 0.9rem; }
    .data-box p { font-size: 0.7rem; }
     .row.chart-row-4 .chartSE { height: 120px; min-height: 100px; }
     .row.chart-row-4 .vert-50 { min-height: 145px; }
     footer div img { height: 20px; }
     .footertext { font-size: 0.65rem; }
  
}


/*
@media (max-width: 768px) and (orientation: portrait) {

   
     body {
        overflow-y: auto;   
        overflow-x: hidden; 
        height: auto;       
    }

    .container {
        height: auto;       
        overflow: visible;  
    }

    .row-title {
       flex: 0 0 auto;
       height: auto;  
       min-height: 6vh;
    }
    .row-data,
    .row-info,
    .row-charts {
      height: auto;    
      flex: 0 1 auto;   
    }
  
    .column-livedata .data {
        font-size: clamp(1.7rem, 5vw + 0.8rem, 2.3rem);
    }

    /* Ensure footer stacking (from general portrait query) is applied */
    /* Footer styles from the general portrait query should work well here. */
    /* Example: Adjust if needed */
    /* footer { padding: 15px 10px; } */

  
  /*  #chartTotal {
        min-height: 220px; 
    }
    .chartSE {
       min-height: 180px; 
       height: 85%; 
    }

    .box {
        min-height: 100px;
    }
    .column-livedata .box {
        min-height: 160px; 
    }
  
   /* --- Reduce General Spacing --- */
   /* .box {
        padding: 5px 8px; /* Reduce overall padding slightly more */
    /*}
  /*  .main-content {
        padding: 5px;
        gap: 5px; /* Ensure gap is small */
 /*   }
  /*  .row {
        gap: 5px; /* Ensure gap is small */
   /* }

    /* --- NEW NEW - Improve Top Data Section Layout & Sizing --- NEW NEW */ 
  /*  .top-section {
        flex-direction: column; 
        align-items: center;   
        gap: 5px;           
    }
    .top-section .data-box {
        flex-basis: auto;    /* Allow natural height */
  /*      width: 95%;        /* Control width when stacked */
  /*      padding: 5px 0;    /* Adjust vertical padding */
  /*      text-align: center; /* Ensure text is centered */
  /*  }
  /*  .top-section .data-box:not(:last-child) {
         border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional separator */
   /*      margin-bottom: 5px; /* Space below separator */
  /*  }

    .data {
        font-size: 1.2rem; /* Further reduce default data font size */
 /*       margin-top: 2px; /* Add a little space above data */
   /* }
  /*  #livePower { font-size: 1.4rem; } /* Make power slightly larger */
 /*   #temp, #vlaga {
        font-size: 1.0rem; /* Reduce temp/humidity size */
  /*  }
   /* .vert-divider {
        margin: 0 6px; /* Reduce divider margin */
 /*   }
  /*   .data-box p { /* Reduce size of descriptive text */
  /*       font-size: 0.75rem;
         line-height: 1.2;
         margin-bottom: 1px;
     }
    .vreme-contrainer, .sun-contrainer {
        width: auto; /* Allow natural width */
  /*  }
   /*  .arso-icon, .sun-icon {
         width: 22px; /* Slightly smaller icons */
  /*       margin-right: 4px;
     }

    /* --- Reduce Title Size --- */
  /*  .maintitle {
   /*     font-size: 1.1rem; /* Reduce main title size */
 /*   }

    /* --- Address Chart Overlap & Spacing --- */

   /*  .main-content > .row:nth-child(3) { /* Row with #chartTotal */
 /*        margin-bottom: 8px; /* Add explicit bottom margin */
 /*    }

   /* .row.chart-row-4 .vert-50 {
   /*     flex-basis: calc(50% - 3px) !important; /* Adjust basis slightly for 5px gap */
   /*     height: auto; /* Let content dictate height */
   /*     min-height: 160px; /* Ensure minimum space for chart + label */
   /*     margin-bottom: 5px; /* Add space below each chart box */
  /*  }

    .row.chart-row-4 .chartSE {
         height: 130px; /* Try a fixed height for charts */
     /*    min-height: 110px; /* Adjust minimum */
         /* Remove percentage height if it was causing issues */
    /*}

    /*.consumptionSE { /* Text below small charts */
   /*     font-size: 0.75rem; /* Make label smaller */
   /*     padding-top: 4px; /* Add a bit space */
   /*     line-height: 1.1;
   /* }

   /* footer {
   /*  	padding: 8px 5px; /* Adjust padding */
   /*     flex-direction: column; /* Stack all footer content vertically */
    /*    height: auto; /* Auto height */
   /*     position: relative; /* Change from fixed if it overlaps */
   /*     margin-top: 10px; /* Add space above footer */
    /*}
    /*footer div {
        flex-basis: auto !important; /* Reset basis */
  /*      width: 100%;
  /*      text-align: center !important; /* Center all footer sections */
  /*      margin-bottom: 8px; /* Space between stacked divs */
 /*   }
   /* footer div:last-child {
   /*     margin-bottom: 0;
  /*  }
  /*  footer div img {
  /*      height: 22px; /* Smaller logos */
   /*     margin: 0 5px;
  /*  }
  /*  .footertext {
  /*      font-size: 0.7rem; /* Smaller footer text */
  /*      line-height: 1.2;
  /*  }
    /* .container {
   /*       padding-bottom: 10px; /* Add space at the bottom if footer isn't fixed */
   /*  }
     /*body {
          /* Ensure enough height if footer is relative now */
         /* height: auto; */
   /*  }

} */