/* @layer-wrapped:components */
@layer components {
.ds-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--nz-transition-fast),
    box-shadow var(--nz-transition-fast),
    border-color var(--nz-transition-fast),
    background var(--nz-transition-fast),
    color var(--nz-transition-fast);
}

.ds-button > i,
.ds-button > svg {
  flex: 0 0 auto;
}

.ds-button--primary {
  overflow: hidden;
  background: linear-gradient(135deg, var(--nz-blue-700), var(--nz-blue-600) 56%, var(--nz-blue-500));
  color: #fff;
  border-color: var(--nz-intensity-medium-border);
  box-shadow: var(--nz-intensity-medium-glow);
}

.ds-button--primary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 1.15rem;
  height: 100%;
  background: rgba(94, 215, 255, 0.22);
  clip-path: polygon(48% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.82;
  pointer-events: none;
}

.ds-button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.20) 42%, transparent 58%);
  transform: translateX(-130%) skewX(-18deg);
  transition: transform 260ms ease;
}

.ds-button--primary:hover {
  color: #fff;
  transform: translateY(-1px);
}

.ds-button--primary:hover::after {
  transform: translateX(130%) skewX(-18deg);
}

.ds-button--strong {
  background: var(--nz-intensity-strong-signal);
  color: #fff;
  border-color: var(--nz-intensity-strong-border);
  box-shadow: var(--nz-intensity-strong-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ds-button--strong:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.ds-button--secondary {
  background: var(--color-surface-solid);
  color: var(--color-primary-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}

.ds-button--secondary:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--color-primary-200);
  transform: translateY(-1px);
}

.ds-button--ghost {
  background: transparent;
  color: var(--color-text-soft);
  border-color: transparent;
}

.ds-button--ghost:hover {
  background: rgba(31, 94, 255, 0.07);
  color: var(--color-text);
}

.ds-button--danger {
  background: linear-gradient(135deg, var(--color-danger-700), var(--color-danger-500));
  color: var(--color-danger-fg);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(212, 71, 92, 0.28);
}

.ds-button--danger:hover {
  filter: brightness(1.08);
  color: var(--color-danger-fg);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 71, 92, 0.36);
}

.ds-button--danger-ghost {
  background: transparent;
  color: var(--color-danger);
  border-color: transparent;
}

.ds-button--danger-ghost:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.ds-button--success {
  background: linear-gradient(135deg, var(--color-success-700), var(--color-success-500));
  color: var(--color-success-fg);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(23, 166, 114, 0.28);
}

.ds-button--success:hover {
  filter: brightness(1.08);
  color: var(--color-success-fg);
  transform: translateY(-1px);
}

.ds-button--sm {
  min-height: 32px;
  padding: 0.4rem 0.75rem;
  font-size: var(--font-size-sm);
}

.ds-button--lg {
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  font-size: var(--font-size-base);
}

.ds-button:disabled,
.ds-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.ds-button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ds-button.is-loading::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-circle);
  animation: ds-button-spin 0.7s linear infinite;
  color: var(--color-text);
}

@keyframes ds-button-spin {
  to { transform: rotate(360deg); }
}

.ds-button--primary.is-loading::before,
.ds-button--strong.is-loading::before,
.ds-button--danger.is-loading::before,
.ds-button--success.is-loading::before {
  color: #fff;
}

.ds-field {
  width: 100%;
  min-height: 42px;
  padding: 0.72rem 0.85rem;
  color: var(--color-text);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(7, 17, 31, 0.02);
  transition: border-color var(--nz-transition-fast), box-shadow var(--nz-transition-fast), background var(--nz-transition-fast);
}

.ds-field:focus {
  border-color: rgba(51, 135, 255, 0.72);
  box-shadow: var(--nz-intensity-light-focus), 0 10px 24px rgba(7, 17, 31, 0.05);
  outline: 0;
}

/* ── Form Input ── */

.ds-input {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  outline: none;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.ds-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}

.ds-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.ds-input:hover:not(:focus):not(:disabled) {
  background: var(--color-surface-solid);
  border-color: var(--color-border-strong);
}

/* ── Input with Icon ── */

.ds-input--icon {
  padding-left: 34px;
}

.ds-input-group {
  position: relative;
  width: 100%;
}

.ds-input-group__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 14px;
  pointer-events: none;
  line-height: 1;
}

.ds-input-group .ds-input {
  padding-left: 50px;
}

/* ── Select ── */

.ds-select {
  width: 100%;
  min-height: 36px;
  padding: 0 28px 0 12px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  background-color: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  outline: none;
  box-shadow: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.ds-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.ds-select:hover:not(:focus):not(:disabled) {
  background-color: var(--color-surface-solid);
  border-color: var(--color-border-strong);
}

.ds-select option {
  color: var(--color-text);
  background: var(--color-surface-solid);
}

/* ── Filter Toolbar ── */

.ds-filter-toolbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(7, 17, 31, 0.02);
}

.ds-filter-toolbar__row {
  display: contents;
}

.ds-filter-label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* ── Context Breadcrumb ── */

.ds-context-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(18, 63, 183, 0.06);
}

.ds-context-line__label {
  font-weight: 700;
  color: var(--color-text);
}

.ds-context-line__divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.ds-context-line__meta {
  color: var(--color-text-soft);
  font-size: 13px;
}

.ds-context-line__extra {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(31, 94, 255, 0.05);
}

.ds-card {
  position: relative;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--nz-intensity-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--nz-intensity-light-shadow);
}

.ds-card--signal {
  padding-left: var(--space-6);
  border-color: var(--nz-intensity-medium-border);
}

.ds-card--signal::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--nz-intensity-medium-signal);
}

.ds-card--compact {
  padding: var(--space-3);
}

.ds-card--padded {
  padding: var(--space-6);
}

.ds-card--ticket {
  overflow: hidden;
  background: var(--color-surface-solid);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.62rem;
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.01em;
  line-height: 1;
}

.ds-badge--info {
  color: var(--color-info-text);
  background: var(--color-info-soft);
  border-color: var(--color-info-200);
}

.ds-badge--success {
  color: var(--color-success-text);
  background: var(--color-success-soft);
  border-color: var(--color-success-200);
}

.ds-badge--warning {
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border-color: var(--color-warning-200);
}

.ds-badge--danger {
  color: var(--color-danger-text);
  background: var(--color-danger-soft);
  border-color: var(--color-danger-200);
}

.ds-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.9rem 1rem;
  background: var(--color-surface-solid);
  border: 1px solid var(--nz-intensity-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--nz-intensity-light-shadow);
  transition: transform var(--nz-transition-fast), box-shadow var(--nz-transition-fast), border-color var(--nz-transition-fast);
}

.ds-list-item::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 18px;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94, 215, 255, 0.58));
  opacity: 0;
  transform: skewX(-28deg);
  transition: opacity var(--nz-transition-fast);
}

.ds-list-item:hover {
  border-color: var(--nz-intensity-medium-border);
  box-shadow: 0 14px 34px rgba(7, 17, 31, 0.07);
  transform: translateY(-1px);
}

.ds-list-item:hover::after {
  opacity: 1;
}

.ds-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--nz-intensity-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--nz-intensity-light-shadow);
}

.ds-toolbar__content {
  min-width: 0;
}

.ds-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Pagination ── */

.ds-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 0 0 12px;
  border-top: 0;
  background: transparent;
}

.ds-pagination__summary,
.ds-pagination__size span {
  color: var(--color-text-soft);
  font-size: 12px;
}

.ds-pagination__controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ds-pagination__nav,
.ds-pagination__page,
.ds-pagination__size select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: var(--color-surface-solid);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ds-pagination__nav,
.ds-pagination__page {
  min-width: 34px;
  padding: 0 10px;
}

.ds-pagination__page.is-active,
.ds-pagination__nav:hover,
.ds-pagination__page:hover,
.ds-pagination__size select:hover,
.ds-pagination__size select:focus {
  border-color: var(--color-primary-200);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  box-shadow: var(--shadow-focus);
  outline: 0;
  transform: translateY(-1px);
}

.ds-pagination__page.is-active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}

.ds-pagination__nav:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.ds-pagination__ellipsis {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  padding: 0 0.12rem;
}

.ds-pagination__size {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
  gap: 0.48rem;
}

.ds-pagination__size select {
  min-width: 4.6rem;
  padding: 0 0.8rem;
}

/* ============================================================
   FORMS — Tier 1
   ============================================================
   Padrões:
   <div class="ds-form-group">
     <label class="ds-form-label">Texto<span class="ds-form-required">*</span></label>
     <input class="ds-input" type="text">
     <small class="ds-form-helper">Texto de ajuda.</small>
     <small class="ds-form-error">Mensagem de erro.</small>
   </div>
   ============================================================ */

.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ds-form-group.is-error .ds-input,
.ds-form-group.is-error .ds-field,
.ds-form-group.is-error .ds-select,
.ds-form-group.is-error .ds-textarea {
  border-color: var(--color-danger);
  box-shadow: var(--shadow-focus-danger);
}

.ds-form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: var(--letter-spacing-tight);
}

.ds-form-required {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.ds-form-helper {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  line-height: var(--line-height-snug);
}

.ds-form-error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-danger-text);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.ds-form-error::before {
  content: "\f071"; /* fa-triangle-exclamation */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.78em;
}

/* Form grid — substitui Bootstrap col-* */
.ds-form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.ds-form-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-form-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-form-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ds-form-grid__full {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .ds-form-grid--cols-2,
  .ds-form-grid--cols-3,
  .ds-form-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Form section — agrupador com título */
.ds-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ds-form-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ds-form-section__head h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

.ds-form-section__head p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

/* Textarea */
.ds-textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: var(--line-height-normal);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-textarea::placeholder {
  color: var(--color-text-muted);
}

.ds-textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-strong);
}

.ds-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.ds-textarea:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Checkbox e Radio compartilham estrutura */
.ds-checkbox,
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  user-select: none;
  line-height: var(--line-height-normal);
}

.ds-checkbox input,
.ds-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ds-checkbox__indicator,
.ds-radio__indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-surface-solid);
  border: 1.5px solid var(--color-border-strong);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-checkbox__indicator {
  border-radius: var(--radius-xs);
}

.ds-radio__indicator {
  border-radius: var(--radius-circle);
}

.ds-checkbox:hover .ds-checkbox__indicator,
.ds-radio:hover .ds-radio__indicator {
  border-color: var(--color-primary);
}

.ds-checkbox input:focus-visible + .ds-checkbox__indicator,
.ds-radio input:focus-visible + .ds-radio__indicator {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.ds-checkbox input:checked + .ds-checkbox__indicator {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.ds-checkbox input:checked + .ds-checkbox__indicator::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--color-primary-fg);
  border-bottom: 2px solid var(--color-primary-fg);
  transform: rotate(-45deg) translate(1px, -1px);
}

.ds-radio input:checked + .ds-radio__indicator {
  border-color: var(--color-primary);
  border-width: 5px;
}

.ds-checkbox input:disabled + .ds-checkbox__indicator,
.ds-radio input:disabled + .ds-radio__indicator {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.ds-checkbox input:disabled ~ *,
.ds-radio input:disabled ~ * {
  cursor: not-allowed;
  color: var(--color-text-disabled);
}

/* Switch / Toggle */
.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  user-select: none;
}

.ds-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ds-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  background: var(--color-neutral-bg-strong);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-surface-solid);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.ds-switch input:focus-visible + .ds-switch__track {
  box-shadow: var(--shadow-focus);
}

.ds-switch input:checked + .ds-switch__track {
  background: var(--color-primary);
}

.ds-switch input:checked + .ds-switch__track .ds-switch__thumb {
  transform: translateX(18px);
}

.ds-switch input:disabled + .ds-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* File upload — drop zone */
.ds-file-upload {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-solid);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  font-family: var(--font-sans);
}

.ds-file-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ds-file-upload:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.ds-file-upload:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.ds-file-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

.ds-file-upload__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-file-upload__copy strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.ds-file-upload__copy small {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.ds-file-upload.is-dragging {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* ============================================================
   TABLE — Tier 1
   ============================================================ */

.ds-table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-solid);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.ds-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-soft);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.ds-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.ds-table tbody tr:last-child td {
  border-bottom: none;
}

.ds-table--hover tbody tr {
  transition: background var(--transition-fast);
  cursor: pointer;
}

.ds-table--hover tbody tr:hover {
  background: var(--color-primary-soft);
}

.ds-table--striped tbody tr:nth-child(even) {
  background: var(--color-surface-muted);
}

.ds-table--compact thead th,
.ds-table--compact tbody td {
  padding: var(--space-2) var(--space-3);
}

/* Sortable header */
.ds-table th.is-sortable {
  cursor: pointer;
  user-select: none;
}

.ds-table th.is-sortable::after {
  content: "\f0dc"; /* fa-sort */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: var(--space-1);
  opacity: 0.4;
  font-size: 0.85em;
}

.ds-table th.is-sorted-asc::after {
  content: "\f0de"; /* fa-sort-up */
  opacity: 1;
  color: var(--color-primary);
}

.ds-table th.is-sorted-desc::after {
  content: "\f0dd"; /* fa-sort-down */
  opacity: 1;
  color: var(--color-primary);
}

/* Estado de loading na tabela */
.ds-table-loading td {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}

/* ============================================================
   ALERT — Tier 1
   ============================================================
   <div class="ds-alert ds-alert--info">
     <i class="ds-alert__icon fa-solid fa-circle-info"></i>
     <div class="ds-alert__body">
       <strong class="ds-alert__title">Título</strong>
       <p>Mensagem.</p>
     </div>
     <button class="ds-alert__close">×</button>
   </div>
   ============================================================ */

.ds-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  align-items: flex-start;
}

.ds-alert__icon {
  flex: 0 0 auto;
  font-size: var(--font-size-lg);
  line-height: 1.2;
  margin-top: 2px;
}

.ds-alert__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ds-alert__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-tight);
}

.ds-alert__body p {
  margin: 0;
  color: inherit;
  opacity: 0.9;
}

.ds-alert__close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0 var(--space-1);
  font-size: var(--font-size-lg);
  line-height: 1;
  border-radius: var(--radius-xs);
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.ds-alert__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.ds-alert--info {
  background: var(--color-info-soft);
  color: var(--color-info-text);
  border-color: var(--color-info-200);
}

.ds-alert--info .ds-alert__icon {
  color: var(--color-info);
}

.ds-alert--success {
  background: var(--color-success-soft);
  color: var(--color-success-text);
  border-color: var(--color-success-200);
}

.ds-alert--success .ds-alert__icon {
  color: var(--color-success);
}

.ds-alert--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border-color: var(--color-warning-200);
}

.ds-alert--warning .ds-alert__icon {
  color: var(--color-warning);
}

.ds-alert--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border-color: var(--color-danger-200);
}

.ds-alert--danger .ds-alert__icon {
  color: var(--color-danger);
}

/* Variante filled (uso pontual, mais agressiva) */
.ds-alert--filled {
  color: #fff;
  border-color: transparent;
}

.ds-alert--filled.ds-alert--info { background: var(--color-info); }
.ds-alert--filled.ds-alert--success { background: var(--color-success); }
.ds-alert--filled.ds-alert--warning { background: var(--color-warning); }
.ds-alert--filled.ds-alert--danger { background: var(--color-danger); }

.ds-alert--filled .ds-alert__icon {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   PAGE HERO — Tier 1
   ============================================================
   <header class="ds-page-hero">
     <div class="ds-page-hero__copy">
       <span class="ds-page-hero__eyebrow">Categoria</span>
       <h1 class="ds-page-hero__title">Título</h1>
       <p class="ds-page-hero__subtitle">Subtítulo descritivo.</p>
     </div>
     <div class="ds-page-hero__actions">
       <button class="ds-button ds-button--primary">Ação</button>
     </div>
   </header>
   ============================================================ */

.ds-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.ds-page-hero--compact {
  padding: var(--space-4) 0 var(--space-3);
  margin-bottom: var(--space-4);
}

.ds-page-hero--no-divider {
  border-bottom: none;
}

/* --- Variante --accent: dark hero para telas operacionais (admin/helpdesk/inventário) ---
   Quando usar:
     ✓ Telas administrativas com conteúdo denso (Kanban, listings, dashboards)
     ✓ Telas com ação primária no hero (botões "Novo X" ficam destacados)
     ✓ "Sinaliza" área de trabalho profissional / operacional
   Quando NÃO usar:
     ✗ Páginas públicas (login, knowledge base público) — devem ser acolhedoras
     ✗ Páginas de formulário/settings — hero neutro deixa o conteúdo respirar
   Dark mode: usa gradiente ligeiramente mais claro que o body (token sobrescrito em [data-theme-mode="dark"])
   para preservar hierarquia visual. */
.ds-page-hero--accent {
  background: var(--gradient-hero-accent);
  color: var(--color-hero-accent-text);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border-bottom: none;
  box-shadow: var(--shadow-hero-accent);
}

.ds-page-hero--accent .ds-page-hero__title,
.ds-page-hero--accent .ds-page-hero__subtitle,
.ds-page-hero--accent .ds-page-hero__meta {
  color: inherit;
}

.ds-page-hero--accent .ds-page-hero__subtitle,
.ds-page-hero--accent .ds-page-hero__meta {
  color: var(--color-hero-accent-text-soft);
}

.ds-page-hero--accent .ds-page-hero__eyebrow {
  color: var(--nz-cyan-400);
}

.ds-page-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.ds-page-hero__eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-primary);
}

.ds-page-hero__title {
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.ds-page-hero__subtitle {
  margin: 0;
  max-width: 64ch;
  font-size: var(--font-size-base);
  color: var(--color-text-soft);
  line-height: var(--line-height-relaxed);
}

.ds-page-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  text-align: right;
}

.ds-page-hero__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .ds-page-hero__title {
    font-size: var(--font-size-2xl);
  }
  .ds-page-hero__actions {
    width: 100%;
  }
}

/* ============================================================
   EMPTY STATE — Tier 1
   ============================================================ */

.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-5);
  gap: var(--space-3);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
}

.ds-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.ds-empty-state__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

.ds-empty-state__body {
  margin: 0;
  max-width: 48ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-soft);
}

.ds-empty-state__action {
  margin-top: var(--space-3);
}

.ds-empty-state--compact {
  padding: var(--space-6) var(--space-4);
}

.ds-empty-state--compact .ds-empty-state__icon {
  width: 48px;
  height: 48px;
  font-size: var(--font-size-xl);
}

/* ============================================================
   SKELETON — Tier 1 (loading placeholders)
   ============================================================ */

@keyframes ds-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ds-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 0%,
    var(--color-border-subtle) 50%,
    var(--color-surface-muted) 100%
  );
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.6s var(--ease-standard) infinite;
  border-radius: var(--radius-sm);
}

.ds-skeleton--text {
  height: 0.875rem;
  width: 100%;
  border-radius: var(--radius-xs);
}

.ds-skeleton--title {
  height: 1.5rem;
  width: 60%;
  border-radius: var(--radius-xs);
}

.ds-skeleton--circle {
  border-radius: var(--radius-circle);
  width: 40px;
  height: 40px;
}

.ds-skeleton--rect {
  height: 120px;
  width: 100%;
  border-radius: var(--radius-md);
}

.ds-skeleton--line {
  height: 0.625rem;
  width: 100%;
  border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
  .ds-skeleton {
    animation: none;
    background: var(--color-surface-muted);
  }
}

/* ============================================================
   STAT CARD — Tier 2 (KPI / métrica)
   ============================================================
   <button class="ds-stat-card">
     <span class="ds-stat-card__icon ds-stat-card__icon--primary">
       <i class="fa-solid fa-clipboard-list"></i>
     </span>
     <span class="ds-stat-card__body">
       <small class="ds-stat-card__label">Todos os chamados</small>
       <strong class="ds-stat-card__value">128</strong>
       <em class="ds-stat-card__hint">+12 esta semana</em>
     </span>
   </button>
   ============================================================ */

.ds-stat-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.ds-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-200);
}

.ds-stat-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-border-focus);
}

.ds-stat-card.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
}

.ds-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
}

.ds-stat-card__icon--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.ds-stat-card__icon--success { background: var(--color-success-soft); color: var(--color-success); }
.ds-stat-card__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.ds-stat-card__icon--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.ds-stat-card__icon--neutral { background: var(--color-neutral-bg);  color: var(--color-neutral-fg-soft); }

.ds-stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ds-stat-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.ds-stat-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.ds-stat-card__hint {
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-text-muted);
}

/* ============================================================
   DETAIL ROW — label + value (rápido para info pages)
   ============================================================
   <dl class="ds-detail-list">
     <div class="ds-detail-row">
       <dt class="ds-detail-row__label">Solicitante</dt>
       <dd class="ds-detail-row__value">João Silva</dd>
     </div>
   </dl>
   ============================================================ */

.ds-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.ds-detail-row {
  display: grid;
  grid-template-columns: minmax(160px, 30%) 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--color-border-subtle);
  margin: 0;
}

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

.ds-detail-row--inline {
  grid-template-columns: 1fr auto;
  text-align: right;
}

.ds-detail-row--inline .ds-detail-row__value {
  text-align: right;
}

.ds-detail-row--stacked {
  grid-template-columns: 1fr;
  gap: var(--space-1);
  text-align: left;
}

.ds-detail-row__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-soft);
  margin: 0;
}

.ds-detail-row__value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-normal);
  margin: 0;
  word-break: break-word;
}

.ds-detail-row__value--empty {
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .ds-detail-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ============================================================
   AVATAR
   ============================================================ */

.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-circle);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  user-select: none;
}

.ds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-avatar--xs { width: 24px; height: 24px; font-size: 0.6rem; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: 0.72rem; }
.ds-avatar--md { width: 40px; height: 40px; font-size: 0.85rem; }
.ds-avatar--lg { width: 56px; height: 56px; font-size: 1.05rem; }
.ds-avatar--xl { width: 80px; height: 80px; font-size: 1.5rem; }

.ds-avatar--square { border-radius: var(--radius-md); }

/* Tons alternativos para iniciais */
.ds-avatar--success { background: var(--color-success-soft); color: var(--color-success-text); }
.ds-avatar--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.ds-avatar--danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.ds-avatar--neutral { background: var(--color-neutral-bg-strong);  color: var(--color-neutral-fg); }

/* Status dot */
.ds-avatar-with-status {
  position: relative;
  display: inline-block;
}

.ds-avatar-with-status .ds-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-surface-solid);
  background: var(--color-neutral-400);
}

.ds-avatar-status--online  { background: var(--color-success); }
.ds-avatar-status--away    { background: var(--color-warning); }
.ds-avatar-status--busy    { background: var(--color-danger); }
.ds-avatar-status--offline { background: var(--color-neutral-400); }

/* User pill — avatar + nome */
.ds-user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  min-width: 0;
}

.ds-user-pill__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ds-user-pill__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ds-user-pill__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ============================================================
   TABS
   ============================================================
   <div class="ds-tabs" role="tablist">
     <button class="ds-tab is-active" role="tab">Aba A</button>
     <button class="ds-tab" role="tab">Aba B</button>
   </div>
   <div class="ds-tab-panel">...</div>
   ============================================================ */

.ds-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ds-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.ds-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.ds-tab:focus-visible {
  outline: none;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.ds-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.ds-tab[disabled],
.ds-tab.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.ds-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-surface-muted);
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
}

.ds-tab.is-active .ds-tab__count {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

.ds-tab-panel {
  padding: var(--space-5) 0;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.ds-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-breadcrumb__item + .ds-breadcrumb__item::before {
  content: "\f054"; /* fa-chevron-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.7em;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.ds-breadcrumb__link {
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ds-breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.ds-breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   DIVIDER
   ============================================================ */

.ds-divider {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-5) 0;
  width: 100%;
}

.ds-divider--soft {
  background: var(--color-border-subtle);
}

.ds-divider--strong {
  background: var(--color-border-strong);
}

.ds-divider--accent {
  background: var(--nz-accent-line);
  height: 2px;
  border-radius: var(--radius-pill);
}

.ds-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--space-3);
}

.ds-divider--label {
  display: flex;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: transparent;
  height: auto;
  color: var(--color-text-soft);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-weight: var(--font-weight-semibold);
}

.ds-divider--label::before,
.ds-divider--label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ============================================================
   TAG / CHIP
   ============================================================
   <span class="ds-tag ds-tag--primary">Em andamento</span>
   <button class="ds-chip">Filtro <i class="fa-solid fa-xmark"></i></button>
   ============================================================ */

.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
  white-space: nowrap;
}

.ds-tag--primary { background: var(--color-primary-soft); color: var(--color-primary-text); }
.ds-tag--success { background: var(--color-success-soft); color: var(--color-success-text); }
.ds-tag--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.ds-tag--danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.ds-tag--info    { background: var(--color-info-soft);    color: var(--color-info-text); }

.ds-tag--outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.ds-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: currentColor;
}

/* Chip — variante interativa (com remover/clicar) */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-solid);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ds-chip:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-primary-300);
}

.ds-chip.is-active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}

.ds-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  border-radius: var(--radius-circle);
  font-size: 0.7em;
  padding: 0;
}

.ds-chip__remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   ICON BUTTON — botão com apenas ícone
   ============================================================ */

.ds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ds-icon-button:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.ds-icon-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ds-icon-button:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.ds-icon-button--sm { width: 28px; height: 28px; font-size: var(--font-size-sm); }
.ds-icon-button--lg { width: 44px; height: 44px; font-size: var(--font-size-lg); }

.ds-icon-button--solid {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

.ds-icon-button--solid:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-fg);
}

.ds-icon-button--danger {
  color: var(--color-danger);
}

.ds-icon-button--danger:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* ============================================================
   WORKSPACE SWITCHER — seletor de contexto (tenant/empresa)
   ============================================================
   Padrão Linear/Notion: posicionado no topo do sidebar.
   Exibe contexto ativo + dropdown com busca, recentes e árvore.
   Quando colapsado, mostra apenas o avatar do contexto. */

.ds-workspace-switcher {
  position: relative;
  width: 100%;
  font-family: var(--font-sans);
}

.ds-workspace-switcher__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--color-nav-text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ds-workspace-switcher__trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(94, 215, 255, 0.32);
}

.ds-workspace-switcher__trigger:focus-visible {
  outline: none;
  border-color: var(--nz-cyan-400);
  box-shadow: 0 0 0 3px rgba(54, 191, 255, 0.18);
}

.ds-workspace-switcher__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}

.ds-workspace-switcher__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-workspace-switcher__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.ds-workspace-switcher__copy small {
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-nav-text-muted);
  line-height: 1.2;
}

.ds-workspace-switcher__copy strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-nav-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.ds-workspace-switcher__caret {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--color-nav-text-muted);
  transition: transform var(--transition-fast);
}

.ds-workspace-switcher.is-open .ds-workspace-switcher__caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.ds-workspace-switcher__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans);
}

.ds-workspace-switcher__panel[hidden] {
  display: none;
}

.ds-workspace-switcher__search {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex: 0 0 auto;
}

.ds-workspace-switcher__search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-text);
}

.ds-workspace-switcher__search input::placeholder {
  color: var(--color-text-muted);
}

.ds-workspace-switcher__search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.ds-workspace-switcher__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2) 0;
  scrollbar-width: thin;
}

.ds-workspace-switcher__group-label {
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
}

.ds-workspace-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: left;
  transition: background var(--transition-fast);
}

.ds-workspace-switcher__item:hover {
  background: var(--color-primary-soft);
}

.ds-workspace-switcher__item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
}

.ds-workspace-switcher__item.is-active::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: auto;
  color: var(--color-primary);
}

.ds-workspace-switcher__item-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
  font-weight: var(--font-weight-bold);
  font-size: 0.68rem;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  overflow: hidden;
}

.ds-workspace-switcher__item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-workspace-switcher__item-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-workspace-switcher__item-name {
  font-size: var(--font-size-sm);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-workspace-switcher__item-meta {
  font-size: 0.7rem;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-workspace-switcher__empty {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}

/* Loading skeleton state */
.ds-workspace-switcher.is-loading .ds-workspace-switcher__copy strong {
  color: var(--color-nav-text-muted);
  opacity: 0.7;
}

/* ============================================================
   Sidebar section labels — OPERAÇÃO / GESTÃO / SISTEMA
   ============================================================ */

.dashboard-nav-section__label {
  display: block;
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: 0.66rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-nav-text-muted);
}

/* Esconde labels quando sidebar está colapsado */
.dashboard-shell-collapsed .dashboard-nav-section__label,
[data-sidebar-collapsed="true"] .dashboard-nav-section__label,
.dashboard-compact .dashboard-nav-section__label {
  /* display: none remove o label do layout completamente em compact mode.
     Antes: visibility: hidden + height: 8px ainda ocupava espaco no flow,
     gerando ~40px de gap entre OPERACAO e GESTAO (label invisivel + paddings
     de section). Agora: zero altura, items das duas secoes ficam proximos
     respeitando apenas o gap natural do flex container. */
  display: none;
}

/* ============================================================
   Estado COLAPSADO da sidebar (.dashboard-compact)
   ============================================================ */

/* Workspace switcher: mostra só o avatar centralizado */
.dashboard-compact .ds-workspace-switcher__copy,
.dashboard-compact .ds-workspace-switcher__caret {
  display: none;
}

.dashboard-compact .ds-workspace-switcher__trigger {
  justify-content: center;
  padding: var(--space-2);
}

.dashboard-compact .ds-workspace-switcher__avatar {
  margin: 0 auto;
}

/* Quando o painel do switcher abre estando colapsado, fica posicionado
   à direita do sidebar (não dentro dele), com largura mínima própria. */
.dashboard-compact .ds-workspace-switcher.is-open .ds-workspace-switcher__panel {
  position: fixed;
  left: 80px;
  top: 80px;
  right: auto;
  width: 320px;
  max-width: calc(100vw - 100px);
}

/* Esconde container-host do switcher para evitar pular layout */
.dashboard-compact .dashboard-nav-workspace {
  padding: var(--space-2) 0;
}

/* Submenu dropdown: quando colapsado, abre como flyout à direita
   ao invés de empurrar conteúdo */
.dashboard-compact .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 220px;
  margin-left: var(--space-2);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

/* Separador entre categorias dinâmicas e itens estáticos no submenu */
.dashboard-nav-dropdown-divider {
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  margin: var(--space-1) var(--space-2);
}

/* ============================================================
   Brand logo no estado COLAPSADO (.dashboard-compact)
   ----------------------------------------------------------------
   Estratégia híbrida:
   - Sem upload custom (data-fallback="true") → usa o ::before legado
     do layout.css (background-image da logo Netzor centralizada,
     que mostra o "raio" naturalmente devido ao recorte do container).
   - Com upload custom (data-fallback="false") → mostra a img __collapsed
     como square asset (sobrepõe o ::before).
   ============================================================ */

.brand-logo__collapsed { display: none; }

/* Quando há upload custom, mostra a img dedicada e oculta o ::before legado */
.dashboard.dashboard-compact .brand-logo__collapsed[data-fallback="false"] {
  display: block !important;
  opacity: 1 !important;
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 2;
}

/* Quando há upload custom, esconde o ::before legado para não "vazar" atrás */
.dashboard.dashboard-compact .brand-logo:has(.brand-logo__collapsed[data-fallback="false"])::before {
  display: none !important;
}

/* Esconde o copy/título da brand quando colapsado */
.dashboard.dashboard-compact .brand-copy {
  display: none !important;
}

/* Itens do menu no estado COLAPSADO — alinhamento + hover circular.
   Prefixo :root[data-theme-mode] eleva specificity para 0,5,0+ a fim
   de vencer regras de layout-overrides.css que aplicam
   color: var(--custom-nav-text, #e5eefc) !important em
   .dashboard-nav-dropdown-toggle (specificity 0,4,0). Sem o prefixo,
   itens com submenu (Painel, Monitoramento, etc.) ficam com cor
   customizada da Identidade Visual em vez do branco esperado. */

:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-item,
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 4px auto !important;
  gap: 0 !important;
  border-radius: var(--radius-md) !important;
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  /* font-size: 0 colapsa text nodes diretos (ex: VPN Connections,
     que tem o label como text node direto do <a>, sem <span> wrapper).
     O ícone <i> reseta com font-size: 1.1rem !important abaixo. */
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-item i,
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-dropdown-toggle i {
  margin: 0 !important;
  font-size: 1.1rem !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: inherit !important;
  /* Reseta o text-indent: -9999px do parent para que o glyph FA
     centralize corretamente (não somos um text node). */
  text-indent: 0 !important;
}

/* Hover/active/dropdown.show — fundo translúcido centralizado no quadrado 44x44 */
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-item:hover,
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-item.active,
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-item.is-active,
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle,
:root[data-theme-mode] .dashboard.dashboard-compact .dashboard-nav-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FIX 1 — Chevron em compact mode some COMPLETAMENTE (display: none).
   Antes: visibility: hidden ocupava espaco no flex container → icone dos
   itens com dropdown-toggle (Inventario, Monitoramento, Empresas, etc.)
   era empurrado 5px para a esquerda comparado com itens sem chevron, gerando
   o desalinhamento horizontal visivel no sidebar collapsed.
   ========================================================================== */
.dashboard.dashboard-compact .dashboard-nav-dropdown > .dashboard-nav-dropdown-toggle::after {
  display: none !important;
}

/* ==========================================================================
   FIX 2 — Cancela `display: block !important` que dashboard-shell-locked
   aplica em #ordered-root-nav .dashboard-nav-root-item .dashboard-nav-dropdown
   (layout.css:8616). Sem isso, os wrappers da secao OPERACAO ficam block e
   nao centralizam o item de 44px (align-items: center nao funciona em block).
   Especificidade aumentada para vencer a regra existente.
   ========================================================================== */
html[data-theme-mode] body.dashboard-shell-locked .dashboard.dashboard-compact #ordered-root-nav .dashboard-nav-root-item,
html[data-theme-mode] body.dashboard-shell-locked .dashboard.dashboard-compact #ordered-root-nav .dashboard-nav-root-item .dashboard-nav-dropdown {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   FIX 3 — Padroniza dimensoes dos itens entre secoes OPERACAO e GESTAO.
   Antes: itens da OPERACAO (dentro de #ordered-root-nav) eram 38px com
   padding 7px 10px e gap 10px (forcado por dashboard-shell-locked rule).
   Itens da GESTAO eram 44x44 com padding 0 e gap 0.
   Resultado visual: tamanhos inconsistentes entre as duas secoes.
   Especificidade aumentada para vencer a regra de OPERACAO.
   ========================================================================== */
html[data-theme-mode] body.dashboard-shell-locked .dashboard.dashboard-compact #ordered-root-nav .dashboard-nav-root-item .dashboard-nav-item,
html[data-theme-mode] body.dashboard-shell-locked .dashboard.dashboard-compact #ordered-root-nav .dashboard-nav-root-item .dashboard-nav-dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 4px auto !important;
  gap: 0 !important;
  border-radius: var(--radius-md, 12px) !important;
}

/* Garante que TODOS os section/dropdown wrappers sejam full-width e
   centralizem horizontalmente o item de 44px dentro da sidebar de 92px */
.dashboard.dashboard-compact .dashboard-nav-section,
.dashboard.dashboard-compact .dashboard-nav-section--ds,
.dashboard.dashboard-compact .dashboard-nav-section--root,
.dashboard.dashboard-compact .dashboard-nav-section--bottom,
.dashboard.dashboard-compact .dashboard-nav-root-item,
.dashboard.dashboard-compact .dashboard-nav-dropdown,
.dashboard.dashboard-compact #ordered-root-nav {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Defesa em profundidade — esconde spans diretos (caso a regra existente não pegue) */
.dashboard.dashboard-compact .dashboard-nav-item > span,
.dashboard.dashboard-compact .dashboard-nav-dropdown-toggle > span {
  display: none !important;
}

/* Centraliza a lista (cancela padding-inline antigo) */
.dashboard.dashboard-compact .dashboard-nav-list {
  padding-inline: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard.dashboard-compact .dashboard-nav-section,
.dashboard.dashboard-compact .dashboard-nav-section--ds,
.dashboard.dashboard-compact .dashboard-nav-root-item,
.dashboard.dashboard-compact .dashboard-nav-dropdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header do sidebar: brand centralizada, hambúrguer escondido */
.dashboard.dashboard-compact .dashboard-nav-header {
  justify-content: center;
  padding: var(--space-3) 0 !important;
}

.dashboard.dashboard-compact .dashboard-nav-header .menu-toggle {
  display: none;
}

/* Workspace switcher centralizado */
.dashboard.dashboard-compact .dashboard-nav-workspace {
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0;
}

/* Sidebar com novo padrão de seções (sem o background do dropdown bg-secondary) */
.dashboard-nav-section--ds {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Bottom section flex-pushed (Configurações no rodapé) */
.dashboard-nav-section--bottom {
  margin-top: auto;
  padding-bottom: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Sidebar dropdown items — design refresh
   ============================================================
   Melhora a hierarquia visual dos sub-itens dentro de dropdowns
   abertos (Helpdesk, Configurações, Inventário, etc.):
   - Indent guide (border-left mais clara) sinaliza o agrupamento
   - Hover com translate sutil + background suave + transition
   - Active state com barra esquerda azul + bg sutil (substitui
     gradient pesado anterior)
   - Bullet/dot indicator sutil no hover/active
   ============================================================ */

/* Container do submenu: indent guide refinado */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu,
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown.is-open > .dashboard-nav-dropdown-menu,
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown.open > .dashboard-nav-dropdown-menu {
  /* Padding interno do submenu aberto */
  padding: 6px 0 6px 14px !important;
  margin: 4px 0 6px 14px !important;
  /* Guia visual da hierarquia (esq.) — mais visivel que antes */
  border-left: 1px solid rgba(148, 163, 184, 0.28) !important;
  /* Espaco entre items dentro do submenu */
  gap: 2px !important;
}

/* Item individual do submenu */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 8px 12px !important;
  margin: 1px 4px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
  border-left: 2px solid transparent !important;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease !important;
}

/* Hover: bg sutil + leve translate + cor mais brilhante */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  transform: translateX(2px) !important;
}

/* Active state: barra esquerda azul + bg azul muito sutil + texto branco
   (em vez do gradient pesado e do shadow grande do design anterior) */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item.active,
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item.is-active,
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item[aria-current="page"] {
  background: rgba(15, 92, 255, 0.18) !important;
  color: #fff !important;
  border-left: 2px solid #60a5fa !important;
  box-shadow: none !important;
  transform: none !important;
  /* min-height igual aos outros (evita shift visual quando muda active) */
  min-height: 34px !important;
}

/* Bullet do active: substitui o ::before existente por estilo mais limpo */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item.active::before,
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item.is-active::before,
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item[aria-current="page"]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 4px 0 0;
  border-radius: 999px;
  background: #60a5fa;
  display: inline-block;
  flex-shrink: 0;
}

/* Icones internos dos items (ex: <i> do Painel/Relatorio) — alinhamento */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-item > i {
  font-size: 13px !important;
  width: 14px !important;
  text-align: center !important;
  color: inherit !important;
  flex-shrink: 0;
}

/* Divider (hr) entre grupos no dropdown-menu */
html[data-theme-mode] body.dashboard-shell-locked .dashboard-nav-dropdown-divider {
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 6px 8px !important;
  height: 0;
}

/* Compact mode: o submenu ainda fica visibility: hidden, mas zera os
   paddings/margens extras do design refresh quando colapsado */
.dashboard.dashboard-compact .dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu,
.dashboard.dashboard-compact .dashboard-nav-dropdown.is-open > .dashboard-nav-dropdown-menu {
  padding: 0 !important;
  margin: 0 !important;
  border-left: 0 !important;
}

}