/**
 * App-specific layout — desktop / laptop scaling (Atlantis base unchanged).
 *
 * Home dashboard (.app-home-dashboard-row .col-app-home-quarter):
 * Bootstrap sm gives 2 columns from 576px. Four columns need a *wider* breakpoint than
 * Bootstrap’s xl (1200px), otherwise 4K at ~250% zoom (~1536 CSS px) still reads as “xl”
 * and stays 4 columns. We use min-width 1600px for the 4-up layout (tuned for ~4K).
 * - <576px: 1 column (col-12)
 * - 576px–1599px: 2 columns
 * - ≥1600px: 4 columns
 *
 * Sidebar: at max-width 991px (viewport ≈ ~400% zoom on 4K) hide the sidebar entirely
 * so main content uses full width. (Atlantis otherwise keeps an off-canvas drawer.)
 */

.main-panel > .content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.main-panel .page-inner {
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
  padding-right: clamp(0.75rem, 2vw, 1.5rem);
}

/* Panel headers: fluid type, no fixed left margins */
.page-header-title {
  font-size: clamp(1.35rem, 1.5vw + 1rem, 2.5rem);
  margin-bottom: 0.25rem;
}

.page-header-subtitle {
  font-size: clamp(0.95rem, 0.8vw + 0.75rem, 1.5rem);
  margin-bottom: 0.5rem;
}

.panel-header .page-inner .d-flex.game-page-hero {
  gap: 1rem;
  align-items: flex-start;
}

.panel-header .game-page-hero .game-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.game-page-hero img.game-box-art {
  max-height: min(200px, 26vh);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Home dashboard: avoid stretched equal-height cards when zoomed */
.app-home .app-home-card.card.full-height {
  height: auto;
  min-height: 0;
}

/* Home dashboard charts — 2-up layout: a bit shorter min height, room for legend */
.app-home .chart-container {
  min-height: 200px;
  position: relative;
}

@media (min-width: 992px) {
  .app-home .chart-container {
    min-height: 240px;
  }
}

/* Stat tiles: scale down labels/values when space is tight (zoom / narrow cards) */
.app-home .card-stats .numbers .card-category {
  font-size: clamp(0.62rem, 1.1vw + 0.45rem, 0.8rem);
  line-height: 1.2;
}

.app-home .card-stats .numbers h4.card-title {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.35rem);
  word-break: break-word;
}

.app-home .card-stats .col-stats {
  min-width: 0;
}

/* Home: 4 columns only when viewport is wide enough (see file header) */
@media screen and (min-width: 1600px) {
  .app-home .app-home-dashboard-row > .col-app-home-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* ~400% zoom on 4K ≈ <992px CSS viewport — drop sidebar, full-width main */
@media screen and (max-width: 991px) {
  .wrapper > .sidebar {
    display: none !important;
  }

  .wrapper .main-panel {
    width: 100% !important;
    float: none !important;
  }
}

/*
 * Game summary (games/<id>): same column rhythm as home (2 cols until 1600px, then 4-up / 3-up).
 * Circle gauges use flex row + wrap only — no CSS grid — so they stay in a horizontal band at full
 * width and wrap to extra rows when the card narrows (zoom / small viewport).
 */
.game-summary-page .game-summary-card.card.full-height {
  height: auto;
  min-height: 0;
}

.game-summary-page .chart-container {
  min-height: 200px;
  position: relative;
}

@media (min-width: 992px) {
  .game-summary-page .chart-container {
    min-height: 240px;
  }
}

@media screen and (min-width: 1600px) {
  .game-summary-page .game-summary-dashboard-row > .col-game-summary-quarter {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .game-summary-page .game-summary-tables-row > .col-game-summary-third {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.game-summary-page .game-summary-circles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: 0.5rem;
  row-gap: 0.75rem;
}

/* Embedded sheets */
.google-sheet-embed {
  width: 100%;
  border: 0;
  min-height: 360px;
  height: min(80em, 85vh);
}

/* Mini painting image grids: two sections (Before / After), each row = 4 equal columns */
.mini-painting-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: start;
}

.mini-painting-images img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Card headers: allow title + buttons to wrap on narrower viewports */
.content .card-header .d-flex.align-items-center {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.content .card-header .card-title {
  margin-right: auto;
}

/* Delete confirmation modal — match Atlantis dark cards (Bootstrap’s .modal-content defaults to white) */
#deleteConfirmModal .modal-content {
  background-color: #202940 !important;
  background-image: none !important;
  color: rgba(169, 175, 187, 0.92) !important;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45) !important;
}

#deleteConfirmModal .modal-header,
#deleteConfirmModal .modal-body,
#deleteConfirmModal .modal-footer {
  background-color: transparent !important;
  color: inherit;
}

#deleteConfirmModal .modal-title {
  color: #fff !important;
}

#deleteConfirmModal .modal-body {
  color: rgba(169, 175, 187, 0.92) !important;
}

#deleteConfirmModal .modal-header .close {
  color: #fff !important;
  text-shadow: none !important;
  opacity: 0.85;
}

#deleteConfirmModal .modal-header .close:hover {
  opacity: 1;
}

#deleteConfirmModal .modal-footer {
  border-top: 1px solid rgba(181, 181, 181, 0.12) !important;
}

/*
 * Tabbed listing cards (sleeves, games, expansions, …): dark theme tabs, no white active pill.
 * .sleeves-* aliases kept for backwards compatibility.
 */
.app-tabbed-card .app-nav-tabs,
.sleeves-tab-card .sleeves-nav-tabs {
  border-bottom: 1px solid rgba(181, 181, 181, 0.12);
  flex-wrap: wrap;
}

.app-tabbed-card .app-nav-tabs .nav-item,
.sleeves-tab-card .sleeves-nav-tabs .nav-item {
  margin-bottom: 0;
}

.app-tabbed-card .app-nav-tabs .nav-link,
.sleeves-tab-card .sleeves-nav-tabs .nav-link {
  color: rgba(169, 175, 187, 0.78) !important;
  background-color: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(181, 181, 181, 0.12) !important;
  border-bottom: none !important;
  border-radius: 0.25rem 0.25rem 0 0;
  margin-right: 0.2rem;
  padding: 0.55rem 0.85rem;
}

.app-tabbed-card .app-nav-tabs .nav-link:hover,
.sleeves-tab-card .sleeves-nav-tabs .nav-link:hover {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
}

.app-tabbed-card .app-nav-tabs .nav-link.active,
.sleeves-tab-card .sleeves-nav-tabs .nav-link.active {
  color: #fff !important;
  background-color: #202940 !important;
  border-color: rgba(181, 181, 181, 0.18) rgba(181, 181, 181, 0.18) transparent !important;
  border-bottom: 1px solid #202940 !important;
  margin-bottom: -1px;
  z-index: 1;
  position: relative;
}

.app-page-tables .dataTables_wrapper,
.app-page-tables table.dataTable,
.sleeves-page-tables .dataTables_wrapper,
.sleeves-page-tables table.dataTable {
  width: 100% !important;
}

.app-page-tables .app-dt-wrap,
.sleeves-page-tables .sleeves-dt-wrap {
  width: 100%;
  min-width: 0;
}