/* Civic Roleplay final premium overrides.
   Loaded after the legacy stylesheet so new forum UI rules always win. */

.welcome-banner {
  min-height: 245px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 12px 0 18px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background:
    linear-gradient(90deg, rgba(12, 9, 26, .82) 0%, rgba(42, 20, 79, .42) 43%, rgba(245, 132, 34, .16) 100%),
    url("/assets/civic-hero-banner.png") center 42% / cover no-repeat !important;
  box-shadow: 0 22px 55px rgba(45, 26, 95, .24) !important;
}

.welcome-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 22% 28%, rgba(139, 92, 246, .46), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%) !important;
  pointer-events: none !important;
}

.welcome-banner::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 18px 18px 18px !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  pointer-events: none !important;
}

.welcome-banner-content {
  position: relative !important;
  z-index: 1 !important;
  width: min(620px, calc(100% - 34px)) !important;
  max-width: none !important;
  margin: 26px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(10, 12, 25, .64), rgba(48, 25, 87, .34)) !important;
  backdrop-filter: blur(12px) saturate(1.22) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}

.welcome-banner h1 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(1.45rem, 3.2vw, 2.55rem) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: 0 3px 18px rgba(132, 90, 255, .48) !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  filter: none !important;
}

.welcome-banner p {
  max-width: 540px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.9) !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

.block-header.compact.thread-header {
  position: relative !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,247,252,.86)),
    radial-gradient(circle at 15% 0%, rgba(132,90,255,.18), transparent 34%) !important;
  border: 1px solid rgba(141, 155, 180, .28) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08) !important;
}

html[data-theme="dark"] .block-header.compact.thread-header {
  background:
    linear-gradient(135deg, rgba(14,20,34,.94), rgba(23,31,48,.88)),
    radial-gradient(circle at 15% 0%, rgba(132,90,255,.24), transparent 36%) !important;
  border-color: rgba(125, 148, 185, .2) !important;
}

.block-header.compact.thread-header #thread-title,
#thread-title {
  font-size: clamp(.98rem, 1.12vw, 1.18rem) !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  gap: 7px !important;
  margin-bottom: 7px !important;
}

#thread-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: .76rem !important;
  line-height: 1.25 !important;
}

.thread-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(130, 148, 180, .22) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.62) !important;
  color: var(--text-soft) !important;
  font-weight: 750 !important;
}

html[data-theme="dark"] .thread-meta-pill {
  background: rgba(255,255,255,.055) !important;
}

.thread-meta-views {
  color: var(--accent) !important;
}

.thread-meta-views svg,
#thread-list .thread-views svg {
  width: 14px !important;
  height: 14px !important;
}

.thread-table-head,
#thread-list .thread-row {
  grid-template-columns: minmax(0, 1fr) 56px 72px minmax(96px, 132px) !important;
}

#thread-list .thread-row {
  min-height: 64px !important;
}

#thread-list .thread-title-line {
  font-size: .93rem !important;
  line-height: 1.25 !important;
}

#thread-list .thread-meta {
  font-size: .74rem !important;
}

#thread-list .thread-views {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: var(--text-soft) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
}

.xf-admin-page,
.admin-card,
.admin-section,
.admin-form-row,
.acp-form-row,
.acp-group-card {
  min-width: 0 !important;
}

.admin-card,
.admin-section,
.xf-admin-content {
  overflow: visible !important;
}

.acp-group-card input,
.admin-card input,
.admin-card select,
.admin-card textarea,
.admin-section input,
.admin-section select,
.admin-section textarea {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.acp-group-card input {
  color: var(--text) !important;
  background: var(--surface, rgba(255,255,255,.92)) !important;
  border: 1px solid rgba(130,148,180,.28) !important;
}

html[data-theme="dark"] .acp-group-card input {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

@media (max-width: 820px) {
  .welcome-banner {
    min-height: 210px !important;
  }

  .welcome-banner-content {
    margin: 16px !important;
    padding: 18px !important;
  }

  #thread-list .thread-row,
  .thread-table-head {
    grid-template-columns: minmax(0, 1fr) 52px 64px !important;
  }

  #thread-list .thread-last,
  .thread-table-head span:last-child {
    display: none !important;
  }
}