:root{
  --bg1:#1e3c72; --bg2:#2a5298;
  --accent1:#ff512f; --accent2:#dd2476;
  --glass: rgba(255,255,255,0.12);
  --glass-strong: rgba(255,255,255,0.18);
  --text:#ffffff;
  --muted: rgba(255,255,255,0.85);
  --ring:#ffffff;
  --success:#2bd67b; --warning:#ffd166; --info:#7ed0ff;

  /* Fluid type scales */
  --fs-xs: clamp(11px, 0.85vw, 12px);
  --fs-sm: clamp(12px, 1vw, 14px);
  --fs-md: clamp(14px, 1.4vw, 16px);
  --fs-lg: clamp(16px, 2vw, 18px);
  --fs-xl: clamp(22px, 4vw, 36px);
  --fs-xxl: clamp(28px, 6vw, 56px);
  
  
  
}
[data-theme="light"]{
  --bg1:#f1f5f9; --bg2:#e2e8f0;
  --accent1:#7c3aed; --accent2:#06b6d4;
  --glass: rgba(0,0,0,0.06);
  --glass-strong: rgba(0,0,0,0.12);
  --text:#0f172a;
  --muted: rgba(15,23,42,0.8);
  --ring:#0f172a;
  --success:#10b981; --warning:#f59e0b; --info:#0ea5e9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* CONTAINER LAYOUT */
.container{min-height:100vh; display:flex; flex-direction:column;}
.top-half{min-height:40vh; display:flex; padding:16px; gap:16px; flex-wrap:wrap;}
.section1,.section2,.section3{
  flex:1 1 280px; background:var(--glass); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:20px; display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  color:var(--text); transition:transform .3s ease, box-shadow .3s ease; position:relative; overflow:hidden;
  border:1px solid var(--glass-strong); padding:16px;
}
.section1::after,.section2::after,.section3::after{
  content:""; position:absolute; inset:auto -30% -30% auto; width:140px; height:140px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.25), transparent);
  transform: rotate(25deg); pointer-events:none;
}
@media (hover:hover){
  .section1:hover,.section2:hover,.section3:hover{
    transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.35);
  }
}
.section1 h3,.section2 h3,.section3 h3{margin:0 0 8px 0; opacity:0.9; font-weight:600; font-size:var(--fs-lg)}
.section1 h1,.section3 h1{margin:0; font-size:var(--fs-xl)}

/* === SECTION 2 — Live Sehri/Iftar widget (consolidated & fluid) === */
.section2 { align-items: center; text-align: center; }
.section2 > h3 { text-align: center; }

.sehir-iftar-card{
  width:100%; max-width:900px; margin:0 auto;
  padding: clamp(16px, 3.5vw, 24px);
  border-radius:18px;
  background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
  text-align:center;
}

/* Header */
.si-header{
  display:flex; justify-content:center; align-items:baseline; gap: clamp(10px, 2vw, 16px);
  margin-bottom:10px; flex-wrap:wrap;
}
.si-title{letter-spacing:0.4px; font-weight:700; opacity:0.95; font-size: clamp(15px, 2.3vw, 18px);}
.si-sub{opacity:0.85; font-size: clamp(11px, 1.8vw, 13px);}

/* Countdown */
.si-countdown{
  display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(10px, 2.4vw, 18px);
  margin:10px 0 8px;
}
.si-unit{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex: 1 1 96px; /* grow, wrap nicely */
  min-width: clamp(78px, 20vw, 110px);
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
  border-radius:14px; padding: clamp(8px, 2vw, 12px);
}
.si-unit div{
  font-size: var(--fs-xxl); /* fluid big digits */
  font-weight:800; line-height:1.05; letter-spacing:.5px;
}
.si-unit small{
  opacity:0.9; letter-spacing:1.2px; font-size: clamp(10px, 1.7vw, 12px);
  margin-top:2px;
}

/* Helper & Progress */
.si-helper{
  margin: 10px 2px 14px;
  font-size: clamp(13px, 2.6vw, 16px);
  opacity:0.95;
}
.si-progress{ margin:10px auto 16px; max-width: min(720px, 100%); }
.si-progress-line{
  height: 10px; border-radius:999px; background:rgba(255,255,255,0.18); position:relative; overflow:hidden
}
.si-progress-line::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:50%;
  background:linear-gradient(90deg, rgba(255,255,255,0.45), rgba(255,255,255,0.15));
}
.si-progress-dot{
  position:absolute; top:50%; transform:translate(-50%, -50%);
  width:16px; height:16px; background:#fff; border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,0.25)
}
.si-progress-legend{
  display:flex; justify-content:space-between; gap:12px;
  font-size: clamp(10px, 1.7vw, 12px); opacity:0.85; margin-top:6px
}

/* Footer stats */
.si-footer{
  display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:12px;
  max-width:900px; margin-left:auto; margin-right:auto;
}
.si-col{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22);
  border-radius:14px; padding:12px; text-align:center
}
.si-label{opacity:0.9; font-size: clamp(11px,1.6vw,13px); margin-bottom:4px}
.si-time{
  font-size: clamp(22px, 5.4vw, 36px);
  font-weight:900; letter-spacing:.3px
}
.si-note{opacity:0.85; font-size: clamp(10px,1.6vw,12px); margin-top:2px}

/* BOTTOM / SECTION 4 */
.bottom-half{min-height:60vh; padding:16px;}
.bottom-section{
  height:100%; border-radius:25px; background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:var(--text); padding:0; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; border:1px solid var(--glass-strong);
}

/* HEADER BAR */
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 16px; background:rgba(0,0,0,0.2); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position:sticky; top: env(safe-area-inset-top, 0); z-index:5;
  border-bottom:1px solid var(--glass-strong);
}
.toolbar-left, .toolbar-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.toolbar h1{margin:0; font-size:var(--fs-lg); letter-spacing:0.3px}
.select, .btn{
  appearance:none; border:none; outline:none; border-radius:10px; padding:10px 12px; background:var(--glass);
  color:var(--text); border:1px solid var(--glass-strong); font-size:var(--fs-sm);
}
.btn{cursor:pointer; transition:background-color .2s ease, transform .2s ease; display:inline-flex; align-items:center; gap:8px}
@media (hover:hover){ .btn:hover{background:var(--glass-strong)} }
.btn.primary{background:#ffffff; color:#dd2476; font-weight:600}
.btn.ghost{background:transparent; border:1px dashed rgba(255,255,255,0.35)}
.toggle{
  display:inline-flex; background:var(--glass); border:1px solid var(--glass-strong); border-radius:10px; overflow:hidden;
}
.toggle button{padding:10px 14px; background:transparent; color:var(--text); border:none; cursor:pointer}
.toggle button.active{background:#ffffff; color:#dd2476; font-weight:700}

/* STATS STRIP */
.stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; padding:14px 16px; background:rgba(0,0,0,0.12);
  border-bottom:1px solid var(--glass-strong);
}
.stat{
  background:var(--glass); border:1px solid var(--glass-strong); border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:12px; min-width:0;
}
.stat .dot{width:10px; height:10px; border-radius:50%}
.stat .label{font-size:var(--fs-sm); opacity:0.9; overflow-wrap:anywhere}
.stat .value{font-size: clamp(16px, 2.6vw, 18px); font-weight:700}

/* CONTENT AREA */
.content{padding:16px; overflow:auto; height:100%}

/* TABLE */
.table-wrap{
  overflow:auto; border-radius:12px; background:rgba(0,0,0,0.15); border:1px solid var(--glass-strong);
  -webkit-overflow-scrolling: touch;
}
table{width:100%; border-collapse:collapse; min-width:720px; color:#fff; font-size:var(--fs-sm)}
thead th{position:sticky; top:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); text-align:left; padding:12px; font-weight:600}
tbody td{padding:10px 12px; border-top:1px solid rgba(255,255,255,0.15)}
tbody tr:nth-child(even){background:rgba(255,255,255,0.06)}
tbody tr:hover{background:rgba(255,255,255,0.18)}
.today-row{outline:2px solid var(--ring); box-shadow:inset 0 0 0 9999px rgba(255,255,255,0.08)}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; background:#fff; color:#dd2476; font-size:11px; font-weight:700; margin-left:8px}

/* GRID VIEW */
.calendar{display:grid; grid-template-columns: repeat(7,1fr); gap:12px}
.card{
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); padding:12px; border-radius:12px; transition:transform .2s ease, background-color .2s ease
}
@media (hover:hover){ .card:hover{transform:translateY(-3px); background:rgba(255,255,255,0.2)} }
.card .roza{font-weight:800; font-size:16px; margin-bottom:6px}
.card .meta{font-size:12px; opacity:0.95; margin-bottom:6px}
.card .times{display:flex; justify-content:space-between; font-size:13px; gap:8px; flex-wrap:wrap}
.card.today{border:2px solid #fff; box-shadow:0 0 0 3px rgba(255,255,255,0.25) inset, 0 0 12px rgba(255,255,255,0.5)}

/* STATUS / FOOTER */
.footer{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 16px; border-top:1px solid var(--glass-strong); background:rgba(0,0,0,0.18)
}
.muted{opacity:0.92; font-size:var(--fs-xs)}

/* ==== Zakat card (Section 1) ==== */
.zakat-card{
  width:100%; max-width:820px; margin:8px auto 0;
  background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.22);
  border-radius:18px; padding:16px; box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
.z-row{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.z-row label{font-size:var(--fs-sm); opacity:0.95}
.z-row input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08); color:#fff; font-size:14px; outline:none;
}
.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn.mini{padding:8px 10px; font-size:12px; border:1px solid var(--glass-strong); background:var(--glass); color:var(--text); border-radius:10px; cursor:pointer}
@media (hover:hover){ .btn.mini:hover{background:var(--glass-strong)} }
.z-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.z-actions{display:flex; gap:10px; justify-content:center; margin:10px 0 2px; flex-wrap:wrap}
.z-results{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px}
.z-kpi{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); border-radius:14px; padding:12px; text-align:center}
.kpi-label{font-size:12px; opacity:0.9; margin-bottom:6px}
.kpi-value{font-size:15px; font-weight:800}
.z-foot{margin-top:10px; text-align:center; font-size:12px}

/* ==== Section 3 — Duas (Iftar & Sehri) ==== */
.dua-wrap{
  width:100%;
  max-width:900px;
  margin:4px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.dua-card{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:16px;
  padding:16px 16px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position:relative;
}
.dua-title{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px; margin-bottom:8px; }
.dua-ar{ font-size: clamp(18px, 3.8vw, 22px); line-height:1.7; text-align:center; margin:8px 0 6px; }
.dua-tr{ font-size:var(--fs-sm); opacity:.95; text-align:center; margin-bottom:6px; }
.dua-en{ font-size:var(--fs-sm); opacity:.92; text-align:center; }
.dua-actions{ display:flex; justify-content:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.btn.tiny{
  padding:6px 10px; font-size:12px; border-radius:10px;
  border:1px solid var(--glass-strong); background:var(--glass); color:var(--text);
  cursor:pointer;
}
@media (hover:hover){ .btn.tiny:hover{ background:var(--glass-strong); } }
.dua-note{ margin-top:6px; text-align:center; font-size:11px; opacity:.85; }

/* ====== RESPONSIVE BREAKPOINTS ====== */

/* Tablets and below */
@media (max-width: 900px){
  .calendar{grid-template-columns: repeat(3,1fr)}
  .stats{grid-template-columns:1fr}
  .z-grid{grid-template-columns:1fr}
  .z-results{grid-template-columns:1fr}
  .dua-wrap{ grid-template-columns: 1fr; }
  .si-footer{ grid-template-columns:1fr; }
}

/* Large phones and below */
@media (max-width: 700px){
  .top-half{padding:12px; gap:12px}
  .si-countdown{ gap:12px }
  .si-unit{ min-width: 86px }
  .toolbar-left{width:100%}
}

/* Phones */
@media (max-width: 600px){
  .calendar{grid-template-columns: repeat(2,1fr)}
  .sehir-iftar-card{ padding:18px }
  .si-unit{ min-width: 78px }
}

/* Small phones */
@media (max-width: 420px){
  .calendar{grid-template-columns: 1fr}
  .si-countdown{ gap:10px }
  .si-unit{ min-width: 72px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
}

/* Company logo + name in Section 2 */
.company-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    justify-content: center;
}

.company-wrap img {
    width: 42px;         /* adjust size */
    height: auto;
    display: block;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.35));
}

.company-wrap span {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
    opacity: 0.95;
}

/* Responsive logo scaling */
@media (max-width: 500px){
    .company-wrap img {
        width: 32px;
    }
    .company-wrap span {
        font-size: var(--fs-md);
    }
}


/* =========================================
   SECTION 4 — Mobile readability & wrapping
   ========================================= */

/* Let text wrap naturally in toolbar, stats, and table area */
.toolbar, .stats, .content, .table-wrap, .calendar {
  overflow-wrap: anywhere;      /* allows breaking long words anywhere */
  word-break: normal;
}

/* Toolbar typography and spacing adjustments */
.toolbar h1{
  /* shrink heading gracefully on small screens */
  font-size: clamp(14px, 4.2vw, var(--fs-lg));
  line-height: 1.2;
  margin-right: 4px;
}

.select, .btn{
  /* allow select/button text to wrap instead of forcing overflow */
  white-space: normal;
  line-height: 1.15;
  padding: 8px 10px;            /* slightly tighter on mobile */
}

/* Reduce gaps so controls fit better */
.toolbar-left, .toolbar-right{
  gap: 8px;
}

/* Stats strip: allow label & value to wrap, and scale down */
.stat{
  align-items: flex-start;      /* let label+value wrap onto next line */
}
.stat .label{
  font-size: clamp(10px, 2.8vw, 13px);
  line-height: 1.25;
}
.stat .value{
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.15;
}

/* Table: allow wrapping of long weekday/city/time strings */
.table-wrap{
  overflow-x: auto;             /* keep horizontal scroll if needed */
  -webkit-overflow-scrolling: touch;
}
table{
  min-width: 560px;             /* reduce from 720px to fit narrow phones better */
  font-size: clamp(11px, 2.8vw, var(--fs-sm));
}
thead th, tbody td{
  white-space: normal;          /* allow wrapping */
  line-height: 1.25;
  vertical-align: top;
  padding: 8px 10px;            /* tighten */
}

/* Badge size inside table rows */
.badge{
  font-size: 10px;
  padding: 2px 6px;
}

/* Calendar cards (Grid view): smaller type and allow wrap */
.card .roza{ font-size: clamp(13px, 3.4vw, 16px); }
.card .meta{ font-size: clamp(10px, 2.8vw, 12px); }
.card .times{ font-size: clamp(11px, 3vw, 13px); }

/* ===== Target narrow screens ===== */
@media (max-width: 700px){
  /* Toolbar: let the left group take full width, push filters below */
  .toolbar-left{
    width: 100%;
  }
  .toolbar{
    gap: 10px;
    padding: 12px;
  }

  /* Space optimization for control cluster */
  .select, .btn{
    padding: 8px 10px;
    font-size: clamp(11px, 2.9vw, 13px);
  }

  /* Toggle buttons stack tighter */
  .toggle button{
    padding: 8px 10px;
  }

  /* Stats: one column (already done), tighten padding */
  .stats{
    gap: 10px;
    padding: 12px;
  }
  .stat{
    padding: 10px 12px;
  }

  /* Table wrapper padding reduced inside .content if desired */
  .content{
    padding: 12px;
  }
}

/* ===== Very small phones ===== */
@media (max-width: 420px){
  /* Let heading and selects wrap without overflow */
  .toolbar h1{
    font-size: clamp(13px, 4.5vw, 16px);
  }
  .select, .btn{
    font-size: clamp(10px, 3.2vw, 12px);
    padding: 7px 9px;
  }

  /* Table: further compact */
  table{
    min-width: 520px;
  }
  thead th, tbody td{
    padding: 7px 8px;
  }

  /* Stats */
  .stat .label{ font-size: clamp(10px, 3.2vw, 12px); }
  .stat .value{ font-size: clamp(13px, 3.8vw, 16px); }
}

/* ===== Optional: super-compact labels for specific columns ===== */
/* If weekday strings are still too long, apply narrower font features */
@supports (font-variant-caps: small-caps){
  .calendar .meta, #ramadanTable td:nth-child(3){
    font-variant-caps: small-caps;
    letter-spacing: .2px;
  }
}