/* ============================================================
   PDV Loja — CSS Global
   ============================================================ */

:root {
  --pdv-blue-dark:   #1B3A6B;
  --pdv-blue:        #1565C0;
  --pdv-blue-hover:  #1976D2;
  --pdv-blue-bg:     #E3F2FD;
  --pdv-blue-light:  #BBDEFB;
  --pdv-green:       #2E7D32;
  --pdv-green-hover: #388E3C;
  --pdv-green-bg:    #E8F5E9;
  --pdv-white:       #FFFFFF;
  --pdv-gray-50:     #FAFAFA;
  --pdv-gray-100:    #F8F9FA;
  --pdv-gray-200:    #E9ECEF;
  --pdv-gray-300:    #DEE2E6;
  /* Faltava no :root e era usado em três lugares (placeholder de busca, id da
     venda, rodapé das abas): a cor simplesmente não aplicava e o texto saía
     escuro como o pai, em vez de apagado. */
  --pdv-gray-400:    #ADB5BD;
  --pdv-gray-500:    #6C757D;
  --pdv-gray-700:    #495057;
  --pdv-dark:        #1E2337;
  --pdv-danger:      #C62828;
  --pdv-danger-bg:   #FFEBEE;
  --pdv-warning:     #F57F17;
  --pdv-warning-bg:  #FFF8E1;
  --pdv-info:        #0277BD;
  --pdv-info-bg:     #E1F5FE;
  --sidebar-width:      240px;
  --topbar-height:      56px;
  --main-footer-height: 60px;
  --bottom-nav-height:  60px;
  --trial-bar-h:        0px;
  --radius:          8px;
  --radius-lg:       12px;
  --shadow:          0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md:       0 4px 12px rgba(0,0,0,.12);
  --transition:      0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background: var(--pdv-gray-100);
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--pdv-dark);
  background: var(--pdv-gray-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Reserva espaço dos ícones antes da fonte CDN carregar */
.bi {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  line-height: 1;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

[x-cloak] { display: none !important; }

/* ============================================================
   APP LAYOUT
   ============================================================ */

.pdv-app {
  display: flex;
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  width: var(--sidebar-width);
  background: var(--pdv-white);
  border-right: 1px solid var(--pdv-gray-200);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1100;
  overflow-y: auto;
  transition: transform var(--transition);
  will-change: transform;
}

.sidebar__header {
  padding: 0 16px;
  border-bottom: 1px solid var(--pdv-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  flex-shrink: 0;
}

.sidebar__logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}
/* Marca: glifo bi-shop + "PDV Loja" com a loja ativa embaixo — o mesmo
   lockup do painel admin, onde a segunda linha é "ADMIN". */
.sidebar__logo__mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 27px; line-height: 1;
  color: var(--pdv-blue);
}
.sidebar__logo__mark .bi { width: auto; height: auto; vertical-align: 0; }
.sidebar__logo__txt { min-width: 0; display: block; }
.sidebar__logo__name {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--pdv-blue);
  letter-spacing: -0.5px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__logo__sub {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--pdv-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-pdv, .logo-loja { display: none; }

.sidebar__close { display: none; background: none; border: none; color: var(--pdv-gray-500); cursor: pointer; font-size: 20px; }

.sidebar__nav { flex: 1; padding: 8px 0; overflow-y: auto; }

/* Scrollbar moderna na sidebar — Firefox */
.sidebar, .sidebar__nav {
  scrollbar-width: thin;
  scrollbar-color: #D1D5DB transparent;
}
/* Scrollbar moderna na sidebar — Chrome/Edge/Safari */
.sidebar::-webkit-scrollbar,
.sidebar__nav::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track,
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.sidebar__nav::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 100px;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar__nav::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

.sidebar__divider {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--pdv-gray-500);
  padding: 16px 16px 4px;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--pdv-gray-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: all var(--transition);
  position: relative;
}
.sidebar__item:hover { background: var(--pdv-gray-100); color: var(--pdv-blue); }
.sidebar__item.active {
  background: var(--pdv-blue-bg);
  color: var(--pdv-blue);
  border-left: 3px solid var(--pdv-blue);
  font-weight: 600;
}
.sidebar__item.active i { color: var(--pdv-blue); }
.sidebar__item i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar__item--locked { opacity: 0.6; }
.sidebar__lock { font-size: 11px; margin-left: auto; color: var(--pdv-warning); }

.sidebar__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--pdv-gray-200);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar__avatar {
  width: 36px; height: 36px;
  background: var(--pdv-blue);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.sidebar__user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sidebar__user-info { min-width: 0; }
.sidebar__user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { font-size: 11px; color: var(--pdv-gray-500); }
.sidebar__logout {
  background: none; border: none; color: var(--pdv-gray-500);
  cursor: pointer; font-size: 18px; padding: 4px; flex-shrink: 0;
  transition: color var(--transition);
}
.sidebar__logout:hover { color: var(--pdv-danger); }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
}
.sidebar-overlay.show { display: block; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */


.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}

.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  min-width: 0;
}

/* Lista: rolagem DENTRO do card (padrão desktop) ou paginação (config / celular) */
.fit-list { display: flex; flex-direction: column; opacity: 0; }
.fit-list.fit-ready { opacity: 1; transition: opacity .12s ease; }
.fit-list__body { overflow: hidden; }

/* Desktop — rolagem contínua dentro da tabela */
@media (min-width: 641px) {
  .page-content.page-content--inner-scroll {
    overflow-y: hidden;
  }
  .fit-list--scroll .fit-list__body {
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fit-list--scroll .fit-list__body table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pdv-gray-50, #f9fafb);
    box-shadow: 0 1px 0 var(--pdv-gray-200, #e5e7eb);
  }
  body[data-lista-modo="paginacao"] .fit-list__body,
  .fit-list--pages .fit-list__body {
    overflow: hidden;
    max-height: 66vh;
  }
}

/* Celular: mantém paginação (como já era) */
@media (max-width: 640px) {
  .fit-list__body {
    overflow: hidden;
    max-height: 66vh;
  }
}
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--pdv-gray-200);
  background: var(--pdv-white);
  flex-shrink: 0;
}
.pager__info  { font-size: 13px; color: var(--pdv-gray-500); }
.pager__links { display: flex; gap: 4px; flex-wrap: wrap; }

.main-footer {
  height: var(--main-footer-height);
  flex-shrink: 0;
  background: var(--pdv-white);
  border-top: 1px solid var(--pdv-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 12px;
  color: var(--pdv-gray-500);
  gap: 16px;
}
.main-footer__left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.main-footer__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.main-footer__sep   { color: var(--pdv-gray-300); }
.main-footer__status {
  display: inline-flex; align-items: center; gap: 5px;
  background: #F0FDF4; border: 1px solid #BBF7D0;
  border-radius: 20px; padding: 2px 10px;
  font-size: 11px; font-weight: 600; color: #15803D;
}

.topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  background: var(--pdv-white);
  border-bottom: 1px solid var(--pdv-gray-200);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 100;
  box-shadow: var(--shadow);
}

.topbar__menu-btn {
  display: none;
  background: none; border: none;
  font-size: 22px; color: var(--pdv-dark);
  cursor: pointer; padding: 4px;
}

.topbar__breadcrumb {
  font-weight: 600; font-size: 16px; color: var(--pdv-dark);
  flex: 1;
}

.topbar__actions { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   BOTTOM NAV (mobile)
   ============================================================ */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-height);
  background: var(--pdv-white);
  border-top: 1px solid var(--pdv-gray-200);
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  z-index: 1000;
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--pdv-gray-500);
  font-size: 10px; font-weight: 500;
  padding: 6px 4px;
  transition: color var(--transition);
}
.bottom-nav__item i,
.bottom-nav__item svg { font-size: 20px; width: 22px; height: 22px; display: block; flex-shrink: 0; }
.bottom-nav__item svg,
.bottom-nav__item svg path { fill: currentColor; }
.bottom-nav__item.active { color: var(--pdv-blue); }
.bottom-nav__item:hover { color: var(--pdv-blue); }

/* ============================================================
   TRIAL BANNER
   ============================================================ */

.trial-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  z-index: 1500;
  background: linear-gradient(90deg, #E65100, #F57F17);
  color: white;
  padding: 0 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.trial-banner__msg {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.trial-banner__msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.trial-banner__btn {
  background: white;
  color: var(--pdv-warning);
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}
.trial-banner__close {
  background: none; border: none; color: white;
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0 4px; opacity: .8; transition: opacity .15s;
}
.trial-banner__close:hover { opacity: 1; }

/* Layout compensation when trial bar is visible */
body.has-trial {
  --trial-bar-h: 36px;
}
body.has-trial .sidebar {
  top: var(--trial-bar-h);
  height: calc(100vh - var(--trial-bar-h));
}
body.has-trial .main-content {
  margin-top: var(--trial-bar-h);
  height: calc(100vh - var(--trial-bar-h));
}
body.has-trial .sidebar-overlay {
  top: var(--trial-bar-h);
}

@media (max-width: 480px) {
  .trial-banner { padding: 0 10px; gap: 6px; }
  .trial-banner__msg { font-size: 12px; }
  .trial-banner__btn { padding: 3px 10px; font-size: 11px; }
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */

.card {
  background: var(--pdv-white);
  border: 1px solid var(--pdv-gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--pdv-gray-200);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600;
}
.card-body { padding: 20px; }
.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--pdv-gray-200);
  background: var(--pdv-gray-50);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* KPI Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kpi-card {
  background: var(--pdv-white);
  border: 1px solid var(--pdv-gray-200);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.kpi-card__label { font-size: 12px; font-weight: 500; color: var(--pdv-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-card__value { font-size: 28px; font-weight: 700; color: var(--pdv-dark); line-height: 1.2; margin: 4px 0; }
.kpi-card__value--green { color: var(--pdv-green); }
.kpi-card__value--blue  { color: var(--pdv-blue); }
.kpi-card__value--warn  { color: var(--pdv-warning); }
.kpi-card__value--danger{ color: var(--pdv-danger); }
.kpi-card__icon { font-size: 28px; color: var(--pdv-gray-200); }

/* ============================================================
   BOTÕES
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: all var(--transition); line-height: 1.4;
  white-space: nowrap;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 16px; }
.btn-full { width: 100%; }

.btn-primary { background: var(--pdv-blue); color: white; border-color: var(--pdv-blue); }
.btn-primary:hover { background: var(--pdv-blue-hover); border-color: var(--pdv-blue-hover); }
.btn-success { background: var(--pdv-green); color: white; border-color: var(--pdv-green); }
.btn-success:hover { background: var(--pdv-green-hover); border-color: var(--pdv-green-hover); }
.btn-danger { background: var(--pdv-danger); color: white; }
.btn-warning { background: var(--pdv-warning); color: white; }
.btn-secondary { background: var(--pdv-gray-200); color: var(--pdv-dark); }
.btn-secondary:hover { background: var(--pdv-gray-300); }
.btn-outline { background: transparent; border-color: var(--pdv-blue); color: var(--pdv-blue); }
.btn-outline:hover { background: var(--pdv-blue-bg); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--pdv-gray-700); }
.btn-ghost:hover { background: var(--pdv-gray-100); }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */

.form-group { margin-bottom: 16px; }
.form-label {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--pdv-dark);
  margin-bottom: 6px;
}
.form-label__link { font-weight: 400; color: var(--pdv-blue); text-decoration: none; font-size: 12px; }
.form-label__optional { font-weight: 400; color: var(--pdv-gray-500); font-size: 12px; }
.form-control {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--pdv-gray-300); border-radius: var(--radius);
  font-size: 14px; color: var(--pdv-dark); background: white;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
/* Foco marcado só pela borda. O halo de 3px em volta do campo ("brilho")
   somava uma segunda moldura difusa a cada clique — a borda azul já diz
   onde está o cursor, e é ela que quem navega por teclado enxerga. */
.form-control:focus {
  outline: none;
  border-color: var(--pdv-blue);
}
.form-control.is-invalid { border-color: var(--pdv-danger); }
.form-control::placeholder { color: var(--pdv-gray-500); }
.form-error { font-size: 12px; color: var(--pdv-danger); margin-top: 4px; }
.form-hint  { font-size: 12px; color: var(--pdv-gray-500); margin-top: 4px; }

.form-check { display: flex; align-items: flex-start; gap: 10px; }
.form-check-input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--pdv-blue); cursor: pointer; }
.form-check-label { font-size: 13px; cursor: pointer; }

.input-icon-wrap { position: relative; }
.input-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--pdv-gray-500); font-size: 15px; pointer-events: none;
}
.input-icon ~ .form-control { padding-left: 36px; }
.input-icon-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--pdv-gray-500);
  cursor: pointer; padding: 4px; font-size: 15px;
}

/* ============================================================
   TABELAS
   ============================================================ */

.table-wrapper { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.table th {
  background: var(--pdv-gray-50);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--pdv-gray-500);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--pdv-gray-200);
  white-space: nowrap;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pdv-gray-200);
  color: var(--pdv-dark);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--pdv-gray-50); }

/* ============================================================
   ALERTAS / FLASH
   ============================================================ */

.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; margin: 0 24px 16px;
  border: 1px solid transparent;
}
.alert--success { background: var(--pdv-green-bg); color: var(--pdv-green); border-color: #A5D6A7; }
.alert--error,
.alert--danger  { background: var(--pdv-danger-bg); color: var(--pdv-danger); border-color: #FFCDD2; }
.alert--info    { background: var(--pdv-info-bg);   color: var(--pdv-info);   border-color: #B3E5FC; }
.alert--warning { background: var(--pdv-warning-bg);color: var(--pdv-warning);border-color: #FFE082; }

/* ============================================================
   BADGES / STATUS
   ============================================================ */

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-success { background: var(--pdv-green-bg); color: var(--pdv-green); }
.badge-danger  { background: var(--pdv-danger-bg); color: var(--pdv-danger); }
.badge-warning { background: var(--pdv-warning-bg); color: var(--pdv-warning); }
.badge-info    { background: var(--pdv-blue-bg);   color: var(--pdv-blue); }
.badge-gray    { background: var(--pdv-gray-200);  color: var(--pdv-gray-700); }

/* ============================================================
   TOGGLE BUTTONS
   ============================================================ */

.btn-group-toggle {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.btn-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--pdv-gray-300);
  border-radius: var(--radius); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
  background: white; color: var(--pdv-gray-700);
}
.btn-toggle input { display: none; }
.btn-toggle.active, .btn-toggle:has(input:checked) {
  border-color: var(--pdv-blue);
  background: var(--pdv-blue-bg);
  color: var(--pdv-blue);
}

/* ============================================================
   PWA BANNER
   ============================================================ */

.pwa-banner {
  position: fixed; bottom: calc(var(--bottom-nav-height) + 16px); left: 16px; right: 16px;
  background: var(--pdv-white); border: 1px solid var(--pdv-gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  z-index: 2000;
}
.pwa-banner__content { display: flex; align-items: center; gap: 12px; }
.pwa-banner__icon img { width: 40px; height: 40px; border-radius: 8px; }
.pwa-banner__actions { display: flex; gap: 8px; }

/* ============================================================
   MODAL CUSTOMIZADO — PDV.modal()
   ============================================================ */

.pdv-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  transition: background .22s ease, backdrop-filter .22s ease;
}
.pdv-modal-backdrop.is-open {
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
}
.pdv-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
  padding: 36px 32px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  transform: scale(.92) translateY(12px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
}
.pdv-modal-backdrop.is-open .pdv-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.pdv-modal__icon {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin: 0 auto 18px;
}
.pdv-modal__title {
  font-size: 19px; font-weight: 800; color: #0F172A; margin: 0 0 8px; line-height: 1.3;
}
.pdv-modal__msg {
  font-size: 14px; color: #64748B; margin: 0 0 26px; line-height: 1.6;
}
.pdv-modal__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.pdv-modal__cancel  { min-width: 110px; }
.pdv-modal__confirm { min-width: 130px; border: none !important; }
.pdv-modal__confirm:hover { filter: brightness(1.1); }

@media (max-width: 420px) {
  .pdv-modal { padding: 28px 20px 22px; }
  .pdv-modal__actions { flex-direction: column-reverse; }
  .pdv-modal__cancel, .pdv-modal__confirm { width: 100%; }
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */

.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.text-muted { color: var(--pdv-gray-500); }
.text-success { color: var(--pdv-green); }
.text-danger  { color: var(--pdv-danger); }
.text-primary { color: var(--pdv-blue); }
.font-mono { font-family: 'Courier New', monospace; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-primary { color: var(--pdv-blue); text-decoration: none; font-weight: 500; }
.link-primary:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }
  .sidebar--open {
    transform: translateX(0);
    box-shadow: var(--shadow-md);
  }
  .sidebar__close { display: flex; }
  .main-content { margin-left: 0; height: 100dvh; }
  .page-content  { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
  .main-footer   { display: none; }
  .topbar__menu-btn { display: flex; }
  .bottom-nav { display: flex; }
  /* padding-bottom precisa vir DEPOIS do shorthand p/ não zerar a folga da navbar */
  .page-content { padding: 16px; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 20px); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-card__value { font-size: 22px; }
  .page-content { padding: 12px; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 18px); }
  .page-title { font-size: 20px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .btn { font-size: 13px; }
}

/* iPhone SE / pequenos (375px) */
@media (max-width: 390px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .page-content { padding: 10px; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px); }
  .topbar { padding: 0 10px; }
  .bottom-nav__item span { font-size: 9px; }
}

/* ============================================================
   NATIVE FEEL (PWA / mobile) — parece app nativo
   ============================================================ */
/* Sem o "flash" azul ao tocar em qualquer coisa */
* { -webkit-tap-highlight-color: transparent; }

/* Mata o pull-to-refresh e o "bounce" que denuncia navegador */
html, body { overscroll-behavior-y: none; }

/* Sem seleção de texto nem menu de long-press na CASCA do app
   (conteúdo e campos continuam selecionáveis abaixo) */
.sidebar, .topbar, .bottom-nav, .main-footer, .page-header__actions,
.btn, button, .badge, .kpi-card, .card-header, .card-title,
.pdv-payment-btn, .bottom-nav__item, label, nav {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable], .allow-select, .selectable {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* Toque instantâneo (sem delay/zoom por duplo toque) */
a, button, .btn, .bottom-nav__item, .pdv-payment-btn, [role="button"],
input, select, textarea, .item-row, .search-result-item {
  touch-action: manipulation;
}

/* Rolagem com inércia nos contêineres roláveis */
.main-content, .page-content, .sidebar, .pdv-sidebar__scroll,
.pdv-cart-items, .modal, .table-wrap { -webkit-overflow-scrolling: touch; }

/* Feedback tátil de "pressionado" (só em telas de toque) */
@media (hover: none) and (pointer: coarse) {
  .bottom-nav__item:active { transform: scale(.9); opacity: .65; }
  .btn:active, .pdv-payment-btn:active,
  .search-result-item:active { transform: scale(.97); filter: brightness(.97); }
  .kpi-card:active, .card--tap:active { transform: scale(.99); }
  .sidebar__link:active { background: var(--pdv-gray-100); }
}
.bottom-nav__item, .btn, .pdv-payment-btn { transition: transform .08s ease, opacity .08s ease; }

/* Altura dinâmica: não corta conteúdo pela barra do navegador no mobile */
@supports (height: 100dvh) {
  .pdv-app  { min-height: 100dvh; }
  .sidebar  { height: 100dvh; }
  .pdv-layout { height: calc(100dvh - var(--topbar-height)); }
}

/* Ajustes exclusivos quando instalado (standalone) */
html.pwa-standalone .topbar { box-shadow: none; }
html.pwa-standalone #pwaBanner { display: none !important; }

/* Dica de instalação no iOS (Safari não tem prompt) */
#iosInstallHint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 9000; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 14px 16px; width: calc(100vw - 32px); max-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16); font-size: 13px; color: #0D1117;
  display: none; animation: pwaSlideIn .3s cubic-bezier(.34,1.56,.64,1);
}
@media (min-width: 992px) { #iosInstallHint { display: none !important; } }

/* ============================================================
   MOBILE — adequação de conteúdo (todas as páginas)
   ============================================================ */
@media (max-width: 768px) {
  /* Nada empurra a página de lado */
  .main-content { overflow-x: hidden; }

  /* Tabelas rolam DENTRO do card (não estouram a tela) */
  .card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .table { font-size: 13px; }
  .table th, .table td { padding: 8px 10px; white-space: nowrap; }
  .table th { font-size: 10.5px; letter-spacing: .2px; }

  /* Cabeçalho de página: título em cima, ações ocupando a largura */
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-header__actions > .btn,
  .page-header__actions > form { flex: 1 1 40%; }
  .page-header__actions > form > .btn { width: 100%; }
  .page-header__actions .btn { justify-content: center; }

  /* Cards da classe com menos padding (mais área útil) */
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }

  /* Toolbars/filtros quebram em vez de estourar */
  .filters-row, .toolbar, .table-actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .kpi-card__value { font-size: 20px; }
  .card-body, .card-header { padding: 12px; }
  .btn { padding: 8px 12px; font-size: 13px; }
  .page-title { font-size: 19px; }
}

/* ============================================================
   CAIXA (PDV) — Tela do ponto de venda
   ============================================================ */

.pdv-layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
  gap: 0;
}

.pdv-sidebar {
  background: var(--pdv-white);
  border-right: 1px solid var(--pdv-gray-200);
  overflow-y: auto;
}

.pdv-main {
  display: flex; flex-direction: column;
  background: var(--pdv-gray-50);
  overflow: hidden;
}

.pdv-panel {
  background: var(--pdv-white);
  border-left: 1px solid var(--pdv-gray-200);
  display: flex; flex-direction: column;
}

/* Busca de produto no caixa */
.pdv-search {
  padding: 12px;
  border-bottom: 1px solid var(--pdv-gray-200);
  background: white;
}
/* Busca do caixa.
   Sem `background` de lupa aqui: o HTML já traz um <i class="bi bi-search">
   posicionado em left:12px, e a imagem de fundo caía exatamente no mesmo
   ponto — duas lupas sobrepostas, uma azul e uma cinza, era o que deixava o
   ícone sujo. */
.pdv-search__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--pdv-gray-300);
  border-radius: var(--radius);
  font-size: 14px;
}
.pdv-search__input:focus { outline: none; border-color: var(--pdv-blue); }

/* Tabela de itens da venda */
.pdv-items {
  flex: 1; overflow-y: auto; padding: 0;
}
.pdv-items__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8px; color: var(--pdv-gray-500);
  font-size: 14px; padding: 32px;
}
.pdv-items__empty i { font-size: 40px; }

.pdv-item-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px 90px 32px;
  gap: 4px; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pdv-gray-200);
  font-size: 13px;
}
.pdv-item-row:hover { background: var(--pdv-gray-50); }
.pdv-item-row__name { font-weight: 600; }
.pdv-item-row__variant { font-size: 11px; color: var(--pdv-gray-500); }
.pdv-item-row__qty { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pdv-item-row__qty input { width: 44px; text-align: center; padding: 3px; border: 1px solid var(--pdv-gray-300); border-radius: 4px; font-size: 13px; }
.pdv-item-row__total { font-weight: 600; text-align: center; }
.pdv-item-row__remove { background: none; border: none; color: var(--pdv-danger); cursor: pointer; font-size: 16px; }

/* Totais e pagamento */
.pdv-totals {
  padding: 16px;
  border-bottom: 1px solid var(--pdv-gray-200);
}
.pdv-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 14px;
}
.pdv-total-row--grand {
  font-size: 22px; font-weight: 800;
  color: var(--pdv-dark);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 2px solid var(--pdv-gray-200);
}
.pdv-total-row--recebido { color: var(--pdv-blue); font-weight: 600; }
.pdv-total-row--troco    { color: var(--pdv-green); font-weight: 600; }

.pdv-actions { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

/* Resultados de busca */
.search-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: white;
  border: 1px solid var(--pdv-gray-200);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 320px; overflow-y: auto;
  z-index: 500;
}
.search-result-item {
  padding: 10px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--pdv-gray-100);
  transition: background var(--transition);
}
.search-result-item:hover { background: var(--pdv-blue-bg); }
.search-result-item__name { font-weight: 600; font-size: 14px; }
.search-result-item__price { font-size: 13px; color: var(--pdv-green); font-weight: 600; }
.search-result-item__stock { font-size: 11px; color: var(--pdv-gray-500); }
.search-result-item__img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--pdv-gray-100); }

/* Formas de pagamento */
.payment-methods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.payment-btn {
  flex: 1; min-width: 80px;
  padding: 8px 6px; text-align: center;
  border: 2px solid var(--pdv-gray-200);
  border-radius: var(--radius);
  cursor: pointer; background: white;
  font-size: 12px; font-weight: 600;
  transition: all var(--transition);
}
.payment-btn.selected { border-color: var(--pdv-blue); background: var(--pdv-blue-bg); color: var(--pdv-blue); }
.payment-btn i { display: block; font-size: 18px; margin-bottom: 2px; }

/* ============================================================
   PRODUTOS — Grade de produtos
   ============================================================ */

.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.produto-card {
  background: white;
  border: 1px solid var(--pdv-gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.produto-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.produto-card__img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; background: var(--pdv-gray-100);
  display: flex; align-items: center; justify-content: center;
}
.produto-card__img i { font-size: 48px; color: var(--pdv-gray-300); }
.produto-card__body { padding: 12px; }
.produto-card__name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.produto-card__sku  { font-size: 11px; color: var(--pdv-gray-500); margin-bottom: 8px; }
.produto-card__price { font-size: 18px; font-weight: 700; color: var(--pdv-green); }
.produto-card__stock { font-size: 12px; color: var(--pdv-gray-500); }
.produto-card__stock--low  { color: var(--pdv-warning); font-weight: 600; }
.produto-card__stock--zero { color: var(--pdv-danger); font-weight: 600; }

/* ============================================================
   PASSWORD STRENGTH
   ============================================================ */

.password-strength { font-size: 12px; margin-top: 4px; height: 16px; }

/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-title    { font-size: 24px; font-weight: 800; color: var(--pdv-dark); margin: 0 0 4px; line-height: 1.2; }
.page-subtitle { font-size: 14px; color: var(--pdv-gray-500); margin: 0; }
.page-header__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ============================================================
   CARD HELPERS
   ============================================================ */

.card-title       { font-size: 15px; font-weight: 700; color: var(--pdv-dark); margin: 0; display: flex; align-items: center; gap: 8px; }
.card-header__link{ font-size: 13px; font-weight: 500; color: var(--pdv-blue); text-decoration: none; }
.card-header__link:hover { text-decoration: underline; }
.p-0 { padding: 0 !important; }

/* ============================================================
   KPI CARD ICONS + TRENDS
   ============================================================ */

.kpi-card { display: flex; flex-direction: column; gap: 8px; }
.kpi-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.kpi-card__icon--blue   { background: var(--pdv-blue-bg);    color: var(--pdv-blue); }
.kpi-card__icon--green  { background: var(--pdv-green-bg);   color: var(--pdv-green); }
.kpi-card__icon--orange { background: var(--pdv-warning-bg); color: var(--pdv-warning); }
.kpi-card__icon--red    { background: var(--pdv-danger-bg);  color: var(--pdv-danger); }

.kpi-card__body { flex: 1; }
.kpi-card__value { font-size: 26px; font-weight: 800; color: var(--pdv-dark); line-height: 1.1; }
.kpi-card__label { font-size: 12px; color: var(--pdv-gray-500); font-weight: 500; margin-top: 2px; }

.kpi-card__trend { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.kpi-card__trend--up   { color: var(--pdv-green); }
.kpi-card__trend--down { color: var(--pdv-danger); }

/* ============================================================
   DASHBOARD GRID
   ============================================================ */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FORM GRID (detail pages)
   ============================================================ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.form-grid__main { display: flex; flex-direction: column; gap: 0; }
.form-grid__side { display: flex; flex-direction: column; gap: 0; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-row  { grid-template-columns: 1fr; }
}

/* ============================================================
   FORM GRID — column variants
   ============================================================ */

.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 900px) {
  .form-grid--3,
  .form-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .form-grid--2,
  .form-grid--3,
  .form-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLE RESPONSIVE WRAPPER
   ============================================================ */

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   AUTOCOMPLETE
   ============================================================ */

.autocomplete-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: white;
  border: 1px solid var(--pdv-gray-200);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 240px; overflow-y: auto;
  z-index: 500;
}
.autocomplete-item {
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--pdv-gray-100);
  font-size: 14px; transition: background var(--transition);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--pdv-blue-bg); }

/* ============================================================
   FILTER FORM
   ============================================================ */

.filter-form__fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-form__fields .form-control { max-width: 220px; }

/* Campo de busca com ícone (usado nos filtros de listagem) */
.search-field { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.search-field__icon {
  position: absolute; left: 12px;
  color: var(--pdv-gray-400); font-size: 15px; pointer-events: none;
}
.search-field__input {
  width: 100%;
  max-width: none !important;
  padding-left: 36px !important;
}
@media (max-width: 640px) {
  .filter-form__fields .form-control { max-width: 100%; width: 100%; }
}

/* ============================================================
   TABLE EXTRAS
   ============================================================ */

.table--hover tbody tr:hover { background: var(--pdv-gray-50); cursor: default; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
/* Alinhamento do cabeçalho precisa vencer ".table th { text-align:left }" (maior especificidade). */
.table th.text-right,  .table td.text-right  { text-align: right; }
.table th.text-center, .table td.text-center { text-align: center; }
.table th.text-left,   .table td.text-left   { text-align: left; }
/* Centraliza todas as colunas (cabeçalho + células) da tabela. */
.table--center th, .table--center td { text-align: center !important; }
.font-bold   { font-weight: 700; }

.table-actions { display: flex; gap: 4px; align-items: center; }
.btn-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--pdv-gray-200);
  background: white; color: var(--pdv-gray-700);
  cursor: pointer; text-decoration: none;
  font-size: 14px; transition: all var(--transition);
}
.btn-icon:hover { background: var(--pdv-blue-bg); color: var(--pdv-blue); border-color: var(--pdv-blue); }
.btn-icon--danger:hover { background: var(--pdv-danger-bg); color: var(--pdv-danger); border-color: var(--pdv-danger); }

/* ============================================================
   BADGES (--modifier pattern)
   ============================================================ */

.badge--success   { background: var(--pdv-green-bg);   color: var(--pdv-green); }
.badge--danger    { background: var(--pdv-danger-bg);  color: var(--pdv-danger); }
.badge--warning   { background: var(--pdv-warning-bg); color: var(--pdv-warning); }
.badge--info      { background: var(--pdv-blue-bg);    color: var(--pdv-blue); }
.badge--secondary { background: var(--pdv-gray-200);   color: var(--pdv-gray-700); }
.badge--default   { background: var(--pdv-gray-200);   color: var(--pdv-gray-700); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px;
  color: var(--pdv-gray-500);
}
.empty-state i { font-size: 48px; color: var(--pdv-gray-300); margin-bottom: 12px; }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--pdv-dark); margin-bottom: 6px; }

/* ============================================================
   UTILS
   ============================================================ */

.d-inline  { display: inline !important; }
.d-flex    { display: flex; }
.gap-8     { gap: 8px; }

/* ============================================================
   CAIXA PDV — layout 2 colunas + componentes
   ============================================================ */

.pdv-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  height: 100%;
  overflow: hidden;
  gap: 0;
}
.pdv-main {
  display: flex; flex-direction: column;
  background: var(--pdv-gray-50);
  overflow: hidden;
}
.pdv-sidebar {
  background: var(--pdv-white);
  border-left: 1px solid var(--pdv-gray-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pdv-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdv-sidebar__footer {
  padding: 10px 12px;
  border-top: 2px solid var(--pdv-gray-200);
  background: var(--pdv-white);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* PDV Header */
.pdv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid var(--pdv-gray-200);
  gap: 12px;
  flex-wrap: wrap;
}
.pdv-header__left { display: flex; align-items: center; gap: 10px; }
.pdv-header__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdv-title { font-size: 18px; font-weight: 800; color: var(--pdv-dark); margin: 0; display: flex; align-items: center; gap: 8px; }

/* Resumo “Em caixa” — faixa limpa (sem pill verde + botão azul) */
.pdv-caixa-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--pdv-gray-50, #F9FAFB);
  border: 1px solid var(--pdv-gray-200, #E5E7EB);
  border-radius: 10px;
}
.pdv-caixa-strip__info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.pdv-caixa-strip__dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}
.pdv-caixa-strip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pdv-caixa-strip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pdv-gray-500, #6B7280);
}
.pdv-caixa-strip__valor {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pdv-dark, #111827);
  line-height: 1.2;
}
.pdv-caixa-strip__meta {
  font-size: 11px;
  color: var(--pdv-gray-500, #6B7280);
}
.pdv-caixa-strip__fechar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--pdv-gray-300, #D1D5DB);
  background: #fff;
  color: var(--pdv-gray-700, #374151);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pdv-caixa-strip__fechar:hover {
  border-color: #FCA5A5;
  color: #B91C1C;
  background: #FEF2F2;
}
.pdv-caixa-strip__fechar:active { transform: scale(0.97); }

/* PDV Search */
.pdv-search { padding: 12px 16px; background: white; border-bottom: 1px solid var(--pdv-gray-200); position: relative; }
.pdv-search__wrap { position: relative; }
.pdv-search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pdv-blue); font-size: 16px; pointer-events: none; }
/* Borda de 1px em cinza, azul só no foco — a de 2px azul permanente gritava
   numa tela onde este é o único campo, e no foco virava navy escuro. */
.pdv-search__input {
  width: 100%; padding: 11px 80px 11px 40px;
  border: 1px solid var(--pdv-gray-300); border-radius: var(--radius);
  font-size: 14px; font-family: inherit;
  transition: border-color .16s;
}
.pdv-search__input:focus { outline: none; border-color: var(--pdv-blue); }
/* `focus-within` no wrapper, e não `+` no input: no HTML o ícone vem antes
   do campo, então o seletor de irmão nunca alcançaria ele. */
.pdv-search__wrap:focus-within .pdv-search__icon { color: var(--pdv-blue-dark); }
.pdv-search__kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--pdv-gray-500); }
.pdv-search__kbd kbd { background: var(--pdv-gray-100); border: 1px solid var(--pdv-gray-300); border-radius: 4px; padding: 1px 5px; font-family: inherit; }
.pdv-search__results {
  position: absolute; top: 100%; left: 16px; right: 16px; z-index: 400;
  background: white; border: 1px solid var(--pdv-gray-200);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md); max-height: 320px; overflow-y: auto;
}

/* PDV Cart */
.pdv-cart { flex: 1; overflow-y: auto; }
.pdv-cart__empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 8px; color: var(--pdv-gray-500);
  font-size: 14px; padding: 32px; text-align: center;
}
.pdv-cart__empty i { font-size: 48px; color: var(--pdv-gray-200); }
/* Rodapé do carrinho — alinha visualmente com sidebar__footer */
.pdv-cart-footer {
  background: var(--pdv-white);
  border-top: 1px solid var(--pdv-gray-200);  /* igual ao sidebar__footer */
  padding: 12px 16px;                          /* igual ao sidebar__footer */
  flex-shrink: 0;
}

/* PDV Summary */
.pdv-summary { display: flex; flex-direction: column; gap: 6px; }
.pdv-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--pdv-gray-500); }
.pdv-summary__row--total { font-size: 18px; font-weight: 800; color: var(--pdv-dark); padding-top: 6px; border-top: 1px solid var(--pdv-gray-200); margin-top: 2px; }

/* PDV Payment buttons */
.pdv-payment-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pdv-payment-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border: 2px solid var(--pdv-gray-200);
  border-radius: var(--radius); cursor: pointer; background: white;
  font-size: 11px; font-weight: 600; color: var(--pdv-gray-700);
  transition: all var(--transition);
}
.pdv-payment-btn i { font-size: 18px; }
.pdv-payment-btn:hover, .pdv-payment-btn.active {
  border-color: var(--pdv-blue); background: var(--pdv-blue-bg); color: var(--pdv-blue);
}
.pdv-payment-btn[data-forma="fiado"]:hover,
.pdv-payment-btn[data-forma="fiado"].active { border-color: var(--pdv-warning); background: var(--pdv-warning-bg); color: var(--pdv-warning); }

/* ============================================================
   PDV — RESPONSIVE MOBILE
   ============================================================ */

/* Tablet: remove coluna de categorias, expande */
@media (max-width: 991px) {
  .pdv-layout {
    grid-template-columns: 1fr 260px;
    height: 100%;
  }
}

/* Mobile: fluxo natural (empilha) com Finalizar fixo no rodapé — feel de app */
@media (max-width: 640px) {
  .pdv-layout {
    display: block; height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }
  .pdv-main    { overflow: visible; }
  .pdv-cart    { overflow: visible; }
  .pdv-cart__empty { padding: 24px 12px; }
  .pdv-cart__empty i { font-size: 34px; }
  .pdv-sidebar {
    border-left: none;
    border-top: 8px solid var(--pdv-gray-100);
    overflow: visible;
    max-height: none;
  }
  .pdv-sidebar__scroll { overflow: visible; padding: 12px; }

  /* Finalizar flui no final do conteúdo (não sobrepõe os pagamentos) */
  .pdv-sidebar__footer { position: static; box-shadow: none; border-top: none; padding-top: 4px; }

  .pdv-header { padding: 8px 12px; }
  .pdv-header__right {
    flex: 1 1 auto;
    justify-content: space-between;
    min-width: 0;
  }
  .pdv-header__right > .btn { margin-left: auto; flex-shrink: 0; }
  .pdv-title  { font-size: 15px; }
  .pdv-search { padding: 8px 12px; }
  .pdv-summary__row--total { font-size: 20px; }
  /* Pagamento: alvos de toque confortáveis */
  .pdv-payment-btns { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pdv-payment-btn  { min-height: 60px; padding: 8px 4px; }
  .pdv-payment-btn i { font-size: 20px; }
  /* Cliente e busca com altura de toque */
  .pdv-search__input { min-height: 46px; }
}

/* ============================================================
   LISTA COMPACTA no mobile (linhas tocáveis, estilo app nativo)
   .mlist (mobile)  ⇄  .hide-mobile (tabela desktop)
   ============================================================ */
.mlist { display: none; }               /* só no mobile */

@media (max-width: 640px) {
  .hide-mobile { display: none !important; }   /* esconde a tabela larga */
  .mlist { display: block; }

  /* filtros empilham e ocupam a largura toda, bem juntinhos */
  .filter-form__fields { flex-direction: column; align-items: stretch; gap: 8px; }
  .filter-form__fields .form-control,
  .filter-form__fields .btn,
  .filter-form__fields select { max-width: none !important; width: 100%; }
  /* impede a busca de "esticar" na vertical (flex-grow em coluna) */
  .filter-form__fields .search-field { flex: 0 0 auto; width: 100%; }
}

.mlist__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--pdv-gray-100);
  text-decoration: none;
  color: inherit;
}
.mlist__row:last-child { border-bottom: none; }
.mlist__row:active { background: var(--pdv-gray-50); }
.mlist__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mlist__title {
  font-weight: 600; font-size: 15px; color: var(--pdv-gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mlist__sub { font-size: 12.5px; color: var(--pdv-gray-500); }
.mlist__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.mlist__value { font-weight: 700; font-size: 15px; color: var(--pdv-gray-900); white-space: nowrap; }
.mlist__chev { color: var(--pdv-gray-300); font-size: 16px; flex-shrink: 0; }

/* Botão "Ver mais" — só no mobile, só quando há itens ocultos (JS adiciona .is-visible) */
.mlist__more { display: none; }
@media (max-width: 640px) {
  .mlist__more.is-visible {
    display: flex;
    align-items: center; justify-content: center; gap: 8px;
    width: calc(100% - 24px);
    margin: 6px 12px 12px;
    padding: 12px;
    background: var(--pdv-gray-50);
    border: 1px solid var(--pdv-gray-200);
    border-radius: 10px;
    color: var(--pdv-primary);
    font-weight: 600; font-size: 14px;
    cursor: pointer;
  }
  .mlist__more.is-visible:active { background: var(--pdv-gray-100); }
}

/* ============================================================
   TOPBAR — RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .topbar__store-btn span { display: none; }
  .topbar__store-btn { padding: 6px 8px; }
}

/* ============================================================
   TABELAS — scroll horizontal em mobile
   ============================================================ */

/* overflow-x já definido na regra principal de .main-content acima */

@media (max-width: 768px) {
  /* Deixa colunas/cards ENCOLHEREM (senão o conteúdo largo estica e é cortado) */
  .main-content, .pdv-app > *, .dash-main-grid, .dash-main-grid > *,
  .form-grid, .form-grid > *, .form-grid__main, .form-grid__side,
  .card, .card-body, .page-content { min-width: 0; }
  /* Tabela larga rola dentro do card (não corta a tela) */
  .card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Imagem/gráfico nunca estoura a largura */
  img, canvas, video, .kpi-card, .dash-actions-grid { max-width: 100%; }
}

/* ============================================================
   PWA — iOS safe-area (notch/home-bar)
   ============================================================ */
.topbar {
  padding-top: env(safe-area-inset-top);
}
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}

/* ============================================================
   PRINT — cupom térmico (Elgin I9 / 80mm)
   ============================================================ */

/* Off-screen when not printing */
#pdv-receipt-print {
  display: none;
}

@media print {
  .sidebar, .topbar, .bottom-nav, .trial-banner, .pwa-banner,
  .sidebar-overlay, #vendaSucessoModal { display: none !important; }
  .main-content { display: none !important; }
  body { background: white; }

  #pdv-receipt-print {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background: white !important;
  }
  .receipt-wrap {
    width: 80mm;
    max-width: 100%;
    margin: 0 auto;
    padding: 4mm 2mm;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10pt;
    line-height: 1.4;
    color: #000;
  }
  .receipt-center { text-align: center; }
  .receipt-bold   { font-weight: 700; }
  .receipt-sep    { border: none; border-top: 1px dashed #000; margin: 4px 0; }
  .receipt-row    { display: flex; justify-content: space-between; padding: 1px 0; font-size: 9pt; }
  .receipt-row-full { padding: 1px 0; font-size: 9pt; }
  .receipt-item-desc { font-size: 9pt; padding: 2px 0 0; }
  .receipt-item-vals { display: flex; justify-content: space-between; font-size: 9pt; color: #333; padding-bottom: 3px; }
  .receipt-total  { display: flex; justify-content: space-between; font-size: 10pt; font-weight: 700; padding: 2px 0; }
  .receipt-total-main { display: flex; justify-content: space-between; font-size: 13pt; font-weight: 900; padding: 3px 0; }
  .receipt-footer { text-align: center; margin-top: 8px; font-size: 9pt; }
}