/* Final low-risk visual corrections for What's New scrollbar, permission toggles and profile shell alignment. */

/* What's New now scrolls inside a clipped child region. The outer modal owns the
   rounded corners and clips the native scrollbar, so browser arrows/track can no
   longer paint past the curved shell. */
.sproglet-viewport-modal-dialog.whats-new-shell{
  overflow:hidden!important;
  scrollbar-width:none!important;
}
.sproglet-viewport-modal-dialog.whats-new-shell::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
.whats-new-scroll-region{
  max-height:inherit;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 72%,var(--muted)) transparent;
}
.whats-new-scroll-region::-webkit-scrollbar{width:10px}
.whats-new-scroll-region::-webkit-scrollbar-track{background:transparent}
.whats-new-scroll-region::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;background:transparent!important}
.whats-new-scroll-region::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 72%,var(--muted));
  background-clip:content-box;
}
.whats-new-scroll-region::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 86%,var(--ink));
  background-clip:content-box;
}

/* Permission switches: keep the real checkbox fully visually hidden so native
   focus/checkbox paint cannot leak beside the custom control. Focus is rendered
   on the label instead. */
.app .admin-workspace .permission-toggle{
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  position:relative!important;
}
.app .admin-workspace .permission-toggle input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  outline:none!important;
  box-shadow:none!important;
  opacity:0!important;
}
.app .admin-workspace .permission-toggle:has(input:focus-visible){
  outline:2px solid color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 62%,transparent);
  outline-offset:2px;
}
.app .admin-workspace .permission-switch{
  box-sizing:border-box!important;
  display:block!important;
  position:relative!important;
  isolation:isolate;
  contain:paint;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  align-self:center!important;
  justify-self:start!important;
  background:#ddd8e8!important;
  background-clip:padding-box!important;
}
.app .admin-workspace .permission-switch::after{
  content:""!important;
  box-sizing:border-box!important;
  position:absolute!important;
  left:3px!important;
  top:50%!important;
  width:14px!important;
  height:14px!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
  transform:translateY(-50%)!important;
  transition:transform .15s ease!important;
}
.app .admin-workspace .permission-toggle input:checked + .permission-switch{
  background:var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent)))!important;
}
.app .admin-workspace .permission-toggle input:checked + .permission-switch::after{transform:translate(14px,-50%)!important}

/* Child/pet profile workspace should meet the same desktop shell edges as every
   other authenticated screen. */
@media (min-width:1181px){
  .app:has(> .family-workspace-profiles){
    width:100%!important;
    max-width:none!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .app:has(> .family-workspace-profiles) > .family-workspace-shell,
  .app:has(> .family-workspace-profiles) > .family-workspace-profiles{
    box-sizing:border-box!important;
    width:min(1278px,calc(100vw - 48px))!important;
    max-width:1278px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .app:has(> .family-workspace-profiles) > .family-workspace-profiles{padding-left:0!important;padding-right:0!important}
  .app:has(> .family-workspace-profiles) .family-profile-grid{
    width:100%!important;
    grid-template-columns:minmax(0,1.55fr) minmax(336px,1fr)!important;
  }

  .app:has(> .calendar-workspace) .calendar.calendar-day{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }
  .app:has(> .calendar-workspace) .calendar.calendar-day > .head,
  .app:has(> .calendar-workspace) .calendar.calendar-day > .day{width:100%!important;min-width:0!important}
}

html[data-theme="dark"] .app:has(> .family-workspace-profiles),
html[data-theme="dark"] .app:has(> .family-workspace-profiles) > .family-workspace-profiles{background:transparent!important}

.app:has(> .calendar-workspace) .calendar.calendar-day,
.app:has(> .calendar-workspace) .calendar.calendar-day > .head,
.app:has(> .calendar-workspace) .calendar.calendar-day > .day{background:var(--card)!important}

/* Structured preferences should feel like a full editor rather than a tiny alert.
   ViewportModal still supplies the viewport-safe max height and global clipped
   scrollbar treatment. */
.sproglet-viewport-modal-dialog.preference-modal{
  width:min(720px,calc(100vw - 36px))!important;
  max-width:720px!important;
  padding:22px!important;
  gap:16px!important;
}
.sproglet-viewport-modal-dialog.preference-modal textarea{min-height:132px}

/* Inline Basic Information editing reuses the real managed-profile form without
   nesting a second heavy card inside the existing profile card. */
.family-profile-inline-editor .auth-managed-card{
  margin-top:12px;
  border-color:color-mix(in srgb,var(--family-theme-primary,var(--accent)) 18%,var(--line));
  box-shadow:none;
}
.family-profile-inline-editor .auth-managed-form-actions{
  justify-content:flex-end;
  gap:8px;
}
.family-profile-inline-status{margin-top:12px}
.family-profile-structured-preferences .child-preferences-embedded{margin-top:2px}

@media(max-width:767px){
  .sproglet-viewport-modal-dialog.preference-modal{
    width:min(100%,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    padding:16px 14px calc(20px + env(safe-area-inset-bottom,0px))!important;
  }
}