/* Amara CRM — desktoplaag voor schermen buiten de shadow roots (Projecten).
   Alleen ≥801px; mobiel blijft precies zoals het was. Bouwt op app/tokens.css.
   De oude CSS-lagen gebruiken !important; deze laag wint via hogere specificiteit (html.am-shell body:not(#am-x) #properties …). */

/* Nieuwe elementen bestaan alleen op desktop */
.pj-summary,.pj-status{display:none}

@media (min-width:801px){
  html.am-shell body:not(#am-x) #properties{font-family:var(--am-font);color:var(--am-ink);max-width:1600px}

  /* Kop */
  html.am-shell body:not(#am-x) #properties .page-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;margin:0 0 24px!important;padding:0!important}
  html.am-shell body:not(#am-x) #properties .page-head{flex-direction:row!important;flex-wrap:nowrap!important;height:auto!important;min-height:0!important}
  html.am-shell body:not(#am-x) #properties .page-head>div:first-child{flex:1 1 auto!important;min-width:0!important}
  html.am-shell body:not(#am-x) #properties .page-head>#addPropertyBtn{flex:none!important;align-self:flex-end!important;margin:0!important}
  html.am-shell body:not(#am-x) #properties .page-head .section-eyebrow{font-size:11px!important;font-weight:600!important;letter-spacing:.12em!important;color:var(--am-amara-text)!important;margin-bottom:6px!important}
  html.am-shell body:not(#am-x) #properties .page-head h2{font-size:28px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.2!important;color:var(--am-ink-strong)!important;margin:0!important}
  html.am-shell body:not(#am-x) #properties .page-head p{font-size:13px!important;color:var(--am-muted)!important;margin:6px 0 0!important;max-width:640px}
  html.am-shell body:not(#am-x) #properties .sheet-sync-status{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:10px 0 0!important;font-size:12px!important;color:var(--am-muted)!important}
  html.am-shell body:not(#am-x) #properties .sheet-sync-status span:not(.sheet-sync-dot){font-weight:500!important;font-size:12px!important;color:var(--am-muted)!important}
  html.am-shell body:not(#am-x) #properties .sheet-sync-status button{font-size:12px!important;font-weight:500!important;color:var(--am-ink)!important}
  html.am-shell body:not(#am-x) #properties .pj-summary{display:flex;gap:20px;margin-top:14px;font-size:13px;color:var(--am-muted)}
  html.am-shell body:not(#am-x) #properties .pj-summary b{color:var(--am-ink-strong);font-weight:600;font-variant-numeric:tabular-nums;margin-right:2px}
  html.am-shell body:not(#am-x) #properties #addPropertyBtn{height:40px!important;padding:0 16px!important;border-radius:10px!important;font-size:14px!important;font-weight:500!important;background:var(--am-ink)!important;border-color:var(--am-ink)!important;color:#fff!important;box-shadow:none!important}
  html.am-shell body:not(#am-x) #properties #addPropertyBtn:hover{background:var(--am-ink-strong)!important}

  /* Zoeken en regio */
  html.am-shell body:not(#am-x) #properties .toolbar{display:flex!important;gap:10px!important;padding:0!important;margin:0 0 20px!important;background:none!important;border:0!important;box-shadow:none!important}
  html.am-shell body:not(#am-x) #properties .toolbar .search{flex:0 1 420px!important;height:40px!important;border:1px solid var(--am-line)!important;border-radius:10px!important;background:var(--am-surface)!important;padding:0 12px!important;display:flex!important;align-items:center!important;gap:8px!important;color:var(--am-muted)!important}
  html.am-shell body:not(#am-x) #properties .toolbar .search:focus-within{border-color:var(--am-ink)!important;box-shadow:var(--am-focus)!important}
  html.am-shell body:not(#am-x) #properties .toolbar .search input{border:0!important;outline:0!important;background:transparent!important;height:38px!important;font-size:14px!important;padding:0!important;box-shadow:none!important}
  html.am-shell body:not(#am-x) #properties .toolbar select{height:40px!important;min-width:180px!important;border:1px solid var(--am-line)!important;border-radius:10px!important;font-size:14px!important;padding:0 12px!important;background-color:var(--am-surface)!important}

  /* Raster: kaarten met beeld bovenaan */
  html.am-shell body:not(#am-x) #properties .property-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:20px!important;align-items:stretch!important}
  html.am-shell body:not(#am-x) #properties .property{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;min-height:0!important;border:1px solid var(--am-line)!important;border-radius:16px!important;background:var(--am-surface)!important;overflow:hidden!important;box-shadow:var(--am-ds-shadow-sm)!important;cursor:pointer;transition:box-shadow var(--am-dur-enter) var(--am-ease-out),border-color var(--am-fast),transform var(--am-dur-enter) var(--am-ease-out)}
  html.am-shell body:not(#am-x) #properties .property:hover{border-color:#D6D6DB!important;box-shadow:var(--am-ds-shadow-lg)!important;transform:translateY(-2px)}
  html.am-shell body:not(#am-x) #properties .property:focus-within{border-color:var(--am-ink)!important}
  html.am-shell body:not(#am-x) #properties .property-img{position:relative!important;height:auto!important;min-height:0!important;aspect-ratio:16/10!important;border-radius:0!important;background-size:cover!important;background-position:center!important;flex:none!important}
  html.am-shell body:not(#am-x) #properties .property-img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(20,20,22,.18),transparent);pointer-events:none}
  html.am-shell body:not(#am-x) #properties .pj-status{display:inline-flex;align-items:center;gap:6px;position:absolute;left:14px;top:14px;z-index:1;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--am-ink-strong);font-size:11.5px;font-weight:600;letter-spacing:.01em;box-shadow:0 2px 10px rgba(18,18,20,.12);backdrop-filter:blur(6px)}
  html.am-shell body:not(#am-x) #properties .pj-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--am-muted)}
  html.am-shell body:not(#am-x) #properties .pj-status--open::before{background:var(--am-ok)}
  html.am-shell body:not(#am-x) #properties .pj-status--hold::before{background:var(--am-warn)}
  html.am-shell body:not(#am-x) #properties .pj-status--sold::before{background:var(--am-late)}
  html.am-shell body:not(#am-x) #properties .pj-status--draft::before{background:transparent;border:1.5px solid var(--am-muted)}

  html.am-shell body:not(#am-x) #properties .property-body{display:flex!important;flex-direction:column!important;flex:1!important;gap:0!important;padding:18px 20px 20px!important;min-width:0!important}
  html.am-shell body:not(#am-x) #properties .property-title-row{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important;margin:0!important}
  html.am-shell body:not(#am-x) #properties .property-region{display:block!important;font-size:11px!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--am-amara-text)!important;margin-bottom:4px!important}
  html.am-shell body:not(#am-x) #properties .property-title-row b{display:block!important;font-size:18px!important;font-weight:600!important;letter-spacing:-.015em!important;line-height:1.25!important;color:var(--am-ink-strong)!important}
  html.am-shell body:not(#am-x) #properties .property-match-count{flex:none!important;display:inline-flex!important;align-items:center!important;height:24px!important;padding:0 9px!important;border-radius:999px!important;background:var(--am-surface-2)!important;color:var(--am-ink-2)!important;border:0!important;font-size:11.5px!important;font-weight:600!important;white-space:nowrap!important}
  html.am-shell body:not(#am-x) #properties .property-description{margin:10px 0 0!important;min-height:0!important;font-size:13px!important;line-height:1.55!important;color:var(--am-muted)!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  html.am-shell body:not(#am-x) #properties .property-price{margin:14px 0 0!important;font-size:20px!important;font-weight:600!important;letter-spacing:-.015em!important;color:var(--am-ink-strong)!important;font-variant-numeric:tabular-nums}
  html.am-shell body:not(#am-x) #properties .property-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin:16px 0 0!important;border:1px solid var(--am-line-soft)!important;border-radius:12px!important;overflow:hidden!important;background:var(--am-surface)!important}
  html.am-shell body:not(#am-x) #properties .property-facts>div{padding:10px 12px!important;border:0!important;border-radius:0!important;background:none!important;min-width:0!important}
  html.am-shell body:not(#am-x) #properties .property-facts>div:nth-child(odd){border-right:1px solid var(--am-line-soft)!important}
  html.am-shell body:not(#am-x) #properties .property-facts>div:nth-child(-n+2){border-bottom:1px solid var(--am-line-soft)!important}
  html.am-shell body:not(#am-x) #properties .property-facts span{display:block!important;font-size:11px!important;font-weight:500!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--am-muted)!important;margin-bottom:2px!important}
  html.am-shell body:not(#am-x) #properties .property-facts strong{display:block!important;font-size:13px!important;font-weight:600!important;color:var(--am-ink-strong)!important;line-height:1.35!important;overflow-wrap:anywhere}

  html.am-shell body:not(#am-x) #properties .property-card-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:16px 0 0!important;padding:0!important;border:0!important}
  html.am-shell body:not(#am-x) #properties .property-open-btn{display:inline-flex!important;align-items:center!important;height:38px!important;padding:0 14px!important;border-radius:10px!important;border:1px solid var(--am-ink)!important;background:var(--am-ink)!important;color:#fff!important;font-size:13px!important;font-weight:500!important;cursor:pointer}
  html.am-shell body:not(#am-x) #properties .property-open-btn:hover{background:var(--am-ink-strong)!important}
  html.am-shell body:not(#am-x) #properties .property-edit-btn{height:38px!important;padding:0 12px!important;border-radius:10px!important;border:1px solid transparent!important;background:transparent!important;color:var(--am-ink-2)!important;font-size:13px!important;font-weight:500!important;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  html.am-shell body:not(#am-x) #properties .property-edit-btn:hover{color:var(--am-ink-strong)!important}

  /* Lead koppelen: secundaire actie onderaan de kaart */
  html.am-shell body:not(#am-x) #properties .property-linker{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;margin:16px -20px -20px!important;padding:14px 20px!important;border-top:1px solid var(--am-line-soft)!important;background:#FBFBFC!important}
  html.am-shell body:not(#am-x) #properties .property-linker select{height:36px!important;min-height:36px!important;border:1px solid var(--am-line)!important;border-radius:9px!important;font-size:13px!important;background-color:var(--am-surface)!important;padding:0 10px!important;min-width:0!important}
  html.am-shell body:not(#am-x) #properties .property-linker button{height:36px!important;min-height:36px!important;padding:0 14px!important;border-radius:9px!important;font-size:13px!important;font-weight:500!important;border:1px solid var(--am-line)!important;background:var(--am-surface)!important;color:var(--am-ink)!important}
  html.am-shell body:not(#am-x) #properties .property-linker button:hover{border-color:var(--am-ink)!important}
  html.am-shell body:not(#am-x) #properties .property-linker button:disabled{opacity:.5}
  html.am-shell body:not(#am-x) #properties :is(.property-open-btn,.property-edit-btn,.property-linker button,.property-linker select):focus-visible{outline:2px solid var(--am-ink)!important;outline-offset:2px!important}

  html.am-shell body:not(#am-x) #properties .empty-note{grid-column:1/-1;padding:56px 16px!important;text-align:center;border:1px dashed var(--am-line-dashed)!important;border-radius:16px!important;color:var(--am-muted)!important;background:var(--am-surface)!important}
}
@media (min-width:801px) and (prefers-reduced-motion:reduce){
  html.am-shell body:not(#am-x) #properties .property,html.am-shell body:not(#am-x) #properties .property:hover{transition:none;transform:none}
}

/* ==========================================================================
   Projecten mobiel (≤800px): zelfde kaart als desktop, beeld bovenaan,
   statuslabel, rustige feitenraster en duidelijke primaire actie.
   ========================================================================== */
@media (max-width:800px){
  html.am-shell body:not(#am-x) #properties .page-head .section-eyebrow{color:var(--am-amara-text)!important;letter-spacing:.12em!important;font-weight:600!important}
  html.am-shell body:not(#am-x) #properties .page-head h2{color:var(--am-ink-strong)!important;font-weight:650!important}
  html.am-shell body:not(#am-x) #properties .pj-summary{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px;color:var(--am-muted)}
  html.am-shell body:not(#am-x) #properties .pj-summary b{color:var(--am-ink-strong);font-weight:600;margin-right:2px}
  html.am-shell body:not(#am-x) #properties #addPropertyBtn{height:44px!important;border-radius:12px!important;background:var(--am-ink)!important;border-color:var(--am-ink)!important;color:#fff!important}

  html.am-shell body:not(#am-x) #properties .toolbar{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;gap:8px!important;margin:4px 0 16px!important}
  html.am-shell body:not(#am-x) #properties .toolbar .search,html.am-shell body:not(#am-x) #properties .toolbar select{border:1px solid var(--am-line)!important;border-radius:12px!important;background-color:var(--am-surface)!important}

  html.am-shell body:not(#am-x) #properties .property-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
  html.am-shell body:not(#am-x) #properties .property{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;padding:0!important;border:1px solid var(--am-line)!important;border-radius:16px!important;background:var(--am-surface)!important;overflow:hidden!important;box-shadow:var(--am-ds-shadow-sm)!important}
  html.am-shell body:not(#am-x) #properties .property-img{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/10!important;margin:0!important;border-radius:0!important;background-size:cover!important;background-position:center!important}
  html.am-shell body:not(#am-x) #properties .pj-status{display:inline-flex;align-items:center;gap:6px;position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--am-ink-strong);font-size:11.5px;font-weight:600;box-shadow:0 2px 10px rgba(18,18,20,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.am-shell body:not(#am-x) #properties .pj-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--am-muted)}
  html.am-shell body:not(#am-x) #properties .pj-status--open::before{background:var(--am-ok)}
  html.am-shell body:not(#am-x) #properties .pj-status--hold::before{background:var(--am-warn)}
  html.am-shell body:not(#am-x) #properties .pj-status--sold::before{background:var(--am-late)}

  html.am-shell body:not(#am-x) #properties .property-body{display:flex!important;flex-direction:column!important;padding:16px!important}
  html.am-shell body:not(#am-x) #properties .property-title-row{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:flex-start!important;gap:10px!important}
  html.am-shell body:not(#am-x) #properties .property-region{font-size:11px!important;font-weight:600!important;letter-spacing:.12em!important;color:var(--am-amara-text)!important;margin-bottom:3px!important}
  html.am-shell body:not(#am-x) #properties .property-title-row b{display:block!important;font-size:18px!important;font-weight:650!important;letter-spacing:-.015em!important;color:var(--am-ink-strong)!important}
  html.am-shell body:not(#am-x) #properties .property-match-count{flex:none!important;height:24px!important;display:inline-flex!important;align-items:center!important;padding:0 9px!important;border-radius:999px!important;border:0!important;background:var(--am-surface-2)!important;color:var(--am-ink-2)!important;font-size:11.5px!important;font-weight:600!important}
  html.am-shell body:not(#am-x) #properties .property-description{margin:8px 0 0!important;font-size:13px!important;line-height:1.55!important;color:var(--am-muted)!important}
  html.am-shell body:not(#am-x) #properties .property-price{margin:12px 0 0!important;font-size:19px!important;font-weight:650!important;color:var(--am-ink-strong)!important}
  html.am-shell body:not(#am-x) #properties .property-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin:14px 0 0!important;border:1px solid var(--am-line-soft)!important;border-radius:12px!important;overflow:hidden!important}
  html.am-shell body:not(#am-x) #properties .property-facts>div{padding:10px 12px!important;border:0!important;background:none!important}
  html.am-shell body:not(#am-x) #properties .property-facts>div:nth-child(odd){border-right:1px solid var(--am-line-soft)!important}
  html.am-shell body:not(#am-x) #properties .property-facts>div:nth-child(-n+2){border-bottom:1px solid var(--am-line-soft)!important}
  html.am-shell body:not(#am-x) #properties .property-facts span{display:block!important;font-size:11px!important;font-weight:500!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--am-muted)!important}
  html.am-shell body:not(#am-x) #properties .property-facts strong{display:block!important;font-size:13px!important;font-weight:600!important;color:var(--am-ink-strong)!important}
  html.am-shell body:not(#am-x) #properties .property-card-actions{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;margin:14px 0 0!important}
  html.am-shell body:not(#am-x) #properties .property-open-btn{height:44px!important;border-radius:12px!important;border:1px solid var(--am-ink)!important;background:var(--am-ink)!important;color:#fff!important;font-size:14px!important;font-weight:500!important;justify-content:center!important;display:inline-flex!important;align-items:center!important}
  html.am-shell body:not(#am-x) #properties .property-edit-btn{height:44px!important;padding:0 14px!important;border-radius:12px!important;border:1px solid var(--am-line)!important;background:var(--am-surface)!important;color:var(--am-ink)!important;font-size:14px!important;font-weight:500!important}
  html.am-shell body:not(#am-x) #properties .property-linker{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;margin:14px -16px -16px!important;padding:12px 16px 16px!important;border-top:1px solid var(--am-line-soft)!important;background:#FBFBFC!important}
  html.am-shell body:not(#am-x) #properties .property-linker select,html.am-shell body:not(#am-x) #properties .property-linker button{height:44px!important;min-height:44px!important;border-radius:12px!important;border:1px solid var(--am-line)!important;background-color:var(--am-surface)!important;color:var(--am-ink)!important;font-size:14px!important}
  html.am-shell body:not(#am-x) #properties .property-linker button{padding:0 16px!important;font-weight:500!important}
}