/* ==========================================================================
   Coterya — coterya.css | Compléments au Tailwind CDN + tokens.css
   - Tabular-nums, badges status, cards, safe-area, utilities
   - Inspiré des classes stitch (bg-surface-container-lowest, etc.)
   ========================================================================== */

/* ── Numerics ── */
.numeric-stat,
.font-numeric-stat {
  font-variant-numeric: tabular-nums lining-nums;
}
.numeric-table,
.font-numeric-table {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}
.tabular-nums { font-variant-numeric: tabular-nums lining-nums; }

/* Montants: espace insécable devise à 80% opacité si span .currency */
.currency { opacity: 0.8; }

/* ── Cards ── */
.card {
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-slate-200, #e2e8f0);
  border-radius: var(--radius-card, 1rem);
  box-shadow: var(--elevation-1);
}
.card-hover:hover { background: var(--color-surface-container-low, #eff4ff); }

/* ── Badges status (DESIGN.md Functional Status System) ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.badge-a-jour {
  background: var(--color-status-a-jour-bg);
  color: var(--color-status-a-jour-text);
  border-color: var(--color-status-a-jour-border);
}
.badge-a-jour .badge-dot { background: var(--color-status-a-jour-solid); }
.badge-en-retard {
  background: var(--color-status-en-retard-bg);
  color: var(--color-status-en-retard-text);
  border-color: var(--color-status-en-retard-border);
}
.badge-en-retard .badge-dot { background: var(--color-status-en-retard-solid); }
.badge-a-avance {
  background: var(--color-status-a-avance-bg);
  color: var(--color-status-a-avance-text);
  border-color: var(--color-status-a-avance-border);
}
.badge-a-avance .badge-dot { background: var(--color-status-a-avance-solid); }
.badge-a-venir {
  background: var(--color-status-a-venir-bg);
  color: var(--color-status-a-venir-text);
  border-color: var(--color-status-a-venir-border);
}
.badge-a-venir .badge-dot { background: var(--color-status-a-venir-solid); }
.badge-alert {
  background: var(--color-status-alert-bg);
  color: #92400e;
  border-color: var(--color-status-alert-border);
}
.badge-alert .badge-dot { background: var(--color-status-alert-solid); }

/* ── Inputs ── */
.input-coterya {
  height: 48px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 14px;
}
.input-coterya:focus {
  outline: none;
  border-color: #0f5132;
  box-shadow: 0 0 0 3px rgba(15, 81, 50, 0.15);
}

/* ── Buttons ── */
.btn-primary {
  background: #0f5132;
  color: #fff;
  border-radius: 0.5rem;
  height: 48px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:active { transform: scale(0.99); }
.btn-secondary {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

/* ── Bottom nav safe-area ── */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }

/* Hide scrollbar for pills row */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Press feedback for cards */
.card:active { transform: scale(0.99); }

/* Material Symbols helper */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* App container helper (max 480px) */
.app-shell { max-width: 480px; margin-inline: auto; }
@media (min-width: 640px) { .app-shell { max-width: 640px; } }
@media (min-width: 1024px) { .app-shell { max-width: 1024px; } }