/*
 * theme_scope.css — Theme Boundary & Resets
 * ==========================================
 * Defines what .themed is allowed to affect.
 * No global element overrides.
 * All rules MUST be prefixed with .themed.
 *
 * GOVERNED BY: CLAUDE_UI_LOCK.md
 */

/* =============================================================================
   BODY-LEVEL THEME SCOPE
   ============================================================================= */

/* Apply canvas background and base font when theme is active */
.themed {
  background-color: var(--color-canvas);
  color: var(--color-text-base);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Universal box-sizing within theme scope */
.themed *,
.themed *::before,
.themed *::after {
  box-sizing: border-box;
}

/* =============================================================================
   LINK BASELINE
   ============================================================================= */

.themed a {
  color: var(--color-text-link);
  text-decoration: none;
}

.themed a:hover {
  color: var(--color-text-link-hover);
}

/* =============================================================================
   SCROLLBAR REFINEMENT (Webkit)
   ============================================================================= */

.themed ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.themed ::-webkit-scrollbar-track {
  background: var(--color-surface-muted);
}

.themed ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

.themed ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}

/* =============================================================================
   FOCUS RING (Accessibility)
   ============================================================================= */

.themed :focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =============================================================================
   SELECTION
   ============================================================================= */

.themed ::selection {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

/* =============================================================================
   PRINT SCOPE — Theme resets for print
   ============================================================================= */

@media print {
  .themed {
    background-color: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .themed .t-sidebar,
  .themed .t-header,
  .themed .t-parent-navbar,
  /* Screen-only controls on a printable document (statement of account). The
     browser's own Print must produce the same sheet as the PDF button, so the
     back link and the two buttons come off. This is the one file R10 sanctions
     `!important` in, and only for print. */
  .themed .t-print-hide,
  .themed .no-print {
    display: none !important;
  }

  .themed .t-page-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* =============================================================================
   HTMX INDICATOR REFINEMENTS
   (Scoped to .themed — does not override global HTMX behavior)
   ============================================================================= */

.themed .htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.themed .htmx-request .htmx-indicator {
  display: inline-flex;
  opacity: 1;
}

.themed .htmx-request .htmx-indicator-opposite {
  display: none;
}

/* =============================================================================
   ALPINE.JS CLOAK
   ============================================================================= */

.themed [x-cloak] {
  display: none !important;
}