/* Amara CRM — kader rond de nieuwe schil (light DOM).
   Oude lagen zetten !important op de zijbalk, bovenbalk en .view. Gelaagde !important wint van ongelaagde,
   dus deze kleine laag verbergt de oude schil en schuift de inhoud naast de nieuwe zijbalk.
   Alleen actief als app/shell.js geladen is (html.am-shell). */
@layer am-frame{
  html.am-shell .desktop-sidebar,
  html.am-shell .desktop-main>.topbar,
  html.am-shell .mobile-top,
  html.am-shell #mobileNav,
  html.am-shell .desa-mobile-drawer,
  html.am-shell .desa-mobile-overlay{display:none!important}

  /* Achtergrond wit (keuze Prescilla); via token zodat het op één plek staat */
  html.am-shell,html.am-shell body,html.am-shell .app,html.am-shell .desktop-main{background:var(--am-canvas)!important}

  /* Oude panelen en kaarten wit op de warme achtergrond */
  html.am-shell .desktop-main>.view :is(.panel,.settings-card){background:#fff!important}

  /* Meldingen in de huisstijl: donker, onderin het midden, schuift kort omhoog */
  html.am-shell .toast-v10{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(24px + env(safe-area-inset-bottom))!important;transform:translate(-50%,12px)!important;opacity:0!important;pointer-events:none!important;display:flex!important;align-items:center!important;gap:10px!important;max-width:calc(100vw - 32px)!important;padding:12px 18px 12px 14px!important;border:0!important;border-radius:12px!important;background:var(--am-night)!important;color:var(--am-night-text)!important;font-family:var(--am-font)!important;font-size:14px!important;font-weight:500!important;box-shadow:0 12px 32px rgba(18,18,20,.28)!important;transition:opacity var(--am-dur-exit) var(--am-ease-in),transform var(--am-dur-exit) var(--am-ease-in)!important;z-index:300!important}
  html.am-shell .toast-v10::before{content:""!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#fff!important;opacity:.7!important;flex:none!important}
  html.am-shell .toast-v10.show{opacity:1!important;transform:translate(-50%,0)!important;transition-duration:var(--am-dur-enter)!important;transition-timing-function:var(--am-ease-out)!important}
  @media (max-width:800px){html.am-shell .toast-v10{bottom:calc(84px + env(safe-area-inset-bottom))!important}}

  /* Scherm komt binnen: kort en rustig, alleen opacity en transform */
  /* Eén rustige overgang per schermwissel: het hele scherm komt in één keer binnen (geen gestaffelde onderdelen meer). */
  html.am-shell .desktop-main>.view.am-enter{animation:am-view-in 180ms var(--am-ease-out) both}

  @media (min-width:801px){
    html.am-shell .desktop-main{margin-left:248px!important;width:auto!important;max-width:none!important;padding-top:28px!important}
    /* Nieuwe schermen vullen het werkgebied van rand tot rand */
    html.am-shell .desktop-main>.view:has(>.am-host){margin:-28px -32px -64px!important;padding:0!important;width:auto!important;max-width:none!important}
  }
  /* Tussen 801 en 1180px is de zijmarge van .desktop-main 24px (oude laag); anders schuift het scherm 8px buiten beeld. */
  @media (min-width:801px) and (max-width:1180px){
    html.am-shell .desktop-main>.view:has(>.am-host){margin-left:-24px!important;margin-right:-24px!important}
  }
  @media (max-width:800px){
    /* Kop is 56px; daaronder 20px lucht voor de paginatitel */
    html.am-shell .desktop-main{margin-left:0!important;width:100%!important;padding-top:calc(56px + env(safe-area-inset-top))!important;padding-bottom:96px!important}
    html.am-shell .desktop-main>.view:has(>.am-host){margin:0 -16px!important;padding:0!important;width:auto!important;max-width:none!important}
    html.am-shell .desktop-main>.view:not(:has(>.am-host)){padding-top:20px!important}

    /* Oude schermen (Agenda, Projecten, Notities, Team, Instellingen, Content): kop stapelt, titel breekt niet midden in een woord */
    html.am-shell .desktop-main>.view .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;margin-top:0!important}
    html.am-shell .desktop-main>.view .page-head h2{font-size:26px!important;line-height:1.2!important;letter-spacing:-.02em!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
    html.am-shell .desktop-main>.view .page-head>.btn,
    html.am-shell .desktop-main>.view .page-head>div:last-child>.btn{align-self:flex-start!important}
    html.am-shell .desktop-main>.view .page-head p{display:none!important}
    /* Projecten: foto boven de gegevens in plaats van een smalle kolom ernaast */
    html.am-shell #properties article.property{grid-template-columns:1fr!important}
    html.am-shell #properties article.property .property-img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important}
    html.am-shell #properties article.property .property-body{min-width:0!important}
    /* Notities: tijd niet tegen de kaartrand */
    html.am-shell #notes .note-row{padding-right:14px!important}
    html.am-shell #notes .note-row .time{flex:none!important;white-space:nowrap!important;font-size:11px!important}
  }
  @keyframes am-view-in{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    html.am-shell .desktop-main>.view.am-enter{animation:none!important}
  }
}