/* ==========================================================================
   FechAí — Design System Final UI v2
   Objetivo: redesign visual e organização de UI sem alterar lógica, IDs,
   eventos, APIs, Supabase, checkout, PDV ou fluxo de pedidos.
   ========================================================================== */

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

:root{
  color-scheme:light;

  /* Brand */
  --vf-blue-950:#071b52;
  --vf-blue-900:#0b2b77;
  --vf-blue-800:#123c97;
  --vf-blue-700:#1d4ed8;
  --vf-blue-600:#2563eb;
  --vf-blue-100:#dbeafe;
  --vf-blue-50:#eff6ff;

  --vf-green-700:#15803d;
  --vf-green-600:#16a34a;
  --vf-green-500:#22c55e;
  --vf-green-100:#dcfce7;
  --vf-green-50:#f0fdf4;

  --vf-orange-600:#f97316;
  --vf-orange-100:#ffedd5;
  --vf-red-600:#dc2626;
  --vf-red-100:#fee2e2;
  --vf-yellow-500:#eab308;
  --vf-yellow-100:#fef9c3;

  /* Neutral */
  --vf-bg:#f5f7fb;
  --vf-bg-2:#eef4ff;
  --vf-surface:#ffffff;
  --vf-surface-2:#f8fafc;
  --vf-text:#0f172a;
  --vf-muted:#64748b;
  --vf-subtle:#94a3b8;
  --vf-line:#d8e1ef;
  --vf-line-strong:#c7d2e4;

  /* Shape */
  --vf-radius-xs:8px;
  --vf-radius-sm:12px;
  --vf-radius-md:16px;
  --vf-radius-lg:22px;
  --vf-radius-xl:28px;

  /* Shadow */
  --vf-shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --vf-shadow-sm:0 8px 24px rgba(15,23,42,.08);
  --vf-shadow-md:0 18px 48px rgba(15,23,42,.12);
  --vf-shadow-lg:0 28px 70px rgba(15,23,42,.18);

  /* Motion */
  --vf-ease:cubic-bezier(.2,.8,.2,1);
  --vf-fast:160ms var(--vf-ease);
  --vf-normal:260ms var(--vf-ease);

  /* Backwards compatibility aliases */
  --primary:var(--vf-blue-700);
  --primary-dark:var(--vf-blue-950);
  --primary-light:var(--vf-blue-100);
  --accent:var(--vf-orange-600);
  --accent-light:var(--vf-orange-100);
  --ink:var(--vf-text);
  --muted:var(--vf-muted);
  --line:var(--vf-line);
  --soft:var(--vf-bg);
  --deep:var(--vf-blue-950);
  --white:#fff;

  --vf-accent:var(--vf-blue-700);
  --vf-accent-dark:var(--vf-blue-950);
  --vf-dark:var(--vf-blue-950);
  --vf-card:var(--vf-surface);
  --vf-soft:var(--vf-blue-50);
}

/* Base */
html{background:linear-gradient(135deg,#f8fbff 0%,#f3f7ff 45%,#f8fafc 100%)!important}
body{
  background:
    radial-gradient(circle at top right,rgba(37,99,235,.13),transparent 34rem),
    radial-gradient(circle at 14% 0,rgba(34,197,94,.08),transparent 28rem),
    var(--vf-bg)!important;
  color:var(--vf-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:-.01em;
}
*{scrollbar-width:thin;scrollbar-color:#b8c6dc transparent}
::selection{background:rgba(37,99,235,.18)}
button,input,select,textarea{font:inherit!important}
a{color:inherit}

/* Unified surfaces */
.card,.panel,.box,.modal,.drawer,.dropdown,.table-wrap,
.auth-card,.commerce-card,.commerce-panel,.vf-card,.vf-panel,
.vf-store-card,.vf-store-product,.vf-store-cart,.vf-checkout-card,
.vf-pdv-card,.vf-kds-card,.vf-empty,.vf-master-manager-banner,
[class*="card"],[class*="panel"]{
  border-color:var(--vf-line)!important;
}
.card,.commerce-card,.commerce-panel,.vf-card,.vf-panel,
.vf-store-card,.vf-store-product,.vf-checkout-card,.table-wrap,
.vf-pdv-card,.vf-kds-card,.vf-empty{
  background:rgba(255,255,255,.88)!important;
  box-shadow:var(--vf-shadow-sm)!important;
  border-radius:var(--vf-radius-lg)!important;
}

/* Sidebar/admin shell */
.sidebar,.commerce-sidebar,.vf-sidebar,aside[class*="sidebar"]{
  background:linear-gradient(180deg,var(--vf-blue-950),#102f7d 62%,#0b2b77)!important;
  color:#fff!important;
  box-shadow:18px 0 52px rgba(7,27,82,.18)!important;
}
.sidebar a,.commerce-sidebar a,.commerce-sidebar button,.sidebar button{
  border-radius:14px!important;
  transition:background var(--vf-fast),transform var(--vf-fast),color var(--vf-fast)!important;
}
.sidebar a:hover,.commerce-sidebar a:hover,.commerce-sidebar button:hover,.sidebar button:hover{
  background:rgba(255,255,255,.12)!important;
  transform:translateX(2px);
}
.sidebar .active,.commerce-sidebar .active,[aria-current="page"]{
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 3px 0 0 #5eead4!important;
}

/* Page headers */
.page-head,.commerce-page-head,.vf-page-head,.head,.vf-land-nav{
  gap:18px!important;
}
h1,.page-title,.commerce-title,.vf-title{
  color:var(--vf-text)!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  line-height:1.02!important;
}
h2,h3,.section-title{
  color:var(--vf-text)!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
}
small,.muted,.text-muted,.subtitle,.page-subtitle{color:var(--vf-muted)!important}

/* Buttons */
.btn,button[type="button"],button[type="submit"],.vf-btn,.vf-store-btn,
.vf-add-btn,.vf-checkout-submit,.vf-pdv-action,.vf-kds-action{
  border-radius:14px!important;
  min-height:42px;
  border:1px solid var(--vf-line)!important;
  box-shadow:var(--vf-shadow-xs)!important;
  transition:transform var(--vf-fast),box-shadow var(--vf-fast),background var(--vf-fast),border-color var(--vf-fast)!important;
}
.btn:hover,button[type="button"]:hover,button[type="submit"]:hover,.vf-store-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--vf-shadow-sm)!important;
}
.btn.primary,.primary,button.primary,.vf-btn-primary,.vf-checkout-submit,
button[id*="submit"],button[id*="finalize"],button[id*="save"]{
  background:linear-gradient(135deg,var(--vf-blue-700),var(--vf-blue-900))!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.08)!important;
}
.btn.success,.success,.paid,[class*="success"]{
  background:linear-gradient(135deg,var(--vf-green-600),#059669)!important;
  color:#fff!important;
}
.btn.warning,.warning{background:linear-gradient(135deg,var(--vf-orange-600),#fb923c)!important;color:#fff!important}

/* Inputs */
input,select,textarea,.input,.field,.search-input{
  border-radius:14px!important;
  border:1px solid var(--vf-line-strong)!important;
  background:#fff!important;
  color:var(--vf-text)!important;
  box-shadow:inset 0 1px 0 rgba(15,23,42,.03)!important;
}
input:focus,select:focus,textarea:focus{
  outline:0!important;
  border-color:var(--vf-blue-600)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.13)!important;
}

/* Badges/tags */
.badge,.tag,.pill,[class*="badge"],[class*="tag"],[class*="pill"]{
  border-radius:999px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
.badge,.tag,.pill{
  background:var(--vf-blue-50)!important;
  color:var(--vf-blue-900)!important;
  border:1px solid var(--vf-blue-100)!important;
}

/* Landing */
#screen-landing,.vf-land-wrap{
  background:
    radial-gradient(circle at 82% 10%,rgba(37,99,235,.22),transparent 30rem),
    radial-gradient(circle at 10% 20%,rgba(34,197,94,.13),transparent 26rem),
    linear-gradient(180deg,#f8fbff,#f5f7fb)!important;
}
.vf-land-hero{
  border-radius:34px!important;
  padding:clamp(28px,5vw,70px)!important;
}
.vf-land-kicker{background:var(--vf-blue-50)!important;color:var(--vf-blue-900)!important}
.vf-land-browser,.vf-land-store-screen,.vf-land-cart{
  border-radius:24px!important;
  box-shadow:var(--vf-shadow-md)!important;
}

/* Storefront / loja */
.vf-store-header{
  background:rgba(7,27,82,.94)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 14px 38px rgba(7,27,82,.18)!important;
}
.vf-store-app{
  background:
    radial-gradient(circle at 80% 2%,rgba(37,99,235,.18),transparent 28rem),
    linear-gradient(180deg,#f8fbff 0%,#f5f7fb 100%)!important;
}
.vf-store-hero,.vf-store-cover,.vf-store-banner{
  border-radius:0 0 34px 34px!important;
}
.vf-store-info,.vf-store-shop-card{
  border-radius:26px!important;
  box-shadow:var(--vf-shadow-md)!important;
}
.vf-category-bar,.vf-store-categories{
  position:sticky!important;
  top:64px!important;
  z-index:15!important;
  background:rgba(245,247,251,.88)!important;
  backdrop-filter:blur(16px)!important;
  border-bottom:1px solid rgba(216,225,239,.8)!important;
}
.vf-store-product,.store-product,.product-card{
  overflow:hidden!important;
  transition:transform var(--vf-normal),box-shadow var(--vf-normal),border-color var(--vf-normal)!important;
}
.vf-store-product:hover,.store-product:hover,.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--vf-shadow-md)!important;
  border-color:rgba(37,99,235,.25)!important;
}
.vf-store-product img,.product-card img,.vf-product-image{
  border-radius:18px!important;
  object-fit:cover!important;
}
.vf-store-price,.price,[class*="price"]{
  color:var(--vf-blue-900)!important;
  font-weight:900!important;
}
.vf-add-btn,[class*="add"]{
  background:linear-gradient(135deg,var(--vf-blue-700),var(--vf-blue-900))!important;
  color:#fff!important;
}

/* Cart / checkout */
.vf-cart,.cart,.order-summary,.checkout-summary,.vf-store-cart{
  background:rgba(255,255,255,.94)!important;
  border-left:1px solid var(--vf-line)!important;
}
.vf-cart-total,.cart-total,.total,[class*="total"]{
  color:var(--vf-blue-950)!important;
  font-weight:900!important;
}
.vf-checkout-step,.checkout-step{
  border-radius:18px!important;
  background:#fff!important;
}
.vf-checkout-step.is-active,.checkout-step.active{
  border-color:var(--vf-blue-600)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}

/* Admin dashboard */
#commerce-dashboard-hero,.commerce-dashboard-hero,.hero-card{
  background:
    radial-gradient(circle at 88% 22%,rgba(255,255,255,.24),transparent 18rem),
    linear-gradient(135deg,var(--vf-blue-950),var(--vf-blue-700))!important;
  color:#fff!important;
  border-radius:28px!important;
  box-shadow:var(--vf-shadow-lg)!important;
}
#commerce-dashboard-hero *,.commerce-dashboard-hero *,.hero-card *{color:inherit}
#commerce-metrics,.cards,.commerce-report-grid,.commerce-metrics{
  gap:18px!important;
}
.metric-card,.commerce-metric,.commerce-stat,[class*="metric"],[class*="stat"]{
  border-radius:22px!important;
  background:rgba(255,255,255,.9)!important;
  box-shadow:var(--vf-shadow-sm)!important;
}

/* PDV */
.vf-pdv-shell,.vf-pdv-layout,#screen-commerce-app.vf-pdv-focus{
  background:var(--vf-bg)!important;
}
.vf-pdv-topbar,.pdv-topbar{
  background:linear-gradient(135deg,var(--vf-blue-950),var(--vf-blue-800))!important;
  color:#fff!important;
  box-shadow:0 16px 42px rgba(7,27,82,.2)!important;
}
.vf-pdv-mode,.pdv-mode,.vf-pdv-tab{
  border-radius:18px!important;
  background:#fff!important;
}
.vf-pdv-mode.active,.pdv-mode.active,.vf-pdv-tab.active{
  background:linear-gradient(135deg,var(--vf-green-600),#059669)!important;
  color:#fff!important;
}
.vf-pdv-product,.pdv-product,.vf-pos-product{
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--vf-shadow-xs)!important;
  transition:transform var(--vf-fast),box-shadow var(--vf-fast)!important;
}
.vf-pdv-product:hover,.pdv-product:hover,.vf-pos-product:hover{
  transform:translateY(-3px);
  box-shadow:var(--vf-shadow-sm)!important;
}
.vf-pdv-cart,.pdv-cart,.vf-pos-cart{
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--vf-shadow-md)!important;
}
.vf-pdv-finalize,.pdv-finalize{
  background:linear-gradient(135deg,var(--vf-green-600),#059669)!important;
  color:#fff!important;
}

/* KDS / Cozinha */
.vf-kds-root,.kds-root{
  background:var(--vf-bg)!important;
}
.vf-kds-header,.kds-header{
  background:linear-gradient(135deg,#10291f,var(--vf-blue-950))!important;
  color:#fff!important;
  border-radius:24px!important;
  box-shadow:var(--vf-shadow-md)!important;
}
.vf-kds-column,.kds-column{
  border-radius:22px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid var(--vf-line)!important;
}
.vf-kds-column:nth-of-type(1) .vf-kds-column-title,.kds-column:nth-of-type(1) .kds-column-title{background:linear-gradient(135deg,#fb923c,#f97316)!important;color:#fff!important}
.vf-kds-column:nth-of-type(2) .vf-kds-column-title,.kds-column:nth-of-type(2) .kds-column-title{background:linear-gradient(135deg,#eab308,#ca8a04)!important;color:#fff!important}
.vf-kds-column:nth-of-type(3) .vf-kds-column-title,.kds-column:nth-of-type(3) .kds-column-title{background:linear-gradient(135deg,#16a34a,#15803d)!important;color:#fff!important}
.vf-kds-order,.kds-order{
  border-radius:20px!important;
  background:#fff!important;
  border-top:4px solid var(--vf-green-600)!important;
  box-shadow:var(--vf-shadow-sm)!important;
}

/* Mesas */
.table-card,.mesa-card,.vf-table-card,[class*="mesa"] .card{
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--vf-shadow-xs)!important;
}
.table-card.is-busy,.mesa-card.is-busy,[class*="ocup"]{
  border-color:rgba(249,115,22,.35)!important;
  background:linear-gradient(180deg,#fff,#fff7ed)!important;
}

/* Reports */
.report-bar,.bar-fill,[class*="bar-fill"]{
  background:linear-gradient(90deg,var(--vf-blue-700),var(--vf-green-600))!important;
  border-radius:999px!important;
}
.report-summary,.commerce-report-summary{
  border-radius:22px!important;
  background:#fff!important;
}

/* Tables */
table{border-collapse:separate!important;border-spacing:0 8px!important}
th{color:var(--vf-muted)!important;font-weight:800!important;text-transform:uppercase;font-size:12px!important;letter-spacing:.04em}
td{background:#fff!important;border-top:1px solid var(--vf-line)!important;border-bottom:1px solid var(--vf-line)!important}
td:first-child{border-left:1px solid var(--vf-line)!important;border-radius:14px 0 0 14px}
td:last-child{border-right:1px solid var(--vf-line)!important;border-radius:0 14px 14px 0}

/* Skeleton/loading/empty */
.skeleton,.loading,[class*="skeleton"]{
  background:linear-gradient(90deg,#eef2f7,#f8fafc,#eef2f7)!important;
  background-size:220% 100%!important;
  animation:vf-shimmer 1.35s infinite linear!important;
}
.empty,.vf-empty,[class*="empty"]{
  border:1px dashed var(--vf-line-strong)!important;
  background:rgba(255,255,255,.7)!important;
}
@keyframes vf-shimmer{to{background-position:-220% 0}}
@keyframes vf-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card,.commerce-card,.vf-store-product,.vf-kds-order,.metric-card{animation:vf-fade-up .35s var(--vf-ease) both}

/* Responsive */
@media (max-width:1100px){
  .commerce-layout,.vf-pdv-layout,.vf-store-layout{grid-template-columns:1fr!important}
  .vf-cart,.cart,.order-summary,.checkout-summary{
    position:sticky!important;
    bottom:0!important;
    z-index:30!important;
    border-radius:24px 24px 0 0!important;
    box-shadow:0 -18px 50px rgba(15,23,42,.14)!important;
  }
}
@media (max-width:760px){
  body{letter-spacing:-.005em}
  .main,.commerce-main,#screen-commerce-app .main{padding:16px!important}
  h1,.page-title,.commerce-title{font-size:clamp(28px,9vw,42px)!important}
  .cards,.commerce-metrics,.commerce-report-grid{grid-template-columns:1fr!important}
  .vf-store-product,.store-product,.product-card{border-radius:20px!important}
  .btn,button[type="button"],button[type="submit"]{min-height:46px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}