/* Noor Al-Islam 1.0.0 iPhone final UI fixes – no changes to notifications or prayer methods. */
html,body,#root{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body,#root{overflow-x:hidden}}
.app-shell,.main-column,.content-wrap{min-width:0;max-width:100%;box-sizing:border-box}
.pv4,.pv4-header,.pv4-hero,.pv4-layout,.pv4-times,.pv4-card,.pv4-feedback,.pv4-disclaimer{max-width:100%;min-width:0;box-sizing:border-box}
.pv4{width:100%;overflow-x:clip;overscroll-behavior-x:none}
.pv4-hero>*{min-width:0;max-width:100%;box-sizing:border-box}
.pv4-clock{max-width:100%;overflow-wrap:anywhere}
.pv4-clock strong{max-width:100%;font-size:clamp(25px,7.6vw,43px);letter-spacing:.01em;white-space:nowrap}
.pv4-clock span{white-space:normal;overflow-wrap:anywhere}
.pv4-header>p{display:none!important}
.pv4-location-cta{display:none;align-items:center;justify-content:center;margin:12px 0 4px;padding:11px 14px;min-height:44px;width:100%;max-width:100%;border-radius:12px;border:1px solid var(--ritual-rim,var(--border,#9bb5ae));background:var(--surface,#24485a);color:var(--ink,#fff);font:inherit;font-weight:750;cursor:pointer;text-align:center}
.pv4-location-cta:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pv4-location-hint{display:none;color:var(--muted,#b9cbd5);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
/* The real application logo is visible on the drawer and in the mobile header. */
.sidebar.open .brand-mark{background-image:url('/icons/noor-96.png')!important;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;color:transparent!important;overflow:hidden}
.noor-mobile-brand{display:none;align-items:center;gap:8px;min-height:30px;line-height:1.35;font-size:13px;font-weight:800;color:var(--ink,#fff);min-width:0;white-space:nowrap}
.noor-mobile-brand img{width:27px;height:27px;border-radius:8px;display:block;flex:none;object-fit:cover}
@media (max-width:810px){
  .pv4-location-cta,.pv4-location-hint{display:flex}
  .pv4-hero{padding-inline:clamp(12px,4vw,20px)!important}
  .pv4 .pv4-card,.pv4 .pv4-cols,.pv4 .pv4-field{min-width:0;max-width:100%}
  .pv4 .pv4-times{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv4 .pv4-config select{max-width:100%;width:100%;min-width:0}
  .topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"brand brand" "start actions"!important;gap:5px 8px!important;height:auto!important;min-height:106px!important;align-content:center!important;align-items:center!important;padding-block:10px!important;box-sizing:border-box!important;max-width:100vw!important}
  .topbar>.noor-mobile-brand{grid-area:brand;display:flex}
  .topbar>.topbar-start{grid-area:start;justify-self:start;min-width:0}
  .topbar>.topbar-actions{grid-area:actions;justify-self:end;min-width:0;max-width:100%}
  .topbar .topbar-greeting{display:none!important}
  html.noor-ios-standalone .topbar{padding-top:calc(7px + env(safe-area-inset-top,0px))!important;padding-bottom:9px!important;min-height:calc(106px + env(safe-area-inset-top,0px))!important}
  .sidebar.open{padding-top:calc(16px + env(safe-area-inset-top,0px))!important;box-sizing:border-box!important;overflow-y:auto!important;max-width:min(85vw,320px)!important}
  .sidebar.open .brand{padding:6px 5px 22px!important;z-index:4!important;align-items:center;flex-shrink:0!important;white-space:normal!important}
  .sidebar.open .brand strong,.sidebar.open .brand small{opacity:1!important;visibility:visible!important;filter:none!important;-webkit-filter:none!important;text-shadow:none!important}
  .sidebar.open .brand :is(strong,small){white-space:normal!important;overflow-wrap:anywhere!important}
  .sidebar.open .brand-mark{min-width:49px!important;min-height:49px!important}
}
@media (max-width:375px){
 .noor-mobile-brand{font-size:12px}
 .topbar{padding-inline:9px!important;gap:3px 3px!important}
 .topbar .sky-palette-picker{width:77px!important;max-width:77px!important}
 .pv4-clock strong{font-size:clamp(25px,7vw,33px)!important}
}

/* Requested: remove only the extra header brand and purple drawer icon. */
.noor-mobile-brand{display:none!important}
@media(max-width:810px){.topbar{grid-template-areas:"start actions"!important;min-height:64px!important}.topbar>.noor-mobile-brand{display:none!important}html.noor-ios-standalone .topbar{min-height:calc(64px + env(safe-area-inset-top,0px))!important}}
.sidebar.open .brand-mark{background-image:none!important;display:none!important}