/* ============================================================
   KreepCore - Layout Shell, Containers, Structure
   ============================================================ */

/* --- Layout Shell --- */
#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: var(--app-height);
  display: flex;
  flex-direction: column;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

html.game-active body {
  height: 100vh;
  height: var(--app-height);
  overflow: hidden;
}

html.game-active #app {
  height: 100vh;
  height: var(--app-height);
  min-height: 0;
}

html.pwa-standalone.game-active #app {
  height: 100%;
}

#game-ui:not(.hidden) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

.main-content {
  flex: 1;
  padding: var(--panel-padding);
  padding-bottom: calc(var(--nav-height) + var(--ticker-height) + var(--panel-padding) + var(--bottom-sai) + 12px);
  width: 100%;
}

/* --- Section Spacing --- */
.section {
  margin-top: var(--grid-gap);
}
.dashboard-grid {
  margin-top: calc(var(--grid-gap) + 12px);
}
.dashboard-grid .section:first-child {
  margin-top: 0;
}

.dashboard-section {
  position: relative;
}

.panel.dashboard-shell-free {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.panel.dashboard-shell-free::after {
  display: none;
}

.panel.dashboard-shell-free .panel-header {
  padding: 0 0 12px;
  border-bottom: none;
  background: none;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--cyan) 82%, white);
}

.dashboard-shell-free .panel-header::before {
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
  width: 76px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), transparent);
}

.dashboard-shell-free .panel-body {
  padding: 0;
}

.section + .section {
  margin-top: calc(var(--grid-gap) + 4px);
}

.section.full-width {
  margin-top: calc(var(--grid-gap) + 12px);
}

/* --- Planet + Tasks two-column layout --- */
.planet-tasks-row {
  margin-top: var(--grid-gap);
}

@media (min-width: 900px) {
  .planet-tasks-row:has(.dashboard-section-planet:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: var(--grid-gap);
    align-items: start;
  }
  /* When task list is empty/hidden, planet info takes full width */
  .planet-tasks-row:has(.task-list.hidden),
  .planet-tasks-row:has(.task-list:empty) {
    grid-template-columns: 1fr;
  }
  /* PLANETA tab leaves #wellbeing-container empty (it's only filled on
     EDIFICIOS). Without this rule the grid still reserves a 280-380px
     right column, leaving a wide empty gap to the right of the planet
     stats. Collapse to a single column when the right rail is unused. */
  .planet-tasks-row:has(#wellbeing-container:empty) {
    grid-template-columns: 1fr;
  }
  .planet-tasks-row:has(.dashboard-section-planet:not(.hidden)) > .section {
    margin-top: 0;
  }
  .planet-tasks-row:has(.dashboard-section-planet:not(.hidden)) .task-list {
    margin-top: 0;
    margin-bottom: 0;
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
  }
}

/* --- Desktop Multi-Column --- */
@media (min-width: 1024px) {
  #screen-empire > .main-content,
  #screen-rankings > .main-content,
  #screen-events > .main-content,
  #screen-admin-log > .main-content {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Let compact resource strip break out of the 960px constraint */
  #empire-dashboard-content > .section.full-width {
    max-width: none;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  #empire-dashboard-content > .section.full-width > .resource-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Anchor orbital feed (planet surface view) to the bottom of the screen on
     the PLANET sub-tab, so it sits just above the bottom navbar/ticker instead
     of leaving empty space below it. Other sub-tabs are unaffected because
     #planet-surface-view is display:none there (and :has() won't match). */
  #screen-empire > .main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--app-height, 100dvh) - var(--sticky-header-h, 160px));
  }
  #empire-dashboard-content:has(> #planet-surface-view:not(.hidden)) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #empire-dashboard-content > #planet-surface-view:not(.hidden) {
    margin-top: auto;
    padding-top: 24px;
  }

  /* Planet selector now in topbar; the compact trigger would otherwise clamp
     the open list to its own narrow width and ellipsize planet names. Let the
     list size to its content instead of inheriting the trigger width. */
  .topbar-planet .planet-dropdown-list {
    right: auto;
    width: max-content;
    min-width: 240px;
    max-width: 360px;
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.92fr);
    gap: var(--grid-gap);
    align-items: start;
    margin-top: calc(var(--grid-gap) + 12px);
  }
  .dashboard-grid > .section,
  .dashboard-grid > .section + .section {
    margin-top: 0;
  }
  .dashboard-grid > .section {
    display: flex;
    flex-direction: column;
  }
  .dashboard-grid > .section > .panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .dashboard-grid > .section > .panel > .panel-body {
    flex: 1;
    overflow: hidden;
  }
  .dashboard-grid > .section > .dashboard-shell-free > .panel-body {
    overflow: visible;
  }
  .dashboard-grid .task-list {
    max-height: 100%;
    overflow-y: auto;
  }
  .dashboard-grid .dashboard-section-tasks .task-list {
    max-height: min(58vh, 640px);
    max-height: min(58dvh, 640px);
    padding-right: 6px;
  }

  .dashboard-grid .section.full-width {
    grid-column: 1 / -1;
  }

  /* Progress ribbon: wrap into rows on desktop */
  .collection-strip-wrap::after {
    display: none;
  }
  .collection-strip {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .dashboard-shell-free .planet-info-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .dashboard-shell-free .planet-visual {
    width: 80px;
    height: 80px;
  }

  .dashboard-shell-free .planet-img {
    width: 80px;
    height: 80px;
  }

  .dashboard-shell-free .planet-gl {
    width: 80px;
    height: 80px;
  }

  .dashboard-shell-free .planet-stats {
    width: 100%;
    max-width: 100%;
    padding-top: 2px;
    gap: 6px;
    grid-template-columns: 1fr;
    align-items: start;
    text-align: left;
  }

  .dashboard-shell-free .stat-ratios {
    justify-content: flex-start;
    gap: 8px;
  }

  .dashboard-shell-free .ratio-balance-link {
    padding: 5px 8px;
  }

  .dashboard-shell-free .star-display {
    min-height: 120px;
  }
}

@media (max-width: 1023px) and (orientation: landscape) {
  .dashboard-shell-free .planet-info-grid {
    min-height: 0;
  }

  .dashboard-shell-free .planet-info-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 148px;
    padding: 6px 0;
  }

  .dashboard-shell-free .star-section {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .dashboard-shell-free .star-display {
    position: relative;
    align-self: center;
    justify-self: start;
    left: auto;
    top: auto;
    transform: none;
    width: clamp(74px, 9vw, 88px);
    min-height: 120px;
    margin-left: clamp(-44px, -4.5vw, -22px);
    z-index: 0;
  }

  .dashboard-shell-free .star-display::after {
    display: none;
  }

  .dashboard-shell-free .planet-visual {
    grid-column: 3;
    grid-row: 1;
    order: initial;
    justify-self: end;
    z-index: 1;
    width: 120px;
    height: 120px;
  }

  .dashboard-shell-free .planet-img {
    width: 96px;
    height: 96px;
  }

  .dashboard-shell-free .planet-stats {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dashboard-shell-free .planet-stat .stat-label {
    font-size: 0.65rem;
  }

  .dashboard-shell-free .planet-stat .stat-value {
    font-size: 0.9rem;
  }
}

/* Desktop sidebar */
@media (min-width: 1024px) {
  .main-content {
    margin-left: 0;
    width: 100%;
    padding-bottom: calc(var(--nav-height) + var(--ticker-height) + var(--panel-padding) + 12px);
  }

  .topbar {
    margin-left: 0;
    width: 100%;
  }

  /* planet-selector removed from standalone bar */
}

/* --- Sticky Category Tabs --- */
.category-tabs {
  display: flex;
  justify-content: center;
  padding: 0 var(--panel-padding);
  background: rgba(6, 6, 15, 0.98);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

/* --- Sticky Header --- */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- Top Banners (inside sticky-header, above topbar) --- */
.top-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: rgba(6, 6, 15, 0.98);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.top-banner .btn {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .top-banner .btn {
    width: 100%;
    text-align: center;
  }
}

/* Email reminder: one-line dismissible chip */
.top-banner.email-reminder-chip {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  font-size: 11.5px;
}
.email-chip-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.email-chip-icon { flex-shrink: 0; font-size: 14px; line-height: 1; }
.email-chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-chip-dismiss {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.email-chip-dismiss:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* When a banner is visible, topbar no longer needs safe-area padding */
.sticky-header:has(.top-banner:not(.hidden)) .topbar {
  height: var(--topbar-height);
  padding-top: 0;
}

/* ============================================================
   Era 1.5 F2b: fixed chrome + ONE scroll region per screen.
   body.kc-shell rides the empire-wide tabs (Imperio, Ciencia,
   Flotas, Victorias) plus events, rankings, community and
   profile. The colony sub-tabs keep their own shell
   (body.kc-colony-md, e2.css); desktop3 keeps its center-column
   scroll; the map and the codex are fullscreen takeovers.
   ============================================================ */
body.kc-shell:not(.kc-layout-desktop3) #game-ui:not(.hidden) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
body.kc-shell:not(.kc-layout-desktop3) .sticky-header {
  flex: none;
}
body.kc-shell:not(.kc-layout-desktop3) .screen.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body.kc-shell:not(.kc-layout-desktop3) .screen.active > .main-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  body.kc-shell:not(.kc-layout-desktop3) #screen-empire > .main-content {
    min-height: 0;
  }
}

/* F2b: sticky sub-strips now live inside the .main-content scroller, which
   already starts below the fixed chrome - anchor them to its top edge */
body.kc-shell:not(.kc-layout-desktop3) .screen.active .section.full-width:has(.resource-compact) {
  top: 0;
}
body.kc-shell:not(.kc-layout-desktop3) .screen.active .consolidated-toggle,
body.kc-shell:not(.kc-layout-desktop3) .screen.active .empire-research-subtabs {
  top: var(--sticky-resources-h, 0px);
}