frontend/src/components/ui/components.css

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-weight:500; border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:all .15s ease; white-space:nowrap;
  font-family:'Inter',sans-serif; letter-spacing:0.01em;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }

.btn-primary   { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover:not(:disabled)   { background:var(--accent-hover); border-color:var(--accent-hover); }

.btn-secondary { background:var(--bg-elevated); color:var(--text-secondary); border-color:var(--border); }
.btn-secondary:hover:not(:disabled) { background:var(--bg-hover); border-color:var(--border-strong); }

.btn-danger    { background:var(--rose-light); color:var(--rose); border-color:var(--rose-border); }
.btn-danger:hover:not(:disabled)    { background:#f7e0e0; }

.btn-ghost     { background:transparent; color:var(--text-muted); border-color:transparent; }
.btn-ghost:hover:not(:disabled)     { background:var(--bg-hover); color:var(--text-secondary); }

.btn-sm  { padding:5px 11px;  font-size:12.5px; }
.btn-md  { padding:8px 16px;  font-size:13.5px; }
.btn-lg  { padding:11px 22px; font-size:14.5px; }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center; padding:2px 9px;
  border-radius:100px; font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; font-family:'Inter',sans-serif;
}
.badge-todo       { background:var(--s-todo-bg);     color:var(--s-todo);      border-color:#ddd6c8; }
.badge-inprogress { background:var(--s-progress-bg); color:var(--s-progress);  border-color:var(--blue-border); }
.badge-inreview   { background:var(--s-review-bg);   color:var(--s-review);    border-color:var(--violet-border); }
.badge-done       { background:var(--s-done-bg);     color:var(--s-done);      border-color:var(--accent-border); }
.badge-cancelled  { background:var(--s-cancelled-bg);color:var(--s-cancelled); border-color:var(--rose-border); }

.badge-low      { background:var(--accent-light); color:var(--p-low);      border-color:var(--accent-border); }
.badge-medium   { background:var(--amber-light);  color:var(--p-medium);   border-color:var(--amber-border); }
.badge-high     { background:#fef3ea;             color:var(--p-high);     border-color:#e8b880; }
.badge-critical { background:var(--rose-light);   color:var(--p-critical); border-color:var(--rose-border); }

/* ── Fields ── */
.field { display:flex; flex-direction:column; gap:5px; }
.field-label { font-size:12.5px; font-weight:600; color:var(--text-secondary); letter-spacing:.02em; }
.field-input {
  background:var(--bg-elevated); border:1.5px solid var(--border);
  border-radius:var(--radius); color:var(--text-primary);
  font-size:13.5px; padding:9px 13px; transition:border-color .15s;
  width:100%;
}
.field-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,90,61,0.1); }
.field-input-error { border-color:var(--rose) !important; }
.field-error { font-size:11.5px; color:var(--rose); }
select.field-input { appearance:none; cursor:pointer; }
textarea.field-input { resize:vertical; min-height:90px; line-height:1.6; }

/* ── Card ── */
.card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:22px;
  box-shadow:var(--shadow-sm);
}

/* ── Empty State ── */
.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px;gap:10px; }
.empty-icon { width:52px;height:52px;border-radius:50%;background:var(--bg-base);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);margin-bottom:4px; }
.empty-title { font-family:'Lora',serif;font-size:16px;font-weight:600;color:var(--text-secondary); }
.empty-desc { font-size:13px;color:var(--text-muted);max-width:300px;line-height:1.5; }
.empty-action { margin-top:10px; }

/* ── Spinner ── */
@keyframes spin { to { transform:rotate(360deg); } }
.spinner {
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:white; border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block; flex-shrink:0;
}
.spinner-dark {
  width:18px; height:18px;
  border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block;
}

/* ── Page Header ── */
.page-header { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:24px;flex-wrap:wrap; }
.page-title  { font-family:'Lora',serif;font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px; }
.page-subtitle { font-size:13px;color:var(--text-muted);margin-top:3px; }
.page-action { flex-shrink:0; }

/* ── Divider ── */
.divider { height:1px; background:var(--border); margin:16px 0; }