/*
 * Mintayn Gallery UI (Build 1)
 * - Image-first, cardmarket-like grid
 * - Modern, theme-friendly tokens
 */

.mintayn-gallery-ui-shell{
  margin: 18px 0;
  /* Ensure typography matches the Mintayn Card View (detail) to avoid theme font overrides. */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

/* Ensure theme headings/buttons/inputs do not override Mintayn typography */
.mintayn-gallery-ui-shell h1,
.mintayn-gallery-ui-shell h2,
.mintayn-gallery-ui-shell h3,
.mintayn-gallery-ui-shell button,
.mintayn-gallery-ui-shell input,
.mintayn-gallery-ui-shell select,
.mintayn-gallery-ui-shell textarea{
  font-family: inherit;
}


.mintayn-gallery-ui-shell__title{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
  margin: 0 0 10px 0;
}


.mintayn-gallery-ui{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


.mintayn-gallery-ui{
  /* Tokens (defaults). These intentionally adapt well to both light/dark themes. */
  --mint-bg: #ffffff;
  --mint-surface: #ffffff;
  --mint-surface-2: #ffffff;
  --mint-text: CanvasText;
  --mint-muted: color-mix(in oklab, CanvasText 60%, transparent);
  --mint-border: rgba(0,0,0,.10);
  --mint-ring: rgba(0,0,0,.18);
  --mint-radius-lg: 16px;
  --mint-radius-md: 12px;
  --mint-radius-sm: 10px;
  --mint-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --mint-shadow-md: 0 10px 30px rgba(0,0,0,.12);
  --mint-gap: 12px;
  --mint-card-radius: 14px;
  --mint-card-aspect: 0.714; /* width/height ~ 5/7 (adjust later if needed) */

  background: var(--mint-bg);
  border: 1px solid var(--mint-border);
  border-radius: var(--mint-radius-lg);
  padding: 12px;
}

.mintayn-gallery-ui__topbar{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--mint-border);
  border-radius: var(--mint-radius-lg);
  background: color-mix(in oklab, var(--mint-surface) 75%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mintayn-gallery-ui__search{
  position: relative;
  flex: 1;
  min-width: 200px;
}

.mintayn-gallery-ui__icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mint-muted);
  font-size: 14px;
}

.mintayn-gallery-ui__searchInput{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  padding: 0 40px 0 34px;
  border: 1px solid var(--mint-border);
  background: var(--mint-surface);
  color: var(--mint-text);
  box-shadow: var(--mint-shadow-sm);
  outline: none;
}

.mintayn-gallery-ui__searchInput:focus{
  border-color: var(--mint-ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-ring) 35%, transparent);
}

.mintayn-gallery-ui__clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--mint-border);
  background: color-mix(in oklab, var(--mint-surface) 70%, transparent);
  color: var(--mint-muted);
  cursor: pointer;
  display: none;
}

.mintayn-gallery-ui__clear:hover{
  color: var(--mint-text);
}

/* ===== Facets (Build 4.5) ===== */
.mintayn-gallery-ui__facets{margin:10px 0 12px;display:flex;flex-direction:column;gap:10px}
.mintayn-facet{display:flex;flex-direction:column;gap:8px}
.mintayn-facet__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mintayn-facet__label{font-weight:800;font-size:13px;color:var(--mint-text, #111)}
.mintayn-facet__clearGroup{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;cursor:pointer}
.mintayn-facet__clearGroup:hover{filter:brightness(0.98)}
.mintayn-facet__clearGroup.is-hidden{display:none}
.mintayn-facet__search{max-width:360px;width:100%;height:34px;border-radius:999px;border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);padding:0 12px;font-size:12px;font-weight:700;color:var(--mint-text, #111);outline:none}
.mintayn-facet__search:focus{border-color:color-mix(in oklab, var(--mint-accent) 40%, var(--mint-border, rgba(0,0,0,.12)))}
.mintayn-facet__items{display:flex;flex-wrap:wrap;gap:8px}
.mintayn-facet__item{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.mintayn-facet__item.is-active{background:color-mix(in oklab, var(--mint-accent) 18%, var(--mint-surface));border-color:color-mix(in oklab, var(--mint-accent) 40%, var(--mint-border));}

/* Build 4.6: facet toolbar + scalability controls */
.mintayn-facets__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px}
.mintayn-facets__title{font-weight:800;font-size:13px;color:var(--mint-text, #111)}
.mintayn-facets__clear{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}
.mintayn-facets__clear:hover{filter:brightness(0.98)}
.mintayn-facet__more{border:1px dashed var(--mint-border, rgba(0,0,0,.18));background:transparent;color:var(--mint-text, #111);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}
.mintayn-facet__more:hover{filter:brightness(0.98)}

/* Build 4.9 (P0): Quick Search + Detailsuche grouping */
.mintayn-facets__right{display:flex;align-items:center;gap:8px}
.mintayn-facets__presets{display:flex;align-items:center;gap:6px}
.mintayn-facets__presetsSelect{height:34px;border-radius:999px;border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);padding:0 10px;font-size:12px;font-weight:800;color:var(--mint-text, #111);outline:none;max-width:160px}
.mintayn-facets__presetBtn{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}
.mintayn-facets__presetBtn:hover{filter:brightness(0.98)}
.mintayn-facets__toggle{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}
.mintayn-facets__toggle:hover{filter:brightness(0.98)}

/* Build 4.12.23 (P4): Mobile overflow fix for toolbar actions (Presets / Save / Delete) */
@media (max-width: 560px){
  .mintayn-facets__toolbar{flex-direction:column;align-items:stretch}
  .mintayn-facets__right{flex-wrap:wrap;justify-content:flex-start}
  .mintayn-facets__presets{flex-wrap:wrap}
  .mintayn-facets__presetsSelect{max-width:100%;flex:1 1 160px}
  .mintayn-facets__toggle{flex:0 0 auto}
}
.mintayn-facets__quick{display:flex;flex-direction:column;gap:10px}
.mintayn-facets__advanced{margin-top:6px;display:flex;flex-direction:column;gap:10px}
.mintayn-facets__advanced.is-hidden{display:none}

/* Build 4.9 (P1 revised): Detailsuche field (Effect keyword) */
.mintayn-advfield{display:flex;flex-direction:column;gap:6px}
.mintayn-advfield__labelRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mintayn-advfield__label{font-weight:600;font-size:14px}
.mintayn-advfield__clear{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;cursor:pointer}
.mintayn-advfield__clear:hover{filter:brightness(0.98)}
.mintayn-advfield__clear.is-hidden{display:none}
.mintayn-advfield__clear.is-hidden{display:none}
.mintayn-advfield__input{width:100%}

/* P3: Format Values (numeric range filters) */
.mintayn-advfield__row{display:flex;gap:10px}
.mintayn-advfield__input--num{min-width:0}
.mintayn-advblock{border:1px solid rgba(0,0,0,0.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.mintayn-advblock__titleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mintayn-advblock__title{font-weight:700;font-size:14px}
.mintayn-advblock__clear{border:1px solid var(--mint-border, rgba(0,0,0,.12));background:var(--mint-surface, #fff);color:var(--mint-text, #111);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;cursor:pointer}
.mintayn-advblock__clear:hover{filter:brightness(0.98)}
.mintayn-advblock__clear.is-hidden{display:none}
.mintayn-advblock__sub{font-weight:600;font-size:13px;margin-top:6px}

.mintayn-gallery-ui__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

@media (max-width: 560px){
  .mintayn-gallery-ui__actions{flex-wrap:wrap;white-space:normal}
}

.mintayn-gallery-ui__meta{
  font-size: 13px;
  color: var(--mint-muted);
}

.mintayn-gallery-ui__grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mint-gap);
}

@media (min-width: 720px){
  .mintayn-gallery-ui__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .mintayn-gallery-ui__grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.mintayn-card-tile{
  position: relative;
  border-radius: var(--mint-card-radius);
  /* Do NOT clip the <img>. Clipping + border-radius caused visible "cut" artifacts. */
  overflow: visible;
  border: 1px solid var(--mint-border);
  background: var(--mint-surface-2);
  box-shadow: var(--mint-shadow-sm);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  aspect-ratio: calc(var(--mint-card-aspect) / 1);
}

.mintayn-card-tile:hover{
  transform: translateY(-2px);
  box-shadow: var(--mint-shadow-md);
  border-color: var(--mint-ring);
}

.mintayn-card-tile.is-selected{
  border-color: var(--mint-ring);
  box-shadow: var(--mint-shadow-md);
}

.mintayn-card-tile__img{
  width: 100%;
  height: 100%;
  /* Clip to rounded corners on the image itself (no container overflow clipping). */
  border-radius: inherit;
  /* Show the full card art in tiles (no cropping). */
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--mint-surface, #fff);
}

.mintayn-card-tile__fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  color: var(--mint-muted);
  font-size: 12px;
}

/* Skeleton */
.mintayn-card-tile.is-skeleton{
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--mint-surface-2) 75%, transparent),
    color-mix(in oklab, var(--mint-surface) 85%, transparent),
    color-mix(in oklab, var(--mint-surface-2) 75%, transparent)
  );
  background-size: 200% 100%;
  animation: mintayn-skeleton 1.2s ease-in-out infinite;
}

@keyframes mintayn-skeleton{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.mintayn-gallery-ui__footer{
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px 0 4px;
}

.mintayn-gallery-ui__reset{
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--mint-border);
  background: transparent;
  color: var(--mint-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mintayn-gallery-ui__reset:hover{
  color: var(--mint-text);
  border-color: var(--mint-ring);
}

.mintayn-gallery-ui__loadMore{
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--mint-border);
  background: var(--mint-surface);
  color: var(--mint-text);
  cursor: pointer;
  box-shadow: var(--mint-shadow-sm);
}

.mintayn-gallery-ui__loadMore:hover{
  border-color: var(--mint-ring);
}

.mintayn-gallery-ui__loadMore[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* Link-based load more (non-JS fallback) */
.mintayn-gallery-ui__loadMore.is-disabled,
.mintayn-gallery-ui__loadMore[aria-disabled="true"]{
  opacity: .55;
  pointer-events: none;
}

/* Minimal image preview modal (Build 1). */
.mintayn-preview{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mintayn-preview.is-open{ display: flex; }

.mintayn-preview__panel{
  position: relative;
  max-width: min(720px, 92vw);
  max-height: 92vh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  background: #000;
}

.mintayn-preview__img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
}

.mintayn-preview__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
}


/* ===== Inspect Drawer (Build 3) ===== */
.mintayn-drawer{position:fixed;inset:0;z-index:99999;display:none}
.mintayn-drawer.is-open{display:block}
.mintayn-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(140%) blur(2px)}
.mintayn-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(520px, 92vw);background:var(--mint-surface, #fff);border-left:1px solid var(--mint-border, rgba(0,0,0,.08));box-shadow:0 10px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;min-height:0}
.mintayn-drawer__close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:999px;border:1px solid var(--mint-border, rgba(0,0,0,.12));background:rgba(255,255,255,.9);cursor:pointer;font-size:20px;line-height:1}
.mintayn-drawer__content{display:grid;grid-template-columns:1fr;gap:14px;padding:18px;padding-top:58px;overflow:auto;min-height:0}
/* Drawer preview image: show the full card and add a little breathing room so
   nothing ever *looks* cropped due to the rounded mask/border. */
.mintayn-drawer__imageWrap{
  /* Do not clip the preview image.
     overflow:hidden + rounded corners visually "cuts" the card edges (looks like top/bottom cropping).
     If we want rounding later, we should round the image itself or add a separate backdrop layer. */
  border-radius:0;
  overflow:visible;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  width:100%;
}
/* Ensure the preview never crops: the wrap defines the box, the image fully contains within it */
.mintayn-drawer__image{display:block;width:100%!important;height:auto!important;max-width:100%!important;max-height:min(70vh, 720px)!important;object-fit:contain!important;object-position:center!important;background:var(--mint-surface, #fff);}
.mintayn-drawer__body{display:flex;flex-direction:column;gap:10px;margin-top:12px;position:relative;z-index:2;background:var(--mint-surface, #fff)}
.mintayn-drawer__title{font-size:18px;font-weight:800;color:var(--mint-text, #111);letter-spacing:-.01em}
.mintayn-drawer__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mintayn-drawer__open,.mintayn-drawer__copy{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--mint-border, rgba(0,0,0,.12));background:rgba(255,255,255,.9);text-decoration:none;color:var(--mint-text, #111);font-weight:700;font-size:13px}
.mintayn-drawer__copy{cursor:pointer}
.mintayn-drawer__fields{margin-top:6px;border:1px solid var(--mint-border, rgba(0,0,0,.08));border-radius:16px;overflow:hidden;background:var(--mint-surface, #fff)}
.mintayn-drawer__row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:10px 12px;border-top:1px solid var(--mint-border, rgba(0,0,0,.06))}
.mintayn-drawer__row:first-child{border-top:0}
.mintayn-drawer__label{font-size:12px;color:var(--mint-muted, rgba(0,0,0,.55));font-weight:700}
.mintayn-drawer__value{font-size:13px;color:var(--mint-text, #111);font-weight:600}
.mintayn-drawer__empty{padding:14px 12px;color:var(--mint-muted, rgba(0,0,0,.6));font-size:13px}
.mintayn-drawer__skeleton{padding:12px;display:grid;gap:10px}
.mintayn-drawer__skeleton>div{height:12px;border-radius:999px;background:rgba(0,0,0,.08)}
html.mintayn-drawer-open{overflow:hidden}

/* Mobile: bottom sheet */
@media (max-width: 720px){
  .mintayn-drawer__panel{right:auto;left:0;bottom:0;top:auto;width:100%;height:min(88vh, 760px);border-left:0;border-top:1px solid var(--mint-border, rgba(0,0,0,.08));border-radius:20px 20px 0 0}
  .mintayn-drawer__close{top:10px;right:10px}
  .mintayn-drawer__row{grid-template-columns:104px 1fr}
}


/* === P8: Unified field surfaces (no grey-tinted inputs/boxes) === */
.mintayn-gallery-ui-shell input,
.mintayn-gallery-ui-shell select,
.mintayn-gallery-ui-shell textarea{
  background:#fff;
  color:var(--mint-text, #111);
  border:1px solid var(--mint-border, rgba(0,0,0,.10));
  box-shadow:none;
}
.mintayn-gallery-ui-shell input::placeholder,
.mintayn-gallery-ui-shell textarea::placeholder{
  color:var(--mint-muted, rgba(0,0,0,.55));
}