/* =====================================================================
   QURAN CALENDAR — month calendar styles, split out of quran.css in the
   v2 file split. Currently backs the legacy QCalendar (quran-practice.jsx);
   Phase 4's QCalendarV2 (quran-calendar.jsx) will extend these same classes
   (month-paging + hijri special days) rather than starting fresh.
   ===================================================================== */

.q-cal { max-width: 700px; }
.q-cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.q-cal-month { font-weight: 700; font-size: 15px; color: var(--ink, #eaf3ee); }
.q-cal-sub { font-size: 11px; color: var(--ink-4, #7f9187); }
.q-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.q-dow { margin-bottom: 4px; }
.q-dowc { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-5, #5f7168); }
.q-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--ink-3, #9fb0a6); border-radius: 12px; border: 1px solid transparent; position: relative; }
.q-day.blank { visibility: hidden; }
.q-day.today { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-hi); }
.q-day.classday { border-color: var(--gold); color: var(--gold-hi); }
.q-day.practiced { background: var(--gold-grad); color: #071b10; font-weight: 800; overflow: hidden; }
.q-day.practiced::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); background-size: 220% 100%; animation: q-shine 3.5s ease-in-out infinite; }
/* practiced AND class -> filled green + a bright ring */
.q-day.practiced.classday { box-shadow: inset 0 0 0 2px var(--gold-hi); }
@keyframes q-shine { 0% { background-position: 120% 0; } 55%, 100% { background-position: -120% 0; } }
.q-cal-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--ink-4, #7f9187); }
.q-lg { display: inline-flex; align-items: center; gap: 6px; }
.q-lg i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.q-lg.practiced i { background: var(--gold-grad); }
.q-lg.classday i { border: 1.5px solid var(--gold); }

/* =====================================================================
   CALENDAR V2 — month paging, hijri span label, special-day marks + modal.
   Extends the legacy .q-cal / .q-day classes above (same visual language).
   ===================================================================== */

/* ---- month navigation header ---- */
.q-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.q-cal-arrow { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.08)); background: transparent; color: var(--ink-3, #9fb0a6); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.q-cal-arrow:hover:not(:disabled) { background: rgba(255,255,255,.05); color: var(--ink, #eaf3ee); border-color: var(--line-2, rgba(255,255,255,.14)); }
.q-cal-arrow:disabled { opacity: .3; cursor: default; }
.q-cal-title { text-align: center; line-height: 1.25; display: flex; flex-direction: column; align-items: center; }
.q-cal-v2 .q-cal-month { font-weight: 700; font-size: 15px; color: var(--ink, #eaf3ee); }
.q-cal-hijri { font-size: 10.5px; font-weight: 600; color: var(--gold-hi, #e8cf85); letter-spacing: .2px; }

.q-cal-subrow { display: flex; align-items: center; justify-content: space-between; min-height: 20px; margin-bottom: 10px; }
.q-cal-today-pill { font-size: 10.5px; font-weight: 700; color: #071b10; background: var(--gold-grad); border: none; border-radius: 999px; padding: 3px 11px; cursor: pointer; box-shadow: 0 4px 12px -6px rgba(212,175,55,.6); }
.q-cal-today-pill:hover { filter: brightness(1.05); }

/* ---- special-day cell marks ---- */
/* range band = subtle low-alpha accent wash, distinct from the solid practiced fill */
.q-day.q-band { background: rgba(212,175,55,.12); }
.q-day.q-band-subtle { background: rgba(212,175,55,.06); }
/* practiced fill always wins over a band wash */
.q-day.practiced.q-band, .q-day.practiced.q-band-subtle { background: var(--gold-grad); }
/* event cells are buttons — strip default button chrome, keep the grid look */
button.q-day { font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; }
button.q-day.q-hasevent:hover { border-color: var(--gold, #d4af37); }
button.q-day:focus-visible { outline: 2px solid var(--gold-hi, #e8cf85); outline-offset: 1px; }

/* corner glyph — small, top-right, so practice/class marks stay readable */
.q-sday-badge { position: absolute; top: 3px; right: 3px; font-size: 8px; line-height: 1; color: var(--gold-hi, #e8cf85); pointer-events: none; }
.q-day.practiced .q-sday-badge { color: #071b10; opacity: .85; }
.q-badge-dot { font-size: 5px; top: 5px; right: 5px; }

.q-lg.sday i { border-radius: 999px; background: var(--gold-hi, #e8cf85); }

/* ---- special-day modal (portalled; inherits .sheet shell from calorie.css) ---- */
.q-sday-sheet { max-width: 460px; }
.q-sday-dates { margin-bottom: 16px; }
.q-sday-greg { display: block; font-size: 14px; font-weight: 700; color: var(--ink, #eaf3ee); }
.q-sday-hijri { display: block; font-size: 12px; font-weight: 600; color: var(--gold-hi, #e8cf85); margin-top: 2px; }
.q-sday-block { padding-top: 14px; }
.q-sday-block + .q-sday-block { border-top: 1px solid var(--line, rgba(255,255,255,.08)); margin-top: 4px; }
.q-sday-name { font-size: 14px; font-weight: 700; color: var(--gold-hi, #e8cf85); margin-bottom: 8px; }
.q-sday-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-4, #7f9187); margin: 12px 0 4px; }
.q-sday-block > .q-sday-lbl:first-child, .q-sday-name + .q-sday-lbl { margin-top: 0; }
.q-sday-txt { font-size: 13.5px; line-height: 1.55; color: var(--ink-2, #c4d3ca); margin: 0; }
.q-sday-callout { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 10px 12px; border-radius: 10px; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.28); font-size: 13px; font-weight: 600; color: var(--gold-hi, #e8cf85); }
.q-sday-refs { margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-4, #7f9187); display: flex; align-items: center; gap: 7px; }
.q-sday-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); font-size: 11px; line-height: 1.5; color: var(--ink-5, #5f7168); }

/* ---- mobile ---- */
@media (max-width: 760px) {
  /* .q-attend (grid host) stays in quran.css; no calendar-specific rules currently
     need a mobile override beyond what quran.css's .q-attend media query already does. */
  .q-cal-hijri { font-size: 10px; }
}