:root{
  color-scheme: dark;

  --bg: #0f172a;
  --panel: #111827;
  --card: #0b1220;
  --border: rgba(255,255,255,.08);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #fb923c;
  --accent2: #22c55e;

  --page-gradient-start: #0b1020;
  --page-gradient-end: #070b14;

  --topbar-background: rgba(17,24,39,.85);
  --menu-background: rgba(17,24,39,.35);
  --menu-mobile-background: rgba(17,24,39,.98);

  --menu-hover-background: rgba(255,255,255,.04);

  --card-background: rgba(15,23,42,.55);
  --panel-background: rgba(15,23,42,.35);
  --card-shadow: 0 10px 30px rgba(0,0,0,.25);
}

html[data-theme="claro"]{
  color-scheme: light;

  --bg: #f1f5f9;
  --panel: #ffffff;
  --card: #ffffff;
  --border: rgba(15,23,42,.14);
  --text: #0f172a;
  --muted: #475569;
  --accent: #ea580c;
  --accent2: #16a34a;

  --page-gradient-start: #f8fafc;
  --page-gradient-end: #e2e8f0;

  --topbar-background: rgba(255,255,255,.88);
  --menu-background: rgba(255,255,255,.72);
  --menu-mobile-background: rgba(248,250,252,.98);

  --menu-hover-background: rgba(15,23,42,.05);

  --card-background: rgba(255,255,255,.92);
  --panel-background: rgba(255,255,255,.78);
  --card-shadow: 0 10px 30px rgba(15,23,42,.10);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: linear-gradient(
    180deg,
    var(--page-gradient-start) 0%,
    var(--page-gradient-end) 100%
  );
  color: var(--text);
}

.app{
  min-height: 100vh;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar-background);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.brand-logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(251,146,60,.12);
  border: 1px solid rgba(251,146,60,.25);
  flex: 0 0 auto;
}

.brand-logo img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-logo--imagem{
  overflow: hidden;
}

.brand-text{
  min-width: 0;
}

.brand-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.brand-subtitle{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(251,146,60,.15);
  border: 1px solid rgba(251,146,60,.35);
  color: var(--text);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
}

.btn:hover{
  filter: brightness(1.1);
}

.btn-outline{
  background: transparent;
  border: 1px solid var(--border);
}

.btn-menu-toggle{
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.btn-theme-toggle{
  min-width: 92px;
  white-space: nowrap;
}

.body{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
}

.menu{
  border-right: 1px solid var(--border);
  background: var(--menu-background);
  padding: 14px;
}

.menu-nav{
  width: 100%;
}

.menu-title{
  font-size: 12px;
  color: var(--muted);
  margin: 10px 10px 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.menu-section{
  margin-bottom: 14px;
}

.menu-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration:none;
  border: 1px solid transparent;
}

.menu-item:hover{
  background: var(--menu-hover-background);
  border-color: var(--border);
}

.menu-item.is-active{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.25);
}

.content{
  padding: 18px 18px 40px;
  min-width: 0;
}

h1{
  margin: 8px 0 16px;
  font-size: 24px;
}

h2{
  margin: 0 0 10px;
  font-size: 18px;
}

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

.card{
  background: var(--card-background);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--card-shadow);
}

.card-title{
  color: var(--muted);
  font-size: 13px;
}

.card-value{
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.card-hint{
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.panel{
  background: var(--panel-background);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}

/* =========================================================
   MESAS — CORES DE STATUS POR TEMA
   Variáveis semânticas: a view define a estrutura; este CSS
   central decide como mesas livres e ocupadas aparecem.
   ========================================================= */

:root{
  --mesa-card-shadow: 0 10px 30px rgba(0,0,0,.25);
  --mesa-card-hover-shadow: 0 14px 34px rgba(0,0,0,.32);

  --mesa-card-livre-start: rgba(34,197,94,.32);
  --mesa-card-livre-end: rgba(21,128,61,.50);
  --mesa-card-livre-border: rgba(255,255,255,.10);
  --mesa-card-livre-text: #ffffff;
  --mesa-card-livre-muted: rgba(255,255,255,.88);

  --mesa-card-ocupada-start: rgba(239,68,68,.34);
  --mesa-card-ocupada-end: rgba(153,27,27,.55);
  --mesa-card-ocupada-border: rgba(255,255,255,.10);
  --mesa-card-ocupada-text: #ffffff;
  --mesa-card-ocupada-muted: rgba(255,255,255,.88);
}

html[data-theme="claro"]{
  --mesa-card-shadow: 0 8px 18px rgba(15,23,42,.10);
  --mesa-card-hover-shadow: 0 12px 24px rgba(15,23,42,.14);

  --mesa-card-livre-start: #ecfdf5;
  --mesa-card-livre-end: #bbf7d0;
  --mesa-card-livre-border: rgba(22,163,74,.34);
  --mesa-card-livre-text: #14532d;
  --mesa-card-livre-muted: #166534;

  --mesa-card-ocupada-start: #fff1f2;
  --mesa-card-ocupada-end: #fecdd3;
  --mesa-card-ocupada-border: rgba(220,38,38,.32);
  --mesa-card-ocupada-text: #7f1d1d;
  --mesa-card-ocupada-muted: #991b1b;
}

/* =========================================================
   CONFIGURAÇÕES — COMPONENTES VISUAIS REUTILIZÁVEIS
   ========================================================= */

:root{
  --cfg-muted: #94a3b8;

  --cfg-field-bg: rgba(2,6,23,.35);
  --cfg-field-readonly-bg: rgba(2,6,23,.20);
  --cfg-field-border: rgba(255,255,255,.10);
  --cfg-field-text: #e5e7eb;
  --cfg-field-placeholder: #64748b;
  --cfg-field-focus: rgba(251,146,60,.55);

  --cfg-success-bg: rgba(34,197,94,.10);
  --cfg-success-border: rgba(34,197,94,.25);
  --cfg-success-text: #bbf7d0;

  --cfg-error-bg: rgba(239,68,68,.10);
  --cfg-error-border: rgba(239,68,68,.25);
  --cfg-error-text: #fecaca;

  --cfg-info-bg: rgba(37,99,235,.08);
  --cfg-info-border: rgba(37,99,235,.22);
  --cfg-info-text: #cbd5e1;
}

html[data-theme="claro"]{
  --cfg-muted: #64748b;

  --cfg-field-bg: #ffffff;
  --cfg-field-readonly-bg: #e2e8f0;
  --cfg-field-border: rgba(15,23,42,.20);
  --cfg-field-text: #0f172a;
  --cfg-field-placeholder: #64748b;
  --cfg-field-focus: rgba(234,88,12,.45);

  --cfg-success-bg: rgba(34,197,94,.10);
  --cfg-success-border: rgba(22,163,74,.28);
  --cfg-success-text: #166534;

  --cfg-error-bg: rgba(239,68,68,.10);
  --cfg-error-border: rgba(220,38,38,.28);
  --cfg-error-text: #b91c1c;

  --cfg-info-bg: rgba(37,99,235,.07);
  --cfg-info-border: rgba(37,99,235,.24);
  --cfg-info-text: #1e3a8a;
}

.cfg-page-lead{
  color: var(--cfg-muted);
  margin-top: 0;
}

.cfg-alert{
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}

.cfg-alert--success{
  background: var(--cfg-success-bg);
  border-color: var(--cfg-success-border);
  color: var(--cfg-success-text);
}

.cfg-alert--error{
  background: var(--cfg-error-bg);
  border-color: var(--cfg-error-border);
  color: var(--cfg-error-text);
}

.cfg-form{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}

.cfg-field-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cfg-label{
  color: var(--cfg-muted);
  font-size: 12px;
  line-height: 1.35;
}

.cfg-field{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cfg-field-border);
  background: var(--cfg-field-bg);
  color: var(--cfg-field-text);
  font: inherit;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.cfg-field::placeholder{
  color: var(--cfg-field-placeholder);
  opacity: 1;
}

.cfg-field:focus{
  outline: none;
  border-color: var(--cfg-field-focus);
  box-shadow: 0 0 0 3px rgba(251,146,60,.12);
}

.cfg-field option{
  background: var(--cfg-field-bg);
  color: var(--cfg-field-text);
}

.cfg-field-readonly{
  background: var(--cfg-field-readonly-bg);
  color: var(--cfg-muted);
  opacity: 1;
}

.cfg-check-label{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
}

.cfg-check-label input{
  flex: 0 0 auto;
}

.cfg-help{
  color: var(--cfg-muted);
  font-size: 12px;
  line-height: 1.45;
}

.cfg-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cfg-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 20px;
}

.cfg-tabs .btn{
  white-space: nowrap;
}

.cfg-logo-panel{
  max-width: 640px;
}

.cfg-logo-preview-area{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.cfg-logo-preview{
  display: block;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border: 1px solid var(--border);
  border-radius: 18px;
  object-fit: contain;
  background: #ffffff;
}

.cfg-logo-preview--empty{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 32px;
  font-weight: 800;
  background: var(--primary-soft);
}

@media (max-width: 640px){
  .cfg-tabs{
    gap: 8px;
  }

  .cfg-tabs .btn{
    padding: 9px 11px;
    font-size: 13px;
  }

  .cfg-logo-preview-area{
    align-items: flex-start;
  }
}

.cfg-info-box{
  padding: 12px;
  border-radius: 14px;
  background: var(--cfg-info-bg);
  border: 1px solid var(--cfg-info-border);
  color: var(--cfg-info-text);
}

.cfg-info-box strong{
  color: var(--text);
}


/* =========================================================
   IA ATENDIMENTO — COMPONENTES VISUAIS REUTILIZÁVEIS
   ========================================================= */

:root{
  --ia-selected-background: rgba(37,99,235,.10);
  --ia-selected-border: rgba(37,99,235,.34);
  --ia-item-hover-background: rgba(255,255,255,.04);

  --ia-human-background: rgba(239,68,68,.12);
  --ia-human-border: rgba(248,113,113,.60);
  --ia-human-text: #fecaca;

  --ia-client-background: rgba(37,99,235,.10);
  --ia-client-border: rgba(37,99,235,.24);

  --ia-response-background: rgba(34,197,94,.10);
  --ia-response-border: rgba(34,197,94,.24);
}

html[data-theme="claro"]{
  --ia-selected-background: rgba(37,99,235,.08);
  --ia-selected-border: rgba(37,99,235,.32);
  --ia-item-hover-background: rgba(15,23,42,.04);

  --ia-human-background: rgba(239,68,68,.08);
  --ia-human-border: rgba(220,38,38,.32);
  --ia-human-text: #b91c1c;

  --ia-client-background: rgba(37,99,235,.07);
  --ia-client-border: rgba(37,99,235,.25);

  --ia-response-background: rgba(34,197,94,.08);
  --ia-response-border: rgba(22,163,74,.26);
}

.ia-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ia-page-lead{
  color: var(--cfg-muted);
  margin-top: 0;
}

.ia-summary-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ia-summary-value{
  font-size: 28px;
  font-weight: 700;
  margin-top: 10px;
}

.ia-workspace{
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  height: clamp(500px, calc(100vh - 330px), 720px);
}

.ia-conversation-panel,
.ia-chat-panel{
  height: 100%;
  min-height: 0;
}

.ia-conversation-panel{
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ia-conversation-header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ia-conversation-empty{
  padding: 16px;
  color: var(--cfg-muted);
}

.ia-conversation-list{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ia-conversation-item{
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.ia-conversation-item:hover{
  background: var(--ia-item-hover-background);
}

.ia-conversation-item.is-selected{
  background: var(--ia-selected-background);
  border-left-color: var(--ia-selected-border);
}

.ia-conversation-item.needs-human{
  background: var(--ia-human-background);
  border-left-color: #ef4444;
}

.ia-conversation-item.needs-human.is-selected{
  box-shadow: inset 0 0 0 1px var(--ia-human-border);
}

.ia-conversation-item.has-unread{
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.18);
}

.ia-conversation-item-top,
.ia-conversation-item-bottom,
.ia-chat-header,
.ia-message-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ia-conversation-main{
  min-width: 0;
  flex: 1;
}

.ia-conversation-meta-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.ia-unread-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

.ia-conversation-phone,
.ia-conversation-time,
.ia-conversation-preview,
.ia-conversation-status,
.ia-conversation-count,
.ia-chat-meta,
.ia-message-time,
.ia-message-event{
  color: var(--cfg-muted);
}

.ia-conversation-item.has-unread .ia-conversation-preview{
  color: inherit;
  font-weight: 600;
}

.ia-conversation-item.has-unread .ia-conversation-time{
  color: #16a34a;
  font-weight: 700;
}

.ia-conversation-phone{
  font-size: 12px;
  margin-top: 4px;
}

.ia-conversation-time{
  text-align: right;
  font-size: 11px;
  white-space: nowrap;
}

.ia-conversation-preview{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
}

.ia-conversation-item-bottom{
  margin-top: 10px;
}

.ia-conversation-status,
.ia-conversation-count{
  font-size: 11px;
}

.ia-chat-panel{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.ia-chat-empty{
  color: var(--cfg-muted);
  margin-top: 8px;
}

.ia-chat-header{
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ia-chat-title{
  font-size: 18px;
}

.ia-chat-meta{
  margin-top: 6px;
}

.ia-human-alert{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--ia-human-background);
  border: 1px solid var(--ia-human-border);
  color: var(--ia-human-text);
  font-size: 13px;
}

.ia-chat-last-activity{
  margin-top: 12px;
  color: var(--cfg-muted);
  font-size: 12px;
}

.ia-chat-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ia-chat-messages{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 18px;
  padding-right: 6px;
  padding-bottom: 18px;
}

.ia-message-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ia-message-empty{
  color: var(--cfg-muted);
}

.ia-message{
  max-width: 820px;
  border-radius: 14px;
  padding: 12px 14px;
}

.ia-message--cliente{
  align-self: flex-start;
  background: var(--ia-client-background);
  border: 1px solid var(--ia-client-border);
}

.ia-message--resposta{
  align-self: flex-end;
  background: var(--ia-response-background);
  border: 1px solid var(--ia-response-border);
}

.ia-message-header{
  margin-bottom: 8px;
}

.ia-message-time,
.ia-message-event{
  font-size: 11px;
}

.ia-message-body{
  white-space: pre-wrap;
  line-height: 1.55;
}

.ia-message-event{
  margin-top: 8px;
}

.ia-chat-composer{
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
  padding-bottom: 4px;
  background: var(--panel-background);
  flex-shrink: 0;
}

.ia-chat-composer-row{
  display: flex;
  gap: 10px;
  align-items: end;
}

.ia-message-input{
  flex: 1;
  resize: none;
  min-height: 56px;
  max-height: 120px;
}

@media (max-width: 980px){
  .ia-summary-grid{
    grid-template-columns: 1fr;
  }

  .ia-workspace{
    grid-template-columns: 1fr;
  }

  .ia-conversation-panel,
  .ia-chat-panel{
    height: auto;
    min-height: 680px;
  }
}

@media (max-width: 640px){
  .ia-chat-composer-row{
    flex-direction: column;
    align-items: stretch;
  }

  .ia-chat-composer-row .btn{
    width: 100%;
  }
}

/* MOBILE */
@media (max-width: 980px){
  .topbar-inner{
    gap: 10px;
    padding: 12px 14px;
  }

  .brand{
    gap: 10px;
  }

  .brand-logo{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .brand-title{
    font-size: 16px;
    line-height: 1.1;
  }

  .brand-subtitle{
    font-size: 11px;
    line-height: 1.2;
  }

  .topbar-actions{
    gap: 8px;
  }

  .topbar-actions .btn{
    padding: 8px 10px;
    font-size: 13px;
  }

  .body{
    grid-template-columns: 1fr;
  }

  .menu{
    display:none;
  }

.menu.mobile-open{
  display:block !important;
  position: fixed;
  top: 67px;
  left: 0;
  right: 0;
  width: 100vw;
  height: calc(100vh - 67px);
  padding: 14px;
  background: var(--menu-mobile-background);
  border-right: none;
  z-index: 9999;
  overflow-y: auto;
  overscroll-behavior: contain;
}

  .menu.mobile-open .menu-nav{
    width: 100%;
  }

  .content{
    padding: 14px 14px 28px;
  }

  .cards{
    grid-template-columns: 1fr;
  }
}

/* MOBILE PEQUENO */
@media (max-width: 640px){
  .topbar-inner{
    align-items: flex-start;
  }

  .brand{
    flex: 1 1 auto;
  }

  .topbar-actions{
    flex-direction: row;
    align-items: center;
  }

  .topbar-actions .btn{
    min-height: 42px;
  }
}

/* DESKTOP - MENU RECOLHIDO */
@media (min-width: 981px){
  .app.menu-collapsed .body{
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .app.menu-collapsed .menu{
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 12px 8px;
    overflow: hidden;
  }

  .app.menu-collapsed .menu-nav{
    width: 100%;
  }

  .app.menu-collapsed .menu-title{
    display: none;
  }

  .app.menu-collapsed .menu-section:nth-child(2),
  .app.menu-collapsed .menu-section:nth-child(3),
  .app.menu-collapsed #btn-submenu-visualizar-telas,
  .app.menu-collapsed #submenu-visualizar-telas{
    display: none !important;
  }

  .app.menu-collapsed .menu a,
  .app.menu-collapsed .menu button{
    width: 54px;
    height: 44px;
    padding: 0;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    position: relative;
  }

  .app.menu-collapsed .menu a::before,
  .app.menu-collapsed .menu button::before{
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
  }

  .app.menu-collapsed .menu a[href*="controller=pedidos&action=novo"]::before{
    content: "➕";
  }

  .app.menu-collapsed .menu a[href*="controller=pedidos&action=index"]::before{
    content: "📋";
  }

  .app.menu-collapsed .menu a[href*="controller=cardapio&action=index"]::before{
    content: "🍕";
  }

  .app.menu-collapsed .menu a[href*="controller=configuracao&action=index"]::before{
    content: "⚙️";
  }

  .app.menu-collapsed .menu a[href*="controller=turno&action=verCaixa"]::before{
    content: "💰";
  }

  .app.menu-collapsed .menu a[href*="controller=mesas&action=index"]::before{
    content: "🪑";
  }

  .app.menu-collapsed .menu a[href*="controller=entregadores&action=index"]::before{
    content: "🛵";
  }

  .app.menu-collapsed .menu a[href*="controller=despacho&action=index"]::before{
    content: "🚚";
  }
}

/* =========================================================
   PEDIDOS — LISTA PRINCIPAL E FILTROS
   FASE 1: resumo, filtros e cards recriados pelo JavaScript
   ========================================================= */

:root{
  --pedidos-resumo-bg: rgba(15,23,42,.35);
  --pedidos-filtros-bg: rgba(15,23,42,.35);
  --pedidos-field-bg: rgba(15,23,42,.55);
  --pedidos-field-disabled-bg: rgba(15,23,42,.35);

  --pedidos-card-bg: rgba(15,23,42,.55);
  --pedidos-card-border: rgba(255,255,255,.08);
  --pedidos-card-hover-bg: rgba(255,255,255,.05);
}

html[data-theme="claro"]{
  --pedidos-resumo-bg: rgba(255,255,255,.92);
  --pedidos-filtros-bg: rgba(255,255,255,.88);
  --pedidos-field-bg: #ffffff;
  --pedidos-field-disabled-bg: #e2e8f0;

  --pedidos-card-bg: rgba(255,255,255,.96);
  --pedidos-card-border: rgba(15,23,42,.16);
  --pedidos-card-hover-bg: rgba(15,23,42,.03);
}

/* Os cinco indicadores do topo. */
#pedidosResumo > div{
  background: var(--pedidos-resumo-bg) !important;
  border-color: var(--border) !important;
}

/* Área que contém os filtros. */
#pedidosFiltros{
  background: var(--pedidos-filtros-bg) !important;
  border-color: var(--border) !important;
}

/* Campos de filtro da página de pedidos. */
#buscaNome,
#buscaTelefone,
#filtroTipo,
#filtroData{
  background: var(--pedidos-field-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

#buscaNome::placeholder,
#buscaTelefone::placeholder{
  color: var(--muted) !important;
  opacity: 1;
}

#filtroTipo option{
  background: var(--pedidos-field-bg);
  color: var(--text);
}

/* Campo Nº Mesa continua desativado, mas fica legível. */
#filtroMesa{
  background: var(--pedidos-field-disabled-bg) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/*
  Os cards recebem data-pedido-id pelo JavaScript.
  Esta regra é aplicada inclusive após a atualização automática.
*/
#listaPedidos > [data-pedido-id]{
  background: var(--pedidos-card-bg) !important;
  border-color: var(--pedidos-card-border) !important;
  transition:
    background .15s ease,
    transform .15s ease,
    filter .15s ease;
}

#listaPedidos > [data-pedido-id]:hover{
  background: var(--pedidos-card-hover-bg) !important;
  transform: translateY(-1px);
}

@media (max-width: 980px){
  #pedidosResumo{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #pedidosFiltros > div{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   PEDIDOS — MODAL DE DETALHES
   FASE 2: modal de pedido, itens, timeline e pagamentos
   ========================================================= */

:root{
  --pedidos-modal-overlay-bg: rgba(2,6,23,.72);
  --pedidos-modal-bg: #0f172a;
  --pedidos-modal-surface-bg: rgba(15,23,42,.42);
  --pedidos-modal-soft-bg: rgba(255,255,255,.03);
  --pedidos-modal-table-head-bg: rgba(255,255,255,.04);
  --pedidos-modal-items-bg: rgba(15,23,42,.20);
  --pedidos-modal-border: rgba(255,255,255,.10);
  --pedidos-modal-icon-bg: rgba(255,255,255,.08);
}

html[data-theme="claro"]{
  --pedidos-modal-overlay-bg: rgba(15,23,42,.52);
  --pedidos-modal-bg: #ffffff;
  --pedidos-modal-surface-bg: #ffffff;
  --pedidos-modal-soft-bg: #f8fafc;
  --pedidos-modal-table-head-bg: #f1f5f9;
  --pedidos-modal-items-bg: #ffffff;
  --pedidos-modal-border: rgba(15,23,42,.16);
  --pedidos-modal-icon-bg: #e2e8f0;
}

/* Fundo que escurece a tela atrás do modal. */
#pedidoModalOverlay{
  background: var(--pedidos-modal-overlay-bg) !important;
}

/* Caixa principal do modal. */
#pedidoModalBox{
  background: var(--pedidos-modal-bg) !important;
  color: var(--text) !important;
  border-color: var(--pedidos-modal-border) !important;
}

/* Cabeçalho do modal. */
#pedidoModalBox > div:first-child{
  border-bottom-color: var(--pedidos-modal-border) !important;
}

/* Ícone redondo do operador. */
#pedidoModalBox > div:first-child > div:first-child > div:first-child{
  background: var(--pedidos-modal-icon-bg) !important;
}

/* Os dois painéis grandes: esquerda e direita. */
#pedidoModalConteudo > div{
  background: var(--pedidos-modal-surface-bg) !important;
  border-color: var(--pedidos-modal-border) !important;
}

/* Tabela/lista de itens do pedido. */
#pmTituloItens + div{
  border-color: var(--pedidos-modal-border) !important;
}

#pmTituloItens + div > div:first-child{
  background: var(--pedidos-modal-table-head-bg) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--pedidos-modal-border) !important;
}

#pmListaItens{
  background: var(--pedidos-modal-items-bg) !important;
}

/* Cada item carregado pelo JavaScript. */
#pmListaItens > div{
  background: var(--pedidos-modal-soft-bg) !important;
  border-color: var(--pedidos-modal-border) !important;
}

/* Linha de totais: subtotal, entrega, desconto e total. */
#pmTituloItens + div + div{
  border-top-color: var(--pedidos-modal-border) !important;
}

#pmTituloItens + div + div > div:last-child{
  border-top-color: var(--pedidos-modal-border) !important;
}

/* Select de status e select de forma de pagamento. */
#pmStatusSelect,
#pmFormaPagamentoSelect{
  background: var(--pedidos-modal-soft-bg) !important;
  color: var(--text) !important;
  border-color: var(--pedidos-modal-border) !important;
}

#pmStatusSelect option,
#pmFormaPagamentoSelect option{
  background: var(--pedidos-modal-bg);
  color: var(--text);
}

/* Cartões da linha do tempo. */
#pmTimeline > div > div:first-child{
  background: var(--pedidos-modal-soft-bg) !important;
  border-color: var(--pedidos-modal-border) !important;
}

/* Aviso de pagamento e lista de pagamentos. */
#pmPagamentoInfo,
#pmListaPagamentos,
#pmAvisos{
  background: var(--pedidos-modal-soft-bg) !important;
  border-color: var(--pedidos-modal-border) !important;
}

/* Pagamentos adicionados pelo JavaScript. */
#pmListaPagamentos > div{
  background: var(--pedidos-modal-bg) !important;
  border-color: var(--pedidos-modal-border) !important;
}

/* Mensagem de carregamento e mensagens vazias. */
#pedidoModalLoading,
#pmListaItens,
#pmListaPagamentos,
#pmTimeline{
  color: var(--text);
}

@media (max-width: 900px){
  #pedidoModalConteudo{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   DESPACHO — PAINEL, GRUPOS E GAVETAS LATERAIS
   Esta camada visual é isolada em #despachoPagina.
   Ela não altera rotas, formulários, IDs nem JavaScript.
   ========================================================= */

:root{
  --despacho-surface: rgba(15,23,42,.35);
  --despacho-surface-strong: rgba(15,23,42,.55);
  --despacho-soft-surface: rgba(255,255,255,.03);
  --despacho-field-bg: rgba(15,23,42,.55);
  --despacho-drawer-bg: #0f172a;
  --despacho-border: rgba(255,255,255,.10);
  --despacho-soft-border: rgba(255,255,255,.08);
  --despacho-tile-inset: rgba(255,255,255,.06);

  --despacho-success-bg: rgba(34,197,94,.12);
  --despacho-success-border: #14532d;
  --despacho-success-text: #86efac;

  --despacho-error-bg: rgba(220,38,38,.12);
  --despacho-error-border: #7f1d1d;
  --despacho-error-text: #fca5a5;

  --despacho-ifood-text: #ffffff;
  --despacho-ifood-border: #ef4444;
}

html[data-theme="claro"]{
  --despacho-surface: rgba(255,255,255,.94);
  --despacho-surface-strong: #f8fafc;
  --despacho-soft-surface: #f8fafc;
  --despacho-field-bg: #ffffff;
  --despacho-drawer-bg: #ffffff;
  --despacho-border: rgba(15,23,42,.16);
  --despacho-soft-border: rgba(15,23,42,.12);
  --despacho-tile-inset: rgba(15,23,42,.06);

  --despacho-success-bg: #ecfdf5;
  --despacho-success-border: rgba(22,163,74,.42);
  --despacho-success-text: #166534;

  --despacho-error-bg: #fff1f2;
  --despacho-error-border: rgba(220,38,38,.40);
  --despacho-error-text: #b91c1c;

  --despacho-ifood-text: #dc2626;
  --despacho-ifood-border: #ef4444;
}

#despachoPagina{
  color: var(--text);
}

#despachoPagina .despacho-alert{
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
}

#despachoPagina .despacho-alert--success{
  background: var(--despacho-success-bg);
  border-color: var(--despacho-success-border);
  color: var(--despacho-success-text);
}

#despachoPagina .despacho-alert--error{
  background: var(--despacho-error-bg);
  border-color: var(--despacho-error-border);
  color: var(--despacho-error-text);
}

/* Barra superior: filtros e botão de pedido iFood. */
#despachoPagina .despacho-toolbar > .despacho-filtros > summary{
  background: var(--despacho-surface-strong) !important;
  border-color: var(--despacho-border) !important;
  color: var(--text) !important;
}

#despachoPagina .despacho-toolbar > .despacho-filtros > div{
  background: var(--despacho-surface) !important;
  border-color: var(--despacho-border) !important;
}

#btnAbrirPainelIfood{
  color: var(--despacho-ifood-text) !important;
  border-color: var(--despacho-ifood-border) !important;
}

/* Superfícies antigas com estilo escrito dentro da própria view. */
#despachoPagina [style*="background:rgba(15,23,42,.35)"]{
  background: var(--despacho-surface) !important;
}

#despachoPagina [style*="background:rgba(15,23,42,.45)"],
#despachoPagina [style*="background:rgba(15,23,42,.55)"]{
  background: var(--despacho-surface-strong) !important;
}

#despachoPagina [style*="background:rgba(255,255,255,.03)"]{
  background: var(--despacho-soft-surface) !important;
}

#despachoPagina [style*="border:1px solid rgba(255,255,255,.08)"],
#despachoPagina [style*="border:1px solid rgba(255,255,255,.10)"],
#despachoPagina [style*="border:1px solid rgba(255,255,255,.06)"]{
  border-color: var(--despacho-soft-border) !important;
}

#despachoPagina [style*="box-shadow:0 0 0 1px rgba(255,255,255,.06) inset"]{
  box-shadow: inset 0 0 0 1px var(--despacho-tile-inset) !important;
}

/* Cartões numéricos de pedidos e grupos. Mantém a borda colorida do status. */
#despachoPagina [style*="width:56px"]{
  background: var(--despacho-surface-strong) !important;
}

/* Campos da página e das gavetas laterais. */
#despachoPagina input:not([type="checkbox"]):not([type="radio"]),
#despachoPagina select{
  background: var(--despacho-field-bg) !important;
  color: var(--text) !important;
  border-color: var(--despacho-border) !important;
}

#despachoPagina input::placeholder{
  color: var(--muted) !important;
  opacity: 1;
}

#despachoPagina select option{
  background: var(--despacho-field-bg);
  color: var(--text);
}

/* Gavetas abertas ao visualizar grupo, pedido ou criar iFood. */
#despachoPagina .despacho-drawer{
  background: var(--despacho-drawer-bg) !important;
  border-left-color: var(--despacho-border) !important;
  color: var(--text) !important;
}

#despachoPagina .despacho-drawer a[style*="width:36px"]{
  border-color: var(--despacho-border) !important;
  color: var(--text) !important;
}

#despachoPagina .despacho-drawer button[style*="background:#22c55e"]{
  background: #22c55e !important;
  color: #ffffff !important;
}

#despachoPagina .despacho-drawer button[style*="background:#ef4444"],
#despachoPagina .despacho-drawer button[style*="background:#ea1d2c"]{
  color: #ffffff !important;
}

/* Teclas vermelhas: melhora a leitura no tema claro. */
html[data-theme="claro"] #despachoPagina [style*="color:#fca5a5"]{
  color: #b91c1c !important;
}

/* Avisos de pagamento e remoção de pedido. */
html[data-theme="claro"] #despachoPagina [style*="color:#fde68a"]{
  color: #92400e !important;
}

/* Ajuste de foco de teclado para a operação rápida. */
#despachoPagina button:focus-visible,
#despachoPagina a:focus-visible,
#despachoPagina input:focus-visible,
#despachoPagina select:focus-visible{
  outline: 3px solid rgba(251,146,60,.35);
  outline-offset: 2px;
}

/* =========================================================
   DESPACHO — GRUPO EM CRIAÇÃO
   Correção específica do painel que aparece quando pedidos
   são marcados para criar um grupo preparado.
   ========================================================= */

#grupoEmCriacaoBox{
  background: var(--despacho-surface) !important;
  border-color: var(--despacho-border) !important;
}

#grupoEmCriacaoBox > div:first-child{
  color: var(--muted) !important;
}

#grupoEmCriacaoPedidos > div{
  background: var(--despacho-surface-strong) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px var(--despacho-tile-inset) !important;
}

/* =========================================================
   STATUS — CAIXA E ENTREGADORES
   Etiquetas visuais centralizadas para aberto, fechado,
   pago total e pendente.
   ========================================================= */

:root{
  --status-turno-aberto-bg: rgba(34,197,94,.16);
  --status-turno-aberto-border: rgba(34,197,94,.42);
  --status-turno-aberto-text: #bbf7d0;

  --status-turno-fechado-bg: rgba(239,68,68,.16);
  --status-turno-fechado-border: rgba(239,68,68,.42);
  --status-turno-fechado-text: #fecaca;

  --status-financeiro-pago-bg: rgba(34,197,94,.14);
  --status-financeiro-pago-border: rgba(34,197,94,.38);
  --status-financeiro-pago-text: #bbf7d0;

  --status-financeiro-pendente-bg: rgba(245,158,11,.16);
  --status-financeiro-pendente-border: rgba(245,158,11,.42);
  --status-financeiro-pendente-text: #fde68a;
}

html[data-theme="claro"]{
  --status-turno-aberto-bg: #dcfce7;
  --status-turno-aberto-border: #86efac;
  --status-turno-aberto-text: #166534;

  --status-turno-fechado-bg: #fff1f2;
  --status-turno-fechado-border: #fda4af;
  --status-turno-fechado-text: #b91c1c;

  --status-financeiro-pago-bg: #dcfce7;
  --status-financeiro-pago-border: #86efac;
  --status-financeiro-pago-text: #166534;

  --status-financeiro-pendente-bg: #fef3c7;
  --status-financeiro-pendente-border: #fbbf24;
  --status-financeiro-pendente-text: #92400e;
}

.turno-status-badge,
.entregador-financeiro-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.turno-status-badge--aberto{
  background: var(--status-turno-aberto-bg);
  border-color: var(--status-turno-aberto-border);
  color: var(--status-turno-aberto-text);
}

.turno-status-badge--fechado{
  background: var(--status-turno-fechado-bg);
  border-color: var(--status-turno-fechado-border);
  color: var(--status-turno-fechado-text);
}

.entregador-financeiro-badge--pago{
  background: var(--status-financeiro-pago-bg);
  border-color: var(--status-financeiro-pago-border);
  color: var(--status-financeiro-pago-text);
}

.entregador-financeiro-badge--pendente{
  background: var(--status-financeiro-pendente-bg);
  border-color: var(--status-financeiro-pendente-border);
  color: var(--status-financeiro-pendente-text);
}

/* =========================================================
   ASSINATURA — STATUS DA CONTA
   Etiquetas de situação da assinatura centralizadas por tema.
   ========================================================= */

:root{
  --assinatura-info-bg: rgba(59,130,246,.12);
  --assinatura-info-border: rgba(59,130,246,.36);
  --assinatura-info-text: #bfdbfe;

  --assinatura-teste-bg: rgba(59,130,246,.16);
  --assinatura-teste-border: rgba(96,165,250,.48);
  --assinatura-teste-text: #dbeafe;

  --assinatura-ativo-bg: rgba(34,197,94,.14);
  --assinatura-ativo-border: rgba(34,197,94,.38);
  --assinatura-ativo-text: #bbf7d0;

  --assinatura-atrasado-bg: rgba(245,158,11,.16);
  --assinatura-atrasado-border: rgba(245,158,11,.42);
  --assinatura-atrasado-text: #fde68a;

  --assinatura-problema-bg: rgba(239,68,68,.16);
  --assinatura-problema-border: rgba(239,68,68,.42);
  --assinatura-problema-text: #fecaca;
}

html[data-theme="claro"]{
  --assinatura-info-bg: #dbeafe;
  --assinatura-info-border: #93c5fd;
  --assinatura-info-text: #1d4ed8;

  --assinatura-teste-bg: #dbeafe;
  --assinatura-teste-border: #60a5fa;
  --assinatura-teste-text: #1d4ed8;

  --assinatura-ativo-bg: #dcfce7;
  --assinatura-ativo-border: #86efac;
  --assinatura-ativo-text: #166534;

  --assinatura-atrasado-bg: #fef3c7;
  --assinatura-atrasado-border: #fbbf24;
  --assinatura-atrasado-text: #92400e;

  --assinatura-problema-bg: #fff1f2;
  --assinatura-problema-border: #fda4af;
  --assinatura-problema-text: #b91c1c;
}

.assinatura-status-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}

.assinatura-status-badge--info{
  background:var(--assinatura-info-bg);
  border-color:var(--assinatura-info-border);
  color:var(--assinatura-info-text);
}

.assinatura-status-badge--teste{
  background:var(--assinatura-teste-bg);
  border-color:var(--assinatura-teste-border);
  color:var(--assinatura-teste-text);
}

.assinatura-status-badge--ativo{
  background:var(--assinatura-ativo-bg);
  border-color:var(--assinatura-ativo-border);
  color:var(--assinatura-ativo-text);
}

.assinatura-status-badge--atrasado{
  background:var(--assinatura-atrasado-bg);
  border-color:var(--assinatura-atrasado-border);
  color:var(--assinatura-atrasado-text);
}

.assinatura-status-badge--problema{
  background:var(--assinatura-problema-bg);
  border-color:var(--assinatura-problema-border);
  color:var(--assinatura-problema-text);
}

/* =========================================================
   PEDIDOS — ETAPA 2 (ITENS)
   Correção visual exclusiva do tema claro.

   Segurança:
   - Não altera JavaScript.
   - Não altera IDs, rotas, cálculos ou pagamentos.
   - Não altera o tema escuro.
   - Atua somente na tela de itens e nos modais usados por ela.
   ========================================================= */

html[data-theme="claro"]{
  --itens-surface: #ffffff;
  --itens-surface-soft: #f8fafc;
  --itens-surface-muted: #f1f5f9;
  --itens-border: rgba(15,23,42,.16);
  --itens-border-soft: rgba(15,23,42,.12);
  --itens-shadow: 0 12px 28px rgba(15,23,42,.10);
  --itens-overlay: rgba(15,23,42,.52);
  --itens-success-text: #166534;
  --itens-warning-text: #9a3412;
}

/* ---------------------------------------------------------
   ÁREA PRINCIPAL: catálogo, resumo e itens do pedido
   --------------------------------------------------------- */

html[data-theme="claro"] #paginaItensPedido{
  color: var(--text);
}

html[data-theme="claro"] #paginaItensPedido > div:nth-child(2) > div:first-child,
html[data-theme="claro"] #paginaItensPedido > div:nth-child(2) > div:nth-child(2) > div:first-child,
html[data-theme="claro"] #cardItensPedido{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  box-shadow: var(--itens-shadow);
}

/* Textos antigos escuros que ficavam invisíveis no modo escuro
   e não seguem o padrão do sistema. */
#paginaItensPedido [style*="color:#111"]{
  color: var(--text) !important;
}

#paginaItensPedido [style*="color:#555"],
#paginaItensPedido [style*="color:#666"]{
  color: var(--muted) !important;
}

/* Linhas separadoras internas da tela. */
#paginaItensPedido #painelPizza,
#paginaItensPedido #painelCategoria{
  border-top-color: var(--border) !important;
}

/* ---------------------------------------------------------
   FUNDOS ESCUROS ANTIGOS DENTRO DA PÁGINA
   Funciona tanto para HTML fixo como para cartões criados
   pelo JavaScript durante a montagem do pedido.
   --------------------------------------------------------- */

html[data-theme="claro"] #paginaItensPedido [style*="background: rgba(15,23,42"],
html[data-theme="claro"] #paginaItensPedido [style*="background:rgba(15,23,42"],
html[data-theme="claro"] #paginaItensPedido [style*="background: rgba(15, 23, 42"],
html[data-theme="claro"] #paginaItensPedido [style*="background: rgba(2,6,23"],
html[data-theme="claro"] #paginaItensPedido [style*="background:rgba(2,6,23"],
html[data-theme="claro"] #paginaItensPedido [style*="background: rgba(2, 6, 23"]{
  background: var(--itens-surface-soft) !important;
}

/* Painéis principais ficam brancos, para separar melhor as áreas. */
html[data-theme="claro"] #paginaItensPedido > div:nth-child(2) > div:first-child,
html[data-theme="claro"] #paginaItensPedido > div:nth-child(2) > div:nth-child(2) > div:first-child,
html[data-theme="claro"] #cardItensPedido{
  background: var(--itens-surface) !important;
}

/* Cartões de sabores, produtos e itens do pedido. */
html[data-theme="claro"] #gridSabores > div,
html[data-theme="claro"] #gridProdutos > div,
html[data-theme="claro"] #listaItens > div{
  border-color: var(--itens-border) !important;
}

/* Apenas cartões neutros recebem fundo claro.
   Os cartões verdes e laranjas selecionados continuam coloridos. */
html[data-theme="claro"] #gridSabores > div[style*="rgba(15"],
html[data-theme="claro"] #gridSabores > div[style*="rgba(2"],
html[data-theme="claro"] #gridProdutos > div,
html[data-theme="claro"] #listaItens > div{
  background: var(--itens-surface-soft) !important;
}

/* Cartão de sabor selecionado continua verde e legível. */
html[data-theme="claro"] #gridSabores > div[style*="rgba(34"],
html[data-theme="claro"] #gridSabores > div[style*="rgba(34, 197"]{
  color: var(--itens-success-text) !important;
}

/* Cartão de sabor marcado para troca continua laranja e legível. */
html[data-theme="claro"] #gridSabores > div[style*="rgba(251"],
html[data-theme="claro"] #gridSabores > div[style*="rgba(251, 146"]{
  color: var(--itens-warning-text) !important;
}

/* O nome do tamanho da pizza era branco e pode ficar apagado
   quando o tema claro está ativo. */
html[data-theme="claro"] #pizzaTamanhoNome{
  color: var(--itens-warning-text) !important;
}

/* ---------------------------------------------------------
   BORDAS ANTIGAS BRANCAS
   --------------------------------------------------------- */

html[data-theme="claro"] #paginaItensPedido [style*="border:1px solid rgba(255"],
html[data-theme="claro"] #paginaItensPedido [style*="border: 1px solid rgba(255"],
html[data-theme="claro"] #paginaItensPedido [style*="border-color: rgba(255"],
html[data-theme="claro"] #paginaItensPedido [style*="border-color:rgba(255"]{
  border-color: var(--itens-border-soft) !important;
}

/* ---------------------------------------------------------
   CAMPOS: desconto, pagamento, troco e edição de endereço
   --------------------------------------------------------- */

html[data-theme="claro"] #paginaItensPedido input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="claro"] #paginaItensPedido select,
html[data-theme="claro"] #paginaItensPedido textarea{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  color: var(--text) !important;
}

html[data-theme="claro"] #paginaItensPedido input::placeholder,
html[data-theme="claro"] #paginaItensPedido textarea::placeholder{
  color: var(--muted) !important;
  opacity: 1;
}

html[data-theme="claro"] #paginaItensPedido select option{
  background: var(--itens-surface);
  color: var(--text);
}

html[data-theme="claro"] #menuTipoPedido{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  box-shadow: var(--itens-shadow) !important;
}

html[data-theme="claro"] #menuTipoPedido button:hover{
  background: var(--itens-surface-muted) !important;
}

/* ---------------------------------------------------------
   BARRA FIXA INFERIOR: adicionar, total e finalização
   --------------------------------------------------------- */

html[data-theme="claro"] #barraFixaPedidoDesktop{
  background: rgba(255,255,255,.96) !important;
  border-color: var(--itens-border) !important;
  box-shadow: 0 -8px 22px rgba(15,23,42,.14) !important;
}

html[data-theme="claro"] #barraFixaPedidoFinalizacao{
  border-left-color: var(--itens-border) !important;
}

html[data-theme="claro"] #pizzaQtd,
html[data-theme="claro"] #inpSenhaConcluir{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  color: var(--text) !important;
}

html[data-theme="claro"] #btnConcluirPedido{
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

html[data-theme="claro"] #barraFixaPedidoFinalizacao #btnDescartarPedido{
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   TOAST E LOADER DE FINALIZAÇÃO
   --------------------------------------------------------- */

html[data-theme="claro"] #toastItemAdicionado{
  background: #fff7ed !important;
  border-color: #fb923c !important;
  color: #9a3412 !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.18) !important;
}

html[data-theme="claro"] #overlayLoaderConclusaoPedido{
  background: var(--itens-overlay) !important;
}

html[data-theme="claro"] #overlayLoaderConclusaoPedido > div{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  box-shadow: var(--itens-shadow) !important;
}

html[data-theme="claro"] #spinnerConclusaoPedido{
  border-color: rgba(15,23,42,.14) !important;
  border-top-color: #ea580c !important;
  border-right-color: rgba(234,88,12,.52) !important;
}

/* ---------------------------------------------------------
   MODAL: PERSONALIZAR PIZZA / ITEM
   Inclui ingredientes, adicionais, borda e massa.
   --------------------------------------------------------- */

html[data-theme="claro"] #modalPizzaNovo{
  background: var(--itens-overlay) !important;
}

html[data-theme="claro"] #modalPizzaNovo > div:first-child{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.20) !important;
}

html[data-theme="claro"] #modalPizzaNovo [style*="background: rgba(15,23,42"],
html[data-theme="claro"] #modalPizzaNovo [style*="background:rgba(15,23,42"],
html[data-theme="claro"] #modalPizzaNovo [style*="background: rgba(15, 23, 42"],
html[data-theme="claro"] #modalPizzaNovo [style*="background: rgba(2,6,23"],
html[data-theme="claro"] #modalPizzaNovo [style*="background:rgba(2,6,23"],
html[data-theme="claro"] #modalPizzaNovo [style*="background: rgba(2, 6, 23"]{
  background: var(--itens-surface-soft) !important;
}

html[data-theme="claro"] #modalPizzaNovo [style*="border:1px solid rgba(255"],
html[data-theme="claro"] #modalPizzaNovo [style*="border: 1px solid rgba(255"],
html[data-theme="claro"] #modalPizzaNovo [style*="border-color: rgba(255"],
html[data-theme="claro"] #modalPizzaNovo [style*="border-color:rgba(255"]{
  border-color: var(--itens-border-soft) !important;
}

html[data-theme="claro"] #modalPizzaNovo input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="claro"] #modalPizzaNovo textarea,
html[data-theme="claro"] #modalPizzaNovo select{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  color: var(--text) !important;
}

html[data-theme="claro"] #modalPizzaNovo input::placeholder,
html[data-theme="claro"] #modalPizzaNovo textarea::placeholder{
  color: var(--muted) !important;
  opacity: 1;
}

/* Tela cheia de adicionais aberta por “+ Adicionar ingredientes”. */
html[data-theme="claro"] #telaAdicionaisFull{
  background: var(--itens-surface) !important;
  border: 1px solid var(--itens-border) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.22) !important;
}

html[data-theme="claro"] #telaAdicionaisFull [style*="background: rgba(15,23,42"],
html[data-theme="claro"] #telaAdicionaisFull [style*="background:rgba(15,23,42"],
html[data-theme="claro"] #telaAdicionaisFull [style*="background: rgba(15, 23, 42"],
html[data-theme="claro"] #telaAdicionaisFull [style*="background: rgba(2,6,23"],
html[data-theme="claro"] #telaAdicionaisFull [style*="background:rgba(2,6,23"],
html[data-theme="claro"] #telaAdicionaisFull [style*="background: rgba(2, 6, 23"]{
  background: var(--itens-surface-soft) !important;
}

html[data-theme="claro"] #telaAdicionaisFull [style*="border:1px solid rgba(255"],
html[data-theme="claro"] #telaAdicionaisFull [style*="border: 1px solid rgba(255"]{
  border-color: var(--itens-border-soft) !important;
}

/* Quantidades de adicionais escolhidos ficam escuras e legíveis. */
html[data-theme="claro"] #modalPizzaNovo [data-qtd],
html[data-theme="claro"] #listaAdicionaisFull > div > div:last-child > div:nth-child(2){
  color: var(--itens-success-text) !important;
}

/* ---------------------------------------------------------
   MODAIS AUXILIARES: troca de tipo e taxa de bairro
   --------------------------------------------------------- */

html[data-theme="claro"] #modalTrocaTipoPedido,
html[data-theme="claro"] #modalBairroTaxaTrocaTipo{
  background: var(--itens-overlay) !important;
}

html[data-theme="claro"] #modalTrocaTipoPedido > div,
html[data-theme="claro"] #modalBairroTaxaTrocaTipo > div{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  box-shadow: var(--itens-shadow) !important;
}

html[data-theme="claro"] #modalTrocaTipoPedido [style*="background: rgba(15,23,42"],
html[data-theme="claro"] #modalTrocaTipoPedido [style*="background:rgba(15,23,42"],
html[data-theme="claro"] #modalTrocaTipoPedido [style*="background: rgba(15, 23, 42"],
html[data-theme="claro"] #modalTrocaTipoPedido [style*="background: rgba(2,6,23"],
html[data-theme="claro"] #modalTrocaTipoPedido [style*="background:rgba(2,6,23"],
html[data-theme="claro"] #modalTrocaTipoPedido [style*="background: rgba(2, 6, 23"],
html[data-theme="claro"] #modalBairroTaxaTrocaTipo [style*="background: rgba(15,23,42"],
html[data-theme="claro"] #modalBairroTaxaTrocaTipo [style*="background:rgba(15,23,42"],
html[data-theme="claro"] #modalBairroTaxaTrocaTipo [style*="background: rgba(15, 23, 42"]{
  background: var(--itens-surface-soft) !important;
}

html[data-theme="claro"] #modalTrocaTipoPedido input,
html[data-theme="claro"] #modalBairroTaxaTrocaTipo input{
  background: var(--itens-surface) !important;
  border-color: var(--itens-border) !important;
  color: var(--text) !important;
}

/* Foco visível sem alterar funcionamento de teclado ou mouse. */
html[data-theme="claro"] #paginaItensPedido button:focus-visible,
html[data-theme="claro"] #paginaItensPedido input:focus-visible,
html[data-theme="claro"] #paginaItensPedido select:focus-visible,
html[data-theme="claro"] #paginaItensPedido textarea:focus-visible,
html[data-theme="claro"] #modalPizzaNovo button:focus-visible,
html[data-theme="claro"] #modalPizzaNovo input:focus-visible,
html[data-theme="claro"] #modalPizzaNovo textarea:focus-visible{
  outline: 3px solid rgba(234,88,12,.28);
  outline-offset: 2px;
}

/* =========================================================
   CARDÁPIO — TEMA CLARO CENTRALIZADO
   Esta camada visual atende todas as telas do cardápio:
   categorias, produtos, ingredientes, preços, tamanhos,
   bordas e massas.

   Segurança:
   - Não altera PHP, JavaScript, rotas, banco ou cálculos.
   - Não altera o tema escuro.
   - Só entra em ação quando a área principal contém uma
     tela cujo controller é "cardapio".
   ========================================================= */

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
){
  --cardapio-surface: #ffffff;
  --cardapio-surface-soft: #f8fafc;
  --cardapio-surface-muted: #f1f5f9;
  --cardapio-border: rgba(15,23,42,.16);
  --cardapio-border-soft: rgba(15,23,42,.12);
  --cardapio-shadow: 0 12px 28px rgba(15,23,42,.10);

  --cardapio-success-bg: #dcfce7;
  --cardapio-success-border: #86efac;
  --cardapio-success-text: #166534;

  --cardapio-warning-bg: #fef3c7;
  --cardapio-warning-border: #fbbf24;
  --cardapio-warning-text: #92400e;

  --cardapio-danger-bg: #fff1f2;
  --cardapio-danger-border: #fda4af;
  --cardapio-danger-text: #b91c1c;
}

/* Painéis e cartões principais. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) .panel,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) .card{
  background: var(--cardapio-surface) !important;
  border-color: var(--cardapio-border) !important;
  box-shadow: var(--cardapio-shadow);
}

/* Campos de formulário: texto, número, seletor e observação. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) select,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) textarea{
  background: var(--cardapio-surface) !important;
  border-color: var(--cardapio-border) !important;
  color: var(--text) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) input::placeholder,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) textarea::placeholder{
  color: var(--muted) !important;
  opacity: 1;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) select option{
  background: var(--cardapio-surface);
  color: var(--text);
}

/* Fundos antigos, escritos dentro das views. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(2,6,23"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background: rgba(2,6,23"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(15,23,42"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background: rgba(15,23,42"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(255,255,255,.06)"]{
  background: var(--cardapio-surface-soft) !important;
}

/* Destaques positivos, avisos e estados inativos. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(34,197,94"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background: rgba(34,197,94"]{
  background: var(--cardapio-success-bg) !important;
  border-color: var(--cardapio-success-border) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(245,158,11"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(250,204,21"]{
  background: var(--cardapio-warning-bg) !important;
  border-color: var(--cardapio-warning-border) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(239,68,68"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="background:rgba(127,29,29"]{
  background: var(--cardapio-danger-bg) !important;
  border-color: var(--cardapio-danger-border) !important;
}

/* Bordas antigas brancas ganham contraste adequado no tema claro. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="border:1px solid rgba(255"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="border: 1px solid rgba(255"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="border-color:rgba(255"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="border-color: rgba(255"]{
  border-color: var(--cardapio-border-soft) !important;
}

/* Textos antigos que eram claros demais no fundo branco. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color:#e5e7eb"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color: #e5e7eb"]{
  color: var(--text) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color:#94a3b8"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color: #94a3b8"]{
  color: var(--muted) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color:#bbf7d0"]{
  color: var(--cardapio-success-text) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color:#fde68a"]{
  color: var(--cardapio-warning-text) !important;
}

html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color:#fecaca"],
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) [style*="color:#fca5a5"]{
  color: var(--cardapio-danger-text) !important;
}

/* Foco visível para os campos operacionais do cardápio. */
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) button:focus-visible,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) a:focus-visible,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) input:focus-visible,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) select:focus-visible,
html[data-theme="claro"] .content:has(
  form[action*="controller=cardapio"],
  input[name="controller"][value="cardapio"]
) textarea:focus-visible{
  outline: 3px solid rgba(234,88,12,.28);
  outline-offset: 2px;
}

/* =========================================================
   IA ATENDIMENTO — PEDIDOS PARA REVISAR
   Tela operacional de conferência de pedidos criados pela IA.
   ========================================================= */

.ia-summary-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ia-summary-card-link{
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.ia-summary-card-link:hover{
  transform: translateY(-1px);
  border-color: rgba(251,146,60,.48);
  background: rgba(251,146,60,.08);
}

.ia-review-orders-panel{
  margin-bottom: 16px;
}

.ia-review-orders-header,
.ia-order-review-header,
.ia-review-order-card-top,
.ia-order-review-item,
.ia-order-review-totals > div{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ia-review-orders-header{
  margin-bottom: 14px;
}

.ia-review-orders-header h2,
.ia-order-review-header h2{
  margin: 0;
}

.ia-review-orders-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ia-review-order-card{
  display: block;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,.025);
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.ia-review-order-card:hover{
  transform: translateY(-1px);
  border-color: rgba(251,146,60,.48);
  background: rgba(251,146,60,.06);
}

.ia-review-order-number{
  font-size: 19px;
}

.ia-order-status{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--cfg-info-text);
  background: var(--cfg-info-bg);
  border: 1px solid var(--cfg-info-border);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.ia-order-status--pix{
  color: var(--ia-human-text);
  background: var(--ia-human-background);
  border-color: var(--ia-human-border);
}

.ia-review-order-client{
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
}

.ia-review-order-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--cfg-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ia-review-workspace{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  gap: 16px;
  height: clamp(500px, calc(100vh - 330px), 720px);
}

.ia-review-chat-panel,
.ia-order-review-panel{
  min-height: 0;
  height: 100%;
}

.ia-review-chat-panel{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.ia-review-conversation-missing{
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--ia-human-border);
  border-radius: 12px;
  color: var(--ia-human-text);
  background: var(--ia-human-background);
  line-height: 1.5;
}

.ia-order-review-panel{
  overflow-y: auto;
}

.ia-order-review-kicker{
  color: var(--cfg-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ia-order-review-status{
  margin-top: 7px;
  color: var(--cfg-muted);
  font-size: 13px;
}

.ia-order-review-total{
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
  text-align: right;
}

.ia-order-review-section{
  margin-top: 18px;
}

.ia-order-review-section > strong{
  display: block;
  margin-bottom: 7px;
}

.ia-order-review-items{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ia-order-review-item{
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.ia-order-review-item > strong{
  white-space: nowrap;
}

.ia-order-review-pix-alert{
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--ia-human-border);
  border-radius: 10px;
  color: var(--ia-human-text);
  background: var(--ia-human-background);
  font-size: 13px;
  line-height: 1.45;
}

.ia-order-review-totals{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.ia-order-review-totals > div{
  color: var(--cfg-muted);
  font-size: 13px;
}

.ia-order-review-totals > div > strong{
  color: var(--text);
}

.ia-order-review-totals-final{
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text) !important;
  font-size: 16px !important;
}

.ia-order-review-confirm-form{
  margin-top: 20px;
}

.ia-order-review-confirm-button{
  width: 100%;
  min-height: 46px;
}

@media (max-width: 980px){
  .ia-summary-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ia-review-workspace{
    grid-template-columns: 1fr;
    height: auto;
  }

  .ia-review-chat-panel,
  .ia-order-review-panel{
    height: auto;
    min-height: 680px;
  }
}

@media (max-width: 640px){
  .ia-summary-grid,
  .ia-review-orders-list{
    grid-template-columns: 1fr;
  }

  .ia-review-orders-header,
  .ia-order-review-header{
    flex-direction: column;
    align-items: stretch;
  }

  .ia-review-orders-header .btn{
    width: 100%;
  }
}

/* =========================================================
   TOPO E MENU — IDENTIDADE DA PIZZARIA E ASSINATURA PIZZALIKE
   ========================================================= */
.topbar-inner{
  justify-content: flex-start;
}

.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-left .brand{
  min-width: 0;
}

.brand--restaurante{
  gap: 10px;
}

.brand-logo--imagem{
  background: #ffffff;
  border-color: #dbe3ee;
  padding: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

.brand-logo--imagem img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo--inicial{
  color: #374151;
  font-weight: 800;
  font-size: 18px;
}

.topbar-left .brand-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions{
  margin-left: auto;
}

.menu{
  display: flex;
  flex-direction: column;
}

.menu-nav{
  flex: 0 0 auto;
}

.menu-pizzalike-assinatura{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 16px 6px 4px;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.menu-pizzalike-assinatura-logo{
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 38px;
}

.menu-pizzalike-assinatura-texto{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-pizzalike-assinatura-texto strong{
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
}

.menu-pizzalike-assinatura-texto span{
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

@media (max-width: 980px){
  .topbar-left{
    gap: 8px;
  }

  .topbar-left .brand{
    gap: 8px;
  }

  .menu.mobile-open{
    display: flex !important;
    flex-direction: column;
  }
}

@media (min-width: 981px){
  .app.menu-collapsed .menu-pizzalike-assinatura{
    justify-content: center;
    padding: 12px 0 2px;
  }

  .app.menu-collapsed .menu-pizzalike-assinatura-logo{
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .app.menu-collapsed .menu-pizzalike-assinatura-texto{
    display: none;
  }
}

/* =========================================================
   AJUSTE VISUAL 2 — LOGO MAIOR NO TOPO E ASSINATURA FIXA
   ========================================================= */
:root{
  --altura-topbar-pizzalike: 79px;
}

/* Logo do restaurante: mesmo estilo da loja pública, porém maior no painel. */
.topbar-left .brand-logo{
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-radius: 15px;
}

/* No computador, o menu fica preso abaixo da topbar.
   A assinatura Pizzalike permanece discreta no canto inferior esquerdo. */
@media (min-width: 981px){
  .menu{
    position: sticky;
    top: var(--altura-topbar-pizzalike);
    align-self: start;
    height: calc(100vh - var(--altura-topbar-pizzalike));
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .menu-pizzalike-assinatura{
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 12px;
    padding-bottom: 10px;
    background: var(--menu-background);
  }
}

/* Em telas menores, aumenta a logo sem tirar espaço dos botões do topo. */
@media (max-width: 980px){
  .topbar-left .brand-logo{
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
  }

  .menu.mobile-open .menu-pizzalike-assinatura{
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 12px;
    padding-bottom: 10px;
    background: var(--menu-mobile-background);
  }
}


/* =========================================================
   AJUSTE VISUAL 3 — LOGO HORIZONTAL PIZZALIKE NO RODAPÉ
   Usa somente a imagem institucional, sem repetir texto ao lado.
   ========================================================= */
.menu-pizzalike-assinatura{
  display: block;
  margin-top: auto;
  padding: 14px 4px 8px;
  border-top: 1px solid var(--border);
}

.menu-pizzalike-assinatura-logo{
  display: block;
  width: min(100%, 194px);
  height: auto;
  max-height: 94px;
  margin: 0 auto;
  border-radius: 0;
  object-fit: contain;
}

@media (min-width: 981px){
  .app.menu-collapsed .menu-pizzalike-assinatura{
    display: none;
  }
}

/* =========================================================
   IA ATENDIMENTO — ACESSO OPERACIONAL NO MENU PRINCIPAL
   Mantém o item visível para admin, gerente e atendente.
   No menu recolhido, o texto fica escondido e o ícone 🤖 permanece.
   ========================================================= */
@media (min-width: 981px){
  .app.menu-collapsed .menu a[href*="controller=atendenteVirtual&action=index"]::before{
    content: "🤖";
  }
}

/* =========================================================
   PIZZALIKE — CONFIGURAÇÃO DA LOJA PÚBLICA
   Logo, capa, slogan, link público e estado de pedidos.
   ========================================================= */
.cfg-publico-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 980px;
}

.cfg-publico-bloco{
  padding: 18px;
}

.cfg-publico-bloco-cabecalho{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cfg-publico-bloco-cabecalho h2{
  margin: 4px 0 0;
}

.cfg-publico-etiqueta{
  display: block;
  color: var(--cfg-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
}

.cfg-publico-link-linha{
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

.cfg-publico-link-campo{
  min-width: 0;
  flex: 1;
}

.cfg-publico-link-botao{
  flex: 0 0 auto;
}

.cfg-publico-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.cfg-publico-status--ativo{
  background: var(--cfg-success-bg);
  border-color: var(--cfg-success-border);
  color: var(--cfg-success-text);
}

.cfg-publico-status--inativo{
  background: var(--cfg-error-bg);
  border-color: var(--cfg-error-border);
  color: var(--cfg-error-text);
}

.cfg-switch-linha{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  cursor: pointer;
}

.cfg-switch-linha input{
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

.cfg-switch-linha strong,
.cfg-switch-linha .cfg-help{
  display: block;
}

.cfg-switch-linha .cfg-help{
  margin-top: 4px;
}

.cfg-publico-preview-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.cfg-publico-preview-card{
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.cfg-logo-preview-area--publico{
  min-height: 120px;
}

.cfg-capa-preview{
  width: 100%;
  min-height: 172px;
  overflow: hidden;
  margin-top: 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(251,146,60,.18), rgba(37,99,235,.16));
}

.cfg-capa-preview img{
  display: block;
  width: 100%;
  height: 172px;
  object-fit: cover;
}

.cfg-capa-preview-vazia{
  display: flex;
  min-height: 172px;
  padding: 18px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.cfg-capa-preview-vazia strong{
  color: var(--text);
}

@media (max-width: 720px){
  .cfg-publico-bloco{
    padding: 15px;
  }

  .cfg-publico-bloco-cabecalho{
    flex-direction: column;
    align-items: stretch;
  }

  .cfg-publico-status{
    align-self: flex-start;
  }

  .cfg-publico-link-linha{
    flex-direction: column;
  }

  .cfg-publico-link-botao{
    width: 100%;
  }

  .cfg-publico-preview-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   CORREÇÃO 2026-07-15 — TOPO E LOGO PIZZALIKE ESTÁVEIS
   Objetivo: impedir quebra do logo do restaurante abaixo do botão
   de recolher menu e manter a assinatura do PizzaLike presa ao menu.
   ========================================================= */
.topbar{
  min-height: var(--altura-topbar-pizzalike, 79px) !important;
}

.topbar-inner{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.topbar-left{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.topbar-left .btn-menu-toggle{
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  align-self: center !important;
}

.topbar-left .brand,
.topbar-left .brand--restaurante{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.topbar-left .brand-logo{
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 0 0 50px !important;
  align-self: center !important;
  overflow: hidden !important;
}

.topbar-left .brand-logo img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.topbar-left .brand-text{
  min-width: 0 !important;
  overflow: hidden !important;
}

.topbar-left .brand-title,
.topbar-left .brand-subtitle{
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.topbar-actions{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.menu-pizzalike-assinatura{
  flex: 0 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.menu-pizzalike-assinatura-logo{
  display: block !important;
  width: min(160px, 100%) !important;
  max-width: 160px !important;
  height: auto !important;
  max-height: 70px !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 981px){
  .app.menu-collapsed .menu-pizzalike-assinatura{
    display: none !important;
  }
}

@media (max-width: 980px){
  .topbar-inner{
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .topbar-left{
    flex-wrap: nowrap !important;
  }

  .topbar-left .brand-logo{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-basis: 42px !important;
  }
}