/* My Collection page and collection controls */

.main-image img,
.thumb img,
.note-image-wrap img,
.signature-mini img,
.signature-image img,
.detail-images img,
.collection-gallery-image img,
.collection-group-image img {
    cursor: zoom-in !important;
}

.detail-content .collection-variant.variant-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.25fr) 88px minmax(270px, 1.35fr) !important;
    gap: 14px !important;
    align-items: center !important;
    overflow: visible !important;
    padding-bottom: 14px !important;
}

.detail-content .collection-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 10px 0 0 !important;
    margin: 4px 0 0 !important;
    border-top: 1px solid #eef1f5 !important;
}

.collection-action {
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #334155 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .06) !important;
}

.collection-action.owned.active {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.collection-action.wanted.active {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

.collection-grade {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.collection-grade.hidden {
    display: none !important;
}

.collection-grade select.collection-condition {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 26px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #ffffff !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* Collection badges */

.collection-pill {
    border-radius: 999px !important;
    padding: 6px 10px !important;
    font-weight: 800 !important;
}

.collection-pill.owned {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}

.collection-pill.wanted {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

/* My Collection page */

.collection-page {
    color: #111827;
}

.collection-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 26px 0;
}

.collection-stats div {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.collection-stats b {
    display: block;
    font-size: 30px;
    color: #111827;
}

.collection-stats span {
    color: #64748b;
    font-weight: 800;
    font-size: 13px;
}

.collection-tools {
    display: grid;
    grid-template-columns: minmax(160px, .9fr) 170px auto 210px;
    gap: 12px;
    align-items: center;
    margin: 20px 0 18px;
}

.collection-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.collection-filter {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 0 18px;
    height: 46px;
    margin: 0;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.collection-filter.active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.collection-type-filter,
.collection-condition-filter {
    height: 48px;
    border: 1px solid #334155;
    background: #111827;
    color: #ffffff;
    border-radius: 16px;
    padding: 0 14px;
    font-weight: 900;
    font-size: 15px;
}


.collection-results-summary {
    color: #64748b;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 18px;
}

.collection-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.collection-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(15,23,42,.08);
}

.collection-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.collection-panel-head h2 {
    margin: 0;
    color: #111827;
}

.collection-panel-head span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.collection-group-list {
    display: grid;
    gap: 14px;
}

.collection-group-card {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 18px;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 14px;
    background: #fbfbf8;
}

.collection-group-image {
    position: relative;
    background: #f3f0e6;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 120px;
}

.collection-group-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.collection-gallery-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
}

.collection-gallery-badge.owned {
    background: #dcfce7;
    color: #166534;
}

.collection-gallery-badge.wanted {
    background: #fef3c7;
    color: #92400e;
}

.collection-group-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.collection-group-head h3 {
    margin: 0;
    color: #111827;
}

.collection-group-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.collection-progress-chip {
    align-self: start;
    background: #111827;
    color: #ffffff;
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 900;
    font-size: 12px;
}

.collection-group-variants {
    display: grid;
    gap: 8px;
}

.collection-variant-line {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(230px, 1fr) 120px 34px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.collection-variant-main b {
    display: block;
    color: #111827;
    line-height: 1.3;
}

.collection-variant-main span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 4px;
}

.collection-variant-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collection-variant-prices span {
    background: #111827;
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 900;
}

.collection-inline-condition {
    display: grid;
    gap: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.collection-inline-condition select {
    height: 32px;
    padding: 4px 8px;
    border-radius: 10px;
}

.collection-remove {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 900;
}

.collection-group-actions {
    margin-top: 12px;
}

.collection-gallery-empty,
.collection-gallery-empty {
    color: #64748b;
    font-weight: 800;
}

.detail-content .collection-controls {
    display: none !important;
}


/* Coin collection buttons inside coin detail */
.coin-collection-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0 18px;
  padding:12px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:18px;
}
.coin-collection-actions .collection-action{margin:0!important}
.coin-collection-actions .collection-grade{margin:0!important}
.coin-collection-year select,
.coin-collection-grade select{
  width:96px!important;
  min-width:96px!important;
}
.coin-collection-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.coin-collection-meta span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:7px 10px;color:#334155;font-size:12px;font-weight:800}
.coin-collection-meta b{color:#b45309;margin-right:5px}
.coin-collection-edit-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.coin-collection-edit-row label{display:grid;gap:5px;color:#64748b;font-size:12px;font-weight:900}
.coin-collection-edit-row select,.coin-collection-edit-row input{width:100%;border:1px solid #dbe2ea;background:#111827;color:#fff;border-radius:12px;padding:9px 10px;font-weight:900}
@media(max-width:700px){.coin-collection-edit-row{grid-template-columns:1fr}.coin-collection-actions{align-items:flex-start}}


/* Type dropdown filter for My Collection */
@media(max-width:1100px){
  .collection-tools{grid-template-columns:1fr 170px;}
  .collection-filter-buttons{grid-column:1 / -1;}
  .collection-condition-filter{grid-column:1 / -1;}
}
@media(max-width:650px){
  .collection-tools{grid-template-columns:1fr;}
  .collection-type-filter,
  .collection-condition-filter{width:100%;}
}

/* =========================================================
   V2.2 COLLECTION FILTER BUTTONS
========================================================= */
.collection-filter-buttons{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.collection-filter{
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  border:1px solid var(--line,#263347)!important;
  background:var(--panel-2,#0f172a)!important;
  color:var(--text,#f8fafc)!important;
  font-size:14px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transform:none!important;
  margin:0!important;
}
.collection-filter:hover{
  border-color:var(--gold,#f5a400)!important;
  color:var(--gold,#f5a400)!important;
  background:rgba(245,164,0,.08)!important;
}
.collection-filter.active{
  background:var(--gold,#f5a400)!important;
  border-color:var(--gold,#f5a400)!important;
  color:#0b1120!important;
}
@media(max-width:650px){
  .collection-filter-buttons{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
  }
  .collection-filter{
    width:100%!important;
    padding:0 8px!important;
  }
}


/* =========================================================
   V2.3 COLLECTION TOOL BUTTONS
   Match Catalog / Coins buttons and target actual markup.
========================================================= */
.collection-tools button,
.collection-tools .filter-btn,
.collection-tools .collection-filter,
.collection-tools [data-collection-status],
.collection-tools [data-filter],
.collection-tools [data-status],
#collectionView .collection-tools button{
  min-height:42px !important;
  height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  border:1px solid var(--line,#263347) !important;
  background:var(--panel-2,#0f172a) !important;
  color:var(--text,#f8fafc) !important;
  font-size:14px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transform:none !important;
  margin:0 !important;
  white-space:nowrap !important;
}

.collection-tools button:hover,
.collection-tools .filter-btn:hover,
.collection-tools .collection-filter:hover,
#collectionView .collection-tools button:hover{
  border-color:var(--gold,#f5a400) !important;
  color:var(--gold,#f5a400) !important;
  background:rgba(245,164,0,.08) !important;
}

.collection-tools button.active,
.collection-tools .filter-btn.active,
.collection-tools .collection-filter.active,
.collection-tools [aria-pressed="true"],
.collection-tools .is-active,
#collectionView .collection-tools button.active{
  background:var(--gold,#f5a400) !important;
  border-color:var(--gold,#f5a400) !important;
  color:#0b1120 !important;
}

.collection-tools .collection-status-toggle,
.collection-tools .collection-type-toggle{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

@media(max-width:650px){
  .collection-tools .collection-status-toggle,
  .collection-tools .collection-type-toggle{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
  }
  .collection-tools button,
  #collectionView .collection-tools button{
    width:100% !important;
    padding:0 8px !important;
  }
}

/* Print: hide large auto value panels so printout stays clean */
@media print{
  .collection-auto-value-wrap,
  .collection-auto-value-panel{
    display:none !important;
  }
}