/* vsCloud Gateway Admin — camada visual suave
   Carregue depois de admin.css. Não altera IDs nem lógica JS. */

:root {
  --vs-primary: #2563eb;
  --vs-primary-dark: #1d4ed8;
  --vs-primary-soft: #eff6ff;
  --vs-accent: #0891b2;

  --vs-body: #dce3ec;
  --vs-card: #ffffff;
  --vs-surface: #eef2f6;
  --vs-panel: #dce3ec;
  --vs-panel-header: #cbd5e1;
  --vs-panel-soft: #d2dae5;
  --vs-panel-blue: #c7d9eb;
  --vs-border: #b6c0cd;
  --vs-border-soft: #d7dde5;
  --vs-border-strong: #9fb3c8;

  --vs-text: #172033;
  --vs-muted: #64748b;

  --vs-radius: 4px;
  --vs-shadow-sm: none;
  --vs-shadow: none;
}

body {
  background: var(--vs-body) !important;
  color: var(--vs-text);
  -webkit-font-smoothing: antialiased;
}

/* Topbar */
.erp-topbar {
  min-height: 62px;
  background: var(--vs-panel-header) !important;
  border-bottom: 1px solid var(--vs-border);
  box-shadow: none;
}

.erp-logo-mark {
  border-radius: 4px;
  background: var(--vs-primary) !important;
  box-shadow: none;
}

.erp-topbar-center h1 {
  font-size: 16px;
  letter-spacing: 0;
}

.erp-topbar-center p {
  color: var(--vs-muted);
}

.action-group .btn {
  border-color: var(--vs-border);
  background: var(--vs-card);
  color: var(--vs-text);
  border-radius: 4px !important;
  transition: background .15s ease, border-color .15s ease;
}

.action-group .btn:hover {
  background: var(--vs-panel-soft);
  border-color: var(--vs-border-strong);
  box-shadow: none;
}

.icon-btn {
  border-radius: 4px;
  background: var(--vs-card);
  border-color: var(--vs-border-strong);
  color: var(--vs-text);
}

.icon-btn:hover {
  background: var(--vs-panel-soft);
  color: var(--vs-primary-dark);
}

.user-chip {
  background: var(--vs-panel);
  border-color: var(--vs-border-strong);
  color: var(--vs-text);
}

/* Sidebar */
.erp-sidebar {
  background: var(--vs-panel) !important;
  border-right: 1px solid var(--vs-border);
}

.sidebar-header,
.sidebar-footer {
  background: var(--vs-panel-header) !important;
  border-color: var(--vs-border) !important;
  color: var(--vs-label, #334155);
}

.nav-group-title {
  border-color: var(--vs-border);
  background: var(--vs-panel-header);
  border-radius: 4px;
  color: #26384c;
}

.nav-group-title:hover {
  background: var(--vs-card);
}

.nav-item {
  min-height: 36px;
  color: #26384c;
  border-left-color: transparent;
  border-radius: 4px;
  margin: 3px 0;
  padding-left: 14px;
}

.nav-item:hover {
  background: var(--vs-card);
  border-left-color: transparent;
  color: var(--vs-primary-dark);
}

.nav-item.active {
  background: var(--vs-panel-blue);
  box-shadow: none;
  border-left-color: transparent;
  color: #0f3c91;
}

/* Cards e área principal */
.erp-content {
  padding: 20px;
  background: var(--vs-body) !important;
}

.erp-tabs-card,
.grid-toolbar-card,
.grid-shell,
.form-panel,
.detail-shell,
.json-editor-card,
.welcome-card,
.empty-state,
.content-card {
  border-color: var(--vs-border-soft) !important;
  border-radius: var(--vs-radius) !important;
  box-shadow: var(--vs-shadow-sm) !important;
  background: var(--vs-card) !important;
}

.erp-tabs-card {
  border-radius: 0 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.045) !important;
}

.grid-toolbar-card,
.form-panel {
  padding: 16px;
}

.grid-toolbar-title h2,
.detail-shell-header h2,
.json-editor-header h2,
.form-panel::before {
  color: #172033;
  font-weight: 800;
}

.grid-toolbar-title small,
.detail-shell-header small,
#grid-record-count {
  color: var(--vs-muted) !important;
}

/* Abas */
.tab-btn {
  border-color: var(--vs-border);
  color: var(--vs-muted);
  background: var(--vs-panel);
  border-radius: 4px 4px 0 0;
}

.tab-btn:hover {
  background: var(--vs-card);
  color: var(--vs-primary-dark);
}

.tab-btn.active {
  color: var(--vs-primary-dark);
}

.tab-btn.active::after {
  background: var(--vs-primary);
}

.subtab-btn {
  color: var(--vs-muted);
  border-radius: 4px;
}

.subtab-btn:hover {
  background: var(--vs-primary-soft);
}

.subtab-btn.active {
  background: var(--vs-panel-blue);
  color: #0f3c91;
  box-shadow: none;
}

/* Inputs e botões */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.form-input,
.grid-search {
  border-color: var(--vs-border);
  border-radius: 4px;
  background-color: #fff;
  color: var(--vs-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.form-select-sm:focus,
.form-input:focus,
.grid-search:focus {
  border-color: var(--vs-primary);
  box-shadow: 0 0 0 .18rem rgba(37,99,235,.12);
}

.input-group-text {
  border-color: var(--vs-border);
  background: var(--vs-surface);
  color: var(--vs-muted);
}

.btn {
  border-radius: 4px;
  font-weight: 650;
}

.btn-sm {
  border-radius: 4px;
}

.btn-primary {
  --bs-btn-bg: var(--vs-primary);
  --bs-btn-border-color: var(--vs-primary);
  --bs-btn-hover-bg: var(--vs-primary-dark);
  --bs-btn-hover-border-color: var(--vs-primary-dark);
  box-shadow: none;
}

/* Tabulator */
.tabulator {
  background: #fff;
  border: 0 !important;
}

.tabulator .tabulator-header {
  background: var(--vs-panel-header) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  color: var(--vs-text);
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--vs-panel-header) !important;
  border-right: 1px solid var(--vs-border-soft) !important;
}

.tabulator .tabulator-header .tabulator-col:hover {
  background: var(--vs-panel-soft) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
  border-bottom: 1px solid var(--vs-border-soft) !important;
  color: var(--vs-text);
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
  background: #f7f9fc;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
  background: #eef6ff;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected {
  background: var(--vs-panel-blue) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
  padding: 7px 10px;
  border-right: 1px solid var(--vs-border-soft) !important;
}

.tabulator-cell.readonly-cell,
.readonly-cell {
  background: #f8fafc !important;
  color: #667085 !important;
  cursor: default !important;
}

.tabulator-editing {
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.18);
  background: #fff !important;
}

.tabulator .tabulator-footer {
  background: var(--vs-surface) !important;
  border-top: 1px solid var(--vs-border) !important;
}

/* Detail */
.detail-shell-header {
  background: var(--vs-panel) !important;
  border-bottom-color: var(--vs-border-soft) !important;
}

.form-check-input {
  border-color: #cdd6e4;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--vs-primary);
  border-color: var(--vs-primary);
}

/* Lookup */
.lookup-dropdown,
.lookup-menu,
.lookup-results {
  border-color: var(--vs-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.lookup-item {
  padding: 9px 12px;
  border-bottom-color: var(--vs-border-soft);
}

.lookup-item:hover,
.lookup-item.active {
  background: var(--vs-panel-blue) !important;
  color: var(--vs-primary-dark) !important;
}

/* Responsivo */
@media (max-width: 991.98px) {
  .erp-content {
    padding: 14px;
  }

  .erp-sidebar {
    box-shadow: 18px 0 52px rgba(15,23,42,.28);
  }
}

@media (max-width: 720px) {
  .grid-toolbar-card,
  .form-panel,
  .detail-shell,
  .json-editor-card {
    border-radius: 14px !important;
  }

  .erp-content {
    padding: 12px;
  }
}