/* analytics_html — the SLA view container (Monthlies / Interims sub-tabs).
 *
 * A head-linked asset, because the Anvil server strips the text out of a
 * <style> in a template. The selector preludes are set out here.
 *
 * THE SUBJECT IS THIS FORM'S OWN ROOT, unlike the two dashboards it holds.
 * `.analytics-parent` is the template's single top-level element, so it is the
 * converted form's root, and everything these rules name is inside it.
 *
 * Four kinds of prelude:
 *
 *  1. inside the root — `:where(.analytics-parent) <selector>`, which adds no
 *     specificity and so cannot change which rule wins. That covers the
 *     sub-tab family and both `#sla-dashboard-content` rules.
 *  2. the root itself — `.analytics-parent`: BARE, because the subject IS the
 *     scope.
 *  3. every `[data-theme="dark"]` arm: BARE, so each keeps the (0,2,0) or
 *     (0,3,0) edge over its light-mode twin that it has today.
 *  4. the three slot rules — see below.
 *
 * THE THREE SLOT RULES NAME A CLASS, NOT AN ATTRIBUTE.
 * `<anvil-slot name="default">` compiles to an unclassed `<anvil-dropzone>`
 * with no attribute to select on, so an attribute selector would silently
 * match nothing and the flex box the child dashboard's whole height chain
 * resolves against would disappear with no error. The host div carries the
 * private class `.analytics-slot-host` (declared nowhere else in the estate),
 * with the slot element inside it, and the three rules name the class at
 * (0,2,0).
 *
 * The depth the three rules read: host div > `<anvil-dropzone>` > the child
 * form's root. The `> *` rule lands on the dropzone, which is
 * `display: contents` and generates no box, and the `> * > *` rule lands on
 * the child root.
 *
 * No tie was found against `px_theme/_px_theme_css.py`, `_px_shared_js.py`,
 * `mar_editor/_pxmar_core_js.py` (PXM_SHARED_CSS) or the four host theme
 * assets: `.analytics-parent`, `.sla-subtabs`, `.sla-subtab`,
 * `#sla-dashboard-content` and `.analytics-slot-host` are declared in this
 * file and nowhere else in the estate. `.px-loading-overlay`, `-spinner` and
 * `-text` in the template are the toolkit's own classes and this form styles
 * none of them; it only sets `--px-loading-accent` on the root, which is an
 * inherited custom property and not a rule that can tie.
 *
 * No `@keyframes` and no `url()` here, so there is nothing to prefix and no
 * relative path to rewrite. No designer gate: nothing here hides content
 * until JavaScript runs.
 */

/* Analytics Parent Form - Sub-tab Styles */

/* ========================================
   DARK MODE
   ======================================== */
[data-theme="dark"] .analytics-parent {
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-subtle: rgba(245, 158, 11, 0.5);
  --accent-text: #422006;
}

[data-theme="dark"] .sla-subtabs {
  background: var(--px-bg-elevated);
  border-color: var(--px-border);
}

[data-theme="dark"] .sla-subtab {
  color: var(--px-text-secondary);
}

[data-theme="dark"] .sla-subtab.active {
  background: var(--px-bg-card);
  color: var(--accent-hover);
}

[data-theme="dark"] .sla-subtab.disabled {
  color: var(--px-text-muted);
}

/* ========================================
   PARENT CONTAINER
   ======================================== */
.analytics-parent {
  --accent: #d97706;
  --accent-hover: #f59e0b;
  --accent-subtle: rgba(217, 119, 6, 0.25);
  --accent-text: #422006;
  --px-loading-accent: #d97706;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: var(--px-bg-deep);
}

:where(.analytics-parent) #sla-dashboard-content {
  width: 100% !important;
}

/* ========================================
   SUB-TAB STYLES - Positioned at top center
   ======================================== */
:where(.analytics-parent) .sla-subtabs-container {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  margin: 0;
}

:where(.analytics-parent) .sla-subtabs {
  display: flex;
  gap: 4px;
  background: var(--px-bg-elevated);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--px-border);
  box-shadow: var(--px-shadow), var(--px-shadow-md);
}

:where(.analytics-parent) .sla-subtab {
  font-family: var(--px-font);
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  background: transparent;
  color: var(--px-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:where(.analytics-parent) .sla-subtab:hover:not(.disabled) {
  background: var(--accent-subtle);
}

:where(.analytics-parent) .sla-subtab.active {
  background: var(--px-bg-card);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:where(.analytics-parent) .sla-subtab.disabled {
  color: var(--px-text-muted);
  cursor: not-allowed;
  opacity: 0.4;
}

/* ========================================
   CONTENT AREA
   ======================================== */
:where(.analytics-parent) #sla-dashboard-content {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.analytics-parent > .analytics-slot-host {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.analytics-parent > .analytics-slot-host > * {
  flex: 1 1 auto;
  min-height: 0;
}

.analytics-parent .analytics-slot-host > * > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  :where(.analytics-parent) .sla-subtabs-container {
    padding: 8px 16px 0;
  }
  :where(.analytics-parent) .sla-subtab {
    padding: 6px 14px;
    font-size: 11px;
  }
}