/* =========================
   Bilingual typography
   Fonts are loaded through GOOGLE_FONTS_CSS in app.py.
========================= */
:root {
  --pcbs-font-ar: "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --pcbs-font-en: "Poppins", Arial, sans-serif;
}
@import url('/fonts.css');

/* Arabic is the dashboard default until rtl_direction_fix.js resolves the URL. */
body {
  font-family: var(--pcbs-font-ar);
}

html[dir="rtl"] body,
body[dir="rtl"],
#app_shell[dir="rtl"] {
  font-family: var(--pcbs-font-ar); 
}

html[dir="ltr"] body,
body[dir="ltr"],
#app_shell[dir="ltr"] {
  font-family: var(--pcbs-font-en) !important;
}

/* Form controls and component libraries do not always inherit the body font. */
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .Select,
html[dir="rtl"] .Select-control,
html[dir="rtl"] .Select-menu-outer,
html[dir="rtl"] .Select-option,
html[dir="rtl"] .VirtualizedSelectOption,
html[dir="rtl"] .dash-table-container,
html[dir="rtl"] [class*="mantine-"] {
  font-family: var(--pcbs-font-ar) !important;
}

html[dir="ltr"] button,
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] .btn,
html[dir="ltr"] .form-control,
html[dir="ltr"] .form-select,
html[dir="ltr"] .Select,
html[dir="ltr"] .Select-control,
html[dir="ltr"] .Select-menu-outer,
html[dir="ltr"] .Select-option,
html[dir="ltr"] .VirtualizedSelectOption,
html[dir="ltr"] .dash-table-container,
html[dir="ltr"] [class*="mantine-"] {
  font-family: var(--pcbs-font-en) !important;
}

/* Reinforce the selected language in Plotly SVG text and hover labels. */
html[dir="rtl"] .js-plotly-plot text,
html[dir="rtl"] .plotly .hovertext text {
  font-family: var(--pcbs-font-ar) !important;
}

html[dir="ltr"] .js-plotly-plot text,
html[dir="ltr"] .plotly .hovertext text {
  font-family: var(--pcbs-font-en) !important;
}

/* 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%;
  }
}

/* Commodity dropdown: long options should wrap cleanly */
.commodity-dd .Select-menu-outer {
  max-height: 420px !important;
}

.commodity-dd .Select-option,
.commodity-dd .VirtualizedSelectOption {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Selected chips inside the input */
.commodity-dd .Select-value-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block;
  max-width: 220px;
}

/* Keep Plotly charts readable on desktop, but do not force horizontal scroll on phones. */
.pcbs-graph-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.pcbs-graph-scroll .js-plotly-plot,
.pcbs-graph-scroll .dash-graph {
  min-width: 720px;
}

/* Phones: let the Plotly graph shrink to the screen width instead of creating side scroll. */
@media (max-width: 768px) {
  .pcbs-graph-scroll {
    overflow-x: hidden;
  }

  .pcbs-graph-scroll .js-plotly-plot,
  .pcbs-graph-scroll .dash-graph,
  .pcbs-graph-scroll .plot-container,
  .pcbs-graph-scroll .svg-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================
   Percent-change toggle emphasis
========================= */
#output_show_pct_change,
#intermediate_show_pct_change,
#value_added_show_pct_change,
#expenditure_show_pct_change,
#main_indicator_show_pct_change {
  background: #F8FBFF;
  border: 1px solid rgba(11, 110, 168, 0.24);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 44px;
  box-shadow: 0 6px 16px rgba(11, 110, 168, 0.06);
  display: flex;
  align-items: center;
}

#output_show_pct_change label,
#intermediate_show_pct_change label,
#value_added_show_pct_change label,
#expenditure_show_pct_change label,
#main_indicator_show_pct_change label {
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
}

#output_show_pct_change .form-check,
#intermediate_show_pct_change .form-check,
#value_added_show_pct_change .form-check,
#expenditure_show_pct_change .form-check,
#main_indicator_show_pct_change .form-check {
  margin-bottom: 0;
}

#output_show_pct_change .form-check-input,
#intermediate_show_pct_change .form-check-input,
#value_added_show_pct_change .form-check-input,
#expenditure_show_pct_change .form-check-input,
#main_indicator_show_pct_change .form-check-input {
  cursor: pointer;
  border-color: rgba(11, 110, 168, 0.45);
}

#output_show_pct_change .form-check-input:checked,
#intermediate_show_pct_change .form-check-input:checked,
#value_added_show_pct_change .form-check-input:checked,
#expenditure_show_pct_change .form-check-input:checked,
#main_indicator_show_pct_change .form-check-input:checked {
  background-color: #0b6ea8;
  border-color: #0b6ea8;
}

#output_show_pct_change:has(.form-check-input:checked),
#intermediate_show_pct_change:has(.form-check-input:checked),
#value_added_show_pct_change:has(.form-check-input:checked),
#expenditure_show_pct_change:has(.form-check-input:checked),
#main_indicator_show_pct_change:has(.form-check-input:checked) {
  background: #EAF6FC;
  border-color: rgba(11, 110, 168, 0.55);
  box-shadow: 0 8px 18px rgba(11, 110, 168, 0.10);
}


/* =========================
   Responsive KPI cards
   Uses the actual dashboard/card width, not the browser width.
========================= */
.kpi-grid-container {
  container-type: inline-size;
  width: 100%;
}

.kpi-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.kpi-card-item,
.kpi-card {
  min-width: 0;
}

/* When the dashboard is embedded in a narrower PCBS content area, use 2x2 cards. */
@container (max-width: 1180px) {
  .kpi-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: one card per row. */
@container (max-width: 560px) {
  .kpi-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   KPI card grid: embedded-width fallback
   Classes are applied by kpi_responsive_fix.js using the real container width.
========================= */
.kpi-card-grid.kpi-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-card-grid.kpi-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi-card-grid.kpi-grid--one {
  grid-template-columns: minmax(0, 1fr);
}

/* =========================
   KPI year selector
========================= */
.kpi-year-dropdown .Select-control,
.kpi-year-dropdown .select__control {
  min-height: 36px;
  border-radius: 9px;
  border-color: #CBD5E1;
  background: #FFFFFF;
}

.kpi-year-dropdown .Select-value-label,
.kpi-year-dropdown .select__single-value {
  font-weight: 800;
  color: #0F172A;
}

/* Fallback for older Plotly.js builds: the config already disables this logo. */
.modebar-btn--logo,
.modebar-btn.plotlyjsicon[data-title="Produced with Plotly"] {
  display: none !important;
}

.kpi-region-card-contents {
  display: contents;
}

/* =========================
   Complete Arabic RTL support
   The document direction is synchronized by rtl_direction_fix.js so menus and
   portal content rendered outside #app_shell also inherit the correct direction.
========================= */
html[dir="rtl"],
html[dir="rtl"] body,
body[dir="rtl"],
#app_shell[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .form-label,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .list-group,
html[dir="rtl"] .accordion,
html[dir="rtl"] .card,
html[dir="rtl"] .table,
html[dir="rtl"] .nav,
html[dir="rtl"] .nav-tabs {
  direction: rtl;
  text-align: right;
}

/* Dash dcc.Dropdown / React Select */
html[dir="rtl"] .Select,
html[dir="rtl"] .Select-control,
html[dir="rtl"] .Select-menu-outer,
html[dir="rtl"] .Select-menu,
html[dir="rtl"] .Select-input,
html[dir="rtl"] .Select-placeholder,
html[dir="rtl"] .Select-value,
html[dir="rtl"] .Select-value-label,
html[dir="rtl"] .Select-option,
html[dir="rtl"] .VirtualizedSelectOption,
html[dir="rtl"] .Select-noresults,
html[dir="rtl"] .Select-loading-zone,
html[dir="rtl"] .Select-multi-value-wrapper {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .Select-input > input {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .Select-placeholder,
html[dir="rtl"] .Select--single > .Select-control .Select-value {
  padding-right: 10px !important;
  padding-left: 34px !important;
}

html[dir="rtl"] .Select--multi .Select-value {
  margin-right: 5px !important;
  margin-left: 0 !important;
}

html[dir="rtl"] .Select--multi .Select-value-icon {
  border-right: 0 !important;
  border-left: 1px solid rgba(0, 126, 255, 0.24) !important;
}

html[dir="rtl"] .Select-arrow-zone,
html[dir="rtl"] .Select-clear-zone {
  direction: rtl;
}

/* Dash tabs, Bootstrap controls, switches, and buttons */
html[dir="rtl"] .tab,
html[dir="rtl"] .custom-tab,
html[dir="rtl"] .form-check,
html[dir="rtl"] .form-switch,
html[dir="rtl"] .btn-group,
html[dir="rtl"] .download-btn-group,
html[dir="rtl"] .input-group {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .form-check {
  padding-right: 1.5em;
  padding-left: 0;
}

html[dir="rtl"] .form-check .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0.5em;
}

/* Date controls and Mantine components */
html[dir="rtl"] .DateRangePicker,
html[dir="rtl"] .DateRangePickerInput,
html[dir="rtl"] .DateInput,
html[dir="rtl"] .DateInput_input,
html[dir="rtl"] [class*="mantine-"] {
  direction: rtl;
  text-align: right;
}

/* Keep numeric/year fields readable while their surrounding Arabic UI stays RTL. */
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .DateInput_input {
  unicode-bidi: plaintext;
}