fastapi-admin-kit 0.1.0__py3-none-any.whl

fastapi_admin_kit/static/css/admin.css

@@ -0,0 +1,4736 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   FastAPI Admin Kit — Component Styles
+   Warm Editorial Brutalism — paper texture meets computational precision
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Fonts ───────────────────────────────────────────────────────────────── */
+
+.google-sans-flex-regular {
+  font-family: "Google Sans Flex", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "slnt" 0,
+    "wdth" 100,
+    "GRAD" 0,
+    "ROND" 0;
+}
+
+/* ── Material Symbols ─────────────────────────────────────────────────────── */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  vertical-align: middle;
+  user-select: none;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+/* Replace all svg icon rules with material-symbols-outlined equivalents */
+.nav-link .material-symbols-outlined { font-size: 18px; opacity: 0.6; }
+.nav-link:hover .material-symbols-outlined { opacity: 1; }
+.nav-link.active .material-symbols-outlined { opacity: 1; color: var(--primary-500); }
+.btn .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.btn-sm .material-symbols-outlined { width: 14px; height: 14px; font-size: 14px; }
+.filter-chip .material-symbols-outlined { width: 14px; height: 14px; font-size: 14px; }
+.filter-bar-clear .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.filter-bar-action .material-symbols-outlined { width: 18px; height: 18px; font-size: 18px; }
+.actions-trigger .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.actions-menu-item .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.actions-menu-item--danger .material-symbols-outlined { color: var(--color-danger); }
+.status-badge .material-symbols-outlined { width: 14px; height: 14px; font-size: 14px; }
+.topbar-search .material-symbols-outlined { color: var(--text-disabled); flex-shrink: 0; }
+.topbar-logo-icon .material-symbols-outlined { width: 24px; height: 24px; font-size: 24px; }
+.pagination .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.flash-message .material-symbols-outlined { width: 20px; height: 20px; font-size: 20px; flex-shrink: 0; }
+.stat-icon .material-symbols-outlined { font-size: 24px; }
+.breadcrumb .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.back-link .material-symbols-outlined { width: 20px; height: 20px; font-size: 20px; }
+.page-header-back .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }
+.empty-state .material-symbols-outlined { font-size: 48px; color: var(--text-disabled); }
+
+/* ── Reset ───────────────────────────────────────────────────────────────── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--surface-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Subtle grain texture overlay on body */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: var(--admin-grain-opacity, 0.025);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+}
+
+a { text-decoration: none; color: inherit; }
+ul, ol { list-style: none; margin: 0; padding: 0; }
+img { max-width: 100%; display: block; }
+
+/* ── Selection ───────────────────────────────────────────────────────────── */
+
+::selection {
+  background: var(--primary-200);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] ::selection {
+  background: var(--primary-800);
+}
+
+/* ── Scrollbar ───────────────────────────────────────────────────────────── */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--surface-border);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-disabled);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SHELL LAYOUT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.admin-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.admin-topbar {
+  height: var(--topbar-height);
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-bottom: 1px solid var(--surface-border);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--content-padding);
+  z-index: 30;
+  position: relative;
+}
+
+/* Decorative bottom accent line on topbar */
+.admin-topbar::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--primary-500), var(--primary-300), var(--primary-500));
+  opacity: var(--admin-accent-line-opacity, 0.4);
+}
+
+.admin-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Sidebar ─────────────────────────────────────────────────────────────── */
+
+.admin-sidebar {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-right: 1px solid var(--surface-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--duration-slow) var(--easing-out);
+  z-index: 20;
+  text-align: left;
+}
+
+.admin-sidebar__logo {
+  height: var(--topbar-height);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-5);
+  border-bottom: 1px solid var(--surface-border);
+  flex-shrink: 0;
+  gap: var(--space-3);
+}
+
+.admin-sidebar__logo-text {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.admin-sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-3) var(--space-3);
+}
+
+/* Section labels */
+.nav-section-label {
+  font-family: var(--font-body);
+  font-size: var(--text-2xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-disabled);
+  padding: var(--space-4) var(--space-3) var(--space-2);
+}
+
+/* Nav items */
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast) var(--easing-out);
+  position: relative;
+  cursor: pointer;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  line-height: 1.5;
+}
+
+.nav-link svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.nav-link:hover {
+  background: var(--surface-inset);
+  color: var(--primary-600);
+}
+
+.nav-link:hover svg {
+  opacity: 1;
+}
+
+.nav-link.active {
+  background: var(--primary-50);
+  color: var(--primary-600);
+  font-weight: var(--font-semibold);
+}
+
+.nav-link.active svg {
+  opacity: 1;
+  color: var(--primary-500);
+}
+
+/* Active indicator — left accent bar */
+.nav-link.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  background: var(--primary-500);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.nav-link__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.nav-link.active .nav-link__icon {
+  opacity: 1;
+}
+
+.nav-link__badge {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  padding: 1px 6px;
+  background: var(--surface-inset);
+  color: var(--text-secondary);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--surface-border);
+}
+
+/* Collapsible nav groups */
+.nav-group-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+}
+
+.nav-group-toggle:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.nav-group-chevron {
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  transition: transform var(--duration-base) var(--easing-out);
+  opacity: 0.5;
+}
+
+.nav-group-toggle[aria-expanded="false"] .nav-group-chevron {
+  transform: rotate(-90deg);
+}
+
+.nav-group-items {
+  padding-left: var(--space-5);
+}
+
+/* Collapsible nav groups */
+.nav-group-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+}
+
+.nav-group-toggle:hover {
+  background: var(--surface-inset);
+  color: var(--primary-600);
+}
+
+.nav-group-chevron {
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  transition: transform var(--duration-base) var(--easing-out);
+  opacity: 0.5;
+}
+
+.nav-group-toggle[aria-expanded="false"] .nav-group-chevron {
+  transform: rotate(-90deg);
+}
+
+.nav-group-items {
+  padding-left: var(--space-5);
+  overflow: hidden;
+}
+
+.nav-link--child {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-normal);
+  color: var(--text-secondary);
+}
+
+.nav-link--child:hover {
+  color: var(--primary-600);
+  background: var(--surface-inset);
+}
+
+.nav-link--child.active {
+  color: var(--primary-600);
+  background: var(--primary-50);
+  font-weight: var(--font-medium);
+}
+
+/* Sidebar bottom section */
+.admin-sidebar__footer {
+  border-top: 1px solid var(--surface-border);
+  padding: var(--space-3);
+  flex-shrink: 0;
+}
+
+/* ── Content Area ────────────────────────────────────────────────────────── */
+
+.admin-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--surface-base);
+}
+
+.admin-content__inner {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: var(--space-8) var(--content-padding);
+}
+
+/* ── Page Header ─────────────────────────────────────────────────────────── */
+
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: var(--space-5);
+  border-bottom: 2px solid var(--text-primary);
+  margin-bottom: var(--space-6);
+}
+
+.page-header__left {
+  flex: 1;
+  min-width: 0;
+}
+
+.page-header__title {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-normal);
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+
+.page-header__subtitle {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin: var(--space-1) 0 0;
+}
+
+.page-header__subtitle--mono {
+  font-family: var(--font-mono);
+  color: var(--mono-accent);
+}
+
+.page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+/* Back link */
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-3);
+  transition: color var(--duration-fast);
+}
+
+.back-link:hover {
+  color: var(--primary-500);
+}
+
+.back-link svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BUTTONS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  line-height: 1;
+  padding: 8px 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--easing-out);
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn svg {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
+/* Primary — emerald fill */
+.btn-primary {
+  background: var(--primary-500);
+  color: var(--text-inverse);
+  border-color: var(--primary-500);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-600);
+  border-color: var(--primary-600);
+}
+
+.btn-primary:active:not(:disabled) {
+  background: var(--primary-700);
+}
+
+/* Secondary — outlined */
+.btn-secondary {
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  border-color: var(--surface-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--surface-inset);
+  border-color: var(--text-disabled);
+}
+
+/* Danger — shows outline, fills on hover */
+.btn-danger {
+  background: var(--surface-raised);
+  color: var(--danger-500);
+  border-color: var(--surface-border);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--danger-500);
+  color: var(--text-inverse);
+  border-color: var(--danger-500);
+}
+
+/* Ghost — no border, no fill */
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: transparent;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+/* Sizes */
+.btn-sm {
+  padding: 5px 10px;
+  font-size: var(--text-xs);
+}
+
+.btn-sm svg {
+  width: 13px;
+  height: 13px;
+}
+
+.btn-lg {
+  padding: 10px 20px;
+  font-size: var(--text-base);
+}
+
+/* Loading state */
+.btn--loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+
+.btn--loading::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+}
+
+.btn-primary.btn--loading::after {
+  border-color: var(--text-inverse);
+  border-right-color: transparent;
+}
+
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FORM INPUTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.form-input,
+.form-select,
+.form-textarea {
+  width: 100%;
+  height: 38px;
+  padding: 0 var(--space-3);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--text-disabled);
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  border-color: var(--primary-500);
+  box-shadow: var(--shadow-focus);
+}
+
+.form-input:read-only {
+  background: var(--surface-inset);
+  cursor: default;
+}
+
+.form-input.has-error,
+.form-input[aria-invalid="true"] {
+  border-color: var(--danger-500);
+  box-shadow: var(--shadow-focus-error);
+}
+
+.form-textarea {
+  height: auto;
+  min-height: 80px;
+  padding: var(--space-3);
+  resize: vertical;
+  line-height: 1.6;
+}
+
+.form-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2378716C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 8px center;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  padding-right: 36px;
+  cursor: pointer;
+}
+
+/* ── Field Wrapper ───────────────────────────────────────────────────────── */
+
+.field-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-wrapper.has-error .form-input,
+.field-wrapper.has-error .form-select,
+.field-wrapper.has-error .form-textarea {
+  border-color: var(--danger-500);
+}
+
+.field-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+}
+
+.required-star {
+  color: var(--danger-500);
+  font-weight: var(--font-normal);
+}
+
+.field-help {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.field-errors {
+  margin: 0;
+  padding: 0;
+}
+
+.field-errors li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+  color: var(--danger-500);
+}
+
+.field-errors li::before {
+  content: '!';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--danger-500);
+  color: var(--text-inverse);
+  font-size: 9px;
+  font-weight: var(--font-semibold);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FIELDSETS (Form sections)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.fieldset {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+}
+
+.fieldset__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--surface-border);
+  margin-bottom: var(--space-5);
+}
+
+.fieldset__title {
+  font-family: var(--font-body);
+  font-size: var(--text-2xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.fieldset__toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-1);
+  color: var(--text-disabled);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: color var(--duration-fast), background var(--duration-fast);
+}
+
+.fieldset__toggle:hover {
+  color: var(--text-primary);
+  background: var(--surface-inset);
+}
+
+.fieldset__toggle svg {
+  width: 16px;
+  height: 16px;
+  transition: transform var(--duration-base) var(--easing-out);
+}
+
+.fieldset__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
+}
+
+.fieldset__fields > .field-wrapper--full {
+  grid-column: 1 / -1;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BADGES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-family: var(--font-body);
+  font-size: var(--text-2xs);
+  font-weight: var(--font-medium);
+  line-height: 1.5;
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.02em;
+}
+
+.badge-success {
+  background: var(--success-50);
+  color: var(--success-700);
+}
+
+.badge-warning {
+  background: var(--warning-50);
+  color: var(--warning-700);
+}
+
+.badge-danger {
+  background: var(--danger-50);
+  color: var(--danger-700);
+}
+
+.badge-info {
+  background: var(--info-50);
+  color: var(--info-700);
+}
+
+.badge-primary {
+  background: var(--primary-50);
+  color: var(--primary-700);
+}
+
+/* Mono badge — for counts and data */
+.badge-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  background: var(--surface-inset);
+  color: var(--mono-accent);
+  border: 1px solid var(--surface-border);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOGGLE SWITCH
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.toggle-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 38px;
+  height: 22px;
+  border-radius: var(--radius-full);
+  background: var(--surface-border);
+  cursor: pointer;
+  transition: background var(--duration-fast);
+  flex-shrink: 0;
+}
+
+.toggle-switch[aria-checked="true"],
+.toggle-switch.active {
+  background: var(--primary-500);
+}
+
+.toggle-knob {
+  position: absolute;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-inverse);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--duration-fast) var(--easing-spring);
+}
+
+.toggle-switch[aria-checked="true"] .toggle-knob,
+.toggle-switch.active .toggle-knob {
+  transform: translateX(16px);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TABLE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.table-container {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.table-wrapper {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* Header */
+.table-wrapper thead {
+  background: var(--surface-inset);
+}
+
+.table-wrapper thead tr {
+  border-bottom: 2px solid var(--surface-border);
+}
+
+.table-wrapper th {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-family: var(--font-body);
+  font-size: var(--text-2xs);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.table__th--sortable {
+  cursor: pointer;
+  transition: color var(--duration-fast);
+}
+
+.table__th--sortable:hover {
+  color: var(--text-primary);
+}
+
+.table__th--checkbox {
+  width: 44px;
+}
+
+.table__th--actions {
+  text-align: right;
+}
+
+/* Body rows */
+.table-wrapper tbody tr {
+  border-bottom: 1px solid var(--surface-border);
+  transition: background var(--duration-fast);
+}
+
+.table-wrapper tbody tr:last-child {
+  border-bottom: none;
+}
+
+.table-wrapper tbody tr:hover {
+  background: var(--primary-50);
+}
+
+.table-wrapper td {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.table__cell--checkbox {
+  width: 44px;
+}
+
+.table-checkbox {
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--surface-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  appearance: none;
+  background: var(--surface-raised);
+  transition: all var(--duration-fast);
+  position: relative;
+}
+
+.table-checkbox:checked {
+  background: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+.table-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--text-inverse);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.table-checkbox:indeterminate {
+  background: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+.table-checkbox:indeterminate::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 6px;
+  width: 8px;
+  height: 0;
+  border-bottom: 2px solid var(--text-inverse);
+}
+
+.table__cell--mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--mono-accent);
+}
+
+.table__cell--actions {
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* Actions in table */
+.table-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-1);
+}
+
+.table-actions__separator {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--text-disabled);
+  flex-shrink: 0;
+}
+
+.table-action {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color var(--duration-fast);
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  font-family: var(--font-body);
+}
+
+.table-action:hover {
+  color: var(--text-primary);
+}
+
+.table-action--danger:hover {
+  color: var(--danger-500);
+}
+
+/* Inline delete confirmation */
+.table-delete-confirm {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--danger-500);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SEARCH & FILTER BAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.filter-bar__search-wrap {
+  position: relative;
+  flex: 1;
+  max-width: 360px;
+  min-width: 200px;
+}
+
+.filter-bar__search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  color: var(--text-disabled);
+  pointer-events: none;
+}
+
+.filter-bar__search {
+  height: 36px;
+  padding: 0 var(--space-3) 0 32px;
+  font-size: var(--text-sm);
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: 36px;
+  padding: 0 var(--space-3);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  font-family: var(--font-body);
+}
+
+.filter-chip:hover {
+  border-color: var(--text-disabled);
+  color: var(--text-primary);
+}
+
+.filter-chip--active {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+  color: var(--primary-700);
+}
+
+.filter-chip svg {
+  width: 14px;
+  height: 14px;
+}
+
+.filter-bar__clear {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-family: var(--font-body);
+  padding: var(--space-2);
+  transition: color var(--duration-fast);
+}
+
+.filter-bar__clear:hover {
+  color: var(--danger-500);
+}
+
+.filter-bar__divider {
+  width: 1px;
+  height: 24px;
+  background: var(--surface-border);
+  flex-shrink: 0;
+}
+
+/* Date / DateTime / Time filter inputs */
+.filter-chip-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: 36px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+}
+
+.filter-chip-wrap:hover {
+  border-color: var(--text-disabled);
+}
+
+.filter-chip-wrap.filter-chip--active {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+}
+
+.filter-chip-label {
+  padding-left: var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.filter-input-date,
+.filter-input-datetime,
+.filter-input-time {
+  height: 34px;
+  padding: 0 var(--space-2);
+  border: none;
+  background: transparent;
+  font-size: var(--text-sm);
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  cursor: pointer;
+  outline: none;
+}
+
+.filter-input-date:focus,
+.filter-input-datetime:focus,
+.filter-input-time:focus {
+  outline: none;
+}
+
+.filter-clear-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: var(--space-1);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  line-height: 1;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all var(--duration-fast);
+}
+
+.filter-clear-btn:hover {
+  background: var(--danger-50);
+  color: var(--danger-500);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BULK ACTION BAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.bulk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 48px;
+  padding: 0 var(--space-4);
+  background: var(--primary-50);
+  border: 1px solid var(--primary-200);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-4);
+}
+
+.bulk-action-bar__count {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--primary-700);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   PAGINATION
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--surface-border);
+}
+
+.pagination__info {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+
+.pagination__info strong {
+  font-family: var(--font-mono);
+  color: var(--mono-accent);
+  font-weight: var(--font-normal);
+}
+
+.pagination__links {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.pagination__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  border: none;
+  background: none;
+}
+
+.pagination__link:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.pagination__link--active {
+  background: var(--primary-500);
+  color: var(--text-inverse);
+  font-weight: var(--font-medium);
+}
+
+.pagination__link--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MODAL
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 18, 16, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+  animation: modal-fade-in var(--duration-base) var(--easing-out);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 51;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  width: 520px;
+  max-width: calc(100vw - 32px);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  animation: modal-scale-in var(--duration-slow) var(--easing-out);
+}
+
+.modal--sm { width: 420px; }
+.modal--lg { width: 720px; }
+
+.modal__header {
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--surface-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal__title {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.modal__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-1);
+  color: var(--text-disabled);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--duration-fast);
+}
+
+.modal__close:hover {
+  color: var(--text-primary);
+  background: var(--surface-inset);
+}
+
+.modal__close svg {
+  width: 18px;
+  height: 18px;
+}
+
+.modal__body {
+  padding: var(--space-6);
+  overflow-y: auto;
+  flex: 1;
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+
+.modal__footer {
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--surface-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+@keyframes modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modal-scale-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOAST / FLASH MESSAGES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.toast-container {
+  position: fixed;
+  top: calc(var(--topbar-height) + var(--space-4));
+  right: var(--space-4);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  pointer-events: none;
+}
+
+.toast {
+  max-width: 380px;
+  width: 100%;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-3) var(--space-4);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  pointer-events: auto;
+  animation: toast-slide-in var(--duration-slow) var(--easing-out);
+}
+
+.toast__icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast__message {
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.toast__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--text-disabled);
+  flex-shrink: 0;
+  display: flex;
+  border-radius: var(--radius-sm);
+  transition: all var(--duration-fast);
+}
+
+.toast__close:hover {
+  color: var(--text-primary);
+  background: var(--surface-inset);
+}
+
+.toast-success {
+  border-left: 3px solid var(--success-500);
+}
+
+.toast-success .toast__icon {
+  color: var(--success-500);
+}
+
+.toast-error {
+  border-left: 3px solid var(--danger-500);
+}
+
+.toast-error .toast__icon {
+  color: var(--danger-500);
+}
+
+.toast-warning {
+  border-left: 3px solid var(--warning-500);
+}
+
+.toast-warning .toast__icon {
+  color: var(--warning-500);
+}
+
+.toast-info {
+  border-left: 3px solid var(--info-500);
+}
+
+.toast-info .toast__icon {
+  color: var(--info-500);
+}
+
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SAVE BAR (sticky bottom for forms)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.form-save-bar {
+  position: sticky;
+  bottom: 0;
+  background: var(--surface-raised);
+  border-top: 1px solid var(--surface-border);
+  padding: var(--space-3) var(--content-padding);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 -2px 8px rgba(28, 25, 23, 0.04);
+}
+
+.form-save-bar__left {
+  display: flex;
+  align-items: center;
+}
+
+.form-save-bar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   EMPTY STATE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-16) var(--space-4);
+  text-align: center;
+}
+
+.empty-state__icon {
+  width: 48px;
+  height: 48px;
+  color: var(--text-disabled);
+  margin-bottom: var(--space-4);
+  opacity: 0.5;
+}
+
+.empty-state__title {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+  margin: 0 0 var(--space-2);
+}
+
+.empty-state__text {
+  font-size: var(--text-sm);
+  color: var(--text-disabled);
+  margin: 0 0 var(--space-5);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TAG CHIPS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 2px 10px;
+  border-radius: var(--radius-full);
+  background: var(--primary-50);
+  color: var(--primary-700);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+}
+
+.tag-chip__remove {
+  display: inline-flex;
+  cursor: pointer;
+  color: var(--primary-400);
+  transition: color var(--duration-fast);
+}
+
+.tag-chip__remove:hover {
+  color: var(--danger-500);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   RELATION PICKER
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.relation-picker {
+  position: relative;
+}
+
+.relation-picker-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 15;
+  margin-top: var(--space-1);
+  background: var(--surface-overlay);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  max-height: 240px;
+  overflow-y: auto;
+  animation: dropdown-enter var(--duration-base) var(--easing-out);
+}
+
+.relation-option {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  transition: background var(--duration-fast);
+}
+
+.relation-option:hover {
+  background: var(--primary-50);
+}
+
+.relation-option--selected {
+  background: var(--primary-50);
+  color: var(--primary-700);
+  font-weight: var(--font-medium);
+}
+
+@keyframes dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   JSON EDITOR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.json-editor-wrapper {
+  min-height: 200px;
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--surface-inset);
+}
+
+.json-editor-wrapper .cm-editor {
+  min-height: 200px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DASHBOARD — Stat Cards
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.stat-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--space-4);
+  margin-bottom: var(--space-8);
+}
+
+.stat-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  transition: all var(--duration-fast);
+  cursor: pointer;
+  text-decoration: none;
+  display: block;
+}
+
+.stat-card:hover {
+  box-shadow: var(--shadow-sm);
+  border-color: var(--text-disabled);
+}
+
+.stat-card__label {
+  font-size: var(--text-2xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-2);
+}
+
+.stat-card__value {
+  font-family: var(--font-display);
+  font-size: var(--text-3xl);
+  color: var(--text-primary);
+  line-height: 1;
+  margin-bottom: var(--space-2);
+}
+
+.stat-card__change {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+}
+
+.stat-card__change--positive {
+  color: var(--success-500);
+}
+
+.stat-card__change--negative {
+  color: var(--danger-500);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DASHBOARD — Activity Feed
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.activity-feed {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.activity-feed__header {
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.activity-feed__title {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  margin: 0;
+}
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-5);
+  border-bottom: 1px solid var(--surface-border);
+  transition: background var(--duration-fast);
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-item:hover {
+  background: var(--surface-inset);
+}
+
+.activity-item__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.activity-item__dot--create { background: var(--success-500); }
+.activity-item__dot--update { background: var(--warning-500); }
+.activity-item__dot--delete { background: var(--danger-500); }
+
+.activity-item__content {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-sm);
+}
+
+.activity-item__time {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   AUDIT LOG — Timeline
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.audit-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.audit-entry {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  border-left: 3px solid var(--surface-border);
+  padding: var(--space-4) var(--space-5);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.audit-entry:hover {
+  box-shadow: var(--shadow-xs);
+}
+
+.audit-entry--create { border-left-color: var(--success-500); }
+.audit-entry--update { border-left-color: var(--warning-500); }
+.audit-entry--delete { border-left-color: var(--danger-500); }
+
+.audit-entry__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--text-sm);
+}
+
+.audit-entry__time {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+
+.audit-entry__user {
+  color: var(--text-secondary);
+}
+
+.audit-entry__model {
+  font-family: var(--font-mono);
+  color: var(--mono-accent);
+  font-size: var(--text-xs);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   PERMISSIONS MATRIX (Roles)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.permissions-matrix {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.permissions-matrix table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.permissions-matrix th {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-2xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+  text-align: center;
+  background: var(--surface-inset);
+  border-bottom: 2px solid var(--surface-border);
+}
+
+.permissions-matrix th:first-child {
+  text-align: left;
+}
+
+.permissions-matrix td {
+  padding: var(--space-3) var(--space-4);
+  text-align: center;
+  border-bottom: 1px solid var(--surface-border);
+  font-size: var(--text-sm);
+}
+
+.permissions-matrix td:first-child {
+  text-align: left;
+  font-weight: var(--font-medium);
+}
+
+.permissions-matrix tr:last-child td {
+  border-bottom: none;
+}
+
+.permissions-matrix tr:hover {
+  background: var(--surface-inset);
+}
+
+/* Custom checkbox for matrix */
+.matrix-checkbox {
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid var(--surface-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  appearance: none;
+  background: var(--surface-raised);
+  transition: all var(--duration-fast);
+  position: relative;
+}
+
+.matrix-checkbox:checked {
+  background: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+.matrix-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--text-inverse);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   HTMX INDICATORS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.htmx-indicator {
+  display: none;
+}
+
+.htmx-request .htmx-indicator {
+  display: inline-flex;
+}
+
+.htmx-request.htmx-indicator {
+  display: inline-flex;
+}
+
+.htmx-swapping {
+  opacity: 0;
+  transition: opacity var(--duration-fast);
+}
+
+.htmx-settling {
+  opacity: 1;
+  transition: opacity var(--duration-fast);
+}
+
+/* HTMX loading bar */
+.htmx-indicator-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--primary-500);
+  z-index: 1000;
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform 300ms var(--easing-out);
+}
+
+.htmx-request > .htmx-indicator-loading {
+  transform: scaleX(0.3);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOPBAR — inner layout zones
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.topbar-left { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+.topbar-center { flex: 1; display: flex; justify-content: center; }
+.topbar-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+
+.topbar-logo {
+  display: flex; align-items: center; gap: var(--space-2);
+  font-family: var(--font-display); font-size: var(--text-lg);
+  color: var(--text-primary); white-space: nowrap; text-decoration: none;
+}
+.topbar-logo img { height: 28px; max-width: 120px; }
+
+.topbar-logo-icon {
+  display: flex; align-items: center; justify-content: center;
+  color: var(--primary-500);
+}
+
+.topbar-search {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface-inset); border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg); cursor: pointer;
+  transition: all var(--duration-fast);
+  min-width: 280px;
+}
+.topbar-search:hover { border-color: var(--primary-300); }
+.topbar-search svg { color: var(--text-disabled); flex-shrink: 0; }
+.topbar-search-placeholder { color: var(--text-disabled); font-size: var(--text-sm); flex: 1; }
+.topbar-search-shortcut { display: flex; gap: 4px; }
+.topbar-search-shortcut kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 2px 6px; font-size: var(--text-2xs); font-family: var(--font-mono);
+  background: var(--surface-raised); border: 1px solid var(--surface-border);
+  border-radius: var(--radius-xs); color: var(--text-secondary);
+}
+
+.topbar-user { position: relative; }
+.topbar-user-btn {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1); border-radius: var(--radius-md);
+  background: none; border: none; cursor: pointer;
+  transition: all var(--duration-fast);
+}
+.topbar-user-btn:hover { background: var(--surface-inset); }
+.topbar-user-info { display: flex; flex-direction: column; text-align: left; }
+.topbar-user-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); line-height: 1.2; }
+.topbar-user-role { font-size: var(--text-2xs); color: var(--text-secondary); line-height: 1.2; }
+
+.topbar-divider { width: 1px; height: 24px; background: var(--surface-border); margin: 0 var(--space-2); }
+
+.collapse-toggle, .icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--radius-md);
+  background: none; border: none; color: var(--text-secondary);
+  cursor: pointer; transition: all var(--duration-fast) var(--easing-out);
+}
+.collapse-toggle svg, .icon-btn svg { width: 18px; height: 18px; }
+.collapse-toggle:hover, .icon-btn:hover { background: var(--surface-inset); color: var(--text-primary); }
+
+/* Breadcrumb */
+.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
+.breadcrumb-segment { color: var(--text-secondary); display: flex; align-items: center; }
+.breadcrumb-separator { color: var(--text-disabled); }
+.breadcrumb-current { color: var(--text-primary); font-weight: var(--font-medium); }
+
+/* User avatar & dropdown */
+.user-avatar {
+  width: 32px; height: 32px; border-radius: var(--radius-full);
+  background: var(--primary-100); color: var(--primary-700);
+  display: flex; align-items: center; justify-content: center;
+  font-size: var(--text-xs); font-weight: var(--font-semibold);
+}
+
+.user-dropdown {
+  position: absolute; right: 0; top: calc(100% + 4px);
+  min-width: 200px; background: var(--surface-raised);
+  border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg); z-index: 50; padding: var(--space-1) 0;
+}
+.user-dropdown-header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--surface-border); }
+.user-dropdown-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); }
+.user-dropdown-email { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
+.user-dropdown-item {
+  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm); color: var(--text-secondary); background: none; border: none;
+  cursor: pointer; transition: all var(--duration-fast);
+}
+.user-dropdown-item:hover { background: var(--surface-inset); color: var(--text-primary); }
+.user-dropdown-item.danger { color: var(--danger-500); }
+.user-dropdown-item.danger:hover { background: var(--danger-50); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SIDEBAR — inner structure
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-3); text-align: left; }
+.sidebar-nav-list { list-style: none; margin: 0; padding: 0; text-align: left; }
+.sidebar-nav-item { margin-bottom: 2px; text-align: left; }
+
+.sidebar-section { padding: var(--space-4) 0 var(--space-2); text-align: left; }
+.sidebar-section-label {
+  font-size: var(--text-2xs); font-weight: var(--font-medium);
+  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-disabled);
+  text-align: left;
+}
+
+.sidebar-section-toggle {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; padding: 0; margin: 0; background: none; border: none;
+  cursor: pointer; color: inherit; text-align: left;
+}
+.sidebar-section-toggle:hover { color: var(--text-secondary); }
+.sidebar-section-toggle .sidebar-section-label { flex: 1; }
+
+.sidebar-section-chevron {
+  transition: transform 0.2s ease; color: var(--text-disabled); flex-shrink: 0;
+}
+.sidebar-section-chevron.collapsed { transform: rotate(0deg); }
+.sidebar-section-chevron:not(.collapsed) { transform: rotate(90deg); }
+
+.sidebar-section-items { list-style: none; margin: 0; padding: 0; text-align: left; }
+
+.sidebar-bottom { border-top: 1px solid var(--surface-border); padding: var(--space-3); flex-shrink: 0; text-align: left; }
+
+.nav-link-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.nav-link--no-icon .nav-link-label { padding-left: 0; }
+.nav-link--no-icon { gap: 0; }
+.nav-link-badge {
+  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs);
+  padding: 1px 6px; background: var(--surface-inset); color: var(--text-secondary);
+  border-radius: var(--radius-full); border: 1px solid var(--surface-border);
+}
+.nav-tooltip {
+  display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
+  background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-3); font-size: var(--text-xs); white-space: nowrap;
+  box-shadow: var(--shadow-md); z-index: 50; color: var(--text-primary);
+}
+.sidebar.collapsed .nav-tooltip { display: block; }
+
+.admin-sidebar-overlay {
+  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 35;
+}
+.admin-sidebar-overlay.open { display: block; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   PAGE HEADER
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.page-header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--space-4); margin-bottom: var(--space-6);
+}
+.page-header-left { display: flex; flex-direction: column; gap: var(--space-1); }
+.page-header-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+.page-header-title {
+  font-family: var(--font-display); font-size: var(--text-2xl);
+  color: var(--text-primary); margin: 0; line-height: 1.2;
+}
+.page-header-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
+.page-header-back {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
+  margin-bottom: var(--space-1);
+}
+.page-header-back:hover { color: var(--primary-500); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BUTTONS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium);
+  border-radius: var(--radius-lg); border: 1px solid transparent;
+  cursor: pointer; transition: all var(--duration-fast) var(--easing-out);
+  text-decoration: none; white-space: nowrap; line-height: 1.5;
+}
+.btn-primary { background: var(--primary-500); color: var(--text-inverse); border-color: var(--primary-500); }
+.btn-primary:hover { background: var(--primary-600); }
+.btn-secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--surface-border); }
+.btn-secondary:hover { background: var(--surface-inset); }
+.btn-ghost { background: none; color: var(--text-secondary); }
+.btn-ghost:hover { background: var(--surface-inset); color: var(--text-primary); }
+.btn-danger { background: var(--danger-500); color: white; border-color: var(--danger-500); }
+.btn-danger:hover { background: var(--danger-700); }
+.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BADGES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.badge {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  padding: 2px var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium);
+  border-radius: var(--radius-full); line-height: 1.5;
+}
+.badge-success { background: var(--success-50); color: var(--success-700); }
+.badge-warning { background: var(--warning-50); color: var(--warning-700); }
+.badge-danger { background: var(--danger-50); color: var(--danger-700); }
+.badge-info { background: var(--info-50); color: var(--info-700); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   STAT CARDS (dashboard)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
+.stat-card {
+  display: flex; flex-direction: column; gap: var(--space-1);
+  padding: var(--space-5); background: var(--surface-raised);
+  border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
+  text-decoration: none; transition: all var(--duration-fast) var(--easing-out);
+}
+.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.stat-card--outlined { background: transparent; border: 2px solid var(--surface-border); }
+.stat-card--flat { box-shadow: none; border: none; background: var(--surface-inset); }
+.stat-card--small .stat-card__value { font-size: var(--text-xl); }
+.stat-card--large .stat-card__value { font-size: 3.5rem; }
+.stat-card__label { font-size: var(--text-sm); color: var(--text-secondary); }
+.stat-card__value { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--text-primary); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FILTER BAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.filter-bar {
+  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
+  padding: var(--space-3) var(--space-4); background: var(--surface-raised);
+  border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
+}
+.filter-bar-search { position: relative; flex: 1; min-width: 200px; }
+.filter-bar-search-icon {
+  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
+  width: 16px; height: 16px; color: var(--text-disabled); pointer-events: none;
+}
+.filter-bar-search-input {
+  width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
+  border: 1px solid var(--surface-border); border-radius: var(--radius-md);
+  background: var(--surface-base); font-size: var(--text-sm); color: var(--text-primary);
+  outline: none; transition: border-color var(--duration-fast);
+}
+.filter-bar-search-input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
+.filter-bar-clear {
+  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
+  background: none; border: none; cursor: pointer; color: var(--text-disabled); padding: var(--space-1);
+}
+.filter-bar-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
+.filter-bar-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
+.filter-bar-action {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--radius-md); background: none;
+  border: 1px solid var(--surface-border); cursor: pointer; color: var(--text-secondary);
+}
+.filter-bar-action:hover { background: var(--surface-inset); }
+.filter-bar-clear-all { font-size: var(--text-xs); color: var(--text-secondary); background: none; border: none; cursor: pointer; }
+.filter-bar-clear-all:hover { color: var(--danger-500); }
+.filter-bar-divider { width: 1px; height: 20px; background: var(--surface-border); }
+
+.filter-chip {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  padding: var(--space-1) var(--space-3); font-size: var(--text-xs);
+  border: 1px solid var(--surface-border); border-radius: var(--radius-full);
+  background: var(--surface-raised); color: var(--text-secondary); cursor: pointer;
+}
+.filter-chip:hover, .filter-chip.active { border-color: var(--primary-500); color: var(--primary-500); }
+.filter-chip-count {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; border-radius: var(--radius-full);
+  background: var(--primary-500); color: white; font-size: 10px;
+}
+.filter-chip-wrap { display: flex; align-items: center; gap: var(--space-2); }
+.filter-chip-label { font-size: var(--text-xs); color: var(--text-secondary); }
+.filter-chip--active .filter-chip-label { color: var(--primary-500); font-weight: var(--font-medium); }
+
+.filter-dropdown {
+  position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px;
+  background: var(--surface-raised); border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 50;
+  padding: var(--space-2) 0;
+}
+.filter-dropdown-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium);
+}
+.filter-dropdown-clear { font-size: var(--text-xs); color: var(--primary-500); background: none; border: none; cursor: pointer; }
+.filter-dropdown-item {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); cursor: pointer;
+}
+.filter-dropdown-item:hover { background: var(--surface-inset); }
+.filter-dropdown-item input[type="radio"] { accent-color: var(--primary-500); }
+.filter-clear-btn {
+  background: none; border: none; color: var(--text-disabled); cursor: pointer; font-size: var(--text-lg);
+}
+.filter-clear-btn:hover { color: var(--danger-500); }
+.filter-input-date, .filter-input-datetime, .filter-input-time {
+  padding: var(--space-1) var(--space-2); border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md); font-size: var(--text-xs); background: var(--surface-base);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+    TABLE
+    ═══════════════════════════════════════════════════════════════════════════ */
+
+.table-wrapper { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden; }
+.table-wrapper table { width: 100%; border-collapse: collapse; }
+.table-wrapper table { border-collapse: collapse; }
+.table-wrapper th { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
+.table-wrapper td, .table-wrapper th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--surface-border); }
+.table-wrapper tbody tr:hover { background: var(--surface-inset); }
+
+.table-sort-btn { display: flex; align-items: center; gap: var(--space-1); color: inherit; text-decoration: none; }
+.table-sort-btn:hover { color: var(--primary-500); }
+.table-sort-btn.active { color: var(--primary-500); font-weight: var(--font-medium); }
+
+/* List footer — bulk actions + pagination */
+.list-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--surface-border);
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+.list-footer-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.btn-danger-outline {
+  background: var(--surface-raised);
+  color: var(--danger-500);
+  border: 1px solid var(--danger-500);
+}
+.btn-danger-outline:hover {
+  background: var(--danger-50);
+}
+[data-theme="dark"] .btn-danger-outline {
+  border-color: var(--danger-700);
+}
+[data-theme="dark"] .btn-danger-outline:hover {
+  background: rgba(248, 113, 113, 0.1);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FORM ELEMENTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.form-input, .form-select {
+  width: 100%; padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--surface-border); border-radius: var(--radius-md);
+  background: var(--surface-raised); font-size: var(--text-sm); color: var(--text-primary);
+  outline: none; transition: all var(--duration-fast);
+}
+.form-input:focus, .form-select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
+.form-input[readonly] { background: var(--surface-inset); color: var(--text-secondary); cursor: not-allowed; }
+
+.field-wrapper { margin-bottom: var(--space-4); }
+.field-label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-1); }
+.required-star { color: var(--danger-500); margin-left: 2px; }
+.field-errors { margin-top: var(--space-1); }
+.field-errors li { font-size: var(--text-xs); color: var(--danger-500); }
+.field-help { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }
+.has-error .form-input, .has-error .form-select { border-color: var(--danger-500); }
+
+/* Toggle switch */
+.toggle-switch {
+  display: inline-flex; align-items: center; width: 40px; height: 22px;
+  border-radius: var(--radius-full); cursor: pointer; position: relative;
+  transition: background var(--duration-fast); border: none; padding: 0;
+  background: var(--surface-border);
+}
+.toggle-switch--on { background: var(--primary-500); }
+.toggle-switch__thumb {
+  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
+  border-radius: var(--radius-full); background: white;
+  transition: transform var(--duration-fast) var(--easing-out);
+  box-shadow: var(--shadow-sm);
+}
+.toggle-switch--on .toggle-switch__thumb { transform: translateX(18px); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOAST NOTIFICATIONS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.toast { border-radius: var(--radius-lg); }
+.toast-success { border-left: 4px solid var(--success-500); }
+.toast-error { border-left: 4px solid var(--danger-500); }
+.toast-warning { border-left: 4px solid var(--warning-500); }
+.toast-info { border-left: 4px solid var(--info-500); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITY CLASSES (Tailwind-like)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1 1 0%; }
+.shrink-0 { flex-shrink: 0; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+
+.space-x-2 > * + * { margin-left: var(--space-2); }
+.space-y-2 > * + * { margin-top: var(--space-2); }
+.space-y-3 > * + * { margin-top: var(--space-3); }
+.space-y-6 > * + * { margin-top: var(--space-6); }
+
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-8 { margin-bottom: var(--space-8); }
+.ml-2 { margin-left: var(--space-2); }
+.ml-auto { margin-left: auto; }
+
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.p-6 { padding: var(--space-6); }
+.p-8 { padding: var(--space-8); }
+.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+
+.w-full { width: 100%; }
+.w-3 { width: var(--space-3); }
+.w-4 { width: 1rem; }
+.w-5 { width: 1.25rem; }
+.w-11 { width: 2.75rem; }
+.w-14 { width: 3.5rem; }
+.w-16 { width: 4rem; }
+.w-32 { width: 8rem; }
+.w-48 { width: 12rem; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.min-w-0 { min-width: 0; }
+
+.h-3 { height: var(--space-3); }
+.h-4 { height: 1rem; }
+.h-5 { height: 1.25rem; }
+.h-6 { height: 1.5rem; }
+.h-10 { height: 2.5rem; }
+.h-12 { height: 3rem; }
+.h-16 { height: 4rem; }
+.h-32 { height: 8rem; }
+.min-h-200px { min-height: 200px; }
+
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-left { text-align: left; }
+.inline { display: inline; }
+.inline-flex { display: inline-flex; }
+.inline-block { display: inline-block; }
+.block { display: block; }
+.hidden { display: none; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+.inset-0 { inset: 0; }
+.left-0 { left: 0; }
+.right-0 { right: 0; }
+.top-0 { top: 0; }
+.top-4 { top: var(--space-4); }
+.bottom-0 { bottom: 0; }
+.z-10 { z-index: 10; }
+.z-50 { z-index: 50; }
+.pointer-events-none { pointer-events: none; }
+
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.col-span-2 { grid-column: span 2; }
+.col-span-3 { grid-column: span 3; }
+
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.break-all { word-break: break-all; }
+.whitespace-nowrap { white-space: nowrap; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.object-cover { object-fit: cover; }
+.select-none { user-select: none; }
+.cursor-pointer { cursor: pointer; }
+.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; }
+
+.font-sans { font-family: var(--font-body); }
+.font-mono { font-family: var(--font-mono); }
+.font-display { font-family: var(--font-display); }
+.font-normal { font-weight: var(--font-normal); }
+.font-medium { font-weight: var(--font-medium); }
+.font-semibold { font-weight: var(--font-semibold); }
+.font-bold { font-weight: 700; }
+.uppercase { text-transform: uppercase; }
+.tracking-wider { letter-spacing: 0.05em; }
+.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-secondary { color: var(--text-secondary); }
+.text-primary-color { color: var(--primary-500); }
+.mono { font-family: var(--font-mono); }
+
+.rounded { border-radius: var(--radius-sm); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: calc(var(--radius-lg) + 4px); }
+.rounded-full { border-radius: var(--radius-full); }
+
+.bg-white { background: var(--surface-raised); }
+.bg-red-50 { background: var(--danger-50); }
+.bg-green-50 { background: var(--success-50); }
+.bg-yellow-50 { background: var(--warning-50); }
+.bg-blue-50 { background: var(--info-50); }
+.bg-green-100 { background: #dcfce7; }
+.bg-yellow-100 { background: #fef9c3; }
+.bg-red-100 { background: #fee2e2; }
+.bg-gray-100 { background: var(--surface-inset); }
+
+.text-red-700 { color: var(--danger-700); }
+.text-green-700 { color: #15803d; }
+.text-green-800 { color: #166534; }
+.text-yellow-700 { color: #b45309; }
+.text-yellow-800 { color: #92400e; }
+.text-blue-700 { color: var(--info-700); }
+.text-gray-400 { color: var(--text-disabled); }
+.text-gray-500 { color: var(--text-secondary); }
+.text-gray-600 { color: #4b5563; }
+.text-gray-700 { color: #374151; }
+.text-gray-900 { color: var(--text-primary); }
+
+.border { border: 1px solid var(--surface-border); }
+.border-red-200 { border-color: #fecaca; }
+.border-green-200 { border-color: #bbf7d0; }
+.border-yellow-200 { border-color: #fde68a; }
+.border-blue-200 { border-color: #bfdbfe; }
+.border-gray-200 { border-color: var(--surface-border); }
+.border-gray-300 { border-color: #d1d5db; }
+
+[data-theme="dark"] .border-red-200 { border-color: var(--danger-500); }
+[data-theme="dark"] .border-green-200 { border-color: var(--success-500); }
+[data-theme="dark"] .border-yellow-200 { border-color: var(--warning-500); }
+[data-theme="dark"] .border-blue-200 { border-color: var(--info-500); }
+[data-theme="dark"] .border-gray-300 { border-color: var(--surface-border); }
+[data-theme="dark"] .text-green-700 { color: var(--success-700); }
+[data-theme="dark"] .text-green-800 { color: var(--success-700); }
+[data-theme="dark"] .text-yellow-700 { color: var(--warning-700); }
+[data-theme="dark"] .text-yellow-800 { color: var(--warning-700); }
+[data-theme="dark"] .text-gray-600 { color: var(--text-secondary); }
+[data-theme="dark"] .text-gray-700 { color: var(--text-secondary); }
+[data-theme="dark"] .bg-green-100 { background: var(--success-50); }
+[data-theme="dark"] .bg-yellow-100 { background: var(--warning-50); }
+[data-theme="dark"] .bg-red-100 { background: var(--danger-50); }
+
+.divide-y > * + * { border-top: 1px solid var(--surface-border); }
+
+.transition-colors { transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast); }
+.transition-transform { transition: transform var(--duration-fast); }
+.transition-ease-out { transition-timing-function: var(--easing-out); }
+.duration-100 { transition-duration: var(--duration-fast); }
+.duration-200 { transition-duration: var(--duration-base); }
+.duration-300 { transition-duration: var(--duration-slow); }
+.ease-out { transition-timing-function: var(--easing-out); }
+.ease-in { transition-timing-function: var(--easing-in); }
+
+.rotate-90 { transform: rotate(90deg); }
+.rotate-180 { transform: rotate(180deg); }
+.-rotate-90 { transform: rotate(-90deg); }
+.translate-y-2 { transform: translateY(var(--space-2)); }
+.-translate-y-1\\/2 { transform: translateY(-50%); }
+.translate-x-1 { transform: translateX(var(--space-1)); }
+.translate-x-6 { transform: translateX(1.5rem); }
+
+.hover\\:bg-gray-50:hover, [class*="hover:bg-"][class*="gray-50"]:hover { background: var(--surface-inset); }
+.hover\\:text-primary-600:hover, [class*="hover:text-primary-600"]:hover { color: var(--primary-600); }
+.hover\\:underline:hover { text-decoration: underline; }
+
+.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; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   LOGIN PAGE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-base);
+  padding: var(--space-4);
+}
+
+.login-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-8);
+  box-shadow: var(--shadow-md);
+}
+
+.login-card__logo {
+  text-align: center;
+  margin-bottom: var(--space-6);
+}
+
+.login-card__title {
+  font-family: var(--font-display);
+  font-size: var(--text-xl);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-6);
+  text-align: center;
+}
+
+.login-card__error {
+  background: var(--danger-50);
+  border: 1px solid var(--danger-500);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--danger-700);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SKELETON LOADING
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.skeleton {
+  background: var(--surface-inset);
+  border-radius: var(--radius-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.15),
+    transparent
+  );
+  animation: skeleton-shimmer 1.5s infinite;
+}
+
+[data-theme="dark"] .skeleton::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.04),
+    transparent
+  );
+}
+
+@keyframes skeleton-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.skeleton-text {
+  height: 14px;
+  margin-bottom: 8px;
+}
+
+.skeleton-text:last-child {
+  width: 60%;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   COMPONENT STYLE VARIANTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Table style variants */
+.table--striped tbody tr:nth-child(even) { background: var(--surface-inset); }
+.table--bordered { border: 1px solid var(--surface-border); }
+.table--bordered td, .table--bordered th { border: 1px solid var(--surface-border); }
+.table--compact th, .table--compact td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
+.table--relaxed th, .table--relaxed td { padding: var(--space-4) var(--space-5); }
+
+/* Form layout variants */
+.form--one-column .fieldset__fields { grid-template-columns: 1fr; }
+.form--compact .field-wrapper { gap: 4px; }
+.form--relaxed .field-wrapper { gap: 12px; }
+
+/* Sidebar style variants */
+.sidebar--compact .nav-link { padding: var(--space-1) 0; font-size: var(--text-xs); }
+.sidebar--minimal .nav-link__label { display: none; }
+.sidebar--minimal .nav-link { justify-content: center; padding: var(--space-2); }
+
+/* Dashboard grid variants */
+.dashboard--2col .stat-cards { grid-template-columns: repeat(2, 1fr); }
+.dashboard--3col .stat-cards { grid-template-columns: repeat(3, 1fr); }
+.dashboard--4col .stat-cards { grid-template-columns: repeat(4, 1fr); }
+.stat-card--outlined { background: transparent; border: 2px solid var(--surface-border); }
+.stat-card--flat { box-shadow: none; border: none; background: var(--surface-inset); }
+.stat-card--small .stat-card__value { font-size: var(--text-xl); }
+.stat-card--large .stat-card__value { font-size: 3.5rem; }
+
+/* Topbar style variants */
+.topbar--minimal { border-bottom: none; }
+.topbar--minimal::after { display: none; }
+.topbar--transparent { background: transparent; border-bottom: none; }
+.topbar--transparent::after { display: none; }
+
+/* Content width variants */
+.content--narrow .admin-content__inner { max-width: 800px; }
+.content--wide .admin-content__inner { max-width: 1600px; }
+.content--full .admin-content__inner { max-width: none; }
+
+/* Sidebar position */
+.sidebar--right .admin-body { flex-direction: row-reverse; }
+.sidebar--right .admin-sidebar { border-right: none; border-left: 1px solid var(--surface-border); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 1024px) {
+  .admin-sidebar {
+    width: var(--admin-sidebar-width, var(--sidebar-width));
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    z-index: 40;
+    transform: translateX(-100%);
+    transition: transform var(--duration-slow) var(--easing-out);
+  }
+
+  .admin-sidebar.open {
+    transform: translateX(0);
+  }
+
+  .sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(20, 18, 16, 0.5);
+    z-index: 35;
+  }
+
+  .admin-content__inner {
+    padding: var(--space-5) var(--space-4);
+  }
+
+  .page-header__title {
+    font-size: var(--text-xl);
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .stat-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .fieldset__fields {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-bar__search-wrap {
+    max-width: none;
+  }
+
+  .table-wrapper {
+    font-size: var(--text-xs);
+  }
+
+  .table-wrapper th,
+  .table-wrapper td {
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .pagination {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .modal {
+    width: calc(100vw - 16px);
+    max-height: 90vh;
+  }
+}
+
+@media (max-width: 480px) {
+  .admin-content__inner {
+    padding: var(--space-4) var(--space-3);
+  }
+
+  .stat-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .login-card {
+    padding: var(--space-5);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   REDUCED MOTION
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DASHBOARD STAT CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.dashboard-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  color: var(--text-primary);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.dashboard-stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-card-hover);
+  border-color: rgba(20, 184, 166, 0.3);
+}
+
+.dashboard-stat-card .stat-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.dashboard-stat-card .stat-icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  flex-shrink: 0;
+}
+
+.dashboard-stat-card .stat-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dashboard-stat-card .stat-label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--text-tertiary);
+}
+
+.dashboard-stat-card .stat-count {
+  font-family: var(--font-display);
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.dashboard-stat-card .stat-subtitle {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+.dashboard-stat-card .stat-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-2xs);
+  font-weight: var(--font-semibold);
+  padding: 3px 8px;
+  border-radius: var(--radius-full);
+}
+
+.dashboard-stat-card .stat-trend.up {
+  color: #16a34a;
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.dashboard-stat-card .stat-trend.down {
+  color: #dc2626;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.dashboard-stat-card .stat-trend-period {
+  font-size: var(--text-2xs);
+  color: var(--text-tertiary);
+  margin-left: 4px;
+}
+
+.dashboard-stat-card .stat-wave {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 80px;
+  height: 30px;
+  opacity: 0.15;
+}
+
+/* ── Stat icon colors ─────────────────────────────────────────────────── */
+.stat-icon--teal { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
+.stat-icon--purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
+.stat-icon--blue { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
+.stat-icon--orange { background: rgba(249, 115, 22, 0.12); color: #f97316; }
+.stat-icon--green { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
+.stat-icon--yellow { background: rgba(234, 179, 8, 0.12); color: #eab308; }
+.stat-icon--pink { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
+.stat-icon--red { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
+.stat-icon--indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
+.stat-icon--cyan { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SYSTEM OVERVIEW (DONUT CHART)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.system-overview-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.system-overview-card .overview-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.system-overview-card .overview-header-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--primary-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.system-overview-card .overview-header-icon svg {
+  width: 18px;
+  height: 18px;
+  color: var(--primary-600);
+}
+
+.system-overview-card .overview-title {
+  font-size: var(--text-md);
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.system-overview-card .overview-body {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+
+.system-overview-card .overview-chart {
+  width: 160px;
+  height: 160px;
+  flex-shrink: 0;
+}
+
+.system-overview-card .overview-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
+
+.system-overview-card .overview-legend-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.system-overview-card .overview-legend-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.system-overview-card .overview-legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.system-overview-card .overview-legend-value {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.system-overview-card .overview-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  border-top: 1px solid var(--surface-border);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   QUICK ACTIONS GRID
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding: 12px;
+}
+
+.quick-action-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--text-primary);
+  transition: all 0.15s;
+  border: 1px solid transparent;
+}
+
+.quick-action-item:hover {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+}
+
+[data-theme="dark"] .quick-action-item:hover {
+  background: rgba(20, 184, 166, 0.08);
+  border-color: rgba(45, 212, 191, 0.2);
+}
+
+.quick-action-item .action-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.quick-action-item .action-icon svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  flex-shrink: 0;
+}
+
+.quick-action-item .action-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.quick-action-item .action-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+}
+
+.quick-action-item .action-desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: 2px;
+}
+
+.quick-action-item .action-chevron {
+  width: 14px;
+  height: 14px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .quick-actions-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   LIST PAGE — Modern Clean Design
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Breadcrumb */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  margin-bottom: var(--space-4);
+}
+
+.breadcrumb-link {
+  color: var(--text-secondary);
+  transition: color var(--duration-fast);
+}
+
+.breadcrumb-link:hover {
+  color: var(--primary-500);
+}
+
+.breadcrumb-sep {
+  color: var(--text-disabled);
+}
+
+.breadcrumb-current {
+  color: var(--text-primary);
+  font-weight: var(--font-medium);
+}
+
+/* Page Header */
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+
+.page-header-left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.page-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.page-header-title {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.page-header-subtitle {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Filter Bar */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  flex-wrap: wrap;
+}
+
+.filter-bar-search {
+  position: relative;
+  flex: 1;
+  min-width: 240px;
+}
+
+.filter-bar-search-icon {
+  position: absolute;
+  left: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  color: var(--text-disabled);
+  pointer-events: none;
+}
+
+.filter-bar-search-input {
+  width: 100%;
+  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  background: var(--surface-base);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+}
+
+.filter-bar-search-input::placeholder {
+  color: var(--text-disabled);
+}
+
+.filter-bar-search-input:focus {
+  border-color: var(--primary-500);
+  box-shadow: var(--shadow-focus);
+}
+
+.filter-bar-clear {
+  position: absolute;
+  right: var(--space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-disabled);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  transition: all var(--duration-fast);
+}
+
+.filter-bar-clear:hover {
+  color: var(--text-primary);
+  background: var(--surface-inset);
+}
+
+.filter-bar-clear svg {
+  width: 16px;
+  height: 16px;
+}
+
+.filter-bar-chips {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.filter-bar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+
+.filter-bar-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: none;
+  border: 1px solid var(--surface-border);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all var(--duration-fast);
+}
+
+.filter-bar-action:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.filter-bar-action svg {
+  width: 18px;
+  height: 18px;
+}
+
+.filter-bar-clear-all {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color var(--duration-fast);
+}
+
+.filter-bar-clear-all:hover {
+  color: var(--danger-500);
+}
+
+.filter-bar-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--surface-border);
+}
+
+/* Filter Chips */
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-sm);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-full);
+  background: var(--surface-raised);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  height: 36px;
+}
+
+.filter-chip:hover {
+  border-color: var(--text-disabled);
+  color: var(--text-primary);
+}
+
+.filter-chip.active {
+  border-color: var(--primary-500);
+  color: var(--primary-600);
+  background: var(--primary-50);
+}
+
+.filter-chip svg {
+  width: 14px;
+  height: 14px;
+  transition: transform var(--duration-fast);
+}
+
+.filter-chip-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: var(--radius-full);
+  background: var(--primary-500);
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.filter-chip-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-3);
+  height: 36px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+}
+
+.filter-chip-wrap:hover {
+  border-color: var(--text-disabled);
+}
+
+.filter-chip-wrap.filter-chip--active {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+}
+
+.filter-chip-label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.filter-chip--active .filter-chip-label {
+  color: var(--primary-600);
+  font-weight: var(--font-medium);
+}
+
+.filter-input-date,
+.filter-input-datetime,
+.filter-input-time {
+  height: 34px;
+  padding: 0 var(--space-2);
+  border: none;
+  background: transparent;
+  font-size: var(--text-sm);
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  cursor: pointer;
+  outline: none;
+}
+
+.filter-clear-btn {
+  background: none;
+  border: none;
+  color: var(--text-disabled);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0;
+  transition: color var(--duration-fast);
+}
+
+.filter-clear-btn:hover {
+  color: var(--danger-500);
+}
+
+.filter-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 200px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+  padding: var(--space-2) 0;
+}
+
+.filter-dropdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.filter-dropdown-clear {
+  font-size: var(--text-xs);
+  color: var(--primary-500);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color var(--duration-fast);
+}
+
+.filter-dropdown-clear:hover {
+  color: var(--primary-600);
+}
+
+.filter-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background var(--duration-fast);
+}
+
+.filter-dropdown-item:hover {
+  background: var(--surface-inset);
+}
+
+.filter-dropdown-item input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--primary-500);
+  cursor: pointer;
+}
+
+.filter-dropdown-item label {
+  cursor: pointer;
+  flex: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BULK ACTIONS BAR — Django-style above table
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.bulk-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+}
+
+.bulk-bar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.bulk-bar-label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.bulk-bar-select {
+  height: 36px;
+  padding: 0 var(--space-8) 0 var(--space-3);
+  font-size: var(--text-sm);
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  background: var(--surface-base);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 8px center;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  min-width: 180px;
+}
+
+.bulk-bar-select:focus {
+  border-color: var(--primary-500);
+  box-shadow: var(--shadow-focus);
+}
+
+.bulk-bar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DATA TABLE — Modern Clean Design
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.table-container {
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  position: relative;
+}
+
+.table-container .overflow-x-auto {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-border) transparent;
+}
+
+.table-container .data-table {
+  position: relative;
+}
+
+/* Ensure actions dropdown can escape scrollable container */
+.actions-dropdown {
+  position: relative;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table thead {
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+.data-table thead tr:first-child th:first-child {
+  border-top-left-radius: var(--radius-lg);
+}
+
+.data-table thead tr:first-child th:last-child {
+  border-top-right-radius: var(--radius-lg);
+}
+
+/* Table Header */
+.data-table thead {
+  background: var(--surface-base);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.data-table th {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.data-table th.col-checkbox {
+  width: 48px;
+  text-align: center;
+}
+
+.data-table th.col-actions {
+  width: 100px;
+  text-align: right;
+}
+
+.col-header-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: inherit;
+  transition: color var(--duration-fast);
+}
+
+.col-header-link:hover {
+  color: var(--primary-500);
+}
+
+.col-header-link.active {
+  color: var(--primary-600);
+  font-weight: 600;
+}
+
+.sort-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.sort-icon--asc {
+  transform: rotate(0deg);
+}
+
+.sort-icon--desc {
+  transform: rotate(180deg);
+}
+
+/* Table Body */
+.data-table tbody tr {
+  border-bottom: 1px solid var(--surface-border);
+  transition: background var(--duration-fast);
+}
+
+.data-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.data-table tbody tr:hover {
+  background: var(--surface-inset);
+}
+
+.data-table td {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+
+.data-table td.col-checkbox {
+  text-align: center;
+}
+
+.data-table td.col-actions {
+  text-align: right;
+}
+
+/* Row Checkbox */
+.row-checkbox {
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--surface-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  appearance: none;
+  background: var(--surface-raised);
+  transition: all var(--duration-fast);
+  position: relative;
+}
+
+.row-checkbox:checked {
+  background: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+.row-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Status Badges */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+.status-badge--success {
+  background: var(--success-50);
+  color: var(--success-700);
+}
+
+.status-badge--success svg {
+  color: var(--success-500);
+}
+
+.status-badge--muted {
+  background: var(--surface-inset);
+  color: var(--text-secondary);
+}
+
+.status-badge--muted svg {
+  color: var(--text-disabled);
+}
+
+/* Actions Dropdown */
+.actions-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.actions-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.actions-trigger:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.actions-trigger svg {
+  width: 16px;
+  height: 16px;
+}
+
+.actions-menu {
+  position: fixed;
+  right: auto;
+  top: auto;
+  min-width: 120px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: 9999;
+  padding: var(--space-1) 0;
+  transform-origin: top right;
+}
+
+.actions-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+  transition: background var(--duration-fast);
+}
+
+.actions-menu-item:hover {
+  background: var(--surface-inset);
+}
+
+.actions-menu-item svg {
+  width: 16px;
+  height: 16px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.actions-menu-item--danger {
+  color: var(--danger-500);
+}
+
+.actions-menu-item--danger svg {
+  color: var(--danger-500);
+}
+
+.actions-menu-item--danger:hover {
+  background: var(--danger-50);
+}
+
+/* Empty State */
+.empty-cell {
+  padding: var(--space-12) var(--space-4) !important;
+  text-align: center;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.empty-state-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--text-disabled);
+  opacity: 0.5;
+}
+
+.empty-state-text {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.text-muted {
+  color: var(--text-disabled);
+}
+
+/* Table Footer */
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--surface-border);
+  background: var(--surface-base);
+}
+
+.bulk-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.bulk-actions-label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.pagination-info {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.pagination-links {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.pagination-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  text-decoration: none;
+}
+
+.pagination-link:hover:not(.pagination-link--disabled):not(.pagination-link--active) {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.pagination-link--active {
+  background: var(--primary-500);
+  color: white;
+  border-color: var(--primary-500);
+}
+
+.pagination-link--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination-ellipsis {
+  padding: 0 var(--space-2);
+  color: var(--text-disabled);
+  font-size: var(--text-sm);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BUTTONS — Modern Clean Design
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  text-decoration: none;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+
+.btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.btn-primary {
+  background: var(--primary-500);
+  color: white;
+  border-color: var(--primary-500);
+}
+
+.btn-primary:hover {
+  background: var(--primary-600);
+  border-color: var(--primary-600);
+}
+
+.btn-secondary {
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  border-color: var(--surface-border);
+}
+
+.btn-secondary:hover {
+  background: var(--surface-inset);
+}
+
+.btn-ghost {
+  background: none;
+  color: var(--text-secondary);
+  border-color: transparent;
+}
+
+.btn-ghost:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.btn-outline-danger {
+  background: var(--surface-raised);
+  color: var(--danger-500);
+  border-color: var(--danger-500);
+}
+
+.btn-outline-danger:hover {
+  background: var(--danger-500);
+  color: white;
+}
+
+.btn-sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOPBAR — Modern Clean Design
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.admin-topbar {
+  height: var(--topbar-height);
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-bottom: 1px solid var(--surface-border);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--content-padding);
+  z-index: 30;
+  position: relative;
+}
+
+.admin-topbar::after {
+  display: none;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.topbar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.topbar-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.topbar-logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--primary-500);
+  border-radius: var(--radius-md);
+  color: white;
+}
+
+.topbar-logo-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface-inset);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  min-width: 320px;
+}
+
+.topbar-search:hover {
+  border-color: var(--primary-300);
+}
+
+.topbar-search svg {
+  color: var(--text-disabled);
+  flex-shrink: 0;
+}
+
+.topbar-search-placeholder {
+  color: var(--text-disabled);
+  font-size: var(--text-sm);
+  flex: 1;
+}
+
+.topbar-search-shortcut {
+  display: flex;
+  gap: 4px;
+}
+
+.topbar-search-shortcut kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  font-size: var(--text-2xs);
+  font-family: var(--font-mono);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+.topbar-user {
+  position: relative;
+}
+
+.topbar-user-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1);
+  border-radius: var(--radius-md);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.topbar-user-btn:hover {
+  background: var(--surface-inset);
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: var(--primary-100);
+  color: var(--primary-700);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.topbar-user-info {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.topbar-user-name {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.topbar-user-role {
+  font-size: var(--text-2xs);
+  color: var(--text-secondary);
+  line-height: 1.2;
+}
+
+.user-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  min-width: 200px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+  padding: var(--space-1) 0;
+}
+
+.user-dropdown-header {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.user-dropdown-name {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.user-dropdown-email {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+.user-dropdown-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.user-dropdown-item:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.user-dropdown-item.danger {
+  color: var(--danger-500);
+}
+
+.user-dropdown-item.danger:hover {
+  background: var(--danger-50);
+}
+
+.collapse-toggle,
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.collapse-toggle:hover,
+.icon-btn:hover {
+  background: var(--surface-inset);
+  color: var(--text-primary);
+}
+
+.collapse-toggle svg,
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SIDEBAR — Modern Clean Design
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.admin-sidebar {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-right: 1px solid var(--surface-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--duration-slow) var(--easing-out);
+  z-index: 20;
+  text-align: left;
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-3);
+  text-align: left;
+}
+
+.sidebar-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+.sidebar-nav-item {
+  margin-bottom: 2px;
+  text-align: left;
+}
+
+.sidebar-section {
+  padding: var(--space-4) 0 var(--space-2);
+  text-align: left;
+}
+
+.sidebar-section-label {
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-disabled);
+  text-align: left;
+}
+
+.sidebar-section-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  text-align: left;
+}
+
+.sidebar-section-toggle:hover {
+  color: var(--text-secondary);
+}
+
+.sidebar-section-toggle .sidebar-section-label {
+  flex: 1;
+}
+
+.sidebar-section-chevron {
+  transition: transform 0.2s ease;
+  color: var(--text-disabled);
+  flex-shrink: 0;
+}
+
+.sidebar-section-chevron.collapsed {
+  transform: rotate(0deg);
+}
+
+.sidebar-section-chevron:not(.collapsed) {
+  transform: rotate(90deg);
+}
+
+.sidebar-section-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+.sidebar-bottom {
+  border-top: 1px solid var(--surface-border);
+  padding: var(--space-3);
+  flex-shrink: 0;
+  text-align: left;
+}
+
+/* Nav Links */
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+  cursor: pointer;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.nav-link svg,
+.nav-link .material-symbols-outlined {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.6;
+  font-size: 18px;
+}
+
+.nav-link:hover {
+  background: var(--surface-inset);
+  color: var(--primary-600);
+}
+
+.nav-link:hover svg,
+.nav-link:hover .material-symbols-outlined {
+  opacity: 1;
+}
+
+.nav-link.active {
+  background: var(--primary-50);
+  color: var(--primary-600);
+  font-weight: 600;
+}
+
+.nav-link.active svg,
+.nav-link.active .material-symbols-outlined {
+  opacity: 1;
+  color: var(--primary-500);
+}
+
+.nav-link.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  background: var(--primary-500);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.nav-link-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-link--no-icon .nav-link-label {
+  padding-left: 0;
+}
+
+.nav-link--no-icon {
+  gap: 0;
+}
+
+.nav-link-badge {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  padding: 1px 6px;
+  background: var(--surface-inset);
+  color: var(--text-secondary);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--surface-border);
+}
+
+.nav-tooltip {
+  display: none;
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+  box-shadow: var(--shadow-md);
+  z-index: 50;
+  color: var(--text-primary);
+}
+
+.sidebar.collapsed .nav-tooltip {
+  display: block;
+}
+
+.admin-sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 35;
+}
+
+.admin-sidebar-overlay.open {
+  display: block;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOGGLE SWITCH — Modern Clean Design
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  width: 40px;
+  height: 22px;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  position: relative;
+  transition: background var(--duration-fast);
+  border: none;
+  padding: 0;
+  background: var(--surface-border);
+}
+
+.toggle-switch--on {
+  background: var(--primary-500);
+}
+
+.toggle-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-full);
+  background: white;
+  transition: transform var(--duration-fast) var(--easing-out);
+  box-shadow: var(--shadow-sm);
+}
+
+.toggle-switch--on .toggle-switch__thumb {
+  transform: translateX(18px);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   RESPONSIVE — List Page
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 1024px) {
+  .admin-sidebar {
+    width: var(--admin-sidebar-width, var(--sidebar-width));
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    z-index: 40;
+    transform: translateX(-100%);
+    transition: transform var(--duration-slow) var(--easing-out);
+  }
+
+  .admin-sidebar.open {
+    transform: translateX(0);
+  }
+
+  .admin-content__inner {
+    padding: var(--space-5) var(--space-4);
+  }
+
+  .page-header-title {
+    font-size: var(--text-xl);
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-bar-search {
+    min-width: auto;
+  }
+
+  .filter-bar-right {
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+
+  .table-footer {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .pagination {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .topbar-center {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .admin-content__inner {
+    padding: var(--space-4) var(--space-3);
+  }
+
+  .data-table th,
+  .data-table td {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+  }
+}
+
+/* ── Command Palette (global search) ─────────────────────────────────── */
+
+.command-palette-backdrop {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 15vh;
+}
+
+.command-palette {
+  width: 100%; max-width: 560px;
+  background: var(--surface-raised);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
+}
+
+.command-palette-header {
+  display: flex; align-items: center; gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.command-palette-header svg { color: var(--text-disabled); flex-shrink: 0; }
+
+.command-palette-input {
+  flex: 1; border: none; outline: none; background: transparent;
+  font-size: var(--text-base); color: var(--text-primary);
+  font-family: var(--font-sans);
+}
+.command-palette-input::placeholder { color: var(--text-disabled); }
+
+.command-palette-esc {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 2px 6px; font-size: var(--text-2xs); font-family: var(--font-mono);
+  background: var(--surface-inset); border: 1px solid var(--surface-border);
+  border-radius: var(--radius-xs); color: var(--text-secondary);
+}
+
+.command-palette-results {
+  max-height: 360px; overflow-y: auto;
+  padding: var(--space-2) 0;
+}
+
+.command-palette-result {
+  display: flex; align-items: center; gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  text-decoration: none; color: var(--text-primary);
+  transition: background var(--duration-fast);
+  cursor: pointer;
+}
+.command-palette-result:hover,
+.command-palette-result--active {
+  background: var(--surface-inset);
+}
+
+.command-palette-result-icon {
+  display: flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--radius-md);
+  background: var(--surface-inset); color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.command-palette-result-text {
+  flex: 1; min-width: 0;
+  display: flex; flex-direction: column;
+}
+
+.command-palette-result-label {
+  font-size: var(--text-sm); font-weight: var(--font-medium);
+  color: var(--text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.command-palette-result-sublabel {
+  font-size: var(--text-xs); color: var(--text-secondary);
+  font-family: var(--font-mono);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.command-palette-result-badge {
+  font-size: var(--text-2xs); font-weight: var(--font-medium);
+  padding: 2px 8px; border-radius: var(--radius-full);
+  text-transform: capitalize; flex-shrink: 0;
+}
+.badge-model {
+  background: var(--primary-100); color: var(--primary-700);
+}
+.badge-field {
+  background: var(--surface-inset); color: var(--text-secondary);
+}
+
+.command-palette-empty {
+  padding: var(--space-8) var(--space-4);
+  text-align: center; color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.command-palette-footer {
+  display: flex; align-items: center; gap: var(--space-4);
+  padding: var(--space-2) var(--space-4);
+  border-top: 1px solid var(--surface-border);
+  font-size: var(--text-2xs); color: var(--text-disabled);
+}
+.command-palette-footer kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 1px 4px; font-family: var(--font-mono);
+  background: var(--surface-inset); border: 1px solid var(--surface-border);
+  border-radius: var(--radius-xs);
+  margin-right: 2px;
+}
+