/* Shared UI tweaks for all HTML pages (legacy + v2). */

:root{
  /* Neutral palette (preto & branco) */
  --ui-accent: #0F172A;
  --ui-accent2: #000000;
  --ui-check-bg: rgba(15, 23, 42, 0.04);
  --ui-check-bd: rgba(15, 23, 42, 0.22);
  --ui-check-bd2: rgba(15, 23, 42, 0.45);
  --ui-overlay: rgba(15, 23, 42, 0.58);
  --ui-drawer-w: min(340px, 86vw);
  --ui-z-overlay: 10010;
  --ui-z-drawer: 10020;
}

html{
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

:where(a, button, [role="button"], label, input, textarea, select, summary){
  touch-action: manipulation;
}

@supports (height: 100dvh){
  body,
  body.h-screen,
  .h-screen{
    min-height: 100dvh;
  }
}
@supports not (height: 100dvh){
  body,
  body.h-screen,
  .h-screen{
    min-height: 100vh;
  }
}

/* Prevent “need to zoom out” caused by horizontal overflow */
body{
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100dvh;
}
main, section, header, footer, aside{
  min-width: 0;
  max-width: 100%;
}
img, video, canvas, svg{
  max-width: 100%;
  height: auto;
}

/* =========
   Toasts: show at top (global)
   ========= */
#toasts{
  top: 1.25rem !important;
  right: 1.25rem !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}
@media (min-width: 768px){
  #toasts{
    top: 1.5rem !important;
    right: 1.5rem !important;
  }
}

/* =========
   Modals: consistent "Caixa" look (global)
   ========= */
.modal{
  background: rgba(0,0,0,.40) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal .modal-card{
  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.22) !important;
}

/* Pedidos: modal do ticket */
#orderModalOverlay #orderModalBackdrop{
  background: rgba(0,0,0,.40) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#orderModalOverlay #orderModalCard{
  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.22) !important;
}

/* Conversas: zoom de imagem (quando existir) */
#imgZoom{
  background: rgba(0,0,0,.40) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Consistent click targets / typography rhythm */
:where(button, input, textarea, select){
  line-height: 1.25;
}
:where(button){
  cursor: pointer;
}
:where(button:disabled, input:disabled, textarea:disabled, select:disabled){
  cursor: not-allowed;
}

/* Responsive page padding for the common “main scroll area” pattern */
main > .flex-1.overflow-y-auto{
  padding: clamp(16px, 2.2vw, 32px) !important;
}

/* =========
   Form controls: keep inputs visually distinct on light UI
   ========= */
:root{
  --ui-field-bg: #F8FAFC;
  --ui-field-bg2: #FFFFFF;
  --ui-field-bd: #E2E8F0;
  --ui-field-text: #0F172A;
  --ui-field-ph: #94A3B8;
  --ui-field-ring: rgba(15, 23, 42, 0.12);
}

/* Low-specificity so pages can still override via classes */
:where(input, textarea, select){
  font: inherit;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
       textarea,
       select){
  background: var(--ui-field-bg);
  color: var(--ui-field-text);
  border: 1px solid var(--ui-field-bd);
  border-radius: 12px;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
       textarea,
       select):focus{
  outline: none;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
       textarea,
       select):focus-visible{
  background: var(--ui-field-bg2);
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-field-ring);
}
:where(input, textarea)::placeholder{
  color: var(--ui-field-ph);
  opacity: 1;
}

/* Mobile: compact UI */
@media (max-width: 767px){
  html{
    font-size: 100%;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
         textarea,
         select){
    font-size: 16px !important;
  }

  /* Mobile: avoid 100vh "corte" (barra do navegador) */
  @supports (height: 100dvh){
    .h-screen{ height: 100dvh !important; min-height: 100dvh !important; }
  }

  /* Mobile: logo central mais visível */
  .uiMobileLogo{
    height: clamp(72px, 18vw, 96px) !important;
    width: auto !important;
    object-fit: contain;
  }
  /* A imagem do logo tem muita "margem" interna; dá zoom só no logo, sem mexer no tamanho da fonte */
  img.uiMobileLogo{
    transform: scale(1.35);
    transform-origin: center;
  }

  /* Mobile: topbar mais fina (sem mexer no tamanho do logo) */
  main > header.h-24{
    height: 72px !important;
    overflow: hidden;
  }

  /* Evita corte/limite de rolagem no mobile (páginas usam body h-screen + overflow-hidden) */
  body{
    height: auto !important;
    min-height: 100dvh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.h-screen{ height: auto !important; min-height: 100dvh; }
  body.overflow-hidden{ overflow-y: auto !important; overflow-x: hidden !important; }

  /* Remove rolagem "interna" do container principal; rola a página inteira. */
  main > .flex-1.overflow-y-auto{
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  /* Evita a "faixa" no topo causada pelo mask do grid. */
  .bg-grid-pattern{
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

/* Notebooks/monitors with short height: avoid “layout cortado” requiring browser zoom */
@media (max-height: 780px){
  body{
    height: auto !important;
    min-height: 100dvh;
    overflow-y: auto !important;
  }
  body.h-screen{ height: auto !important; min-height: 100dvh; }
  body.overflow-hidden{ overflow-y: auto !important; overflow-x: hidden !important; }
  main{ min-height: 100dvh; }
}

/* Avoid "giant text" jumps on very small screens while keeping readability. */
@media (max-width: 420px){
  .text-3xl{ font-size: 1.45rem !important; }
  .text-2xl{ font-size: 1.30rem !important; }
  .text-xl{ font-size: 1.10rem !important; }
  .text-lg{ font-size: 1.00rem !important; }
}

/* =========
   Custom checkboxes (global)
   ========= */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid var(--ui-check-bd);
  background: var(--ui-check-bg);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
  vertical-align: middle;
}
input[type="checkbox"]:active{ transform: translateY(1px); }
input[type="checkbox"]:hover{ border-color: rgba(255,255,255,0.28); }
input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}
input[type="checkbox"]:checked{
  background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.78));
  border-color: var(--ui-check-bd2);
  box-shadow:
    0 0 0 1px rgba(15,23,42,.12) inset,
    0 10px 24px rgba(15,23,42,.12);
}
input[type="checkbox"]:checked::after{
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  transform: rotate(-45deg) translateY(-0.5px);
  margin-top: -1px;
}
input[type="checkbox"][disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* =========
   Mobile drawer for pages with sidebar
   ========= */
.uiOverlay{
  display:none;
  position: fixed;
  inset: 0;
  background: var(--ui-overlay);
  z-index: var(--ui-z-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.ui-menu-open .uiOverlay{ display:block; }

@media (max-width: 767px){
  body.ui-menu-open{ overflow:hidden !important; }
  .uiSidebar{
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ui-drawer-w) !important;
    max-width: 92vw;
    transform: translateX(-112%);
    transition: transform .22s ease;
    z-index: var(--ui-z-drawer) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.55);
  }
  body.ui-menu-open .uiSidebar{ transform: translateX(0); }
}
@media (min-width: 768px){
  .uiSidebar{
    position: static !important;
    transform: none !important;
    width: 18rem !important;
    box-shadow: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px){
  .uiSidebar{
    width: 16rem !important;
  }
}

.uiMenuBtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(248, 250, 252, 0.9);
  color: rgba(15, 23, 42, 0.92);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .06s ease, border-color .15s ease;
}
.uiMenuBtn:hover{ background: #FFFFFF; border-color: rgba(15, 23, 42, 0.28); }
.uiMenuBtn:active{ transform: translateY(1px); }

/* =========
   Sidebar brand logo (maior e mais visível)
   ========= */
.uiSidebar > div.h-20{ overflow: hidden; }
.uiSidebar > div.h-20 img[src$="foodai.png"]{
  height: 100px !important;
  width: auto !important;
  object-fit: contain;
  transform: scale(1.5);
  transform-origin: center;
  display: block;
  margin-inline: auto;
}
@media (min-width: 768px) and (max-width: 1024px){
  .uiSidebar > div.h-20 img[src$="foodai.png"]{
    transform: scale(1.25);
  }
}

/* Desktop: centraliza o logo no meio da barra da sidebar (sem mexer no mobile) */
@media (min-width: 768px){
  .uiSidebar > div.h-20{
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .uiSidebar > div.h-20 > div{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========
   Sidebar icon centering (FontAwesome)
   ========= */
.uiSidebar .icon-box{
  display: grid !important;
  place-items: center !important;
}
.uiSidebar .icon-box i{
  line-height: 1 !important;
  display: block;
  transform: translateY(0.5px);
}

/* =========
   Painel: products rows (fix mobile "sumindo infos")
   ========= */
@media (max-width: 520px){
  .prodItem{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .prodLeft{ width: 100%; }
  .prodRight{
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .rowBtns{ flex-wrap: nowrap; gap: 8px; }
  .btnMini,.btnDanger{ padding: 10px 12px; }
  .priceTag{ padding: 8px 10px; }
}

/* =========
   Global responsive baseline (safe / non-invasive)
   ========= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

body.ui-page :where(p, li, a, span, button, label, input, textarea, select){
  overflow-wrap: anywhere;
}

body.ui-page :where(img, video, iframe){
  max-width: 100%;
  height: auto;
}

body.ui-page :where(.table-wrap, .table-responsive, .salesTableWrap){
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Floating auto menu button for pages that don't provide one */
.uiAutoMenuBtn{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10030;
  display: none;
}

@media (max-width: 767px){
  .uiAutoMenuBtn{
    display: inline-grid;
    place-items: center;
  }
}

/* =========
   9:16 / mobile portrait hardening
   ========= */
@media (max-width: 540px) and (orientation: portrait), (max-aspect-ratio: 9/16){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body{
    min-height: 100dvh;
  }

  body :where(.flex, .grid, [class*="grid-cols"], [class*="grid-cols-"]){
    min-width: 0;
  }

  body :where(main, section, article, header, footer, aside, .glass-card, .glass-panel, .modal-card, .card, .panel, .shell){
    max-width: 100%;
  }

  body :where(main, .flex-1, .glass-panel, .glass-card, .modal-card, .panel, .card){
    min-width: 0;
  }

  body :where(.overflow-x-auto){
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  body :where(.overflow-y-auto){
    min-width: 0;
  }

  main > .flex-1.overflow-y-auto{
    padding: 14px !important;
  }

  #categoriesBar{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  #categoriesBar .catChip{
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 40px;
    max-width: none;
    text-align: center;
    padding: 9px 12px !important;
    scroll-snap-align: start;
  }

  body :where(.glass-btn, .glass-btn-primary, .btn, button){
    max-width: 100%;
  }
}