@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f3;
  --surface-3: #e9e8e6;
  --border: rgba(10, 10, 9, .14);
  --border-soft: rgba(10, 10, 9, .08);
  --text: #0a0a09;
  --text-dim: #5c5b57;
  --text-faint: #9a9893;
  --accent: #0a0a09;
  --accent-dark: #0a0a09;
  --accent-wash: rgba(10, 10, 9, .06);
  --on-accent: #ffffff;
  --success: #3f7a44;
  --success-wash: rgba(63, 122, 68, .1);
  --danger: #b23a26;
  --danger-wash: rgba(178, 58, 38, .1);
  --warning: #b0780f;
  --warning-wash: rgba(176, 120, 15, .1);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 16px 40px -24px rgba(10, 10, 9, .22);
}

[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
::selection { background: var(--accent-wash); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

.mono { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
@media (max-width: 720px) { .app-content { padding: 14px 14px 90px; } }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--border-soft);
  background: var(--surface); position: sticky; top: 0; z-index: 30;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .brand img { height: 34px; width: auto; flex-shrink: 0; }
.topbar .brand span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user-chip {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim);
  padding: 6px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-soft);
  flex-shrink: 0; white-space: nowrap;
}
.topbar .user-chip .role { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) {
  .topbar .brand span { display: none; }
  .topbar .user-chip span:not(.role) { display: none; }
}

/* ---------- sidebar (desktop) ---------- */
.sidebar {
  width: 224px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border-soft); padding: 18px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar .brand-block { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; }
.brand-block img { height: 38px; }
.sidebar .brand-block .name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; }
.sidebar .brand-block .sub { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--text-dim); font-size: 13.6px; font-weight: 600;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: var(--accent-wash); color: var(--accent); }
.nav-link .ico { width: 18px; text-align: center; }
.nav-group-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 16px 0 6px 12px; }

@media (max-width: 900px) {
  .sidebar { display: none; }
}

/* ---------- bottom tab bar (mobile / máquina) ---------- */
/* Only the 4 most-used shortcuts — everything else lives in the menu drawer
   (topbar hamburger). flex:1 + min-width:0 splits the bar evenly and lets
   items shrink instead of overflowing; overflow-x:auto is just a safety net
   in case a future item makes the row wider than the screen. */
.tabbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--border-soft);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  align-items: stretch; justify-content: space-around;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-faint); font-size: 10px; padding: 6px 4px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabbar a.active { color: var(--accent); }
.tabbar .ico { font-size: 18px; }
@media (max-width: 900px) { .tabbar { display: flex; } }

/* ---------- mobile nav drawer (everything the tab bar has no room for) ---------- */
.menu-btn { display: none; background: none; border: none; padding: 4px; margin: 0; color: var(--text); cursor: pointer; flex-shrink: 0; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }

.mobile-nav { position: fixed; inset: 0; z-index: 70; display: none; }
.mobile-nav.open { display: block; }
@media (min-width: 901px) { .mobile-nav.open { display: none; } }
.mobile-nav-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 9, .45); }
.mobile-nav-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 80%; max-width: 300px;
  background: var(--surface); box-shadow: var(--shadow); overflow-y: auto;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
}
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm); padding: 11px 18px; font-weight: 700; font-size: 13.8px;
  border: 1px solid transparent; cursor: pointer; transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { opacity: .92; }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { background: var(--danger-wash); color: var(--danger); border-color: var(--danger); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 22px; font-size: 15px; border-radius: var(--radius); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- cards / layout ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
/* min-width:0 on every grid item — a grid track normally refuses to shrink
   past its content's min-content width (e.g. a wide table), which pushed
   cards past the viewport edge on narrow phones. That overflow used to at
   least be reachable by scrolling the whole page sideways; once the page
   itself was locked to overflow-x:hidden (fixing the bottom nav bar), the
   same overflow became invisible and unreachable. Forcing min-width:0 here
   lets the card shrink to the track instead, so any leftover horizontal
   scroll happens inside .table-wrap, where it's actually reachable. */
.grid { display: grid; gap: 14px; min-width: 0; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.kpi .value { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; }
.kpi .delta { font-size: 12px; font-weight: 700; }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--danger); }

.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: 22px; }
.page-head .lede { color: var(--text-dim); font-size: 13.6px; margin-top: 4px; }

/* A row of action buttons (export PDF/Excel, etc). On a narrow phone,
   letting them wrap freely left several short buttons crammed on one line
   with the rest stranded below and a big empty gap to the right — stacking
   them to full width instead reads as one deliberate list. */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .btn-row { flex-direction: column; }
  .btn-row > .btn { width: 100%; }
}

/* PDF + Excel paired side by side, with a wider "Relatório de estoque"
   button of its own underneath — a stack of one pair plus one full row,
   at any screen size. */
.btn-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 18px; }
/* Two buttons that always stay side by side, splitting the row evenly,
   at any screen width — for pairs that should never stack on mobile. */
.btn-pair { display: flex; gap: 8px; }
.btn-pair .btn { flex: 1; }

/* Prev / page-label / Next spread edge to edge instead of huddling in the
   middle with empty margins on either side. */
.pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pagination-row .btn { flex: 0 0 auto; }
.pagination-label { color: var(--text-faint); font-size: 13px; }

/* Search + category filter: fills the row instead of a small input floating
   in a mostly-empty line. On mobile the search box takes its own full row,
   with the category select and Filtrar button splitting the one below. */
.search-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-row input.field { flex: 2 1 220px; min-width: 0; }
.search-row select.field { flex: 1 1 160px; min-width: 0; }
.search-row button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .search-row input.field { flex: 1 1 100%; }
  .search-row select.field { flex: 2; }
  .search-row button { flex: 1; }
}
.btn-row-actions .btn-wide { width: 100%; }

/* Period filter: preset chips + an optional custom date range. Same wrapping
   problem as .btn-row, plus the date inputs need to stay paired with their
   "até" label rather than wrapping apart from each other. */
.period-filter { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.period-filter .chip-row { justify-content: center; }
.period-filter .custom-range { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .period-filter { flex-direction: column; align-items: stretch; }
  .period-filter .chip-row { width: 100%; }
  .period-filter .custom-label { text-align: center; }
  .period-filter .custom-range { width: 100%; }
  .period-filter .custom-range .field { flex: 1 1 0; min-width: 0; }
  .period-filter .custom-range button { width: 100%; margin-top: 4px; }
}

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.badge-success { background: var(--success-wash); color: var(--success); }
.badge-danger { background: var(--danger-wash); color: var(--danger); }
.badge-warning { background: var(--warning-wash); color: var(--warning); }
.badge-muted { background: var(--surface-2); color: var(--text-faint); }

/* ---------- forms ---------- */
.field {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.field:focus { outline: none; border-color: var(--accent); }
.field-file { color: var(--text-dim); font-size: 13px; }
label.f-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.field-group { margin-bottom: 16px; }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.6px; }
table.data th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-2); }

/* ---------- messages ---------- */
.messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.msg { padding: 11px 16px; border-radius: var(--radius-sm); font-size: 13.4px; border: 1px solid var(--border); }
.msg.success { background: var(--success-wash); color: var(--success); border-color: transparent; }
.msg.error { background: var(--danger-wash); color: var(--danger); border-color: transparent; }
.msg.info { background: var(--accent-wash); color: var(--accent); border-color: transparent; }

/* ---------- PDV ---------- */
.pdv-shell { display: grid; grid-template-columns: 1fr 340px; gap: 0; height: calc(100vh - 58px); }
@media (max-width: 980px) { .pdv-shell { grid-template-columns: 1fr; height: auto; } }

.pdv-products { padding: 16px; overflow-y: auto; }
.pdv-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.pdv-search { flex: 1; min-width: 180px; position: relative; }
.pdv-search input { padding-left: 38px; }
.pdv-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  flex-shrink: 0; padding: 8px 14px; border-radius: 20px; font-size: 12.6px; font-weight: 700;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); cursor: pointer;
}
.chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-top: 14px; }
.product-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s ease, transform .08s ease;
}
.product-card:hover { border-color: var(--accent); }
.product-card:active { transform: scale(.97); }
.product-card .thumb {
  width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-faint); overflow: hidden;
}
/* contain, not cover: a tall bottle photo under "cover" fills the square by
   cropping most of the bottle away, which read as an ugly zoomed-in blob.
   contain shows the whole product with a little breathing room instead. */
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.product-card .name { font-size: 12.6px; font-weight: 700; line-height: 1.25; min-height: 2.4em; }
.product-card .price { font-size: 13px; color: var(--accent); font-weight: 800; }
.product-card .combo-tag { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }

.pdv-cart { background: var(--surface); border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; height: 100%; }
@media (max-width: 980px) {
  /* Fixed pixel sizes on purpose — vh/dvh units resize as the mobile
     browser's address bar and keyboard show/hide, which made this panel
     visibly jump and leave a gap. A fixed max-height (not a fixed height)
     never moves with the viewport, but still grows with real content (e.g.
     the vendor picker) instead of squeezing the footer off past its box,
     which is what let the tab bar render over the Pagamento button.
     padding-bottom reserves room for the cart's normal resting size, not
     its 400px worst case — reserving the worst case ate most of the screen
     and left room for only a couple of product cards. A cart with an
     unusually long item list scrolls internally instead. */
  .pdv-products { padding-bottom: 300px; }
  .pdv-cart {
    position: fixed; left: 0; right: 0; bottom: 62px; z-index: 35;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0; box-shadow: var(--shadow);
    height: auto; max-height: 400px;
  }
}
.pdv-cart .head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; flex-shrink: 0; }
.pdv-cart .seller-row { flex-shrink: 0; }
.pdv-cart .items { flex: 1 1 auto; min-height: 44px; overflow-y: auto; padding: 8px 16px; }
.pdv-cart .items.items-empty { flex: 0 0 auto; min-height: 0; padding: 0; }
.cart-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.cart-line .info { flex: 1; min-width: 0; }
.cart-line .info .n { font-size: 13px; font-weight: 700; }
.cart-line .info .p { font-size: 11.5px; color: var(--text-faint); }
.qty-ctrl { display: flex; align-items: center; gap: 6px; }
.qty-ctrl button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; }
.qty-ctrl .n { width: 22px; text-align: center; font-weight: 700; font-size: 13px; }
.cart-empty { padding: 14px 4px; text-align: center; color: var(--text-faint); font-size: 13px; }
.pdv-cart .foot { padding: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.total-row { display: flex; justify-content: space-between; font-size: 14px; }
.total-row.grand { font-size: 19px; font-weight: 800; font-family: 'Montserrat', sans-serif; color: var(--accent); }

/* payment method picker */
.pm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pm-btn { padding: 12px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 12.6px; cursor: pointer; text-align: center; }
.pm-btn.selected { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(10,8,6,.7); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .modal-backdrop { align-items: center; } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 20px 20px 0 0; width: 100%; max-width: 420px; padding: 22px; }
@media (min-width: 640px) { .modal { border-radius: 18px; } }

/* ---------- row delete button + confirmation card ---------- */
.btn-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--danger-wash);
  background: var(--danger-wash); color: var(--danger);
  cursor: pointer; padding: 0; transition: background .12s ease;
}
.btn-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Own classes instead of .modal-backdrop: that one is driven by Alpine's
   x-show in the PDV, which would fight a display rule set here. */
.confirm-backdrop {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 10, 9, .5);
  align-items: center; justify-content: center; padding: 20px;
}
.confirm-backdrop.is-open { display: flex; }
.confirm-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); width: 100%; max-width: 380px; padding: 26px 24px; text-align: center;
}
.confirm-card .mark {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--danger-wash); color: var(--danger);
  display: flex; align-items: center; justify-content: center;
}
.confirm-card h3 { font-size: 17px; margin-bottom: 6px; }
.confirm-card p { color: var(--text-dim); font-size: 13.5px; margin: 0 0 20px; }
.confirm-card p strong { color: var(--text); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.empty-state .ico { font-size: 36px; margin-bottom: 10px; }