/* finbot web — component + base styles. Single source of truth for the
   whole panel. Loaded via <link href="/static/app.css"> from layout.html,
   ip.html and login.html. Rules and usage: docs/ui-styleguide.md.
   Accent color comes from the Tailwind @theme token --color-brand
   (defined inline per page); every use here carries a literal fallback
   so the styles hold even where the token is absent. */

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

/* Numbers, pills, progress, inline code — shared primitives */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 500; line-height: 1.4; }
.pill-ok { background: #dcfce7; color: #166534; }
.pill-bad { background: #fee2e2; color: #991b1b; }
.pill-warn { background: #fef3c7; color: #92400e; }
.pill-muted { background: #f1f5f9; color: #475569; }
.pill-brand { background: #dbeafe; color: #1e40af; }
.progress { background: #e2e8f0; height: 6px; border-radius: 9999px; overflow: hidden; margin-top: 4px; }
.progress > div { height: 100%; background: var(--color-brand, #1654a0); }
.progress.over > div { background: #dc2626; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: 4px; color: #334155; }

/* Tailwind v4's reset can strip the browser's default dialog centering.
   Restore it explicitly so showModal() puts the modal in the middle. */
dialog[open] { position: fixed; inset: 0; margin: auto; }

/* ===== Component layer — see docs/ui-styleguide.md =====
   All buttons/forms/tables/modals use these classes, NOT ad-hoc
   Tailwind color/padding utilities. */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; padding: 0.5rem 1rem;
  border: 1px solid transparent; border-radius: 0.5rem; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { padding: 0.25rem 0.7rem; font-size: 0.8rem; gap: 0.3rem; }
.btn-primary { background: var(--color-brand, #1654a0); color: #fff; }
.btn-primary:hover { background: var(--color-brand-hover, #134681); }
.btn-success { background: #047857; color: #fff; }
.btn-success:hover { background: #065f46; }
.btn-secondary { background: #fff; color: #475569; border-color: #cbd5e1; }
.btn-secondary:hover { background: #f8fafc; }
.btn-ghost { background: transparent; color: #475569; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-danger { background: transparent; color: #e11d48; }
.btn-danger:hover { background: #fff1f2; }

/* Form fields */
.field { display: block; }
.field-label { display: block; font-size: 0.875rem; color: #475569; margin-bottom: 0.25rem; }
.field input:not([type=checkbox]):not([type=radio]):not([type=color]),
.field select, .field textarea, .input {
  display: block; width: 100%; font-size: 0.875rem; padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1; border-radius: 0.5rem; background: #fff; color: #0f172a;
  outline: none; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }

/* Modal (dialog) */
.modal { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0; width: 100%; max-width: 32rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1); }
.modal::backdrop { background: rgba(15,23,42,.4); backdrop-filter: blur(2px); }
.modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-head { display: flex; align-items: baseline; justify-content: space-between; }
.modal-title { font-size: 1.125rem; font-weight: 600; color: #0f172a; }
.modal-close { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1.5rem; line-height: 1; }
.modal-close:hover { color: #475569; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Data table */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; font-size: 0.875rem; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.data-table thead th { background: #f8fafc; text-align: left; color: #64748b; font-weight: 500; padding: 0.5rem 0.75rem; }
.data-table tbody td { padding: 0.5rem 0.75rem; border-top: 1px solid #f1f5f9; }
.data-table tbody tr:hover { background: #f8fafc; }

/* Card */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* Banners */
.banner { border: 1px solid; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.banner-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.banner-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.banner-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.banner-bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }