/* ============================================
   LIBRARY PANEL
   Saved decks, deck cards, import/export
   ============================================ */

.library-loading-shell {
   position: relative;
   min-height: 320px;
}

/* Mobile Overrides */
@media (max-width: 768px) {

   /* Disable sticky and collapse on mobile — SubTabBar is now fixed at bottom */
   .library-header {
      position: relative !important;
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
   }

   /* Mobile: inactive tabs show icon only, active tab shows icon + label */
   .lib-tab-btn .lib-tab-text {
      display: none;
   }
   .lib-tab-btn--active .lib-tab-text {
      display: inline;
   }

   /* Compact padding for icon-only inactive tabs; active expands to fit text */
   .lib-tab-btn {
      flex: 0 0 auto !important;
      padding: 6px 8px !important;
   }
   .lib-tab-btn--active {
      flex: 1 1 auto !important;
      padding: 6px 12px !important;
   }

   /* Deck grid: single column on mobile */
.library-panel .deck-card-widget {
      min-width: 100% !important;
   }

   /* ============================================
      DISCOVER VIEW - Filter row on mobile
      ============================================ */

   /* Discover header: search bar takes the full first row, filter dropdowns
      wrap onto their own row(s) below */
   .discover-header {
      gap: 6px !important;
      flex-wrap: wrap !important;
   }

   /* Search: full-width first row (overrides the inline min-width: 200px) */
   .discover-header>div:first-child {
      flex: 1 1 100% !important;
      min-width: 100% !important;
   }

   /* Selects: compact, sharing the row below the search bar */
   .discover-header select {
      flex: 1 1 auto;
      min-width: 0;
      padding: 6px 6px !important;
      font-size: 11px !important;
   }

   /* Refresh button: compact */
   .discover-header button {
      padding: 6px 8px !important;
   }

   /* ============================================
      UNIFIED SCROLL - Remove nested scroll containers
      ============================================ */

   /* Library content: let it grow naturally */
   .library-content {
      overflow-y: visible !important;
      height: auto !important;
   }

   /* Discover view: let it grow naturally */
   .discover-view {
      height: auto !important;
      overflow: visible !important;
   }

   /* Discover deck list: no nested scroll */
   .discover-view>div:last-child {
      overflow-y: visible !important;
      flex: none !important;
   }

   /* My Decks grid container: no nested scroll */
   .library-panel [style*="overflow-y: auto"] {
      overflow-y: visible !important;
   }
}

.deck-cover-picker-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.4;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.deck-cover-picker-card:hover,
.deck-cover-picker-card:focus-visible {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    outline: none;
}

.deck-cover-picker-card.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.deck-cover-picker-card.selection-full:not(.selected) {
    opacity: 0.48;
}

.deck-cover-picker-check {
    position: absolute;
    top: 7px;
    right: 7px;
    display: none;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.deck-cover-picker-card.selected .deck-cover-picker-check {
    display: flex;
}
/* Estimated Commander bracket, shown on Library deck cards and filterable from
   the toolbar. Unrated decks show no chip rather than a misleading default. */
.library-bracket-chip,
.deck-card-bracket-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: color-mix(in srgb, var(--accent-color) 85%, var(--text-primary));
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.deck-card-badge-stack {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    pointer-events: none;
}

.deck-card-badge-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.deck-card-public-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 11px;
    font-weight: 600;
}

.deck-card-bracket-badge {
    background: color-mix(in srgb, var(--accent-color) 22%, rgba(0, 0, 0, 0.78));
    color: white;
    backdrop-filter: blur(3px);
}

/* PRO-only control in the Buy Deck modal. Reads as a row rather than a bare
   checkbox because the sub-line carries the count, which is the part people
   actually check before committing to a purchase. */
.buy-deck-unowned-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--input-bg, var(--widget-bg));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.buy-deck-unowned-toggle input {
    margin-top: 2px;
    flex: none;
    cursor: pointer;
}

.buy-deck-unowned-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buy-deck-unowned-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.buy-deck-unowned-detail {
    font-size: 12px;
    color: var(--text-muted);
}

/* Sits in the library action bar beside the filters; matches their height so
   the row reads as one strip rather than a button bolted on. */
.library-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.image-picker-search-row {
    align-items: flex-start !important;
}

/* Everything on the bar shares the selects' height and centre line, and the
   bar carries the room the hover lift needs so the buttons don't clip against
   the scroll viewport above them. */
.library-action-bar {
    align-items: center !important;
    padding-top: 2px;
}

.library-action-bar .library-import-btn,
.library-action-bar .library-clear-filters {
    height: 38px;
    padding: 0 12px;
    align-self: center;
    font-size: 13px;
}

/* Sized like the selects beside it (padding-driven, same border), so the
   row reads as one set of controls. */
.library-bracket-filter,
.library-tag-filter {
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* Private organizer tags on a Library deck card. Muted next to the bracket
   chip's accent — these are the user's own filing labels, not deck stats.
   Chips are buttons: clicking one filters the library by that tag. */
.library-deck-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px 0;
}

.library-deck-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-deck-tag-chip:hover {
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
    color: var(--text-color);
}

/* The remove affix inside the tag manager modal's chips. */
.library-deck-tag-remove {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin-left: 2px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.library-deck-tag-remove:hover {
    color: var(--danger-color);
}

/* Cover Image Picker on the BaseModal shell: the body becomes a column so the
   search row stays put while the card grid scrolls internally. */
.base-modal.image-picker-modal .base-modal-body {
    display: flex;
    flex-direction: column;
}

.base-modal.image-picker-modal .image-picker-grid {
    min-height: 0;
}

/* The action bar's selects share one look (they used to carry it inline). */
.library-select {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
}