/* Generic Shiny -> Dash "app_spec" renderer -- visual structure only,
   never data-shaped. Every rule below is scoped under .app-spec-page
   (the wrapper render_page() returns) -- this is a plain Dash asset
   file, auto-loaded on every /dash/ page, Tableau/Power BI/EEO-1
   Analytics included, but since nothing here matches outside
   .app-spec-page, it has zero effect on their rendering. .tab/
   .tab--selected/.tab-container/.tab-parent below are Dash's own
   default classNames for dcc.Tab/dcc.Tabs, scoped here the same way
   eeo1_analytics.css already scopes them under .eeo1-app.

   Design tokens: the EXACT same values as the shared Studio design
   system (runtime.py's own :root block) and EEO-1 Analytics' own
   local redeclaration of them under .eeo1-app -- David's own working
   dashboard is this renderer's canonical visual reference; these are
   not a separately-invented palette. Redeclared locally (not assumed
   to cascade in from a page-level :root) for the same reason
   eeo1_analytics.css redeclares them: this stylesheet must look right
   wherever this app_kind is rendered. */
.app-spec-page {
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --ink: #1b1b1b;
  --ink-soft: #475467;
  --line: #d5d9e0;
  --line-soft: #e6e9ee;
  --card-radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --control-height: 34px;
  background: #f4f5f8;
  color: var(--ink);
  border-radius: var(--card-radius);
  padding: 18px 18px 30px;
}

.app-spec-page .tab-parent { margin-bottom: 14px; }
.app-spec-page .tab-container {
  flex-wrap: wrap;
  border-bottom: 0;
  gap: 6px;
  padding: 2px 0 4px;
}
/* Modern pill tabs -- the SAME rounded, filled-when-active treatment as
   the shared Studio design system's own #dbtabs/.dash-tabs rules and
   EEO-1 Analytics' own top-level nav. Applies to every dcc.Tabs this
   renderer builds (both the app's own top-level nav and, unless
   overridden below, a nested one) -- a long real label ("LP or SA Open
   Charges", "Statutes / Relief") wraps onto a second line rather than
   being squeezed unreadably or forcing the whole strip to overflow. */
.app-spec-page .tab, .app-spec-page .tab--selected {
  white-space: normal;
  word-break: break-word;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f4f5f8;
  color: #344054;
  font-weight: 600;
  box-shadow: none;
  padding: 8px 18px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.app-spec-page .tab:hover {
  background: #e7e9f5;
  border-color: var(--accent);
  color: var(--accent-hover);
}
.app-spec-page .tab--selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.app-spec-page .tab--selected:hover {
  background: var(--accent-hover);
  color: #fff;
}

/* ---- Nested tabs: clearly secondary to the top-level pill nav -----------
   The reference Posit screenshots show the OUTER nav (Active/Filed/...)
   as filled, boxed tabs, and a nested navset_tab's own leaves
   (Litigation Type/Case Type/...) as plain underlined text tabs with a
   full-width rule beneath -- a real depth cue, not decoration. Scoped
   to .app-spec-nested-tabs so the OUTER dcc.Tabs keeps the pill
   treatment above untouched. */
.app-spec-page .app-spec-nested-tabs.tab-container {
  border-bottom: 1px solid var(--line);
}
.app-spec-page .app-spec-nested-tabs .tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  box-shadow: none;
}
.app-spec-page .app-spec-nested-tabs .tab:hover {
  background: transparent;
  border-bottom-color: var(--line-soft);
}
.app-spec-page .app-spec-nested-tabs .tab--selected {
  background: transparent;
  border: none;
  border-bottom: 3px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: none;
}
.app-spec-page .app-spec-nested-tabs .tab--selected:hover {
  background: transparent;
  color: var(--accent-hover);
}

/* ---- Sidebar: a real, visually separate column, collapsible -------------
   Matches the reference screenshots' own bordered "card" framing and the
   sidebar's own "<" collapse affordance (bslib's real sidebar() is
   collapsible; this mirrors that, purely clientside). */
.app-spec-page .app-spec-sidebar-layout {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.app-spec-page .app-spec-sidebar-toggle {
  float: right;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 6px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
}
.app-spec-page .app-spec-sidebar-layout.app-spec-sidebar-collapsed .app-spec-col {
  display: none;
}

/* ---- Persistent action bar: the real tags$footer() shape -----------------
   Find Case's/Find Charge's real Find/Clear/Download/Exit trio lives in a
   page-level footer (position:fixed; bottom:0; width:100%), visible
   regardless of which tab is active or how far the user has scrolled --
   sticky (not fixed) keeps it anchored to the bottom of THIS page's own
   content instead of the whole viewport, avoiding overlap with anything
   else Studio renders below a converted app. Same white-card treatment
   as the sidebar/filter panels -- a persistent bar is still a real
   surface, not a bare strip of loose buttons. */
.app-spec-page .app-spec-action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}

/* ---- Inline radioButtons()/checkboxGroupInput() options -------------------
   The real, confirmed Find Case/Find Charge shape: Case Type, Filed or
   Resolved, and Basis Category all declare `inline = T`, laying their
   options out horizontally instead of stacking one per line (which
   otherwise burns far more vertical space than the reference
   screenshots show for these specific groups). The installed Dash
   RadioItems/Checklist renders each option as its own block-level
   `.dash-options-list-option` label -- scoped the same way this file's
   nested-tab/sidebar rules already scope Dash's own default
   classNames (see the header comment above), since that's the actual
   element that needs to stop being block-level, not the text span
   `labelStyle` alone can reach. */
.app-spec-page .app-spec-inline-options.dash-options-list .dash-options-list-option {
  display: inline-block;
  margin-right: 16px;
}

/* ---- Card-styled named filter groups -------------------------------------
   The reference screenshots frame each NAMED wellPanel()-style group
   (Statutes, Basis, Issue, ...) in its own bordered card; a bare,
   unlabeled fluidRow() column (year pickers, the sidebar's own
   synthetic column) never gets this -- scoped to columns that actually
   carry a heading (app_spec_dash.py only adds this class then). */
.app-spec-page .app-spec-col-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

/* ---- Button system: one shared shape, three semantic roles ---------------
   Same shape language as EEO-1 Analytics' own .btn-primary/.btn-
   secondary (height/radius/padding/weight identical) -- only the
   surface differs per role, derived from each control's own REAL
   Action/ResetTrigger/DownloadSpec kind, never guessed from its label
   text alone:
     primary     Find/Run/Search/Apply -- the one action taken on
                 every visit, filled with the shared accent.
     secondary   Clear/Reset/Download -- plain white surface, bordered,
                 same footprint as primary so a row of buttons lines up.
     exit        Exit/session-close -- a quiet text link, never a
                 filled button (a destructive/navigating action, not a
                 data action), but still using the shared accent so it
                 reads as part of the same system, not a stray default
                 blue anchor. */
.app-spec-page .app-spec-btn-primary,
.app-spec-page .app-spec-btn-secondary {
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.app-spec-page .app-spec-btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.app-spec-page .app-spec-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.app-spec-page .app-spec-btn-secondary {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.app-spec-page .app-spec-btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}
.app-spec-page .app-spec-exit-link {
  color: var(--ink-soft);
  text-decoration: underline;
  font-size: 13px;
  font-weight: 600;
}
.app-spec-page .app-spec-exit-link:hover {
  color: var(--accent-hover);
}

/* ---- Typography hierarchy: title > group heading > field label > ---------
   ---- option/value text ----------------------------------------------------
   Four distinct real levels: the page's own title, a NAMED group's
   heading (a fluidRow()'s own heading -- "Fiscal Years" -- or a
   wellPanel()-style column heading -- Statutes/Basis/Issue), each
   field's own label (Case Type, Filed or Resolved, Basis Category),
   and finally each control's OWN option/value text (All/Systemic/
   Class/Individual, Disability/National Origin/...). Before this rule
   set every level rendered in the browser's own plain body weight/
   size, so a field label visually blended into its own options -- the
   source's real bold/plain-text mix drew this same distinction and
   this renderer's own default styling had lost it. Option text is
   styled via `.dash-options-list-option-text`, the installed Dash
   RadioItems/Checklist's own default classNames -- scoped the same
   way this file's nested-tab/inline-options rules already scope
   Dash's own defaults (see the header comment above). Colors read from
   the SAME --ink/--ink-soft tokens as every other surface in this
   file -- not a separate palette for text specifically. */
.app-spec-page > h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 16px;
  color: var(--ink);
}
.app-spec-page .app-spec-row-heading,
.app-spec-page .app-spec-row-heading b,
.app-spec-page .app-spec-col-card > b:first-child {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.app-spec-page .app-spec-row-heading {
  margin: 20px 0 10px;
}
.app-spec-page .app-spec-col-card > b:first-child {
  margin: 0 0 10px;
}
.app-spec-page .app-spec-field-label {
  display: block;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink);
  margin: 0 0 6px;
}
.app-spec-page .app-spec-field {
  margin-bottom: 14px;
}
.app-spec-page .app-spec-field:last-child {
  margin-bottom: 0;
}
.app-spec-page .app-spec-filters > .app-spec-row {
  margin-bottom: 18px;
}
.app-spec-page .dash-options-list-option-text {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink);
}
/* Inputs/dropdowns: one shared control height, matching EEO-1
   Analytics' own 34px text inputs/dash-dropdown -- an unstyled browser-
   default control (any height, thin 1980s-era border) is exactly the
   "legacy Bootstrap default" look this checkpoint replaces. */
.app-spec-page input[type=text],
.app-spec-page .dash-textarea,
.app-spec-page .DateInput_input {
  height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.app-spec-page .dash-dropdown-wrapper { min-height: var(--control-height); }
.app-spec-page .dash-dropdown {
  min-height: var(--control-height) !important;
  border-radius: 8px !important;
  border-color: var(--line) !important;
  font-size: 13px !important;
}
.app-spec-page .dash-options-list-option {
  margin-bottom: 4px;
}
/* Kept in the DOM for a screen reader (the source's own real label,
   or its id when the source left it empty) even where the group
   heading right above already shows the same context visually --
   never removed, only visually suppressed. Standard "sr-only" clip
   technique -- zero footprint in normal (sighted) layout. */
.app-spec-page .app-spec-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Business notes and output-section headings ---------------------
   TextBlock's own two real, source-declared shapes: a note/help box
   (ARC Admin's real wellPanel()-wrapped "Charges filed before
   1/1/2016..." warnings -- a real business caveat, rendered as a
   proper callout card, never loose text) and a section heading
   interspersed among a tab's own outputs (ARC Admin's real "To Legal"/
   "Completed"/"Time to Completion", each immediately above its own
   table). Both read their color from the SAME --ink/--line tokens
   every other surface in this file uses -- an info callout is still
   part of the SAME design system, not a separately-colored alert
   widget. */
.app-spec-page .app-spec-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px 0 14px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  max-width: 60ch;
}
.app-spec-page .app-spec-output-heading {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 18px 0 8px;
}
.app-spec-page .app-spec-output-heading:first-child {
  margin-top: 0;
}

/* ---- Narrow viewport: stack instead of squeezing two columns ------------
   Main content always keeps the full remaining width above this
   breakpoint (flex: 1 1 0% on the content column, set inline); below
   it, a side-by-side sidebar/content split stops being usable at all,
   so it stacks like the rest of this renderer's filters already do. */
@media (max-width: 720px) {
  .app-spec-page .app-spec-sidebar-layout {
    flex-direction: column;
  }
  .app-spec-page .app-spec-sidebar-layout .app-spec-col {
    flex: 1 1 auto !important;
  }
}