/* ──────────────────────────────────────────────────────────────
   DESIGN REFRESH · Apple / Linear / Things inspiration
   Sobrepõe o CSS base com sutilezas de presença
   Mantém paleta vinho/dourado/bege da identidade
   ────────────────────────────────────────────────────────────── */

/* Curvas de animação + sombras de duas camadas */
:root{
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);
  --ease-spring:    cubic-bezier(0.34,1.56,0.64,1);    /* overshoot leve iOS */
  --ease-spring-soft: cubic-bezier(0.22,1.42,0.36,1);  /* overshoot mais sutil */
  --shadow-card-soft: 0 1px 2px rgba(58,53,49,0.04), 0 8px 24px rgba(58,53,49,0.05);
  --shadow-card-hover: 0 1px 2px rgba(58,53,49,0.06), 0 14px 36px rgba(107,31,42,0.10);
  --shadow-inset-subtle: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* ── SPRING PHYSICS · overshoot iOS-style ──────────────────── */
.btn:hover, .btn-icon:hover, .user-pill:hover,
#btn-novo-quick:hover, .nav-item:hover, .kpi-card:hover,
.empty-art svg, .toast{
  transition-timing-function: var(--ease-spring) !important;
}
/* Press-down state nos botões — feedback tátil */
.btn:active, #btn-novo-quick:active, .btn-icon:active{
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
  transition-timing-function: var(--ease-out-quart) !important;
}

/* ── VIEW TRANSITION · theme switch radial (iOS Sonoma) ──── */
::view-transition-old(root),
::view-transition-new(root){
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root){
  clip-path: circle(0% at var(--ttx,50%) var(--tty,50%));
  animation: themeRevealIn 0.55s var(--ease-out-quart) forwards;
}
::view-transition-old(root){
  animation: themeRevealOut 0.55s var(--ease-out-quart) forwards;
}
@keyframes themeRevealIn{
  to{ clip-path: circle(var(--ttr,150vh) at var(--ttx,50%) var(--tty,50%)); }
}
@keyframes themeRevealOut{
  to{ opacity: 1; }
}

/* Background da main: cinza-bege mais frio dá contraste com cards brancos */
.main{
  background: linear-gradient(180deg, #F8F5EF 0%, #F2EDE6 100%);
}

/* ── TYPOGRAPHY · hierarquia clara ────────────────────────── */

/* H1 hero mantém serif italic — é a assinatura da marca */
.page-title{
  letter-spacing: -0.025em;
  font-weight: 500;
}

/* Section titles dos cards (era .card-title em serif italic) → sans semibold */
.card-title{
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em;
  color: var(--carvao);
}

/* Eyebrow caps fica mais aerada */
.eyebrow{
  letter-spacing: 0.18em;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.85;
}

/* Page sub mais limpo */
.page-sub{
  font-weight: 400;
  color: var(--carvao);
  opacity: 0.72;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* ── CARDS · sombras de duas camadas, sem borda dura ─────── */

/* Cards "normais" ganham fundo branco — mas preserva cards com gradient/background inline (ex: banner foco vinho) */
.card:not([style*="gradient"]):not([style*="background"]){
  background: var(--branco-puro, #FFFFFF) !important;
}
.card{
  border: 1px solid rgba(58,53,49,0.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card-soft);
  transition: box-shadow 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
}
.card:hover{
  box-shadow: var(--shadow-card-hover);
}
/* Cards com gradient inline (banner foco): mantêm cor mas ganham sombra premium */
.card[style*="linear-gradient"]{
  border: none !important;
  box-shadow:
    0 1px 2px rgba(107,31,42,0.20),
    0 14px 36px rgba(107,31,42,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.card[style*="linear-gradient"]:hover{
  box-shadow:
    0 2px 4px rgba(107,31,42,0.25),
    0 20px 48px rgba(107,31,42,0.34),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.card-header{
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid rgba(58,53,49,0.05);
}
.card-body{
  padding: 16px 20px 20px !important;
}
.card-body.flush{ padding: 0 !important; }

/* KPI cards mais limpos — preserva variantes coloridas (.gold, .success, .danger) */
.kpi-card:not(.gold):not(.success):not(.danger):not([style*="gradient"]){
  background: var(--branco-puro, #FFFFFF) !important;
}
.kpi-card{
  border: 1px solid rgba(58,53,49,0.06) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: var(--shadow-card-soft);
  transition: all 0.25s var(--ease-out-quart);
}
.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(184,151,58,0.25) !important;
}
.kpi-value{ letter-spacing: -0.03em; }
.kpi-label{ letter-spacing: 0.14em; }

/* ── TOPBAR · backdrop blur mais forte ─────────────────────── */
.topbar{
  background: rgba(253,251,247,0.78) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  border-bottom: 1px solid rgba(58,53,49,0.06) !important;
}

/* Search bar refinada */
.search-global input{
  background: rgba(58,53,49,0.04) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  height: 40px !important;
  transition: all 0.18s var(--ease-out-quart);
}
.search-global input:focus{
  background: var(--branco-puro, #FFFFFF) !important;
  border-color: rgba(184,151,58,0.4) !important;
  box-shadow: 0 0 0 4px rgba(184,151,58,0.10), 0 2px 8px rgba(58,53,49,0.06) !important;
}

/* Botão Novo · gradiente premium */
#btn-novo-quick{
  background: linear-gradient(135deg, var(--vinho-deep) 0%, var(--vinho) 100%) !important;
  color: #F5F0E8 !important;
  border: none !important;
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(107,31,42,0.20), 0 4px 12px rgba(107,31,42,0.18), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all 0.18s var(--ease-out-quart);
}
#btn-novo-quick:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(107,31,42,0.25), 0 8px 20px rgba(107,31,42,0.25), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Botões ícone do topbar */
.btn-icon{
  background: rgba(58,53,49,0.04) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  transition: all 0.18s var(--ease-out-quart);
}
.btn-icon:hover{
  background: var(--branco-puro, #FFFFFF) !important;
  border-color: rgba(184,151,58,0.3) !important;
  box-shadow: 0 2px 6px rgba(58,53,49,0.08);
}

/* User pill refinada */
.user-pill{
  background: rgba(58,53,49,0.04) !important;
  border: 1px solid transparent !important;
  transition: all 0.18s var(--ease-out-quart);
}
.user-pill:hover{
  background: var(--branco-puro, #FFFFFF) !important;
  border-color: rgba(184,151,58,0.3) !important;
  box-shadow: 0 2px 6px rgba(58,53,49,0.08);
}

/* ── SIDEBAR · refinos ─────────────────────────────────────── */
.sidebar{
  background: rgba(253,251,247,0.6) !important;
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(58,53,49,0.06) !important;
}
.nav-item{
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  transition: all 0.15s var(--ease-out-quart);
}
.nav-item:hover{
  background: rgba(107,31,42,0.05) !important;
  color: var(--vinho-deep) !important;
}
.nav-item.active{
  background: linear-gradient(135deg, var(--vinho), var(--vinho-deep)) !important;
  color: #F5F0E8 !important;
  box-shadow: 0 1px 2px rgba(107,31,42,0.25), 0 4px 12px rgba(107,31,42,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}
.nav-badge{
  background: rgba(184,151,58,0.15) !important;
  color: var(--dourado-deep) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  font-weight: 700 !important;
  min-width: 20px;
  text-align: center;
}
.nav-item.active .nav-badge{
  background: rgba(255,255,255,0.18) !important;
  color: #F5F0E8 !important;
}
.nav-section-title{
  letter-spacing: 0.20em !important;
  opacity: 0.7;
  font-size: 10px !important;
}

/* ── COLUNA DIREITA · aside.aside ──────────────────────────── */
aside.aside{
  background: transparent !important;
  padding: 24px 18px !important;
  border-left: 1px solid rgba(58,53,49,0.06) !important;
  overflow-y: auto;
}
.aside-section{
  background: var(--branco-puro, #FFFFFF) !important;
  border: 1px solid rgba(58,53,49,0.06) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 2px rgba(58,53,49,0.03), 0 4px 14px rgba(58,53,49,0.04);
  transition: box-shadow 0.25s var(--ease-out-quart);
}
.aside-section:hover{
  box-shadow: 0 1px 2px rgba(58,53,49,0.05), 0 8px 22px rgba(58,53,49,0.06);
}
.aside-section-title{
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  color: var(--dourado) !important;
  opacity: 0.85;
  margin-bottom: 10px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184,151,58,0.12);
}
.aside-section .nav-item{
  font-size: 12.5px !important;
  padding: 7px 10px !important;
  margin-bottom: 2px;
}
.aside-section .nav-icon{
  color: var(--dourado);
  opacity: 0.8;
  width: 18px;
  text-align: center;
}
body.dark aside.aside{ border-left-color: rgba(216,185,104,0.08) !important; }
body.dark .aside-section{
  background: #231F1B !important;
  border-color: rgba(216,185,104,0.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.18) !important;
}

/* ── BANNER FOCO · refinos premium ─────────────────────────── */
.banner-foco, [data-foco-banner]{
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(107,31,42,0.20), 0 12px 32px rgba(107,31,42,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ── INPUTS · refinos ──────────────────────────────────────── */
.input, .select, .textarea{
  background: var(--branco-puro, #FFFFFF) !important;
  border: 1px solid rgba(58,53,49,0.10) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  transition: all 0.18s var(--ease-out-quart);
}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(184,151,58,0.5) !important;
  box-shadow: 0 0 0 4px rgba(184,151,58,0.10) !important;
  outline: none !important;
}

/* ── BUTTONS · refinos ─────────────────────────────────────── */
.btn{
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  transition: all 0.18s var(--ease-out-quart);
}
.btn-primary{
  background: linear-gradient(135deg, var(--vinho), var(--vinho-deep)) !important;
  color: #F5F0E8 !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(107,31,42,0.20), 0 4px 10px rgba(107,31,42,0.18), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(107,31,42,0.25), 0 8px 18px rgba(107,31,42,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.btn-ghost{
  background: transparent !important;
  border: 1px solid rgba(58,53,49,0.12) !important;
  color: var(--carvao) !important;
}
.btn-ghost:hover{
  background: rgba(58,53,49,0.04) !important;
  border-color: rgba(184,151,58,0.4) !important;
  color: var(--vinho-deep) !important;
}
.btn-gold{
  background: linear-gradient(135deg, var(--dourado), var(--dourado-deep)) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(184,151,58,0.25), 0 4px 10px rgba(184,151,58,0.20), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.btn-sm{ padding: 6px 12px !important; font-size: 12.5px !important; }

/* ── EMPTY STATES · mais elegantes ─────────────────────────── */
.empty{
  color: var(--carvao);
  opacity: 0.55;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.empty-icon{
  font-size: 28px;
  opacity: 0.4;
  margin-bottom: 8px;
}

/* ── KPI GRID · grid breathing ─────────────────────────────── */
.kpi-grid{ gap: 16px !important; margin-bottom: 24px !important; }

/* ── TABELAS · refinadas ──────────────────────────────────── */
.tabela{ font-size: 13.5px; }
.tabela thead th{
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--dourado) !important;
  opacity: 0.85;
  padding: 14px 16px !important;
  background: rgba(58,53,49,0.02) !important;
  border-bottom: 1px solid rgba(58,53,49,0.06) !important;
}
.tabela tbody td{
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(58,53,49,0.04);
}
.tabela tbody tr:hover td{
  background: rgba(184,151,58,0.04);
}

/* ── TAGS · refinadas ──────────────────────────────────────── */
.tag{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}

/* ── DARK MODE compatibility (refresh layer) ──────────────── */
body.dark .main{ background: linear-gradient(180deg, #1A1815 0%, #14110E 100%) !important; }
body.dark .card:not([style*="gradient"]):not([style*="background"]),
body.dark .kpi-card:not(.gold):not(.success):not(.danger):not([style*="gradient"]){
  background: #231F1B !important;
  border-color: rgba(216,185,104,0.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.20) !important;
}
body.dark .card:hover, body.dark .kpi-card:hover{
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 14px 36px rgba(216,185,104,0.10) !important;
  border-color: rgba(216,185,104,0.20) !important;
}
body.dark .topbar{ background: rgba(20,17,14,0.78) !important; }
body.dark .sidebar{ background: rgba(20,17,14,0.6) !important; }
body.dark .search-global input{ background: rgba(216,185,104,0.06) !important; }
body.dark .search-global input:focus{ background: #231F1B !important; }
body.dark .btn-icon, body.dark .user-pill{ background: rgba(216,185,104,0.06) !important; }
body.dark .btn-icon:hover, body.dark .user-pill:hover{ background: #231F1B !important; }
body.dark .card-title{ color: var(--marfim) !important; }
body.dark .tabela thead th{ background: rgba(216,185,104,0.04) !important; }
body.dark .tabela tbody tr:hover td{ background: rgba(216,185,104,0.06); }

/* ── EMPTY STATES ART · SVG line-art ──────────────────────── */
.empty-art{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  text-align: center;
  color: var(--carvao);
}
.empty-art svg{
  width: 56px;
  height: 56px;
  color: var(--dourado);
  opacity: 0.40;
  margin-bottom: 14px;
  animation: emptyFloat 4.5s ease-in-out infinite;
}
@keyframes emptyFloat{
  0%, 100% { transform: translateY(0); opacity: 0.40; }
  50%      { transform: translateY(-3px); opacity: 0.55; }
}
.empty-title{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--vinho-deep);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.empty-sub{
  font-size: 12px;
  opacity: 0.55;
  letter-spacing: -0.005em;
}
body.dark .empty-title{ color: var(--marfim); }
body.dark .empty-art svg{ color: var(--dourado-light); }

/* ── STAGGER FADE-IN · cards entram em cascata ───────────── */
@keyframes refreshFadeIn{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card.fade-in, .kpi-card{
  animation: refreshFadeIn 0.45s var(--ease-out-quart) both;
}
.fade-in:nth-child(1), .kpi-grid > :nth-child(1){ animation-delay: 0.02s; }
.fade-in:nth-child(2), .kpi-grid > :nth-child(2){ animation-delay: 0.08s; }
.fade-in:nth-child(3), .kpi-grid > :nth-child(3){ animation-delay: 0.14s; }
.fade-in:nth-child(4), .kpi-grid > :nth-child(4){ animation-delay: 0.20s; }
.fade-in:nth-child(5), .kpi-grid > :nth-child(5){ animation-delay: 0.26s; }
.fade-in:nth-child(6), .kpi-grid > :nth-child(6){ animation-delay: 0.32s; }
.page-header.fade-in{ animation-delay: 0s; }

/* ── SCROLLBAR custom · sutil e premium ───────────────────── */
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar, aside.aside::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, aside.aside::-webkit-scrollbar-track{
  background: transparent;
}
.main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, aside.aside::-webkit-scrollbar-thumb{
  background: rgba(58,53,49,0.15) !important;
  border-radius: 999px !important;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.main::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover, aside.aside::-webkit-scrollbar-thumb:hover{
  background: rgba(107,31,42,0.30) !important;
  background-clip: padding-box;
}
* { scrollbar-width: thin; scrollbar-color: rgba(58,53,49,0.15) transparent; }
body.dark .main::-webkit-scrollbar-thumb, body.dark .sidebar::-webkit-scrollbar-thumb{
  background: rgba(216,185,104,0.18) !important;
}

/* ── KPI VALUE · letter-spacing premium ──────────────────── */
.kpi-value{
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em !important;
}

/* ── PAGE HEADER spacing ──────────────────────────────────── */
.page-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* ── DIVIDER sutil dentro de cards ────────────────────────── */
.card hr, .card-divider{
  border: none;
  border-top: 1px solid rgba(58,53,49,0.06);
  margin: 14px 0;
}

/* ── FOCUS RINGS premium (acessibilidade + estética) ─────── */
button:focus-visible, a:focus-visible, .nav-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,151,58,0.30) !important;
}

/* ── TOAST refinos ─────────────────────────────────────────── */
.toast{
  border-radius: 14px !important;
  background: rgba(30,22,18,0.94) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(216,185,104,0.20) !important;
  color: var(--marfim) !important;
  letter-spacing: -0.005em;
}

/* ── REDUCED MOTION respect ───────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── MOBILE refinements ───────────────────────────────────── */
@media (max-width: 720px){
  .card{ border-radius: 14px !important; }
  .kpi-card{ border-radius: 14px !important; }
  .card-header{ padding: 14px 16px 10px !important; }
  .card-body{ padding: 14px 16px 16px !important; }
}