/* =========================================================
   Shared application shell
   Ensures consistent width and centering across RC pages
   ========================================================= */

.app-shell {
    max-width: 1100px;
    /* same visual width as dashboard */
    margin: 0 auto;
    padding: 24px 20px 60px;
}

@media (max-width: 768px) {
    .app-shell {
        padding: 16px 14px 48px;
    }
}

/* =========================================================
   Page headers (shared)
   ========================================================= */

.page-header {
    margin-bottom: 20px;
}

.page-header h1 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.page-header .muted {
    font-size: 0.85rem;
}

/* Avoid double border directly below topbar (card-style header) */
.topbar + .card,
.topbar + .panel,
.topbar + .card-list {
  border-top: none;
}

/* Prevent visual double-border after topbar */
.container > .topbar + div + .card {
    border-top: none;
  }
  

  /* Attach first card visually to card-style topbar */
.container > .card:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }

  /* -------------------------------------------------------
   EMPTY STATE (shared)
   -------------------------------------------------------
   Purpose:
   Make empty cards feel intentional, not broken.
*/
.empty-state {
    padding: 16px;
    text-align: center;
  }
  
  .empty-state strong {
    display: block;
    margin-bottom: 4px;
  }

  /* -------------------------------------------------------
   REGION: center placeholder content in bottom card
   -------------------------------------------------------
   Only affects empty-state inside constituency list
   Does NOT alter card width or layout
*/
#constituencyList .empty-state {
    min-height: 160px;              /* gives visual balance */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  /* -------------------------------------------------------
   REGION: center empty placeholder in grid-based card-list
   -------------------------------------------------------
   When constituency list is empty, override grid layout
*/
#constituencyList:has(.empty-state) {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  
  #constituencyList:has(.empty-state) .empty-state {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100px;
  }
  
  #constituencyList.is-empty {
    display: flex;
    justify-content: center;
  }
  
  /* -------------------------------------------------------
   CONSTITUENCY: center empty placeholder in grid list
   -------------------------------------------------------
*/

#trendPanel .empty-state {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

#branchCards:has(.empty-state) {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  
  #branchCards:has(.empty-state) .empty-state {
    width: 100%;
    max-width: 420px;
    min-height: 160px;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Center placeholder inside branch summary card */
#branchSummary .empty-state {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

/* -------------------------------------------------------
   SUBMIT PAGE: dropdown stability and form layering
   -------------------------------------------------------
   Purpose:
   - Ensure native select dropdowns are not clipped or hidden
   - Keep Add Activity form controls above surrounding card layers
   - Scope changes only to submit.html via .submit-card
*/

.submit-card,
.submit-card .bd,
.submit-card .form-row {
  position: relative;
  overflow: visible !important;
}

/* Keep the submit form above nearby card/card-shadow layers */
.submit-card {
  z-index: 20;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  contain: none !important;
}

/* Keep native select controls visually stable */
.submit-card select {
  position: relative;
  z-index: 50;
  width: 100%;
}

/* Helper text used below form controls */
.submit-card .helper-text {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}