/*
 * Aura Owner -- Dashboard UI redesign (presentation-only pass).
 *
 * Three additions layered on top of the existing Dashboard Interactive
 * Kit (charts.css): the KPI hero band, the department cards + their
 * click-to-open function panel, and the chart-palette switcher control.
 * Same discipline as every other stylesheet here: colors exclusively via
 * var(--aura-*) tokens (tokens.css), logical properties (inline-size,
 * margin-inline-*, inset-inline-*, padding-block) so RTL needs no
 * separate rules, and every animation respects prefers-reduced-motion.
 */

/* =========================================================================
   KPI hero band
   ------------------------------------------------------------------------
   A curated, permission-filtered subset of the SAME charts.stat_tile()
   markup already used elsewhere on this page (dashboard/index.html) --
   this file only makes that markup bigger and more prominent when it
   lives inside .aura-kpi-hero. It does not define a new visual component;
   .aura-stat-tile's own rules (charts.css) still apply underneath.
   ========================================================================= */
.aura-kpi-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--aura-space-4);
  margin-block-end: var(--aura-space-5);
}
.aura-kpi-hero .aura-stat-tile {
  padding: var(--aura-space-5) var(--aura-space-4);
  border-inline-start-width: 4px;
  gap: var(--aura-space-2);
  position: relative;
  overflow: hidden;
  box-shadow: var(--aura-shadow-sm);
  transition: transform var(--aura-motion-fast) var(--aura-ease-standard),
              box-shadow var(--aura-motion-fast) var(--aura-ease-standard),
              border-color var(--aura-motion-fast) var(--aura-ease-standard);
}
/* Subtle accent glow keyed to the card's own tone, sitting behind the
   content (z-index left at the stacking-context default, painted before
   the text because it comes first in source order and has no z-index of
   its own to lift it above the value/label). Purely decorative --
   aria-hidden is unnecessary since it is not an element, just a
   ::before background layer. */
.aura-kpi-hero .aura-stat-tile::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -20%;
  inline-size: 140px;
  block-size: 140px;
  border-radius: var(--aura-radius-full);
  background: radial-gradient(circle, var(--aura-color-brand-primary-soft) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.aura-kpi-hero .aura-stat-tile--warning::before { background: radial-gradient(circle, var(--aura-color-warning-soft) 0%, transparent 70%); }
.aura-kpi-hero .aura-stat-tile--success::before { background: radial-gradient(circle, var(--aura-color-success-soft) 0%, transparent 70%); }
.aura-kpi-hero .aura-stat-tile--danger::before { background: radial-gradient(circle, var(--aura-color-danger-soft) 0%, transparent 70%); }
.aura-kpi-hero .aura-stat-tile__value {
  font-size: var(--aura-font-size-2xl);
  position: relative;
}
.aura-kpi-hero .aura-stat-tile__label,
.aura-kpi-hero .aura-stat-tile__hint {
  position: relative;
}
.aura-kpi-hero a.aura-stat-tile:hover,
.aura-kpi-hero a.aura-stat-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--aura-shadow-lg);
}
.aura-kpi-hero .aura-stat-tile:focus-visible {
  outline: var(--aura-border-width-md) solid var(--aura-color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .aura-kpi-hero a.aura-stat-tile { transition: none; }
  .aura-kpi-hero a.aura-stat-tile:hover,
  .aura-kpi-hero a.aura-stat-tile:focus-visible { transform: none; }
}

/* =========================================================================
   Department cards
   ------------------------------------------------------------------------
   <details class="aura-dept-card"><summary>...</summary><div
   class="aura-dept-card__panel">...</div></details> -- native disclosure
   semantics, so a card opens/closes (and its links become reachable) with
   zero JavaScript; static/js/dept-cards.js only layers the View
   Transition + focus-management/Escape polish on top (see that file's own
   header comment). Colour-per-department comes from a --aura-dept-color
   custom property set by the .aura-dept-card--<slug> modifier classes
   below, drawn from the same --aura-chart-cat-* ramp the charts use --
   so the department cards repaint too when the chart-palette switcher
   changes ramps, instead of owning a second, disconnected colour set.
   ========================================================================= */
.aura-dept-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--aura-space-4);
  margin-block-end: var(--aura-space-5);
}

.aura-dept-card--overview    { --aura-dept-color: var(--aura-chart-cat-1); }
.aura-dept-card--crm         { --aura-dept-color: var(--aura-chart-cat-4); }
.aura-dept-card--sales       { --aura-dept-color: var(--aura-chart-cat-2); }
.aura-dept-card--finance-ops { --aura-dept-color: var(--aura-chart-cat-5); }
.aura-dept-card--licensing   { --aura-dept-color: var(--aura-chart-cat-3); }
.aura-dept-card--management  { --aura-dept-color: var(--aura-chart-cat-7); }
.aura-dept-card--system      { --aura-dept-color: var(--aura-chart-cat-6); }

.aura-dept-card {
  background: var(--aura-color-surface-raised);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-lg);
  overflow: hidden;
}
/* The browser's own disclosure triangle is redundant with the chevron
   this component draws itself (see __chevron below) and looks
   inconsistent across browsers -- suppress it the standards way. */
.aura-dept-card > summary { list-style: none; }
.aura-dept-card > summary::-webkit-details-marker { display: none; }

.aura-dept-card__summary {
  display: flex;
  align-items: center;
  gap: var(--aura-space-3);
  padding: var(--aura-space-4);
  cursor: pointer;
  border-inline-start: 4px solid var(--aura-dept-color);
  transition: background var(--aura-motion-fast) var(--aura-ease-standard),
              transform var(--aura-motion-fast) var(--aura-ease-standard);
}
.aura-dept-card__summary:hover { background: var(--aura-color-surface-muted); }
.aura-dept-card__summary:focus-visible {
  outline: var(--aura-border-width-md) solid var(--aura-color-focus-ring);
  outline-offset: -2px;
}
.aura-dept-card:hover .aura-dept-card__summary { transform: translateY(-2px); }

.aura-dept-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--aura-radius-md);
  /* Fallback for browsers without color-mix() support -- an invalid
     value on the second declaration leaves this one standing. */
  background: var(--aura-color-surface-muted);
  background: color-mix(in srgb, var(--aura-dept-color) 16%, transparent);
  color: var(--aura-dept-color);
}
.aura-dept-card__icon svg { inline-size: var(--aura-icon-lg); block-size: var(--aura-icon-lg); }

.aura-dept-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  flex: 1 1 auto;
}
.aura-dept-card__name {
  font-weight: var(--aura-font-weight-semibold);
  color: var(--aura-color-text-primary);
}
.aura-dept-card__count {
  font-size: var(--aura-font-size-xs);
  color: var(--aura-color-text-muted);
}

.aura-dept-card__chevron {
  flex: 0 0 auto;
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid var(--aura-color-text-muted);
  border-block-end: 2px solid var(--aura-color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--aura-motion-fast) var(--aura-ease-standard);
}
.aura-dept-card[open] .aura-dept-card__chevron { transform: rotate(-135deg); }

.aura-dept-card__panel {
  padding: 0 var(--aura-space-4) var(--aura-space-4);
  border-block-start: 1px solid var(--aura-color-border-default);
  padding-block-start: var(--aura-space-3);
}
.aura-dept-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-1);
}
.aura-dept-card__list a {
  display: block;
  padding: var(--aura-space-2) var(--aura-space-2);
  border-radius: var(--aura-radius-sm);
  color: var(--aura-color-text-primary);
  text-decoration: none;
  font-size: var(--aura-font-size-sm);
}
.aura-dept-card__list a:hover { background: var(--aura-color-surface-muted); color: var(--aura-dept-color); }
.aura-dept-card__list a:focus-visible {
  outline: var(--aura-border-width-md) solid var(--aura-color-focus-ring);
  outline-offset: -2px;
}

/* Entrance animation for the panel's content, transform/opacity only
   (compositor-friendly). This is a CSS @keyframes *animation*, not a
   *transition* -- animations restart when an element re-enters the
   render tree, which is exactly what happens when native <details>
   flips from `display: none` (closed) to visible (open), so this plays
   correctly with zero JavaScript. static/js/dept-cards.js's View
   Transition wrapper (when supported and motion is allowed) replaces
   the visual effect the browser shows for the toggle, but never disables
   this rule -- it is the graceful fallback for every browser that either
   lacks document.startViewTransition or has reduced motion requested,
   and the prefers-reduced-motion guard below applies to it either way. */
.aura-dept-card[open] .aura-dept-card__panel {
  animation: aura-dept-panel-in var(--aura-motion-base) var(--aura-ease-decelerate);
}
@keyframes aura-dept-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .aura-dept-card__summary,
  .aura-dept-card:hover .aura-dept-card__summary,
  .aura-dept-card__chevron { transition: none; transform: none; }
  .aura-dept-card[open] .aura-dept-card__panel { animation: none; }
}

/* =========================================================================
   Chart palette switcher control
   ------------------------------------------------------------------------
   Same three-button toggle-group visual language as the topbar's
   .aura-theme-switch (shell.css) -- deliberately reused rather than
   invented, so "a row of pressed/unpressed buttons" reads the same way
   everywhere in the app.
   ========================================================================= */
.aura-chart-palette-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-2);
  margin-block-end: var(--aura-space-4);
  flex-wrap: wrap;
}
.aura-chart-palette-switch__label {
  font-size: var(--aura-font-size-sm);
  color: var(--aura-color-text-secondary);
}
.aura-chart-palette-switch__group {
  display: inline-flex;
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  overflow: hidden;
}
.aura-chart-palette-switch__btn {
  background: var(--aura-color-surface-raised);
  color: var(--aura-color-text-secondary);
  border: none;
  border-inline-start: 1px solid var(--aura-color-border-default);
  padding: 0.35rem 0.6rem;
  font-size: var(--aura-font-size-xs);
  cursor: pointer;
}
.aura-chart-palette-switch__btn:first-child { border-inline-start: none; }
.aura-chart-palette-switch__btn:focus-visible {
  outline: var(--aura-border-width-md) solid var(--aura-color-focus-ring);
  outline-offset: -2px;
}
.aura-chart-palette-switch__btn[aria-pressed="true"] {
  background: var(--aura-color-brand-primary-soft);
  color: var(--aura-color-brand-primary);
  font-weight: var(--aura-font-weight-medium);
}