/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Responsive visibility utilities */
@media (max-width: 768px) {
  .sc-desktop-only { display: none !important; }
  .sc-footer-grid  { grid-template-columns: 1fr !important; }
}

/* Homepage — hero */
@media (max-width: 768px) {
  .sc-home-hero-grid { grid-template-columns: 1fr !important; padding-top: 40px !important; padding-bottom: 36px !important; }
  .sc-home-hero-logo { display: none !important; }
}

/* Homepage — next game card */
@media (max-width: 640px) {
  .sc-next-game-grid {
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .sc-next-game-details {
    grid-column: 1 / -1 !important;
    border-left: none !important;
    border-top: 2px dashed rgba(42,29,16,.3) !important;
    padding-left: 0 !important;
    padding-top: var(--s-4) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--s-3) !important;
  }
  .sc-next-game-badge { width: 48px !important; height: 48px !important; }
  .sc-next-game-team-name div:first-child { font-size: 14px !important; }
}

/* Homepage — recent results */
@media (max-width: 640px) {
  .sc-results-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Homepage — latest stories */
@media (max-width: 768px) {
  .sc-stories-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .sc-stories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Schedule — game rows */
@media (max-width: 640px) {
  .sc-schedule-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: var(--s-2) var(--s-3) !important;
  }
  .sc-schedule-date  { grid-row: 1; grid-column: 1; }
  .sc-schedule-matchup { grid-row: 2; grid-column: 1 / -1; }
  .sc-schedule-score {
    grid-row: 1;
    grid-column: 2;
    min-width: 0 !important;
    text-align: right;
    align-items: flex-end !important;
  }
  .sc-schedule-action { grid-row: 2; grid-column: 2; text-align: right; align-self: center; }
  .sc-schedule-matchup div:first-child { font-size: 15px !important; }
}

@media (min-width: 769px) {
  .sc-mobile-only { display: none !important; }
}

/* Standings / roster tables — horizontal scroll on narrow screens */
.sc-standings-scroll,
.sc-roster-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Player profile — stats grid: 6-col (goalie) / 5-col (skater) → 3-col on phones */
@media (max-width: 540px) {
  .sc-player-stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* News index — featured hero + sidebar / post cards grid */
@media (max-width: 768px) {
  .sc-news-featured-grid { grid-template-columns: 1fr !important; }
  .sc-news-cards-grid    { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .sc-news-cards-grid { grid-template-columns: 1fr !important; }
}

/* News show — article body + sidebar: stack on mobile */
@media (max-width: 768px) {
  .sc-article-grid { grid-template-columns: 1fr !important; }
  .sc-article-sidebar { position: static !important; }
}

/* Tournaments index — featured card / cards grid / CTA banner */
@media (max-width: 768px) {
  .sc-tournament-featured-grid { grid-template-columns: 1fr !important; }
  .sc-tournament-cards-grid    { grid-template-columns: 1fr !important; }
  .sc-tournament-cta-grid      { grid-template-columns: 1fr !important; }
}

/* Tournament show — game rows */
@media (max-width: 560px) {
  .sc-tourn-game-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
  }
  .sc-tourn-game-date     { grid-row: 1; grid-column: 1; }
  .sc-tourn-game-matchup  { grid-row: 2; grid-column: 1 / -1; }
  .sc-tourn-game-score    { grid-row: 1; grid-column: 2; text-align: right !important; }
}

/* Roster grid */
.sc-roster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 768px) {
  .sc-roster-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .sc-roster-grid { grid-template-columns: 1fr !important; }
}

/* Player profile header */
.sc-player-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-7);
  align-items: start;
  margin-bottom: var(--s-6);
}

@media (max-width: 600px) {
  .sc-player-header { grid-template-columns: 1fr !important; }
}

/* Sponsor tier grids */
.sc-sponsors-gold   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.sc-sponsors-silver { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.sc-sponsors-bronze { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }

@media (max-width: 768px) {
  .sc-sponsors-gold   { grid-template-columns: 1fr !important; }
  .sc-sponsors-silver { grid-template-columns: repeat(2, 1fr) !important; }
  .sc-sponsors-bronze { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .sc-sponsors-silver { grid-template-columns: 1fr !important; }
  .sc-sponsors-bronze { grid-template-columns: 1fr !important; }
}

/* Admin layout — sidebar responsive behavior */
@media (max-width: 768px) {
  .admin-sidebar {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    height: calc(100vh - 56px) !important;
    min-height: unset !important;
    transform: translateX(-260px);
    transition: transform 0.25s ease;
    z-index: 50;
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-topbar { display: flex !important; }
  .admin-main-content { padding-top: calc(var(--s-6) + 56px) !important; }
}

@media (min-width: 769px) {
  .admin-topbar { display: none !important; }
  .admin-sidebar { transition: width 0.2s ease; }
}

.admin-backdrop {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
}

.admin-backdrop.is-open { display: block; }

/* Admin sidebar — icon-strip collapsed state */
.admin-sidebar[data-collapsed="true"] .admin-nav-label { display: none; }
.admin-sidebar[data-collapsed="true"] .admin-nav-section { display: none; }
.admin-sidebar[data-collapsed="true"] .admin-nav-expanded-header { display: none !important; }
.admin-sidebar[data-collapsed="true"] .admin-nav-expanded-footer { display: none !important; }
.admin-sidebar:not([data-collapsed="true"]) .admin-nav-collapsed-header { display: none !important; }
.admin-sidebar:not([data-collapsed="true"]) .admin-nav-collapsed-footer { display: none !important; }

/* Center icon and tighten padding in icon-only strip */
.admin-sidebar[data-collapsed="true"] .admin-nav-link {
  justify-content: center !important;
  padding: 8px 4px !important;
  margin: 2px 4px !important;
}

/* ─── Trix editor brand overrides ──────────────────────────────────────── */

/* Editor content area */
trix-editor {
  border: none !important;
  border-radius: 0 !important;
  background: var(--bone-50, #f7efd7) !important;
  color: var(--fg-1, #1a1208) !important;
  min-height: 280px !important;
  outline: none !important;
  padding: 10px 14px;
  font-family: var(--font-body, sans-serif);
  font-size: 14px;
  line-height: 1.65;
}

/* Toolbar chrome */
trix-toolbar {
  background: var(--swamp-800, #2a3318) !important;
  border-bottom: 2px solid var(--rust-700, #8c3a2c) !important;
  padding: 6px 8px !important;
}

/* Collapse button groups into a single flush bar */
trix-toolbar .trix-button-group {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  gap: 2px;
}

trix-toolbar .trix-button-group:not(:last-child) {
  border-right: 1px solid rgba(90, 106, 54, 0.5) !important;
  padding-right: 6px !important;
  margin-right: 6px !important;
}

/* All buttons */
trix-toolbar .trix-button {
  color: var(--sand-300, #c9a677) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 3px !important;
  transition: background 0.1s, color 0.1s;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: none !important;
}

trix-toolbar .trix-button:hover:not(:disabled) {
  background: var(--swamp-600, #4a5a2d) !important;
  color: var(--sand-50, #f3e6c4) !important;
}

trix-toolbar .trix-button.trix-active {
  background: var(--rust-700, #8c3a2c) !important;
  color: var(--sand-50, #f3e6c4) !important;
}

trix-toolbar .trix-button:disabled {
  opacity: 0.3 !important;
}

/* Icon buttons — inline SVGs handle the icon; just size and center them */
trix-toolbar .trix-button--icon {
  width: 2.2em !important;
  height: 2em !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

trix-toolbar .trix-button--icon svg {
  fill: currentColor;
  pointer-events: none;
  opacity: 0.75;
}

trix-toolbar .trix-button--icon:hover:not(:disabled) svg {
  opacity: 1;
}

trix-toolbar .trix-button--icon.trix-active svg {
  opacity: 1;
}

/* Link dialog */
trix-toolbar .trix-dialog {
  background: var(--swamp-900, #1d2410) !important;
  border-top: 2px solid var(--rust-700, #8c3a2c) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
}

trix-toolbar .trix-input--dialog {
  background: var(--bone-50, #f7efd7) !important;
  border-color: var(--ink-800, #2a1d10) !important;
  color: var(--fg-1, #1a1208) !important;
}

trix-toolbar .trix-button--dialog {
  font-family: var(--font-condensed, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: var(--rust-700, #8c3a2c) !important;
  color: var(--sand-50, #f3e6c4) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 5px 12px !important;
}

trix-toolbar .trix-button--dialog:hover {
  background: var(--rust-600, #a14635) !important;
}

/* Rich text content */
.trix-content blockquote {
  border-left: 3px solid var(--rust-700, #8c3a2c) !important;
  margin-left: var(--s-3, 12px) !important;
  padding-left: var(--s-3, 12px) !important;
}

.trix-content pre {
  background: var(--swamp-800, #2a3318) !important;
  color: var(--sand-200, #d9bf8b) !important;
  border-radius: 4px;
}