/* =====================================================================
   MARKEDSPLADS
   Alle regler er afgrænset til markedssiden og dens egne vinduer, så intet
   andet i systemet påvirkes. :is(#id…) giver id-styrke, som er nødvendig
   for at slå de globale knap-/feltregler i app.css (der bruger !important).
   ===================================================================== */
:root{
  --mk-green:#23402E; --mk-green-2:#2C4B37; --mk-green-hover:#1B3324;
  --mk-gold:#C6A15B; --mk-gold-2:#B8924A;
  --mk-cream:#F5F1E8; --mk-paper:#FFFDF8;
  --mk-ink:#233028; --mk-soft:#6E6557;
  --mk-line:rgba(35,64,46,.14); --mk-line-strong:rgba(35,64,46,.26);
  --mk-danger:#8a3b32;
}
html.mk-lock, html.mk-lock body{ overflow:hidden; }

/* ---------- Knapper ---------- */
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn{
  text-align:center !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px;
  min-height:44px !important; margin:0 !important; padding:10px 18px !important;
  font:600 15px/1.2 'Inter', Arial, sans-serif !important; letter-spacing:0 !important; text-transform:none !important;
  border-radius:8px !important; border:1px solid transparent !important; cursor:pointer;
  transform:none !important; filter:none !important; white-space:nowrap;
}
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-primary{
  background:var(--mk-green) !important; color:var(--mk-cream) !important; box-shadow:0 6px 16px rgba(35,64,46,.20) !important;
}
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-primary:hover{ background:var(--mk-green-hover) !important; }
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-quiet,
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-small{
  background:var(--mk-paper) !important; color:var(--mk-green) !important;
  border-color:var(--mk-line-strong) !important; box-shadow:none !important;
}
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-quiet:hover,
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-small:hover{ background:var(--mk-cream) !important; }
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-small{ min-height:36px !important; padding:6px 12px !important; font-size:13.5px !important; }
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-sold{ background:var(--mk-green) !important; color:var(--mk-cream) !important; border-color:var(--mk-green) !important; }
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-danger{
  background:var(--mk-paper) !important; color:var(--mk-danger) !important; border-color:rgba(138,59,50,.35) !important; box-shadow:none !important;
}
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn-danger:hover{ background:#fbeeea !important; }
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn:disabled{ opacity:.5 !important; cursor:progress; }
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-btn:focus-visible,
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-card:focus-visible,
:is(#markedSide,#mkDetailModal,#mkEditModal,#mkCatModal) .mk-tab:focus-visible{ outline:3px solid var(--mk-gold) !important; outline-offset:2px; }

/* ---------- Felter ---------- */
:is(#markedSide,#mkEditModal,#mkCatModal) :is(input[type="text"],input[type="search"],input[type="tel"],select,textarea){
  width:100% !important; box-sizing:border-box !important; margin:0 !important;
  font:400 16px/1.35 'Inter', Arial, sans-serif !important; text-align:left !important;
  padding:11px 13px !important; min-height:46px; border-radius:8px !important;
  background:var(--mk-paper) !important; color:var(--mk-ink) !important;
  border:1px solid var(--mk-line-strong) !important; box-shadow:none !important;
}
:is(#markedSide,#mkEditModal,#mkCatModal) textarea{ resize:vertical; min-height:130px; }
:is(#markedSide,#mkEditModal,#mkCatModal) :is(input,select,textarea):focus{
  border-color:var(--mk-green) !important; box-shadow:0 0 0 3px rgba(198,161,91,.30) !important; outline:none !important;
}
.mk-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Top: faner + knapper ---------- */
#markedSide .mk-intro{ max-width:68ch; text-align:left !important; margin-left:0 !important; padding-left:0 !important; }
#markedSide .mk-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:18px 0 14px; border-bottom:1px solid var(--mk-line); }
#markedSide .mk-tabs{ display:flex; gap:4px; }
#markedSide .mk-tab{
  background:transparent !important; box-shadow:none !important; color:var(--mk-soft) !important;
  margin:0 !important; min-height:44px !important; padding:10px 14px 12px !important; border:0 !important; border-radius:0 !important;
  font:600 15.5px/1 'Inter', Arial, sans-serif !important; transform:none !important; text-transform:none !important; letter-spacing:0 !important;
  border-bottom:3px solid transparent !important; margin-bottom:-1px !important; display:inline-flex !important; align-items:center; gap:8px;
}
#markedSide .mk-tab.active{ color:var(--mk-green) !important; border-bottom-color:var(--mk-gold) !important; }
#markedSide .mk-tab-count:empty{ display:none; }
#markedSide .mk-tab-count{ background:var(--mk-cream); color:var(--mk-green); border-radius:999px; padding:3px 8px; font-size:12.5px; }
#markedSide .mk-toolbar-actions{ display:flex; gap:8px; padding-bottom:10px; }

/* ---------- Filtre ---------- */
#markedSide .mk-filters{ display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,230px) minmax(160px,200px); gap:10px; margin-bottom:10px; }
#markedSide .mk-field{ display:block; margin:0; }
#markedSide .mk-info{ text-align:left; font:500 13.5px/1.3 'Inter', Arial, sans-serif; color:var(--mk-soft); min-height:18px; margin:4px 0 12px; }

/* ---------- Kort ---------- */
#markedSide .mk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
#markedSide .mk-card{
  display:flex; flex-direction:column; background:var(--mk-paper); border:1px solid var(--mk-line);
  border-radius:8px; overflow:hidden; cursor:pointer; text-align:left;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#markedSide .mk-card:hover{ border-color:var(--mk-line-strong); box-shadow:0 8px 22px rgba(35,64,46,.10); }
#markedSide .mk-card-img{ position:relative; aspect-ratio:4/3; background:var(--mk-cream); overflow:hidden; }
#markedSide .mk-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
#markedSide .mk-noimg, .mk-gallery-empty{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:rgba(35,64,46,.28); }
#markedSide .mk-noimg svg{ width:46px; height:46px; }
#markedSide .mk-imgcount{
  position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px;
  background:rgba(35,48,40,.72); color:#fff; font:600 12px/1 'Inter', Arial, sans-serif; padding:5px 7px; border-radius:6px;
}
#markedSide .mk-imgcount svg{ width:14px; height:14px; }
#markedSide .mk-card-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
#markedSide .mk-price{ font:700 21px/1.15 Georgia, 'Times New Roman', serif; color:var(--mk-green); }
#markedSide .mk-price.is-free, #mkDetailModal .mk-detail-price.is-free{ color:var(--mk-gold-2); }
#markedSide .mk-title{ font:600 15px/1.35 'Inter', Arial, sans-serif; color:var(--mk-ink); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#markedSide .mk-meta{ display:flex; justify-content:space-between; gap:8px; margin-top:auto; padding-top:6px; font:400 12.5px/1.3 'Inter', Arial, sans-serif; color:var(--mk-soft); }
#markedSide .mk-meta span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#markedSide .mk-meta span:last-child{ white-space:nowrap; }
#markedSide .mk-card-actions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 14px; }
#markedSide .mk-card.is-sold .mk-card-img img{ filter:grayscale(.85) opacity(.7); }
#markedSide .mk-card.is-sold .mk-price{ color:var(--mk-soft); text-decoration:line-through; text-decoration-thickness:1px; }
#markedSide .mk-sold-band{
  position:absolute; left:0; right:0; bottom:0; padding:7px 10px; text-align:center;
  background:var(--mk-gold); color:#2a2211; font:700 13px/1 'Inter', Arial, sans-serif;
}
#markedSide .mk-empty, .mk-modal .mk-empty{ grid-column:1/-1; text-align:center; padding:48px 16px; color:var(--mk-soft); font:400 15px/1.5 'Inter', Arial, sans-serif; }
#markedSide .mk-empty p{ margin:0 0 14px; font-size:16px; color:var(--mk-ink); }

/* ---------- Vinduer ---------- */
.mk-modal .mk-dialog{ text-align:left !important; width:min(96vw, 980px) !important; padding:20px 22px 22px !important; font-family:'Inter', Arial, sans-serif; color:var(--mk-ink); }
.mk-modal .mk-cats{ width:min(96vw, 640px) !important; }
.mk-modal .stats-topbar{ display:flex; flex-direction:row !important; align-items:center !important; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--mk-line); }
.mk-modal .stats-title{ font:600 21px/1.25 Georgia, 'Times New Roman', serif; color:var(--mk-green); overflow-wrap:anywhere; }
.mk-modal .mk-muted{ color:var(--mk-soft); font-size:14px; }

/* Detalje */
#mkDetailModal .mk-detail-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:start; }
#mkDetailModal .mk-gallery{ position:relative; background:#1f2a23; border-radius:8px; overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; user-select:none; }
#mkDetailModal .mk-gallery-main{ width:100%; height:100%; object-fit:contain; display:block; }
#mkDetailModal .mk-gallery-empty{ flex-direction:column; gap:8px; background:var(--mk-cream); color:var(--mk-soft); font-size:14px; }
#mkDetailModal .mk-gallery-empty svg{ width:52px; height:52px; color:rgba(35,64,46,.3); }
#mkDetailModal .mk-nav{
  position:absolute; top:50%; transform:translateY(-50%) !important; margin:0 !important;
  width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important; border-radius:50% !important;
  background:rgba(255,253,248,.88) !important; color:var(--mk-green) !important; border:0 !important;
  font:400 28px/1 Georgia, serif !important; box-shadow:0 2px 8px rgba(0,0,0,.25) !important; display:flex !important; align-items:center; justify-content:center;
}
#mkDetailModal .mk-nav-prev{ left:10px; } #mkDetailModal .mk-nav-next{ right:10px; }
#mkDetailModal .mk-gallery-count{ position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.55); color:#fff; font:600 12px/1 'Inter', Arial, sans-serif; padding:5px 8px; border-radius:6px; }
#mkDetailModal .mk-thumbs{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
#mkDetailModal .mk-thumb{
  flex:0 0 64px; width:64px !important; height:64px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border-radius:6px !important; overflow:hidden; border:2px solid transparent !important; background:var(--mk-cream) !important;
  box-shadow:none !important; opacity:.6; transform:none !important;
}
#mkDetailModal .mk-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#mkDetailModal .mk-thumb.active{ opacity:1; border-color:var(--mk-gold) !important; }
#mkDetailModal .mk-detail-price{ font:700 32px/1.1 Georgia, 'Times New Roman', serif; color:var(--mk-green); margin-bottom:12px; }
#mkDetailModal .mk-sold-note{ display:inline-block; background:var(--mk-gold); color:#2a2211; font-weight:700; font-size:13px; padding:6px 10px; border-radius:6px; margin-bottom:10px; }
#mkDetailModal .mk-facts{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 14px; font-size:14px; }
#mkDetailModal .mk-facts dt{ color:var(--mk-soft); }
#mkDetailModal .mk-facts dd{ margin:0; color:var(--mk-ink); font-weight:500; }
#mkDetailModal .mk-desc{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.6; max-width:65ch; padding:14px 0; border-top:1px solid var(--mk-line); }
#mkDetailModal .mk-contact{ background:var(--mk-cream); border-radius:8px; padding:14px 16px; margin-top:6px; }
#mkDetailModal .mk-contact-label{ font-size:12.5px; color:var(--mk-soft); }
#mkDetailModal .mk-contact-name{ font:600 17px/1.3 'Inter', Arial, sans-serif; color:var(--mk-ink); }
#mkDetailModal .mk-contact-phone{ font-size:15px; margin:2px 0 10px; color:var(--mk-ink); }
#mkDetailModal .mk-contact-actions{ display:flex; gap:8px; }
#mkDetailModal .mk-link-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:8px;
  background:var(--mk-green); color:var(--mk-cream) !important; text-decoration:none; font:600 15px/1 'Inter', Arial, sans-serif;
}
#mkDetailModal .mk-link-btn:hover{ background:var(--mk-green-hover); }
#mkDetailModal .mk-owner-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--mk-line); }
#mkDetailModal .mk-admin-note{ margin-top:8px; font-size:13px; }

/* Editor */
#mkEditModal .mk-form{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:start; }
#mkEditModal .mk-form-fields{ display:flex; flex-direction:column; }
#mkEditModal .mk-label{ display:block; font:600 14px/1.3 'Inter', Arial, sans-serif; color:var(--mk-ink); margin:14px 0 6px; }
#mkEditModal .mk-form-fields > .mk-label:first-child, #mkEditModal .mk-form-images > .mk-label{ margin-top:0; }
#mkEditModal .mk-help{ font-size:13px; line-height:1.45; color:var(--mk-soft); margin:6px 0 0; }
#mkEditModal .mk-row{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:12px; }
#mkEditModal .mk-img-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:dense; gap:8px; }
#mkEditModal .mk-img-tile{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--mk-cream); border:2px solid transparent; }
#mkEditModal .mk-img-tile.is-primary{ border-color:var(--mk-gold); grid-column:span 2; grid-row:span 2; }
#mkEditModal .mk-img-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
#mkEditModal .mk-tile-btn{
  position:absolute; top:6px; width:34px !important; height:34px !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  border-radius:50% !important; border:0 !important; display:flex !important; align-items:center; justify-content:center;
  background:rgba(255,253,248,.92) !important; color:var(--mk-green) !important; box-shadow:0 1px 5px rgba(0,0,0,.25) !important;
  font:700 15px/1 'Inter', Arial, sans-serif !important; transform:none !important;
}
#mkEditModal .mk-tile-star{ left:6px; }
#mkEditModal .mk-tile-remove{ right:6px; }
#mkEditModal .mk-tile-star svg{ width:19px; height:19px; fill:none; stroke:var(--mk-green); stroke-width:1.8; stroke-linejoin:round; }
#mkEditModal .mk-img-tile.is-primary .mk-tile-star{ background:var(--mk-gold) !important; }
#mkEditModal .mk-img-tile.is-primary .mk-tile-star svg{ fill:#fff; stroke:#fff; }
#mkEditModal .mk-tile-label{ position:absolute; left:0; right:0; bottom:0; padding:6px 8px; background:rgba(35,48,40,.78); color:#fff; font:600 12px/1.2 'Inter', Arial, sans-serif; }
#mkEditModal .mk-img-add{
  aspect-ratio:1; border:1.5px dashed var(--mk-line-strong); border-radius:8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:6px;
  color:var(--mk-green); font:600 13px/1.25 'Inter', Arial, sans-serif; background:var(--mk-paper);
}
#mkEditModal .mk-img-add:hover{ background:var(--mk-cream); border-color:var(--mk-green); }
#mkEditModal .mk-img-add svg{ width:26px; height:26px; }
#mkEditModal .mk-img-add input{ position:absolute; width:1px; height:1px; opacity:0; }
#mkEditModal .mk-img-add:focus-within{ outline:3px solid var(--mk-gold); outline-offset:2px; }
#mkEditModal .mk-img-grid:has(.mk-img-tile) .mk-img-add{ grid-column:auto; }
#mkEditModal .mk-img-grid:not(:has(.mk-img-tile)) .mk-img-add{ grid-column:1/-1; aspect-ratio:auto; min-height:180px; }
.mk-modal .mk-edit-status{ min-height:20px; margin-top:14px; font-size:14px; color:var(--mk-green); }
.mk-modal .mk-edit-status.is-error{ color:var(--mk-danger); font-weight:600; }
#mkEditModal .mk-editor-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; padding-top:14px; border-top:1px solid var(--mk-line); }

/* Kategorier */
#mkCatModal .mk-cat-list{ display:flex; flex-direction:column; gap:8px; }
#mkCatModal .mk-cat-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:8px; align-items:center; }
#mkCatModal .mk-cat-count{ font-size:13px; white-space:nowrap; min-width:70px; text-align:right; }
#mkCatModal .mk-cat-new{ grid-template-columns:minmax(0,1fr) auto; margin-top:16px; padding-top:16px; border-top:1px solid var(--mk-line); }

/* ---------- Mobil ---------- */
@media (max-width:820px){
  #mkDetailModal .mk-detail-grid, #mkEditModal .mk-form{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:640px){
  #markedSide .mk-toolbar{ flex-direction:column-reverse; align-items:stretch; }
  #markedSide .mk-toolbar-actions{ padding-bottom:0; }
  #markedSide .mk-toolbar-actions .mk-btn{ flex:1; }
  #markedSide .mk-filters{ grid-template-columns:1fr 1fr; }
  #markedSide .mk-field-search{ grid-column:1/-1; }
  #markedSide .mk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #markedSide .mk-card-body{ padding:10px 10px 12px; }
  #markedSide .mk-price{ font-size:18px; }
  #markedSide .mk-title{ font-size:14px; }
  #markedSide .mk-meta{ flex-direction:column; gap:0; }
  #markedSide .mk-card-actions{ padding:0 10px 10px; }
  #markedSide .mk-card-actions .mk-btn{ flex:1 1 100%; }
  .mk-modal.stats-modal{ padding:0 !important; align-items:stretch !important; }
  .mk-modal .mk-dialog{ width:100vw !important; max-height:100dvh !important; height:100dvh; border-radius:0 !important; padding:14px 14px calc(18px + env(safe-area-inset-bottom)) !important; box-sizing:border-box; }
  #mkEditModal .mk-row{ grid-template-columns:1fr; gap:0; }
  #mkEditModal .mk-editor-actions{ position:sticky; bottom:calc(-18px - env(safe-area-inset-bottom)); background:#fffdf8; padding-bottom:12px; }
  #mkEditModal .mk-editor-actions .mk-btn{ flex:1; }
  #mkCatModal .mk-cat-row{ grid-template-columns:1fr auto auto; }
  #mkCatModal .mk-cat-count{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  #markedSide .mk-card{ transition:none; }
}

.mk-modal .stats-topbar .smallbtn{ flex:0 0 auto; text-transform:none !important; letter-spacing:0 !important; }

/* ---------- "Nye opslag" i menuen ---------- */
#topMarkedMenuItem .mk-menu-badge{
  margin-left:auto; height:20px; padding:0 8px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  background:var(--mk-gold); color:#2a2211; font:700 11.5px/1 'Inter', Arial, sans-serif; letter-spacing:0;
}
#topUserMenuToggle{ position:relative; }
#topUserMenuToggle .mk-menu-dot{
  position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%;
  background:var(--mk-gold); box-shadow:0 0 0 2px #fffdf8; pointer-events:none;
}