/* ===== dashboards_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule here comes
   from the form's old <style> block; nothing was added, removed or reordered,
   apart from the selector rewrites named below.

   SCOPED ON .dashboards-parent, which is the form's own adopted root: it was
   already the only top-level element in the template, so no wrapper was added.
   Every rule is wrapped :where(.dashboards-parent), which contributes zero
   specificity, so no rule changes rank. Three kinds of rule stay as they are,
   because they already name the scope root and wrapping one would drop a class
   it needs: the bare .dashboards-parent root rule, [data-theme="dark"]
   .dashboards-parent, and the three slot rules below.

   THE THREE [anvil-slot="default"] REWRITES. A converted slot is an
   <anvil-slot> ELEMENT inside a mount div, not an attribute on the slot div,
   so an [anvil-slot="default"] selector matches nothing. The mount div carries
   .dash-default-mount, which is (0,1,0). What each one lands on
   afterwards is NOT the same element, so it is traced rather than assumed:

     today   .dashboards-parent > div[anvil-slot="default"]
                                > div.anvil-html-templated-panel > CHILD ROOT
     after   .dashboards-parent > div.dash-default-mount
                                > <anvil-dropzone>              > CHILD ROOT

     > .dash-default-mount        the slot div, same element, same place
     > .dash-default-mount > *    the <anvil-dropzone>, which computes
                                  display: contents and generates no box, so
                                  flex and min-height do nothing there. That
                                  costs nothing, because the next rule lands on
                                  the element that now matters.
       .dash-default-mount > * > *  the CHILD ROOT, same depth as today. The
                                  dropzone generates no box, so the child root
                                  is the flex item of .dash-default-mount and
                                  this rule hands it the same two declarations
                                  the wrapper holds today.

   .carousel-slide-out-left and .carousel-slide-in-right are scoped like
   everything else. They land on the child root (.mp-root / .ad-root), which is
   inside .dash-default-mount, which is inside .dashboards-parent, so the scope
   still matches. The class names themselves are added from Python and do not
   change.

   @keyframes slideOutLeft and slideInRight are RENAMED dash-slideOutLeft and
   dash-slideInRight, and the two animation: idents are rewritten to match.
   @keyframes is a global namespace and those two names are exactly the kind
   that collide across screens. Checked first: these two rules are the only
   users anywhere in this app or the dependency.

   .carousel-controls { display: none } and .carousel-controls.visible
   { display: flex } are written as they are. The reveal rule is one class
   heavier, (0,2,0) against (0,1,0), so it wins on specificity and needs no
   display compound.

   #dash-dashboard-content is declared TWICE in the source, once with
   width: 100% !important and once with width/flex/min-height. Both move, in
   the same order relative to each other, and neither is merged.

   No url(), no @font-face, no :root block and no html rule in this block. No
   .px-* class is declared here -- px-anvil-reset, px-loading-overlay,
   px-loading-spinner and px-loading-text are USED and never declared -- so
   there is no shared-name violation and no order tie with the dependency's
   runtime-injected theme.

   NO DESIGNER GATE, and there is nothing to gate. The designer runs no Python,
   so a rule that hides content until JavaScript runs would leave the canvas
   showing empty panels -- but every node this screen hides is either
   JS-generated (#dash-dashboard-content is written by the monthlies render) or
   already hidden on today's canvas: .carousel-controls { display: none } lives
   in the template <style> the designer keeps, so nothing is lost by it moving
   here.

   FAIL LOUD, AND CAUGHT NOWHERE. A missing element throws out of
   analytics.mjs, through the Python call site, into the app's error handling.
   Decided once for the whole analytics section. */

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

/* ========================================
   DARK MODE
   ======================================== */
[data-theme="dark"] .dashboards-parent {
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-subtle: rgba(59, 130, 246, 0.5);
}

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

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

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

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

/* ========================================
   PARENT CONTAINER
   ======================================== */
.dashboards-parent {
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --accent-subtle: rgba(37, 99, 235, 0.25);
  --px-loading-accent: #2563eb;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: var(--px-bg-deep);
}

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

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

:where(.dashboards-parent) .dash-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(.dashboards-parent) .dash-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(.dashboards-parent) .dash-subtab:hover:not(.disabled) {
  background: var(--accent-subtle);
}

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

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

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

.dashboards-parent > .dash-default-mount {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dashboards-parent > .dash-default-mount > * {
  flex: 1 1 auto;
  min-height: 0;
}

.dashboards-parent .dash-default-mount > * > * {
  flex: 1 1 auto;
  min-height: 0;
}

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

/* ========================================
   CAROUSEL CONTROLS
   ======================================== */
:where(.dashboards-parent) .carousel-controls {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 20px;
  font-family: var(--px-font);
}

:where(.dashboards-parent) .carousel-controls.visible {
  display: flex;
}

:where(.dashboards-parent) .carousel-speed-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--px-text-secondary);
  white-space: nowrap;
}

:where(.dashboards-parent) .carousel-speed-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--px-font);
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  text-align: center;
}

:where(.dashboards-parent) .carousel-speed-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

:where(.dashboards-parent) .carousel-pause-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  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;
}

:where(.dashboards-parent) .carousel-pause-btn:hover {
  background: var(--px-bg-elevated);
  border-color: var(--accent);
}

/* ========================================
   CAROUSEL SLIDE ANIMATIONS
   ======================================== */
:where(.dashboards-parent) .carousel-slide-out-left {
  animation: dash-slideOutLeft 400ms ease-in-out forwards;
}

:where(.dashboards-parent) .carousel-slide-in-right {
  animation: dash-slideInRight 400ms ease-in-out forwards;
}

@keyframes dash-slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes dash-slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}