/* Nirox3D Calc — refresh visual: tema escuro suave e organizado.
   Esta camada vem por último para unificar telas que ainda usam estilos legados. */
:root {
  --nirox-bg: #0b1118;
  --nirox-bg-deep: #070b10;
  --nirox-surface: #111923;
  --nirox-surface-soft: #17212d;
  --nirox-surface-strong: #1c2936;
  --nirox-border: #293746;
  --nirox-text: #edf3f7;
  --nirox-muted: #93a4b5;
  --nirox-primary: #668fbe;
  --nirox-primary-glow: #94bdd5;
  --nirox-action: #58b69d;
  --nirox-action-strong: #40967f;
  --nirox-warning: #d8ad65;
  --nirox-warning-strong: #b88643;
  --nirox-danger: #d87982;
  --nirox-danger-strong: #b95763;
  --premium-panel: rgba(17, 25, 35, .96);
  --premium-panel-strong: rgba(23, 33, 45, .98);
  --premium-border: rgba(137, 160, 180, .20);
  --premium-border-strong: rgba(136, 183, 206, .52);
  --premium-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  --premium-soft-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  --ui-radius: 14px;
}

html { background: var(--nirox-bg-deep); }

body {
  color: var(--nirox-text);
  background:
    radial-gradient(900px 520px at 7% -20%, rgba(99, 143, 174, .12), transparent 68%),
    radial-gradient(720px 520px at 104% 10%, rgba(73, 160, 137, .07), transparent 70%),
    var(--nirox-bg) !important;
}

::selection { color: #f5fbff; background: rgba(117, 163, 193, .42); }

/* Estrutura e navegação -------------------------------------------------- */
.app {
  background: transparent !important;
}

.sidebar,
.sidebar.sidebar-polish-ready {
  border-right: 1px solid rgba(143, 162, 180, .16) !important;
  background: rgba(11, 17, 24, .92) !important;
  box-shadow: none !important;
}

.sidebar::before { display: none !important; }

.sidebar-brand,
.sidebar.sidebar-polish-ready .sidebar-brand {
  margin: 2px 3px 18px !important;
  padding: 8px 8px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(143, 162, 180, .15) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-brand .brand-logo,
.sidebar-brand .brand-mark {
  border-color: rgba(145, 190, 210, .35) !important;
  border-radius: 11px !important;
  background: rgba(110, 151, 179, .10) !important;
  box-shadow: none !important;
}

.sidebar-brand strong { color: #f1f6f8 !important; }
.sidebar-subtitle { color: #8294a5 !important; }
.sidebar-menu-label { color: #6f8497 !important; }
.sidebar-menu-label::after { background: linear-gradient(90deg, rgba(123, 147, 166, .28), transparent) !important; }

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu),
.sidebar :where(.nav-button, .internal-sellers-menu) {
  min-height: 40px !important;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #acbac5 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu)::before,
.sidebar :where(.nav-button, .internal-sellers-menu)::before { display: none !important; }

.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu):hover,
.sidebar :where(.nav-button, .internal-sellers-menu):hover {
  border-color: rgba(138, 170, 190, .18) !important;
  color: #eaf3f5 !important;
  background: rgba(123, 151, 174, .11) !important;
}

.sidebar.sidebar-polish-ready .nav-button.active,
.sidebar .nav-button.active {
  border-color: rgba(105, 168, 159, .34) !important;
  color: #edf8f5 !important;
  background: linear-gradient(90deg, rgba(75, 151, 133, .22), rgba(75, 151, 133, .06)) !important;
  box-shadow: inset 3px 0 0 #6fc5ab !important;
}

.sidebar :where(.nav-button, .internal-sellers-menu) i,
.sidebar.sidebar-polish-ready :where(.nav-button, .internal-sellers-menu) i {
  width: 25px !important;
  height: 25px !important;
  border: 0 !important;
  color: #93b8cf !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar .nav-button.active i { color: #8fd1bb !important; }

.plan-card,
.sidebar.sidebar-polish-ready .plan-card {
  border: 1px solid rgba(139, 160, 179, .18) !important;
  border-radius: 12px !important;
  background: rgba(20, 29, 39, .72) !important;
  box-shadow: none !important;
}

.sidebar-support-link {
  border-color: rgba(139, 160, 179, .16) !important;
  color: #afc1cc !important;
  background: rgba(8, 13, 19, .36) !important;
}

#appContent .header {
  min-height: 72px;
  margin: 20px 28px 16px;
  padding: 14px 18px;
  border: 1px solid rgba(142, 162, 181, .18) !important;
  border-radius: 16px !important;
  background: rgba(17, 25, 35, .78) !important;
  box-shadow: var(--premium-soft-shadow) !important;
}

.header-brand h1 { color: #f1f6f8 !important; letter-spacing: -.035em; }
.header-brand .muted { color: #8da0b0 !important; }

/* Controles -------------------------------------------------------------- */
.header-actions button,
.header-actions .btn-secondary,
.header-actions .btn-danger,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-whatsapp {
  min-height: 38px;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.btn-primary,
#orcamentoPanel .actions-grid .full.btn-primary,
.catalog-card-actions .btn-primary {
  border-color: rgba(151, 190, 213, .25) !important;
  background: #5b87b5 !important;
  color: #f7fbfd !important;
}

.btn-success,
.btn-whatsapp,
#orcamentoPanel .actions-grid #btnZap {
  border-color: rgba(115, 196, 166, .26) !important;
  background: #4da88f !important;
  color: #f4fbf8 !important;
}

.btn-warning { background: #bd914d !important; color: #17130d !important; }

.btn-danger,
#appContent .header-actions .btn-danger { background: #bf626c !important; color: #fff9fa !important; }

.btn-secondary,
#appContent .header-actions .btn-secondary {
  border-color: rgba(143, 163, 181, .20) !important;
  background: rgba(32, 44, 57, .88) !important;
  color: #d9e4e9 !important;
}

.header-actions button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-whatsapp:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .18) !important;
  transform: translateY(-1px) !important;
}

:where(input, select, textarea) {
  border-color: rgba(139, 160, 179, .24) !important;
  color: #edf4f7 !important;
  background: rgba(10, 16, 23, .62) !important;
  box-shadow: none !important;
}

:where(input, select, textarea)::placeholder { color: #718493 !important; }

:where(input, select, textarea):focus {
  border-color: rgba(130, 183, 205, .72) !important;
  outline: 0;
  background: rgba(13, 21, 30, .88) !important;
  box-shadow: 0 0 0 3px rgba(113, 173, 196, .12) !important;
}

label { color: #aebfcb !important; }
.field-hint, .muted, small { color: #90a2b1; }

/* Superfícies e hierarquia ------------------------------------------------ */
.card,
.modal-card,
.quote-client-list-panel,
.quote-client-form-panel,
.online-quote-card,
.item-card,
.stage-card,
.dash-card {
  border-color: rgba(139, 160, 179, .19) !important;
  border-radius: 16px !important;
  background: rgba(17, 25, 35, .88) !important;
  box-shadow: var(--premium-soft-shadow) !important;
}

.card::before,
.modal-card::before { display: none !important; }

.card-title {
  min-height: 54px;
  padding: 0 2px 14px !important;
  border-bottom: 1px solid rgba(139, 160, 179, .16) !important;
  color: #edf5f8 !important;
  background: transparent !important;
}

.card-title i {
  color: #8eb9d1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-panel {
  border-color: rgba(139, 160, 179, .18) !important;
  border-radius: 16px !important;
  background: rgba(17, 25, 35, .70) !important;
  box-shadow: none !important;
}

.dashboard-panel::before { opacity: .45; background: #70bea7 !important; }

#dashboardPanel .dashboard-head,
.app-header {
  border-color: rgba(139, 160, 179, .18) !important;
  background: rgba(21, 32, 43, .74) !important;
  box-shadow: none !important;
}

#dashboardPanel .dashboard-head::after,
.app-header::after { display: none !important; }

.dash-card {
  min-height: 96px;
  padding: 15px !important;
  border-radius: 13px !important;
  background: rgba(12, 19, 27, .54) !important;
  box-shadow: none !important;
}

.dash-card::after { opacity: .28 !important; }
.dash-card:hover { border-color: rgba(133, 180, 199, .36) !important; box-shadow: none !important; }
.dash-card small { color: #8195a6 !important; }
.dash-card strong { color: #a9d0df !important; text-shadow: none !important; }
.dash-card span { color: #91a5b4 !important; }

/* Fluxo do orçamento ------------------------------------------------------ */
#orcamentoPanel.card {
  border-color: rgba(125, 156, 177, .24) !important;
  background: rgba(17, 25, 35, .91) !important;
}

#orcamentoPanel .quote-workspace {
  gap: 20px !important;
  padding: 18px !important;
}

#orcamentoPanel .quote-section,
#orcamentoPanel .quote-section:nth-child(2),
#orcamentoPanel .quote-section:nth-child(3),
#orcamentoPanel .quote-section:nth-child(4) {
  padding: 16px !important;
  border: 1px solid rgba(139, 160, 179, .18) !important;
  border-left-width: 1px !important;
  border-left-color: rgba(139, 160, 179, .18) !important;
  border-radius: 13px !important;
  background: rgba(10, 17, 24, .40) !important;
  box-shadow: none !important;
}

#orcamentoPanel .quote-section:focus-within {
  border-color: rgba(130, 183, 205, .48) !important;
  background: rgba(18, 29, 40, .62) !important;
  transform: none !important;
  box-shadow: none !important;
}

#orcamentoPanel .quote-section h3 { color: #dce9ee !important; }
#orcamentoPanel .quote-section h3::before { background: #79b9c6 !important; box-shadow: none !important; }
#orcamentoPanel .quote-section h3::after {
  border-color: rgba(139, 160, 179, .16) !important;
  color: #7f95a5 !important;
  background: rgba(13, 21, 29, .56) !important;
}

#orcamentoPanel .advanced-sale {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#orcamentoPanel .advanced-sale-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #dce9ee;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#orcamentoPanel .advanced-sale-title i { color: #8ec0cb; }

#orcamentoPanel .quote-summary {
  border-color: rgba(115, 164, 183, .30) !important;
  border-radius: 15px !important;
  background: rgba(14, 25, 35, .94) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16) !important;
}

#orcamentoPanel .result {
  border-color: rgba(115, 177, 191, .40) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(42, 92, 102, .34), rgba(17, 39, 49, .78)) !important;
  box-shadow: none !important;
}

#orcamentoPanel .result strong,
.result > strong { color: #b7e1da !important; text-shadow: none !important; }

.summary-row { border-color: rgba(139, 160, 179, .13) !important; }
.summary-row.total { color: #dcecf0 !important; background: rgba(104, 161, 149, .10) !important; }

/* Listas, produção, catálogo e tabelas ----------------------------------- */
.item,
.form-list-item,
.catalog-card,
.production-card,
.stage-card,
.online-quote-card,
.quote-product-row {
  border-color: rgba(139, 160, 179, .18) !important;
  background: rgba(13, 21, 29, .54) !important;
  box-shadow: none !important;
}

.item:hover,
.catalog-card:hover,
.production-card:hover,
.stage-card:hover,
.online-quote-card:hover {
  border-color: rgba(130, 183, 205, .34) !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
}

.production-card { border-top-color: rgba(139, 160, 179, .24) !important; }
.production-card.printing { border-top-color: #769fc0 !important; }
.production-card.done, .production-card.finalized { border-top-color: #64b89d !important; }

.catalog-card-media,
.catalog-card-image,
.catalog-card-placeholder { background: rgba(8, 13, 19, .52) !important; }

.pill,
.badge,
.badge-pendente,
.status-badge {
  border-color: rgba(139, 160, 179, .18) !important;
  color: #b9cad4 !important;
  background: rgba(52, 70, 86, .45) !important;
  box-shadow: none !important;
}

.production-progress,
.production-progress-track { background: rgba(6, 11, 16, .42) !important; }
.production-progress-track span { background: #6caa9e !important; box-shadow: none !important; }

table { border-color: rgba(139, 160, 179, .18) !important; }
th {
  color: #a9c2d0 !important;
  background: rgba(37, 53, 68, .55) !important;
}
td { border-bottom-color: rgba(139, 160, 179, .13) !important; }
tbody tr:hover { background: rgba(102, 137, 158, .08) !important; }

/* Modais e telas de acesso ------------------------------------------------ */
.modal { background: rgba(3, 7, 11, .70) !important; backdrop-filter: blur(8px); }

.modal-card {
  border-color: rgba(142, 164, 181, .25) !important;
  background: #121c27 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38) !important;
}

.modal-head,
.modal-header {
  border-bottom-color: rgba(142, 164, 181, .16) !important;
  background: rgba(24, 36, 49, .48) !important;
}

.screen {
  background:
    radial-gradient(600px 430px at 50% 8%, rgba(102, 151, 176, .12), transparent 75%),
    var(--nirox-bg-deep) !important;
}

.auth-box,
.paywall-box {
  border-color: rgba(142, 164, 181, .23) !important;
  border-radius: 18px !important;
  background: rgba(17, 25, 35, .94) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28) !important;
}

/* Acabamento responsivo --------------------------------------------------- */
@media (max-width: 940px) {
  #appContent .header {
    min-height: 0;
    margin: 14px 16px 12px;
    padding: 14px;
    border-radius: 14px !important;
  }

  #orcamentoPanel .quote-workspace { padding: 12px !important; }
  #orcamentoPanel .quote-section { padding: 14px !important; }
  .card, .modal-card, .dashboard-panel { border-radius: 14px !important; }

  .mobile-bottom-nav {
    border-top-color: rgba(142, 164, 181, .18) !important;
    background: rgba(11, 17, 24, .94) !important;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .16) !important;
  }

  .mobile-nav-button { color: #93a9b8 !important; }
  .mobile-nav-button.active { color: #8ed1ba !important; background: rgba(79, 159, 140, .12) !important; }
}

@media (max-width: 640px) {
  .header-actions { gap: 7px; }
  .header-actions .support-header-link { display: none; }
  .dash-card { min-height: 88px; padding: 13px !important; }
  .card-title { min-height: 48px; }
  #orcamentoPanel .quote-section h3::after { display: none !important; }
}

/* Catálogo: leitura confortável, busca evidente e ações fáceis de usar ---- */
#modalCatalogo .catalog-modal-card {
  width: min(96vw, 1440px) !important;
  max-width: min(96vw, 1440px) !important;
  height: min(92vh, 900px);
  padding: 0 !important;
  border-color: rgba(132, 171, 189, .28) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 158, 151, .12), transparent 29%),
    linear-gradient(145deg, #15202b, #101923 70%) !important;
}

#modalCatalogo .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 !important;
  padding: 19px 22px 16px;
  border-bottom: 1px solid rgba(142, 164, 181, .16) !important;
  background: rgba(25, 38, 50, .48) !important;
}

#modalCatalogo .catalog-title-block h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #eef6f8;
  font-size: 18px;
  letter-spacing: -.02em;
}

#modalCatalogo .catalog-title-block h3 i {
  color: #8dc5c5;
  font-size: 15px;
}

#modalCatalogo .catalog-title-block p {
  margin: 5px 0 0;
  color: #8fa5b2;
  font-size: 12px;
}

#modalCatalogo .catalog-edit-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 22px 0 !important;
  padding: 10px 12px;
  border: 1px solid rgba(112, 153, 167, .20) !important;
  border-radius: 10px;
  color: #9db2bc;
  font-size: 12px;
  line-height: 1.4;
  background: rgba(54, 83, 94, .16) !important;
  box-shadow: none !important;
}

#modalCatalogo .catalog-edit-hint i { color: #8dc5c5; }
#modalCatalogo .catalog-edit-hint strong { color: #c4d6dc; }

#modalCatalogo .catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  gap: 12px;
  margin: 14px 22px 10px !important;
  padding: 0 !important;
  background: transparent !important;
}

#modalCatalogo .catalog-toolbar-field > label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px 2px;
  color: #94abb7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

#modalCatalogo .catalog-toolbar-field > label i { color: #7fb9ba; }

#modalCatalogo .catalog-toolbar-field .field { margin: 0 !important; }

#modalCatalogo .catalog-toolbar input,
#modalCatalogo .catalog-toolbar select {
  min-height: 42px;
  border-color: rgba(126, 156, 171, .25) !important;
  border-radius: 10px !important;
  color: #d9e6ea !important;
  background: rgba(8, 15, 21, .42) !important;
  box-shadow: none !important;
}

#modalCatalogo .catalog-toolbar input:focus,
#modalCatalogo .catalog-toolbar select:focus {
  border-color: rgba(123, 187, 181, .64) !important;
  box-shadow: 0 0 0 3px rgba(91, 158, 151, .12) !important;
}

#modalCatalogo .catalog-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 22px 10px;
  color: #8096a3;
  font-size: 11px;
}

#modalCatalogo #catalogoResumo {
  color: #bad2d5;
  font-weight: 750;
}

#modalCatalogo #listaCatalogo {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  padding: 2px 22px 14px !important;
}

#modalCatalogo .catalog-product-card {
  grid-template-rows: 168px minmax(148px, 1fr) auto !important;
  min-height: 358px !important;
  border-color: rgba(139, 160, 179, .22) !important;
  border-radius: 14px !important;
  background: rgba(13, 22, 31, .72) !important;
  box-shadow: none !important;
}

#modalCatalogo .catalog-product-card:hover {
  border-color: rgba(129, 183, 191, .42) !important;
  background: rgba(18, 29, 40, .82) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .16) !important;
  transform: translateY(-2px) !important;
}

#modalCatalogo .catalog-card-media {
  height: 168px !important;
  min-height: 168px !important;
  background: rgba(7, 13, 19, .72) !important;
}

#modalCatalogo .catalog-card-media::after { height: 36%; }

#modalCatalogo .catalog-card-body {
  min-height: 148px !important;
  gap: 8px !important;
  padding: 12px 13px !important;
}

#modalCatalogo .catalog-card-head { gap: 10px; }

#modalCatalogo .catalog-card-head strong {
  color: #e4eef1;
  font-size: 13px !important;
  line-height: 1.25;
}

#modalCatalogo .catalog-card-head small {
  margin-top: 4px;
  color: #8ca1ad;
  font-size: 10.5px !important;
}

#modalCatalogo .catalog-card-price {
  max-width: none !important;
  padding: 4px 7px !important;
  border-color: rgba(103, 180, 157, .34) !important;
  color: #9bdcc5 !important;
  font-size: 11px !important;
  text-overflow: clip !important;
}

#modalCatalogo .catalog-card-tags {
  gap: 5px !important;
}

#modalCatalogo .catalog-card-tags .pill {
  max-width: 100%;
  padding: 4px 7px !important;
  border-color: rgba(139, 160, 179, .16) !important;
  color: #b5c7ce !important;
  font-size: 10px !important;
  background: rgba(61, 82, 96, .38) !important;
}

#modalCatalogo .catalog-card-description {
  min-height: 30px !important;
  margin: 0 !important;
  color: #a1b3bc;
  font-size: 10.5px;
  line-height: 1.4;
  -webkit-line-clamp: 2 !important;
}

#modalCatalogo .catalog-card-description.muted { color: #718793; }

#modalCatalogo .catalog-card-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 38px;
  align-items: center;
  gap: 7px !important;
  min-height: 54px !important;
  padding: 9px 10px !important;
  border-top-color: rgba(139, 160, 179, .15) !important;
}

#modalCatalogo .catalog-card-actions:not(:has(.btn-success)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) 38px;
}

#modalCatalogo .catalog-card-actions .btn-sm {
  min-width: 0;
  min-height: 34px !important;
  padding: 6px 7px !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
}

#modalCatalogo .catalog-card-actions .btn-sm i {
  margin-right: 4px !important;
  font-size: 10px !important;
}

#modalCatalogo .catalog-card-delete {
  width: 38px !important;
  min-width: 38px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 9px !important;
}

#modalCatalogo .catalog-card-delete i { font-size: 11px !important; }

#modalCatalogo .catalog-card-placeholder i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
}

#modalCatalogo .pagination {
  margin: 0 22px 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(142, 164, 181, .14);
}

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

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

@media (max-width: 640px) {
  #modalCatalogo .catalog-modal-card { padding: 0 !important; }
  #modalCatalogo .modal-head { align-items: flex-start; padding: 15px 14px 13px; }
  #modalCatalogo .catalog-title-block h3 { font-size: 16px; }
  #modalCatalogo .catalog-title-block p { font-size: 11px; }
  #modalCatalogo .catalog-edit-hint { align-items: flex-start; margin: 12px 14px 0 !important; font-size: 11px; }
  #modalCatalogo .catalog-toolbar { grid-template-columns: 1fr; gap: 9px; margin: 12px 14px 9px !important; }
  #modalCatalogo .catalog-list-meta { margin: 0 14px 9px; font-size: 10.5px; }
  #modalCatalogo .catalog-list-meta span:last-child { display: none; }
  #modalCatalogo #listaCatalogo { grid-template-columns: 1fr !important; gap: 12px !important; padding: 2px 14px 12px !important; }
  #modalCatalogo .catalog-product-card { grid-template-rows: 150px minmax(138px, auto) auto !important; min-height: 328px !important; }
  #modalCatalogo .catalog-card-media { height: 150px !important; min-height: 150px !important; }
  #modalCatalogo .pagination { margin: 0 14px 12px !important; }
}

/* Arquivo local em uma área própria para não disputar espaço com as etiquetas. */
#modalCatalogo .catalog-product-card {
  grid-template-rows: 168px minmax(168px, 1fr) auto !important;
  min-height: 390px !important;
}

#modalCatalogo .catalog-card-body {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
}

#modalCatalogo .catalog-card-tags {
  min-height: 24px;
}

#modalCatalogo .catalog-local-file-row {
  min-width: 0;
}

#modalCatalogo .catalog-local-file-action {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 30px;
  gap: 7px;
  padding: 6px 8px !important;
  border-color: rgba(104, 173, 201, .30) !important;
  border-radius: 8px;
  color: #b7d9e8 !important;
  font-size: 10px !important;
  line-height: 1;
  text-align: left;
  background: rgba(43, 114, 145, .16) !important;
}

#modalCatalogo .catalog-local-file-action:hover {
  border-color: rgba(125, 211, 252, .56) !important;
  background: rgba(43, 114, 145, .26) !important;
}

#modalCatalogo .catalog-local-file-action > i:first-child { color: #79c9ed; }
#modalCatalogo .catalog-local-file-action > i:last-child {
  margin-left: auto;
  color: #83afc2;
  font-size: 9px;
}

/* Mantém todas as ações do cartão visíveis, inclusive em resultados filtrados. */
#modalCatalogo #listaCatalogo {
  grid-auto-rows: minmax(440px, auto) !important;
  align-items: start !important;
}

#modalCatalogo .catalog-product-card {
  min-height: 440px !important;
  height: auto !important;
}

#modalCatalogo .catalog-card-actions,
#modalCatalogo .catalog-card-actions:not(:has(.btn-success)) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  grid-auto-rows: minmax(34px, auto);
  align-items: stretch;
  min-height: 0 !important;
}

#modalCatalogo .catalog-card-actions .catalog-instagram-action,
#modalCatalogo .catalog-card-actions .catalog-meta-ad-action {
  grid-column: auto !important;
}

#modalCatalogo .catalog-card-actions .btn-sm {
  line-height: 1.15 !important;
  white-space: normal;
}

#modalCatalogo .catalog-card-actions .catalog-card-delete {
  width: 38px !important;
  justify-self: end;
}

@media (max-width: 640px) {
  #modalCatalogo #listaCatalogo {
    grid-auto-rows: minmax(420px, auto) !important;
  }

  #modalCatalogo .catalog-product-card {
    grid-template-rows: 150px minmax(158px, auto) auto !important;
    min-height: 420px !important;
  }
}

/* Indicadores da vitrine no painel --------------------------------------- */
.vitrine-click-ranking {
  grid-column: 1 / -1;
  min-height: 0 !important;
  padding: 14px 16px !important;
}

.vitrine-click-ranking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.vitrine-click-ranking-head small {
  display: block;
  color: #91abb8 !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.vitrine-click-ranking-head strong {
  display: block;
  margin-top: 3px;
  color: #dce9ee !important;
  font-size: 15px !important;
  text-shadow: none !important;
}

.vitrine-click-ranking-head > span {
  color: #88adad;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.vitrine-click-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.vitrine-click-product {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(133, 180, 199, .18);
  border-radius: 10px;
  background: rgba(8, 14, 20, .33);
}

.vitrine-click-product-rank {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: #b8ded5;
  font-size: 10px;
  font-weight: 850;
  background: rgba(91, 158, 151, .18);
}

.vitrine-click-product strong {
  min-width: 0;
  overflow: hidden;
  color: #c9d9df !important;
  font-size: 11px !important;
  font-weight: 750;
  text-overflow: ellipsis;
  text-shadow: none !important;
  white-space: nowrap;
}

.vitrine-click-product b {
  color: #87cbb7;
  font-size: 10px;
  white-space: nowrap;
}

.vitrine-click-empty {
  grid-column: 1 / -1;
  margin: 1px 0;
  color: #8197a4;
  font-size: 11px;
}

@media (max-width: 640px) {
  .vitrine-click-ranking-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .vitrine-click-product-list { grid-template-columns: 1fr; }
}