/* ============================================================
   Studio Manager Display — Design System
   Loaded after branding.css; provides --ds-* tokens + .ds-btn
   ============================================================ */

:root {
  /* Surfaces (no pure black) */
  --ds-surface-app: #0c0c0f;
  --ds-surface-raised: #161618;
  --ds-surface-card: #1c1c1f;
  --ds-surface-elevated: #242427;

  /* Semantic surfaces (avoid var() cycles with --border in templates) */
  --ds-border: rgba(255, 255, 255, 0.09);
  --ds-border-mid: var(--border-mid, #222);

  /* Text tokens: DIRECT hex values only. Referencing back into
     --text-primary / --text-muted here used to create a var() cycle
     that made properties like `.studio-bk { color: var(--text-muted) }`
     fall through to the UA default (near-black) on the dark surface. */
  --ds-text-1: #ffffff;
  --ds-text-2: #d1d1d6;
  --ds-text-muted: #a1a1a6;

  /* Status */
  --ds-green: var(--green, #5a8f6e);
  --ds-amber: var(--amber, #ff9f0a);
  --ds-red: var(--red, #ff453a);
  --ds-blue: var(--blue, #0a84ff);

  /* Spacing scale */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;

  /* Radius */
  --ds-r-sm: 6px;
  --ds-r: 10px;
  --ds-r-lg: 14px;
  --ds-r-pill: 999px;

  /* Shadows */
  --ds-shadow-1: 0 2px 12px rgba(0, 0, 0, 0.35);
  --ds-shadow-2: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* ── Bridge: tokens used by dashboard templates / Lane A+B ── */
  --ds-bg-app: var(--ds-surface-app);
  --ds-bg-raised: var(--ds-surface-raised);
  --ds-bg-card: var(--ds-surface-card);
  --ds-bg-elevated: var(--ds-surface-elevated);
  --ds-text: var(--ds-text-1);
  --ds-text-secondary: var(--ds-text-2);
  --ds-accent: var(--accent, #5a8f6e);
  --ds-accent-hover: color-mix(in srgb, var(--ds-accent) 88%, #fff);
  --ds-accent-subtle: color-mix(in srgb, var(--ds-accent) 22%, transparent);
  --ds-success: #5a8f6e;
  --ds-warning: #ff9f0a;
  --ds-danger: #ff453a;
  --ds-info: #5ac8fa;
  --ds-radius-xs: var(--ds-r-sm);
  --ds-radius-sm: 8px;
  --ds-radius-md: var(--ds-r-lg);
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-shadow-sm: var(--ds-shadow-1);
  --ds-shadow-md: var(--ds-shadow-2);
  --ds-font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-mono: "DM Mono", ui-monospace, monospace;
  --ds-speed: 0.18s;
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-page-pad: var(--ds-space-4);

  /* Legacy names — inline styles in index.html */
  --bg-base: var(--ds-bg-app);
  --bg-screen: var(--ds-bg-raised);
  --bg-card: var(--ds-bg-card);
  --bg-elevated: var(--ds-bg-elevated);
  --border: var(--ds-border);
  --border-mid: var(--ds-border-mid);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-secondary);
  --text-muted: var(--ds-text-muted);
  /* Lightened from the old #636366 — previous value failed AA on
     #0c0c0f and read as near-black for tiny labels like
     `.card-label`, `.card-sub`, and `.studio-name`. */
  --text-faint: #8e8e93;
  --text-dimmed: #a1a1a6;
  --green: var(--ds-accent);
  --elev-1: var(--ds-shadow-sm);
  --elev-2: var(--ds-shadow-md);
  --r: var(--ds-radius-md);
  --rs: var(--ds-radius-sm);
  --blur: blur(20px);
  --font-display: var(--ds-font);
}

html {
  background-color: var(--ds-bg-app);
}
body.ps713-dashboard {
  background-color: var(--ds-bg-app) !important;
  color: var(--ds-text);
  font-family: var(--ds-font);
}

/* ── Button system ───────────────────────────────────────── */

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--ds-r);
  font:
    600 13px/1 inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    opacity 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.ds-btn svg {
  flex-shrink: 0;
}

/* Primary — accent fill */
.ds-btn.ds-btn--primary {
  background: var(--accent, #5a8f6e);
  color: #fdfcfa;
  border-color: transparent;
}
.ds-btn.ds-btn--primary:hover {
  filter: brightness(1.08);
}
.ds-btn.ds-btn--primary:active {
  filter: brightness(0.94);
}

/* Secondary — subtle fill */
.ds-btn.ds-btn--secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ds-text-2);
  border-color: rgba(255, 255, 255, 0.1);
}
.ds-btn.ds-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.11);
}

/* Ghost — outline only */
.ds-btn.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text-2);
  border-color: var(--ds-border-mid);
}
.ds-btn.ds-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Danger */
.ds-btn.ds-btn--danger {
  background: rgba(255, 69, 58, 0.15);
  color: var(--ds-red);
  border-color: rgba(255, 69, 58, 0.3);
}
.ds-btn.ds-btn--danger:hover {
  background: rgba(255, 69, 58, 0.22);
}

/* Focus ring */
.ds-btn:focus-visible {
  outline: 2px solid var(--accent, #5a8f6e);
  outline-offset: 2px;
}

/* Icon-only size */
.ds-btn.ds-btn--icon {
  padding: 8px;
  width: 36px;
  height: 36px;
  justify-content: center;
}

/* Small */
.ds-btn.ds-btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ── Section tabs ────────────────────────────────────────── */

.section-tab-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: var(--ds-space-4);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-tab-bar::-webkit-scrollbar {
  display: none;
}

.section-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  font:
    500 13px/1 inherit;
  color: var(--ds-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}
.section-tab:hover {
  color: var(--ds-text-2);
}
.section-tab.active,
.section-tab[aria-selected="true"] {
  color: var(--ds-text-1);
  border-bottom-color: var(--accent, #5a8f6e);
  font-weight: 600;
}

.section-tab-panel {
  display: none;
}
.section-tab-panel.active {
  display: contents;
}

/* ── KPI icon helper ─────────────────────────────────────── */

.kpi-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 5px;
  opacity: 0.7;
}
.kpi-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.25;
}

/* ── Nav refinements ─────────────────────────────────────── */

.nav-tool-btn.ds-btn {
  padding: 7px;
  width: 34px;
  height: 34px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
  .section-tab-bar {
    margin-left: calc(-1 * var(--ds-space-4));
    margin-right: calc(-1 * var(--ds-space-4));
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }

  .section-tab {
    padding: 10px 14px;
    font-size: 12px;
  }

  .ds-btn {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ============================================================
   Compatibility — cards, nav, hero KPI, skeletons (Lane A+B)
   ============================================================ */

body.ps713-dashboard > nav {
  background: var(--ds-bg-raised);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
body.ps713-dashboard .nav-link {
  border-radius: var(--ds-radius-sm);
  transition:
    color var(--ds-speed) var(--ds-ease),
    background var(--ds-speed) var(--ds-ease),
    box-shadow var(--ds-speed) var(--ds-ease);
}
body.ps713-dashboard .nav-link:hover {
  color: var(--ds-text);
  background: rgba(255, 255, 255, 0.06);
}
body.ps713-dashboard .nav-link.active {
  color: var(--ds-text);
  background: var(--ds-accent-subtle);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-accent) 45%, transparent);
}
body.ps713-dashboard .nav-tool-btn {
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--ds-radius-sm);
}
body.ps713-dashboard .nav-tool-btn:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}
body.ps713-dashboard .nav-tool-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-muted);
}
body.ps713-dashboard .nav-tool-btn:hover .nav-tool-ic {
  color: var(--ds-text);
}

body.ps713-dashboard .card {
  background: var(--ds-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--ds-radius-md);
  box-shadow: none;
  transition:
    border-color var(--ds-speed) var(--ds-ease),
    background var(--ds-speed) var(--ds-ease),
    box-shadow var(--ds-speed) var(--ds-ease),
    transform var(--ds-speed) var(--ds-ease);
}
body.ps713-dashboard .card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--ds-bg-elevated);
  box-shadow: var(--ds-shadow-sm);
}

body.ps713-dashboard .home-kpi .card,
body.ps713-dashboard .studio-card {
  border-color: rgba(255, 255, 255, 0.09);
}

body.ps713-dashboard .btn-blue {
  background: var(--ds-info);
  color: #0a0a0c;
}
body.ps713-dashboard .btn-blue:hover {
  filter: brightness(1.08);
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}

.ds-page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-2);
}
.ds-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.m-nav-icon svg {
  stroke: currentColor;
}
.m-nav-item.active .m-nav-icon {
  color: var(--ds-accent);
}

/* Home hero KPI */
.home-kpi-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-4);
}
.home-hero-card {
  padding: var(--ds-space-5) var(--ds-space-5) !important;
  border-radius: var(--ds-radius-xl) !important;
  background: linear-gradient(
    165deg,
    var(--ds-bg-elevated) 0%,
    color-mix(in srgb, var(--ds-bg-card) 92%, var(--ds-accent) 8%) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--ds-accent) 22%, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: var(--ds-shadow-md) !important;
}
.home-hero-card .card-label {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  opacity: 0.9;
  margin-bottom: var(--ds-space-3) !important;
}
.home-hero-card #s-month.home-hero-value,
.home-hero-card .home-hero-value.card-value {
  font-size: clamp(2rem, 6vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}
.home-hero-card .card-sub {
  font-size: 13px !important;
  color: var(--ds-text-muted) !important;
  margin-top: var(--ds-space-3) !important;
}
.home-kpi-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ds-space-3);
  align-items: stretch;
}
.home-kpi-secondary .card {
  padding: var(--ds-space-4) !important;
}
.home-kpi-secondary .card-value {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
}
@media (max-width: 900px) {
  .home-kpi-secondary {
    grid-template-columns: 1fr;
  }
}

.ds-il-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--ds-text-muted);
}
.ds-il-icon svg {
  stroke: currentColor;
}

/* Skeleton loading */
.ds-skeleton {
  padding: var(--ds-space-4) 0;
  animation: dsSkelFade 0.3s ease;
}
@keyframes dsSkelFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ds-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: dsSkelPulse 1.2s ease-in-out infinite;
  margin-bottom: 10px;
}
.ds-skel-line--lg {
  height: 18px;
}
.ds-skel-line--sm {
  height: 10px;
  width: 55%;
}
@keyframes dsSkelPulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.ds-skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ds-skel-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--ds-space-3);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ds-skel-row:last-child {
  border-bottom: none;
}
.ds-skel-pill {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  animation: dsSkelPulse 1.2s ease-in-out infinite;
}
.ds-skeleton-util {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-3);
}
@media (min-width: 769px) {
  .ds-skeleton-util {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ds-skel-util-card {
  height: 120px;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  animation: dsSkelPulse 1.2s ease-in-out infinite;
}
.ds-skeleton-table-wrap {
  overflow: hidden;
}
.ds-skel-thead {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-2);
  padding-bottom: var(--ds-space-3);
  margin-bottom: var(--ds-space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ds-skel-thead span {
  height: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  animation: dsSkelPulse 1.2s ease-in-out infinite;
}
.ds-skeleton-caption {
  font-size: 11px;
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-2);
}