/* ============================================
   GLITCH_CORE — COMPONENTS CSS
   ============================================ */


/* ════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  min-width: 260px;
  max-width: 360px;
  pointer-events: all;
  box-shadow: 0 8px 32px #00000088;
  animation: toast-in 0.35s var(--ease-out) both;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.toast.toast-success::before { background: var(--neon-green); box-shadow: var(--glow-green); }
.toast.toast-error::before   { background: var(--neon-red);   box-shadow: var(--glow-red); }
.toast.toast-warn::before    { background: var(--neon-yellow); }
.toast.toast-info::before    { background: var(--neon-cyan);  box-shadow: var(--glow-cyan); }

.toast.toast-out { animation: toast-out 0.3s var(--ease-in) both; }

.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.toast-content { flex: 1; }
.toast-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.toast-msg {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}
.toast-close:hover { color: var(--text-primary); }
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  animation: toast-progress linear both;
  transform-origin: left;
}


/* ════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000099;
  backdrop-filter: blur(4px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px #00000088, 0 0 0 1px var(--border-accent);
  animation: modal-in 0.3s var(--ease-out) both;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neon-cyan);
  letter-spacing: 0.12em;
  text-shadow: var(--glow-cyan);
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}
.modal-close:hover { color: var(--neon-red); background: #ff224415; }

.modal-body {
  padding: 1.2rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════
   SEARCH OVERLAY
   ════════════════════════════════════════════ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: #00000077;
  backdrop-filter: blur(6px);
  z-index: 8000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: fadeIn 0.15s ease;
}
.search-overlay.hidden { display: none; }

.search-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  width: 90%;
  max-width: 560px;
  overflow: hidden;
  box-shadow: 0 24px 64px #00000099;
  animation: modal-in 0.25s var(--ease-out) both;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-dim);
}
.search-icon { font-size: 1.2rem; color: var(--text-muted); }
#search-global {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
#search-global::placeholder { color: var(--text-muted); }
.search-input-wrap kbd {
  font-size: 0.6rem;
  padding: 3px 6px;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.search-results { max-height: 320px; overflow-y: auto; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-dim);
}
.search-result-item:hover, .search-result-item.selected { background: var(--bg-hover); }
.sr-icon { color: var(--text-muted); font-size: 0.9rem; width: 20px; text-align: center; }
.sr-content { flex: 1; }
.sr-name { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); }
.sr-path { font-size: 0.65rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 1px; }
.sr-type { font-family: var(--font-mono); font-size: 0.6rem; padding: 2px 6px; border-radius: 3px; }

.search-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}


/* ════════════════════════════════════════════
   CONTEXT MENU
   ════════════════════════════════════════════ */
.context-menu {
  position: fixed;
  z-index: 7000;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0 8px 32px #00000088;
  animation: fadeInScale 0.15s var(--ease-out);
}
.context-menu.hidden { display: none; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.ctx-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.ctx-item.danger:hover { color: var(--neon-red); }
.ctx-item .ctx-icon { width: 16px; text-align: center; font-size: 0.85rem; }
.ctx-divider { height: 1px; background: var(--border-dim); margin: 3px 0; }


/* ════════════════════════════════════════════
   FILE MANAGER
   ════════════════════════════════════════════ */
.file-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.file-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  min-width: 0;
  overflow-x: auto;
}
.fbc-item { color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: color 0.2s; }
.fbc-item:hover { color: var(--neon-cyan); }
.fbc-item.active { color: var(--neon-cyan); cursor: default; }
.fbc-sep { color: var(--text-muted); flex-shrink: 0; }

.view-toggle { display: flex; gap: 2px; }
.view-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  border-radius: 0;
}
.view-btn:first-child { border-radius: 4px 0 0 4px; }
.view-btn:last-child  { border-radius: 0 4px 4px 0; }
.view-btn.active { background: var(--bg-active); border-color: var(--neon-cyan); color: var(--neon-cyan); }

/* Drop Zone */
.drop-zone {
  border: 2px dashed var(--border-mid);
  border-radius: 6px;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  transition: all 0.25s ease;
  margin-bottom: 1rem;
  display: none; /* JS sets display on dragenter */
  cursor: pointer;
}
.drop-zone.active-drop {
  border-color: var(--neon-cyan);
  background: #00d4ff08;
  color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
  animation: neon-pulse 1.5s ease infinite;
}
.drop-zone-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; }

/* File Grid */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.file-list-view .file-grid {
  grid-template-columns: 1fr;
  gap: 2px;
}

.file-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 0.9rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: center;
  user-select: none;
}
.file-card:hover {
  border-color: var(--neon-cyan);
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px #00d4ff15;
}
.file-card.selected {
  border-color: var(--neon-green);
  background: #00ff8810;
  box-shadow: 0 0 0 1px var(--neon-green);
}
.file-card.folder { }

.file-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 12px currentColor;
}
.file-name {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.3;
}
.file-meta {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  font-family: var(--font-mono);
}
.file-menu-btn {
  position: absolute;
  top: 6px; right: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0;
  padding: 2px 4px;
  border-radius: 3px;
  transition: opacity 0.2s, background 0.2s;
}
.file-card:hover .file-menu-btn { opacity: 1; }
.file-menu-btn:hover { background: var(--bg-active); color: var(--text-primary); }

/* List view file row */
.file-list-view .file-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-radius: 4px;
  transform: none !important;
}
.file-list-view .file-icon { font-size: 1.1rem; margin-bottom: 0; flex-shrink: 0; }
.file-list-view .file-name { flex: 1; font-size: 0.75rem; word-break: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list-view .file-meta { margin-top: 0; min-width: 60px; text-align: right; }
.file-list-view .file-size { min-width: 60px; text-align: right; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.65rem; }

.upload-drop-area {
  border: 2px dashed var(--border-mid);
  border-radius: 6px;
  padding: 2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload-drop-area:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: #00d4ff06;
}

/* File Status Bar */
.file-status-bar {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
}

/* Folder hover hint */
.folder-hint {
  position: absolute;
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  color: var(--neon-cyan);
  background: var(--bg-deep);
  border: 1px solid var(--neon-cyan);
  border-radius: 3px;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
  pointer-events: none;
  animation: fadeIn 0.15s ease both;
  z-index: 10;
}

/* File Preview */
.file-preview-content { text-align: center; }
.file-preview-content img, .file-preview-content video {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 4px;
  border: 1px solid var(--border-mid);
}
.file-preview-code {
  background: var(--bg-deep);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--neon-green);
  text-align: left;
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre;
}
.file-preview-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  margin-top: 1rem;
  text-align: left;
}
.fpi-label { color: var(--text-muted); }
.fpi-value { color: var(--text-primary); }



/* ════════════════════════════════════════════
   TABLE MANAGER — LAYOUT
   ════════════════════════════════════════════ */

/* Two-column layout: sidebar + main */
.table-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  overflow: hidden;
  min-height: 480px;
}

/* LEFT SIDEBAR */
.table-sidebar {
  background: var(--bg-deep);
  border-right: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border-dim);
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
  letter-spacing: .1em;
  flex-shrink: 0;
}

.btn-icon-sm {
  background: none;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  line-height: 1;
}
.btn-icon-sm:hover { color: var(--neon-green); border-color: var(--neon-green); }

.table-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: .35rem 0;
}

.table-sidebar-empty {
  padding: 1.25rem .75rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.8;
}

.table-sidebar-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  cursor: pointer;
  transition: background .15s;
  border-left: 2px solid transparent;
  user-select: none;
}
.table-sidebar-item:hover {
  background: var(--bg-hover);
  border-left-color: var(--border-mid);
}
.table-sidebar-item.active {
  background: var(--bg-card);
  border-left-color: var(--neon-cyan);
}

.tsi-icon {
  font-size: .7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.table-sidebar-item.active .tsi-icon { color: var(--neon-cyan); }

.tsi-name {
  flex: 1;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-sidebar-item.active .tsi-name { color: var(--neon-cyan); }

.tsi-count {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: .05rem .35rem;
  flex-shrink: 0;
}

/* RIGHT MAIN PANE */
.table-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
}

.tbl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-muted);
}

.table-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border-dim);
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--bg-deep);
}

.tbl-stats {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
  letter-spacing: .05em;
}

/* TABLE GRID */
.data-table-wrap {
  overflow: auto;
  flex: 1;
  background: var(--bg-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .72rem;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-deep);
}

.data-table th {
  padding: 0;
  border-bottom: 2px solid var(--border-mid);
  border-right: 1px solid var(--border-dim);
  white-space: nowrap;
  min-width: 100px;
}

.th-row-num, .td-row-num {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  color: var(--text-muted);
  font-size: .65rem;
  border-right: 1px solid var(--border-dim);
  background: var(--bg-deep);
}

.th-inner {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .6rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-secondary);
  letter-spacing: .08em;
}

.th-colname { flex: 1; }

.th-badge {
  font-family: var(--font-mono);
  font-size: .55rem;
  padding: .05rem .25rem;
  border-radius: 2px;
  font-weight: 700;
  flex-shrink: 0;
}
.th-badge.pk  { background: #ffe60022; color: var(--neon-yellow); border: 1px solid #ffe60044; }
.th-badge.fk  { background: #00d4ff15; color: var(--neon-cyan);   border: 1px solid #00d4ff33; }
.th-badge.uid { background: #b44fff15; color: var(--neon-purple);  border: 1px solid #b44fff33; }

.th-type {
  font-size: .58rem;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 2px;
  padding: .05rem .3rem;
  flex-shrink: 0;
}

.th-sort {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .65rem;
  padding: 0 2px;
  line-height: 1;
  transition: color .15s;
  flex-shrink: 0;
}
.th-sort:hover, .th-sort.sorted { color: var(--neon-cyan); }

.th-del-col {
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;
  font-size: .6rem;
  padding: 0 2px;
  line-height: 1;
  transition: color .15s;
  flex-shrink: 0;
}
th:hover .th-del-col { color: var(--text-muted); }
.th-del-col:hover { color: var(--neon-red) !important; }

.th-actions { min-width: 70px; width: 70px; }
.th-add-wrap { width: 32px; min-width: 32px; }

.th-add {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: .5rem;
  transition: color .15s;
}
.th-add:hover { color: var(--neon-green); }

/* ROWS */
.data-table td {
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--border-dim);
  border-right: 1px solid #0a1822;
  vertical-align: middle;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tr:hover td { background: var(--bg-hover); }

.td-actions { width: 60px; text-align: center; }

.tbl-empty-row {
  text-align: center;
  padding: 2.5rem;
  color: var(--text-muted);
  font-size: .72rem;
  letter-spacing: .08em;
}

.cell-display {
  display: block;
  cursor: pointer;
  padding: .1rem .2rem;
  border-radius: 2px;
  transition: background .15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-display:hover { background: var(--bg-active); color: var(--text-bright); }
.fk-cell { color: var(--neon-cyan); cursor: pointer; }
.fk-cell:hover { text-decoration: underline; }
.null-val { color: var(--text-muted); font-style: italic; }

.cell-bool.true  { color: var(--neon-green); font-weight: 600; }
.cell-bool.false { color: var(--neon-red);   font-weight: 600; }
.cell-uuid { font-family: var(--font-mono); color: var(--neon-purple); font-size: .65rem; }

.cell-edit-input {
  background: var(--bg-deep);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .2rem .4rem;
  border-radius: 2px;
  width: 100%;
  outline: none;
  box-shadow: 0 0 6px #00d4ff30;
}

.row-actions { display: flex; justify-content: center; }
.row-del-btn {
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;
  font-size: .7rem;
  padding: 3px 5px;
  border-radius: 3px;
  transition: all .15s;
  line-height: 1;
}
tr:hover .row-del-btn { color: var(--text-muted); }
.row-del-btn:hover { color: var(--neon-red) !important; background: #ff224415; }

.table-add-row {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px dashed var(--border-dim);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: .5rem;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .08em;
}
.table-add-row:hover {
  background: var(--bg-hover);
  color: var(--neon-green);
  border-color: var(--neon-green);
}

/* ════════════════════════════════════════════
   HISTORY
   ════════════════════════════════════════════ */
.history-timeline { display: flex; flex-direction: column; }
.history-entry {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-dim);
  animation: fadeInLeft 0.3s ease;
}
.he-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
}
.he-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.he-line { flex: 1; width: 1px; background: var(--border-dim); margin-top: 4px; }
.history-entry:last-child .he-line { display: none; }

.he-content { flex: 1; min-width: 0; }
.he-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; flex-wrap: wrap; }
.he-action {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
}
.he-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.he-time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
}
.he-detail {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: var(--bg-panel);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  display: inline-block;
  margin-top: 0.25rem;
  cursor: pointer;
  transition: background 0.2s;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.he-detail:hover { background: var(--bg-hover); color: var(--neon-cyan); }


/* ════════════════════════════════════════════
   SETTINGS
   ════════════════════════════════════════════ */
.settings-section { margin-bottom: 1.5rem; }
.settings-section-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-dim);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-dim);
  gap: 1rem;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; }
.settings-row-label { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.settings-row-desc  { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.settings-row-control { flex-shrink: 0; }

/* Scanline overlay - cyberpunk effect */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  animation: scanlines-move 8s linear infinite;
}

/* ============================================================
   HISTORY MODULE
   ============================================================ */
.hist-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hist-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent, var(--neon-cyan));
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  transition: var(--transition);
}

.hist-stat:hover {
  box-shadow: 0 0 16px rgba(0,212,255,0.06);
  border-color: var(--accent, var(--neon-cyan));
}

.hist-stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent, var(--neon-cyan));
  text-shadow: 0 0 12px var(--accent, var(--neon-cyan));
  line-height: 1;
  margin-bottom: 0.35rem;
}

.hist-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.hist-filters {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.hist-filter-spacer { flex: 1; }

.hist-filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: var(--transition);
}

.hist-filter-btn:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.hist-filter-btn.active {
  background: rgba(0,212,255,0.1);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.hist-search {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 5px 10px;
  border-radius: 3px;
  outline: none;
  width: 180px;
  transition: var(--transition);
}

.hist-search:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0,212,255,0.12);
}

.hist-timeline { padding: 0.5rem 0; }

.hist-entry {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  cursor: pointer;
  transition: var(--transition);
  border-left: 2px solid transparent;
}

.hist-entry:hover {
  background: var(--bg-hover);
  border-left-color: var(--neon-cyan);
}

.hist-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  flex-shrink: 0;
  padding-top: 0.9rem;
}

.hist-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}

.hist-dot-green  { background: var(--neon-green);  box-shadow: 0 0 6px var(--neon-green);  }
.hist-dot-cyan   { background: var(--neon-cyan);   box-shadow: 0 0 6px var(--neon-cyan);   }
.hist-dot-red    { background: var(--neon-red);    box-shadow: 0 0 6px var(--neon-red);    }
.hist-dot-purple { background: var(--neon-purple); box-shadow: 0 0 6px var(--neon-purple); }
.hist-dot-yellow { background: var(--neon-yellow); box-shadow: 0 0 6px var(--neon-yellow); }

.hist-connector {
  width: 1px;
  flex: 1;
  min-height: 24px;
  background: var(--border);
  margin-top: 4px;
}

.hist-content {
  flex: 1;
  padding: 0.65rem 1rem 0.65rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.hist-entry:last-child .hist-content { border-bottom: none; }

.hist-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

.hist-type { font-size: 0.55rem; }

.hist-user {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--neon-cyan);
}

.hist-action {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
}

.hist-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hist-target {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-time {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Detail modal grid */
.detail-grid { display: flex; flex-direction: column; gap: 0; }

.detail-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  width: 80px;
  flex-shrink: 0;
}

.detail-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  word-break: break-all;
}

/* ============================================================
   SETTINGS MODULE
   ============================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  align-items: start;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  border-left: 2px solid transparent;
  position: relative;
}

.settings-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: var(--bg-active);
  color: var(--neon-green);
  border-left-color: var(--neon-green);
}

.settings-nav-item.danger { color: var(--neon-red); }
.settings-nav-item.danger:hover { background: rgba(255,45,85,0.06); }
.settings-nav-item.danger.active { color: var(--neon-red); border-left-color: var(--neon-red); background: rgba(255,45,85,0.08); }

.settings-nav-icon { font-size: 0.9rem; width: 16px; text-align: center; }
.settings-nav-warn {
  margin-left: auto;
  background: var(--neon-red);
  color: #000;
  border-radius: 50%;
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700;
}

.settings-panel {
  padding: 1.25rem;
  transition: opacity 0.15s ease;
}

.settings-section { margin-bottom: 1.75rem; }

.settings-section-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child { border-bottom: none; }

.settings-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  width: 160px;
  flex-shrink: 0;
}

.settings-input {
  flex: 1;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 3px;
  outline: none;
  transition: var(--transition);
}

.settings-input:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0,212,255,0.12);
}

.settings-input.readonly {
  opacity: 0.5;
  cursor: default;
}

.settings-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%237a8fa6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.settings-color {
  width: 36px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

/* Toggle */
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.toggle-track {
  width: 34px;
  height: 18px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9px;
  position: relative;
  transition: var(--transition);
  flex-shrink: 0;
}

.settings-toggle.on .toggle-track {
  background: rgba(0,255,157,0.15);
  border-color: var(--neon-green);
}

.toggle-thumb {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px; left: 2px;
  transition: var(--transition);
}

.settings-toggle.on .toggle-thumb {
  transform: translateX(16px);
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}

.toggle-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.settings-toggle.on .toggle-label { color: var(--neon-green); }

/* Danger zone */
.danger-zone { border: 1px solid rgba(255,45,85,0.2); border-radius: 6px; padding: 1rem; }

.danger-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  transition: var(--transition);
}

.danger-action:hover { border-color: rgba(255,45,85,0.4); background: rgba(255,45,85,0.03); }

.danger-action.critical {
  border-color: rgba(255,45,85,0.3);
  background: rgba(255,45,85,0.04);
}

.danger-action-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.danger-action-desc {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* API Keys */
.api-keys-list { display: flex; flex-direction: column; gap: 0.5rem; }

.api-key-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: var(--transition);
}

.api-key-row:hover { border-color: var(--neon-cyan); }

.api-key-info { flex: 1; min-width: 0; }

.api-key-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.api-key-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.api-key-date, .api-key-last {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
}

.api-key-scope { font-size: 0.55rem; }

.api-key-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.api-key-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-perm-grid {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.key-perm-header, .key-perm-row {
  display: grid;
  grid-template-columns: 1fr repeat(4, 60px);
  gap: 0;
}

.key-perm-header {
  background: var(--bg-panel);
  padding: 0.5rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

.key-perm-header span, .key-perm-row span { padding: 0.5rem 0.5rem; }

.key-perm-row {
  border-top: 1px solid var(--border);
  align-items: center;
  padding-left: 0.25rem;
}

.perm-cell { text-align: center; font-weight: 700; }
.perm-cell.on { color: var(--neon-green); }
.perm-cell.off { color: var(--text-muted); }

/* ============================================================
   USERS MODULE
   ============================================================ */
.user-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}

.user-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent, var(--neon-cyan));
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  transition: var(--transition);
}

.user-stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent, var(--neon-cyan));
  text-shadow: 0 0 12px var(--accent, var(--neon-cyan));
  line-height: 1;
  margin-bottom: .35rem;
}

.user-stat-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.user-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}

.filter-group { display: flex; gap: .3rem; }

.filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.filter-btn.active { background: rgba(0,212,255,.1); border-color: var(--neon-cyan); color: var(--neon-cyan); }

.user-search {
  margin-left: auto;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: 5px 10px;
  border-radius: 3px;
  outline: none;
  width: 200px;
  transition: var(--transition);
}
.user-search:focus { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0,212,255,.12); }

.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: .65rem 1rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.users-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: rgba(0,212,255,.02); }

.user-cell { display: flex; align-items: center; gap: .6rem; }
.user-name  { font-family: var(--font-mono); font-size: .78rem; color: var(--text-primary); }
.user-email { font-family: var(--font-mono); font-size: .65rem; color: var(--text-muted); margin-top: 1px; }

.role-select {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
}
.role-select:focus { border-color: var(--neon-cyan); }

/* ============================================================
   PATH CODE (permissions)
   ============================================================ */
.path-code {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--neon-cyan);
  background: rgba(0,212,255,.06);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(0,212,255,.15);
}

/* ============================================================
   DASHBOARD v3 — Graphs, Ping, Stability, Processes
   ============================================================ */
.dash-module { padding-bottom: 1rem; }

.dash-clock {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--neon-green);
  letter-spacing: .1em;
  opacity: .8;
}

.live-badge { animation: pulse-badge 2s infinite; }

/* Metric cards */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
  margin-bottom: .85rem;
}

@media (max-width: 1100px) { .dash-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-metrics { grid-template-columns: repeat(2, 1fr); } }

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  padding: .85rem 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.mc-green::before  { background: var(--neon-green);  box-shadow: var(--glow-green); }
.mc-cyan::before   { background: var(--neon-cyan);   box-shadow: var(--glow-cyan);  }
.mc-purple::before { background: var(--neon-purple);                                }
.mc-yellow::before { background: var(--neon-yellow);                                }
.metric-card:hover { border-color: var(--border-bright); box-shadow: 0 0 16px #00d4ff08; }
.metric-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.4rem; }
.metric-value { font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1;margin-bottom:.3rem; }
.mc-green .metric-value  { color:var(--neon-green);  text-shadow:var(--glow-green);  }
.mc-cyan .metric-value   { color:var(--neon-cyan);   text-shadow:var(--glow-cyan);   }
.mc-purple .metric-value { color:var(--neon-purple);                                 }
.mc-yellow .metric-value { color:var(--neon-yellow);                                 }
.metric-sub  { font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted); }
.metric-trend.up   { color:var(--neon-green); margin-left:.3rem; }
.metric-trend.down { color:var(--neon-red);   margin-left:.3rem; }

/* Graphs row */
.dash-graphs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-bottom: .75rem;
}
@media (max-width:1100px) { .dash-graphs { grid-template-columns: repeat(2,1fr); } }

.graph-card {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s;
}
.graph-card:hover { border-color: var(--border-bright); }
.graph-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem .25rem;
}
.graph-title { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase; }
.graph-val   { font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--text-bright); }
.spark-canvas { display:block;width:100% !important; }
.graph-footer {
  display:flex;justify-content:space-between;padding:.25rem .75rem .5rem;
  font-family:var(--font-mono);font-size:.58rem;color:var(--text-muted);
}

/* Stability row */
.dash-stability-row {
  display: grid;
  grid-template-columns: 260px 1fr 1fr;
  gap: .6rem;
  margin-bottom: .75rem;
}
@media (max-width:900px) { .dash-stability-row { grid-template-columns:1fr; } }

.stability-card {}
.stability-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .6rem .75rem .75rem;
}
.stability-stats { flex:1;display:flex;flex-direction:column;gap:.4rem; }
.stab-row { display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem; }
.stab-label { color:var(--text-muted); }
.stab-val   { color:var(--text-primary);font-weight:600; }

/* Ping log */
.ping-card {}
.ping-log { padding:.4rem .6rem;max-height:160px;overflow-y:auto; }
.ping-row { display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-family:var(--font-mono);font-size:.65rem; }
.ping-ts  { color:var(--text-muted);width:60px;flex-shrink:0; }
.ping-bar-wrap { flex:1;background:rgba(255,255,255,.05);border-radius:2px;height:6px;overflow:hidden; }
.ping-bar { height:100%;border-radius:2px;transition:width .3s; }
.ping-bar.ping-ok   { background:var(--neon-green); }
.ping-bar.ping-warn { background:var(--neon-yellow); }
.ping-bar.ping-bad  { background:var(--neon-red); }
.ping-ms { width:44px;text-align:right;flex-shrink:0; }
.ping-ms.ping-ok   { color:var(--neon-green); }
.ping-ms.ping-warn { color:var(--neon-yellow); }
.ping-ms.ping-bad  { color:var(--neon-red); }

/* Process card */
.process-card {}
.proc-row {
  display:flex;align-items:center;gap:.6rem;padding:.42rem .75rem;
  font-family:var(--font-mono);font-size:.68rem;
  border-bottom:1px solid var(--border-dim);
}
.proc-row:last-child { border-bottom:none; }
.proc-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
.proc-dot.running { background:var(--neon-green);box-shadow:0 0 5px var(--neon-green); }
.proc-dot.idle    { background:var(--text-muted); }
.proc-name { flex:1;color:var(--text-primary); }
.proc-cpu  { width:40px;color:var(--neon-cyan);text-align:right; }
.proc-mem  { width:50px;color:var(--text-muted);text-align:right; }

/* Dashboard cols (log + right) */
.dash-cols { display:grid;grid-template-columns:1fr 320px;gap:.6rem; }
@media (max-width:800px) { .dash-cols { grid-template-columns:1fr; } }

.live-log { max-height:240px;overflow-y:auto; }
.log-entry { display:flex;gap:.6rem;padding:.28rem 0;font-family:var(--font-mono);font-size:.68rem;border-bottom:1px solid var(--border-dim); }
.log-entry:last-child { border-bottom:none; }
.log-time  { color:var(--text-muted);flex-shrink:0;width:44px; }
.log-user  { color:var(--neon-cyan);flex-shrink:0;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.log-action{ color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.log-success .log-user { color:var(--neon-green); }
.log-warn .log-action  { color:var(--neon-yellow); }
.log-error .log-action,.log-warn .log-action { color:var(--neon-red); }

.alert-list { display:flex;flex-direction:column;gap:.5rem; }
.alert-item { display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .75rem;border-radius:4px;border:1px solid var(--border-dim); }
.alert-info  { background:rgba(0,212,255,.04);  border-color:rgba(0,212,255,.2);  }
.alert-warn  { background:rgba(255,230,0,.04);  border-color:rgba(255,230,0,.2);  }
.alert-error { background:rgba(255,34,68,.05);  border-color:rgba(255,34,68,.25); }
.alert-icon  { font-size:.85rem;flex-shrink:0;margin-top:1px; }
.alert-content { flex:1;min-width:0; }
.alert-title   { font-family:var(--font-mono);font-size:.7rem;color:var(--text-bright);margin-bottom:2px; }
.alert-msg     { font-size:.68rem;color:var(--text-secondary);line-height:1.4; }
.alert-time    { font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);flex-shrink:0; }

.quick-actions { display:flex;flex-direction:column;gap:.4rem; }
.quick-action {
  display:flex;align-items:center;gap:.6rem;
  background:var(--bg-dark);border:1px solid var(--border-dim);border-radius:4px;
  padding:.6rem .75rem;font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);
  cursor:pointer;transition:all .2s;text-align:left;width:100%;
}
.quick-action:hover { border-color:var(--neon-cyan);color:var(--neon-cyan);background:var(--bg-hover); }
.qa-icon { font-size:1rem;width:20px;text-align:center; }

/* ============================================================
   TABLES v3 — Supabase-style
   ============================================================ */
.tbl-module { padding-bottom:0; }
.tbl-layout { display:grid;grid-template-columns:200px 1fr;height:calc(100vh - 160px);overflow:hidden; }

/* Tabs */
.tbl-right { display:flex;flex-direction:column;overflow:hidden; }
.tbl-tabs  {
  display:flex;gap:2px;padding:.5rem .75rem 0;
  border-bottom:1px solid var(--border-dim);
  background:var(--bg-deep);flex-shrink:0;overflow-x:auto;
}
.tbl-tabs::-webkit-scrollbar { display:none; }
.tbl-tab {
  padding:.45rem .85rem;
  background:transparent;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;
  color:var(--text-muted);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.tbl-tab:hover { color:var(--text-primary);background:var(--bg-hover); }
.tbl-tab.active { background:var(--bg-panel);border-color:var(--border-bright);color:var(--neon-cyan);border-bottom:1px solid var(--bg-panel);margin-bottom:-1px; }

.tbl-tab-content { flex:1;overflow:auto;background:var(--bg-panel); }

/* Editor tab */
.tbl-editor-wrap { display:flex;flex-direction:column;height:100%; }
.tbl-editor-toolbar {
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.6rem .75rem;border-bottom:1px solid var(--border-dim);
  background:var(--bg-deep);flex-shrink:0;
}
.tbl-filter-input { max-width:180px !important; }
.tbl-stats { font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);margin-left:auto; }

/* SQL Editor */
.sql-editor-wrap { display:flex;flex-direction:column;height:100%; }
.sql-editor-top  { display:grid;grid-template-columns:1fr 200px;flex:0 0 auto;min-height:220px; }
.sql-editor-main { display:flex;flex-direction:column;border-right:1px solid var(--border-dim); }
.sql-toolbar {
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;border-bottom:1px solid var(--border-dim);
  background:var(--bg-deep);flex-shrink:0;
}
.sql-label { font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;color:var(--text-muted); }
.sql-textarea {
  flex:1;resize:none;
  background:var(--bg-dark);border:none;outline:none;
  color:var(--neon-green);font-family:var(--font-mono);font-size:.78rem;
  padding:.75rem;line-height:1.7;min-height:160px;
  caret-color:var(--neon-green);
}
.sql-textarea::placeholder { color:var(--text-muted); }
.sql-textarea:focus { box-shadow:inset 0 0 0 1px #00ff8822; }

.sql-sidebar { overflow-y:auto;background:var(--bg-deep); }
.sql-sidebar-section { border-bottom:1px solid var(--border-dim);padding:.4rem 0; }
.sql-sidebar-title {
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;
  color:var(--text-muted);text-transform:uppercase;padding:.3rem .65rem .15rem;
}
.sql-ref-item {
  display:flex;align-items:center;gap:.4rem;
  padding:.35rem .65rem;font-family:var(--font-mono);font-size:.68rem;
  color:var(--text-secondary);cursor:pointer;transition:background .15s;
}
.sql-ref-item:hover { background:var(--bg-hover);color:var(--neon-cyan); }
.sql-ref-count { margin-left:auto;font-size:.6rem;color:var(--text-muted); }
.sql-snippet {
  display:flex;align-items:center;gap:.4rem;
  padding:.3rem .65rem;font-family:var(--font-mono);font-size:.65rem;
  color:var(--text-muted);cursor:pointer;transition:background .15s;
}
.sql-snippet:hover { background:var(--bg-hover);color:var(--neon-green); }
.sql-snip-icon { font-size:.75rem;opacity:.5; }

.sql-result-wrap { flex:0 0 auto;border-top:2px solid var(--border-bright);min-height:100px;max-height:300px;overflow-y:auto; }
.sql-result-empty { display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:1.5rem;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted); }
.sql-result-header {
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .75rem;background:var(--bg-deep);border-bottom:1px solid var(--border-dim);
  font-family:var(--font-mono);font-size:.7rem;flex-wrap:wrap;
}
.sql-timing { color:var(--text-muted);font-size:.65rem; }
.sql-success { color:var(--neon-green); }
.sql-error   { color:var(--neon-red);padding:.75rem;font-family:var(--font-mono);font-size:.75rem;background:rgba(255,34,68,.05); }
.sql-result-table-wrap { overflow:auto; }
.sql-result-table { width:100%; }

.sql-history { flex:0 0 auto;border-top:1px solid var(--border-dim);max-height:100px;overflow-y:auto;background:var(--bg-deep); }
.sql-hist-item {
  display:flex;align-items:center;gap:.6rem;
  padding:.3rem .75rem;font-family:var(--font-mono);font-size:.65rem;
  cursor:pointer;border-bottom:1px solid var(--border-dim);transition:background .15s;
}
.sql-hist-item:hover { background:var(--bg-hover); }
.sql-hist-icon { color:var(--neon-green);flex-shrink:0; }
.sql-hist-q    { flex:1;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sql-hist-t    { color:var(--text-muted);font-size:.6rem;flex-shrink:0; }

/* Schema */
.schema-wrap { display:flex;flex-direction:column;height:100%; }
.schema-header { display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;border-bottom:1px solid var(--border-dim);background:var(--bg-deep);flex-shrink:0; }
.schema-title  { font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase; }
.schema-canvas-wrap { flex:1;overflow:auto;background:var(--bg-dark);position:relative; }
.schema-svg    { min-width:700px;min-height:500px;cursor:grab; }
.schema-svg:active { cursor:grabbing; }
.schema-table-node { cursor:pointer;transition:opacity .2s; }
.schema-table-node:hover { opacity:.85; }
.schema-legend {
  display:flex;align-items:center;gap:1rem;padding:.5rem .9rem;
  border-top:1px solid var(--border-dim);background:var(--bg-deep);
  font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted);flex-wrap:wrap;flex-shrink:0;
}

/* RLS */
.rls-wrap { padding:.75rem;height:100%;overflow-y:auto; }
.rls-header { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap; }
.rls-title    { font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--text-bright);margin-bottom:.25rem; }
.rls-subtitle { font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted); }
.rls-toggle-wrap { display:flex;align-items:center;gap:.5rem;cursor:pointer; }
.rls-toggle-slider {
  width:36px;height:20px;background:var(--bg-base,#0a0f1a);border:1px solid var(--border-mid);
  border-radius:10px;position:relative;transition:all .2s;flex-shrink:0;
}
input:checked + .rls-toggle-slider { background:rgba(0,255,136,.15);border-color:var(--neon-green); }
.rls-toggle-slider::after {
  content:'';position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--text-muted);top:2px;left:2px;transition:all .2s;
}
input:checked + .rls-toggle-slider::after { left:18px;background:var(--neon-green);box-shadow:0 0 6px var(--neon-green); }
.rls-toggle-label { font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted); }
input[type=checkbox] + .rls-toggle-slider + .rls-toggle-label { color:var(--neon-green); }
.rls-policies { display:flex;flex-direction:column;gap:.6rem;margin-bottom:.75rem; }
.rls-policy-card {
  background:var(--bg-card);border:1px solid var(--border-mid);border-radius:6px;overflow:hidden;
  transition:border-color .2s;
}
.rls-policy-card:hover { border-color:var(--border-bright); }
.rls-policy-card.inactive { opacity:.5; }
.rls-policy-header { display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-bottom:1px solid var(--border-dim);flex-wrap:wrap; }
.rls-policy-name { font-family:var(--font-mono);font-size:.75rem;color:var(--text-primary);flex:1; }
.rls-role { font-size:.6rem; }
.rls-op   { font-size:.6rem; }
.rls-policy-body { padding:.5rem .75rem;display:flex;flex-direction:column;gap:.35rem; }
.rls-expr { display:flex;align-items:baseline;gap:.6rem;font-family:var(--font-mono);font-size:.7rem; }
.rls-expr-label { color:var(--text-muted);font-size:.62rem;letter-spacing:.08em;flex-shrink:0;width:80px; }
.rls-expr code { color:var(--neon-green);background:var(--bg-deep);padding:2px 6px;border-radius:3px;font-size:.7rem; }
.rls-empty { display:flex;align-items:center;justify-content:center;gap:.75rem;padding:2rem;
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);border:1px dashed var(--border-mid);border-radius:6px; }
.rls-info { font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);padding:.6rem .75rem;
  background:var(--bg-deep);border-radius:4px;border:1px solid var(--border-dim);display:flex;gap:.5rem;align-items:flex-start; }
.rls-info-icon { flex-shrink:0; }

/* Auth tab */
.auth-wrap { padding:.75rem;height:100%;overflow-y:auto; }
.auth-section { margin-bottom:1.5rem; }
.auth-section-title { font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.7rem;padding-bottom:.4rem;border-bottom:1px solid var(--border-dim); }
.auth-providers { display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem; }
@media(max-width:900px){.auth-providers{grid-template-columns:repeat(2,1fr);}}
.auth-provider-card {
  display:flex;align-items:center;gap:.7rem;
  background:var(--bg-card);border:1px solid var(--border-mid);border-radius:6px;padding:.7rem .85rem;
  transition:border-color .2s;
}
.auth-provider-card:hover { border-color:var(--border-bright); }
.auth-provider-icon { font-size:1.3rem;flex-shrink:0; }
.auth-provider-info { flex:1;min-width:0; }
.auth-provider-name { font-family:var(--font-mono);font-size:.72rem;color:var(--text-primary);margin-bottom:2px; }
.auth-provider-status { font-family:var(--font-mono);font-size:.62rem; }
.auth-provider-status.enabled  { color:var(--neon-green); }
.auth-provider-status.disabled { color:var(--text-muted); }
.auth-provider-toggle { flex-shrink:0;cursor:pointer; }
.auth-toggle-input { display:none; }
.auth-toggle-track {
  display:block;width:32px;height:18px;background:var(--bg-base,#0a0f1a);
  border:1px solid var(--border-mid);border-radius:9px;position:relative;transition:all .2s;
}
.auth-toggle-input:checked ~ .auth-toggle-track { background:rgba(0,255,136,.15);border-color:var(--neon-green); }
.auth-toggle-thumb {
  position:absolute;width:12px;height:12px;border-radius:50%;background:var(--text-muted);
  top:2px;left:2px;transition:all .2s;
}
.auth-toggle-input:checked ~ .auth-toggle-track .auth-toggle-thumb { left:16px;background:var(--neon-green);box-shadow:0 0 5px var(--neon-green); }
.auth-jwt-grid { display:flex;flex-direction:column;gap:.5rem; }
.auth-field-row { display:flex;align-items:center;gap:1rem; }
.auth-field-label { font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary);width:140px;flex-shrink:0; }
.auth-field-input { flex:1; }
.auth-sessions { display:flex;flex-direction:column;gap:.4rem; }
.auth-session-row {
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .75rem;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:4px;
  font-family:var(--font-mono);font-size:.68rem;flex-wrap:wrap;
}
.auth-sess-user { color:var(--neon-cyan);flex-shrink:0; }
.auth-sess-ip   { color:var(--text-muted);flex-shrink:0; }
.auth-sess-ua   { color:var(--text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.auth-sess-exp  { color:var(--text-muted);flex-shrink:0; }

/* Logs tab */
.tbl-logs-wrap { display:flex;flex-direction:column;height:100%; }
.tbl-logs-toolbar {
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.6rem .75rem;border-bottom:1px solid var(--border-dim);background:var(--bg-deep);flex-shrink:0;
}
.tbl-log-list { flex:1;overflow-y:auto; }
.tbl-log-row {
  display:flex;align-items:center;gap:.55rem;
  padding:.4rem .75rem;font-family:var(--font-mono);font-size:.68rem;
  border-bottom:1px solid var(--border-dim);transition:background .15s;flex-wrap:wrap;
}
.tbl-log-row:hover { background:var(--bg-hover); }
.tbl-log-id    { color:var(--text-muted);width:32px;flex-shrink:0; }
.tbl-log-op    { font-size:.58rem;flex-shrink:0; }
.tbl-log-table { color:var(--neon-cyan);flex-shrink:0; }
.tbl-log-user  { color:var(--text-secondary);flex-shrink:0; }
.tbl-log-rows  { color:var(--text-muted);flex-shrink:0; }
.tbl-log-ms    { color:var(--text-muted);flex-shrink:0; }
.tbl-log-error { color:var(--neon-red);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.tbl-log-time  { margin-left:auto;color:var(--text-muted);font-size:.62rem;flex-shrink:0; }

/* Table Settings tab */
.tbl-settings-wrap  { padding:.75rem;height:100%;overflow-y:auto; }
.tbl-settings-section { background:var(--bg-card);border:1px solid var(--border-mid);border-radius:6px;padding:.75rem;margin-bottom:.75rem;overflow:hidden; }
.tbl-settings-title { font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-dim); }
.tbl-settings-grid  { display:flex;flex-direction:column;gap:.5rem; }
.tbl-set-row  { display:flex;align-items:center;gap:1rem; }
.tbl-set-label{ font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary);width:120px;flex-shrink:0; }
.tbl-set-input{ flex:1; }
.danger-action-row {
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem .75rem;border:1px solid rgba(255,34,68,.2);border-radius:4px;
}
.danger-action-name { font-family:var(--font-mono);font-size:.75rem;color:var(--neon-red);margin-bottom:2px; }
.danger-action-desc { font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted); }

/* ============================================================
   PERMISSIONS — Missing classes
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .85rem;
}

.form-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.form-control {
  background: var(--bg-deep);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: .45rem .7rem;
  border-radius: 4px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 2px rgba(0,212,255,.1);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control[readonly] { opacity: .55; cursor: default; }

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235d7f96' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
}
select.form-control option { background: var(--bg-panel); }

/* Permissions table */
.perm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .72rem;
}
.perm-table th {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-mid);
  padding: .6rem 1rem;
  text-align: left;
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.perm-table td {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border-dim);
  vertical-align: middle;
}
.perm-table tr:last-child td { border-bottom: none; }
.perm-table tr:hover td { background: rgba(0,212,255,.02); }

.perm-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  cursor: pointer;
  border: 1px solid var(--border-mid);
  background: var(--bg-base, #0a0f1a);
  color: var(--text-muted);
  transition: all .15s;
  user-select: none;
}
.perm-toggle.on {
  background: rgba(0,255,136,.08);
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 6px rgba(0,255,136,.15);
}
.perm-toggle.off {
  background: rgba(255,34,68,.06);
  border-color: rgba(255,34,68,.3);
  color: var(--neon-red);
}
.perm-toggle:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }

/* ============================================================
   PROJECT / FOLDER TREE  (tables sidebar)
   ============================================================ */
.proj-node {
  margin-bottom: 2px;
}

.proj-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .65rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
  user-select: none;
  position: relative;
}
.proj-header:hover { background: var(--bg-hover); }
.proj-node.active > .proj-header { background: var(--bg-active); }

.proj-arrow {
  font-size: .55rem;
  color: var(--text-muted);
  width: 10px;
  flex-shrink: 0;
  transition: transform .15s;
}

.proj-icon { font-size: 1rem; flex-shrink: 0; }

.proj-name {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-node.active > .proj-header .proj-name { color: var(--neon-cyan); }

.proj-actions {
  display: none;
  gap: .2rem;
  flex-shrink: 0;
}
.proj-header:hover .proj-actions { display: flex; }

.proj-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: .7rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.proj-btn:hover { color: var(--neon-cyan); background: rgba(0,212,255,.1); }
.proj-btn.proj-btn-del:hover { color: var(--neon-red); background: rgba(255,34,68,.1); }

.proj-body {
  padding-left: .9rem;
  border-left: 1px solid var(--border-dim);
  margin-left: 1.1rem;
  margin-bottom: .25rem;
}

.proj-empty {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--text-muted);
  padding: .4rem .5rem;
  font-style: italic;
}

/* Folder node */
.folder-node {
  margin-bottom: 2px;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .5rem;
  border-radius: 3px;
  cursor: default;
  transition: background .15s;
  user-select: none;
}
.folder-header:hover { background: rgba(255,183,0,.05); }

.folder-icon { font-size: .85rem; flex-shrink: 0; }

.folder-name {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--neon-yellow);
  flex: 1;
}

.folder-count {
  font-family: var(--font-mono);
  font-size: .58rem;
  color: var(--text-muted);
  background: var(--bg-deep);
  padding: 1px 5px;
  border-radius: 8px;
}

.folder-del-btn {
  opacity: 0;
  transition: opacity .15s;
}
.folder-header:hover .folder-del-btn { opacity: 1; }

.folder-body {
  padding-left: .85rem;
  border-left: 1px solid rgba(255,183,0,.2);
  margin-left: .85rem;
}

/* Table node */
.table-node {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .5rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-secondary);
  transition: all .15s;
  border-left: 2px solid transparent;
  margin-bottom: 1px;
}
.table-node:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.table-node.active {
  background: rgba(0,212,255,.08);
  color: var(--neon-cyan);
  border-left-color: var(--neon-cyan);
}
.table-node-icon { font-size: .75rem; flex-shrink: 0; opacity: .6; }
.table-node-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-node-count {
  font-size: .58rem;
  color: var(--text-muted);
  background: var(--bg-deep);
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Project badge in module header */
.tbl-project-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--neon-cyan);
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.2);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .08em;
  margin-left: .5rem;
}

/* Color swatches for project creation */
.color-swatch {
  transition: transform .15s, box-shadow .15s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: white !important; box-shadow: 0 0 8px rgba(255,255,255,.3); }

/* ============================================================
   AUTH TAB — API Keys per project
   ============================================================ */
.auth-project-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--bg-card);
  border-radius: 6px;
  margin-bottom: 1rem;
}
.auth-project-icon { font-size: 1.4rem; }
.auth-key-legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--text-muted);
  margin-top: .5rem;
  flex-wrap: wrap;
}
.auth-keys-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.auth-key-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  background: var(--bg-base, #0a0f1a);
  border: 1px solid var(--border-mid);
  border-radius: 5px;
  transition: border-color .15s;
  flex-wrap: wrap;
}
.auth-key-row:hover { border-color: var(--neon-cyan); }
.auth-key-info { flex: 1; min-width: 0; }
.auth-key-name { font-family: var(--font-mono); font-size: .75rem; color: var(--text-primary); margin-bottom: .25rem; }
.auth-key-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.auth-key-scope { font-size: .58rem; }
.auth-key-date, .auth-key-last { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); }
.auth-key-value {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.auth-key-text {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
  letter-spacing: .03em;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   SCHEMA zoom label
   ============================================================ */
.schema-zoom-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
  min-width: 38px;
  text-align: right;
}

/* ============================================================
   PATH CODE (used in permissions)
   ============================================================ */
.path-code {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--neon-cyan);
  background: rgba(0,212,255,.06);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(0,212,255,.15);
}

/* ============================================================
   USERS MODULE
   ============================================================ */
.user-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.user-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--accent, var(--neon-cyan));
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
}
.user-stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent, var(--neon-cyan));
  text-shadow: 0 0 12px var(--accent, var(--neon-cyan));
  line-height: 1;
  margin-bottom: .35rem;
}
.user-stat-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.user-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.filter-group { display: flex; gap: .3rem; }
.filter-btn {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.filter-btn.active { background: rgba(0,212,255,.1); border-color: var(--neon-cyan); color: var(--neon-cyan); }
.user-search {
  margin-left: auto;
  background: var(--bg-base, #0a0f1a);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: 5px 10px;
  border-radius: 3px;
  outline: none;
  width: 200px;
  transition: border-color .15s;
}
.user-search:focus { border-color: var(--neon-cyan); }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-mid);
  padding: .55rem 1rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.users-table td { padding: .55rem 1rem; border-bottom: 1px solid var(--border-dim); vertical-align: middle; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: rgba(0,212,255,.02); }
.user-cell { display: flex; align-items: center; gap: .6rem; }
.user-name  { font-family: var(--font-mono); font-size: .75rem; color: var(--text-primary); }
.user-email { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); margin-top: 1px; }
.role-select {
  background: var(--bg-base, #0a0f1a);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.role-select:focus { border-color: var(--neon-cyan); }

/* ============================================================
   HISTORY MODULE
   ============================================================ */
.hist-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin-bottom: 1rem;
}
.hist-stat {
  background: var(--bg-card); border: 1px solid var(--border-mid);
  border-top: 2px solid var(--accent, var(--neon-cyan));
  border-radius: 6px; padding: 1rem; text-align: center;
}
.hist-stat-value {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  color: var(--accent, var(--neon-cyan)); text-shadow: 0 0 12px var(--accent, var(--neon-cyan));
  line-height: 1; margin-bottom: .35rem;
}
.hist-stat-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; color: var(--text-muted); text-transform: uppercase; }
.hist-filters { display: flex; align-items: center; gap: .35rem; margin-bottom: .75rem; flex-wrap: wrap; }
.hist-filter-spacer { flex: 1; }
.hist-filter-btn {
  background: transparent; border: 1px solid var(--border-mid);
  color: var(--text-muted); font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; padding: 3px 9px; border-radius: 3px; cursor: pointer; transition: all .15s;
}
.hist-filter-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.hist-filter-btn.active { background: rgba(0,212,255,.1); border-color: var(--neon-cyan); color: var(--neon-cyan); }
.hist-search {
  background: var(--bg-base, #0a0f1a); border: 1px solid var(--border-mid);
  color: var(--text-primary); font-family: var(--font-mono); font-size: .7rem;
  padding: 4px 9px; border-radius: 3px; outline: none; width: 175px; transition: border-color .15s;
}
.hist-search:focus { border-color: var(--neon-cyan); }
.hist-timeline { padding: .5rem 0; }
.hist-entry { display: flex; align-items: flex-start; gap: 0; cursor: pointer; transition: background .15s; border-left: 2px solid transparent; }
.hist-entry:hover { background: var(--bg-hover); border-left-color: var(--neon-cyan); }
.hist-marker { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; padding-top: .9rem; }
.hist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; z-index: 1; }
.hist-dot-green  { background: var(--neon-green);  box-shadow: 0 0 6px var(--neon-green);  }
.hist-dot-cyan   { background: var(--neon-cyan);   box-shadow: 0 0 6px var(--neon-cyan);   }
.hist-dot-red    { background: var(--neon-red);    box-shadow: 0 0 6px var(--neon-red);    }
.hist-dot-purple { background: var(--neon-purple); box-shadow: 0 0 6px var(--neon-purple); }
.hist-dot-yellow { background: var(--neon-yellow); box-shadow: 0 0 6px var(--neon-yellow); }
.hist-connector { width: 1px; flex: 1; min-height: 24px; background: var(--border-dim); margin-top: 4px; }
.hist-content { flex: 1; padding: .65rem 1rem .65rem 0; border-bottom: 1px solid var(--border-dim); min-width: 0; }
.hist-entry:last-child .hist-content { border-bottom: none; }
.hist-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.hist-type { font-size: .55rem; }
.hist-user { font-family: var(--font-mono); font-size: .7rem; color: var(--neon-cyan); }
.hist-action { font-family: var(--font-mono); font-size: .72rem; color: var(--text-primary); }
.hist-detail { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hist-target { font-family: var(--font-mono); font-size: .65rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-time { font-family: var(--font-mono); font-size: .6rem; color: var(--text-muted); flex-shrink: 0; }
.detail-grid { display: flex; flex-direction: column; gap: 0; }
.detail-row { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border-dim); }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; width: 80px; flex-shrink: 0; }
.detail-value { font-family: var(--font-mono); font-size: .75rem; color: var(--text-primary); word-break: break-all; }