/* Salah Wheel — styles. Light, paper-like theme echoing the reference
 * diagram. Layout uses logical properties so RTL (Arabic) just works. */

:root {
  --bg: #f6f3ec;
  --face: #fdfbf7;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #d8d2c6;
  --green: #1d7a43;
  --green-soft: #3d9e62;
  --orange: #e08a00;
  --red: #c0392b;
  --accent: #1f2937;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Naskh Arabic", "Geeza Pro", sans-serif;
}

html[lang="ar"] body { letter-spacing: 0; }

main { max-width: 720px; margin: 0 auto; padding: 0 12px 32px; overflow-x: clip; }

/* ------------------------------- header ------------------------------ */

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 6px;
}
.app-header h1 { font-size: 1.35rem; margin: 0; }
/* language/settings/dev-toggle dead-center on the title row — absolute
 * centering + forced LTR order + a fixed lang-button width, so neither
 * the direction flip nor the label change moves any of the three */
.head-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  direction: ltr;
}
#btnLang { width: 92px; text-align: center; }
/* no room to center the actions beside the title — fall back to a
 * normal row with the actions pushed to the end */
@media (max-width: 560px) {
  .head-actions {
    position: static;
    transform: none;
    margin-inline-start: auto;
    gap: 6px;
  }
  #btnLang { width: auto; }
  .app-header h1 { font-size: 1.2rem; }
}
.head-actions .btn.active {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}

.tabs {
  display: flex;
  gap: 6px;
  max-width: 720px;
  margin: 0 auto 10px;
  padding: 0 16px;
}
.tab {
  border: 1px solid var(--line);
  background: var(--face);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.95rem;
  cursor: pointer;
}
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------- buttons ----------------------------- */

.btn {
  border: 1px solid var(--line);
  background: var(--face);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.ghost { background: transparent; }
.btn.pill { border-radius: 999px; }
.btn.wide { width: 100%; }
/* ‹ › live OUTSIDE the wheel's box (absolutely positioned at the seam
 * between the wheel and the details card below): on a phone the wheel
 * gets the full screen width, and on wider screens the buttons sit
 * beyond the card's side lines */
.btn.nav-arrow {
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  position: absolute;
  bottom: 6px;
  z-index: 2;
  background: rgba(253, 251, 247, 0.95);
  border-color: #b9b09e;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
#btnPrevSeg { inset-inline-start: -58px; }
#btnNextSeg { inset-inline-end: -58px; }
/* no room beside the column: the buttons would land ON the dial, so they
 * go away — dragging the band and tapping the prayer-list rows both
 * navigate (per feedback: remove them in the shrunk case) */
@media (max-width: 880px) {
  .btn.nav-arrow { display: none; }
}

/* ------------------------------ wheel view --------------------------- */

.loc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "loc today"
    "date date";
  gap: 2px 10px;
  align-items: center;
  margin: 4px 2px 8px;
}
.loc-chip { grid-area: loc; min-width: 0; }
.date-line {
  grid-area: date;
  min-width: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* read-only location status (changed only in settings) — reads as a labelled
   fact, not a button: no border/background, no pointer */
.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

/* date carousel: a straight, slidable row of days; the selection snaps
 * to the middle. Lives above the wheel so any date can be browsed. */
.date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
/* wrapper is a non-scrolling box matching the visible strip — it hosts a
   fixed ▾ caret the dates glide under (a stationary pointer, so nothing has
   to light up or fade as you scroll). The caret sits ABOVE the row, clear
   of the wheel content below. */
.date-strip-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 9px;
}
.date-strip-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--accent);
}
.date-strip {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* half-width side padding lets the first/last cells reach the center */
  padding: 3px 50%;
  scrollbar-width: none;
  cursor: grab;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-strip.dragging { cursor: grabbing; }
.date-strip.dragging .date-cell { cursor: grabbing; }
.date-cell {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 52px;
  padding: 4px 8px 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--face);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.date-cell:hover { border-color: var(--muted); }
.date-cell .dow { font-size: 0.66rem; color: var(--muted); font-weight: 600; }
.date-cell .dnum { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.date-cell.today { border-color: var(--green); border-width: 1.5px; }
.date-cell.today .dow { color: var(--green); }
/* the selected date carries no fill of its own — the fixed dot beneath the
   centre points at it, so nothing lights up or pops as the strip scrolls
   (.selected stays as a logical hook for centring the chosen cell) */
/* date-reset chip — top row beside location; the date string has its own
   row below so long civil/hijri text never shoves this onto a new line */
.today-jump {
  grid-area: today;
  flex: 0 0 auto;
  font-size: 0.85rem;
  padding: 5px 12px;
}
.today-jump.today-jump--hold {
  visibility: hidden;
  pointer-events: none;
}

/* single panel toggle: shows the OTHER panel's name (⇄ Timetable / ⇄ Today)
   and switches to it with a slide so it feels like moving between screens */
.panel-toggle { font-weight: 600; }
@keyframes paneInRight {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes paneInLeft {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: none; }
}
.view.slide-right { animation: paneInRight 0.22s ease both; }
.view.slide-left { animation: paneInLeft 0.22s ease both; }

/* developer year-play: lives beside the tabs, only in dev mode */
.tab.year-play.active { background: var(--red); border-color: var(--red); color: #fff; }

/* status banner — the hukm of this moment, one actionable line */
.status-line {
  border: 1.5px solid;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 2px 0 10px;
  font-weight: 600;
  line-height: 1.45;
}

/* vertical chronological list: times + check-off in one element */
.prayer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px;
}
.prayer-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.row-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--face);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 1.04rem;
  cursor: pointer;
  text-align: start;
}
.row-main:hover { border-color: var(--muted); }
.prayer-row.now .row-main {
  border-color: var(--green);
  border-width: 2px;
  background: #eaf4ed;
}
.prayer-row.missed .row-name { color: var(--red); }
.row-name { font-weight: 700; }
.row-sub { color: var(--muted); font-size: 0.8rem; }
.row-time { margin-inline-start: auto; font-weight: 600; color: var(--ink); font-size: 1.08em; }
.prayer-row .row-main .row-time { font-variant-numeric: tabular-nums; }
.row-badge {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}
.row-badge.now { background: var(--green); color: #fff; }
.row-badge.next { border: 1.5px solid var(--muted); color: var(--muted); }
.row-check {
  flex: 0 0 auto;
  width: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--face);
  color: #c8c2b4;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.row-check:hover { border-color: var(--muted); }
.row-check.done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.row-check.missed { border-color: var(--red); color: var(--red); }

.hl-note { margin: -4px 2px 12px; }

.wheel-wrap { width: 100%; }
#wheelSvg { width: 100%; height: auto; display: block; }
#wheelSvg .seg { cursor: pointer; transition: fill-opacity 0.15s; }
#wheelSvg .seg:hover { fill-opacity: 1; }
#wheelSvg .bevel { cursor: pointer; }
#wheelSvg .sun-live-ring,
#zoomSvg .sun-live-ring {
  animation: sunLivePulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sunLivePulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.zoom-legend {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 4px 0 2px;
}

/* ------------------------------ zoom view ---------------------------- */

.zoom-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}
.zoom-title { font-size: 1.15rem; font-weight: 700; }

.zoom-top { position: relative; }
.complication { width: 100%; }
#zoomSvg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: pan-y;
  cursor: grab;
}
#zoomSvg:active { cursor: grabbing; }

.seg-details {
  background: var(--face);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 10px;
}
.det-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.det-head h2 { margin: 0; font-size: 1.35rem; }
.hukm-badge {
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.det-range { color: var(--muted); margin-top: 6px; font-size: 0.95rem; }
.ends-in { font-weight: 600; color: var(--ink); }
.det-desc { margin: 10px 0 4px; line-height: 1.55; }

.det-alert {
  border: 1.5px solid;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0 4px;
  font-weight: 500;
  line-height: 1.5;
}
.det-alert-sub {
  margin-top: 6px;
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.85;
}

.ruling-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ruling-list li {
  display: flex;
  gap: 8px 12px;
  align-items: flex-start;
  /* tight columns (phones, rows beside a rakʿah card): the body wraps
   * UNDER its chip and takes the full width instead of squeezing into
   * a sliver — width-driven, no breakpoints */
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.ruling-body { flex: 1 1 240px; min-width: 0; }
.ruling-chip {
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
  flex: 0 0 auto;
}
.ruling-title { font-weight: 600; line-height: 1.4; }
.ruling-note { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-top: 2px; }

.prayed-toggle {
  margin-inline-start: auto;
  border: 1.5px solid var(--green);
  background: transparent;
  color: var(--green);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.prayed-toggle.done {
  background: var(--green);
  color: #fff;
}

/* one rakʿah unit: count card on one side, its rulings beside it */
.unit-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}
.unit-row .rakat-card { flex: 0 0 auto; min-width: 64px; }
.unit-ruls { flex: 1 1 auto; margin: 0 !important; }
.unit-ruls li { border-top: none !important; padding-top: 0 !important; }
.unit-ruls li + li { margin-top: 8px; }

.rakat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.rakat-card {
  border: 1.5px solid;
  border-radius: 12px;
  padding: 6px 12px;
  text-align: center;
  min-width: 52px;
  background: #fff;
}
.rakat-card .n { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.rakat-card .lab { font-size: 0.72rem; font-weight: 600; margin-top: 1px; }
.rakat-card.main {
  padding: 10px 18px;
  min-width: 64px;
}
.rakat-card.main .n { font-size: 1.6rem; color: #fff; }
.rakat-card.main .lab { font-size: 0.8rem; color: #fff; }
/* witr: wajib — filled like the fard, a step smaller */
.rakat-card.strong { padding: 8px 15px; min-width: 58px; }
.rakat-card.strong .n { font-size: 1.35rem; color: #fff; }
.rakat-card.strong .lab { font-size: 0.75rem; color: #fff; }
/* non-emphasized (mustahabb) sets */
.rakat-card.opt { border-style: dashed; }

/* ------------------------------ chart view --------------------------- */

/* No nested scroll box: the table flows in the page so there is ONE
 * scrollbar (the page), and the sticky header pins to the viewport top as
 * you scroll. overflow-x stays auto as a safety valve for very narrow
 * screens, but the compact layout below is sized to fit a phone without it. */
.chart-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--face);
}
#chartTable { border-collapse: collapse; width: 100%; }
#chartTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--accent);
  color: #fff;
  padding: 9px 8px;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
}
#chartTable td {
  padding: 7px 8px;
  text-align: center;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
#chartTable .cell-date { font-weight: 600; text-align: start; line-height: 1.25; }
/* the hijri sub-line may wrap (e.g. "… · Today" on row 0) so it never
 * forces the date column wider than the gregorian line above it */
#chartTable .cell-date .hijri { display: block; white-space: normal; color: var(--muted); font-weight: 400; font-size: 0.78rem; }
#chartTable tr.today td { background: #eaf4ed; }

/* Phone widths: shrink padding + type so all columns fit one window with
 * no horizontal scroll (the date carries the hijri line, so there is one
 * fewer column to fit). */
@media (max-width: 480px) {
  #chartTable th { padding: 8px 4px; font-size: 0.72rem; }
  #chartTable td { padding: 6px 4px; font-size: 0.78rem; }
  #chartTable .cell-date .hijri { font-size: 0.68rem; }
  /* drop AM/PM on phones — column header + context make it unambiguous */
  #chartTable .ampm { display: none; }
}
.chart-more { text-align: center; margin-top: 12px; }

/* ----------------------------- drawer/scrim --------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.35);
  z-index: 20;
}
.drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  width: min(380px, 92vw);
  background: var(--face);
  border-inline-start: 1px solid var(--line);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  z-index: 21;
  padding: 16px 18px;
  overflow-y: auto;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-head h2 { margin: 0; font-size: 1.2rem; }
.drawer-section { margin-top: 20px; }
.drawer-section h3 { margin: 0 0 10px; font-size: 1rem; }
.drawer-section select,
.drawer-section input[type="text"],
.drawer-section input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--ink);
}
.search-row { display: flex; gap: 8px; margin-top: 10px; }
.search-row input { flex: 1 1 auto; }
.search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.search-result {
  text-align: start;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.92rem;
}
.search-result:hover { border-color: var(--muted); }
.manual-loc { margin-top: 14px; }
.manual-loc summary { cursor: pointer; color: var(--muted); }
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.manual-grid .tz-field { grid-column: 1 / -1; }
.manual-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }

/* ------------------------------- footer ------------------------------ */

.app-foot {
  max-width: 720px;
  margin: 24px auto 40px;
  padding: 0 16px;
}
.muted { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.app-foot a { color: var(--muted); }

.hidden { display: none !important; }

@media (max-width: 540px) {
  .det-head h2 { font-size: 1.15rem; }
}