/* Basic styling for widget pages */
:root {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #d0d7e2;
  --color-text: #1f2937;
  --color-muted: #64748b;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #475569;
  --color-secondary-hover: #334155;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --radius-sm: 4px;
  --radius-md: 6px;
  --transition: 120ms ease-in-out;
  font-size: 16px;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height: 1.4;
}
.container {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1.25rem;
}
.h-stack { display: flex; gap: .75rem; align-items: center; }
.v-stack { display: flex; flex-direction: column; gap: .75rem; }

h1 { margin: 0 0 1rem; font-size: 1.75rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .55rem .9rem;
  background: var(--color-secondary);
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}
.btn:hover { background: var(--color-secondary-hover); }
.btn:focus-visible { outline: 3px solid rgba(37,99,235,.4); outline-offset:2px; }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-secondary); }
.btn-secondary:hover { background: var(--color-secondary-hover); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-sm { padding: .35rem .6rem; font-size: .75rem; }

/* Table */
.table-wrapper { overflow-x: auto; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead th {
  background: #f1f5f9;
  font-weight: 600;
  text-align: left;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .75rem;
  letter-spacing: .5px;
  color: var(--color-muted);
}
.table tbody td { padding: .6rem .75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #f8fafc; }
.table tbody tr:nth-child(even) { background: #fdfdfd; }

.badge { display:inline-block; padding:.25rem .5rem; border-radius: var(--radius-sm); font-size:.65rem; font-weight:600; letter-spacing:.5px; background:#e2e8f0; color:#475569; }
.badge-theme { background:#dbeafe; color:#1e3a8a; }

/* Form */
form { display: flex; flex-direction: column; gap: .9rem; }
form .form-row { display: flex; flex-direction: column; gap: .35rem; }
form .form-row select { width: 100%; }
button.btn { border: none; }

/* Utility */
.muted { color: var(--color-muted); }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.text-right { text-align: right; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; background:#f1f5f9; padding:.2rem .4rem; border-radius: var(--radius-sm); }