/* ==========================================================================
   FechAí — Enterprise Premium UI v3
   Inspirado em dashboards SaaS modernos de gestão de pedidos.
   Escopo: somente UI/CSS. Não altera lógica, IDs, eventos, Supabase, APIs,
   checkout, PDV ou fluxo de pedidos.
   ========================================================================== */

:root{
  --vf-enterprise-navy:#071226;
  --vf-enterprise-navy-2:#0b1730;
  --vf-enterprise-navy-3:#111f3f;
  --vf-enterprise-blue:#3557ff;
  --vf-enterprise-blue-2:#4f46e5;
  --vf-enterprise-cyan:#38bdf8;
  --vf-enterprise-green:#22c55e;
  --vf-enterprise-orange:#fb923c;
  --vf-enterprise-red:#ef4444;
  --vf-enterprise-purple:#a855f7;
  --vf-enterprise-bg:#f6f8fc;
  --vf-enterprise-bg-2:#eef3ff;
  --vf-enterprise-card:#ffffff;
  --vf-enterprise-text:#111827;
  --vf-enterprise-muted:#667085;
  --vf-enterprise-line:#e5eaf3;
  --vf-enterprise-line-2:#d8e0ee;
  --vf-enterprise-radius:20px;
  --vf-enterprise-radius-lg:26px;
  --vf-enterprise-shadow:0 18px 45px rgba(15,23,42,.08);
  --vf-enterprise-shadow-strong:0 24px 70px rgba(15,23,42,.14);
}

html,body{
  background:
    radial-gradient(circle at 82% -10%, rgba(53,87,255,.14), transparent 36%),
    radial-gradient(circle at 8% 10%, rgba(34,197,94,.08), transparent 28%),
    var(--vf-enterprise-bg)!important;
  color:var(--vf-enterprise-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* ===== Admin shell ===== */
#screen-commerce-app.shell{
  grid-template-columns:292px minmax(0,1fr)!important;
  min-height:100vh!important;
  background:transparent!important;
}

#screen-commerce-app .main{
  padding:38px 42px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,248,252,.94) 240px),
    var(--vf-enterprise-bg)!important;
  min-width:0!important;
}

/* ===== Sidebar premium ===== */
#screen-commerce-app .sidebar{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  overflow:auto!important;
  padding:22px 18px!important;
  background:
    radial-gradient(circle at 12% 0%, rgba(69,92,255,.42), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(56,189,248,.16), transparent 28%),
    linear-gradient(180deg,#071226 0%,#091932 48%,#071226 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:24px 0 70px rgba(7,18,38,.18)!important;
  color:#fff!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}

#screen-commerce-app .sidebar::-webkit-scrollbar{width:6px}
#screen-commerce-app .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

#screen-commerce-app .logo{
  height:auto!important;
  min-height:62px!important;
  padding:0 2px 20px!important;
  margin:0 0 14px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

#screen-commerce-app .vf-logo-pill{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  color:#fff!important;
}

#screen-commerce-app .vf-logo-pill::before{
  content:"";
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04)),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

#screen-commerce-app .vf-logo-inline{
  max-width:116px!important;
  height:auto!important;
  filter:brightness(0) invert(1)!important;
}

#screen-commerce-app .vf-logo-label{
  display:block!important;
  margin-top:2px!important;
  font-size:12px!important;
  color:rgba(255,255,255,.62)!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
}

#commerce-sidebar-business.business-name{
  margin:0 0 18px!important;
  padding:16px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.74)!important;
  font-size:12px!important;
  line-height:1.35!important;
  position:relative!important;
}

#commerce-sidebar-business.business-name::before{
  content:"Loja online";
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:800;
  margin-bottom:4px;
  letter-spacing:-.02em;
}

#commerce-sidebar-business.business-name::after{
  content:"● Delivery ativo";
  display:block;
  margin-top:3px;
  color:#81f5b5;
  font-size:12px;
  font-weight:700;
}

#screen-commerce-app .nav{
  display:grid!important;
  gap:5px!important;
  padding-bottom:14px!important;
}

#screen-commerce-app .nav-title{
  margin:20px 8px 8px!important;
  color:rgba(255,255,255,.42)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}

#screen-commerce-app .nav-title:first-child{margin-top:6px!important}

#screen-commerce-app .nav button,
#screen-commerce-app .nav .vf-config-subnav{
  position:relative!important;
  width:100%!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:0 13px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  color:rgba(255,255,255,.76)!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  text-align:left!important;
  box-shadow:none!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}

#screen-commerce-app .nav button i,
#screen-commerce-app .nav .vf-config-subnav i{
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  font-size:20px!important;
  color:rgba(255,255,255,.78)!important;
}

#screen-commerce-app .nav button:hover,
#screen-commerce-app .nav .vf-config-subnav:hover{
  transform:translateX(3px)!important;
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#fff!important;
}

#screen-commerce-app .nav button.active,
#screen-commerce-app .nav button[aria-current="page"],
#screen-commerce-app .nav .vf-config-subnav.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--vf-enterprise-blue),var(--vf-enterprise-blue-2))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 14px 30px rgba(53,87,255,.34)!important;
  transform:none!important;
}

#screen-commerce-app .nav button.active i,
#screen-commerce-app .nav button[aria-current="page"] i{color:#fff!important}

#screen-commerce-app .nav button.active::before,
#screen-commerce-app .nav button[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:-18px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:#72f7c5;
  box-shadow:0 0 18px rgba(114,247,197,.9);
}

#screen-commerce-app .vf-pdv-nav-badge{
  margin-left:auto!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#a3ff3f,#5ef17a)!important;
  color:#082312!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}

#screen-commerce-app .sidebar-bottom{
  margin-top:auto!important;
  padding-top:16px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  display:grid!important;
  gap:10px!important;
}

#screen-commerce-app .sidebar-bottom::before{
  content:"Plano Profissional\A Seu plano está ativo";
  white-space:pre-line;
  display:block;
  padding:16px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#3557ff,#4f46e5)!important;
  box-shadow:0 18px 36px rgba(53,87,255,.32)!important;
  color:#fff!important;
  font-weight:800!important;
  line-height:1.35!important;
}

#screen-commerce-app .sidebar-bottom .btn{
  min-height:42px!important;
  justify-content:flex-start!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.82)!important;
  border-radius:14px!important;
  box-shadow:none!important;
}

#screen-commerce-app .sidebar-bottom .btn:hover{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
}

/* ===== Header/action bar ===== */
#screen-commerce-app .page-head{
  margin:0 0 28px!important;
  padding-bottom:22px!important;
  border-bottom:1px solid var(--vf-enterprise-line)!important;
  align-items:center!important;
}

#screen-commerce-app .page-head h1{
  font-size:38px!important;
  letter-spacing:-.055em!important;
  color:#0b1220!important;
  line-height:1!important;
  font-weight:900!important;
}

#screen-commerce-app .page-head p{
  margin-top:9px!important;
  color:#667085!important;
  font-size:16px!important;
}

#screen-commerce-app .head-actions{
  gap:12px!important;
  align-items:center!important;
}

#screen-commerce-app .head-actions .btn,
#screen-commerce-app .page-head > .btn{
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid var(--vf-enterprise-line)!important;
  color:#111827!important;
  box-shadow:0 10px 25px rgba(15,23,42,.06)!important;
  font-weight:800!important;
}

#screen-commerce-app .head-actions .btn.primary,
#screen-commerce-app .page-head .btn.primary{
  background:linear-gradient(135deg,var(--vf-enterprise-blue),var(--vf-enterprise-blue-2))!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(53,87,255,.28)!important;
}

/* ===== Cards, metrics and dashboard ===== */
#screen-commerce-app .cards{
  gap:18px!important;
  margin-bottom:22px!important;
}

#screen-commerce-app .metric,
#screen-commerce-app .card,
#screen-commerce-app .commerce-card,
#screen-commerce-app .commerce-panel,
#screen-commerce-app [class*="card"],
#screen-commerce-app [class*="panel"]{
  border-radius:22px!important;
  border:1px solid var(--vf-enterprise-line)!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:var(--vf-enterprise-shadow)!important;
}

#screen-commerce-app .metric{
  min-height:128px!important;
  padding:22px!important;
  position:relative!important;
  overflow:hidden!important;
}

#screen-commerce-app .metric::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:-18px;
  width:76px;
  height:76px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(53,87,255,.10),rgba(53,87,255,.03));
}

#screen-commerce-app .metric:nth-child(2)::after{background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(34,197,94,.04))}
#screen-commerce-app .metric:nth-child(3)::after{background:linear-gradient(135deg,rgba(251,146,60,.16),rgba(251,146,60,.04))}
#screen-commerce-app .metric:nth-child(4)::after{background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(168,85,247,.04))}

#screen-commerce-app .metric .icon{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  margin-bottom:18px!important;
  background:#eef2ff!important;
  color:var(--vf-enterprise-blue)!important;
}

#screen-commerce-app .metric label{
  color:#667085!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-size:13px!important;
  font-weight:700!important;
}

#screen-commerce-app .metric strong{
  color:#111827!important;
  font-size:30px!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
}

/* Hero/banner like enterprise dashboard */
#commerce-dashboard-hero,
#screen-commerce-app .commerce-dashboard-hero{
  position:relative!important;
  overflow:hidden!important;
  margin-bottom:22px!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 92% 35%,rgba(56,189,248,.34),transparent 24%),
    linear-gradient(135deg,#14235f 0%,#1d38a0 58%,#244eea 100%)!important;
  box-shadow:0 28px 70px rgba(29,56,160,.25)!important;
  color:#fff!important;
}

#commerce-dashboard-hero *,
#screen-commerce-app .commerce-dashboard-hero *{
  color:#fff!important;
}

/* Tables and lists */
#screen-commerce-app table{
  border-collapse:separate!important;
  border-spacing:0!important;
}

#screen-commerce-app th{
  color:#7b8798!important;
  font-size:12px!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:.01em!important;
  background:#f8fafc!important;
}

#screen-commerce-app td,
#screen-commerce-app th{
  padding:15px 16px!important;
  border-bottom:1px solid var(--vf-enterprise-line)!important;
}

#screen-commerce-app tbody tr{
  transition:background .16s ease,transform .16s ease!important;
}

#screen-commerce-app tbody tr:hover{
  background:#f8fbff!important;
}

/* Forms */
#screen-commerce-app input,
#screen-commerce-app select,
#screen-commerce-app textarea{
  border-radius:15px!important;
  border:1px solid var(--vf-enterprise-line-2)!important;
  background:#fff!important;
  min-height:46px!important;
  color:#111827!important;
  box-shadow:0 1px 0 rgba(15,23,42,.02)!important;
}

#screen-commerce-app input:focus,
#screen-commerce-app select:focus,
#screen-commerce-app textarea:focus{
  border-color:rgba(53,87,255,.55)!important;
  box-shadow:0 0 0 4px rgba(53,87,255,.10)!important;
}

/* Badges/status */
#screen-commerce-app [class*="badge"],
#screen-commerce-app [class*="status"],
#screen-commerce-app .tag{
  border-radius:999px!important;
  font-weight:800!important;
}

/* KDS/PDV keep premium but practical */
#screen-commerce-app .vf-kds-column,
#screen-commerce-app .vf-pos-column,
#screen-commerce-app .vf-pdv-panel{
  border-radius:24px!important;
  box-shadow:var(--vf-enterprise-shadow)!important;
}

/* Settings/hours screen: make huge forms feel lighter */
#screen-commerce-app [id*="settings"] .card,
#screen-commerce-app [class*="settings"] .card{
  padding:24px!important;
}

#screen-commerce-app [class*="hours"] .field,
#screen-commerce-app [id*="hours"] .field{
  background:#fff!important;
  border-radius:16px!important;
}

/* Mobile */
@media (max-width:1024px){
  #screen-commerce-app.shell{
    grid-template-columns:1fr!important;
  }
  #screen-commerce-app .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(310px,88vw)!important;
    z-index:1000!important;
    transform:translateX(-104%);
    transition:transform .24s ease!important;
  }
  #screen-commerce-app.sidebar-open .sidebar,
  body.sidebar-open #screen-commerce-app .sidebar{
    transform:translateX(0)!important;
  }
  #screen-commerce-app .main{
    padding:24px 16px 92px!important;
  }
  #screen-commerce-app .page-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  #screen-commerce-app .page-head h1{
    font-size:30px!important;
  }
  #screen-commerce-app .cards{
    grid-template-columns:1fr!important;
  }
}

@media (min-width:1400px){
  #screen-commerce-app .main{
    padding:44px 54px!important;
  }
}