/* frontend/static/style.css */
body { font-family: system-ui, -apple-system, "Segoe UI", Arial; margin:0; background:#0b0f14; color:#e6edf3; }
a { color:#7aa2ff; text-decoration:none; margin-right:12px; }
a:hover { text-decoration:underline; }

.topbar { display:flex; justify-content:space-between; padding:12px 16px; background:#111826; border-bottom:1px solid #1f2a3a; }
.container { padding:16px; }

.toolbar { display:flex; gap:8px; align-items:center; margin:12px 0; flex-wrap:wrap; }
input, select, textarea { background:#0f1623; color:#e6edf3; border:1px solid #243042; border-radius:8px; padding:8px 10px; }
button { background:#1b2a44; color:#e6edf3; border:1px solid #2a3a55; border-radius:8px; padding:8px 12px; cursor:pointer; }
button:hover { filter:brightness(1.1); }

.grid { width:100%; border-collapse:collapse; background:#0f1623; border:1px solid #243042; border-radius:10px; overflow:hidden; }
.grid th, .grid td { border-bottom:1px solid #1f2a3a; padding:10px; vertical-align:top; }
.grid th { background:#121c2e; text-align:left; }
.grid td.wrap { white-space:pre-wrap; word-break:break-word; }

.pager { display:flex; gap:10px; align-items:center; margin-top:12px; }

.center { display:flex; align-items:center; justify-content:center; height:100vh; }
.card { background:#0f1623; border:1px solid #243042; border-radius:12px; padding:18px; width:360px; }
.error { background:#3a1b1b; border:1px solid #6b2a2a; padding:8px; border-radius:8px; margin:10px 0; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-content { width:min(720px, 92vw); background:#0f1623; border:1px solid #243042; border-radius:12px; padding:16px; }
.formgrid { display:grid; grid-template-columns: 180px 1fr; gap:10px; margin-top:12px; }
.row { display:flex; gap:8px; align-items:center; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }