/* =========================
   Base typography
========================= */
body {
  font-family: Cairo, Tahoma, Arial, sans-serif;
}

/* Hard stop: never allow page-level horizontal scrolling */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================
   Core UI card
========================= */
.pcbs-card {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.pcbs-title {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
}

/* =========================
   Buttons
========================= */
/* =========================
   Bootstrap primary buttons
========================= */
.btn-primary {
  background-color: #0b6ea8;
  border-color: #0b6ea8;
}
.btn-primary:hover {
  background-color: #095f91;
  border-color: #095f91;
}

/* =========================
   Download button group
   (prevent full-width stretch)
========================= */
.download-btn-group {
  display: inline-flex;          /* key fix: do NOT use full flex */
  width: auto;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Prevent Bootstrap .btn-group flex-grow behavior */
.download-btn-group > .btn,
.download-btn-group .btn {
  flex: 0 0 auto;
  width: auto;
  border-radius: 12px;
  font-weight: 800;
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

/* =========================
   CSV button
========================= */
.download-btn-csv {
  background: #2563EB;
  border-color: rgba(37, 99, 235, 0.35);
  color: #fff;
}
.download-btn-csv:hover {
  background: #1D4ED8;
}

/* =========================
   XLSX button
========================= */
.download-btn-xlsx {
  background: #ECFDF5;
  color: #065F46;
  border-color: rgba(6, 95, 70, 0.22);
}
.download-btn-xlsx:hover {
  background: #D1FAE5;
  color: #064E3B;
}


/* =========================
   Dropdown RTL support
========================= */
[dir="rtl"] .Select-control,
[dir="rtl"] .Select-menu-outer,
[dir="rtl"] .Select-value,
[dir="rtl"] .Select-placeholder {
  text-align: right;
  direction: rtl;
}


/* =========================
   Bootstrap / layout safety
========================= */
/* Allow Bootstrap columns to shrink instead of forcing overflow */
.row > [class*="col-"] {
  min-width: 0;
}

/* =========================
   DataTable containment
   (Wrapper owns horizontal scroll)
========================= */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* Clamp the spreadsheet itself to wrapper width */
.table-wrap .dash-spreadsheet {
  width: 100% !important;
}

.table-wrap { -webkit-overflow-scrolling: touch; }

/* Arabic only: make the DataTable scrolling logic LTR (stabilizes resize/devtools) */
[dir="rtl"] .table-wrap {
  direction: ltr;
}

/* But keep the cells themselves RTL and right-aligned */
[dir="rtl"] .table-wrap .dash-spreadsheet td,
[dir="rtl"] .table-wrap .dash-spreadsheet th {
  direction: rtl;
  text-align: right;
}
/* =========================
   Datepicker
========================= */
.pcbs-datepicker .DateInput_input {
  height: 38px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  font-size: 14px;
}

.pcbs-datepicker .DateRangePickerInput {
  border-radius: 6px;
}

.pcbs-datepicker .DateRangePickerInput_arrow {
  padding: 0 8px;
}

/* =========================
   Metadata layout
========================= */

.meta-layout { align-items: flex-start; }

/* Let sidebar fit inside its Bootstrap column on mid-size screens (Nest Hub / tablets) */
.meta-sidebar{
  width: 100%;
  max-width: 100%;
  min-width: 0;   /* critical */
}

/* Only lock a nice fixed width on big desktops */
@media (min-width: 1400px){
  .meta-sidebar{
    width: 320px;
    max-width: 360px;
  }
}

.meta-content{ min-width: 0; }

.meta-sidebar .list-group-item{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.meta-sidebar .meta-sections-list{
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* Dropdown hidden on desktop */
.meta-sections-dd{ display: none; }

/* Tablets + phones: show dropdown, hide sidebar list */
@media (max-width: 991.98px){
  .meta-sections-dd{ display: block; margin-bottom: 12px; }
  .meta-sidebar-inner{ display: none; }
  .meta-content{ margin-top: 8px; }
}


/* 4 per row in the tighter part of lg */
@media (min-width: 992px) and (max-width: 1134.98px) {
  .kpi-col-5 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* 5 per row in your target band (1135–1199.98) */
@media (min-width: 1135px) and (max-width: 1199.98px) {
  .kpi-col-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }

  /* optional: slightly smaller gutters in this band to avoid squish */
  #kpi_regions_row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
}

/* 5 per row on xl+ */
@media (min-width: 1200px) {
  .kpi-col-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}