/* Base */
.mzn-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#1f2937; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%); }
.mzn-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:12px 0; flex-wrap:wrap; }
.mzn-left { display:flex; gap:10px; flex-wrap:wrap; }

/* Inputs & chips */
.mzn-input { padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; font-size:14px; outline:0; background:#fff; min-width:200px; }
.mzn-input:focus { border-color:#111827; box-shadow:0 0 0 3px rgba(17,24,39,.1); }

.mzn-chip { border:1px solid #e5e7eb; background:#fff; border-radius:999px; padding:7px 10px; cursor:pointer; font-weight:600; font-size:13px; }
.mzn-apply { background:#111827; color:#fff; border-color:#111827; }
.mzn-right { display:flex; gap:6px; }
.mzn-toggle { border:1px solid #e5e7eb; background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:600; font-size:13px; }
.mzn-toggle[aria-pressed="true"] { background:#111827; color:#fff; border-color:#111827; }

.mzn-status { margin:8px 0 12px; min-height:1.2em; color:#6b7280; }

/* Dropdown facet shells */
.mzn-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mzn-filter { display:flex; flex-direction:column; gap:6px; }
.mzn-filter .mzn-filter-label { display:none; } /* labels hidden; chips show names */

.mzn-dd { position:relative; }
.mzn-dd .mzn-dd-count { opacity:.8; font-weight:600; }
.mzn-dd-panel {
  position:absolute; z-index:2000; top:calc(100% + 6px); left:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.15);
  width:max-content; min-width:200px; max-width:320px;
}
.mzn-grid[hidden],
.mzn-table-wrap[hidden],
.mzn-dd-panel[hidden],
.mzn-lightbox[hidden],
#mzn-hover[hidden] {
  display: none !important;
}
.mzn-dd-list { max-height:260px; overflow:auto; padding:10px; display:grid; grid-template-columns:1fr; gap:6px; }
.mzn-dd-actions { display:flex; gap:8px; justify-content:flex-end; padding:8px 10px; border-top:1px solid #f3f4f6; }
.mzn-dd-actions .mzn-btn-apply,
.mzn-dd-actions .mzn-btn-clear {
  padding:6px 10px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px;
}
.mzn-dd-actions .mzn-btn-apply { background:#111827; color:#fff; border-color:#111827; }

/* Checkbox rows inside dropdowns */
.mzn-check-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; }
.mzn-check-row:hover { background:#f9fafb; }
.mzn-check-row input { transform: translateY(1px); }

/* Grid */
.mzn-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mzn-card {
  border: 1px solid #e5e7eb;
  border-radius:16px;
  padding:10px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  transition: border-color .12s ease, box-shadow .15s ease, transform .08s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  --mzn-accent: #94a3b8; /* default neutral accent */
  position: relative;
}
.mzn-card::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background: var(--mzn-accent);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.mzn-card:hover,
.mzn-card:focus {
  transform: translateY(-3px) scale(1.03);
  border-color: #cfd3da;
  box-shadow:
    0 14px 36px rgba(0,0,0,.28),
    0 0 0 3px color-mix(in srgb, var(--mzn-accent) 28%, transparent);
  outline: none;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mzn-thumb img {
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
  background:#f8fafc;
  transition: transform .12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mzn-card:hover .mzn-thumb img,
.mzn-card:focus .mzn-thumb img {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}

/* Aura accent mappings */
.mzn-card[data-aura="Air"]       { --mzn-accent: #ee7509; }
.mzn-card[data-aura="Earth"]     { --mzn-accent: #0e985f; }
.mzn-card[data-aura="Fire"]      { --mzn-accent: #d9213b; }
.mzn-card[data-aura="Lightning"] { --mzn-accent: #d4ba0a; }
.mzn-card[data-aura="Water"]     { --mzn-accent: #3e83c2; }

/* Pagination */
.mzn-pagination { display:flex; gap:10px; align-items:center; justify-content:center; margin:16px 0; }
.mzn-page { padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.mzn-page:disabled { opacity:.5; cursor:not-allowed; }

/* Table */
.mzn-table-wrap { overflow:auto; border:1px solid #e5e7eb; border-radius:12px; }
.mzn-table { width:100%; border-collapse:collapse; font-size:14px; }
.mzn-table th, .mzn-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; white-space:nowrap; }
.mzn-table thead th { position:sticky; top:0; background:#fff; cursor:pointer; }
.mzn-table tbody tr { background:#fff; transition: background .1s ease; }
.mzn-table tbody tr:hover, .mzn-table tbody tr:focus { background:#f9fafb; outline:none; }

/* Hover preview + Lightbox */
.mzn-hover { position:absolute; pointer-events:none; z-index:3000; border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.25); background:#fff; padding:6px; }
.mzn-hover img { display:block; width:260px; height:auto; border-radius:8px; }

.mzn-lightbox { position:fixed; inset:0; z-index:4000; }
.mzn-lightbox[hidden] { display:none; }
.mzn-lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); }
.mzn-lightbox-content { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:90vw; max-height:90vh; }
.mzn-lightbox img { display:block; max-width:90vw; max-height:80vh; border-radius:12px; }
.mzn-close { position:absolute; right:-10px; top:-10px; width:36px; height:36px; border-radius:999px; border:none; background:#111827; color:#fff; font-size:20px; cursor:pointer; line-height:36px; }

body.mzn-no-scroll { overflow:hidden; }

/* Responsive adjustments for filter toolbar and filters */
@media (max-width: 900px) {
  .mzn-toolbar { gap:10px; }
  .mzn-filters { gap:6px; }
  .mzn-chip,
  .mzn-toggle,
  .mzn-input {
    padding:6px 9px;
    font-size:12.5px;
    min-width:180px;
  }
  .mzn-dd-panel { min-width:180px; max-width:300px; }
}

@media (max-width: 600px) {
  .mzn-toolbar {
    gap: 8px;
    margin: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mzn-filters {
    gap: 6px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .mzn-chip,
  .mzn-toggle,
  .mzn-input {
    padding: 6px 8px;
    font-size: 12px;
    min-width: 140px;
  }
  .mzn-dd-panel {
    min-width: 160px;
    max-width: 280px;
  }
}

/* Checklist Table (base styles consistent with .mzn-table) */
.mzn-checklist-wrap { 
  overflow:auto; 
  border:1px solid #e5e7eb; 
  border-radius:12px; 
  margin-top: 16px;
}
.mzn-checklist { 
  width:100%; 
  border-collapse:collapse; 
  font-size:14px; 
}
.mzn-checklist th, 
.mzn-checklist td { 
  padding:10px 12px; 
  border-bottom:1px solid #f3f4f6; 
  white-space:nowrap; 
}
.mzn-checklist thead th { 
  position:sticky; 
  top:0; 
  background:#fff; 
}
.mzn-checklist tbody tr { 
  background:#fff; 
  transition: background .1s ease; 
}
.mzn-checklist tbody tr:hover, 
.mzn-checklist tbody tr:focus { 
  background:#f9fafb; 
  outline:none; 
}
.mzn-checklist input[type="checkbox"] { 
  transform: scale(1.2); 
}

/* --- Checklist table refinements & parity with .mzn-table --- */
.mzn-checklist-wrap .mzn-checklist-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin:8px 0;
}

.mzn-checklist caption{
  caption-side: top;
  text-align:left;
  font-weight:700;
  padding:8px 0;
  color:#1f2937;
}

.mzn-checklist tbody tr:nth-child(even){
  background:#fcfcfd;
}

/* Compact, centered column for the ownership checkbox */
.mzn-checklist th:last-child,
.mzn-checklist td:last-child{
  text-align:center;
  width:72px;
}
.mzn-checklist td:last-child input{
  margin:0;
  transform:scale(1.15);
}

/* Make the Name column a little wider and allow wrap on small screens */
.mzn-checklist th:nth-child(2),
.mzn-checklist td:nth-child(2){
  min-width:200px;
}

/* Sticky first text column (Name) on large screens for easier scanning */
@media (min-width: 1100px){
  .mzn-checklist th:nth-child(2),
  .mzn-checklist td:nth-child(2){
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
}

/* Hover affordance similar to .mzn-table rows */
.mzn-checklist tbody tr:hover{
  background:#f5f7fb;
}

/* Print / Save to PDF: show only the checklist in a compact style */
@media print {
  body { background:#fff; }
  .mzn-toolbar,
  .mzn-status,
  .mzn-grid,
  .mzn-table-wrap,
  #mzn-hover,
  .mzn-lightbox { display: none !important; }

  .mzn-checklist-wrap { border:0; box-shadow:none; }
  .mzn-checklist { font-size:12px; }
  .mzn-checklist th, .mzn-checklist td { padding:6px 8px; border-color:#ddd; }
}