/* ══════════════════════════════════════════════════════════
   Hermes — styles.css (v3)
   Base: Tailwind CDN. Este arquivo: componentes customizados.
   ══════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }

/* ── Mesh Background ───────────────────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(124,107,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(167,139,250,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(30,30,46,.9) 0%, transparent 100%);
}

/* ── Glass ─────────────────────────────────────────────── */
.glass { background: rgba(22,22,31,.75); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(124,107,255,.12); }
.glass-card { background: rgba(20,20,28,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.07); }

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px);} to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:scale(1); } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes glow-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(124,107,255,.5); } 50% { box-shadow:0 0 0 14px rgba(124,107,255,0); } }
@keyframes toast-in  { from { opacity:0; transform:translateX(110%); } to { opacity:1; transform:translateX(0); } }
@keyframes toast-out { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX(110%); } }
@keyframes logo-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

.anim-fade-up   { animation: fadeUp   .48s cubic-bezier(.22,.68,0,1.2) both; }
.anim-scale-in  { animation: scaleIn  .38s cubic-bezier(.22,.68,0,1.2) both; }
.anim-fade-down { animation: fadeDown .42s cubic-bezier(.22,.68,0,1.2) both; }
.anim-fade-in   { animation: fadeIn   .35s ease both; }

/* ── View System ───────────────────────────────────────── */
.view { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; }
.view.is-hidden  { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.view.is-visible { opacity: 1; transition: opacity .3s ease; }
.z-content { position: relative; z-index: 1; }

/* ── Header ────────────────────────────────────────────── */
#app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: .6rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(10,10,15,.88);
  backdrop-filter: blur(20px);
  transition: transform .3s ease;
}
#app-header.hide { transform: translateY(-100%); }
.header-logo { display: flex; align-items: center; gap: .65rem; }
.logo-img {
  width: 36px; height: 36px;
  border-radius: 10px; object-fit: cover;
  background: #111118;
  box-shadow: 0 2px 12px rgba(124,107,255,.35);
  animation: logo-float 4s ease-in-out infinite;
}
.header-nav { display: flex; align-items: center; gap: .5rem; }
.nav-btn {
  padding: .4rem .9rem; border-radius: 10px; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .2s; border: 1px solid rgba(124,107,255,.25);
  background: rgba(124,107,255,.08); color: #a78bfa;
}
.nav-btn:hover { background: rgba(124,107,255,.18); color: #e2e2f0; }
.nav-btn.danger { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); color: #f87171; }
.nav-btn.danger:hover { background: rgba(239,68,68,.15); }

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #7c6bff 0%, #a78bfa 50%, #7c6bff 100%);
  background-size: 200% 200%;
  transition: background-position .4s, transform .2s, box-shadow .2s;
  border: none; cursor: pointer;
}
.btn-primary:hover { background-position: 100% 100%; transform: scale(1.04) translateY(-2px); box-shadow: 0 18px 38px rgba(124,107,255,.42); }
.btn-primary:active { transform: scale(.97); }
.btn-start { animation: glow-pulse 2.5s ease-in-out infinite; }

/* ── Spinners ──────────────────────────────────────────── */
.spinner    { width:36px; height:36px; border:3px solid rgba(124,107,255,.2); border-top-color:#7c6bff; border-radius:50%; animation:spin .75s linear infinite; }
.spinner-sm { width:18px; height:18px; border:2px solid rgba(124,107,255,.2); border-top-color:#7c6bff; border-radius:50%; animation:spin .75s linear infinite; display:inline-block; }

/* ── Inputs e Selects ──────────────────────────────────── */
.input-field { background:rgba(255,255,255,.04); border:1px solid rgba(124,107,255,.25); color:#e2e2f0; transition:border-color .2s, box-shadow .2s; caret-color:#7c6bff; }
.input-field::placeholder { color:#6b6b85; }
.input-field:focus { outline:none; border-color:#7c6bff; box-shadow:0 0 0 3px rgba(124,107,255,.2); }

/* Fix exclusivo para OS Nativo select options no formato Select Mobile */
select.input-field, select#manual-sku {
  background-color: #111118 !important;
  color: #e2e2f0 !important;
}
select.input-field option, select#manual-sku option {
  background-color: #1a1a24 !important; /* Ligeiramente mais claro para contraste */
  color: #ffffff !important;
}

/* ── Filter Mode Buttons ───────────────────────────────── */
.filter-mode-group { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-mode-btn {
  padding: .35rem .85rem; border-radius: 8px; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #6b6b85;
}
.filter-mode-btn.active { background: rgba(124,107,255,.18); color: #a78bfa; border-color: rgba(124,107,255,.35); }
.filter-mode-btn:hover:not(.active) { background: rgba(255,255,255,.08); color: #e2e2f0; }

/* ── Summary Cards ─────────────────────────────────────── */
.summary-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width:640px)  { .summary-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .summary-grid { grid-template-columns: repeat(3,1fr); } }
.summary-card {
  border-radius: 14px; padding: 1rem 1.25rem; cursor: pointer;
  background: rgba(20,20,28,.85); border: 1px solid rgba(255,255,255,.07);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.summary-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,107,255,.4);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(124,107,255,.2);
}

/* ── Items Grid (detail view) ──────────────────────────── */
.items-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; width: 100%; }
@media (min-width:640px)  { .items-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .items-grid { grid-template-columns: repeat(3,1fr); } }
.item-card { border-radius:16px; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; transition:transform .25s, box-shadow .25s, border-color .25s; }
.item-card:hover { transform:translateY(-5px); border-color:rgba(124,107,255,.35)!important; box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(124,107,255,.2); }

/* ── Stat Pill & Badge ─────────────────────────────────── */
.stat-pill { background:rgba(124,107,255,.08); border:1px solid rgba(124,107,255,.15); border-radius:10px; padding:.5rem .75rem; }
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .65rem; border-radius:999px; font-size:.65rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.badge-accent { background:rgba(124,107,255,.15); color:#a78bfa; border:1px solid rgba(124,107,255,.25); }
.badge-green  { background:rgba(52,211,153,.12);  color:#34d399;  border:1px solid rgba(52,211,153,.2); }
.badge-yellow { background:rgba(251,191,36,.12);  color:#fbbf24;  border:1px solid rgba(251,191,36,.2); }
.divider { border-color:rgba(255,255,255,.06); }

/* ── Toast ─────────────────────────────────────────────── */
#toast-container { position:fixed; top:1.25rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { pointer-events:all; min-width:280px; max-width:360px; padding:.875rem 1.1rem; border-radius:14px; display:flex; align-items:flex-start; gap:.75rem; animation:toast-in .35s cubic-bezier(.22,.68,0,1.2) both; backdrop-filter:blur(16px); }
.toast.removing { animation: toast-out .3s ease forwards; }
.toast-error   { background:rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.3); }
.toast-success { background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.25); }
.toast-info    { background:rgba(124,107,255,.15);border:1px solid rgba(124,107,255,.3); }
.toast-warn    { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3); }
.toast-icon    { width:20px; height:20px; flex-shrink:0; margin-top:1px; }

/* ── Tabs ──────────────────────────────────────────────── */
.tab-btn { padding:.5rem 1.25rem; border-radius:12px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; border:1px solid transparent; background:rgba(255,255,255,.04); color:#6b6b85; }
.tab-btn.active { background:rgba(124,107,255,.18); color:#a78bfa; border-color:rgba(124,107,255,.3); }
.tab-btn:hover:not(.active) { background:rgba(255,255,255,.08); color:#e2e2f0; }

/* ── Scanner ───────────────────────────────────────────── */
#reader { width:100%; border-radius:12px; overflow:hidden; }
#reader video { border-radius:12px; }

/* ══════════════════════════════════════════════════════════
   MATRIX VIEW — All Orders Table
   ══════════════════════════════════════════════════════════ */
.matrix-wrap { width:100%; overflow-x:auto; border-radius:16px; border:1px solid rgba(124,107,255,.14); }

.matrix-table {
  width:100%; border-collapse: collapse; font-size:.8rem;
  background: rgba(16,16,24,.9);
}

/* Column headers */
.matrix-table thead tr.header-row th {
  padding: .6rem .75rem; text-align:left; font-size:.65rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#6b6b85;
  background: rgba(22,22,32,.95); border-bottom: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}

/* Column filter inputs row */
.matrix-table thead tr.filter-row th {
  padding: .35rem .5rem;
  background: rgba(18,18,28,.95);
  border-bottom: 1px solid rgba(124,107,255,.12);
}
.col-filter {
  width: 100%; padding: .3rem .5rem; border-radius: 6px; font-size: .7rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(124,107,255,.2);
  color: #e2e2f0; transition: border-color .2s, box-shadow .2s;
}
.col-filter:focus { outline:none; border-color:#7c6bff; box-shadow:0 0 0 2px rgba(124,107,255,.2); }
.col-filter::placeholder { color:#3a3a52; }

/* Order rows */
.order-row { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; cursor: pointer; }
.order-row:hover { background: rgba(124,107,255,.07); }
.order-row td { padding: .65rem .75rem; color:#c8c8de; vertical-align: middle; }
.order-row td.num-col { font-weight: 700; color: #e2e2f0; font-family: monospace; font-size:.82rem; }
.order-row td.val-col { color: #34d399; font-weight: 600; }

/* Expand toggle button */
.expand-toggle {
  width: 22px; height: 22px; border-radius: 6px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(124,107,255,.1); border: 1px solid rgba(124,107,255,.25); color:#a78bfa;
  cursor:pointer; transition:all .2s; font-size:.8rem; line-height:1; flex-shrink:0;
}
.expand-toggle:hover { background:rgba(124,107,255,.25); }
.expand-toggle.open { background:rgba(124,107,255,.25); transform: rotate(90deg); }

/* Expanded detail row */
.detail-row { border-bottom: 1px solid rgba(124,107,255,.12); }
.detail-row td { padding: 0; }
.detail-inner {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.detail-inner.open { max-height: 1200px; }

.detail-content { padding: 1rem 1.25rem 1.25rem 2.5rem; }
.detail-content h4 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#6b6b85; margin-bottom:.6rem; }

/* Items sub-table */
.items-sub-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.items-sub-table thead th { padding:.4rem .6rem; text-align:left; font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#6b6b85; border-bottom:1px solid rgba(255,255,255,.06); }
.items-sub-table tbody td { padding:.5rem .6rem; color:#c8c8de; border-bottom:1px solid rgba(255,255,255,.03); }
.items-sub-table tbody tr:last-child td { border-bottom:none; }
.items-sub-table tbody tr:hover td { background:rgba(124,107,255,.05); }
.items-sub-table td.desc-col { color:#e2e2f0; font-weight:500; max-width:220px; }
.items-sub-table td.val-col  { color:#34d399; font-weight:600; }

/* Matrix controls bar */
.matrix-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.matrix-count { font-size:.75rem; color:#6b6b85; }
.matrix-count span { color:#a78bfa; font-weight:600; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,107,255,.4); border-radius:4px; }