/*
 * app.css — Application-specific styles
 *
 * Conventions (AR-9):
 *   - All custom classes prefixed `fin-` (prevents Primer class name collision)
 *   - data-loading attribute pattern: JS sets element.dataset.loading = 'true'/'false'
 *     CSS attribute selectors handle visual feedback — no JS class manipulation needed
 *   - Primer CSS is loaded before this file; Primer is the base layer
 *
 * Load order in base.html:
 *   1. vendor/primer/primer.css  (foundation)
 *   2. css/tokens.css            (domain custom properties)
 *   3. css/app.css               (overrides and fin- classes)  ← this file
 */

/* ─── Loading state pattern (AR-16) ─────────────────────────────────── */
/*
 * JS (loading.js, Story 2.4): element.dataset.loading = 'true' to activate
 *
 * Required HTML structure:
 *   <div data-loading="false">
 *     <div class="fin-spinner"><!-- spinner markup --></div>
 *     <div class="fin-content"><!-- page content --></div>
 *   </div>
 *
 * Activation:  element.dataset.loading = 'true'   → content fades, spinner appears
 * Deactivation: element.dataset.loading = 'false'  → content normal, spinner hides
 */
.fin-spinner {
  display: none;
}

[data-loading="true"] .fin-content {
  opacity: 0.4;
  pointer-events: none;
}

[data-loading="true"] .fin-spinner {
  display: block;
}

/* ─── Flash messages (AR-14) ─────────────────────────────────────────── */
/*
 * Rendered by base.html for flash() messages.
 * Valid categories: success / error / warning / info (base class only, no modifier)
 * DO NOT add other categories — only these 4 are defined here and tested.
 */
.flash {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d0d7de);
}

.flash-success {
  border-color: var(--color-safe, #1a7f37);
  background: #dafbe1;
  color: var(--color-safe, #1a7f37);
}

.flash-error {
  border-color: var(--color-danger, #cf222e);
  background: #ffebe9;
  color: var(--color-danger, #cf222e);
}

.flash-warning {
  border-color: var(--color-warning, #9a6700);
  background: #fff8c5;
  color: var(--color-warning, #9a6700);
}

/* ─── Component semantic hooks (Story 2.2) ──────────────────────────── */
/*
 * fin- classes are applied by Jinja2 components in app/templates/components/.
 * Components use inline styles as visual placeholders (Story 2.2 intentional).
 * These empty rules serve as semantic hooks — future stories will add
 * Primer utility class equivalents here instead of inline styles.
 */
.fin-alert {}
.fin-alert-success {}
.fin-alert-error {}
.fin-alert-warning {}
.fin-alert-info {}

.fin-empty-state {}
.fin-page-header {}

.fin-stat-card {}
.fin-stat-label {}
.fin-stat-value {}
.fin-stat-delta {}

.fin-pagination {}

.fin-modal {}
.fin-modal-content {}

.fin-form-row {}
.fin-form-error {
  color: var(--color-danger, #cf222e);
}

.fin-progress-bar {}
.fin-progress-bar-safe {}
.fin-progress-bar-warning {}
.fin-progress-bar-danger {}