/* Final feature layer: loaded after the legacy CSS files to avoid regressions. */
.app-shell {
  isolation: isolate;
  position: relative;
}

.brand {
  padding: 13px 18px;
}

.brand .brand-logo {
  display: block;
  width: min(100%, 186px);
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

.mobile-brand-watermark {
  display: none;
}

.order-item-list {
  display: grid;
  gap: 8px;
}

.order-item-row {
  align-items: center;
  background: #101411;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.order-item-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.order-item-row small {
  color: var(--muted);
}

/* Native order calculator */
.calculator-panel {
  background: linear-gradient(135deg, rgba(36, 211, 102, 0.10), rgba(16, 20, 17, 0.98) 44%);
  border: 1px solid rgba(36, 211, 102, 0.38);
  border-radius: 12px;
  margin: 24px 0;
  padding: 20px;
}

.calculator-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calculator-heading h2 {
  font-size: 18px;
  margin: 2px 0 4px;
}

.calculator-heading p:not(.eyebrow) {
  color: var(--muted);
  margin: 0;
}

.eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.calculator-status {
  background: rgba(36, 211, 102, 0.12);
  border: 1px solid rgba(36, 211, 102, 0.28);
  border-radius: 999px;
  color: #b8f7ce;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 260px;
  padding: 7px 10px;
}

.calculator-status.is-error {
  background: rgba(239, 68, 68, .13);
  border-color: rgba(239, 68, 68, .4);
  color: #ffc0c0;
}

.calculator-materials {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 15px;
}

.calculator-material-option {
  cursor: pointer;
  display: block;
}

.calculator-material-option input {
  height: 1px;
  min-height: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.calculator-material-option span {
  align-items: center;
  background: #101411;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 12px 14px;
  transition: border-color .15s ease, background .15s ease;
}

.calculator-material-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.calculator-material-option input:checked + span {
  background: rgba(36, 211, 102, .12);
  border-color: var(--green);
  color: #c9fbd8;
}

.calculator-material-option input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(36, 211, 102, .22);
}

.calculator-inputs {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.calculator-inputs .btn {
  min-height: 42px;
  white-space: nowrap;
}

.calculator-result {
  align-items: center;
  background: rgba(8, 12, 9, .64);
  border-top: 1px solid rgba(36, 211, 102, .25);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(145px, .75fr) 1.4fr auto;
  margin-top: 18px;
  padding-top: 16px;
}

.calculator-result[hidden] {
  display: none;
}

.calculator-total {
  display: grid;
  gap: 3px;
}

.calculator-total span,
.calculator-breakdown dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.calculator-total strong {
  color: var(--green);
  font-size: 24px;
  line-height: 1.1;
}

.calculator-breakdown {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.calculator-breakdown div {
  min-width: 0;
}

.calculator-breakdown dt,
.calculator-breakdown dd {
  margin: 0;
}

.calculator-breakdown dd {
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.calculator-note {
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0 0;
}

.calculator-note i {
  color: var(--green);
}

/* Compact Kanban cards preserve the existing data and JS contracts. */
.kanban-page .kanban {
  align-items: start;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(190px, 1fr));
  margin-bottom: 16px;
  overflow-x: auto;
  padding: 0 0 12px;
}

.kanban-page .kanban-column {
  gap: 8px;
  height: auto;
  min-height: 0;
  padding: 10px;
}

.kanban-page .kanban-title {
  margin: 0 1px 6px;
}

.kanban-page .kanban-cards {
  flex: 0 0 auto;
  gap: 7px;
}

.kanban-page .order-card {
  gap: 6px;
  min-height: 73px;
  padding: 8px 9px;
}

.kanban-page .order-card:hover {
  transform: none;
}

.kanban-page .order-card-controls {
  align-items: center;
  display: grid;
  gap: 5px;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}

.kanban-page .order-card h3 {
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  text-align: center;
}

.kanban-page .order-card h3 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-stage-button,
.kanban-stage-spacer {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.kanban-stage-button {
  background: #202a23;
  border: 1px solid #354139;
  color: var(--text);
  padding: 0;
}

.kanban-stage-button:hover,
.kanban-stage-button:focus-visible {
  border-color: var(--green);
  color: var(--green);
}

.kanban-stage-button-next {
  background: rgba(36, 211, 102, .13);
  color: #96f7b5;
}

.kanban-page .order-card-meta {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.kanban-page .badge {
  font-size: 11px;
  padding: 5px 7px;
}

.order-attachments {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.order-attachments i {
  color: var(--green);
}

.kanban-page .empty-state {
  font-size: 12px;
  padding: 18px 10px;
}

@media (max-width: 768px) {
  /* Keep the decorative logo and the off-canvas sidebar from widening the page.
     Kanban itself keeps its deliberate horizontal scroll inside its own container. */
  .app-shell {
    overflow-x: clip;
  }

  .sidebar {
    transform: translateX(-105%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .menu-overlay.open {
    background: rgba(0, 0, 0, .64);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 25;
  }

  .main-content {
    margin-left: 0;
    position: relative;
    z-index: 1;
  }

  .menu-toggle,
  .mobile-only {
    display: inline-flex;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  .mobile-brand-watermark {
    align-items: center;
    display: flex;
    inset: calc(65px + env(safe-area-inset-top, 0px)) 0 calc(72px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 0;
  }

  .mobile-brand-watermark img {
    height: auto;
    max-width: none;
    opacity: .075;
    transform: rotate(-8deg);
    width: min(88vw, 420px);
  }

  .calculator-panel {
    margin: 18px 0;
    padding: 15px;
  }

  .calculator-heading {
    align-items: stretch;
    display: grid;
    gap: 10px;
  }

  .calculator-heading h2 {
    font-size: 16px;
  }

  .calculator-status {
    max-width: none;
    width: fit-content;
  }

  .calculator-materials,
  .calculator-inputs,
  .calculator-result {
    grid-template-columns: 1fr;
  }

  .calculator-inputs .btn,
  .calculator-result .btn {
    min-height: 44px;
    width: 100%;
  }

  .calculator-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kanban-page .kanban {
    gap: 10px;
    grid-template-columns: repeat(6, 84vw);
    scroll-snap-type: x proximity;
  }

  .kanban-page .kanban-column {
    min-height: 0;
    padding: 8px;
    scroll-snap-align: start;
  }

  .kanban-page .kanban-cards {
    gap: 6px;
  }

  .kanban-page .order-card {
    min-height: 80px;
    padding: 8px;
  }

  .kanban-page .order-card-controls {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .kanban-stage-button,
  .kanban-stage-spacer {
    height: 42px;
    width: 42px;
  }

  .kanban-page .order-card h3 {
    font-size: 14px;
  }

  .order-item-row {
    align-items: flex-start;
    font-size: 13px;
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  /* Tablet portrait can show more than one compact lane without turning a
     production card into a phone-sized panel. */
  .kanban-page .kanban {
    grid-template-columns: repeat(6, minmax(270px, 42vw));
  }
}

/* Fix kanban stage action buttons from overlapping */
.order-card-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.kanban-page .order-card-controls {
  display: flex !important;
  grid-template-columns: none !important;
}

.kanban-stage-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  height: 34px !important;
  width: auto !important;
  min-width: 72px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #1e2621 !important;
  color: var(--text) !important;
  border: 1px solid #324036 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.kanban-stage-button-next {
  background: rgba(36, 211, 102, 0.18) !important;
  color: #86f5ac !important;
  border-color: rgba(36, 211, 102, 0.4) !important;
}

.kanban-stage-button-next:hover {
  background: var(--green) !important;
  color: #06210e !important;
}

/* Position PWA install banner at bottom right to avoid blocking artwork preview */
.pwa-banner {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  max-width: 380px !important;
  z-index: 99 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.brand .brand-logo {
  display: block;
  max-width: 210px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* Destaque visual para campos obrigatórios */
.required-asterisk {
  color: #ef4444 !important;
  font-weight: 800 !important;
  margin-left: 3px !important;
  font-size: 1.1em !important;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

label.required > span,
label.required {
  font-weight: 600;
}

.order-form label.required input,
.order-form label.required textarea,
.order-form label.required select {
  border-left: 3px solid #f59e0b !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.order-form label.required input:focus,
.order-form label.required textarea:focus,
.order-form label.required select:focus {
  border-left: 3px solid #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

/* Badge exclusivo UV e Badge de Cliente Avisado */
.badge-material-uv {
  background: rgba(168, 85, 247, 0.22) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.badge-avisado {
  background: rgba(37, 211, 102, 0.16) !important;
  color: #25D366 !important;
  border: 1px solid rgba(37, 211, 102, 0.35) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   ESTILIZAÇÃO CONDICIONAL DE CORES POR ETAPA DO PEDIDO
   ========================================================================== */
.order-card {
  position: relative;
  border-left: 4px solid #475569;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* 1. Novo Pedido: Azul Céu */
.order-card.stage-novo {
  border-left-color: #38bdf8 !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, rgba(15, 23, 42, 0.8) 100%);
}
.order-card.stage-novo:hover {
  border-color: rgba(56, 189, 248, 0.4);
  border-left-color: #38bdf8 !important;
}

/* 2. Aguardando Pagamento: Âmbar / Laranja */
.order-card.stage-aguardando_pagamento {
  border-left-color: #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(15, 23, 42, 0.8) 100%);
}
.order-card.stage-aguardando_pagamento:hover {
  border-color: rgba(245, 158, 11, 0.4);
  border-left-color: #f59e0b !important;
}

/* 3. Pagamento Confirmado: Verde Esmeralda */
.order-card.stage-pagamento_confirmado {
  border-left-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(15, 23, 42, 0.8) 100%);
}
.order-card.stage-pagamento_confirmado:hover {
  border-color: rgba(16, 185, 129, 0.4);
  border-left-color: #10b981 !important;
}

/* 4. Pré-Impressão: Roxo / Violeta */
.order-card.stage-pre_impressao {
  border-left-color: #a855f7 !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.04) 0%, rgba(15, 23, 42, 0.8) 100%);
}
.order-card.stage-pre_impressao:hover {
  border-color: rgba(168, 85, 247, 0.4);
  border-left-color: #a855f7 !important;
}

/* 5. Em Produção: Ciano / Azul Neon */
.order-card.stage-em_producao,
.order-card.stage-producao {
  border-left-color: #06b6d4 !important;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.04) 0%, rgba(15, 23, 42, 0.8) 100%);
}
.order-card.stage-em_producao:hover,
.order-card.stage-producao:hover {
  border-color: rgba(6, 182, 212, 0.4);
  border-left-color: #06b6d4 !important;
}

/* 6. Pronto pra Retirada: Verde Claro Vibrante */
.order-card.stage-pronto_retirada,
.order-card.stage-pronto {
  border-left-color: #22c55e !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(15, 23, 42, 0.8) 100%);
}
.order-card.stage-pronto_retirada:hover,
.order-card.stage-pronto:hover {
  border-color: rgba(34, 197, 94, 0.4);
  border-left-color: #22c55e !important;
}

/* 7. Entregue: Cinza Ardósia Suave */
.order-card.stage-entregue {
  border-left-color: #64748b !important;
  opacity: 0.9;
}

/* 8. Cancelado: Vermelho */
.order-card.stage-cancelado {
  border-left-color: #ef4444 !important;
  opacity: 0.75;
}

/* Botão de Impressão de Nota no Card */
.kanban-print-receipt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  padding: 3px 9px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.kanban-print-receipt-btn:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

.kanban-print-receipt-btn i {
  font-size: 0.74rem;
}

/* ==========================================================================
   KANBAN: CORES INTERCALADAS POR ETAPA / COLUNA
   ========================================================================== */

/* 1. Novo Pedido: Azul Royal */
.kanban-column[data-stage="novo"],
.kanban-column.kanban-column-novo {
  border-top: 4px solid #3b82f6 !important;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="novo"] .kanban-title span:first-child,
.kanban-column.kanban-column-novo .kanban-title span:first-child {
  color: #60a5fa !important;
  font-weight: 800;
}
.kanban-column[data-stage="novo"] .kanban-title span:last-child,
.kanban-column.kanban-column-novo .kanban-title span:last-child {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

/* 2. Aguardando Pagamento: Âmbar / Laranja */
.kanban-column[data-stage="aguardando_pagamento"],
.kanban-column.kanban-column-aguardando_pagamento {
  border-top: 4px solid #f59e0b !important;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="aguardando_pagamento"] .kanban-title span:first-child,
.kanban-column.kanban-column-aguardando_pagamento .kanban-title span:first-child {
  color: #fbbf24 !important;
  font-weight: 800;
}
.kanban-column[data-stage="aguardando_pagamento"] .kanban-title span:last-child,
.kanban-column.kanban-column-aguardando_pagamento .kanban-title span:last-child {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

/* 3. Pagamento Confirmado: Esmeralda */
.kanban-column[data-stage="pagamento_confirmado"],
.kanban-column.kanban-column-pagamento_confirmado {
  border-top: 4px solid #10b981 !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="pagamento_confirmado"] .kanban-title span:first-child,
.kanban-column.kanban-column-pagamento_confirmado .kanban-title span:first-child {
  color: #34d399 !important;
  font-weight: 800;
}
.kanban-column[data-stage="pagamento_confirmado"] .kanban-title span:last-child,
.kanban-column.kanban-column-pagamento_confirmado .kanban-title span:last-child {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

/* 4. Pré-Impressão: Roxo / Violeta */
.kanban-column[data-stage="pre_impressao"],
.kanban-column.kanban-column-pre_impressao {
  border-top: 4px solid #a855f7 !important;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="pre_impressao"] .kanban-title span:first-child,
.kanban-column.kanban-column-pre_impressao .kanban-title span:first-child {
  color: #c084fc !important;
  font-weight: 800;
}
.kanban-column[data-stage="pre_impressao"] .kanban-title span:last-child,
.kanban-column.kanban-column-pre_impressao .kanban-title span:last-child {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #e9d5ff !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

/* 5. Em Produção: Ciano / Azul Elétrico */
.kanban-column[data-stage="em_producao"],
.kanban-column.kanban-column-em_producao {
  border-top: 4px solid #06b6d4 !important;
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="em_producao"] .kanban-title span:first-child,
.kanban-column.kanban-column-em_producao .kanban-title span:first-child {
  color: #22d3ee !important;
  font-weight: 800;
}
.kanban-column[data-stage="em_producao"] .kanban-title span:last-child,
.kanban-column.kanban-column-em_producao .kanban-title span:last-child {
  background: rgba(6, 182, 212, 0.18) !important;
  color: #a5f3fc !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
}

/* 6. Pronto pra Retirada: Verde Lima Vibrante */
.kanban-column[data-stage="pronto_retirada"],
.kanban-column.kanban-column-pronto_retirada {
  border-top: 4px solid #22c55e !important;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="pronto_retirada"] .kanban-title span:first-child,
.kanban-column.kanban-column-pronto_retirada .kanban-title span:first-child {
  color: #4ade80 !important;
  font-weight: 800;
}
.kanban-column[data-stage="pronto_retirada"] .kanban-title span:last-child,
.kanban-column.kanban-column-pronto_retirada .kanban-title span:last-child {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #bbf7d0 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

/* 7. Entregue: Cinza Ardósia / Aço */
.kanban-column[data-stage="entregue"],
.kanban-column.kanban-column-entregue {
  border-top: 4px solid #64748b !important;
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.07) 0%, rgba(16, 20, 17, 0.96) 180px) !important;
}
.kanban-column[data-stage="entregue"] .kanban-title span:first-child,
.kanban-column.kanban-column-entregue .kanban-title span:first-child {
  color: #94a3b8 !important;
  font-weight: 800;
}
.kanban-column[data-stage="entregue"] .kanban-title span:last-child,
.kanban-column.kanban-column-entregue .kanban-title span:last-child {
  background: rgba(100, 116, 139, 0.18) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(100, 116, 139, 0.35) !important;
}