/*
 * Finance Workspace — embedded module styles.
 *
 * This module renders INSIDE the Building OS shell (Module Federation),
 * which already supplies the app chrome (sidebar, header, page padding)
 * and the design-system tokens. So everything here is:
 *   1. Content-only  — no global body/:root/html resets, no own sidebar.
 *   2. Scoped        — every rule lives under `.fw-root` so nothing
 *                      leaks into the host or sibling remotes.
 *   3. Token-driven  — colors reference the platform design tokens
 *                      (hsl channels from @tv/design-tokens) with light
 *                      fallbacks so the module also renders standalone
 *                      (`pnpm dev`) without the host present.
 */

.fw-root {
  /* Map host design tokens → local vars, with standalone fallbacks. */
  --fw-bg: hsl(var(--background, 60 27% 98%));
  --fw-fg: hsl(var(--foreground, 232 35% 11%));
  --fw-card: hsl(var(--card, 0 0% 100%));
  --fw-card-fg: hsl(var(--card-foreground, 232 35% 11%));
  --fw-primary: hsl(var(--primary, 35 94% 56%));
  --fw-primary-fg: hsl(var(--primary-foreground, 232 35% 11%));
  --fw-muted: hsl(var(--muted, 40 10% 90%));
  --fw-muted-fg: hsl(var(--muted-foreground, 236 6% 45%));
  --fw-border: hsl(var(--border, 232 35% 11% / 0.10));
  --fw-success: hsl(var(--success, 158 51% 47%));
  --fw-warning: hsl(var(--warning, 35 94% 56%));
  --fw-danger: hsl(var(--destructive, 9 73% 55%));
  --fw-ring: hsl(var(--ring, 43 100% 51%));

  --fw-radius: 12px;
  --fw-radius-sm: 8px;
  --fw-shadow: 0 1px 2px rgba(17, 21, 35, 0.04), 0 1px 3px rgba(17, 21, 35, 0.06);
  --fw-shadow-lg: 0 4px 12px rgba(17, 21, 35, 0.06), 0 2px 6px rgba(17, 21, 35, 0.05);
  --fw-transition: 150ms ease;

  color: var(--fw-fg);
  font-family: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.fw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.fw-header__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fw-fg);
  margin: 0;
}

.fw-header__subtitle {
  font-size: 14px;
  color: var(--fw-muted-fg);
  margin: 4px 0 0;
}

.fw-property-selector {
  background: var(--fw-card);
  border: 1px solid var(--fw-border);
  color: var(--fw-fg);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color var(--fw-transition), box-shadow var(--fw-transition);
}

.fw-property-selector:focus-visible {
  border-color: var(--fw-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-primary) 18%, transparent);
}

/* ── Tabs ────────────────────────────────────────────────────────────── */

.fw-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--fw-border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.fw-tab {
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fw-muted-fg);
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color var(--fw-transition);
}

.fw-tab:hover {
  color: var(--fw-fg);
}

.fw-tab--active {
  color: var(--fw-primary);
}

.fw-tab--active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--fw-primary);
}

/* ── KPI grid ────────────────────────────────────────────────────────── */

.fw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.fw-kpi-card {
  background: var(--fw-card);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  padding: 20px;
  box-shadow: var(--fw-shadow);
  transition: box-shadow var(--fw-transition), transform var(--fw-transition);
}

.fw-kpi-card:hover {
  box-shadow: var(--fw-shadow-lg);
  transform: translateY(-1px);
}

.fw-kpi-card__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fw-muted-fg);
  margin-bottom: 10px;
}

.fw-kpi-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fw-fg);
}

.fw-kpi-card__value--danger {
  color: var(--fw-danger);
}

.fw-kpi-card__trend {
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fw-trend--up {
  color: var(--fw-success);
}

.fw-trend--down {
  color: var(--fw-danger);
}

/* ── Table ───────────────────────────────────────────────────────────── */

.fw-panel {
  background: var(--fw-card);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  box-shadow: var(--fw-shadow);
  overflow: hidden;
}

.fw-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--fw-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--fw-fg);
}

.fw-table-scroll {
  overflow-x: auto;
}

.fw-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.fw-table th {
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fw-muted-fg);
  border-bottom: 1px solid var(--fw-border);
  white-space: nowrap;
}

.fw-table td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--fw-fg);
  border-bottom: 1px solid var(--fw-border);
  white-space: nowrap;
}

.fw-table tbody tr:last-child td {
  border-bottom: none;
}

.fw-table tbody tr {
  transition: background var(--fw-transition);
}

.fw-table tbody tr:hover {
  background: color-mix(in srgb, var(--fw-primary) 5%, transparent);
}

.fw-cell-id {
  font-family: 'SF Mono', 'Menlo', ui-monospace, monospace;
  font-size: 13px;
  color: var(--fw-muted-fg);
}

.fw-cell-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fw-cell-muted {
  color: var(--fw-muted-fg);
}

/* ── Status badge ────────────────────────────────────────────────────── */

.fw-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.fw-badge--paid,
.fw-badge--posted,
.fw-badge--cleared {
  background: color-mix(in srgb, var(--fw-success) 14%, transparent);
  color: var(--fw-success);
}

.fw-badge--pending,
.fw-badge--scheduled {
  background: color-mix(in srgb, var(--fw-warning) 16%, transparent);
  color: color-mix(in srgb, var(--fw-warning) 72%, #7a4a00);
}

.fw-badge--overdue,
.fw-badge--failed {
  background: color-mix(in srgb, var(--fw-danger) 12%, transparent);
  color: var(--fw-danger);
}

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

@media (max-width: 640px) {
  .fw-header__title {
    font-size: 20px;
  }
  .fw-kpi-card__value {
    font-size: 24px;
  }
}
/*$vite$:1*/