/* ============================================================================
   vsCloud Admin - Tema Classic Windows
   --------------------------------------------------------------------------
   Camada final de tema para o projeto real VSCloud.
   Deve ser carregado depois de admin.css e admin-soft.css.
   Mantém os IDs/classes usados pelo vscloud-admin.js.
   ============================================================================ */

:root,
[data-bs-theme="vscloud"] {
  --vs-primary: #2563eb;
  --vs-primary-dark: #1d4ed8;
  --vs-primary-soft: #eff6ff;
  --vs-accent: #0891b2;
  --vs-accent-dark: #0e7490;
  --vs-danger: #dc2626;
  --vs-success: #16845f;

  --vs-body: #dce3ec;
  --vs-card: #ffffff;
  --vs-surface: #ffffff;
  --vs-surface-soft: #eef2f6;
  --vs-sidebar: #dce3ec;
  --vs-sidebar-border: #b6c0cd;
  --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: #667085;
  --vs-label: #344054;

  --vs-shadow-sm: none;
  --vs-shadow: none;
  --vs-radius: 4px;
  --vs-radius-control: 6px;

  --bs-primary: #2563eb;
  --bs-primary-rgb: 37,99,235;
  --bs-info: #0891b2;
  --bs-info-rgb: 8,145,178;
  --bs-body-bg: #dce3ec;
  --bs-body-color: #172033;
  --bs-border-color: #b6c0cd;
}

html[data-vs-density="compact"] {
  --vs-radius-control: 8px;
}

body.vs-theme-classic,
body.vscloud-app {
  background: var(--vs-body) !important;
  color: var(--vs-text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

/* Topbar inspirado na tela desktop VSCloud */
.erp-topbar {
  min-height: 54px !important;
  padding: 7px 10px !important;
  background: var(--vs-panel-header) !important;
  color: var(--vs-text) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  box-shadow: none !important;
  grid-template-columns: auto minmax(180px,1fr) auto !important;
}

.erp-logo {
  min-width: 154px !important;
}

.erp-logo-mark {
  width: 40px !important;
  height: 36px !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: var(--vs-primary) !important;
  box-shadow: none !important;
  position: relative;
}

.erp-logo-mark::after {
  display: none !important;
}

.erp-logo-text strong {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

.erp-logo-text small,
.erp-topbar-center p {
  color: var(--vs-muted) !important;
}

.erp-topbar-center h1 {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.action-group .btn,
.erp-topbar-actions .btn-light {
  border-radius: 3px !important;
  border-color: var(--vs-border) !important;
  background: #ffffff !important;
  color: #172033 !important;
  box-shadow: none !important;
  transform: none !important;
}

.action-group .btn:hover,
.erp-topbar-actions .btn-light:hover {
  background: var(--vs-panel-soft) !important;
  border-color: var(--vs-border-strong) !important;
}

.icon-btn,
#btnJsonEditor {
  border-radius: 3px !important;
  background: #ffffff !important;
  border: 1px solid var(--vs-border-strong) !important;
  color: var(--vs-text) !important;
  box-shadow: none !important;
}

.icon-btn:hover,
#btnJsonEditor:hover {
  background: var(--vs-panel-soft) !important;
}

.user-chip {
  border-radius: 3px !important;
  background: var(--vs-panel) !important;
  border-color: var(--vs-border-strong) !important;
  color: var(--vs-text) !important;
}

/* Sidebar clara, no padrão do sistema legado */
.erp-sidebar {
  width: 166px !important;
  min-width: 166px !important;
  background: var(--vs-sidebar) !important;
  color: var(--vs-text) !important;
  border-right: 1px solid var(--vs-sidebar-border) !important;
  box-shadow: none !important;
}

.sidebar-header,
.sidebar-footer {
  min-height: 44px !important;
  color: var(--vs-text) !important;
  background: var(--vs-panel-header) !important;
  border-color: var(--vs-border) !important;
  font-weight: 700 !important;
}

.status-dot {
  background: var(--vs-accent) !important;
}

.module-menu {
  padding: 9px 0 !important;
}

.nav-group {
  margin-bottom: 8px !important;
}

.nav-group-title {
  width: calc(100% - 0px) !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  margin: 0 0 6px 0 !important;
  padding: 8px 10px !important;
  color: var(--vs-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.nav-group-title:hover {
  background: var(--vs-surface-soft) !important;
  color: var(--vs-primary) !important;
  border-color: var(--vs-accent) !important;
}

.nav-group-title i:first-child {
  font-size: 10px !important;
  color: #4b5563 !important;
  transition: transform .18s ease !important;
}

.nav-group-title i:not(:first-child) {
  color: var(--vs-primary) !important;
}

.nav-group.collapsed .nav-group-title i:first-child {
  transform: rotate(-90deg) !important;
}

.nav-group-items {
  padding: 0 0 2px 12px !important;
}

.nav-group.collapsed .nav-group-items {
  display: none !important;
}

.module-menu .nav-item {
  width: calc(100% - 0px) !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 5px 0 !important;
  padding: 7px 8px 7px 12px !important;
  color: var(--vs-text) !important;
  background: #fdfdfd !important;
  border: 1px solid var(--vs-border-soft) !important;
  border-radius: 4px !important;
  font-weight: 650 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.module-menu .nav-item:hover {
  background: var(--vs-surface-soft) !important;
  color: var(--vs-primary) !important;
  border-color: var(--vs-accent) !important;
}

.module-menu .nav-item.active {
  background: var(--vs-panel-blue) !important;
  color: #0f3c91 !important;
  border-color: var(--vs-border-strong) !important;
}

.module-menu .nav-item.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* Área principal */
.erp-content {
  padding: 8px !important;
  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 {
  background: var(--vs-card) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius) !important;
  box-shadow: var(--vs-shadow-sm) !important;
}

.erp-tabs-card {
  margin-bottom: 8px !important;
  overflow: visible !important;
}

.erp-tabs-bar,
.erp-subtabs-bar {
  background: var(--vs-panel-header) !important;
  border-color: var(--vs-border) !important;
}

.tab-btn {
  color: var(--vs-text) !important;
  background: var(--vs-panel) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  min-height: 42px !important;
}

.tab-btn:hover {
  background: #ffffff !important;
  border-color: var(--vs-accent) !important;
  color: var(--vs-primary) !important;
}

.tab-btn.active {
  background: #ffffff !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-primary) var(--vs-border) #ffffff !important;
  box-shadow: inset 0 2px 0 var(--vs-primary) !important;
}

.tab-btn.active::after {
  display: none !important;
}

.subtab-btn {
  color: var(--vs-text) !important;
  background: var(--vs-panel) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 7px 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.subtab-btn:hover {
  background: #ffffff !important;
  color: var(--vs-primary) !important;
}

.subtab-btn.active {
  background: #ffffff !important;
  color: var(--vs-text) !important;
  border-bottom-color: #ffffff !important;
  box-shadow: inset 0 2px 0 var(--vs-primary) !important;
}

.grid-toolbar-card,
.form-panel {
  padding: 12px !important;
}

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

/* Bootstrap */
.btn {
  border-radius: 4px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.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);
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
}

.form-label {
  color: var(--vs-label) !important;
}

.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.form-input,
.grid-search {
  background-color: #ffffff !important;
  border-color: var(--vs-border) !important;
  border-radius: var(--vs-radius-control) !important;
  color: var(--vs-text) !important;
  box-shadow: none !important;
}

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

.input-group-text {
  border-color: var(--vs-border) !important;
  background: var(--vs-surface-soft) !important;
  color: #667085 !important;
}

/* Formulário dinâmico gerado por vscloud-admin.js */
.form-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.form-panel::before {
  content: "Dados" !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--vs-border-soft) !important;
  font-size: 15px !important;
}

.form-panel .row {
  row-gap: 10px !important;
  align-items: end !important;
}

.form-panel .vs-field,
.form-panel [data-vs-field] {
  min-width: 0 !important;
}

.form-panel label.form-label {
  display: block !important;
  font-size: 12px !important;
  color: #344054 !important;
  margin-bottom: 4px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

.form-panel .form-control-sm,
.form-panel .form-select-sm,
.lookup-input {
  min-height: 40px !important;
  height: 40px !important;
  font-size: 14px !important;
  padding: 7px 11px !important;
}

.form-panel textarea.form-control-sm {
  height: auto !important;
  min-height: 78px !important;
}

/* Checkbox não vira campo gigante: fica alinhado à linha dos inputs. */
.field-check-block,
.vs-check-block {
  width: 100% !important;
}

.field-check-control,
.vs-check-field {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid #d6deeb !important;
  border-radius: var(--vs-radius-control) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.field-check-control:hover,
.vs-check-field:hover {
  border-color: var(--vs-accent) !important;
  background: #fbfdff !important;
}

.field-check-control:focus-within,
.vs-check-field:focus-within {
  border-color: var(--vs-accent) !important;
  box-shadow: 0 0 0 .18rem rgba(37,99,235,.12) !important;
}

.field-check-control .form-check-input,
.vs-check-field .form-check-input,
.form-check-input {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  border: 1px solid #b9c2d0 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

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

.field-check-text,
.vs-check-label {
  margin: 0 !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  user-select: none !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.vs-field-checkbox label.form-label,
.vs-field-checkbox .form-label {
  display: none !important;
}

/* Campos específicos reclamados no layout */
.form-panel .vs-field-motivo,
.form-panel .vs-field-motivo-bloqueiro,
.form-panel [data-vs-field="MOTIVO"],
.form-panel [data-vs-field="MOTIVO_BLOQUEIRO"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.form-panel .vs-field-juros,
.form-panel [data-vs-field="JUROS"] {
  flex: 0 0 120px !important;
  max-width: 120px !important;
}

.form-panel .vs-field-taxa,
.form-panel .vs-field-taxa-juros,
.form-panel [data-vs-field="TAXA"],
.form-panel [data-vs-field="TAXA_JUROS"] {
  flex: 0 0 180px !important;
  max-width: 180px !important;
}

.form-panel .vs-field-bloqueado,
.form-panel .vs-field-bloqueia-cliente,
.form-panel [data-vs-field="BLOQUEADO"],
.form-panel [data-vs-field="BLOQUEIA_CLIENTE"] {
  flex: 0 0 180px !important;
  max-width: 180px !important;
}

.form-panel .vs-field-pessoa,
.form-panel .vs-field-tipo,
.form-panel [data-vs-field="PESSOA"],
.form-panel [data-vs-field="TIPO"] {
  flex: 0 0 260px !important;
  max-width: 260px !important;
}

.form-panel .vs-field-cadastro,
.form-panel .vs-field-inicio,
.form-panel [data-vs-field="CADASTRO"],
.form-panel [data-vs-field="INICIO"] {
  flex: 0 0 210px !important;
  max-width: 210px !important;
}

/* Grid / Tabulator no estilo desktop */
.grid-shell {
  border-radius: 4px !important;
}

.tabulator {
  border: 0 !important;
  background: #ffffff !important;
  font-size: 13px !important;
}

.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
  background: var(--vs-panel-header) !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
}

.tabulator .tabulator-header .tabulator-col-title {
  font-weight: 700 !important;
}

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

.tabulator .tabulator-row:hover {
  background: #eef6ff !important;
}

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

.tabulator .tabulator-cell {
  border-right: 1px solid var(--vs-border-soft) !important;
  padding: 5px 8px !important;
}

.lookup-dropdown,
.lookup-menu,
.lookup-results {
  border-color: var(--vs-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--vs-shadow) !important;
}

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

@media (max-width: 991.98px) {
  .erp-sidebar {
    width: 240px !important;
    min-width: 240px !important;
  }

  .erp-content {
    padding: 8px !important;
  }

  .form-panel .vs-field-cadastro,
  .form-panel .vs-field-inicio,
  .form-panel .vs-field-pessoa,
  .form-panel .vs-field-tipo,
  .form-panel .vs-field-bloqueado,
  .form-panel .vs-field-bloqueia-cliente,
  .form-panel .vs-field-juros,
  .form-panel .vs-field-taxa,
  .form-panel .vs-field-taxa-juros,
  .form-panel [data-vs-field] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Logo PNG personalizada ---------------------------------------------------
   Substitua o arquivo public/admin/img/logo-vscloud.png pela sua logo.
   O HTML usa ?v=1 para evitar cache; aumente para ?v=2 quando trocar a imagem.
---------------------------------------------------------------------------- */
.erp-logo-custom {
  min-width: 210px !important;
  gap: 10px !important;
  align-items: center !important;
  text-decoration: none !important;
}

.erp-logo-image {
  width: 86px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  overflow: hidden !important;
}

.erp-logo-png {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.erp-logo-custom .erp-logo-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.05 !important;
}

/* Para usar somente a imagem, adicione a classe "erp-logo-only-image" no <a>. */
.erp-logo-only-image .erp-logo-text {
  display: none !important;
}

.erp-logo-only-image .erp-logo-image {
  width: 145px !important;
  height: 42px !important;
}

@media (max-width: 991.98px) {
  .erp-logo-custom {
    min-width: auto !important;
  }

  .erp-logo-custom .erp-logo-text {
    display: none !important;
  }

  .erp-logo-image {
    width: 92px !important;
  }
}