/* ===== Masterwork Studio – Silver & Gold UI ===== */

/* ---------- Theme variables (default LIGHT) ---------- */
:root{
  --aim-bg: #f6f7fb;
  --aim-surface: #ffffff;
  --aim-elev-1: #ffffff;
  --aim-border: #e5e7eb;
  --aim-text: #111827;
  --aim-muted: #6b7280;

  --aim-gold: #d4af37;
  --aim-gold-700: #b8932f;
  --aim-silver: #c0c0c0;
  --aim-silver-700: #9aa3b2;

  --aim-primary: var(--aim-gold);
  --aim-accent: var(--aim-silver);

  --aim-radius: 14px;
  --aim-shadow: 0 10px 30px rgba(17,24,39,.08);
  --aim-focus: 0 0 0 3px rgba(212,175,55,.25);
}

/* ---------- System dark (auto fallback) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --aim-bg: #0b0d12;
    --aim-surface: #0f1117;
    --aim-elev-1: #121521;
    --aim-border: #1e2532;
    --aim-text: #e5e7eb;
    --aim-muted: #9aa3b2;

    --aim-gold: #e6c65e;
    --aim-gold-700: #dcb94a;
    --aim-silver: #b6bdc9;
    --aim-silver-700: #8c96a6;

    --aim-primary: var(--aim-gold);
    --aim-accent: var(--aim-silver);
    --aim-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}

/* ---------- Manual DARK override via toggle ---------- */
html[data-aim-theme="dark"]{
  --aim-bg: #0b0d12;
  --aim-surface: #0f1117;
  --aim-elev-1: #121521;
  --aim-border: #1e2532;
  --aim-text: #e5e7eb;
  --aim-muted: #9aa3b2;

  --aim-gold: #e6c65e;
  --aim-gold-700: #dcb94a;
  --aim-silver: #b6bdc9;
  --aim-silver-700: #8c96a6;

  --aim-primary: var(--aim-gold);
  --aim-accent: var(--aim-silver);
  --aim-shadow: 0 10px 30px rgba(0,0,0,.35);
  --aim-focus: 0 0 0 3px rgba(230,198,94,.25);
}

/* ---------- Base containers ---------- */
body.aim-no-scroll{ overflow:hidden; }

#aim-container{
  background:
    radial-gradient(1200px 800px at 120% -20%, rgba(212,175,55,.08), transparent),
    radial-gradient(1200px 800px at -20% 120%, rgba(192,192,192,.08), transparent),
    var(--aim-bg);
  border-radius: calc(var(--aim-radius) + 8px);
  padding: 14px;
  color: var(--aim-text);
  position: relative;
}

/* Grid: form (sticky) + results */
.aim-grid{
  display:grid;
  grid-template-columns: 460px 1fr;
  gap:14px;
  align-items: start;
}
@media (max-width: 980px){
  .aim-grid{ grid-template-columns: 1fr; }
}

.aim-card{
  background: var(--aim-surface);
  border: 1px solid var(--aim-border);
  border-radius: var(--aim-radius);
  box-shadow: var(--aim-shadow);
}

/* ---------- Left column topbar: title centered, button under it ---------- */
#aim-form-topbar-centered{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--aim-border);
  background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
  border-top-left-radius: var(--aim-radius);
  border-top-right-radius: var(--aim-radius);
}

/* Ensure the title always uses theme text color (no blue link tint) */
#aim-form-topbar-centered .aim-title{
  margin:0;
  font-size:1.15rem;
  text-align:center;
  color: var(--aim-text);
}
#aim-form-topbar-centered .aim-title a{
  color: var(--aim-text);
  text-decoration: none;
}

/* Under-title button wrapper */
.aim-theme-under-title{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

/* ---------- Dark Mode button (gold/black look, always black text) ---------- */
.aim-theme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.45rem .9rem;
  border-radius:999px;
  border: none;
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  color:#111 !important; /* force black text in both modes */
  font: 700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(212,175,55,.35);
  transition: filter .15s ease, transform .02s ease;
}
.aim-theme-btn:hover{ filter: brightness(1.05); }
.aim-theme-btn:active{ transform: translateY(1px); }
.aim-theme-btn[aria-pressed="true"]{
  box-shadow: 0 6px 16px rgba(230,198,94,.45);
}

/* ---------- Form layout ---------- */
#aim-form{ padding: 10px 12px 12px; }
.aim-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (max-width: 680px){ .aim-grid-2{ grid-template-columns: 1fr; } }

.aim-field label{ display:block; font-weight:600; margin-bottom: 4px; }

#aim-form select,
#aim-form input[type=number],
.aim-input{
  width:100%; padding:.6rem .7rem; border:1px solid var(--aim-border);
  background: var(--aim-elev-1); border-radius:10px; color:var(--aim-text);
  outline: none; transition: box-shadow .15s, border-color .15s;
}
#aim-form select:focus,
#aim-form input:focus,
.aim-input:focus{
  border-color: var(--aim-primary); box-shadow: var(--aim-focus);
}
.readonly{ color: var(--aim-muted); background: #f8fafc; }
@media (prefers-color-scheme: dark){ .readonly{ background: #0b0e16; } }

/* ---------- Buttons ---------- */
.aim-btn{
  padding:.6rem .9rem; border:1px solid var(--aim-border); background: var(--aim-elev-1);
  border-radius:10px; cursor:pointer; transition: filter .15s, transform .05s, border-color .15s;
}
.aim-btn:hover{ border-color: var(--aim-primary); }

/* Primary (gold) in LIGHT mode */
.aim-btn.primary{
  color:#111;
  border:0;
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  box-shadow: 0 10px 20px rgba(212,175,55,.25);
}

/* In DARK MODE: invert primary buttons to white with black text */
html[data-aim-theme="dark"] .aim-btn.primary,
html[data-aim-theme="dark"] .aim-select-actions .mini,
html[data-aim-theme="dark"] #aim-cancel-types.aim-btn{
  background: linear-gradient(180deg, #ffffff, #f2f2f2) !important;
  color: #111 !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(255,255,255,.12) !important;
}

/* Keep other neutral buttons ghost-like */
.aim-btn.ghost{ background: transparent; border-color: var(--aim-border); }

/* Inline row for Choose Types + Selected Types input */
.aim-inline{
  display:flex; align-items:center; gap:.6rem; flex-wrap: nowrap;
}
.aim-inline > #aim-open-types{
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  color:#111; border:0; box-shadow: 0 4px 12px rgba(212,175,55,.25);
}
/* Also invert the “Choose Types” CTA in dark mode to match */
html[data-aim-theme="dark"] .aim-inline > #aim-open-types{
  background: linear-gradient(180deg, #ffffff, #f2f2f2) !important;
  color: #111 !important;
  border: 0 !important;
  box-shadow: 0 6px 14px rgba(255,255,255,.12) !important;
}

.aim-inline > #aim-type-summary{
  flex: 1 1 auto; min-width: 0;
}

/* Selected chips */
.aim-chips{ margin:.4rem .25rem 0; display:flex; flex-wrap:wrap; gap:.35rem; }
.aim-chip,
.chip{
  display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .45rem;
  background: rgba(212,175,55,.10); color: #7a6315;
  border:1px solid rgba(212,175,55,.25); border-radius:999px; font-size:.9rem;
}
.hidden{ display:none !important; }

/* ================= Right column ================= */

#aim-results{ padding: 0; min-height: 72px; }

/* Compact header */
.aim-results-bar{
  display:flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--aim-border);
  background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.05));
  border-top-left-radius: var(--aim-radius);
  border-top-right-radius: var(--aim-radius);
}
.aim-results-tools{
  display:flex; gap:.5rem; flex-wrap: wrap; align-items:center; justify-content:center;
}
.aim-switch{ display:inline-flex; align-items:center; gap:.35rem; font-size:.9rem; color: var(--aim-muted); }
.aim-inline-value{ font-variant-numeric: tabular-nums; color: var(--aim-text); }

/* Merchant title inside results body */
.aim-titlebar{
  padding: 10px 12px; font-size:.98rem;
  border-bottom: 1px dashed var(--aim-border);
  color:#7a6315;
}
.aim-titlebar .aim-subtitle{ opacity:.8; font-weight:500; }

/* ================= Table view ================= */
.aim-table{ width:100%; border-collapse: collapse; table-layout:auto; }
.aim-table th, .aim-table td{ padding:.5rem .6rem; border-bottom:1px solid var(--aim-border); text-align:left; }
.aim-table th:nth-child(2), .aim-table td:nth-child(2),
.aim-table th:nth-child(3), .aim-table td:nth-child(3){ text-align:right; }

.aim-table td.aim-price{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.aim-table th:nth-child(2),
.aim-table td:nth-child(2){ width:1%; }

/* ================= List view ================= */
.aim-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0 0;
  padding: 10px 12px;
}
.aim-item{
  padding: 10px 12px;
  border-radius: var(--aim-radius, 12px);
  background: var(--aim-surface);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), inset 0 0 0 1px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  .aim-item{ box-shadow: 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.05); }
}
.aim-item-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: nowrap;
}
.aim-item-title{
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.aim-item-title strong{ font-weight: 700; letter-spacing: .2px; }
.aim-badges{
  display:flex; gap:.4rem; align-items:center; flex-wrap: nowrap; min-width:0;
}
.aim-badges .badge{
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 999px;
  font: 600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: rgba(212,175,55,.12);
  color: #e7c857;
  border: 1px solid rgba(212,175,55,.35);
  white-space: nowrap;
}
.aim-badges .badge.price{
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  color: #111; border: none; box-shadow: 0 2px 8px rgba(212,175,55,.25);
  max-width: 40ch; overflow:hidden; text-overflow:ellipsis;
}

.aim-item-notes{ margin-top: 8px; }

/* ================= Notes ================= */
.aim-note{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
  cursor: pointer;
  outline: none;
}
.aim-note:hover,
.aim-note.expanded{
  -webkit-line-clamp: unset;
  background: rgba(255, 245, 157, .35);
  border-radius: 6px;
}
.aim-note:focus{
  box-shadow: 0 0 0 2px rgba(212,175,55,.6);
  border-radius: 6px;
}

/* ================= Drawer ================= */
.aim-drawer.hidden{ display:none; }
.aim-drawer{ position: fixed; inset: 0; z-index: 9999; display:grid; grid-template-columns: 1fr auto; }
.aim-drawer-backdrop{ background: rgba(3,7,18,.45); }
.aim-drawer-panel{
  width: min(860px, 96vw); height: 100%;
  background: var(--aim-surface); border-left: 1px solid var(--aim-border);
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  display:flex; flex-direction:column; overflow-y:auto;
}
.aim-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-bottom:1px solid var(--aim-border); gap:8px;
}
.aim-drawer-tools{ display:flex; align-items:center; gap:8px; }
.aim-icon-btn{ background:transparent; border:1px solid var(--aim-border); border-radius:8px; padding:.35rem .6rem; cursor:pointer; }
.aim-drawer-body{ padding: 10px 12px; overflow:auto; max-height: calc(100vh - 120px); }
.aim-select-actions .mini{
  display: inline-flex; align-items: center; justify-content:center;
  gap: .35rem; padding: 6px 12px; border: none; border-radius: var(--aim-radius, 12px);
  font: 600 13px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  color: #111; box-shadow: 0 4px 12px rgba(212,175,55,.25); cursor: pointer;
  transition: filter .15s ease, transform .02s ease;
}
/* Invert mini actions too in dark */
html[data-aim-theme="dark"] .aim-select-actions .mini{
  background: linear-gradient(180deg, #ffffff, #f2f2f2) !important;
  color: #111 !important;
  border: 0 !important;
  box-shadow: 0 6px 14px rgba(255,255,255,.12) !important;
}
.aim-select-actions .mini:hover{ filter: brightness(1.06); }
.aim-select-actions .mini:active{ transform: translateY(1px); }

.aim-types-list .aim-category{
  border:1px solid var(--aim-border); border-radius:10px; margin-bottom:8px; overflow:hidden;
}
.aim-cat-head{
  font-weight:700; padding:.5rem .6rem;
  background:linear-gradient(180deg,#f9fafb,#f3f4f6); border-bottom:1px solid var(--aim-border);
}
@media (prefers-color-scheme: dark){ .aim-cat-head{ background:#0b0e16; } }
.aim-group{
  display:flex; flex-wrap:wrap; gap:.35rem; padding:.5rem .6rem;
}
.aim-group label{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .6rem; border:1px solid var(--aim-border);
  border-radius:999px; cursor:pointer; background: var(--aim-elev-1);
}
.aim-group input[type=checkbox]{ transform: scale(1.05); }
.aim-drawer-foot{
  padding: 10px 12px; border-top:1px solid var(--aim-border);
  display:flex; gap:10px; justify-content:flex-end;
}
#aim-cancel-types.aim-btn{
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  color: #111; border: none; box-shadow: 0 4px 12px rgba(212,175,55,.25);
}
/* Invert the footer CTA in dark */
html[data-aim-theme="dark"] #aim-cancel-types.aim-btn{
  background: linear-gradient(180deg, #ffffff, #f2f2f2) !important;
  color: #111 !important;
  border: 0 !important;
  box-shadow: 0 6px 14px rgba(255,255,255,.12) !important;
}

/* ================= Coin colors ================= */
.coin{ display:inline-block; white-space:nowrap; font-weight:600; }
.coin.gold   { color: #B8860B; }
.coin.silver { color: #7F8C8D; }
.coin.copper { color: #B76137; }

/* === Dark Mode button should turn white === */
.aim-theme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .9rem;
  border-radius:999px;
  border:none;
  background: linear-gradient(180deg, var(--aim-primary), var(--aim-gold-700));
  color:#111 !important; /* always black text */
  font: 700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(212,175,55,.35);
  transition: filter .15s ease, transform .02s ease;
}
.aim-theme-btn:hover{ filter: brightness(1.05); }
.aim-theme-btn:active{ transform: translateY(1px); }

/* In DARK MODE, force button to white with black text */
html[data-aim-theme="dark"] .aim-theme-btn{
  background: linear-gradient(180deg, #ffffff, #f2f2f2) !important;
  color: #111 !important;
  box-shadow: 0 6px 14px rgba(255,255,255,.15) !important;
}

/* === Merchant Types Drawer text in Dark Mode === */
html[data-aim-theme="dark"] .aim-drawer,
html[data-aim-theme="dark"] .aim-drawer *{
  color: #fff !important;
}

/* Ensure labels stay visible */
html[data-aim-theme="dark"] .aim-group label{
  background: var(--aim-elev-1);
  color: #fff !important;
  border-color: var(--aim-border);
}

/* Search bar input text in Dark Mode */
html[data-aim-theme="dark"] #aim-search{
  background: var(--aim-elev-1);
  color: #fff;
  border: 1px solid var(--aim-border);
}

/* === Merchant Type Categories === */
/* Light mode (unchanged): grey-to-light gradient */
.aim-cat-head {
  font-weight:700;
  padding:.5rem .6rem;
  background: linear-gradient(180deg,#f9fafb,#f3f4f6);
  border-bottom:1px solid var(--aim-border);
  color: #111; /* black text */
}

/* Dark mode: force category headers to stay white with black text */
html[data-aim-theme="dark"] .aim-cat-head {
  background: #ffffff !important;
  color: #111 !important; /* keep black text on white background */
  border-bottom: 1px solid var(--aim-border);
}
#aim-type-summary { display: none !important; }

/* === v2.5 Rarity styling (append) === */

/* Colored item name (keeps weight readable) */
.rarity-name { font-weight: 700; }

/* Small pill badge */
.rarity-badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  margin-left: .35rem;
  border-radius: 999px;
  font: 600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  border: 1px solid transparent;
  vertical-align: middle;
  white-space: nowrap;
}

/* Common = grey/white */
.rarity-common        { color: #9aa3b2; }
.rarity-badge.rarity-common{
  background: rgba(154,163,178,.15);
  color: #111;
  border-color: rgba(154,163,178,.35);
}

/* Uncommon = green */
.rarity-uncommon      { color: #16a34a; }
.rarity-badge.rarity-uncommon{
  background: rgba(22,163,74,.15);
  color: #111;
  border-color: rgba(22,163,74,.35);
}

/* Rare = blue */
.rarity-rare          { color: #2563eb; }
.rarity-badge.rarity-rare{
  background: rgba(37,99,235,.15);
  color: #111;
  border-color: rgba(37,99,235,.35);
}

/* Very Rare = purple */
.rarity-very-rare     { color: #8b5cf6; }
.rarity-badge.rarity-very-rare{
  background: rgba(139,92,246,.18);
  color: #111;
  border-color: rgba(139,92,246,.40);
}

/* Legendary = orange */
.rarity-legendary     { color: #f97316; }
.rarity-badge.rarity-legendary{
  background: rgba(249,115,22,.17);
  color: #111;
  border-color: rgba(249,115,22,.42);
}

/* Dark mode keeps the same hues and simply relies on your existing contrast system */
html[data-aim-theme="dark"] .rarity-badge{
  color: #111 !important;
}
/* === Merchant header: logo + Dark Mode button (clean) === */

/* Header container (the cream area) */
#aim-form > .aim-card-header{
  padding: 0 4px 10px !important;   /* bottom padding gives room for the button shadow */
  overflow: visible !important;     /* do NOT clip shadows */
}

/* The cream band wrapper */
#aim-form-topbar-centered{
  padding: 0 4px 0 !important;      /* no extra vertical padding here */
  gap: 0 !important;                 /* no extra space between logo and button */
}

/* Title row acts as the logo stage */
#aim-form-topbar-centered .aim-title{
  margin: -50px 0 0 !important;     /* KNOB #1: move the whole logo block up */
  line-height: 0 !important;
  padding: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                  /* safely crop the top after we nudge up */
}

/* Logo fills the band, keeps aspect, slight upward nudge */
.aim-logo{
  display:block;
  width: 100% !important;
  height: auto !important;
  transform: translateY(-8px);       /* micro-nudge; adjust if needed */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}

/* Button wrapper: raise the button toward the logo */
#aim-form-topbar-centered .aim-theme-under-title{
  margin-top: -18px !important;       /* KNOB #2: -4 to -12px to taste */
}

/* Button itself: don't add extra margins */
#aim-form-topbar-centered .aim-btn{
  margin: 0 !important;
}
/* Raise the Dark Mode button without changing layout height */
#aim-form-topbar-centered .aim-theme-under-title .aim-btn{
  position: relative;
  top: -20px !important;   /* KNOB: -6 to -12px */
  margin: 0 !important;   /* neutralize any earlier margin rules */
}
/* === Dark Mode button: correct selector + raise it slightly === */
#aim-form-topbar-centered .aim-theme-under-title{
  margin-top: -6px !important;          /* adjust -4…-12 to taste */
}

#aim-form-topbar-centered .aim-theme-btn{
  position: relative;
  top: -8px !important;                  /* adjust -6…-12 to taste */
  margin: 0 !important;                  /* no extra margins */
}

/* Ensure the cream header doesn’t clip the button shadow */
#aim-form > .aim-card-header{
  padding-bottom: 12px !important;       /* bump to 14px if you still see clipping */
  overflow: visible !important;
}