/* =============================================================================
   views.css — classes específicas das views do Admin
   ============================================================================= */

.section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  margin-bottom: 0.75rem;
}

.toolbar-inline {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.toolbar-label {
  font-size: 0.75rem;
  color: rgb(var(--slate-10, var(--lv-slate-10)));
  white-space: nowrap;
}

.overview-card {
  padding: 1.25rem;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.overview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.overview-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 8rem;
}

.overview-item__label {
  font-size: 0.7rem;
  color: rgb(var(--slate-10, var(--lv-slate-10)));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overview-item__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stats-card {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-card--compact {
  gap: 0.25rem;
}

.stats-card__label {
  font-size: 0.75rem;
  color: rgb(var(--slate-10, var(--lv-slate-10)));
}

.stats-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
}

.stats-card__value--sm {
  font-size: 0.875rem;
  font-weight: 500;
}

.overview-logs-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 18rem;
  overflow-y: auto;
}

.overview-logs-empty {
  font-size: 0.8rem;
  color: rgb(var(--slate-9, var(--lv-slate-9)));
}

.overview-logs-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.overview-logs-timestamp {
  color: rgb(var(--slate-9, var(--lv-slate-9)));
  white-space: nowrap;
  flex-shrink: 0;
}

.overview-logs-message {
  color: rgb(var(--slate-11, var(--lv-slate-11)));
  word-break: break-word;
}

.chart-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}

.logs-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.pagination__info {
  font-size: 0.75rem;
  color: rgb(var(--slate-10, var(--lv-slate-10)));
}

.security-card {
  max-width: 480px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.security-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  margin: 0;
}

.security-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.security-submit {
  align-self: flex-start;
}

.view-error {
  padding: 1.5rem;
  color: rgb(var(--ruby-9, var(--lv-ruby-9)));
}

.accounts-card {
  overflow-x: auto;
}

.accounts-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 9999px;
  background: rgb(var(--slate-4, var(--lv-slate-4)));
  color: rgb(var(--slate-11, var(--lv-slate-11)));
  font-size: 0.75rem;
  font-weight: 600;
}

.accounts-name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.accounts-name__title {
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  font-size: 0.875rem;
  font-weight: 600;
  word-break: break-word;
}

.accounts-name__meta {
  color: rgb(var(--slate-9, var(--lv-slate-9)));
  font-size: 0.75rem;
}

.accounts-tree-cell {
  vertical-align: top;
}

.feature-tree {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.feature-tree__children {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.feature-tree__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.75rem;
  padding-left: calc(var(--feature-depth, 0) * 0.9rem);
}

.feature-tree__row--disabled {
  opacity: 0.55;
}

.feature-tree__info {
  min-width: 0;
  display: flex;
  align-items: center;
}

.feature-tree__label {
  color: rgb(var(--slate-11, var(--lv-slate-11)));
  font-size: 0.75rem;
  line-height: 1.3;
  word-break: break-word;
}

.feature-tree__toggle {
  flex-shrink: 0;
}

.feature-tree__number-input {
  width: 4.5rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: rgb(var(--slate-3, var(--lv-slate-3)));
  border: 1px solid rgb(var(--slate-6, var(--lv-slate-6)));
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  text-align: right;
}

.feature-tree__number-input:focus {
  outline: none;
  border-color: rgb(var(--blue-9, var(--lv-blue-9)));
  box-shadow: 0 0 0 2px rgb(var(--blue-9, var(--lv-blue-9)) / 0.2);
}

.feature-tree__number-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Config view */

.config-view .card {
  max-width: 640px;
  padding: 1.5rem;
}

.config-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  margin: 0 0 0.25rem;
}

.config-subtitle {
  font-size: 0.8rem;
  color: rgb(var(--slate-10, var(--lv-slate-10)));
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

.config-field {
  padding: 0.75rem 0;
  border-top: 1px solid rgb(var(--slate-4, var(--lv-slate-4)));
}

.config-field:first-child {
  border-top: none;
}

.config-field__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.config-field__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.config-field__input {
  flex: 1;
  min-width: 0;
}

.config-field__meta {
  margin: 0.25rem 0 0;
  font-size: 0.7rem;
  color: rgb(var(--slate-9, var(--lv-slate-9)));
}

.config-field__meta code {
  font-family: monospace;
}

.config-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.config-badge--env {
  background: rgb(var(--blue-3, var(--lv-blue-3)));
  color: rgb(var(--blue-11, var(--lv-blue-11)));
}

.config-badge--conflict {
  background: rgb(var(--ruby-3, var(--lv-ruby-3)));
  color: rgb(var(--ruby-11, var(--lv-ruby-11)));
}

.config-badge--default {
  background: rgb(var(--slate-3, var(--lv-slate-3)));
  color: rgb(var(--slate-10, var(--lv-slate-10)));
}