/* ==============================================================================
   GUSTO • SISTEMA DE MARCA (MANUAL DE MARCA V1.0)
   Cores Oficiais:
   - BRASA:   #FF5A2D (RGB 255 / 90 / 45) - Acentos, CTAs, energia
   - CREME:   #FFF3E3 (RGB 255 / 243 / 227) - Base, respiro, textos de alto contraste
   - GRAFITE: #211D1B (RGB 33 / 29 / 27) - Superfícies, autoridade, contraste
   - LIMA:    #D7EF4A (RGB 215 / 239 / 74) - Detalhes, badges, pontos de atenção
   Tipografia Oficial: Rubik (400, 500, 700, 900)
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;600;800&display=swap');

:root {
  --gusto-brasa: #FF5A2D;
  --gusto-brasa-hover: #E5481B;
  --gusto-creme: #FFF3E3;
  --gusto-grafite: #211D1B;
  --gusto-grafite-deep: #161312;
  --gusto-grafite-card: #211D1B;
  --gusto-grafite-input: #191615;
  --gusto-grafite-border: rgba(255, 243, 227, 0.08);
  --gusto-lima: #D7EF4A;
  --gusto-lima-text: #211D1B;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

html {
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  background-color: #161312;
  color: #FFF3E3;
  scroll-behavior: auto !important;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  width: 100%;
}

body {
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  background-color: #161312;
  color: #FFF3E3;
  overflow-x: hidden;
  width: 100%;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-heading {
  font-family: 'Rubik', sans-serif;
  letter-spacing: -0.02em;
}

code, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

::selection {
  background-color: #FF5A2D;
  color: #FFF3E3;
}

/* Custom Scrollbar Gusto */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #161312;
}
::-webkit-scrollbar-thumb {
  background: #352F2C;
  border-radius: 5px;
  border: 2px solid #161312;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF5A2D;
}
::-webkit-scrollbar-thumb:active {
  background: #E5481B;
}

/* Aceleração por Hardware & Isolamento de Camadas (GPU) */
header {
  transform: translateZ(0);
  will-change: transform;
}

.tab-pane {
  contain: content;
}

#ingredientsTableBody tr, #recipesList > div, #subRecipesList > div {
  contain: layout style;
}

/* Status badges de CMV (Gusto Paleta) */
.badge-cmv-green {
  background-color: rgba(215, 239, 74, 0.15);
  color: #D7EF4A;
  border: 1px solid rgba(215, 239, 74, 0.4);
}

.badge-cmv-yellow {
  background-color: rgba(255, 90, 45, 0.15);
  color: #FFA078;
  border: 1px solid rgba(255, 90, 45, 0.4);
}

.badge-cmv-red {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Badges da Engenharia de Cardápio (BCG) - Paleta Gusto */
.badge-matrix-star {
  background-color: rgba(255, 90, 45, 0.18);
  color: #FF5A2D;
  border: 1px solid rgba(255, 90, 45, 0.45);
}
.badge-matrix-plowhorse {
  background-color: rgba(215, 239, 74, 0.15);
  color: #D7EF4A;
  border: 1px solid rgba(215, 239, 74, 0.35);
}
.badge-matrix-puzzle {
  background-color: rgba(255, 140, 102, 0.15);
  color: #FF8C66;
  border: 1px solid rgba(255, 140, 102, 0.35);
}
.badge-matrix-dog {
  background-color: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

/* Badges e Pílulas Oficiais Gusto */
.badge-gusto-lima {
  background-color: #D7EF4A;
  color: #211D1B;
  font-weight: 900;
  border-radius: 9999px;
  padding: 2px 10px;
  display: inline-flex;
  align-items: center;
}

.badge-gusto-brasa {
  background-color: #FF5A2D;
  color: #FFF3E3;
  font-weight: 900;
  border-radius: 9999px;
  padding: 2px 10px;
  display: inline-flex;
  align-items: center;
}

/* Transições suaves */
.tab-content {
  animation: fadeIn 0.18s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Estilos de Impressão (Fundo Branco com Tipografia Gusto) */
@media print {
  body {
    background-color: #ffffff !important;
    color: #211D1B !important;
    font-size: 11pt;
    font-family: 'Rubik', sans-serif !important;
  }

  header, nav, #appTabs, .no-print, button, .modal-backdrop, #toastContainer {
    display: none !important;
  }

  #printSection {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    color: #211D1B !important;
    background: #fff !important;
  }

  .print-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 15px !important;
  }

  .print-table th, .print-table td {
    border: 1px solid #333 !important;
    padding: 6px 10px !important;
    text-align: left !important;
    color: #211D1B !important;
  }

  .print-table th {
    background-color: #FFF3E3 !important;
    color: #211D1B !important;
  }
}

/* ========================================== */
/* REGRAS NATIVAS DE APLICATIVO MOBILE        */
/* ========================================== */

@media (max-width: 767px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    padding-bottom: max(76px, calc(64px + env(safe-area-inset-bottom)));
  }

  button, a, input[type="button"], input[type="submit"], .mobile-nav-btn {
    touch-action: manipulation;
  }

  button:active, .touch-press:active {
    transform: scale(0.96);
    transition: transform 0.08s ease;
  }

  .modal-dialog-mobile {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    align-self: flex-end !important;
  }

  #mobileBottomNav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .mobile-horizontal-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
}

@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-sheet-up {
  animation: sheetSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}