/* ==============================================
   PEDIDOLINK - GLASS / FROSTED UI LAYER
   High-level glassmorphism - white-based near-transparent surfaces
   sobre fundo midnight-purple vívido.
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar, #topbar, .panel, .metric-card, .form-card,
  .orc-item, .ped-item, .modal-overlay, .modal, .toast,
  .cat-item, .preview-panel, .panel-kanban-dark,
  .gestao-kanban-dnd-root .kanban-col,
  .gestao-kanban-dnd-root .kcard, .client-link-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── Scrollbar roxa ── */
html {
  scrollbar-color: rgba(140, 80, 220, 0.35) transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(140, 80, 220, 0.35);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 100, 240, 0.55);
  background-clip: padding-box;
}

/* ══════════════════════════════════════════
   BACKGROUND - orbs vívidos, estilo nebulosa
   ══════════════════════════════════════════ */
body {
  background-color: var(--bg-root);
  background-image:
    /* Orb principal - roxo suave, centro-topo */
    radial-gradient(ellipse 160% 100% at 50% -15%,  rgba(90, 15, 155, 0.48), transparent 55%),
    /* Teal/cyan - canto superior direito */
    radial-gradient(ellipse 80%   65% at 105%   0%, rgba(0,  200, 220, 0.10), transparent 50%),
    /* Roxo secundário - canto inferior esquerdo */
    radial-gradient(ellipse 75%   60% at  -5%  95%, rgba(80,  15, 130, 0.18), transparent 52%),
    /* Laranja brand - canto inferior direito */
    radial-gradient(ellipse 70%   55% at  95% 110%, rgba(200, 60,  10, 0.08), transparent 48%),
    /* Teal sutil - centro-esquerdo */
    radial-gradient(ellipse 50%   40% at  18%  55%, rgba(0,  140, 180, 0.05), transparent 45%);
  background-attachment: fixed;
}

/* ── Shell transparente ── */
#main { background: transparent; }
.content-area { position: relative; }

/* ══════════════════════════════════════════
   SIDEBAR - vidro escuro com gradiente
   ══════════════════════════════════════════ */
#sidebar {
  background:
    linear-gradient(180deg,
      rgba(90, 20, 160, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 40%,
      rgba(0, 0, 0, 0.14) 100%
    );
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    4px 0 48px rgba(0, 0, 0, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #sidebar {
    -webkit-backdrop-filter: blur(40px) saturate(2.0);
    backdrop-filter: blur(40px) saturate(2.0);
  }
}

.sidebar-logo {
  background: linear-gradient(135deg, rgba(90, 20, 150, 0.08) 0%, rgba(255,255,255,0.02) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.20);
}

.sidebar-sign-out {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-sign-out:hover {
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.5);
  background: rgba(251, 113, 133, 0.08);
}

.nav-item:hover {
  background: rgba(140, 80, 220, 0.10);
  border-color: rgba(140, 80, 220, 0.16);
  color: #fff;
  box-shadow: var(--glass-inner-light);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(107, 33, 168, 0.32) 0%, rgba(200, 66, 15, 0.16) 100%);
  border-color: rgba(200, 66, 15, 0.40);
  color: #fff;
  box-shadow: var(--glass-inner-light), 0 0 20px rgba(107, 33, 168, 0.12);
}

.nav-item.active .nav-item-icon {
  background: rgba(107, 33, 168, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.user-block:hover {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
}

/* Avatar com gradiente brand */
.user-avatar {
  background: linear-gradient(135deg, var(--purple) 0%, var(--brand) 100%) !important;
  box-shadow: 0 0 12px rgba(107, 33, 168, 0.22);
}

/* Nav badge com gradiente */
.nav-badge {
  background: linear-gradient(135deg, var(--brand) 0%, var(--purple-light) 100%);
  box-shadow: 0 0 8px rgba(200, 66, 15, 0.30);
}

/* ══════════════════════════════════════════
   TOPBAR - vidro ultra-fino
   ══════════════════════════════════════════ */
#topbar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 40px rgba(0, 0, 0, 0.45);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #topbar {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(2.0);
    backdrop-filter: blur(var(--glass-blur)) saturate(2.0);
  }
}

.topbar-title {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.topbar-new-menu {
  background: rgba(30, 20, 60, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-shadow), var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar-new-menu {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8);
  }
}

.topbar-new-item:hover {
  background: rgba(140, 80, 220, 0.16);
}

/* ══════════════════════════════════════════
   PAINÉIS E CARTÕES - glass branco vívido
   ══════════════════════════════════════════ */
.panel {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow-soft), var(--glass-inner-light), var(--glass-shadow-inset);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(2.0);
    backdrop-filter: blur(var(--glass-blur)) saturate(2.0);
  }
}

.panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.025);
}

/* ── Metric Cards ── */
.metric-card {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow-soft), var(--glass-inner-light);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .metric-card {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(2.0);
    backdrop-filter: blur(var(--glass-blur)) saturate(2.0);
  }
}

.metric-card:hover {
  background: var(--glass-bg-card-hover);
  border-color: rgba(140, 80, 220, 0.24);
  box-shadow: var(--glass-shadow), var(--glass-inner-light), 0 0 24px rgba(107, 33, 168, 0.08);
  transform: translateY(-2px);
}

/* Linha de topo das métricas com gradiente */
.metric-card::before {
  background: linear-gradient(90deg, var(--metric-accent, var(--brand)) 0%, var(--purple-light) 100%);
  opacity: 0.90;
}

/* Valores das métricas com gradiente texto */
.metric-value {
  background: linear-gradient(135deg, #ffffff 20%, rgba(190, 155, 255, 0.92) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-1);
}

@supports not ((-webkit-background-clip: text) and (background-clip: text)) {
  .metric-value {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--text-1);
  }
}

.form-card {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow-soft), var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .form-card {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
  }
}

/* ── Listas orçamento / pedido ── */
.orc-item,
.ped-item {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow-soft), var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .orc-item,
  .ped-item {
    -webkit-backdrop-filter: blur(16px) saturate(1.9);
    backdrop-filter: blur(16px) saturate(1.9);
  }
}

.orc-item:hover,
.ped-item:hover {
  background: var(--glass-bg-card-hover);
  border-color: rgba(140, 80, 220, 0.18);
  box-shadow: var(--glass-shadow-soft), 0 0 16px rgba(107, 33, 168, 0.06);
}

/* ── Tabelas ── */
.data-table thead th {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.data-table tbody tr:hover {
  background: rgba(140, 80, 220, 0.08);
}

/* ── Campos e filtros ── */
.search-input,
.filter-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}

.search-input:focus,
.filter-select:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--brand-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--brand-glow);
}

.form-input,
.form-select,
.form-textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.20);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--brand-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--brand-glow);
}

.status-select {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── Botões ── */
.btn-outline {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-inner-light);
}

.btn-outline:hover {
  background: rgba(140, 80, 220, 0.14);
  border-color: rgba(140, 80, 220, 0.32);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 60%, #8a2a08 100%);
  box-shadow: 0 4px 28px rgba(200, 66, 15, 0.50), var(--glass-inner-light);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand-light) 100%);
  box-shadow: 0 6px 36px rgba(200, 66, 15, 0.60), var(--glass-inner-light);
  transform: translateY(-1px);
}

.btn-ghost:hover {
  background: rgba(140, 80, 220, 0.12);
}

.row-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.row-btn:hover {
  background: rgba(140, 80, 220, 0.14);
  border-color: rgba(140, 80, 220, 0.30);
}

/* ── Modais ── */
.modal-overlay {
  background: rgba(4, 2, 16, 0.72);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-overlay {
    -webkit-backdrop-filter: blur(var(--glass-blur-modal)) saturate(1.8);
    backdrop-filter: blur(var(--glass-blur-modal)) saturate(1.8);
  }
}

.modal {
  background: rgba(25, 18, 55, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-shadow), var(--glass-inner-light), 0 0 0 1px rgba(0, 0, 0, 0.30);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(2.0);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(2.0);
  }
}

.modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.modal-close:hover {
  background: rgba(140, 80, 220, 0.18);
  border-color: rgba(140, 80, 220, 0.32);
}

.modal-footer {
  border-top-color: rgba(255, 255, 255, 0.10);
}

/* ── Toasts ── */
.toast {
  background: rgba(25, 18, 55, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-shadow), var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toast {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  }
}

/* ── Badges ── */
.badge {
  box-shadow: var(--glass-inner-light);
}

.badge-muted {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.badge-purple {
  background: rgba(107, 33, 168, 0.18);
  color: #b06ae0;
  border: 1px solid rgba(140, 80, 220, 0.26);
}

/* ── Catálogo / preview (Novo Orçamento) ── */
.cat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cat-item {
    -webkit-backdrop-filter: blur(14px) saturate(1.8);
    backdrop-filter: blur(14px) saturate(1.8);
  }
}

.cat-item:hover {
  background: rgba(140, 80, 220, 0.14);
  border-color: var(--brand-border);
}

.cat-item.selected {
  background: linear-gradient(145deg, rgba(200, 66, 15, 0.32) 0%, rgba(107, 33, 168, 0.22) 100%);
  border-color: var(--brand);
  box-shadow: var(--glass-inner-light), 0 0 32px rgba(200, 66, 15, 0.16);
}

.preview-panel {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow-soft), var(--glass-inner-light);
  overflow: hidden;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .preview-panel {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
  }
}

.preview-hdr {
  background: linear-gradient(165deg, rgba(107, 33, 168, 0.50) 0%, rgba(200, 66, 15, 0.18) 55%, rgba(255, 255, 255, 0.03) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.qty-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* ══════════════════════════════════════════
   KANBAN GESTÃO - dark glass profundo
   ══════════════════════════════════════════ */
.panel-kanban-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--glass-shadow), var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel-kanban-dark {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(2.0);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(2.0);
  }
}

.gestao-kanban-inner {
  background: rgba(4, 2, 18, 0.90);
}

.gestao-kanban-dnd-root .kanban-col {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gestao-kanban-dnd-root .kanban-col {
    -webkit-backdrop-filter: blur(20px) saturate(1.9);
    backdrop-filter: blur(20px) saturate(1.9);
  }
}

.gestao-kanban-dnd-root .kanban-col-search {
  background: rgba(0, 0, 0, 0.20);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.gestao-kanban-dnd-root .kanban-count {
  background: rgba(107, 33, 168, 0.14);
  border: 1px solid rgba(140, 80, 220, 0.20);
  color: rgba(200, 180, 255, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gestao-kanban-dnd-root .kcard {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gestao-kanban-dnd-root .kcard {
    -webkit-backdrop-filter: blur(14px) saturate(1.8);
    backdrop-filter: blur(14px) saturate(1.8);
  }
}

.gestao-kanban-dnd-root .kcard:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(200, 90, 45, 0.65);
  box-shadow: var(--glass-inner-light), 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 90, 45, 0.22);
}

.gestao-kanban-dnd-root .kcard-client {
  color: #fff;
}

.gestao-kanban-dnd-root .kcard-id {
  color: rgba(180, 160, 255, 0.65);
}

.search-input-kanban-dark {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

.gestao-kanban-dnd-root .kcard-pdf-export {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(220, 210, 240, 0.85);
}

.gestao-kanban-dnd-root .kcard-pdf-export:hover {
  border-color: rgba(200, 66, 15, 0.55);
  color: #fff;
}

.gestao-kanban-dnd-root .kcard-orc-pdf-bar {
  background: rgba(0, 0, 0, 0.28);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.gestao-kanban-dnd-root .kanban-items.kanban-drop-target {
  outline: 2px dashed rgba(200, 90, 45, 0.80);
  outline-offset: -2px;
  background: rgba(168, 82, 43, 0.14);
}

/* ── Kanban genérico ── */
.kanban-col {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-bright);
  box-shadow: var(--glass-shadow-soft), var(--glass-inner-light);
}

.kcard {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border-bright);
  box-shadow: var(--glass-inner-light);
}

/* ══════════════════════════════════════════
   CABEÇALHOS - gradiente vivid
   ══════════════════════════════════════════ */
.page-hdr-title {
  letter-spacing: -0.5px;
  background: linear-gradient(120deg, #ffffff 0%, rgba(210, 180, 255, 0.95) 45%, rgba(255, 130, 55, 0.88) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-1);
}

@supports not ((-webkit-background-clip: text) and (background-clip: text)) {
  .page-hdr-title {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--text-1);
  }
}

/* Título topbar com gradiente leve */
.topbar-title {
  background: linear-gradient(135deg, #fff 0%, rgba(210, 185, 255, 0.90) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

@supports not ((-webkit-background-clip: text) and (background-clip: text)) {
  .topbar-title {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--text-1);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
  }
}

/* ── Loading overlay ── */
#app-loading {
  background: rgba(9, 6, 28, 0.85) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* ── Link do cliente ── */
.client-link-card {
  background: var(--glass-bg-elevated);
  border: 1px solid var(--glass-border-bright);
  box-shadow: var(--glass-shadow), var(--glass-inner-light);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .client-link-card {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(2.0);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(2.0);
  }
}

.cl-topbar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.cl-item:hover {
  background: rgba(140, 80, 220, 0.09);
  border-color: rgba(140, 80, 220, 0.20);
}

/* ── Fallback sem backdrop-filter ── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #sidebar  { background: var(--bg-surface); }
  #topbar   { background: var(--bg-surface); }

  .panel, .metric-card, .form-card,
  .orc-item, .ped-item, .modal,
  .gestao-kanban-dnd-root .kanban-col,
  .gestao-kanban-dnd-root .kcard {
    background: var(--bg-card);
  }

  .metric-value {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--text-1);
  }

  .topbar-title {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--text-1);
  }
}

/* ══════════════════════════════════════════
   GLASS REALISTA - Refração e profundidade
   Simula a refração de luz passando pelo vidro:
   hotspot no canto superior, borda de topo mais
   brilhante (aresta do vidro), sombra interna
   inferior e camadas de profundidade.
   ══════════════════════════════════════════ */

/* Painéis e metric cards - vidro com refração */
.panel,
.metric-card,
.form-card,
.preview-panel {
  background:
    radial-gradient(ellipse 75% 50% at 22% 18%, rgba(255, 255, 255, 0.09) 0%, transparent 60%),
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.06) 36%,
      rgba(255, 255, 255, 0.02) 68%,
      rgba(0, 0, 0, 0.04) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.44),
    0 2px 80px rgba(80, 10, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel,
  .metric-card,
  .form-card,
  .preview-panel {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(2.2) brightness(1.04);
    backdrop-filter: blur(var(--glass-blur)) saturate(2.2) brightness(1.04);
  }
}

/* Metric card hover - mais luz, levanta */
.metric-card:hover {
  background:
    radial-gradient(ellipse 80% 55% at 25% 14%, rgba(255, 255, 255, 0.14) 0%, transparent 58%),
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.09) 38%,
      rgba(255, 255, 255, 0.03) 68%,
      rgba(0, 0, 0, 0.02) 100%
    );
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.50),
    0 2px 80px rgba(80, 10, 140, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    0 0 24px rgba(107, 33, 168, 0.08);
  transform: translateY(-2px);
}

/* Lista orc/pedido - glass mais leve */
.orc-item,
.ped-item {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.04) 52%,
      rgba(0, 0, 0, 0.03) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 3px 18px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09);
}

.orc-item:hover,
.ped-item:hover {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.06) 52%,
      rgba(0, 0, 0, 0.02) 100%
    );
  border-color: rgba(140, 80, 220, 0.18);
  border-top-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 5px 26px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.11),
    0 0 16px rgba(80, 10, 140, 0.06);
}

/* Colunas kanban - gradiente vertical simulando vidro alto */
.gestao-kanban-dnd-root .kanban-col {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(0, 0, 0, 0.08) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

/* Kanban cards (gestão) - glass com aresta luminosa */
.gestao-kanban-dnd-root .kcard {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.05) 48%,
      rgba(0, 0, 0, 0.04) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.11);
}

.gestao-kanban-dnd-root .kcard:hover {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.07) 48%,
      rgba(0, 0, 0, 0.02) 100%
    );
  border-color: rgba(200, 90, 45, 0.55);
  border-top-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 90, 45, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

/* Generic kcard (fora do gestão kanban) */
.kcard {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(0, 0, 0, 0.03) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-top-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09);
}