/* Nirox3D Calc - premium visual layer */
:root {
  --nirox-bg: #080b10;
  --nirox-bg-deep: #030407;
  --nirox-surface: #11161e;
  --nirox-surface-soft: #171e28;
  --nirox-surface-strong: #1c2531;
  --nirox-border: #2d3a49;
  --nirox-text: #f8fafc;
  --nirox-muted: #9aaaba;
  --nirox-primary: #2589cf;
  --nirox-primary-glow: #63c7ff;
  --nirox-action: #16c784;
  --nirox-action-strong: #0ea96b;
  --nirox-warning: #fbbf24;
  --nirox-warning-strong: #f59e0b;
  --nirox-danger: #ef4444;
  --nirox-danger-strong: #dc2626;

  --primary: var(--nirox-primary);
  --dark: var(--nirox-bg);
  --panel: var(--nirox-surface);
  --panel-soft: var(--nirox-surface-soft);
  --text: var(--nirox-text);
  --muted: var(--nirox-muted);
  --border: var(--nirox-border);
  --success: var(--nirox-action);
  --warning: var(--nirox-warning);
  --danger: var(--nirox-danger);

  --premium-bg: var(--nirox-bg);
  --premium-panel: rgba(16, 21, 29, .92);
  --premium-panel-strong: rgba(22, 29, 40, .97);
  --premium-border: rgba(113, 151, 184, .25);
  --premium-border-strong: rgba(79, 165, 224, .48);
  --premium-cyan: var(--nirox-primary-glow);
  --premium-blue: var(--nirox-primary);
  --premium-green: var(--nirox-action);
  --premium-amber: var(--nirox-warning);
  --premium-shadow: 0 22px 70px rgba(0, 0, 0, .36);
  --premium-soft-shadow: 0 14px 38px rgba(0, 0, 0, .24);
}

body {
  background:
    radial-gradient(circle at 16% -8%, rgba(56, 189, 248, .10), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(34, 201, 143, .07), transparent 26%),
    linear-gradient(145deg, #030407 0%, #090d13 48%, #05070a 100%);
}

.app {
  background:
    linear-gradient(135deg, rgba(9, 13, 19, .94), rgba(5, 8, 12, .99)),
    var(--premium-bg);
}

.sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 213, 255, .10), transparent 24%),
    linear-gradient(180deg, rgba(10, 14, 20, .99), rgba(5, 8, 12, .99));
  border-right: 1px solid rgba(125, 187, 255, .13);
  box-shadow: 18px 0 46px rgba(0, 0, 0, .34);
}

.sidebar::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px -1px 18px;
  background: linear-gradient(90deg, var(--premium-cyan), var(--premium-blue), transparent);
  opacity: .85;
}

.sidebar-brand {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(125, 187, 255, .14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(19, 26, 36, .96), rgba(9, 13, 19, .92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

.sidebar-brand .brand-logo,
.sidebar-brand .brand-mark {
  border-color: rgba(56, 213, 255, .48);
  box-shadow: 0 0 0 4px rgba(56, 213, 255, .08), 0 12px 24px rgba(0, 0, 0, .24);
}

.sidebar-menu-label {
  color: #8bcaff;
  letter-spacing: .12em;
}

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu),
.sidebar :where(.nav-button, .internal-sellers-menu) {
  border: 1px solid transparent;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu):hover,
.sidebar :where(.nav-button, .internal-sellers-menu):hover {
  transform: translateX(3px);
  border-color: rgba(56, 213, 255, .24);
  background: linear-gradient(135deg, rgba(35, 54, 78, .66), rgba(15, 20, 28, .76));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.sidebar.sidebar-polish-ready .nav-button.active,
.sidebar .nav-button.active {
  border-color: rgba(56, 213, 255, .48);
  background: linear-gradient(135deg, rgba(37, 137, 207, .26), rgba(17, 80, 94, .13));
  box-shadow: inset 3px 0 0 var(--premium-cyan), 0 12px 28px rgba(0, 0, 0, .24);
}

.app-header,
#dashboardPanel .dashboard-head {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(125, 187, 255, .22);
  background:
    linear-gradient(135deg, rgba(18, 29, 43, .94), rgba(13, 31, 37, .88)),
    rgba(10, 14, 20, .97);
  box-shadow: var(--premium-soft-shadow);
}

.app-header::after,
#dashboardPanel .dashboard-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(56, 213, 255, .1), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(34, 201, 143, .16), transparent 22%);
}

.app-header > *,
#dashboardPanel .dashboard-head > * {
  position: relative;
  z-index: 1;
}

.header-actions button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-whatsapp {
  border-radius: 13px;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

.header-actions button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-whatsapp:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.btn-primary,
#orcamentoPanel .actions-grid .full.btn-primary {
  border: 1px solid rgba(125, 187, 255, .18);
  background: linear-gradient(135deg, #35a9f6, #1f7ed7);
  box-shadow: 0 14px 28px rgba(35, 139, 226, .26);
}

.btn-success,
.btn-whatsapp,
#orcamentoPanel .actions-grid #btnZap {
  border: 1px solid rgba(76, 255, 179, .2);
  background: linear-gradient(135deg, #20d990, #13ad67);
  box-shadow: 0 14px 28px rgba(13, 173, 103, .22);
}

.btn-secondary,
#appContent .header-actions .btn-secondary {
  background: linear-gradient(135deg, rgba(30, 38, 50, .98), rgba(17, 23, 31, .98));
  border-color: rgba(125, 187, 255, .20);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
}

.btn-danger,
#appContent .header-actions .btn-danger {
  background: linear-gradient(135deg, #ff5c63, #e6323f);
  box-shadow: 0 14px 28px rgba(230, 50, 63, .22);
}

.card,
.modal-card,
.quote-client-list-panel,
.quote-client-form-panel,
.online-quote-card,
.item-card,
.stage-card,
.dash-card {
  border: 1px solid var(--premium-border);
  background:
    linear-gradient(145deg, rgba(20, 27, 37, .94), rgba(10, 14, 20, .98)),
    var(--premium-panel);
  box-shadow: var(--premium-soft-shadow);
}

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(87, 207, 255, .55), transparent);
  opacity: .8;
}

.card-title {
  background:
    linear-gradient(90deg, rgba(43, 136, 216, .14), rgba(34, 201, 143, .07)),
    rgba(8, 12, 18, .64);
}

.card-title i,
.sidebar :where(.nav-button, .internal-sellers-menu) i {
  background: linear-gradient(135deg, rgba(56, 213, 255, .28), rgba(43, 136, 216, .2));
  color: #9de7ff;
  box-shadow: inset 0 0 0 1px rgba(125, 187, 255, .16);
}

:where(input, select, textarea) {
  border-color: rgba(125, 187, 255, .22);
  background:
    linear-gradient(180deg, rgba(28, 36, 48, .94), rgba(18, 24, 33, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

:where(input, select, textarea):focus {
  border-color: var(--premium-cyan);
  box-shadow: 0 0 0 3px rgba(56, 213, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .04);
}

#orcamentoPanel.card {
  background:
    radial-gradient(circle at 6% 18%, rgba(56, 213, 255, .08), transparent 24%),
    linear-gradient(145deg, rgba(17, 24, 34, .97), rgba(8, 12, 18, .98));
}

#orcamentoPanel .quote-section {
  border-color: rgba(125, 187, 255, .2);
  background:
    linear-gradient(145deg, rgba(18, 25, 35, .90), rgba(10, 15, 22, .94));
}

#orcamentoPanel .quote-section:focus-within {
  border-color: var(--premium-border-strong);
  box-shadow: 0 0 0 1px rgba(56, 213, 255, .12), 0 18px 40px rgba(0, 0, 0, .22);
}

#orcamentoPanel .product-catalog-shortcut {
  min-height: 44px;
  color: #dff6ff;
  border-color: rgba(56, 213, 255, .32);
}

#orcamentoPanel .quote-summary {
  border-color: rgba(125, 187, 255, .28);
  background:
    linear-gradient(180deg, rgba(18, 34, 57, .96), rgba(10, 22, 39, .98));
  box-shadow: var(--premium-shadow);
}

#orcamentoPanel .result {
  border-color: rgba(83, 190, 255, .56);
  background:
    radial-gradient(circle at 78% 18%, rgba(79, 210, 255, .22), transparent 26%),
    linear-gradient(145deg, #2166aa, #174f88 55%, #123e6d);
  box-shadow: 0 20px 48px rgba(24, 103, 178, .28);
}

#orcamentoPanel .result > strong {
  color: #c8f2ff;
  text-shadow: 0 8px 22px rgba(39, 174, 255, .28);
}

#orcamentoPanel .result-meta span,
#orcamentoPanel .quote-ficha div,
#orcamentoPanel .cost-details summary,
#orcamentoPanel .advanced-sale summary {
  border-color: rgba(125, 187, 255, .22);
  background: rgba(14, 28, 49, .72);
}

#orcamentoPanel .actions-grid {
  gap: 12px;
}

.mobile-quote-bar {
  border-color: rgba(125, 187, 255, .32);
  background:
    linear-gradient(135deg, rgba(17, 34, 58, .96), rgba(10, 24, 43, .98));
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .34);
}

@media (max-width: 900px) {
  .app-header,
  #dashboardPanel .dashboard-head,
  .card,
  .modal-card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
  }

  .sidebar-brand {
    padding: 10px;
  }
}

@media (max-width: 680px) {
  .header-actions button,
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-danger {
    border-radius: 12px;
  }

  .card-title {
    background: rgba(13, 29, 51, .84);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Premium visual layer 2: catalog, modals, dashboard and mobile polish */
.auth-box,
.paywall-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(125, 187, 255, .22);
  background:
    radial-gradient(circle at 16% 0%, rgba(56, 213, 255, .18), transparent 28%),
    linear-gradient(145deg, rgba(19, 35, 59, .96), rgba(9, 20, 36, .98));
  box-shadow: var(--premium-shadow);
}

.auth-box::before,
.paywall-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-cyan), var(--premium-green), transparent);
}

.auth-brand .brand-lockup,
.auth-brand .brand-mark {
  filter: drop-shadow(0 12px 26px rgba(56, 213, 255, .16));
}

.dashboard-panel {
  border: 1px solid rgba(125, 187, 255, .2);
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 213, 255, .1), transparent 30%),
    linear-gradient(145deg, rgba(15, 29, 50, .78), rgba(8, 18, 33, .9));
  box-shadow: var(--premium-soft-shadow);
}

.dashboard {
  gap: 16px;
}

.dash-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dash-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 18%, rgba(56, 213, 255, .16), transparent 28%);
  opacity: .7;
}

.dash-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 213, 255, .38);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
}

.dash-card small,
.dash-card span {
  position: relative;
  z-index: 1;
}

.dash-card strong {
  position: relative;
  z-index: 1;
  color: #75d9ff;
  text-shadow: 0 8px 22px rgba(56, 213, 255, .18);
}

.suggestion-footer {
  border-top: 1px solid rgba(125, 187, 255, .14);
  background:
    linear-gradient(180deg, rgba(6, 14, 26, .1), rgba(6, 14, 26, .7)),
    transparent;
}

.suggestion-inner {
  border: 1px solid rgba(125, 187, 255, .2);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(18, 32, 54, .88), rgba(9, 20, 36, .94));
  box-shadow: var(--premium-soft-shadow);
}

.suggestion-form textarea {
  min-height: 78px;
  resize: vertical;
}

/* Painel operacional: o cabeçalho usa a linguagem visual premium sem herdar
   o espaçamento do cabeçalho principal da aplicação. */
#dashboardPanel .dashboard-head {
  display: block;
  min-height: 0;
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: 13px;
  border-color: rgba(125, 187, 255, .2);
}

#dashboardPanel .dashboard-head h2 {
  margin: 0;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.15;
}

#dashboardPanel .dashboard-head p {
  margin: 6px 0 0;
  line-height: 1.45;
}

/* A caixa de sugestoes e um bloco independente, com texto e formulario
   alinhados. Isso evita a aparencia de campos encostados na borda. */
#dashboardPanel .suggestion-footer .suggestion-inner {
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
  border-radius: 13px;
}

#dashboardPanel .suggestion-footer .suggestion-copy {
  align-self: center;
}

#dashboardPanel .suggestion-footer .suggestion-copy strong {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

#dashboardPanel .suggestion-footer .suggestion-copy p {
  margin: 5px 0 0;
}

#dashboardPanel .suggestion-footer .suggestion-form {
  align-items: stretch;
}

#dashboardPanel .suggestion-footer .suggestion-form textarea {
  min-height: 78px;
  padding: 14px;
}

#dashboardPanel .suggestion-footer .suggestion-form button {
  min-width: 170px;
}

@media (max-width: 700px) {
  #dashboardPanel .dashboard-head {
    padding: 15px;
    border-radius: 12px;
  }

  #dashboardPanel .suggestion-footer .suggestion-inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }
}

.modal {
  backdrop-filter: blur(8px);
}

.modal-card {
  overflow: hidden;
  border-radius: 22px;
}

.modal-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-cyan), var(--premium-blue), var(--premium-green));
}

.modal-head,
.modal-header {
  background:
    linear-gradient(90deg, rgba(56, 213, 255, .08), transparent 52%),
    rgba(13, 27, 48, .72);
  align-items: center;
  min-height: 52px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal-head h2,
.modal-head h3 {
  letter-spacing: -.02em;
}

.modal-head-actions {
  align-items: center;
}

.modal-head > [data-close-modal].btn-icon,
.modal-header > [data-close-modal].btn-icon,
.modal-head-actions > [data-close-modal].btn-icon {
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
}

.modal-head > [data-close-modal].btn-icon,
.modal-header > [data-close-modal].btn-icon,
.modal-head-actions > [data-close-modal].btn-icon {
  transform: translateY(0);
}

.modal-head h2 i,
.modal-head h3 i {
  background: linear-gradient(135deg, rgba(56, 213, 255, .3), rgba(43, 136, 216, .2));
  color: #9de7ff;
}

.catalog-modal-card {
  border-color: rgba(56, 213, 255, .32);
}

.catalog-edit-hint {
  border-color: rgba(255, 200, 87, .36);
  background:
    linear-gradient(135deg, rgba(255, 200, 87, .13), rgba(255, 200, 87, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.catalog-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(20, 32, 52, .96), rgba(20, 32, 52, .78));
  backdrop-filter: blur(10px);
}

#modalCatalogo .catalog-product-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(125, 187, 255, .2);
  background:
    linear-gradient(145deg, rgba(34, 50, 78, .94), rgba(18, 31, 52, .96));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#modalCatalogo .catalog-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 213, 255, .45);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .32);
}

.catalog-card-media {
  position: relative;
  background:
    radial-gradient(circle at 50% 16%, rgba(56, 213, 255, .12), transparent 34%),
    linear-gradient(145deg, rgba(33, 55, 85, .9), rgba(13, 26, 46, .96));
}

.catalog-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6, 14, 26, .55));
}

.catalog-card-media img {
  transition: transform .22s ease, filter .22s ease;
}

#modalCatalogo .catalog-product-card:hover .catalog-card-media img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.catalog-card-price {
  color: #74f0c1;
  border: 1px solid rgba(116, 240, 193, .28);
  background: rgba(22, 163, 127, .14);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.catalog-card-actions {
  border-top-color: rgba(125, 187, 255, .14);
}

.catalog-editor-photo-preview,
.catalog-editor-photo-placeholder {
  border-color: rgba(56, 213, 255, .28);
  background:
    radial-gradient(circle at 50% 15%, rgba(56, 213, 255, .12), transparent 38%),
    rgba(9, 20, 36, .78);
}

.pill,
.badge,
.quote-badge {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.pill {
  border-color: rgba(125, 187, 255, .18);
}

.table-scroll {
  border: 1px solid rgba(125, 187, 255, .16);
  border-radius: 16px;
  background: rgba(8, 18, 33, .42);
}

table {
  overflow: hidden;
}

th {
  background: rgba(14, 31, 54, .86);
}

tbody tr {
  transition: background .14s ease;
}

tbody tr:hover {
  background: rgba(56, 213, 255, .06);
}

.table-loading,
.empty,
.stage-empty {
  border: 1px dashed rgba(125, 187, 255, .28);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(43, 136, 216, .08), rgba(34, 201, 143, .05));
  color: #b9d6f5;
}

.online-quote-card,
.item-card,
.stage-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.online-quote-card:hover,
.item-card:hover,
.stage-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 213, 255, .34);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.stage-thumb,
.online-quote-photo {
  border: 1px solid rgba(125, 187, 255, .22);
  background: rgba(8, 18, 33, .7);
}

.toast {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px)) !important;
  min-height: 50px;
  transform: translate(-50%, -50%);
  z-index: 12080;
  border: 1px solid rgba(125, 187, 255, .28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(18, 34, 57, .96), rgba(10, 22, 39, .98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  backdrop-filter: blur(10px);
  padding: 14px 18px;
  text-align: center;
  font-weight: 850;
  line-height: 1.35;
  animation: niroxToastCenter .18s ease-out;
}

.toast.error {
  border-color: rgba(255, 92, 99, .62);
  background:
    linear-gradient(145deg, rgba(69, 22, 31, .96), rgba(29, 16, 28, .98));
}

@keyframes niroxToastCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.mobile-nav {
  border-color: rgba(125, 187, 255, .24);
  background:
    linear-gradient(180deg, rgba(16, 31, 52, .96), rgba(8, 17, 31, .98));
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .36);
}

.mobile-nav-button {
  border: 1px solid transparent;
  border-radius: 16px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.mobile-nav-button.active,
.mobile-nav-button:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 213, 255, .28);
  background: linear-gradient(135deg, rgba(43, 136, 216, .25), rgba(34, 201, 143, .1));
}

.mobile-nav-button.active i {
  color: #a9efff;
}

@media (min-width: 1080px) {
  #modalCatalogo .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .catalog-toolbar {
    position: static;
    padding-top: 0;
  }

  .suggestion-inner {
    border-radius: 18px;
  }

  .modal-card {
    border-radius: 18px;
  }
}

/* Sidebar premium refinement */
.sidebar {
  --sidebar-item-height: 42px;
  --sidebar-icon-size: 28px;
}

.sidebar-brand {
  gap: 10px;
  margin-bottom: 14px;
}

.sidebar-brand strong {
  letter-spacing: -.03em;
}

.sidebar-subtitle {
  line-height: 1.2;
}

.sidebar-nav,
.sidebar-polish-ready .sidebar-nav {
  gap: 12px;
}

.sidebar-menu-group {
  gap: 6px;
}

.sidebar-menu-label {
  margin: 0;
  padding: 0 8px;
  font-size: 10px;
  line-height: 1;
}

.sidebar-menu-label::after {
  opacity: .42;
}

.sidebar-menu-items {
  gap: 4px;
}

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu),
.sidebar :where(.nav-button, .internal-sellers-menu) {
  position: relative;
  min-height: var(--sidebar-item-height);
  padding: 8px 10px;
  gap: 10px;
  border-radius: 13px;
  line-height: 1.15;
  isolation: isolate;
}

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu)::before,
.sidebar :where(.nav-button, .internal-sellers-menu)::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--premium-cyan), var(--premium-green));
  opacity: 0;
  transform: scaleY(.55);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu):hover::before,
.sidebar :where(.nav-button, .internal-sellers-menu):hover::before {
  opacity: .38;
  transform: scaleY(.82);
}

.sidebar.sidebar-polish-ready .nav-button.active::before,
.sidebar .nav-button.active::before {
  opacity: 1;
  transform: scaleY(1);
  box-shadow: 0 0 18px rgba(56, 213, 255, .62);
}

.sidebar.sidebar-polish-ready :where(
  .nav-button i,
  .internal-sellers-icon,
  .owner-dashboard-icon,
  .storefront-share-menu-icon,
  .catalog-image-menu-icon
),
.sidebar :where(.nav-button i, .internal-sellers-icon) {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  min-width: var(--sidebar-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 13px;
}

.sidebar.sidebar-polish-ready .nav-button.active,
.sidebar .nav-button.active {
  color: #f5fbff;
  background:
    radial-gradient(circle at 18% 50%, rgba(56, 213, 255, .2), transparent 34%),
    linear-gradient(135deg, rgba(43, 136, 216, .34), rgba(22, 163, 127, .14));
}

.sidebar.sidebar-polish-ready .nav-button.active i,
.sidebar .nav-button.active i {
  color: #d9f8ff;
  background: linear-gradient(135deg, rgba(56, 213, 255, .38), rgba(43, 136, 216, .26));
  box-shadow:
    inset 0 0 0 1px rgba(181, 235, 255, .14),
    0 0 18px rgba(56, 213, 255, .18);
}

.sidebar.sidebar-polish-ready .sidebar-polish-subitem {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
  opacity: .92;
}

.sidebar.sidebar-polish-ready .plan-card {
  margin-top: 8px;
  padding: 12px;
  border-radius: 15px;
}

.sidebar-support-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(103, 212, 255, .22);
  border-radius: 10px;
  color: #b9e6ff;
  background: rgba(43, 136, 216, .10);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.sidebar-support-link:hover {
  border-color: rgba(103, 212, 255, .52);
  background: rgba(43, 136, 216, .20);
  transform: translateY(-1px);
}

.support-header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 12px;
  color: #e7f6ff;
  text-decoration: none;
}

.notification-trigger {
  position: relative;
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid var(--bg-base, #080b10);
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.notification-trigger.has-new-notifications {
  border-color: rgba(250, 204, 21, 0.72);
  color: #fde68a;
}

.approval-notifications-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.approval-notifications-list {
  display: grid;
  gap: 9px;
  max-height: min(48vh, 420px);
  overflow: auto;
}

.approval-notification-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  background: rgba(10, 23, 41, 0.72);
}

.approval-notification-item.unread {
  border-color: rgba(45, 212, 191, 0.55);
  background: linear-gradient(100deg, rgba(20, 184, 166, 0.13), rgba(10, 23, 41, 0.82));
}

.approval-notification-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.16);
  color: #5eead4;
}

.approval-notification-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.approval-notification-copy strong,
.approval-notification-copy span,
.approval-notification-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-notification-copy span {
  color: #bfdbfe;
  font-size: 13px;
}

.approval-notification-copy small {
  color: #8da4c3;
  font-size: 11px;
}

@media (max-width: 680px) {
  .approval-notifications-actions .btn-sm {
    flex: 1 1 100%;
  }
}

@media (max-height: 780px) and (min-width: 941px) {
  .sidebar {
    --sidebar-item-height: 38px;
    --sidebar-icon-size: 26px;
  }

  .sidebar-brand {
    padding: 11px;
    margin-bottom: 10px;
  }

  .sidebar-nav,
  .sidebar-polish-ready .sidebar-nav {
    gap: 9px;
  }

  .sidebar-menu-items {
    gap: 3px;
  }
}

@media (max-width: 940px) {
  .mobile-nav {
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    gap: 7px;
    border-radius: 22px 22px 0 0;
  }

  .mobile-nav-button {
    min-height: 58px;
    padding: 7px 5px;
    gap: 4px;
    background: rgba(14, 29, 50, .42);
  }

  .mobile-nav-button i {
    width: 27px;
    height: 27px;
    min-width: 27px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(56, 213, 255, .1);
  }

  .mobile-nav-button span {
    font-size: 11px;
    line-height: 1.05;
    letter-spacing: -.01em;
  }

  .mobile-nav-button.active {
    box-shadow: inset 0 0 0 1px rgba(56, 213, 255, .18), 0 10px 22px rgba(0, 0, 0, .22);
  }

  .support-header-link { flex: 1; }
}

@media (max-width: 420px) {
  .mobile-nav {
    padding-left: 8px;
    padding-right: 8px;
    gap: 5px;
  }

  .mobile-nav-button {
    min-height: 54px;
    padding-inline: 3px;
    border-radius: 14px;
  }

  .mobile-nav-button i {
    width: 25px;
    height: 25px;
    min-width: 25px;
  }

  .mobile-nav-button span {
    font-size: 10.5px;
  }
}

/* Official Nirox3D Calc palette normalization */
body {
  color: var(--nirox-text);
}

a,
.auth-legal-links a,
.footer-legal-links a,
.legal-consent a {
  color: #b9e6ff;
}

::-webkit-scrollbar-thumb {
  background: rgba(44, 74, 109, .95);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nirox-primary);
}

.text-warning,
.paywall-title {
  color: var(--nirox-warning) !important;
}

.text-success,
.plan-price,
.stock-value,
.summary-row.accent strong,
.catalog-card-price {
  color: #79f2c7 !important;
}

.btn-primary,
.plan-choice-card b,
.catalog-card-actions .btn-primary,
#orcamentoPanel .actions-grid .full.btn-primary {
  background: linear-gradient(135deg, var(--nirox-primary-glow), var(--nirox-primary)) !important;
  border-color: rgba(103, 212, 255, .28) !important;
  color: #f8fbff !important;
}

.btn-success,
.btn-whatsapp,
.quote-accept-box .btn-success,
#orcamentoPanel .actions-grid #btnZap {
  background: linear-gradient(135deg, #20d990, var(--nirox-action)) !important;
  border-color: rgba(22, 199, 132, .34) !important;
  color: #f7fffb !important;
}

.btn-warning,
.catalog-edit-action,
.catalog-save-editing {
  background: linear-gradient(135deg, var(--nirox-warning), var(--nirox-warning-strong)) !important;
  border-color: rgba(251, 191, 36, .46) !important;
  color: #111827 !important;
}

.btn-danger,
#appContent .header-actions .btn-danger,
.catalog-card-delete {
  background: linear-gradient(135deg, #ff6269, var(--nirox-danger)) !important;
  border-color: rgba(239, 68, 68, .42) !important;
  color: #fff7f7 !important;
}

.btn-secondary {
  background:
    linear-gradient(135deg, rgba(23, 41, 68, .96), rgba(17, 31, 52, .96)) !important;
  border-color: rgba(103, 212, 255, .2) !important;
}

.brand-mark,
.sidebar-brand .brand-logo,
.header-brand img {
  border-color: rgba(103, 212, 255, .28);
}

.auth-warning,
.trial,
.annual-plan-alert,
.margin-alert,
.catalog-edit-hint,
.obs {
  border-color: rgba(251, 191, 36, .42) !important;
  background: rgba(251, 191, 36, .1) !important;
  color: #fde68a !important;
}

.annual-plan-alert strong,
.catalog-edit-hint i,
.obs i {
  color: var(--nirox-warning) !important;
}

.badge-imprimindo,
.quote-badge.production {
  background: rgba(47, 142, 232, .16) !important;
  border-color: rgba(47, 142, 232, .42) !important;
  color: #b9e6ff !important;
}

.badge-finalizado,
.quote-badge.approved,
.quote-client-privacy-tag.success {
  background: rgba(22, 199, 132, .16) !important;
  border-color: rgba(22, 199, 132, .42) !important;
  color: #a7f3d0 !important;
}

.badge-alerta,
.quote-client-privacy-tag.warning {
  background: rgba(251, 191, 36, .16) !important;
  border-color: rgba(251, 191, 36, .46) !important;
  color: #fde68a !important;
}

.badge-bloqueado,
.toast.error {
  background: rgba(239, 68, 68, .14) !important;
  border-color: rgba(239, 68, 68, .5) !important;
  color: #fecaca !important;
}

.badge-pendente,
.quote-badge.saved {
  background: rgba(155, 179, 207, .12) !important;
  border-color: rgba(155, 179, 207, .24) !important;
  color: var(--nirox-muted) !important;
}

.pill,
.catalog-category-pill {
  background: rgba(47, 142, 232, .12) !important;
  border-color: rgba(47, 142, 232, .22) !important;
  color: #c7eaff !important;
}

.pill i,
.catalog-category-pill i,
.catalog-link-preview i {
  color: var(--nirox-primary-glow) !important;
  background: rgba(47, 142, 232, .14) !important;
}

:where(input, select, textarea):focus,
#orcamentoPanel :where(input, select, textarea):focus {
  border-color: var(--nirox-primary-glow) !important;
  box-shadow: 0 0 0 3px rgba(103, 212, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--nirox-action);
}

.result > strong,
#orcamentoPanel .result > strong,
.dash-card strong {
  color: #b9e6ff !important;
}

.production-card.printing,
.stage-card.printing {
  border-top-color: var(--nirox-primary) !important;
}

.production-card.done,
.stage-card.done {
  border-top-color: var(--nirox-action) !important;
}

.production-card.pending,
.stage-card.pending {
  border-top-color: var(--nirox-muted) !important;
}

/* Premium quote summary */
#orcamentoPanel .quote-summary {
  position: sticky;
  top: 18px;
  isolation: isolate;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(103, 212, 255, .28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 0%, rgba(103, 212, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(17, 31, 52, .97), rgba(7, 17, 31, .98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04);
}

#orcamentoPanel .quote-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, var(--nirox-primary-glow), var(--nirox-primary), var(--nirox-action));
  opacity: .86;
  pointer-events: none;
}

#orcamentoPanel .result {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 18px;
  border: 1px solid rgba(103, 212, 255, .44);
  border-radius: 20px;
  background:
    radial-gradient(circle at 78% 0%, rgba(103, 212, 255, .24), transparent 32%),
    radial-gradient(circle at 0% 82%, rgba(22, 199, 132, .13), transparent 28%),
    linear-gradient(145deg, rgba(28, 100, 170, .92), rgba(17, 72, 125, .94) 54%, rgba(12, 50, 91, .98));
  box-shadow: 0 24px 54px rgba(11, 73, 128, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}

#orcamentoPanel .result::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(225, 246, 255, .24);
  border-radius: 999px;
  background: rgba(7, 17, 31, .28);
  color: #dff6ff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

#orcamentoPanel .result > span {
  display: block;
  color: #ccecff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#orcamentoPanel .result > strong {
  margin-top: 7px;
  color: #eefbff !important;
  font-size: clamp(42px, 4.8vw, 56px);
  letter-spacing: -.06em;
  line-height: .95;
  text-shadow: 0 16px 34px rgba(103, 212, 255, .28);
}

#orcamentoPanel .result-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

#orcamentoPanel .result-meta span {
  min-height: 70px;
  align-content: center;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(225, 246, 255, .14);
  border-radius: 15px;
  background: rgba(7, 17, 31, .36);
  color: #b9d7ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

#orcamentoPanel .result-meta span:nth-child(1),
#orcamentoPanel .result-meta span:nth-child(3) {
  border-color: rgba(22, 199, 132, .24);
  background:
    linear-gradient(145deg, rgba(22, 199, 132, .14), rgba(7, 17, 31, .32));
}

#orcamentoPanel .result-meta span:nth-child(3) {
  order: 2;
}

#orcamentoPanel .result-meta span:nth-child(2) {
  order: 3;
  grid-column: 1 / -1;
  min-height: 54px;
  border-color: rgba(155, 179, 207, .16);
  background: rgba(7, 17, 31, .24);
}

#orcamentoPanel .result-meta strong {
  color: #f8fbff;
  font-size: 17px;
  letter-spacing: -.02em;
}

#orcamentoPanel .result-meta span:nth-child(1) strong,
#orcamentoPanel .result-meta span:nth-child(3) strong {
  color: #a7f3d0 !important;
}

#orcamentoPanel .quote-ficha {
  gap: 9px;
}

#orcamentoPanel .quote-ficha div {
  border-radius: 15px;
  background: rgba(17, 41, 68, .58);
}

#orcamentoPanel .cost-details summary {
  min-height: 46px;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(17, 41, 68, .72), rgba(11, 25, 44, .82));
}

#orcamentoPanel .actions-grid {
  gap: 13px;
  padding-top: 4px;
}

#orcamentoPanel .actions-grid button {
  min-height: 50px;
  border-radius: 15px;
  font-size: 14px;
  letter-spacing: -.01em;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

#orcamentoPanel .actions-grid .full {
  min-height: 56px;
  font-size: 15px;
}

#orcamentoPanel .actions-grid #btnEnviarProducao {
  box-shadow: 0 18px 38px rgba(47, 142, 232, .26);
}

#orcamentoPanel .actions-grid #btnSalvarOrcamento {
  border-color: rgba(103, 212, 255, .24) !important;
  background:
    linear-gradient(135deg, rgba(47, 142, 232, .2), rgba(17, 41, 68, .92)) !important;
}

#orcamentoPanel .actions-grid #btnZap {
  box-shadow: 0 18px 34px rgba(22, 199, 132, .22);
}

#orcamentoPanel .actions-grid .subtle-action,
#orcamentoPanel .actions-grid #btnPDF {
  background: rgba(17, 41, 68, .62) !important;
  border-color: rgba(103, 212, 255, .16) !important;
  color: #cfe8ff !important;
  box-shadow: none;
}

#orcamentoPanel .actions-grid .subtle-action:hover,
#orcamentoPanel .actions-grid #btnPDF:hover {
  border-color: rgba(103, 212, 255, .3) !important;
  background: rgba(23, 50, 82, .78) !important;
}

@media (max-width: 940px) {
  #orcamentoPanel .quote-summary {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  #orcamentoPanel .quote-summary {
    padding: 12px;
    border-radius: 20px;
  }

  #orcamentoPanel .result {
    padding: 20px 14px 14px;
  }

  #orcamentoPanel .result > strong {
    font-size: 38px;
  }

  #orcamentoPanel .result-meta {
    grid-template-columns: 1fr;
  }

  #orcamentoPanel .result-meta span:nth-child(2) {
    grid-column: auto;
  }

  #orcamentoPanel .actions-grid {
    grid-template-columns: 1fr;
  }
}

/* Catalog stability: compact cards, fixed controls and internal scrolling. */
#modalCatalogo {
  align-items: center;
  padding: 12px;
}

#modalCatalogo .catalog-modal-card {
  width: min(96vw, 1280px) !important;
  max-width: min(96vw, 1280px) !important;
  height: min(92vh, 860px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  padding: 16px 18px 14px;
  border-color: rgba(72, 207, 255, .46);
  background:
    radial-gradient(circle at 92% -8%, rgba(16, 185, 129, .16), transparent 30%),
    radial-gradient(circle at 2% 0%, rgba(56, 213, 255, .13), transparent 28%),
    linear-gradient(145deg, rgba(16, 31, 54, .99), rgba(8, 17, 32, .99));
  box-shadow: 0 26px 76px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}

#modalCatalogo .modal-head,
#modalCatalogo .catalog-edit-hint,
#modalCatalogo .catalog-toolbar,
#modalCatalogo .pagination {
  flex: 0 0 auto;
}

#modalCatalogo .modal-head {
  margin-bottom: 12px;
}

#modalCatalogo .catalog-edit-hint {
  margin-bottom: 10px;
}

#modalCatalogo .catalog-toolbar {
  position: static;
  z-index: auto;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

#modalCatalogo #listaCatalogo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: minmax(208px, auto);
  align-items: stretch;
  align-content: start;
  gap: 10px;
  padding: 2px 14px 8px 0;
  scrollbar-gutter: stable;
}

@media (min-width: 1180px) {
  #modalCatalogo #listaCatalogo {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

#modalCatalogo .pagination {
  margin-top: 8px;
  padding-top: 8px;
}

#modalCatalogo .catalog-product-card {
  display: grid !important;
  grid-template-rows: 78px minmax(88px, 1fr) auto;
  min-height: 208px !important;
  height: 100%;
  border-radius: 14px;
  border-color: rgba(90, 176, 255, .34);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

#modalCatalogo .catalog-card-media {
  height: 78px !important;
  min-height: 78px;
  flex: 0 0 auto;
}

#modalCatalogo .catalog-card-body {
  min-height: 88px;
  gap: 4px;
  padding: 8px 9px 6px;
  overflow: hidden;
}

#modalCatalogo .catalog-card-head strong {
  font-size: 11.5px;
}

#modalCatalogo .catalog-card-head small {
  font-size: 10px;
}

#modalCatalogo .catalog-card-price {
  max-width: 70px;
  padding: 3px 5px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modalCatalogo .catalog-card-tags .pill {
  max-width: 100%;
  padding: 3px 5px;
  overflow: hidden;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modalCatalogo .catalog-card-description {
  min-height: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

#modalCatalogo .catalog-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  min-height: 36px;
  flex-wrap: nowrap;
}

#modalCatalogo .catalog-card-actions .btn-sm {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 5px;
  border-radius: 8px;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}

#modalCatalogo .catalog-card-actions .btn-sm i {
  margin-right: 2px;
  font-size: 9px;
}

#modalCatalogo .catalog-card-delete {
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  margin-left: 0;
  padding: 0;
  border-radius: 9px;
}

#modalCatalogo .catalog-card-delete i {
  font-size: 10px;
}

#modalCatalogo .catalog-card-actions .btn-primary {
  margin-right: 0;
}

#modalCatalogo .catalog-card-placeholder i {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  font-size: 11px;
}

#modalCatalogo .pagination {
  gap: 6px;
}

#modalCatalogo .pagination button {
  min-width: 32px;
  min-height: 31px;
  border-radius: 8px;
  font-size: 12px;
}

#modalCatalogo .pagination button i {
  font-size: 11px;
}

#modalEditarCatalogo {
  align-items: center;
  padding: 12px;
}

#modalEditarCatalogo .modal-card {
  width: min(96vw, 820px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  padding: 20px 24px 0;
}

#modalEditarCatalogo .modal-head {
  flex: 0 0 auto;
  margin-bottom: 0;
}

#modalEditarCatalogo .catalog-editor-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 0 14px;
}

#modalEditarCatalogo .catalog-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
  margin: 0 -24px;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(103, 212, 255, .18);
  background:
    linear-gradient(180deg, rgba(20, 32, 52, .84), rgba(17, 31, 52, .98));
  box-shadow: 0 -18px 34px rgba(0, 0, 0, .24);
}

#modalEditarCatalogo #btnSalvarEditorCatalogo {
  min-height: 46px;
  font-size: 15px;
}

@media (max-width: 640px) {
  .toast {
    top: 50% !important;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px) !important;
    padding: 12px 14px;
    font-size: 13px;
  }
}

@media (max-width: 1100px) {
  #modalCatalogo #listaCatalogo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #modalCatalogo #listaCatalogo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #modalCatalogo {
    align-items: stretch;
    padding: calc(58px + env(safe-area-inset-top, 0px)) 10px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  #modalCatalogo .catalog-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 82px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 82px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    border-radius: 18px;
    padding: 12px;
  }

  #modalCatalogo .modal-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  #modalCatalogo .modal-head h3 {
    width: 100%;
    min-width: 0;
    font-size: 20px;
    line-height: 1.1;
  }

  #modalCatalogo .modal-head-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) 40px;
    width: 100%;
    gap: 7px;
  }

  #modalCatalogo .modal-head-actions button {
    min-width: 0;
    justify-content: center;
  }

  #modalCatalogo #btnExportarCatalogo,
  #modalCatalogo #btnAbrirVitrine {
    min-height: 38px;
    padding: 8px 9px;
    border-radius: 12px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  #modalCatalogo .modal-head-actions .btn-icon {
    width: 40px;
    min-width: 40px;
    height: 38px;
    min-height: 38px;
    border-radius: 12px;
  }

  #modalCatalogo .catalog-edit-hint {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 11px;
    font-size: 11px;
    line-height: 1.35;
  }

  #modalCatalogo .catalog-toolbar {
    gap: 8px;
  }

  #modalCatalogo #listaCatalogo {
    grid-auto-rows: minmax(220px, auto);
    grid-template-columns: 1fr;
  }

  #modalEditarCatalogo {
    align-items: stretch;
    padding: 0;
  }

  #modalEditarCatalogo .modal-card {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    padding: 14px 14px 0;
  }

  #modalEditarCatalogo .catalog-editor-actions {
    margin: 0 -14px;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  }
}

/* Camada final de consistencia para a area principal.
   Mantem painel, metricas e sugestoes com a mesma escala visual. */
#appContent #dashboardPanel.dashboard-panel {
  display: block;
  min-height: 0;
  margin-top: 22px;
  margin-bottom: 20px;
  padding: 18px;
  border-radius: 16px;
}

#dashboardPanel .dashboard-head {
  box-shadow: none;
}

#dashboardPanel .dashboard {
  gap: 12px;
}

#dashboardPanel .dash-card {
  min-height: 104px;
  padding: 15px;
  border-radius: 14px;
}

#dashboardPanel .suggestion-footer {
  display: block !important;
  position: relative;
  z-index: 2;
  min-height: 0;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(125, 187, 255, .2);
  background: transparent;
}

#dashboardPanel .suggestion-footer .suggestion-inner {
  grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(125, 187, 255, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 38, 63, .94), rgba(10, 22, 39, .96));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
}

#dashboardPanel .suggestion-footer .suggestion-form {
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 12px;
}

#dashboardPanel .suggestion-footer .suggestion-form textarea,
#dashboardPanel .suggestion-footer .suggestion-form button {
  min-height: 78px;
}

#dashboardPanel .suggestion-footer .footer-legal-links {
  gap: 8px;
}

#dashboardPanel .suggestion-footer .suggestion-title-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(252, 211, 77, .24), rgba(245, 158, 11, .16));
  color: #fcd34d;
  box-shadow: inset 0 0 0 1px rgba(252, 211, 77, .22);
}

#dashboardPanel .suggestion-footer .suggestion-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

#dashboardPanel .suggestion-footer .suggestion-link i {
  font-size: 11px;
}

#dashboardPanel .suggestion-footer .suggestion-link-terms i { color: #7dd3fc; }
#dashboardPanel .suggestion-footer .suggestion-link-privacy i { color: #6ee7b7; }
#dashboardPanel .suggestion-footer .suggestion-link-cancel i { color: #fbbf24; }
#dashboardPanel .suggestion-footer .suggestion-link-support i { color: #c4b5fd; }

#dashboardPanel .suggestion-footer .footer-legal-links a:last-child {
  flex-basis: 100%;
  margin-top: 2px;
}

@media (max-width: 700px) {
  #appContent #dashboardPanel.dashboard-panel,
  #dashboardPanel .suggestion-footer {
    padding: 16px;
    border-radius: 14px;
  }

  #dashboardPanel .dash-card {
    min-height: 88px;
    padding: 13px;
    border-radius: 12px;
  }

  #dashboardPanel .suggestion-footer .suggestion-form textarea {
    min-height: 94px;
  }

  #dashboardPanel .suggestion-footer .suggestion-form {
    grid-template-columns: 1fr;
  }
}

/* Cadastro de clientes: em telas pequenas o formulario pode ultrapassar a
   altura disponivel. Este modal precisa rolar internamente, sem prender a
   navegacao principal que fica bloqueada enquanto um modal esta aberto. */
#modalClientesOrcamento .quote-client-modal {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  #modalClientesOrcamento {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  #modalClientesOrcamento .quote-client-modal {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 16px;
    border-radius: 18px;
    touch-action: pan-y;
  }

  #modalClientesOrcamento .modal-head {
    position: sticky;
    top: -16px;
    z-index: 4;
    margin: -16px -16px 14px;
    padding: 14px 16px;
    background: rgba(13, 27, 48, .98);
    backdrop-filter: blur(10px);
  }

  #modalClientesOrcamento .modal-head h3 {
    font-size: 20px;
  }

  #modalClientesOrcamento .quote-client-list {
    max-height: min(280px, 36dvh);
    padding-right: 2px;
  }
}

/* Checkout de assinatura: o Brick pertence ao Mercado Pago, mas recebe um
   contorno consistente com o restante da interface Nirox. */
#modalAssinaturaMercadoPago .subscription-checkout-modal {
  width: min(100%, 560px);
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Sistema de icones Nirox: as cores representam o tipo de acao e sao
   reutilizadas na navegacao, titulos, modais e botoes neutros. */
:where(.sidebar, .mobile-bottom-nav, .card-title, .modal-head, .modal-header, .btn-secondary, .dashboard-panel)
  :is(.fa-calculator, .fa-chart-line, .fa-chart-column, .fa-file-pdf, .fa-file-invoice-dollar, .fa-receipt, .fa-magnifying-glass, .fa-book-open, .fa-circle-info) {
  color: #75d9ff !important;
}

:where(.sidebar, .mobile-bottom-nav, .card-title, .modal-head, .modal-header, .btn-secondary, .dashboard-panel)
  :is(.fa-industry, .fa-print, .fa-cube, .fa-cubes, .fa-box, .fa-boxes-stacked, .fa-layer-group, .fa-book, .fa-store, .fa-warehouse) {
  color: #6ee7b7 !important;
}

:where(.sidebar, .mobile-bottom-nav, .card-title, .modal-head, .modal-header, .btn-secondary, .dashboard-panel)
  :is(.fa-plus, .fa-check, .fa-check-circle, .fa-paper-plane, .fa-floppy-disk, .fa-upload, .fa-download, .fa-arrow-up-from-bracket, .fa-whatsapp) {
  color: #72f0bf !important;
}

:where(.sidebar, .mobile-bottom-nav, .card-title, .modal-head, .modal-header, .btn-secondary, .dashboard-panel)
  :is(.fa-lightbulb, .fa-triangle-exclamation, .fa-circle-exclamation, .fa-clock, .fa-clock-rotate-left, .fa-arrow-rotate-left, .fa-arrows-rotate) {
  color: #fcd34d !important;
}

:where(.sidebar, .mobile-bottom-nav, .card-title, .modal-head, .modal-header, .btn-secondary, .dashboard-panel)
  :is(.fa-user, .fa-users, .fa-user-group, .fa-gear, .fa-shield-halved, .fa-lock, .fa-envelope, .fa-phone) {
  color: #c4b5fd !important;
}

:where(.sidebar, .mobile-bottom-nav, .card-title, .modal-head, .modal-header, .btn-secondary, .dashboard-panel)
  :is(.fa-trash, .fa-xmark, .fa-circle-xmark, .fa-ban, .fa-right-from-bracket) {
  color: #fda4af !important;
}

.sidebar :where(.nav-button, .internal-sellers-menu) :is(.fa-calculator, .fa-chart-line, .fa-chart-column, .fa-file-pdf, .fa-file-invoice-dollar, .fa-receipt, .fa-magnifying-glass, .fa-book-open, .fa-circle-info),
.mobile-bottom-nav :is(.fa-calculator, .fa-chart-line, .fa-chart-column, .fa-file-pdf, .fa-file-invoice-dollar, .fa-receipt, .fa-magnifying-glass, .fa-book-open, .fa-circle-info) {
  background: linear-gradient(145deg, rgba(56, 189, 248, .24), rgba(37, 99, 235, .16)) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .22);
}

.sidebar :where(.nav-button, .internal-sellers-menu) :is(.fa-industry, .fa-print, .fa-cube, .fa-cubes, .fa-box, .fa-boxes-stacked, .fa-layer-group, .fa-book, .fa-store, .fa-warehouse),
.mobile-bottom-nav :is(.fa-industry, .fa-print, .fa-cube, .fa-cubes, .fa-box, .fa-boxes-stacked, .fa-layer-group, .fa-book, .fa-store, .fa-warehouse) {
  background: linear-gradient(145deg, rgba(52, 211, 153, .22), rgba(16, 185, 129, .13)) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .18);
}

.sidebar :where(.nav-button, .internal-sellers-menu) :is(.fa-lightbulb, .fa-triangle-exclamation, .fa-circle-exclamation, .fa-clock, .fa-clock-rotate-left, .fa-arrow-rotate-left, .fa-arrows-rotate),
.mobile-bottom-nav :is(.fa-lightbulb, .fa-triangle-exclamation, .fa-circle-exclamation, .fa-clock, .fa-clock-rotate-left, .fa-arrow-rotate-left, .fa-arrows-rotate) {
  background: linear-gradient(145deg, rgba(251, 191, 36, .22), rgba(245, 158, 11, .12)) !important;
  box-shadow: inset 0 0 0 1px rgba(252, 211, 77, .18);
}

.sidebar :where(.nav-button, .internal-sellers-menu) :is(.fa-user, .fa-users, .fa-user-group, .fa-gear, .fa-shield-halved, .fa-lock, .fa-envelope, .fa-phone),
.mobile-bottom-nav :is(.fa-user, .fa-users, .fa-user-group, .fa-gear, .fa-shield-halved, .fa-lock, .fa-envelope, .fa-phone) {
  background: linear-gradient(145deg, rgba(167, 139, 250, .22), rgba(124, 58, 237, .13)) !important;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .18);
}

.sidebar :where(.nav-button, .internal-sellers-menu) :is(.fa-trash, .fa-xmark, .fa-circle-xmark, .fa-ban, .fa-right-from-bracket),
.mobile-bottom-nav :is(.fa-trash, .fa-xmark, .fa-circle-xmark, .fa-ban, .fa-right-from-bracket) {
  background: linear-gradient(145deg, rgba(251, 113, 133, .22), rgba(225, 29, 72, .12)) !important;
  box-shadow: inset 0 0 0 1px rgba(253, 164, 175, .18);
}

.subscription-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 222, 89, .34);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 227, 82, .16), rgba(26, 53, 84, .34));
}

.mercado-pago-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f8fbff;
  font-size: 14px;
  font-weight: 900;
}

.mercado-pago-brand-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #ffe600;
}

.mercado-pago-brand-icon img {
  width: 21px;
  height: 21px;
  filter: brightness(.3) saturate(1.8);
}

.subscription-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fef3c7;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.subscription-secure-badge i {
  color: #facc15;
}

.subscription-checkout-summary {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px;
  padding: 15px 16px;
  border: 1px solid rgba(103, 212, 255, .22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(25, 71, 116, .58), rgba(14, 37, 62, .74));
}

.subscription-checkout-summary span {
  color: #b9e6ff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.subscription-checkout-summary strong {
  color: #75f0c1;
  font-size: 27px;
  line-height: 1.08;
}

.subscription-checkout-summary strong small {
  color: #b8cce4;
  font-size: 13px;
  font-weight: 700;
}

.subscription-checkout-summary p {
  margin: 2px 0 0;
  color: #9db4d3;
  font-size: 13px;
}

.subscription-checkout-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  color: #b8cce4;
  font-size: 13px;
  line-height: 1.45;
}

.subscription-checkout-notice i {
  margin-top: 2px;
  color: #67d4ff;
}

.subscription-card-security {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -2px 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 12px;
  background: rgba(16, 85, 65, .16);
  color: #c9f7df;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.subscription-card-security i {
  margin-top: 1px;
  color: #72f0b0;
}

.mercado-pago-card-brick {
  min-height: 120px;
  overflow: hidden;
  border-radius: 13px;
  background: #f8fafc;
}

.subscription-brick-loading {
  display: grid;
  min-height: 120px;
  place-items: center;
  gap: 8px;
  color: #29425f;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 640px) {
  #modalAssinaturaMercadoPago {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  #modalAssinaturaMercadoPago .subscription-checkout-modal {
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 15px;
  }

  .subscription-trust-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

/* Painéis da lateral: cabeçalho e ações permanecem visíveis; somente os dados rolam. */
#modalEstoque .modal-card,
#modalCanaisVenda .modal-card,
#modalHistorico .modal-card {
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 760px);
  overflow: hidden;
}

#modalEstoque .list,
#modalCanaisVenda .list-before-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

#modalEstoque details,
#modalCanaisVenda .form-grid,
#modalCanaisVenda .line {
  flex: 0 0 auto;
}

#modalEstoque details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(103, 212, 255, .16);
}

#modalConfig .modal-card {
  max-height: min(90dvh, 760px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#modalHistorico .modal-card {
  width: min(calc(100vw - 36px), 1180px);
  max-width: min(calc(100vw - 36px), 1180px);
}

#modalHistorico .sales-by-user {
  flex: 0 1 auto;
  max-height: 38%;
  margin-bottom: 10px;
  overflow: auto;
  scrollbar-gutter: stable;
}

#modalHistorico .table-scroll {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  border: 1px solid rgba(103, 212, 255, .16);
  border-radius: 12px;
  scrollbar-gutter: stable;
}

#modalHistorico table {
  min-width: 980px;
}

#modalHistorico thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #102039;
}

#modalHistorico .pagination {
  flex: 0 0 auto;
  padding-top: 10px;
}

/* Modais abertos a partir de Produção e Equipe usam o mesmo quadro visual. */
#modalFilaEtapas .modal-content,
#modalEquipeUsuarios .modal-content,
#modalPermissoesEquipe .modal-content {
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 760px);
  overflow: hidden;
  border: 1px solid rgba(43, 136, 216, .65);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
  padding: 24px;
}

#modalFilaEtapas .modal-content {
  width: min(calc(100vw - 36px), 1180px);
  max-width: min(calc(100vw - 36px), 1180px);
}

#modalEquipeUsuarios .modal-content {
  width: min(calc(100vw - 36px), 980px);
  max-width: min(calc(100vw - 36px), 980px);
}

#modalPermissoesEquipe .modal-content {
  width: min(calc(100vw - 36px), 680px);
  max-width: min(calc(100vw - 36px), 680px);
}

#modalFilaEtapas .modal-header,
#modalEquipeUsuarios .modal-header,
#modalPermissoesEquipe .modal-header {
  flex: 0 0 auto;
  margin: -24px -24px 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(103, 212, 255, .18);
}

#modalFilaEtapas .stage-board,
#modalEquipeUsuarios .team-user-list,
#modalPermissoesEquipe .permission-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

#modalEquipeUsuarios .team-user-form,
#modalPermissoesEquipe #btnSalvarPermissoesEquipe {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  #modalEstoque,
  #modalCanaisVenda,
  #modalHistorico,
  #modalConfig,
  #modalFilaEtapas,
  #modalEquipeUsuarios,
  #modalPermissoesEquipe {
    padding: 10px;
  }

  #modalEstoque .modal-card,
  #modalCanaisVenda .modal-card,
  #modalHistorico .modal-card,
  #modalConfig .modal-card,
  #modalFilaEtapas .modal-content,
  #modalEquipeUsuarios .modal-content,
  #modalPermissoesEquipe .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  #modalHistorico .sales-by-user {
    max-height: 34%;
  }

  #modalHistorico .table-scroll {
    min-height: 150px;
  }

  #modalFilaEtapas .modal-content,
  #modalEquipeUsuarios .modal-content,
  #modalPermissoesEquipe .modal-content {
    padding: 16px;
  }

  #modalFilaEtapas .modal-header,
  #modalEquipeUsuarios .modal-header,
  #modalPermissoesEquipe .modal-header {
    margin: -16px -16px 14px;
    padding: 12px 16px;
  }
}

/* Atalhos do arquivo 3D na fila principal e na visualização por etapas. */
.production-model-link,
.stage-model-link {
  text-decoration: none;
}

.production-model-link-group,
.stage-model-link-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.production-model-link-group {
  margin-right: auto;
}

.production-model-link-group .production-model-link,
.stage-model-link-group .stage-model-link {
  margin-right: 0;
}

.production-local-file-link {
  border-color: rgba(56, 189, 248, .35) !important;
  color: #bae6fd !important;
}

.production-local-file-link:disabled {
  cursor: not-allowed;
  opacity: .72;
}

.production-local-file-missing {
  border-color: rgba(148, 163, 184, .3) !important;
  color: #cbd5e1 !important;
}

.production-local-file-inactive {
  border-color: rgba(251, 191, 36, .38) !important;
  color: #fde68a !important;
}

.production-model-link {
  margin-right: auto;
}

.production-link-missing {
  border-color: rgba(251, 191, 36, .4) !important;
  color: #fde68a !important;
}

.stage-card-actions {
  grid-template-columns: 34px minmax(0, 1fr) auto 34px 34px;
}

.stage-model-link {
  min-height: 34px;
  padding-inline: 8px;
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .production-model-link {
    margin-right: 0;
  }

  .production-actions .production-model-link {
    flex: 1 1 100%;
    justify-content: center;
  }

  .production-actions .production-model-link-group {
    flex: 1 1 100%;
    justify-content: center;
    margin-right: 0;
  }

  .stage-card-actions {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
}

/* Painel visual da produção */
#producaoPanel .card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.production-stage-button { flex: 0 0 auto; }

.production-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 4px;
}

.production-summary-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(115, 177, 255, .18);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(18, 32, 51, .88), rgba(13, 20, 33, .88));
}

.production-summary-card > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #9bd7ff;
  background: rgba(52, 153, 255, .14);
}

.production-summary-card > div { display: grid; min-width: 0; gap: 1px; }

.production-summary-card span,
.production-summary-card small {
  color: #93a8c4;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.production-summary-card span { text-transform: uppercase; letter-spacing: .03em; }

.production-summary-card strong { color: #edf7ff; font-size: 20px; line-height: 1.05; }

.production-summary-card.printing > i { color: #c8efff; background: rgba(56, 189, 248, .2); }
.production-summary-card.urgent > i { color: #ffe092; background: rgba(245, 158, 11, .18); }
.production-summary-card.done > i { color: #8bf1c1; background: rgba(16, 185, 129, .18); }

.production-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 4px;
}

.production-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 6px 10px;
  border: 1px solid rgba(121, 157, 203, .25);
  border-radius: 9px;
  color: #aabbd3;
  background: rgba(13, 22, 37, .66);
  font-size: 12px;
  font-weight: 800;
}

.production-filter span {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 99px;
  color: #d9ecff;
  background: rgba(148, 163, 184, .17);
  font-size: 10px;
}

.production-filter:hover,
.production-filter.active {
  border-color: rgba(56, 189, 248, .56);
  color: #e6f7ff;
  background: rgba(32, 139, 220, .16);
}

.production-filter.active span { color: #06233a; background: #75caff; }

.production-card.processing { border-top-color: #a78bfa !important; }
.production-status-icon.processing { background: linear-gradient(145deg, #7c5ce1, #b39bff); }

.production-priority-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(127, 154, 195, .15);
  border-radius: 9px;
  background: rgba(8, 15, 27, .34);
}

.production-priority-label,
.production-priority-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a8bad0;
  font-size: 11px;
  font-weight: 800;
}

.production-priority-label { padding: 4px 7px; border-radius: 7px; background: rgba(148, 163, 184, .13); }
.production-priority-label.urgent { color: #ffe29b; background: rgba(245, 158, 11, .14); }
.production-priority-label.high { color: #ffb7ae; background: rgba(248, 113, 113, .12); }
.production-priority-label.low { color: #a9c7e5; }

.production-priority-select {
  min-height: 28px;
  margin-left: 3px;
  padding: 3px 23px 3px 7px;
  border: 1px solid rgba(97, 164, 222, .36);
  border-radius: 7px;
  color: #eaf5ff;
  background: #14233b;
  font: inherit;
}

.production-progress {
  display: grid;
  gap: 7px;
  padding: 9px 10px 8px;
  border-radius: 10px;
  background: rgba(9, 17, 30, .46);
}

.production-progress-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #bdd0e7;
  font-size: 11px;
  font-weight: 800;
}

.production-progress-title strong { color: #7fe6be; }

.production-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
}

.production-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #4adea3);
  box-shadow: 0 0 14px rgba(56, 189, 248, .5);
  transition: width .25s ease;
}

.production-card.printing .production-progress-track span { animation: production-progress-pulse 1.6s ease-in-out infinite; }

.production-progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.production-progress-steps span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 50%;
  color: #71829a;
  background: rgba(15, 23, 42, .82);
  font-size: 9px;
}

.production-progress-steps span.complete {
  border-color: rgba(74, 222, 163, .58);
  color: #9cf2c8;
  background: rgba(16, 185, 129, .18);
}

.production-progress-steps span.current {
  border-color: rgba(56, 189, 248, .88);
  color: #e1f7ff;
  background: rgba(56, 189, 248, .25);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .09);
}

@keyframes production-progress-pulse {
  50% { filter: brightness(1.24); box-shadow: 0 0 19px rgba(56, 189, 248, .82); }
}

@media (max-width: 880px) {
  .production-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  #producaoPanel .card-title { align-items: flex-start; }
  .production-stage-button { padding-inline: 8px; font-size: 11px; }
  .production-overview { grid-template-columns: 1fr 1fr; gap: 7px; }
  .production-summary-card { padding: 9px; gap: 7px; }
  .production-summary-card > i { width: 29px; height: 29px; font-size: 12px; }
  .production-summary-card strong { font-size: 17px; }
  .production-summary-card small { display: none; }
  .production-priority-row { align-items: flex-start; flex-direction: column; }
  .production-priority-row label { width: 100%; justify-content: space-between; }
  .production-priority-select { min-width: 116px; }
}

.sale-cancelled-label {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid rgba(251, 113, 133, .38);
  border-radius: 999px;
  color: #fda4af;
  background: rgba(127, 29, 29, .16);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.sale-cancelled-amount {
  color: #fda4af !important;
  font-weight: 900;
}