/* Athar 4.3.3 | Only the nine user-approved Home-page visual adjustments. */
/* Existing dock/nav CSS, navigation markup and behavior deliberately untouched. */
/* 1. The new default dark palette uses exact theme tokens (instead of fixed CSS). */
body[data-athar-palette="atharMockup"] #view-today {
  --athar-card-color:#222128;
  --athar-card-border:rgba(205,202,222,.13);
}
body[data-athar-palette="atharMockup"] #view-today .athar-prayer-hero,
body[data-athar-palette="atharMockup"] #view-today .athar-prayer-row {background:#222128!important;border-color:rgba(205,202,222,.13)!important}
body[data-athar-palette="atharMockup"] #view-today .athar-prayer-hero .ring {background:conic-gradient(var(--accent) var(--today-ring-angle),#616067 0)!important}
body[data-athar-palette="atharMockup"] #view-today .athar-prayer-hero .ring::before {background:#222128!important}
body[data-athar-palette="atharMockup"] #view-today .athar-hero-numeric.has-progress .hero-count{color:var(--athar-secondary)!important}
/* 2/4/7/9. Exact header layout and existing logo's recolorable mask. Settings always top-right. */
body .app-shell:has(#view-today.active) {padding-top:max(env(safe-area-inset-top),40px)!important}
#view-today .athar-header-row,
html[dir="rtl"] #view-today .athar-header-row,
html[dir="ltr"] #view-today .athar-header-row {direction:ltr!important;min-height:40px!important;height:40px!important;margin-bottom:8px!important;justify-content:space-between!important}
#view-today .athar-brand-mark {height:40px!important;width:72px!important;flex:0 0 72px!important;background:var(--accent)!important}
#view-today .athar-header-settings {width:35px!important;height:35px!important;flex:0 0 35px!important;border-radius:50%!important;border:1px solid var(--athar-card-border)!important;background:var(--athar-card-color)!important;color:var(--text)!important;display:grid!important;place-items:center!important}
#view-today .athar-header-settings svg{width:21px!important;height:21px!important;stroke-width:1.85!important}
#view-today .today-hijri-top,html[dir=rtl] #view-today .today-hijri-top,html[dir=ltr] #view-today .today-hijri-top {text-align:left!important;direction:inherit!important;max-width:52%!important;margin-left:0!important;margin-right:auto!important;margin-bottom:5px!important;font-size:clamp(12px,3.2vw,14px)!important;white-space:normal!important}
#view-today .today-heading,html[dir=rtl] #view-today .today-heading,html[dir=ltr] #view-today .today-heading {max-width:51%!important;text-align:left!important;direction:inherit!important;margin-left:0!important;margin-right:auto!important;margin-bottom:0!important}
#view-today .today-heading .page-title{font-size:clamp(36px,9.2vw,44px)!important;line-height:1.09!important;letter-spacing:-.045em!important}
/* 3. No underline beneath Today; daily-worship marker is separate. */
#view-today .today-heading::before,#view-today .today-heading::after,
#view-today .today-heading .page-title::before,#view-today .today-heading .page-title::after {content:none!important;display:none!important}
#view-today .athar-sky,html[dir=rtl] #view-today .athar-sky,html[dir=ltr] #view-today .athar-sky {top:-10px!important;right:-9px!important;left:auto!important;width:min(70vw,285px)!important;height:185px!important;background-position:top right!important;background-size:100% auto!important;filter:none!important;transform:none!important;opacity:1!important;box-shadow:none!important}
body[data-theme="light"] #view-today .athar-sky{background-image:url('./assets/Athar_Mosque_Light_EdgeTransparent.png')!important}
/* 2. Date selector: one continuous pill, centered date, symmetrical chevrons. */
#view-today .athar-date-controls{width:100%!important;height:35px!important;min-height:35px!important;margin-top:22px!important;border-radius:20px!important;border:1px solid var(--athar-card-border)!important;background:var(--athar-card-color)!important;display:flex!important;overflow:hidden!important;gap:0!important}
#view-today .athar-date-arrow{height:33px!important;width:40px!important;min-width:40px!important;flex:0 0 40px!important;font-size:29px!important;color:var(--accent)!important;padding:0!important}
#view-today .athar-date-arrow:first-child{color:var(--muted)!important}
#view-today .athar-miladi-date{height:33px!important;font-size:clamp(12px,3.35vw,15px)!important;font-weight:660!important;line-height:1!important;text-align:center!important;flex:1 1 auto!important}
#view-today .today-subrow{margin-top:20px!important;height:29px!important;min-height:29px!important;font-weight:710!important}
/* 6. Mockup summary: circular indicator LEFT, slim divider and label/count RIGHT. */
#view-today .athar-prayer-hero{margin-top:8px!important;margin-bottom:10px!important;padding:12px 14px!important;border-radius:19px!important}
#view-today .athar-prayer-hero .hero-content{height:63px!important;min-height:63px!important;flex-basis:63px!important;grid-template-columns:minmax(79px,1fr) 1px minmax(133px,1.45fr)!important;gap:16px!important}
#view-today .athar-prayer-hero .ring{height:65px!important;width:65px!important}
#view-today .athar-prayer-hero .ring-inner strong{font-size:16px!important}
#view-today .athar-prayer-hero .athar-hero-divider{height:78%!important;width:1px!important}
#view-today .athar-hero-label{font-size:clamp(10px,2.65vw,12px)!important;letter-spacing:.3px!important;margin-bottom:4px!important}
#view-today .athar-hero-numeric .hero-count,#view-today .athar-hero-numeric .hero-total{font-size:clamp(28px,8.25vw,36px)!important}
#view-today .athar-hero-numeric .hero-connector{font-size:clamp(18px,5.6vw,23px)!important}
/* 8. All five prayer tiles: original images, gentle fade, consistent rows and aligned controls. */
#view-today .prayer-stack{gap:10px!important}
#view-today .athar-prayer-row{height:57px!important;min-height:57px!important;max-height:57px!important;border-radius:17px!important;gap:0!important;padding:0 9px 0 0!important}
#view-today .athar-card-art{width:clamp(86px,25vw,106px)!important;flex:0 0 clamp(86px,25vw,106px)!important;mask-image:linear-gradient(to right,#000 0%,#000 67%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 67%,transparent 100%)!important}
#view-today .athar-card-art img{object-position:center center!important;object-fit:cover!important}
#view-today .athar-prayer-identity-label{gap:3px!important;padding:0 2px!important}
#view-today .athar-prayer-identity-label .prayer-name{font-size:clamp(15px,4vw,18px)!important;line-height:1.3!important}
#view-today .athar-main-time{font-size:clamp(11px,2.8vw,13px)!important}
#view-today .status-switch{gap:clamp(6px,2.6vw,11px)!important;padding:0 1px 0 10px!important;border-left-color:var(--athar-card-border)!important}
#view-today .status-switch .state-btn{width:clamp(27px,7.7vw,32px)!important;height:clamp(27px,7.7vw,32px)!important;flex-basis:clamp(27px,7.7vw,32px)!important}
@media(max-width:390px){#view-today .athar-prayer-row{height:54px!important;min-height:54px!important;max-height:54px!important}#view-today .athar-card-art{width:clamp(84px,23vw,96px)!important;flex-basis:clamp(84px,23vw,96px)!important}#view-today .status-switch{gap:6px!important;padding-left:6px!important}#view-today .status-switch .state-btn{width:27px!important;height:27px!important;flex-basis:27px!important}}
/* Everything else, including dock, remains untouched. */
/* Mockup edges: cards and date selector are 8px wider per side than the default app content gutter. */
#view-today .athar-date-controls{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important;direction:ltr!important}
#view-today .athar-miladi-date{text-align:center!important;direction:inherit!important}
html[dir=rtl] #view-today .athar-miladi-date{direction:rtl!important}
#view-today .athar-prayer-hero{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important}
#view-today .prayer-stack{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important}
/* The mockup date text is centered in the complete pill, not pushed toward a chevron. */
#view-today .athar-miladi-date{display:flex!important;align-items:center!important;justify-content:center!important;align-content:center!important;flex-direction:row!important}
#view-today .athar-miladi-date .athar-date-long,#view-today .athar-miladi-date .athar-date-short{text-align:center!important;flex:0 0 auto!important}
/* Final vertical reference alignment: date, worship, summary, prayer-stack. */
#view-today .athar-date-controls{margin-top:37px!important}
#view-today .today-subrow{margin-top:15px!important}