/* EEO-1 Analytics -- reuses the shared EEOC Explore / Studio design system
   (see twbx_convert/runtime.py's CSS: :root tokens, Public Sans, card/
   shadow/radius conventions, the .pbix-theme table pattern) so this
   converted R Shiny application reads as another first-class Studio
   module, not a separately designed prototype.

   Every rule below is scoped under .eeo1-app (the wrapper render_page()
   returns). This is a plain Dash asset file -- auto-loaded on every /dash/
   page, Tableau/Power BI/generic dashboards included -- but since nothing
   here matches outside .eeo1-app, it has zero effect on their rendering.
   Tableau's own tab strip is scoped by its literal #dbtabs id in
   runtime.CSS; .tab/.tab--selected below are Dash's own default classNames
   for dcc.Tab, scoped here the same way. */

.eeo1-app {
  --eeo1-navy: #1a4480;   /* the exact navy the EEOC Explore masthead uses */
  background: #f4f5f8;    /* the same light-gray app background used across
                             the rest of Studio (home / build / generate) */
  border-radius: 14px;
  padding: 18px 18px 30px;
  font-family: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink, #1b1b1b);
  box-sizing: border-box;
}
.eeo1-app *, .eeo1-app *::before, .eeo1-app *::after { box-sizing: border-box; }

/* ---- Header: product name + status badge --------------------------------- */
.eeo1-app .eeo1-hdr { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 16px; }
.eeo1-app .eeo1-hdr h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.015em;
  color: var(--eeo1-navy); }
.eeo1-app .eeo1-badge { display: inline-block; border-radius: 999px; padding: 2px 11px;
  font-size: 12px; font-weight: 700; background: #e8eefb; color: var(--eeo1-navy);
  white-space: nowrap; }

/* ---- Tabs: the same compact pill strip as the Tableau/browser converter -- */
.eeo1-app .tab-parent { margin-bottom: 14px; }
.eeo1-app .tab-container { flex-wrap: wrap !important; border-bottom: 0 !important;
  gap: 6px; padding: 2px 0 4px; }
.eeo1-app .tab { border: 1px solid var(--line) !important; border-radius: 999px !important;
  background: #f4f5f8 !important; color: #344054 !important; font-weight: 600 !important;
  box-shadow: none !important; padding: 8px 18px !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important; }
.eeo1-app .tab:hover { background: #e7e9f5 !important; border-color: var(--accent) !important;
  color: var(--accent-hover) !important; }
.eeo1-app .tab--selected { background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent) !important; box-shadow: var(--shadow) !important; }

/* ---- Cards: white, bordered, radius+shadow -- the same tokens as the
   converter's .ctl-box (filter card) and .dashboard-canvas (content card). -- */
.eeo1-app .eeo1-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px;
  align-items: start; }
.eeo1-app .eeo1-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--card-radius); box-shadow: var(--shadow); padding: 16px; }
.eeo1-app .eeo1-card h2, .eeo1-app .eeo1-card h3 { margin: 0 0 12px; color: var(--eeo1-navy);
  font-size: 15px; font-weight: 700; }

/* ---- Filter fields -------------------------------------------------------- */
.eeo1-app .eeo1-field { margin-bottom: 12px; }
.eeo1-app .eeo1-field:last-child { margin-bottom: 0; }
.eeo1-app .eeo1-field > label, .eeo1-app .eeo1-label { display: block; font-weight: 700;
  font-size: 11.5px; color: #1a1a1a; margin-bottom: 4px; }
.eeo1-app input[type=text], .eeo1-app input[type=number] { height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px;
  width: 100%; background: #fff; }
/* .dash-dropdown is Dash 4.x's real dcc.Dropdown control class (a native
   <button>, not the older react-select ".Select-control"); its OWN option
   list renders in a Radix UI portal outside this subtree, so it is styled
   on its own merits by Dash's default theme rather than chased here. */
.eeo1-app .dash-dropdown-wrapper { min-height: 34px; }
.eeo1-app .dash-dropdown { min-height: 34px !important; border-radius: 8px !important;
  border-color: var(--line) !important; font-size: 13px !important; }
.eeo1-app .eeo1-inline-input { display: flex; gap: 6px; }
.eeo1-app .eeo1-inline-input input { flex: 1; min-width: 0; }
/* Fixed width so the County FIPS and NAICS Code rows always line up
   exactly, regardless of button label length (both currently say
   "Look Up", but this stays correct even if that ever changes again). */
.eeo1-app .eeo1-lookup-btn { flex: 0 0 auto; width: 92px; }

/* ---- Buttons: primary / secondary, same shape as the rest of Studio ------ */
.eeo1-app .btn-primary, .eeo1-app .btn-secondary { height: 36px; padding: 0 18px;
  border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; }
.eeo1-app .btn-primary { background: var(--accent); color: #fff; border: 0; }
.eeo1-app .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.eeo1-app .btn-primary:disabled { background: #9aa3bd; cursor: not-allowed; }
.eeo1-app .btn-secondary { background: #fff; color: var(--eeo1-navy); border: 1px solid var(--line); }
.eeo1-app .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); }
.eeo1-app .btn-secondary:disabled { color: #9aa3bd; border-color: #e2e5ea; cursor: not-allowed; }
.eeo1-app .btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ---- Result-count badge (mirrors the upload page's .badge.data pill) ----- */
.eeo1-app .eeo1-count { display: inline-block; border-radius: 999px; padding: 3px 12px;
  font-size: 12.5px; font-weight: 700; background: #e6f7ef; color: #0a7c4a; }

/* Table header/zebra colors are set via DataTable's own style_header /
   style_cell / style_data_conditional props in _results_table() (Dash's
   DataTable inlines those with higher specificity than an external
   stylesheet), using the same navy + zebra convention as the pbix-theme. */

/* ---- Modal (NAICS / county lookup): same card look, fixed-position overlay,
   IDENTICAL outer dimensions for both -- neither is allowed to end up
   shorter/narrower just because it happens to need fewer filter controls.
   z-index is comfortably above every other stacked element on the page
   (the EEOC masthead included) so the dialog is never hidden behind it. */
.eeo1-app .eeo1-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 2000; }
/* A definite height (not just a max) is what lets the two panes below flex
   and scroll INTERNALLY instead of growing the box until the footer is
   pushed off-screen. Tall rather than wide/flat, matching the original's
   `size = 25/26` lists and its `size = 'xl'` dialog. */
.eeo1-app .eeo1-modal-box { position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 2001; width: 940px; max-width: 94vw;
  height: min(780px, 90vh); max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; }
.eeo1-app .eeo1-modal-hdr { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.eeo1-app .eeo1-modal-box h4 { margin: 0 0 12px; color: var(--eeo1-navy); font-size: 17px;
  font-weight: 800; }
.eeo1-app .eeo1-modal-close { background: transparent; border: 0; color: #667085; font-size: 16px;
  line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.eeo1-app .eeo1-modal-close:hover { background: #f4f5f8; color: var(--eeo1-navy); }
.eeo1-app .eeo1-modal-footer { display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 16px; flex: 0 0 auto; }
/* The body wrapper (_naics_modal_body()/_cnty_modal_body()) becomes the
   flex column that actually lays out [filter row, scroll list] -- .eeo1-
   modal-box is the OUTER flex column ([header, body, footer]); min-height:0
   is required here or the scrollable list refuses to shrink below its
   content's natural height, breaking the scroll. */
.eeo1-app .eeo1-modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ---- Two-pane modal body -------------------------------------------------
   Both lookup dialogs reproduce their ORIGINAL R Shiny two-column layout
   (app_pool_ext_david (2).R:1052-1057 county, :1112-1148 NAICS) rather than
   a filter row stacked over one list. The original used
   `selectInput(..., selectize = FALSE, size = 25/26)` on each side: an
   always-open, multi-row list, never a floating dropdown that covers the
   other pane. The column widths differ per dialog because the two original
   workflows differ -- NAICS is 7/12 + 5/12, county is 4/12 + 8/12 -- while
   the header, outer box, footer, buttons, radius and spacing stay shared. */
.eeo1-app .eeo1-modal-body--split { flex-direction: row; gap: 18px; align-items: stretch; }
.eeo1-app .eeo1-modal-pane { display: flex; flex-direction: column; min-height: 0;
  min-width: 0; }
/* Column widths named after the R app's own Bootstrap column spans, so each
   dialog keeps ITS OWN proportions rather than inheriting the other's:
     NAICS   column(7) sector + column(5) industry
     County  column(4) state  + column(8) county                            */
.eeo1-app .eeo1-modal-pane--c4 { flex: 4 1 0; }
.eeo1-app .eeo1-modal-pane--c5 { flex: 5 1 0; }
.eeo1-app .eeo1-modal-pane--c7 { flex: 7 1 0; }
.eeo1-app .eeo1-modal-pane--c8 { flex: 8 1 0; }
.eeo1-app .eeo1-modal-pane .eeo1-label { flex: 0 0 auto; }

/* The county dialog's two lists were the SAME size in the original
   (`size = 25` on both), so their tops and bottoms must line up even though
   only one of them carries the text filter. Reserving a common head height
   does that. The NAICS dialog deliberately does NOT do this: there, the
   NAICS Digits radio sits under the sector list, so the two sides balance
   without it -- and the original's own two panes were not height-matched. */
.eeo1-app .eeo1-modal-pane-head { flex: 0 0 auto; }
.eeo1-app .eeo1-modal-body--aligned .eeo1-modal-pane-head { min-height: 58px; }
/* The single optional text filter, directly above the list it narrows.
   Deliberately only ever ONE per dialog: the always-open lists carry no
   search field of their own, so there is no dropdown-internal search
   competing with an external one. */
.eeo1-app .eeo1-modal-pane-filter { width: 100%; flex: 0 0 auto; margin-bottom: 8px; }
/* The NAICS Digits radio sits BELOW the sector list, on the sector's own
   side, exactly as it does inside the R app's column(7). */
.eeo1-app .eeo1-modal-digits { flex: 0 0 auto; margin-top: 12px; }

/* An always-visible selection list: tall, scrollable, one click to choose.
   flex 1 1 auto + min-height:0 lets it absorb the dialog's remaining height
   instead of hard-coding one; the min-height floor keeps it usable on a
   short viewport. The R app's own ceiling was
   `#ncsels { max-height: 650px; overflow-y: auto; }`. */
.eeo1-app .eeo1-modal-list { flex: 1 1 auto; min-height: 300px;
  overflow-y: auto; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 10px; background: #fff; }
/* The 650px ceiling belonged to the INDUSTRY list specifically -- it is the
   R app's own `#ncsels { max-height: 650px; overflow-y: auto; }`. The
   sector/state/county lists came from `selectInput(size = 25/26)` with no
   CSS cap, so they take whatever height the dialog has, which is what lets
   all 26 sectors show at once on a full-height screen. */
.eeo1-app .eeo1-modal-list--industry { max-height: 650px; }
.eeo1-app .eeo1-modal-list:focus-within { border-color: var(--eeo1-navy);
  box-shadow: 0 0 0 3px rgba(31,68,128,.12); }
.eeo1-app .eeo1-modal-options .dash-options-list-option { display: flex !important;
  align-items: center; gap: 8px; padding: 6px 8px; margin: 1px 0; border-radius: 6px;
  font-size: 13.5px; line-height: 1.3; cursor: pointer; }
.eeo1-app .eeo1-modal-options .dash-options-list-option-wrapper { flex: 0 0 auto; }
.eeo1-app .eeo1-modal-options .dash-options-list-option:hover { background: #f4f5f8; }
.eeo1-app .eeo1-modal-options .dash-options-list-option.selected { background: #e7e9f5;
  font-weight: 700; color: var(--eeo1-navy); }

/* ---- Applied lookup value (NAICS / county): summary line + Clear action -- */
.eeo1-app .eeo1-lookup-summary-row { display: flex; align-items: baseline; gap: 10px;
  margin-top: 4px; min-height: 16px; }
.eeo1-app .eeo1-lookup-summary { font-size: 12px; color: var(--eeo1-navy); font-weight: 600; }
.eeo1-app .eeo1-lookup-summary:empty { display: none; }
.eeo1-app .eeo1-lookup-summary:empty + .eeo1-link-btn { display: none; }
.eeo1-app .eeo1-link-btn { background: transparent; border: 0; color: #667085; font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 0; }
.eeo1-app .eeo1-link-btn:hover { color: var(--accent-hover); }

/* ---- Empty / status states ------------------------------------------------ */
.eeo1-app .eeo1-empty { text-align: center; color: #667085; padding: 40px 20px;
  font-size: 13.5px; line-height: 1.6; }
.eeo1-app .eeo1-empty .eeo1-empty-icon { font-size: 26px; margin-bottom: 8px; opacity: .6; }
.eeo1-app .eeo1-status { font-size: 13px; color: #667085; margin: 8px 0; }

/* ---- Compare tab: summary card + compact action bar ---------------------- */
.eeo1-app .eeo1-summary { margin-bottom: 16px; }
.eeo1-app .eeo1-summary h2 { color: var(--eeo1-navy); font-size: 17px; font-weight: 800;
  margin: 0 0 4px; }
.eeo1-app .eeo1-actionbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.eeo1-app .eeo1-stat-block { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.eeo1-app .eeo1-stat-block + .eeo1-stat-block { margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); }

/* Compare tab's main (right) column: two stacked cards -- Comparison
   Summary above Statistical Detail, matching the real R app's own layout
   order (Est_Hdr -> results -> stats row). */
.eeo1-app .eeo1-compare-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Comparison Summary: the full narrative prose (render_results_html(), a
   byte-verbatim reproduction of EEO1_Results.html), given real readable
   typography -- NOT the small muted .eeo1-status treatment, which is for
   one-line search-status/error text, not multi-paragraph prose. The H4/p/b
   tags below come from the narrative's own embedded HTML
   (dangerously_allow_html); this file only styles them, never rewrites them. */
.eeo1-app .eeo1-narrative { font-size: 14.5px; line-height: 1.6; color: var(--ink, #1b1b1b); }
.eeo1-app .eeo1-narrative h4 { margin: 0 0 10px; color: var(--eeo1-navy); font-size: 15px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.eeo1-app .eeo1-narrative p { margin: 0 0 12px; }
.eeo1-app .eeo1-narrative p:last-child { margin-bottom: 0; }
.eeo1-app .eeo1-narrative b { color: var(--eeo1-navy); font-weight: 700; }

/* Statistical Detail: the R source's own two-column split (Est_Nbrs+
   comp_data | stats+ACS_est) -- stacks on narrow screens. */
.eeo1-app .eeo1-stats-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.eeo1-app .eeo1-stats-col { flex: 1 1 220px; min-width: 0; }

/* ---- Narrow screens: stack the two-column grid --------------------------- */
@media (max-width: 640px) {
  .eeo1-app .eeo1-grid { grid-template-columns: 1fr; }
  .eeo1-app .tab-container { overflow-x: auto; flex-wrap: nowrap !important; }
}