/* SmartMuslim — ChatGPT final visual polish v1 · 2026-09-13
   Loaded last on purpose: visual/layout only. */

:root{
  --sm-fixed-nav-clearance:calc(154px + env(safe-area-inset-bottom,0px));
  --sm-overlay-z:20000;
}

/* ---------- Global bottom-navigation clearance ---------- */
#view-family .family-shell,
#view-family .family-form-page,
.school-view,
.school-management-view,
.global-notice-shell,
.sm-account-view,
.community-shell,
.hub-section,
#view-profilo-hub.profile-polished .profile-content-shell{
  padding-bottom:var(--sm-fixed-nav-clearance)!important;
  scroll-padding-bottom:var(--sm-fixed-nav-clearance)!important;
  box-sizing:border-box;
}

/* Keep the floating dock visually solid: content can scroll beneath it,
   but never competes with labels/icons. */
.bottom-nav{
  background:color-mix(in srgb,var(--sm-surface,#fffdf8) 98%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.08)!important;
  backdrop-filter:blur(22px) saturate(1.08)!important;
}
html.sm-dark-v2 body.sm-dark-v2 .bottom-nav{
  background:color-mix(in srgb,var(--sm-night-surface,#14251f) 98%,transparent)!important;
}

/* ---------- One navigation back control per page ---------- */
body.sm-unified-subpage-active #view-family .family-back,
body.sm-topbar-portal-active.sm-unified-subpage-active #view-family .family-back,
body.sm-unified-subpage-active .school-head>.school-back,
body.sm-topbar-portal-active.sm-unified-subpage-active .school-head>.school-back{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ---------- Notification preview: true application-level overlay ---------- */
body.global-notice-open{overflow:hidden!important}
.global-notice-overlay{
  position:fixed;
  inset:0;
  z-index:var(--sm-overlay-z)!important;
  background:rgba(13,31,26,.22);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  overscroll-behavior:contain;
}
.global-notice-overlay .global-notice-popover{
  position:fixed!important;
  z-index:calc(var(--sm-overlay-z) + 1)!important;
  top:max(64px,calc(env(safe-area-inset-top,0px) + 58px))!important;
  right:max(12px,calc((100vw - 430px)/2 + 12px))!important;
  left:auto!important;
  width:min(404px,calc(100vw - 24px))!important;
  max-height:min(650px,calc(100dvh - 86px))!important;
  padding:10px!important;
  overflow:auto!important;
  border-radius:22px!important;
  border:1px solid color-mix(in srgb,#b18a2b 48%,var(--sm-line,#e5ded1))!important;
  background:var(--sm-surface,#fffdf8)!important;
  box-shadow:0 28px 80px rgba(8,39,30,.28)!important;
}
.global-notice-overlay .global-notice-popover:before{
  right:18px!important;
  background:var(--sm-surface,#fffdf8)!important;
}
.global-notice-overlay .global-notice-popover>header{
  position:sticky!important;
  top:-10px;
  z-index:2;
  padding:12px 7px 10px!important;
  background:var(--sm-surface,#fffdf8)!important;
}
html.sm-dark-v2 body.sm-dark-v2 .global-notice-overlay{background:rgba(0,0,0,.42)}
html.sm-dark-v2 body.sm-dark-v2 .global-notice-overlay .global-notice-popover,
html.sm-dark-v2 body.sm-dark-v2 .global-notice-overlay .global-notice-popover>header,
html.sm-dark-v2 body.sm-dark-v2 .global-notice-overlay .global-notice-popover:before{
  background:#143b32!important;
}

/* Notification center chips: explicit horizontal rail, never chopped. */
.global-notice-tabs{
  gap:8px!important;
  padding:4px 18px 12px 2px!important;
  margin-right:-4px;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.global-notice-tabs::-webkit-scrollbar{display:none!important}
.global-notice-tabs button{flex:0 0 auto;scroll-snap-align:start}

/* Notification preference architecture: readable list on mobile. */
@media(max-width:600px){
  .global-notice-pref-macros{grid-template-columns:1fr!important;gap:8px!important}
  .global-notice-pref-macro{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:11px 12px!important;
    min-height:72px;
  }
  .global-notice-pref-macro button{
    min-width:42px!important;
    width:42px!important;
    min-height:42px!important;
    padding:0!important;
    overflow:hidden;
    color:transparent!important;
    position:relative;
  }
  .global-notice-pref-macro button:after{
    content:'›';
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--sm-green,#174f40);
    font-size:1.35rem;
    font-weight:800;
  }
  html.sm-dark-v2 body.sm-dark-v2 .global-notice-pref-macro button:after{color:#f8f2df}
  .global-notice-pref-macro strong{font-size:.9rem!important}
  .global-notice-pref-macro small{font-size:.72rem!important;line-height:1.3}
  .global-notice-pref-macro em{font-size:.68rem!important;line-height:1.25}
  .global-notice-pref-detail{padding:12px!important;border-radius:18px!important}
  .global-notice-pref-detail>header{position:sticky;top:0;z-index:1;background:inherit;padding:2px 0 10px!important}
  .global-notice-pref-row,
  .global-notice-pref-row.is-timed{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px 0!important;
  }
  .global-notice-pref-row select,
  .global-notice-pref-row.is-timed select{width:100%!important;max-width:none!important}
  .global-notice-digest{padding-top:2px}
  .global-notice-shell{padding-left:12px!important;padding-right:12px!important}
}

/* ---------- Family: calmer hierarchy and correct states ---------- */
#view-family .family-head{margin-bottom:14px}
#view-family .family-goal{
  padding:17px!important;
  border-radius:23px!important;
  box-shadow:0 9px 26px rgba(31,55,46,.055)!important;
}
#view-family .family-goal-top{gap:12px!important}
#view-family .family-goal h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
  font-size:1.05rem!important;
  line-height:1.24!important;
}
.family-goal-progress-wrap{margin-top:12px}
.family-goal-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;color:var(--family-muted);font-size:.62rem}
.family-goal-progress-head strong{color:var(--family-green);font-size:.8rem}
.family-goal-progress{height:7px;overflow:hidden;border-radius:999px;background:#e7ede9}
.family-goal-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--family-accent),#b88a3b);transition:width .2s ease}
html.sm-dark-v2 body.sm-dark-v2 .family-goal-progress{background:#2a3b35}
#view-family .family-reward{margin-top:12px!important;padding:11px 12px!important}
#view-family .family-activity{padding:11px 12px!important;border-radius:14px!important}
.family-activity-requirement{display:inline-flex!important;width:max-content;margin-top:5px!important;padding:3px 7px;border-radius:999px;background:#f3eee4;color:#80683a!important;font-size:.52rem!important;font-weight:850}
.family-activity-done{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 9px;border-radius:10px;background:#e4f2e8;color:#17644c;font-size:.58rem;font-weight:900;white-space:nowrap}
html.sm-dark-v2 body.sm-dark-v2 .family-activity-requirement{background:#302b22;color:#ead8ab!important}
html.sm-dark-v2 body.sm-dark-v2 .family-activity-done{background:#204233;color:#a9dcc6}

/* Proposal editor had 3 children but a 2-column grid. */
.family-preview-item{
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:start!important;
}
.family-preview-item>button{align-self:center;min-width:82px}
@media(max-width:520px){
  .family-preview-item{grid-template-columns:34px minmax(0,1fr)!important}
  .family-preview-item>button{grid-column:2;width:100%;margin-top:2px}
  #view-family .family-member-actions{grid-template-columns:1fr!important}
}

/* ---------- Community rails ---------- */
.community-category-scroll{
  padding:3px 24px 14px 1px!important;
  margin-right:-10px;
  scroll-padding-inline:1px 24px;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
}
.community-category-scroll button{scroll-snap-align:start}

/* ---------- School / profile / hubs ---------- */
.school-view,.school-management-view{padding-bottom:var(--sm-fixed-nav-clearance)!important}
.sm-account-view{padding-bottom:var(--sm-fixed-nav-clearance)!important}
#view-profilo-hub.profile-polished .profile-content-shell{padding-bottom:var(--sm-fixed-nav-clearance)!important}

/* ---------- Auth cleanup ---------- */
.auth-otp-email{
  max-width:100%;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  hyphens:none;
}
@media(max-width:390px){.auth-otp-email{font-size:18px!important}}

/* ---------- Modal/sheet stacking above the fixed navigation ---------- */
.community-sheet-wrap{z-index:19000!important}
.school-chat-backdrop{z-index:19000!important}
.school-chat-panel{z-index:19001!important;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))!important}
.school-chat-header-spacer{display:block;width:44px;height:44px}
.school-chat-inbox-cta{
  width:auto!important;
  min-height:40px!important;
  margin:0 0 10px auto!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  font-size:.74rem!important;
}
.family-member-actions.is-single{grid-template-columns:1fr!important}

#view-home{padding-bottom:var(--sm-fixed-nav-clearance)!important;box-sizing:border-box}

/* ---------- School Chat dark mode: complete contrast fix ---------- */
html.sm-dark-v2 body.sm-dark-v2 .school-chat-backdrop{background:rgba(0,20,15,.72)!important}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel{
  background:#10251f!important;
  color:#edf4f0!important;
  box-shadow:-14px 0 44px rgba(0,0,0,.42)!important;
}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel header{
  color:#edf4f0!important;
  border-bottom-color:#31463f!important;
}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel header h2{color:#edf4f0!important}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel header small{color:#d8b86f!important}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel header button{color:#edf4f0!important}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-threads button,
html.sm-dark-v2 body.sm-dark-v2 .school-chat-messages article{
  background:#152e27!important;
  color:#edf4f0!important;
  border-color:#3a5148!important;
}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-messages article.is-teacher,
html.sm-dark-v2 body.sm-dark-v2 .school-chat-messages article.is-school_admin{
  background:#1b4337!important;
  border-color:#4d7768!important;
}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel textarea{
  background:#183129!important;
  color:#edf4f0!important;
  border-color:#4b6259!important;
}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel textarea::placeholder{color:#9fb0a9!important}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-panel form>button{
  background:#2d725b!important;
  color:#fff!important;
}
html.sm-dark-v2 body.sm-dark-v2 .school-chat-error{color:#ffb8ad!important}

/* ---------- Family Smart Goal preview/editor v2 ---------- */
.family-proposal-edit-form{display:grid;gap:12px}
.family-proposal-edit-form .family-preview-list{display:grid;gap:12px;margin:14px 0}
.family-preview-item{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:12px!important;
  padding:14px!important;
  border-radius:17px!important;
}
.family-preview-index{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:12px!important;
  background:#eaf1ed!important;
  color:#17644c!important;
  font-size:.78rem!important;
  font-weight:900!important;
}
.family-preview-fields{display:grid;gap:10px;min-width:0}
.family-preview-fields>label{display:grid!important;gap:6px!important;min-width:0;color:var(--family-green);font-size:.66rem;font-weight:850}
.family-preview-fields input,
.family-proposal-edit-form>label select{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.family-preview-meta{display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;color:var(--family-muted)!important;font-size:.58rem!important;line-height:1.35!important}
.family-preview-required{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  margin:0!important;
  padding:10px 11px!important;
}
.family-preview-required input{width:18px!important;height:18px!important;min-height:0!important;margin:0!important;padding:0!important}
.family-preview-required span{
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#52645d!important;
  font-size:.65rem!important;
  font-weight:750!important;
  line-height:1.3!important;
  place-items:initial!important;
}
.family-preview-remove{align-self:end!important;min-width:92px!important;width:auto!important}
.family-proposal-edit-form>label{display:grid;gap:6px;min-width:0;color:var(--family-green);font-size:.66rem;font-weight:850}
.family-proposal-edit-form select{font-size:16px!important}
html.sm-dark-v2 body.sm-dark-v2 .family-preview-index{background:#29443a!important;color:#e6c879!important}
html.sm-dark-v2 body.sm-dark-v2 .family-preview-required span{color:#dfe8e4!important}

@media(max-width:520px){
  .family-preview-item{
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:10px!important;
    padding:13px!important;
  }
  .family-preview-fields{gap:9px}
  .family-preview-remove{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    margin-top:0!important;
  }
  .family-proposal-edit-form>label select{width:100%!important;max-width:100%!important}
}

/* The floating navigation remains available, but a solid safe zone prevents
   long Family forms from visually running underneath the dock. */
body:has(#view-family[style*="display: block"]) #view-family:after{
  content:"";
  position:fixed;
  z-index:9998;
  left:0;
  right:0;
  bottom:0;
  height:112px;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--sm-surface,#fffdf8) 94%,transparent) 30%,var(--sm-surface,#fffdf8) 62%);
}
html.sm-dark-v2 body.sm-dark-v2:has(#view-family[style*="display: block"]) #view-family:after{
  background:linear-gradient(to bottom,transparent 0%,rgba(7,26,20,.92) 34%,#071a14 64%);
}

/* ---------- Minor protection / trusted adult ---------- */
.family-minor-protection{
  display:grid;
  gap:12px;
  margin:14px 0 4px;
  padding:14px;
  border:1px solid #e4d8c4;
  border-radius:16px;
  background:#fbf7ef;
}
.family-minor-protection.is-approved{border-color:#bcd8ca;background:#f0f8f4}
.family-minor-protection>div:first-child{display:grid;gap:4px}
.family-minor-protection b{color:#0d5642;font-size:.86rem}
.family-minor-protection small{color:#66736d;font-size:.67rem;line-height:1.4}
.family-minor-actions{display:grid;gap:8px}
.family-minor-actions button{width:100%!important;margin:0!important}
.family-minor-approval-choice{align-items:start!important}
.family-minor-approval-choice span{display:grid!important;gap:3px!important}
.family-minor-approval-choice b{font-size:.74rem}
.family-minor-approval-choice small{font-size:.62rem;line-height:1.35;color:#6b756f}
.community-minor-approval{display:grid!important;gap:8px!important;padding:14px!important}
.community-minor-approval b,.community-minor-approval span{display:block}
.community-minor-approval span{font-size:.78rem;line-height:1.45}
.community-minor-approval .community-primary{margin-top:4px}
html.sm-dark-v2 body.sm-dark-v2 .family-minor-protection{background:#10251f!important;border-color:#345247!important}
html.sm-dark-v2 body.sm-dark-v2 .family-minor-protection.is-approved{background:#133027!important;border-color:#3f6d5c!important}
html.sm-dark-v2 body.sm-dark-v2 .family-minor-protection b{color:#f0eadf!important}
html.sm-dark-v2 body.sm-dark-v2 .family-minor-protection small,
html.sm-dark-v2 body.sm-dark-v2 .family-minor-approval-choice small{color:#becdc7!important}