/* ============================================================================
   FPE THEME — component layer
   Extracted verbatim from the source app's base.html <style> block (the
   "Restrained design system" + "FPE component system"). These class names are
   the ones the app actually uses. Depends on tokens.css for the CSS variables.

   Import AFTER tokens.css:
     <link rel="stylesheet" href="/static/fpe-theme/tokens.css">
     <link rel="stylesheet" href="/static/fpe-theme/components.css">
   ============================================================================ */

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.9375rem; line-height:1.15; text-decoration:none;
  padding:.6875rem 1.1rem; min-height:2.75rem; border-radius:var(--radius-btn);
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--fpe-red); outline-offset:2px; }
.btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn i[data-lucide], .btn svg { height:1.15em; width:1.15em; flex:0 0 auto; }

.btn-primary   { background:var(--fpe-red); color:#fff !important; box-shadow:var(--shadow-brand); }
.btn-primary:hover:not(:disabled)   { background:var(--fpe-red-dark); }
.btn-secondary { background:#fff; color:var(--ink) !important; border-color:var(--line); box-shadow:0 1px 2px rgba(15,13,12,.04); }
.btn-secondary:hover:not(:disabled) { background:#f7f6f4; border-color:#cbc6c0; }
.btn-ghost     { background:transparent; color:var(--muted) !important; }
.btn-ghost:hover:not(:disabled)     { background:var(--surface-2); }
.btn-danger    { background:#fff; color:var(--fpe-red-dark) !important; border-color:#eccfcb; }
.btn-danger:hover:not(:disabled)    { background:#fdeceb; border-color:#e1b3ad; }

.btn-lg    { padding:.95rem 1.35rem; font-size:1.05rem; min-height:3.25rem; border-radius:var(--radius-btn-lg); }
.btn-sm    { padding:.4rem .75rem; font-size:.8125rem; min-height:2.25rem; border-radius:var(--radius-btn-sm); gap:.35rem; }
.btn-block { width:100%; }

/* ───────────────────────── Labels / eyebrows ───────────────────────── */
.eyebrow     { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.eyebrow-red { color:var(--fpe-red-dark); }

/* ───────────────────────── Cards ───────────────────────── */
.fpe-card     { background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); }
.fpe-card-pad { padding:22px; }
@media (max-width:640px){ .fpe-card-pad{ padding:16px; } }

/* ───────────────────────── Forms / inputs ───────────────────────── */
.fpe-label { display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.fpe-input {
  width:100%; background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:.7rem .85rem; font-size:15px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.fpe-input::placeholder { color:#a8a29e; }
.fpe-input:focus { outline:none; border-color:var(--fpe-red); box-shadow:var(--focus-ring); }

/* native control consistency */
input, select, textarea { transition:border-color .15s ease, box-shadow .15s ease; }
::placeholder { color:#8a817a; opacity:1; }

/* ───────────────────────── Badges ───────────────────────── */
.fpe-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:11.5px; font-weight:700; padding:.2rem .55rem; border-radius:999px; line-height:1.4; }
.fpe-badge i { width:12px; height:12px; }
.fpe-badge-red     { background:var(--red-tint);   color:var(--fpe-red-dark); }
.fpe-badge-green   { background:var(--green-tint); color:var(--green-dark); }
.fpe-badge-orange  { background:#fdf0e3;           color:#9c4d18; }
.fpe-badge-neutral { background:var(--surface-2);  color:var(--muted); }

/* margin pill — green when ≥0, red when <0 */
.pill { display:inline-flex; align-items:center; gap:.2rem; font-weight:800; font-size:13px; padding:.15rem .5rem; border-radius:8px; white-space:nowrap; }
.pill i { width:12px; height:12px; }
.pill-pos { background:var(--green-tint); color:var(--green-dark); }
.pill-neg { background:var(--red-tint);   color:var(--fpe-red-dark); }

/* ───────────────────────── Segmented tabs ───────────────────────── */
.fpe-tabs { display:flex; gap:2px; background:var(--surface-2); padding:4px; border-radius:11px; }
.fpe-tab  { flex:1; text-align:center; font-size:14px; font-weight:700; padding:.55rem .8rem; border-radius:8px;
            color:var(--muted); cursor:pointer; border:none; background:transparent; transition:background .15s,color .15s; }
.fpe-tab.active { background:#fff; color:var(--fpe-red-dark); box-shadow:var(--shadow-sm); }

/* ───────────────────────── App shell: top bar ───────────────────────── */
.fpe-appbar       { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.fpe-appbar-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:12px 20px; }
.fpe-navlink {
  display:inline-flex; align-items:center; gap:.45rem; font-size:14px; font-weight:600; color:var(--muted);
  padding:.5rem .7rem; border-radius:9px; text-decoration:none; transition:background .15s,color .15s;
}
.fpe-navlink:hover  { background:var(--surface-2); color:var(--ink); }
.fpe-navlink.active { background:var(--red-tint); color:var(--fpe-red-dark); }
.fpe-navlink i      { width:16px; height:16px; }
.fpe-divider-v      { width:1px; height:26px; background:var(--line); flex:0 0 auto; }

/* ───────────────────────── Mobile bottom tab bar ───────────────────────── */
.fpe-tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--line);
  display:flex; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -4px 18px -10px rgba(15,13,12,.18);
}
.fpe-tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
                color:var(--faint); text-decoration:none; font-size:10px; font-weight:600; }
.fpe-tabbar a i        { width:21px; height:21px; }
.fpe-tabbar a.active   { color:var(--fpe-red-dark); }
.fpe-has-tabbar        { padding-bottom:74px; }

/* ───────────────────────── Data table ───────────────────────── */
.fpe-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.fpe-table thead th {
  position:sticky; top:0; background:var(--surface); text-align:left; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:11px 12px; border-bottom:1px solid var(--line); z-index:1;
}
.fpe-table tbody td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fpe-table tbody tr:hover { background:var(--surface); }
.fpe-table .num, td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.fpe-table th.sortable { cursor:pointer; user-select:none; }
.fpe-table th.sortable:hover { color:var(--ink); }

/* quiet icon button + row actions */
.iconbtn { width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--faint);
           display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.12s; }
.iconbtn:hover        { background:var(--surface-2); color:var(--ink); }
.iconbtn.danger:hover { background:var(--red-tint); color:var(--fpe-red-dark); }
.iconbtn:disabled     { opacity:.4; cursor:not-allowed; }
.iconbtn i            { width:16px; height:16px; }
.row-actions { display:inline-flex; align-items:center; gap:4px; justify-content:flex-end; opacity:0; transition:opacity .12s; }
.fpe-table tbody tr:hover .row-actions { opacity:1; }

/* inline search box */
.fpe-search { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line-strong); border-radius:10px; padding:.5rem .8rem; }
.fpe-search i     { width:16px; height:16px; color:var(--faint); flex:0 0 auto; }
.fpe-search input { border:none; outline:none; font-size:14px; font-family:inherit; width:100%; background:transparent; color:var(--ink); }

/* filter chips */
.fpe-chip { font-size:12.5px; font-weight:700; padding:.36rem .7rem; border-radius:999px; border:1px solid var(--line-strong);
            background:#fff; color:var(--muted); cursor:pointer; transition:.12s; display:inline-flex; align-items:center; gap:.35rem; }
.fpe-chip:hover  { border-color:#bdb7b0; }
.fpe-chip.active { background:var(--red-tint); border-color:#f0bdb4; color:var(--fpe-red-dark); }

/* read-only (view-only) */
.is-readonly { opacity:.5; pointer-events:none; }

/* ───────────────────────── Stat tiles & charts ───────────────────────── */
.fpe-stat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 17px; box-shadow:var(--shadow-sm); }
.fpe-stat .n { font-size:29px; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.05; }
.fpe-stat.accent-red   { border-top:3px solid var(--fpe-red); }
.fpe-stat.accent-green { border-top:3px solid var(--green); }
.fpe-stat.accent-sky   { border-top:3px solid #0369a1; }

.fpe-bars { display:flex; align-items:flex-end; gap:6px; height:170px; padding:6px 2px 0; }
.fpe-bars .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-end; height:100%; min-width:0; }
.fpe-bars .bar { width:100%; max-width:30px; background:var(--fpe-red); border-radius:4px 4px 0 0; min-height:3px; }
.fpe-bars .bar.alt { background:#ea7c3a; }
.fpe-bars .lbl { font-size:10px; color:var(--faint); font-weight:600; white-space:nowrap; }
.minibar { height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.minibar > span { display:block; height:100%; background:var(--fpe-red); border-radius:999px; }

/* ───────────────────────── Empty / error / loading states ───────────────────────── */
.fpe-empty { text-align:center; padding:48px 20px; }
.fpe-empty .ic { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:var(--surface-2); margin-bottom:14px; }
.fpe-empty .ic i { width:24px; height:24px; color:var(--faint); }
.fpe-empty h3 { font-size:16px; font-weight:800; color:var(--ink); margin:0; }
.fpe-empty p  { font-size:13.5px; color:var(--faint); margin:6px auto 0; max-width:34ch; line-height:1.5; }
.fpe-empty .act { margin-top:18px; }
.fpe-error { text-align:center; padding:40px 20px; }
.fpe-error .ic { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:var(--red-tint); margin-bottom:12px; }
.fpe-error .ic i { width:22px; height:22px; color:var(--fpe-red-dark); }
.fpe-error h3 { font-size:15px; font-weight:800; color:var(--ink); margin:0; }
.fpe-error p  { font-size:13px; color:var(--faint); margin:5px 0 0; }

/* skeleton shimmer */
@keyframes fpe-shimmer { 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } }
.fpe-skeleton { background:#eceae7 linear-gradient(90deg,#eceae7 0,#f6f5f3 40px,#eceae7 80px) 0 0/600px 100%;
                border-radius:8px; animation:fpe-shimmer 1.2s infinite linear; }
.sk-line { height:12px; border-radius:6px; }
.sk-row  { display:flex; align-items:center; gap:12px; padding:13px 12px; border-bottom:1px solid var(--line); }
.sk-pill { height:20px; width:64px; border-radius:999px; }
.sk-av   { height:32px; width:32px; border-radius:9px; flex:0 0 auto; }

/* ───────────────────────── Admin left-sidebar shell ───────────────────────── */
.admin-shell { min-height:100dvh; }
.admin-side  { background:#fff; border-bottom:1px solid var(--line); }
.admin-link  { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:600; color:var(--muted);
               padding:.6rem .8rem; border-radius:9px; text-decoration:none; white-space:nowrap; }
.admin-link:hover  { background:var(--surface-2); color:var(--ink); }
.admin-link.active { background:var(--red-tint); color:var(--fpe-red-dark); }
.admin-link i      { width:17px; height:17px; flex:0 0 auto; }
@media (min-width:1024px){
  .admin-side { position:fixed; inset:0 auto 0 0; width:240px; border-bottom:none; border-right:1px solid var(--line);
                display:flex; flex-direction:column; padding:18px 12px; overflow-y:auto; z-index:30; }
  .admin-main { padding-left:240px; }
}

/* ───────────────────────── Accessibility ───────────────────────── */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible, .fpe-tab:focus-visible,
.fpe-chip:focus-visible, .iconbtn:focus-visible {
  outline:2px solid var(--fpe-red); outline-offset:2px; border-radius:8px;
}
.fpe-input:focus-visible { outline:2px solid var(--fpe-red); outline-offset:1px; }
img { max-width:100%; height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .fpe-skeleton { animation:none; }
}