/* ── CSS Variables — Viatec Theme (matches Graffs Dashboard) ────────────────── */
:root {
  /* Core palette */
  --primary:              217 91% 60%;
  --primary-foreground:   0 0% 100%;
  --background:           210 40% 98%;
  --foreground:           222 47% 11%;
  --card:                 0 0% 100%;
  --card-foreground:      222 47% 11%;
  --popover:              0 0% 100%;
  --popover-foreground:   222 47% 11%;
  --secondary:            210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted:                210 40% 96%;
  --muted-foreground:     215 16% 47%;
  --accent:               210 40% 96%;
  --accent-foreground:    222 47% 11%;
  --destructive:          0 84% 60%;
  --border:               214 32% 91%;
  --input:                214 32% 91%;
  --ring:                 217 91% 60%;
  --sidebar:              210 40% 98%;

  /* Semantic */
  --success:              142 71% 45%;
  --success-foreground:   0 0% 100%;
  --warning:              38 92% 50%;
  --warning-foreground:   220 17% 13%;
  --danger:               0 84% 60%;
  --danger-foreground:    0 0% 100%;

  /* Radius */
  --radius: 0.5rem;

  /* Letter spacing */
  --tracking-heading: -0.03em;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse 110% 60% at 12% 0%, rgba(40,80,210,0.10) 0%, transparent 52%),
    radial-gradient(ellipse 95% 55% at 88% 100%, rgba(90,45,220,0.08) 0%, transparent 52%),
    radial-gradient(ellipse 70% 50% at 50% 55%, rgba(20,60,190,0.05) 0%, transparent 65%),
    hsl(var(--background));
  min-height: 100dvh;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--foreground) / 0.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--foreground) / 0.18); }

/* ── Glass / Surface ─────────────────────────────────────────────────────────── */
.glass {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
}

/* Premium glass for modals and elevated surfaces */
.glass-elevated {
  background:
    radial-gradient(ellipse 110% 70% at 18% 0%, rgba(255,255,255,0.90) 0%, transparent 52%),
    rgba(255,255,255,0.78);
  backdrop-filter: blur(40px) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(160%) brightness(1.02);
  border-top:    0.5px solid rgba(255,255,255,0.95);
  border-left:   0.5px solid rgba(255,255,255,0.80);
  border-right:  0.5px solid rgba(0,0,0,0.04);
  border-bottom: 0.5px solid rgba(0,0,0,0.05);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.95) inset,
    0 0 0 0.5px rgba(255,255,255,0.60) inset,
    0 4px 16px rgba(0,0,0,0.07),
    0 1px 4px rgba(0,0,0,0.04),
    0 8px 32px rgba(55,100,230,0.06);
}

.glass-subtle {
  background:
    radial-gradient(ellipse 100% 65% at 22% 0%, rgba(255,255,255,0.75) 0%, transparent 55%),
    rgba(255,255,255,0.60);
  backdrop-filter: blur(28px) saturate(150%) brightness(1.01);
  -webkit-backdrop-filter: blur(28px) saturate(150%) brightness(1.01);
  border: 0.5px solid rgba(255,255,255,0.80);
  box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 3px 12px rgba(0,0,0,0.06);
}

.glass-topbar {
  backdrop-filter: blur(64px) saturate(180%) brightness(1.01);
  -webkit-backdrop-filter: blur(64px) saturate(180%) brightness(1.01);
  background:
    radial-gradient(ellipse 50% 140% at 0% 50%, rgba(255,255,255,0.92) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,251,255,0.90) 100%);
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 2px 16px rgba(0,0,0,0.06);
}

.glass-sidebar {
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(255,255,255,0.88) 0%, transparent 55%),
    rgba(255,255,255,0.72);
  backdrop-filter: blur(48px) saturate(170%) brightness(1.01);
  -webkit-backdrop-filter: blur(48px) saturate(170%) brightness(1.01);
  border-right: 0.5px solid rgba(0,0,0,0.07);
  box-shadow: 2px 0 16px rgba(0,0,0,0.04);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.5rem 1rem; border-radius: var(--radius); font-size: 0.875rem;
  font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
  border: none; outline: none; white-space: nowrap;
  font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn-primary {
  background: linear-gradient(135deg, hsl(217 91% 58%), hsl(230 80% 52%));
  color: #fff;
  box-shadow: 0 2px 8px hsl(217 91% 55% / 0.3), 0 1px 2px rgb(0 0 0 / 0.06);
  border: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  background: linear-gradient(135deg, hsl(217 91% 54%), hsl(230 80% 48%));
  box-shadow: 0 4px 16px hsl(217 91% 55% / 0.4), 0 1px 3px rgb(0 0 0 / 0.08);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px hsl(217 91% 55% / 0.25); }
.btn-secondary {
  background: hsl(var(--card)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.btn-secondary:hover { background: hsl(var(--accent)); border-color: hsl(var(--foreground) / 0.15); }

.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--foreground) / 0.05); }

.btn-danger {
  background: linear-gradient(135deg, hsl(0 84% 58%), hsl(10 78% 52%));
  color: #fff; border: none;
  box-shadow: 0 2px 8px hsl(0 84% 55% / 0.3);
}
.btn-danger:hover {
  background: linear-gradient(135deg, hsl(0 84% 54%), hsl(10 78% 48%));
  box-shadow: 0 4px 16px hsl(0 84% 55% / 0.4);
  transform: translateY(-1px);
}

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: calc(var(--radius) - 2px); }
.btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; border-radius: calc(var(--radius) - 2px); }

/* View button — outlined with primary accent */
.btn-view {
  padding: 0.3rem 0.75rem; font-size: 0.75rem; border-radius: 0.5rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  gap: 5px;
}
.btn-view:hover {
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--primary));
}

/* Delete button — subtle icon button with red hover */
.btn-delete {
  padding: 0.35rem; width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: transparent;
  color: hsl(var(--muted-foreground) / 0.5);
}
.btn-delete:hover {
  background: hsl(var(--danger) / 0.08);
  color: hsl(var(--danger));
}

/* Close modal button — outlined, prominent */
.btn-close-modal {
  padding: 0.45rem 1.25rem; font-size: 0.8125rem; border-radius: 0.5rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  font-weight: 500;
}
.btn-close-modal:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--foreground) / 0.15);
}

/* ── Pagination — glassmorphic pill (matches dock style) ─────────────────────── */
.pg-dock {
  display: inline-flex; align-items: center; gap: 2px;
  background:
    linear-gradient(170deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.48) 40%, rgba(235,242,255,0.54) 100%);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.12);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.12);
  border: 1px solid;
  border-color: rgba(255,255,255,0.9) rgba(200,215,255,0.28) rgba(180,200,255,0.2) rgba(255,255,255,0.72);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.96) inset,
    1.5px 0 0 rgba(255,255,255,0.42) inset,
    0 2px 6px rgba(0,0,0,0.06),
    0 6px 20px rgba(0,0,0,0.08);
  padding: 6px 8px;
  border-radius: 20px;
}
.pg-divider {
  width: 0.5px; height: 20px; margin: 0 3px;
  background: linear-gradient(transparent, rgba(110,145,255,0.26) 50%, transparent);
  border-radius: 9999px; flex-shrink: 0;
}
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  border: none; background: transparent;
  color: rgba(48,72,158,0.46);
  cursor: pointer; transition: all 0.15s ease;
}
.pg-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.5);
  color: rgba(22,67,210,0.8);
}
.pg-btn:active:not(:disabled) { transform: scale(0.92); }
.pg-btn:disabled { opacity: 0.3; cursor: default; }

.pg-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: 10px;
  border: none; background: transparent;
  color: rgba(48,72,158,0.62);
  font-size: 13px; font-weight: 500; letter-spacing: -0.02em;
  cursor: pointer; transition: all 0.15s ease;
}
.pg-num:hover { background: rgba(255,255,255,0.5); color: rgba(22,67,210,0.8); }

/* Active page — glass pill like dock active item */
.pg-num-active {
  position: relative;
  font-weight: 620;
  color: rgba(22,67,210,0.92);
  background:
    radial-gradient(150% 90% at 15% 8%, rgba(255,255,255,0.9) 0%, transparent 50%),
    linear-gradient(158deg, rgba(255,255,255,0.55) 0%, rgba(210,228,255,0.3) 100%);
  border: 0.75px solid;
  border-color: rgba(255,255,255,0.98) rgba(185,210,255,0.28) rgba(165,195,255,0.22) rgba(255,255,255,0.82);
  box-shadow: 0 1.5px 0 rgba(255,255,255,0.94) inset;
}
.pg-num-active:hover {
  color: rgba(22,67,210,0.92);
  background:
    radial-gradient(150% 90% at 15% 8%, rgba(255,255,255,0.95) 0%, transparent 50%),
    linear-gradient(158deg, rgba(255,255,255,0.6) 0%, rgba(210,228,255,0.35) 100%);
}

/* ── Inputs ──────────────────────────────────────────────────────────────────── */
.input {
  width: 100%; height: 2.5rem; padding: 0 0.75rem;
  border-radius: var(--radius); border: 1px solid hsl(214 32% 88%);
  background: #f8f9fc;
  font-size: 13px; color: hsl(222 47% 20%);
  transition: all 0.2s ease; outline: none;
  font-family: inherit;
  box-shadow: none;
}
.input:hover { border-color: hsl(var(--primary) / 0.3); }
.input:focus {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.06);
  background: #fff;
}
.input::placeholder { color: #94a3b8; font-size: 13px; }

.input-label {
  display: block; font-size: 12px; font-weight: 600;
  color: hsl(222 47% 25%); margin-bottom: 0.375rem;
}

/* ── Textarea ────────────────────────────────────────────────────────────────── */
textarea.input {
  height: auto; min-height: 4rem; padding: 0.5rem 0.75rem;
  resize: vertical; line-height: 1.5;
  font-size: 13px; color: hsl(222 47% 20%);
}

/* ── Select (hidden, replaced by custom dropdown) ────────────────────────── */
select.input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: #f8f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.75rem center !important;
  padding-right: 2.25rem;
  font-size: 13px;
  color: hsl(222 47% 20%);
  cursor: pointer;
}
select.input:focus {
  background-color: #fff !important;
  outline: none !important;
}

/* ── Custom Dropdown ─────────────────────────────────────────────────────── */
.custom-select {
  position: relative;
}
.custom-select-trigger {
  width: 100%; height: 2.5rem; padding: 0 2.25rem 0 0.75rem;
  border-radius: var(--radius); border: 1px solid hsl(214 32% 88%);
  background: #f8f9fc;
  font-size: 13px; color: hsl(222 47% 20%);
  cursor: pointer; outline: none;
  display: flex; align-items: center;
  transition: all 0.15s ease;
  position: relative;
}
.custom-select-trigger::after {
  content: '';
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid hsl(215 16% 55%);
  transition: transform 0.15s ease;
}
.custom-select-trigger.open::after {
  transform: translateY(-50%) rotate(180deg);
}
.custom-select-trigger:hover,
.custom-select-trigger.open {
  border-color: hsl(var(--primary) / 0.45);
  background: #fff;
}
.custom-select-trigger.open {
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.06);
  border-radius: var(--radius) var(--radius) 0 0;
}
.custom-select-trigger .placeholder {
  color: #94a3b8;
}
.custom-select-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid hsl(var(--primary) / 0.2);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  max-height: 15rem; overflow-y: auto;
  padding: 0.25rem 0;
}
.custom-select-menu::-webkit-scrollbar { width: 4px; }
.custom-select-menu::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 2px; }
.custom-select-option {
  padding: 0.4rem 0.75rem;
  font-size: 13px;
  color: hsl(222 47% 25%);
  cursor: pointer;
  transition: all 0.1s ease;
  display: flex; align-items: center; gap: 0.5rem;
}
.custom-select-option:hover {
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary));
}
.custom-select-option.selected {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  font-weight: 600;
}
.custom-select-option.selected::before {
  content: '✓';
  font-size: 11px;
  color: hsl(var(--primary));
  font-weight: 700;
}

/* ── Badge ───────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 9999px; font-size: 0.75rem;
  font-weight: 500; border: 0.5px solid transparent;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-success   { background: hsl(var(--success) / 0.12); color: hsl(142 71% 32%); border-color: hsl(var(--success) / 0.25); }
.badge-warning   { background: hsl(var(--warning) / 0.12); color: hsl(38 92% 30%); border-color: hsl(var(--warning) / 0.30); }
.badge-danger    { background: hsl(var(--danger) / 0.12); color: hsl(0 84% 45%); border-color: hsl(var(--danger) / 0.25); }
.badge-primary   { background: hsl(var(--primary) / 0.12); color: hsl(217 91% 45%); border-color: hsl(var(--primary) / 0.25); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* ── Card (matches dashboard card styling) ───────────────────────────────────── */
.card {
  border-radius: 1rem; padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
  overflow-x: auto;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* ── Table (clean, refined) ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; table-layout: auto; overflow-x: auto; }
.table td:last-child, .table th:last-child { white-space: nowrap; }
.table th {
  text-align: left; padding: 0.65rem 1rem; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}
.table td {
  padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border) / 0.4);
  color: hsl(var(--foreground));
}
.table tr:hover td { background: hsl(var(--accent) / 0.5); }
.table tr:last-child td { border-bottom: none; }

/* ── Sidebar Nav ─────────────────────────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem;
  border-radius: var(--radius); font-size: 0.875rem; font-weight: 500;
  color: hsl(var(--muted-foreground)); cursor: pointer;
  transition: all 0.15s ease; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.6); color: hsl(var(--foreground)); }
.nav-item.active {
  background: rgba(255,255,255,0.8); color: hsl(217 91% 45%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; background: rgba(0,0,0,0.04); padding: 3px; border-radius: var(--radius); }
.tab {
  flex: 1; padding: 0.45rem 1rem; border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  color: hsl(var(--muted-foreground)); transition: all 0.18s ease; text-align: center;
}
.tab.active { background: #fff; color: hsl(var(--foreground)); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,15,30,0.3);
  backdrop-filter: blur(6px);
  z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 28rem;
  border-radius: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow:
    0 24px 64px rgba(0,0,0,0.15),
    0 8px 24px rgba(0,0,0,0.08),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 0;
  margin: auto 0;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  flex-shrink: 0;
}
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  display: flex; align-items: center; gap: 0.75rem;
}
.modal-header-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-header h3 {
  font-size: 0.9375rem; font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -0.02em;
}
.modal-header p {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 1px;
}
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid hsl(var(--border));
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
}

/* Input label refinement for modals */
.modal .input-label {
  font-size: 12px; font-weight: 600;
  color: hsl(222 47% 25%);
  margin-bottom: 0.375rem;
  display: flex; align-items: center; gap: 0.375rem;
}
.modal .input-label .label-hint {
  font-weight: 400; font-size: 11px;
  color: hsl(var(--muted-foreground));
}
/* All modal inputs — unified styling */
.modal .input,
.modal .input-sql-editor,
.modal .input-json-editor,
.modal textarea.input {
  background: #f8f9fc;
  border: 1px solid hsl(214 32% 88%);
  color: hsl(222 47% 20%);
  font-size: 13px;
}
.modal .input:focus,
.modal .input-sql-editor:focus,
.modal .input-json-editor:focus,
.modal textarea.input:focus {
  background: #fff;
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.06);
}
/* Code textareas keep monospace + smaller size */
.modal .input-sql-editor,
.modal .input-json-editor {
  font-size: 11px;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  line-height: 1.55;
}
/* Regular textarea */
.modal textarea.input {
  line-height: 1.5;
  font-size: 13px;
}

/* SQL editor textarea — light code theme */
.input-sql-editor {
  width: 100%; min-height: 5rem; resize: vertical;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #f8f9fc;
  color: hsl(222 47% 25%);
  border: 1px solid hsl(214 32% 88%);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
  outline: none;
  letter-spacing: -0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-sql-editor:focus {
  border-color: hsl(217 91% 55% / 0.45);
  box-shadow: 0 0 0 3px hsl(217 91% 55% / 0.06);
  background: #fff;
}
.input-sql-editor::placeholder { color: #94a3b8; font-size: 11px; }
.input-sql-editor::selection { background: hsl(217 91% 55% / 0.12); }

/* JSON/Widget config editor textarea — light code theme */
.input-json-editor {
  width: 100%; min-height: 4rem; resize: vertical;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #f8f9fc;
  color: hsl(222 47% 25%);
  border: 1px solid hsl(214 32% 88%);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
  outline: none;
  letter-spacing: -0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-json-editor:focus {
  border-color: hsl(217 91% 55% / 0.45);
  box-shadow: 0 0 0 3px hsl(217 91% 55% / 0.06);
  background: #fff;
}
.input-json-editor::placeholder { color: #94a3b8; font-size: 11px; }
.input-json-editor::selection { background: hsl(217 91% 55% / 0.12); }

/* SQL preview cell in tables — dark mini code block */
.sql-preview-cell {
  display: block;
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 0.6875rem;
  line-height: 1.4;
  background: #1e1e2e;
  color: #cdd6f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,0.04);
}
/* Highlight keywords inline */
.sql-preview-cell .kw { color: #cba6f7; font-weight: 600; }
.sql-preview-cell .fn { color: #89b4fa; }
.sql-preview-cell .str { color: #a6e3a1; }
.sql-preview-cell .num { color: #fab387; }

/* ── Stat Tiles (white card + colored icon square) ───────────────────────── */
.tile {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
  transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
}
.tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tile-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.625rem; flex-shrink: 0;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
}
.tile-icon i, .tile-icon svg { color: #fff !important; stroke: #fff; }
.tile-content { min-width: 0; }
.tile-value {
  font-size: 1.375rem; font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  color: hsl(var(--foreground));
}
.tile-label {
  font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}

/* Icon square colors */
.tile-primary .tile-icon { background: hsl(217 91% 58%); }
.tile-success .tile-icon { background: hsl(152 69% 42%); }
.tile-warning .tile-icon { background: hsl(38 92% 50%); }
.tile-danger  .tile-icon { background: hsl(0 84% 58%); }
.tile-muted   .tile-icon { background: hsl(215 16% 52%); }
.tile-purple  .tile-icon { background: hsl(265 70% 55%); }

/* ── Misc ────────────────────────────────────────────────────────────────────── */
.divider { height: 0.5px; background: rgba(0,0,0,0.06); margin: 0.75rem 0; }

[x-cloak] { display: none !important; }

.fade-in { animation: fadeIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.spinner {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Running/executing state pulse for buttons */
.btn-primary:disabled {
  opacity: 0.85;
  background: linear-gradient(135deg, hsl(217 91% 52%), hsl(230 80% 46%));
  animation: btn-pulse 2s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 2px 8px hsl(217 91% 55% / 0.3); }
  50% { box-shadow: 0 2px 20px hsl(217 91% 55% / 0.5); }
}

.code-block {
  background: hsl(var(--foreground)); color: #e2e8f0;
  border-radius: var(--radius); padding: 0.75rem 1rem;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace; font-size: 0.8rem;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

/* ── SQL/JSON syntax highlighting (Prism.js overrides) ───────────────────── */
.sql-editor {
  border-radius: 0.375rem; padding: 0.25rem 0.5rem;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px !important; line-height: 1.35;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  max-height: 10rem; overflow-y: auto;
  tab-size: 2;
  letter-spacing: -0.02em;
}
.sql-editor code { font-family: inherit; font-size: 10px !important; background: none; padding: 0; }
.sql-editor code * { font-size: 10px !important; }
/* Dark theme (generated SQL) */
.sql-editor-dark {
  background: #1e1e2e; color: #cdd6f4;
  border: 1px solid rgba(255,255,255,0.06);
}
.sql-editor-dark .token.keyword { color: #cba6f7; font-weight: 600; }
.sql-editor-dark .token.function { color: #89b4fa; }
.sql-editor-dark .token.string { color: #a6e3a1; }
.sql-editor-dark .token.number { color: #fab387; }
.sql-editor-dark .token.operator { color: #89dceb; }
.sql-editor-dark .token.punctuation { color: #6c7086; }
.sql-editor-dark .token.comment { color: #585b70; font-style: italic; }
.sql-editor-dark .token.property { color: #89b4fa; }
.sql-editor-dark .token.boolean { color: #fab387; }
.sql-editor-dark .token.null { color: #f38ba8; }

/* Light theme (expected SQL) */
.sql-editor-light {
  background: #f8f9fc; color: #1e1e2e;
  border: 1px solid hsl(var(--border));
}
.sql-editor-light .token.keyword { color: #7c3aed; font-weight: 600; }
.sql-editor-light .token.function { color: #2563eb; }
.sql-editor-light .token.string { color: #16a34a; }
.sql-editor-light .token.number { color: #ea580c; }
.sql-editor-light .token.operator { color: #0891b2; }
.sql-editor-light .token.punctuation { color: #94a3b8; }
.sql-editor-light .token.comment { color: #94a3b8; font-style: italic; }
.sql-editor-light .token.property { color: #2563eb; }
.sql-editor-light .token.boolean { color: #ea580c; }
.sql-editor-light .token.null { color: #dc2626; }

/* ── Toast ────────────────────────────────────────────────────────────────────── */
.toast {
  border-radius: var(--radius); padding: 0.75rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: slideIn 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ── Focus ring (accessibility) ─────────────────────────────────────────────── */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.app-layout { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.main-content { flex: 1; overflow-y: auto; }
/* topbar removed — header is now a plain flex bar matching dashboard's ai-topbar */
.page {
  padding: 0.5rem 1.5rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ── Floating Dock Nav (matches dashboard glassmorphic pill) ──────────────── */
.nav-dock {
  position: relative;
  display: flex; align-items: center; gap: 3px;
  background:
    linear-gradient(170deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.48) 40%, rgba(235,242,255,0.54) 100%);
  backdrop-filter: blur(56px) saturate(220%) brightness(1.16);
  -webkit-backdrop-filter: blur(56px) saturate(220%) brightness(1.16);
  border: 1px solid;
  border-color: rgba(255,255,255,0.9) rgba(200,215,255,0.28) rgba(180,200,255,0.2) rgba(255,255,255,0.72);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.96) inset,
    1.5px 0 0 rgba(255,255,255,0.42) inset,
    0 -1px 0 rgba(180,205,255,0.18) inset,
    0 2px 6px rgba(0,0,0,0.06),
    0 6px 20px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.05);
  padding: 10px 11px;
  border-radius: 30px;
}
/* Inner border glow — disabled to avoid z-index issues with Alpine.js template rendering */

/* Divider between nav groups */
.nav-dock-divider {
  flex-shrink: 0; width: 0.5px; height: 26px; margin: 0 3px;
  background: linear-gradient(transparent, rgba(110,145,255,0.26) 50%, transparent);
  border-radius: 9999px;
}

/* Nav items */
.nav-dock-item {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; min-width: 44px; padding: 0 15px 0 11px;
  border-radius: 16px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.02em;
  color: rgba(48,72,158,0.62); cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
  white-space: nowrap; text-decoration: none;
}
.nav-dock-item i {
  width: 18px; height: 18px; flex-shrink: 0;
  color: rgba(48,72,158,0.46);
  stroke-width: 1.65;
}
.nav-dock-item:hover {
  color: rgba(48,72,158,0.80);
}
.nav-dock-item:hover i { color: rgba(48,72,158,0.65); }
.nav-dock-item:active { filter: brightness(0.9); }

/* Active item — glass pill with blue text */
.nav-dock-item.active {
  font-weight: 620;
  color: rgba(22,67,210,0.92);
}
.nav-dock-item.active i {
  color: rgba(22,67,210,0.92);
  stroke-width: 2.1;
}
/* Active background — glass pill effect */
.nav-dock-item.active::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px;
  background:
    radial-gradient(150% 90% at 15% 8%, rgba(255,255,255,0.9) 0%, transparent 50%),
    linear-gradient(158deg, rgba(255,255,255,0.55) 0%, rgba(210,228,255,0.3) 100%);
  backdrop-filter: blur(18px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.08);
  border: 0.75px solid;
  border-color: rgba(255,255,255,0.98) rgba(185,210,255,0.28) rgba(165,195,255,0.22) rgba(255,255,255,0.82);
  box-shadow: 0 1.5px 0 rgba(255,255,255,0.94) inset;
  z-index: 0;
}
.nav-dock-item.active > * { position: relative; z-index: 1; }

.nav-dock-item .nav-count {
  font-size: 11px; font-weight: 600;
  margin-left: 1px; opacity: 0.7;
}

/* Role pill styles now use Tailwind classes directly in the template */

/* ── Page Header (in-content) ────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.page-header h2 {
  font-size: 1.125rem; font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: var(--tracking-heading);
}