@font-face{
  font-family: sahel;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/Climatic/assets/fonts/Sahel/Sahel-FD.woff2') format('woff2'),
       url('/Climatic/assets/fonts/Sahel/Sahel-FD.woff') format('woff');
}


/* style.css */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#6b7280; --line:#e5e7eb; --accent:#2563eb;
  --red:#ef4444; --blue:#3b82f6; --green:#16a34a; --card:#ffffff;
  --topbar-h:56px; --footer-h:44px;
}
html,body{background:var(--bg);color:var(--fg);height:100%; font-family: monospace;}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:.35rem .75rem;min-height:var(--topbar-h)}
.topbar .title{font-weight:700;font-size:1.6rem}
.muted{color:var(--muted)}

.stat-card{background:var(--card);border:1px solid var(--line);border-radius:.75rem;text-align: -webkit-center;}
.stat-title {
    color: var(--muted);
    font-size: .9rem;
    text-align: left;
	white-space: nowrap;
}
.stat-value{font-size:1.2rem !important;font-weight:600}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}

.delta.up, .delta.down {
    white-space: nowrap;
    font-size: 0.7em;
}

.wx-icon-wrap{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#e0f2fe,#e9d5ff);color:#0f172a}
.wx-icon-wrap i{font-size:28px}
.wx-icon-wrap.wx-xl i{font-size:42px}
.btn-icon{height:30px;display:inline-flex;align-items:center;justify-content:center}

#goToday{height:38px;}

.site-brand { line-height: 1; font-size: 1rem; }
.site-brand .brand-icon { width:160px; height:auto; }
.topbar .site-brand { font-weight:700; font-size:1.6rem; }


/* single themed card */
#boxWeather.sunny{background:linear-gradient(180deg,#fff9e6,#fff)}
#boxWeather.cloudy{background:linear-gradient(180deg,#f4f7fb,#fff)}
#boxWeather.rainy{background:linear-gradient(180deg,#edf4ff,#fff);overflow-x: hidden;}
#boxWeather.snowy{background:linear-gradient(180deg,#f5fbff,#fff)}
#boxWeather.storm{background:linear-gradient(180deg,#fef2f2,#fff)}

footer{border-top:1px solid var(--line);padding:.75rem;color:#6b7280;font-size:.9rem}
.monosmall{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}

/* equal height columns full viewport */
.row.equalize{min-height:calc(100vh - var(--topbar-h) - var(--footer-h));align-items:stretch}
.col-stretch{display:flex;flex-direction:column}
#sidebarWrap{flex:1 1 auto;overflow:inherit;position:relative;}
#chartWrap{flex:0 0 auto; overflow:visible;}
#chart{width:100%; min-height:400px; margin-top: 2rem; border-radius: 10px; background: linear-gradient(180deg, #edf4ff, #fff); border-radius: .75rem; border: 1px solid #e5e7eb;}

/* controls below the chart */
.controls-bar{padding:.5rem .75rem;background:#fff}

/* mobile: hide the clock block */
@media (max-width: 576px){
  .topbar #time-area{display:none !important}
}

.wx-hero .wx-icon-wrap{width:100%;height:90px;display:grid;place-items:center}
.wx-hero .wx-icon-wrap i{font-size:50px}
.wx-nav-bottom{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.75rem}

.select2-container--default .select2-selection--single{
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem;
  font-size: .875rem;  
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: .375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 1.5;
  font-size: .875rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 100%;
}

@media (max-width: 576px){
  #boxWeather .wx-hero,
  #boxWeather .row > [class*="col-"]{
    text-align: center;
  }
}

@media (max-width: 420px){
  #footerMeta{ display:none; }
}

@media (max-width: 576px){
  .topbar{ justify-content: space-between !important; }
  .topbar .title{ font-size:1.25rem; }
}



#chart{ display:block; }
#chartWrap.hscroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: .5rem;
}

#chartHost{
  min-width: 500px;
}

#chart{
  width: 100%;
  min-height: 400px;
  display: block;
}

@media (max-width:576px){
  #chart{ min-height: 360px; }
}

@media (max-width:576px){
  footer .d-flex{ justify-content:center !important; }
  #footerCopy{ width:100%; text-align:center; }
}

#nowWX{
    font-size: 3rem;
    line-height: 1em;
}

@media (max-width:576px){
  footer .d-flex{ justify-content:center !important; }
  #footerCopy{ width:100%; text-align:center; }
}

#chartWrap.hscroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action: pan-x;
}


.hscroll { overflow-x: hidden; }
@media (max-width: 576px){
  .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #chartHost { min-width: 100%; }
}
@media (min-width: 577px){
  #chartHost { width: 100% !important; }
}

.apexcharts-legend-group-vertical {
    flex-direction: row !important;
}

/* Slide-in settings panel (right) */
.settings-panel{
  position: fixed;
  top: 0; right: -360px;
  display:none;
  width: 360px; max-width: 90vw;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -6px 0 16px rgba(0,0,0,.06);
  z-index: 9999;
  transition: right .25s ease;
  flex-direction: column;
}
.settings-panel.open{ right: 0; display: flex !important; }

.settings-header{ padding:.75rem 1rem; border-bottom:1px solid var(--line); }

.settings-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(2px);
  z-index: 1999; display: none;
}
.settings-backdrop.show{ display:block; }

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    padding: 9px;
}

#citySearch {
    font-size: 1.2em;
}

#demo-alert {
    width: fit-content;
    font-size: 1.1rem;
    font-weight: 600;
}

.stat-title {
    text-align: left;
}

.wx-loader{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:120px; color:#6b7280; gap:.5rem; font-size:.9rem;
}
.wx-loader .spinner-border{ width:2rem; height:2rem; }
.wx-loader.is-overlay{
  position:absolute; inset:0; z-index:20;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(1.2) blur(1px);
}
.tab-content{ position:relative; }
#citySearchWrap{ position:relative; }

.apexcharts-text.apexcharts-no-data{ display:none !important; }

.stat-value .u { font-size:.6em; margin-left:2px; }

#citySearchWrap { position: relative;}

#sidebarLoading.is-overlay { pointer-events: none; }

/* Settings backdrop: remove dim */
#settingsBackdrop,
#settingsBackdrop.show {
  background: transparent !important;
}

#aiWeatherContent { font-variant-ligatures: none; }
#aiWeatherContent.ai-rtl {
  font-family: sahel, Tahoma, "IRANSans", ui-sans-serif, system-ui;
}
#aiWeatherContent.ai-ltr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.hscroll { 
  overflow-x: auto; 
  overflow-y: hidden; 
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

#chartHostDaily, #chartHostToday {
  min-width: 800px;
  width: auto;
}

#chartDaily, #chartToday {
  width: 100%;
  min-height: 400px;
}

@media (min-width: 992px) {
  #chartHostDaily, #chartHostToday {
    min-width: 100%;
    width: 100%;
  }
  
  .hscroll {
    overflow-x: visible;
  }
}

@media (max-width: 991px) {
  .hscroll::-webkit-scrollbar {
    height: 8px;
  }
  
  .hscroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  .hscroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
  
  .hscroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

/* index.php -> <head> -> <style> */

.aq-gauges-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 25px;
    padding: 20px 15px;
    overflow-x: auto;
    direction: ltr;
    justify-items: center;
    justify-content: flex-start;
}

.aq-gauge {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.aq-gauge-visual {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 340px;
    justify-content: center;
}

.aq-gauge-bar-wrap {
    position: relative;
    width: 55px;
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    border: 0;
}

.aq-gauge-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease-out, background-color 0.5s;
}

.aq-gauge-bar-value {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
    color: #000000;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 0 3px rgb(119 119 119 / 70%);
    z-index: 3;
    pointer-events: none;
}
.aq-gauge-bar-value .u {
     font-size: 0.8em;
}

.aq-gauge-limit {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-bottom: 2px dashed rgb(0 0 0 / 14%);
    z-index: 2;
    transition: bottom 0.5s 
ease-out;
}

.aq-gauge-labels-wrap {
    height: 100%;
    position: relative;
    width: 15px;
    z-index: 10;
}

.aq-gauge-label-text {
    position: absolute;
    transform: rotate(-75deg);
    transform-origin: center;
    font-size: 9px;
    color: #848484;
    white-space: nowrap;
    font-weight: 600;
    z-index: 5;
}

.aq-gauge-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

.aq-gauge-bar.status-good { background-color: #4CAF50; }
.aq-gauge-bar.status-moderate { background-color: #FFC107; }
.aq-gauge-bar.status-poor { background-color: #f44336; }

@media (max-width: 991.98px) {
    #boxWeather .row,
    #additionalWeatherData .row {
        --bs-gutter-x: 0.5rem !important; 
    }
}

/* =========================
   Performance Overrides
   ========================= */

/* ۱) حذف blur های سنگین (GPU killer) */
.settings-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,.12) !important; /* فقط دیم ساده */
}

.wx-loader.is-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,.85) !important;
}

/* ۲) احترام به تنظیمات کاهش حرکت سیستم (کم کردن رندرهای اضافی) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ۳) اگر روی موبایل/دستگاه ضعیف هستید، سایه‌ها را کمی سبک‌تر کنید */
@media (max-width: 576px) {
  .stat-card {
    box-shadow: none !important;
  }
}