/* =========================================================
   PDV – Painel Web (Template Profissional + Acessível)
   ========================================================= */

/* ===== Reset / Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  letter-spacing: .01em;
  overflow: hidden;
}
h1, h2, h3, h4, .app-title, .section-title, .panel-title, .card-value {
  font-family: "Barlow", "Poppins", "Segoe UI", sans-serif;
  letter-spacing: .01em;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* ===== Tokens (padronização) ===== */
:root{
  /* =====================================================
     Theme System (PayTech)
     - Primary: #FB9B36
     - Success: #9DFF2C
     - BG: #000
     ===================================================== */

  --bg: var(--pt-bg-base, #000000);
  --surface: var(--pt-bg-surface, #0f0f0f);
  --surface-2: var(--pt-bg-surface-2, #151515);
  --card: var(--surface);

  --text: var(--pt-text-primary, #ffffff);
  --muted: var(--pt-text-muted, rgba(255,255,255,0.72));
  --border: var(--pt-border-default, rgba(255,255,255,0.12));
  --border-2: var(--pt-border-strong, rgba(255,255,255,0.16));

  --primary: var(--pt-primary, #FB9B36);
  --primary-contrast: var(--pt-text-on-accent, #000000);
  --primary-rgb: var(--pt-primary-rgb, 251, 155, 54);

  --success: var(--pt-success, #9DFF2C);
  --success-contrast: var(--pt-text-on-accent, #000000);
  --success-rgb: var(--pt-success-rgb, 157, 255, 44);

  --danger: var(--pt-error, #ff4d4d);
  --danger-rgb: var(--pt-error-rgb, 255, 77, 77);

  --warning: var(--pt-warning, #ffcc00);
  --warning-rgb: var(--pt-warning-rgb, 255, 204, 0);

  --shadow-sm: 0 7px 17px rgba(0,0,0,.34);
  --shadow-md: 0 12px 32px rgba(0,0,0,.40);
  --shadow-glass: 0 14px 34px rgba(0,0,0,.25);
  --motion-fast: 180ms;
  --motion-base: 260ms;
  --motion-slow: 520ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --pad-1: 8px;
  --pad-2: 12px;
  --pad-3: 14px;
  --pad-4: 18px;

  /* =====================================================
     Legacy aliases (compatibilidade com CSS existente)
     ===================================================== */
  --brand-950: #000000;
  --brand-900: #0a0a0a;
  --brand-800: #0f0f0f;
  --brand-700: var(--primary);
  --brand-600: var(--primary);
  --brand-200: rgba(var(--primary-rgb), 0.18);

  --ok-700: #66cc00;
  --ok-600: #86ea1e;
  --ok-500: var(--success);

  --warn-600: #ffb300;
  --warn-500: var(--warning);

  --danger-600: #ff3b3b;
  --danger-500: var(--danger);
}

/* ===== Acessibilidade ===== */
.skip-link{
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  z-index: 999;
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip-link:focus{ transform: translateY(0); }

:focus-visible{
  outline: 3px solid rgba(var(--primary-rgb), .55);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Scrollbar (Chrome/Edge) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ===== Helpers ===== */
.hint { min-height: 18px; font-size: 12px; color: var(--muted); }
.page-sub { margin-top: 6px; font-size: 12px; color: var(--muted); }
.login-kicker{
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.64);
}
.login-highlights{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Badge */
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(var(--success-rgb), .18);
  color: var(--success);
  font-weight: 900;
  font-size: 12px;
}
.badge.warn{
  background: rgba(249, 115, 22, .16);
  color: #c2410c;
  border: 1px solid rgba(249, 115, 22, .35);
}

/* ===== Inputs / Fields ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; font-weight: 900; color: var(--muted); }

/* Unificação do padrão para input/select/textarea */
.input, .payment-select, .filters input[type="date"]{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
::placeholder{ color: rgba(255,255,255,.55); }
textarea.input{
  resize: vertical;
  min-height: 88px;
  line-height: 1.35;
}
.input:focus,
.payment-select:focus,
.filters input[type="date"]:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

/* ===== Login Form Upgrade ===== */
.login-form{
  gap: 14px;
}
.login-field{
  gap: 8px;
}
.login-field > span{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}
.login-input-shell{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(16,16,16,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.22);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.login-input-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
  transition: box-shadow var(--motion-fast) var(--ease-standard);
}
.login-input-shell:hover{
  border-color: rgba(255,255,255,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(18,18,18,.96);
  transform: translateY(-1px);
}
.login-input-shell:focus-within{
  border-color: var(--success);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.28);
}
.login-input-shell:focus-within::after{
  box-shadow:
    0 0 0 1px rgba(var(--success-rgb), .22),
    0 0 0 4px rgba(var(--success-rgb), .10),
    0 0 24px rgba(var(--success-rgb), .12);
}
.login-input-shell[data-state="error"],
.login-input-shell.is-error{
  border-color: rgba(var(--danger-rgb), .65);
}
.login-input-shell[data-state="success"],
.login-input-shell.is-success{
  border-color: rgba(var(--success-rgb), .7);
}
.login-input{
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 54px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}
.login-input::placeholder{
  color: rgba(255,255,255,.38);
}
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px rgba(16,16,16,.98) inset;
  transition: background-color 99999s ease-out 0s;
}
.login-input-shell--password{
  padding-right: 8px;
}
.login-input--password{
  padding-right: 8px;
}
.password-toggle{
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.64);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.password-toggle:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}
.password-toggle:active{
  transform: scale(.96);
}
.password-toggle:focus-visible{
  outline: none;
  color: #fff;
  background: rgba(var(--success-rgb), .12);
  box-shadow:
    0 0 0 1px rgba(var(--success-rgb), .35),
    0 0 0 4px rgba(var(--success-rgb), .12);
}
.password-toggle-icons{
  position: relative;
  width: 20px;
  height: 20px;
}
.password-icon{
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transform-origin: center;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    filter var(--motion-fast) var(--ease-standard);
}
.password-icon-hide{
  opacity: 0;
  transform: scale(.78) rotate(-10deg);
}
.password-icon-show{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.password-toggle.is-on{
  color: var(--success);
  background: rgba(var(--success-rgb), .10);
}
.password-toggle.is-on .password-icon-show{
  opacity: 0;
  transform: scale(.8) rotate(10deg);
}
.password-toggle.is-on .password-icon-hide{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.password-toggle:not(.is-on):hover .password-icon-show,
.password-toggle.is-on:hover .password-icon-hide{
  filter: drop-shadow(0 0 10px rgba(var(--success-rgb), .18));
}

/* ===== Buttons ===== */
.btn-primary{
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .02em;
  background: var(--primary);
  color: var(--primary-contrast);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), .18);
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
.btn-primary:hover{ box-shadow: 0 14px 26px rgba(var(--primary-rgb), .22); filter: saturate(1.06) brightness(.98); }
.btn-primary:active,
.btn-outline:active{ transform: translateY(1px); }
.btn-primary.small,
.btn-outline.small{ padding: 8px 12px; font-size: 12px; }
.btn-primary.full,
.btn-outline.full{ width: 100%; }

.btn-outline{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  transition:
    background var(--motion-fast) ease,
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
.btn-outline:hover{ background: rgba(255,255,255,.06); border-color: rgba(var(--primary-rgb), .35); }

.btn-ghost{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.60);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  transition:
    background var(--motion-fast) ease,
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.75); }
.btn-ghost:active{ transform: translateY(1px); }

.btn-ghost.small{
  border-color: var(--border-2);
  color: var(--text);
  background: var(--surface-2);
}
.btn-ghost.small:hover{ background: rgba(255,255,255,.06); }

.btn-link{
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 0 0;
  cursor: pointer;
  color: var(--primary);
  font-weight: 900;
  text-decoration: underline;
}
.btn-link:hover{ filter: brightness(0.95); }
.btn-link:active{ transform: translateY(1px); }
.btn-primary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-link:hover{
  transform: translateY(-1px);
}

.icon-btn{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(var(--primary-rgb), .25); }
.icon-btn:active{ transform: translateY(1px); }

/* ===== Chips / Tags (novo – usado em tabelas e status) ===== */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  white-space: nowrap;
}
.chip-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.chip.ok{
  border-color: rgba(var(--success-rgb), .35);
  background: rgba(var(--success-rgb), .10);
  color: var(--success);
}
.chip.ok .chip-dot{ background: var(--ok-500); }
.chip.danger{
  border-color: rgba(var(--danger-rgb), .35);
  background: rgba(var(--danger-rgb), .10);
  color: var(--danger);
}
.chip.danger .chip-dot{ background: var(--danger-500); }
.chip.warn{
  border-color: rgba(var(--warning-rgb), .35);
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning);
}
.chip.warn .chip-dot{ background: var(--warn-500); }

/* ===== Login ===== */
.login-box{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, #050505 0%, #090909 44%, #040404 100%);
  overflow: hidden;
  isolation: isolate;
}
.login-box::before,
.login-box::after{
  content: "";
  position: fixed;
  inset: -14%;
  pointer-events: none;
  z-index: 0;
}
.login-box::before{
  background:
    radial-gradient(56rem 34rem at 12% 14%, rgba(251,155,54,.16), transparent 62%),
    radial-gradient(48rem 32rem at 84% 10%, rgba(157,255,44,.12), transparent 60%),
    radial-gradient(42rem 28rem at 50% 112%, rgba(251,155,54,.08), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 32%, rgba(255,255,255,.01) 68%, transparent 100%);
  filter: blur(18px) saturate(108%);
  opacity: .96;
  animation: loginAmbientDrift 18s ease-in-out infinite alternate;
}
.login-box::after{
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.045), transparent 24%),
    radial-gradient(circle at top right, rgba(255,255,255,.025), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 20%, transparent 78%, rgba(255,255,255,.012));
  opacity: .82;
  mix-blend-mode: screen;
}
.login-box > *{
  position: relative;
  z-index: 1;
}
.login-card{
  width: min(440px, 96vw);
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(10,10,10,.82);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glass);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.login-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .8), rgba(var(--success-rgb), .55), transparent);
  opacity: .8;
}
.login-card::after{
  content: "";
  position: absolute;
  inset: auto -8% -24% auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--success-rgb), .14), transparent 60%);
  filter: blur(18px);
  pointer-events: none;
}

@keyframes loginAmbientDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0, 10px, 0) scale(1.018);
  }
}

@media (prefers-reduced-motion: reduce){
  .login-box::before{
    animation: none;
  }
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-text h2{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.42));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(255,255,255,.08);
}
.brand-mark{
  width: 52px; height: 52px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--primary-rgb), 1), rgba(210,120,30,1));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow:
    0 12px 28px rgba(var(--primary-rgb), .24),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow: hidden;
}
.brand-mark-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.login-card h2{ font-size: 22px; font-weight: 900; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }

.form{ display: flex; flex-direction: column; gap: 12px; }
.login-foot{ margin-top: 4px; }

/* Google Identity Services (Login com Google) */
#googleLoginBoxLogin,
#googleLoginBoxRegister{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

#googleBtnLogin,
#googleBtnRegister{
  width: 100%;
  display: block;
}

/* O GIS injeta uma DIV interna; forçamos ocupação total do card */
#googleBtnLogin > div,
#googleBtnRegister > div{
  width: 100% !important;
  max-width: none;
  margin: 0;
  display: flex;
  justify-content: stretch;
}

#googleBtnLogin iframe,
#googleBtnRegister iframe{
  width: 100% !important;
}

/* ===== App full screen ===== */
.app{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 18%),
    var(--bg);
}

/* ===== Top bar ===== */
.top-bar{
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(8,8,8,.9);
  color: var(--text);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-glass);
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ===== Neon Bar (scanner) =====
   Mantém a altura fina do layout (1px) e aplica glow + varredura suave.
*/
.neon-bar{
  position: relative;
  width: 100%;
  height: 1px; /* preserva a altura original */
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary, #FB9B36),
    var(--accent, var(--success, #9DFF2C)),
    var(--primary, #FB9B36),
    transparent
  );
  overflow: hidden;
  box-shadow:
    0 0 4px rgba(251, 155, 54, 0.32),
    0 0 8px rgba(157, 255, 44, 0.14);
  opacity: 0.95;
}

.neon-bar::before{
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.95),
    transparent
  );
  animation: neonMove 2.2s linear infinite;
  filter: blur(1.5px);
  opacity: 0.85;
}

@keyframes neonMove{
  0% { left: -30%; }
  100% { left: 100%; }
}
/* Linha do topo: agora renderizada via HTML com `.neon-bar` */
.maintenance-banner{
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  background: rgba(251, 155, 54, 0.10);
  border-bottom: 1px solid rgba(251, 155, 54, 0.22);
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.maintenance-banner strong{
  color: var(--primary);
}
.ops-strip{
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(220px, 1.2fr);
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--pt-secondary-rgb, 251,155,54), .08), transparent 48%),
    radial-gradient(120% 120% at 100% 0%, rgba(var(--pt-primary-rgb, 157,255,44), .06), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(7,9,13,.94);
}
.ops-chip{
  --chip-accent: rgba(255,255,255,.88);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.02);
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease;
}
.ops-chip:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.ops-chip:active{
  transform: translateY(0);
}
.ops-chip--primary{
  --chip-accent: var(--pt-success);
  border-color: rgba(var(--pt-success-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--pt-success-rgb), .14), rgba(var(--pt-success-rgb), .05));
  box-shadow: 0 0 0 1px rgba(var(--pt-success-rgb), .08), 0 8px 16px rgba(0,0,0,.14);
}
.ops-chip.is-ok{
  --chip-accent: var(--pt-success);
  border-color: rgba(var(--pt-success-rgb), .34);
  background: linear-gradient(135deg, rgba(var(--pt-success-rgb), .14), rgba(var(--pt-success-rgb), .05));
  box-shadow: 0 0 0 1px rgba(var(--pt-success-rgb), .07), 0 8px 14px rgba(0,0,0,.14);
}
.ops-chip.is-warn{
  --chip-accent: var(--pt-warning);
  border-color: rgba(var(--pt-primary-rgb), .34);
  background: linear-gradient(135deg, rgba(var(--pt-primary-rgb), .14), rgba(var(--pt-primary-rgb), .05));
  box-shadow: 0 0 0 1px rgba(var(--pt-primary-rgb), .07), 0 8px 14px rgba(0,0,0,.14);
}
.ops-chip.is-error{
  --chip-accent: var(--pt-error);
  border-color: rgba(var(--pt-error-rgb), .34);
  background: linear-gradient(135deg, rgba(var(--pt-error-rgb), .14), rgba(var(--pt-error-rgb), .05));
  box-shadow: 0 0 0 1px rgba(var(--pt-error-rgb), .06), 0 8px 14px rgba(0,0,0,.14);
}
.ops-chip--logs{
  align-items: flex-start;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--pt-secondary-rgb, 251,155,54), .08), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(255,255,255,.02);
  border-color: rgba(var(--pt-secondary-rgb, 251,155,54), .22);
  box-shadow:
    0 10px 20px rgba(0,0,0,.17),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.ops-card-content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ops-card-icon{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--chip-accent);
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(255,255,255,.03);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 6px 14px rgba(0,0,0,.18);
}
.ops-card-icon svg{
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ops-chip--primary.is-online .ops-card-icon{
  animation: opsPulse 2s ease-in-out infinite;
}
.ops-label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  white-space: nowrap;
}
.ops-value{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-log-list{
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  padding-right: 2px;
}
.ops-log-list li{
  font-size: 12px;
  color: rgba(255,255,255,.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  padding: 6px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.ops-log-list li:hover{
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(255,255,255,.03);
}
.ops-log-list li .log-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 7px;
  background: rgba(255,255,255,.42);
}
.ops-log-list li.log-success{
  border-color: rgba(var(--pt-success-rgb), .24);
  background: rgba(var(--pt-success-rgb), .09);
}
.ops-log-list li.log-success .log-dot{
  background: var(--pt-success);
}
.ops-log-list li.log-warn{
  border-color: rgba(var(--pt-primary-rgb), .28);
  background: rgba(var(--pt-primary-rgb), .11);
}
.ops-log-list li.log-warn .log-dot{
  background: var(--pt-warning);
}
.ops-log-list li.log-error{
  border-color: rgba(var(--pt-error-rgb), .28);
  background: rgba(var(--pt-error-rgb), .10);
}
.ops-log-list li.log-error .log-dot{
  background: var(--pt-error);
}
.ops-count{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
}
.ops-count-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.ops-count-dot.ok{ background: var(--pt-success); }
.ops-count-dot.pending{ background: var(--pt-warning); }
.ops-count-dot.fail{ background: var(--pt-error); }
.global-alert{
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  border-bottom: 1px solid transparent;
}
.global-alert--offline{
  background: rgba(var(--pt-error-rgb), .14);
  border-color: rgba(var(--pt-error-rgb), .35);
  color: rgba(254, 202, 202, .96);
}

/* =========================
   Estoque (toggle stockEnabled)
========================= */

body.stock-disabled .product-stock{
  display: none !important;
}

body.stock-disabled #productsTable th.stock-col,
body.stock-disabled #productsTable td.stock-col{
  display: none !important;
}

body.stock-disabled .stock-field{
  display: none !important;
}
.app-title{ font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.subtitle{ font-size: 12px; opacity: .74; text-transform: uppercase; letter-spacing: .12em; }


.top-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.top-left-toggle{
  width: fit-content;
  padding: 6px 10px 6px 0;
  border-radius: 18px;
  cursor: pointer;
  transition: background .18s ease;
}
.top-left-toggle:hover{
  background: rgba(255,255,255,.03);
}
.top-left-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.merchant-logo{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

.top-right{ display: flex; align-items: center; gap: 10px; }
#logoutBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-color: rgba(var(--primary-rgb), .36);
  background: rgba(var(--primary-rgb), .10);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
#logoutBtn:hover{
  background: rgba(var(--primary-rgb), .16);
  border-color: rgba(var(--primary-rgb), .56);
  box-shadow:
    0 12px 26px rgba(0,0,0,.24),
    0 0 0 3px rgba(var(--primary-rgb), .12);
}
.logout-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7v-2h7V5h-7V3Zm1.707 4.293L10.293 8.707 12.586 11H3v2h9.586l-2.293 2.293 1.414 1.414L16.414 12l-4.707-4.707Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7v-2h7V5h-7V3Zm1.707 4.293L10.293 8.707 12.586 11H3v2h9.586l-2.293 2.293 1.414 1.414L16.414 12l-4.707-4.707Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.status-text{ font-size: 12px; opacity: .95; }
@keyframes opsPulse{
  0%, 100%{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 0 rgba(34,197,94,0);
  }
  50%{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 6px rgba(34,197,94,.16);
  }
}

/* ===== Shell (sidebar + content) ===== */
.shell{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 250px 1fr;
  transition: grid-template-columns var(--motion-base) var(--ease-standard);
  overflow: hidden;
  align-items: stretch;
}

/* ===== Sidebar ===== */
.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    rgba(9,9,9,.94);
  color: #fff;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: padding var(--motion-base) var(--ease-standard), border-color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

.sidebar::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .65), rgba(var(--success-rgb), .08), transparent);
}

.sidebar-title{ font-size: 11px; font-weight: 900; opacity: .72; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .18em; }
.nav{ display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }

.nav-item{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  padding: 13px 15px;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.nav-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  color: #fff;
  transform: scale(1.03);
}
.nav-item:active{ transform: translateY(1px) scale(1.01); }

.nav-icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  color: rgba(255,255,255,.88);
  opacity: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.08));
  transition: color .2s ease, transform .2s ease, opacity .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-icon svg{
  width: 20px;
  height: 20px;
  display: block;
}
.nav-label{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
}
.nav-item.active{
  background:
    linear-gradient(90deg, rgba(var(--primary-rgb), .18), rgba(var(--primary-rgb), .08) 62%, transparent);
  color: #fff;
  border-color: rgba(var(--success-rgb), .48);
  box-shadow:
    inset 0 0 0 1px rgba(var(--success-rgb), .12),
    0 14px 28px rgba(0,0,0,.18);
}
.nav-item:hover .nav-icon{
  color: rgba(255,255,255,.98);
  opacity: 1;
  transform: translateX(1px);
  border-color: rgba(255,255,255,.22);
}
.nav-item.active .nav-icon{
  color: #84cc16;
  opacity: 1;
  background: rgba(132,204,22,.15);
  border-color: rgba(132,204,22,.45);
  box-shadow: 0 0 0 1px rgba(132,204,22,.15), 0 0 10px rgba(132,204,22,.18);
  filter: drop-shadow(0 0 8px rgba(132,204,22,.35));
}
.nav-item.active .nav-label{
  font-weight: 800;
}

.sidebar-foot{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.15);
  position: relative;
  z-index: 1;
}
.mini{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mini-label{ font-size: 11px; opacity: .90; font-weight: 900; }
.mini-value{ font-size: 12px; font-weight: 900; }

/* ===== Content ===== */
.content{
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app.sidebar-collapsed .shell{
  grid-template-columns: 96px 1fr;
}
.app.sidebar-collapsed .sidebar{
  padding-left: 12px;
  padding-right: 12px;
}
.app.sidebar-collapsed .sidebar-title,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .sidebar-foot{
  opacity: 0;
  pointer-events: none;
}
.app.sidebar-collapsed .sidebar-title,
.app.sidebar-collapsed .sidebar-foot{
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}
.app.sidebar-collapsed .nav-item{
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.app.sidebar-collapsed .nav-icon{
  transform: none;
}
.app.sidebar-collapsed .nav-item::before{
  inset: auto 16px 8px 16px;
  transform-origin: center;
}

@media (max-width: 980px) {
  .app.sidebar-collapsed .shell{ grid-template-columns: 1fr; }
  .app.sidebar-collapsed .sidebar{
    display: none;
  }
}

/* ===== Pages ===== */
.tab-page{ display: none; flex: 1; min-height: 0; }
.tab-page.active{ display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* ===== Page / Header / Panel ===== */
.page{ flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--pad-3); }
.page{
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.page-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(11,11,11,.72);
  box-shadow: var(--shadow-glass);
}
.page-header h2{ font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.page-actions{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.store-header{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

#storeName{
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text, #ffffff);
  letter-spacing: 0.5px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 420px){
  #storeName{ font-size: 1.35rem; }
}

.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow-glass);
  padding: 16px;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.08);
}

/* ======= NOVOS: Painéis "soft" e títulos internos (Configurações) ======= */
.panel-soft{
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
}
.panel-title{
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
}

/* ===== Category Bar ===== */
.category-bar{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    rgba(12,12,12,.84);
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-glass);
}
.category{
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .12em;
  transition: transform .06s ease, background .12s ease, box-shadow .18s ease;
}
.category:hover{ background: rgba(255,255,255,.08); box-shadow: 0 10px 20px rgba(0,0,0,.16); }
.category:active{ transform: translateY(1px); }
.category.active{
  background: linear-gradient(90deg, rgba(var(--primary-rgb), .22), rgba(var(--primary-rgb), .08));
  border: 1px solid rgba(var(--primary-rgb), .24);
  color: var(--text);
}
.sales-runtime-strip{
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.sales-runtime-chip{
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: 9px 10px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.sales-runtime-chip.is-ok{
  border-color: rgba(34,197,94,.32);
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.04));
}
.sales-runtime-chip.is-warn{
  border-color: rgba(251,155,54,.36);
  background: linear-gradient(135deg, rgba(251,155,54,.12), rgba(251,155,54,.05));
}
.sales-runtime-chip.is-error{
  border-color: rgba(239,68,68,.34);
  background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.05));
}
.sales-runtime-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(255,255,255,.60);
  font-weight: 800;
}
.sales-runtime-value{
  font-size: 12px;
  color: rgba(255,255,255,.95);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Sales layout ===== */
.layout{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 12px;
  padding: 12px;
}

.products-section{ min-height: 0; overflow: auto; background: transparent; }
.section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.section-title{ font-size: 14px; font-weight: 900; color: var(--text); }
.section-title,
.page-header h2,
.panel-title{
  text-wrap: balance;
}

.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Product card */
.product-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--card);
  border-radius: 22px;
  padding: 12px;
  text-align: left;
  box-shadow: var(--shadow-glass);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card.product-card-added{
  animation: productAdded .26s ease;
}
.product-image{
  width: 100%;
  height: 142px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--border);
  margin-bottom: 10px;
}
.product-name{ font-size: 15px; font-weight: 900; margin-bottom: 6px; min-height: 2.4em; color: #fff; line-height: 1.25; }
.product-price{ font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 8px; }
.product-stock{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.product-stock.is-low{ color: #c2410c; font-weight: 700; }
.product-add-btn{
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(var(--pt-secondary-rgb, 251,155,54), .45);
  background: linear-gradient(180deg, rgba(var(--pt-secondary-rgb, 251,155,54), .18), rgba(var(--pt-secondary-rgb, 251,155,54), .11));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.product-add-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--pt-secondary-rgb, 251,155,54), .62);
  box-shadow: 0 8px 18px rgba(var(--pt-secondary-rgb, 251,155,54), .22);
}
.product-add-btn:active{
  transform: translateY(0) scale(.99);
}

/* Cart */
.cart-section{
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow-glass);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.08);
}
.cart-section.cart-updated{
  animation: cartUpdated .26s ease;
}
.cart-section h2, .cart-section h3{ font-size: 16px; font-weight: 900; }

.cart-items{
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 10px;
  padding-bottom: 10px;
}
.cart-item{ display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.cart-item{
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.cart-item-info{ display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.cart-item-name{ font-weight: 900; font-size: 14px; color: #fff; }
.cart-item-details{ font-size: 12px; color: rgba(255,255,255,.74); }
.cart-item-subtotal{ font-size: 14px; font-weight: 900; color: #fff; }

.cart-item-actions{ display: flex; align-items: center; gap: 8px; }
.qty-btn{
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  transition: background .12s ease, border-color .12s ease;
}
.qty-btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(var(--primary-rgb), .25); }
.qty-value{ min-width: 22px; text-align: center; font-weight: 900; font-size: 15px; }
.remove-btn{
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: var(--danger-500);
  cursor: pointer;
  font-weight: 900;
  transition: background .12s ease, transform .06s ease;
}
.remove-btn:hover{ background: rgba(239,68,68,.12); }
.remove-btn:active{ transform: translateY(1px); }

.cart-summary{ display: flex; flex-direction: column; gap: 10px; }
.cart-summary{
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.88) 22%, rgba(10,10,10,.96));
  backdrop-filter: blur(2px);
}
.summary-row{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.summary-total{ font-size: 28px; font-weight: 900; color: #fff; letter-spacing: .02em; }

.cart-actions{ display: flex; flex-direction: column; gap: 10px; }
.btn-finalize{
  background: linear-gradient(
    180deg,
    rgba(var(--pt-secondary-rgb, 251,155,54), 1),
    rgba(var(--pt-secondary-rgb, 251,155,54), .82)
  );
  color: var(--pt-text-on-accent, #111);
  border-color: rgba(var(--pt-secondary-rgb, 251,155,54), .62);
  box-shadow:
    0 18px 34px rgba(var(--pt-secondary-rgb, 251,155,54), .24),
    inset 0 0 0 1px rgba(255,255,255,.35);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  min-height: 56px;
  font-size: 15px;
}
.btn-finalize:hover{
  transform: translateY(-1px);
  filter: saturate(1.04) brightness(1.02);
  box-shadow:
    0 18px 28px rgba(var(--pt-secondary-rgb, 251,155,54), .24),
    inset 0 0 0 1px rgba(255,255,255,.45);
}
.btn-finalize:active{
  transform: translateY(0);
  filter: saturate(1.02) brightness(.98);
}
.btn-finalize:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--pt-secondary-rgb, 251,155,54), .28),
    0 16px 30px rgba(var(--pt-secondary-rgb, 251,155,54), .24),
    inset 0 0 0 1px rgba(255,255,255,.44);
}
#cartMessage{
  min-height: 20px;
  border-radius: 10px;
  padding: 4px 8px;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
#cartMessage.is-success{
  color: #86efac;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
}
#cartMessage.is-warn{
  color: #fcd34d;
  background: rgba(251,155,54,.12);
  border: 1px solid rgba(251,155,54,.28);
}
#cartMessage.is-error{
  color: #fca5a5;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.28);
}
.pos-toast-stack{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.pos-toast{
  min-width: 220px;
  max-width: min(340px, calc(100vw - 28px));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,10,.96);
  box-shadow: 0 10px 18px rgba(0,0,0,.26);
  color: rgba(255,255,255,.96);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  transform: translateY(0);
  opacity: 1;
  transition: opacity .22s ease, transform .22s ease;
}
.pos-toast.is-success{
  border-color: rgba(34,197,94,.42);
  background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(12,12,12,.95));
}
.pos-toast.is-warn{
  border-color: rgba(251,155,54,.46);
  background: linear-gradient(135deg, rgba(251,155,54,.18), rgba(12,12,12,.95));
}
.pos-toast.is-error{
  border-color: rgba(239,68,68,.46);
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(12,12,12,.95));
}
.pos-toast.is-leaving{
  opacity: 0;
  transform: translateY(8px);
}

/* ===== Reports ===== */
.reports{ flex: 1; min-height: 0; padding: var(--pad-3); overflow: auto; }
.reports-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.filters{ display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filters label{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}

.cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow-glass);
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
}
.card-title{ font-size: 12px; color: var(--muted); font-weight: 900; }
.card-value{ font-size: 24px; font-weight: 900; margin-top: 8px; }
.card-title{ text-transform: uppercase; letter-spacing: .1em; }

.two-cols{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  min-height: 0;
}
.list{ display: flex; flex-direction: column; gap: 8px; }
.list-row{ display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.list-row strong{ font-weight: 900; }
.list-empty{ font-size: 12px; color: var(--muted); padding: 6px 0; }

.table-wrap{
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(8,8,8,.82);
  box-shadow: var(--shadow-glass);
}
.table-wrap,
.panel,
.card,
.product-card,
.cart-section,
.page-header,
.category-bar{
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
.quick-sale-toggle.is-active{
  border-color: rgba(var(--pt-secondary-rgb, 251,155,54), .52);
  background: rgba(var(--pt-secondary-rgb, 251,155,54), .10);
  color: #fff;
}
#appRoot.quick-sale-mode[data-active-tab="sales"] .ops-strip,
#appRoot.quick-sale-mode[data-active-tab="sales"] .maintenance-banner,
#appRoot.quick-sale-mode[data-active-tab="sales"] .global-alert,
#appRoot.quick-sale-mode[data-active-tab="sales"] .neon-bar{
  display: none;
}
#appRoot.quick-sale-mode[data-active-tab="sales"] #tab-sales .page-header{
  padding: 12px 14px;
}
#appRoot.quick-sale-mode[data-active-tab="sales"] #tab-sales .section-head{
  margin-bottom: 8px;
}
#appRoot.quick-sale-mode[data-active-tab="sales"] #tab-sales .layout{
  gap: 10px;
  padding-top: 8px;
}
#appRoot.quick-sale-mode[data-active-tab="sales"] #tab-sales .products-section{
  scrollbar-width: thin;
}
.table{ width: 100%; border-collapse: collapse; }
.table th, .table td{ padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.table th{
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

/* ===== Ações em tabela (novo – usado para Produtos/Usuários) ===== */
.table-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.action-btn{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  font-size: 12px;
  transition: background .12s ease, transform .06s ease, border-color .12s ease;
}
.action-btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(var(--primary-rgb), .22); }
.action-btn:active{ transform: translateY(1px); }
.action-btn.primary{
  border-color: rgba(var(--primary-rgb), .35);
  background: rgba(var(--primary-rgb), .12);
  color: var(--text);
}
.action-btn.primary:hover{ background: rgba(var(--primary-rgb), .16); }
.action-btn.danger{
  border-color: rgba(var(--danger-rgb), .35);
  background: rgba(var(--danger-rgb), .10);
  color: var(--danger);
}
.action-btn.danger:hover{ background: rgba(var(--danger-rgb), .14); }

/* ===== Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}
.modal-card{
  width: min(720px, 96vw);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 14px;
  border: 1px solid var(--border);
}
.modal-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.modal-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* =========================================================
   NOVOS: Users tab (tabela + modal + destaque visual)
   ========================================================= */
#tab-users .panel{
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(var(--primary-rgb), .10), transparent 60%),
    radial-gradient(900px 320px at 90% 0%, rgba(var(--success-rgb), .08), transparent 60%),
    var(--card);
}

#tab-users .table th{
  background: rgba(255,255,255,.04);
}

#tab-users .page-sub{
  max-width: 820px;
}

#tab-users .table td{
  vertical-align: middle;
}

/* =========================================================
   NOVOS: Settings (Merchant Settings) - Switch/Toggle e Layout
   ========================================================= */

.settings-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* mantém compatível com seus grids; usado também dentro de Configurações */
.settings-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.settings-grid--spaced{
  margin-top: 12px;
}

.settings-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.settings-row--spaced{
  margin-top: 10px;
}
.panel--spaced{
  margin-top: 12px;
}
.field--full{
  grid-column: 1 / -1;
}
.field--max-320{
  max-width: 320px;
}
.hint--spaced{
  margin-top: 10px;
}
.settings-hidden-title{
  display: none;
}
.form-actions-end{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.settings-save-state{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-save-state.is-success{
  border-color: rgba(var(--success-rgb), .45);
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
}
.settings-save-state.is-warn{
  border-color: rgba(var(--warning-rgb), .42);
  background: rgba(var(--warning-rgb), .12);
  color: #ffd37f;
}
.settings-save-state.is-error{
  border-color: rgba(var(--danger-rgb), .45);
  background: rgba(var(--danger-rgb), .12);
  color: #ffb4b4;
}

/* Toggle acessível */
.toggle{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.toggle:hover{
  background: rgba(255,255,255,.10);
}
.toggle:active{
  transform: translateY(1px);
}

/* escondemos o checkbox visualmente, mantendo acessível */
.toggle input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* UI do switch */
.toggle-ui{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  position: relative;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.toggle-ui::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--text);
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
  transition: left .15s ease;
}

/* texto do toggle */
.toggle-text{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.toggle-text strong{
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}
.toggle-text .hint{
  min-height: auto;
}
.settings-role-perms{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.settings-readonly-toggle{
  opacity: .86;
}
.settings-readonly-toggle input:disabled + .toggle-ui{
  opacity: .85;
}
#settingsMsg{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
}
#settingsMsg.is-success{
  border-color: rgba(var(--success-rgb), .36);
  background: rgba(var(--success-rgb), .10);
  color: #d8ffae;
}
#settingsMsg.is-warn{
  border-color: rgba(var(--warning-rgb), .38);
  background: rgba(var(--warning-rgb), .10);
  color: #ffe2a8;
}
#settingsMsg.is-error{
  border-color: rgba(var(--danger-rgb), .40);
  background: rgba(var(--danger-rgb), .10);
  color: #ffbebf;
}

/* Estado checked (o input vem antes do .toggle-ui) */
.toggle input:checked + .toggle-ui{
  background: rgba(var(--success-rgb), .25);
  border-color: rgba(var(--success-rgb), .40);
  box-shadow: 0 0 0 3px rgba(var(--success-rgb), .18);
}
.toggle input:checked + .toggle-ui::after{
  left: 21px;
}

/* Foco por teclado */
.toggle input:focus-visible + .toggle-ui{
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
  border-color: rgba(var(--primary-rgb), .35);
}

/* Logo do Estabelecimento (Configurações) */
.logo-settings{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
}
.logo-preview{
  width: 96px;
  height: 96px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.logo-placeholder{
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 10px;
}
.logo-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

/* Para cards dentro de Configurações ficarem equilibrados */
#tab-settings .card .hint{
  margin-top: 6px;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .sales-runtime-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ops-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ops-chip--logs{
    grid-column: 1 / -1;
  }
  .shell{ grid-template-columns: 1fr; }
  .sidebar{
    position: relative;
    top: auto;
    height: auto;
    max-height: 42vh;
  }
  .layout{ grid-template-columns: 1fr; }
  .two-cols{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .modal-grid{ grid-template-columns: 1fr; }

  /* settings grid no mobile */
  .settings-grid{ grid-template-columns: 1fr; }

  .merchant-logo{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .logo-settings{ grid-template-columns: 1fr; }
  .logo-preview{ width: 88px; height: 88px; }
}
@media (max-width: 680px) {
  .sales-runtime-strip{
    grid-template-columns: 1fr;
  }
  .ops-strip{
    grid-template-columns: 1fr;
  }
  .global-alert{
    font-size: 11px;
  }
}

@keyframes productAdded{
  0%{ transform: scale(.985); box-shadow: 0 0 0 rgba(var(--pt-secondary-rgb), 0); }
  60%{ transform: scale(1.01); box-shadow: 0 0 0 2px rgba(var(--pt-secondary-rgb), .24); }
  100%{ transform: scale(1); box-shadow: none; }
}
@keyframes cartUpdated{
  0%{ box-shadow: var(--shadow-glass); }
  50%{ box-shadow: 0 0 0 1px rgba(var(--pt-secondary-rgb), .28), 0 0 0 4px rgba(var(--pt-secondary-rgb), .10), var(--shadow-glass); }
  100%{ box-shadow: var(--shadow-glass); }
}
/* =========================================================
   AUTH TABS (Entrar / Criar Conta)
   ========================================================= */

.auth-tabs{
  display: flex;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.auth-tab{
  flex: 1;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: rgba(247, 247, 247, 0.92);
  color: var(--primary-contrast);
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.auth-tab:hover{
  background: rgba(239, 241, 245, 0.95);
}

.auth-tab:active{
  transform: translateY(1px);
}

.auth-tab.active{
  background: linear-gradient(90deg, var(--brand-600), var(--brand-700));
  color: var(--primary-contrast);
  border-color: rgba(var(--pt-primary-rgb), .45);
  box-shadow: 0 8px 18px rgba(var(--pt-primary-rgb), .22);
}

/* Painéis de autenticação */
.auth-pane{
  display: none;
}

.auth-pane.active{
  display: block;
}
/* ========================================================= */ 

/* =========================================================
   PayTech Fintech UI Normalization Layer
   - Touch-friendly controls
   - Consistent component density
   ========================================================= */

button,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-neon,
.action-btn,
.qty-btn,
.remove-btn {
  min-height: 48px;
}

.btn-primary,
.btn-outline,
.btn-ghost,
.btn-neon {
  border-radius: var(--pt-radius-md);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.input,
.payment-select {
  min-height: 48px;
}

.table th,
.table td {
  min-height: 48px;
}

.card,
.panel,
.modal,
.ops-chip,
.product-card,
.cart-item {
  border-color: var(--border-color);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .62;
  cursor: not-allowed;
  color: var(--disabled-color);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--pt-focus-ring);
}

/* =========================================================
   MainActivity Identity Layer (Android <-> Painel Web)
   ========================================================= */
body{
  background:
    radial-gradient(52rem 28rem at 10% 0%, rgba(var(--pt-primary-rgb), .14), transparent 62%),
    radial-gradient(46rem 30rem at 95% 0%, rgba(var(--pt-success-rgb), .10), transparent 60%),
    radial-gradient(40rem 24rem at 50% 110%, rgba(var(--pt-accent-rgb), .08), transparent 64%),
    var(--bg);
}

.top-bar{
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(6,6,6,.94);
  border-bottom: 1px solid rgba(var(--pt-primary-rgb), .24);
  box-shadow: 0 14px 34px rgba(0,0,0,.46);
}

.sidebar{
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--pt-primary-rgb), .08), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(8,8,8,.96);
}

.page-header,
.panel,
.card,
.table-wrap,
.category-bar{
  border-color: rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    var(--card);
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
}

.page-header h2,
.panel-title{
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.table th{
  background:
    linear-gradient(180deg, rgba(var(--pt-primary-rgb), .16), rgba(var(--pt-primary-rgb), .06));
  border-bottom-color: rgba(var(--pt-primary-rgb), .20);
}

.table td{
  border-bottom-color: rgba(255,255,255,.07);
}

.btn-primary{
  background: linear-gradient(
    180deg,
    rgba(var(--pt-primary-rgb), 1),
    rgba(var(--pt-primary-rgb), .84)
  );
  color: #000;
  border: 1px solid rgba(var(--pt-primary-rgb), .68);
  box-shadow:
    0 10px 24px rgba(var(--pt-primary-rgb), .24),
    inset 0 0 0 1px rgba(255,255,255,.26);
}

.btn-outline{
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.18);
  color: #f5f5f5;
}

.btn-outline:hover{
  background: rgba(var(--pt-accent-rgb), .12);
  border-color: rgba(var(--pt-accent-rgb), .48);
}

.action-btn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}

.badge{
  background: rgba(var(--pt-success-rgb), .14);
  color: var(--pt-success);
  border: 1px solid rgba(var(--pt-success-rgb), .28);
}

.badge.warn{
  background: rgba(var(--pt-primary-rgb), .14);
  color: var(--pt-primary);
  border-color: rgba(var(--pt-primary-rgb), .30);
}

.input:focus,
.payment-select:focus,
.filters input[type="date"]:focus{
  border-color: rgba(var(--pt-primary-rgb), .7);
  box-shadow: 0 0 0 3px rgba(var(--pt-primary-rgb), .24);
}

#productsTable button[data-act="edit"]{
  background: linear-gradient(
    180deg,
    rgba(var(--pt-accent-rgb), 1),
    rgba(var(--pt-accent-rgb), .84)
  );
  color: #fff;
  border: 1px solid rgba(var(--pt-accent-rgb), .68);
  box-shadow: 0 10px 18px rgba(var(--pt-accent-rgb), .26);
}

#productsTable button[data-act="edit"]:hover{
  filter: brightness(1.04);
  box-shadow: 0 12px 24px rgba(var(--pt-accent-rgb), .32);
}

#productsTable button[data-act="toggle"]{
  border-color: rgba(var(--pt-success-rgb), .44);
  color: var(--pt-success);
  background: rgba(var(--pt-success-rgb), .08);
}

/* ===== POS UX PRO UPGRADE ===== */
.page-actions--sales{
  width: min(100%, 1080px);
  justify-content: flex-end;
}

.search-shell{
  min-width: min(100%, 230px);
  flex: 1 1 230px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(14,14,14,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.search-shell:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.search-shell:focus-within{
  border-color: rgba(var(--pt-primary-rgb), .7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 3px rgba(var(--pt-primary-rgb), .16),
    0 18px 34px rgba(var(--pt-primary-rgb), .12);
}

.search-shell--primary:focus-within{
  border-color: rgba(var(--pt-success-rgb), .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 3px rgba(var(--pt-success-rgb), .14),
    0 18px 34px rgba(var(--pt-success-rgb), .12);
}

.search-shell-icon{
  flex: 0 0 auto;
  font-size: 16px;
  color: rgba(255,255,255,.62);
}

.search-input.input{
  min-width: 0;
  padding: 15px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.search-input.input:focus{
  box-shadow: none;
}

.section-copy{
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

.products-count{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.category-bar{
  padding: 14px;
}

.category{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.category:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.08) inset;
}

.category.active{
  background: linear-gradient(90deg, rgba(var(--pt-success-rgb), .24), rgba(var(--pt-success-rgb), .08));
  border: 1px solid rgba(var(--pt-success-rgb), .36);
  box-shadow: 0 0 0 1px rgba(var(--pt-success-rgb), .18) inset, 0 0 18px rgba(var(--pt-success-rgb), .12);
}

.category-icon{
  font-size: 14px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.layout{
  gap: 16px;
  padding: 16px 0 0;
  align-items: start;
}

.products-section{
  padding-right: 2px;
}

.product-grid{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.product-card{
  position: relative;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.product-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.product-card.is-in-cart{
  border-color: rgba(var(--pt-success-rgb), .36);
  background:
    linear-gradient(180deg, rgba(var(--pt-success-rgb), .07), rgba(255,255,255,.012)),
    var(--card);
  box-shadow: 0 18px 38px rgba(0,0,0,.22), 0 0 0 1px rgba(var(--pt-success-rgb), .14) inset;
}

.product-card-media{
  position: relative;
  margin-bottom: 12px;
}

.product-image{
  height: 152px;
  margin-bottom: 0;
}

.product-quantity-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(var(--pt-success-rgb), .96);
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(var(--pt-success-rgb), .24);
}

.product-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-category{
  color: rgba(255,255,255,.54);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.product-name{
  font-size: 14px;
  font-weight: 800;
  min-height: 2.5em;
}

.product-price{
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 0 24px rgba(var(--pt-primary-rgb), .14);
}

.product-secondary{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-barcode,
.product-stock{
  font-size: 12px;
}

.product-barcode{
  opacity: .68;
  font-size: 11px;
}

.product-stock.is-low{
  color: #f59e0b;
}

.product-add-btn{
  margin-top: 12px;
  border: 1px solid rgba(var(--pt-success-rgb), .42);
  background: linear-gradient(180deg, rgba(var(--pt-success-rgb), .98), rgba(131, 223, 25, .92));
  color: #081005;
  box-shadow: 0 14px 28px rgba(var(--pt-success-rgb), .18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}

.product-add-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--pt-success-rgb), .7);
  box-shadow: 0 18px 30px rgba(var(--pt-success-rgb), .24), 0 0 18px rgba(var(--pt-success-rgb), .18);
  filter: saturate(1.03);
}

.product-add-btn:active{
  transform: translateY(0) scale(.97);
}

.cart-section{
  position: sticky;
  top: 0;
  padding: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.26);
}

.cart-items{
  gap: 12px;
}

.cart-item{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.cart-item.cart-item--new{
  border-color: rgba(var(--pt-success-rgb), .34);
  background: rgba(var(--pt-success-rgb), .08);
  box-shadow: 0 12px 20px rgba(var(--pt-success-rgb), .08);
  animation: cartPulse .32s ease;
}

.cart-item-details{
  color: rgba(255,255,255,.68);
}

.cart-item-subtotal{
  font-size: 15px;
}

.cart-summary{
  gap: 12px;
  padding-top: 14px;
  background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.90) 18%, rgba(10,10,10,.98));
  backdrop-filter: blur(10px);
}

.cart-summary-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(var(--pt-primary-rgb), .15), rgba(255,255,255,.02));
}

.summary-kicker{
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
}

.cart-summary-state{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  color: rgba(255,255,255,.72);
}

.summary-total{
  font-size: 34px;
  color: var(--pt-primary);
  text-shadow: 0 0 22px rgba(var(--pt-primary-rgb), .16);
}

.btn-finalize:hover{
  box-shadow:
    0 18px 28px rgba(var(--pt-secondary-rgb, 251,155,54), .24),
    0 0 20px rgba(var(--pt-secondary-rgb, 251,155,54), .18),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.btn-finalize:active{
  transform: translateY(0) scale(.97);
}

.btn-finalize:disabled{
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.15);
}

@keyframes cartPulse{
  0%{ transform: scale(.98); }
  70%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}

@media (max-width: 1080px){
  .layout{
    grid-template-columns: 1fr;
  }

  .cart-section{
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px){
  .page-actions--sales{
    justify-content: stretch;
  }

  .search-shell{
    flex-basis: 100%;
  }

  .product-grid{
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}