/* V21 - refinamento visual profissional + contraste completo */
:root{
  --v21-bg:#f4f7f6;
  --v21-panel:#ffffff;
  --v21-panel-2:#f8fbf9;
  --v21-line:#e1e9e5;
  --v21-line-strong:#d1ddd7;
  --v21-text:#10211a;
  --v21-muted:#6c7b74;
  --v21-green:#18ad78;
  --v21-green-2:#0f8f62;
  --v21-shadow:0 14px 38px rgba(19,60,43,.08);
  --v21-shadow-hover:0 20px 48px rgba(19,60,43,.13);
  --v21-radius:18px;
}

html,body{min-height:100%}
body{
  background:
    radial-gradient(circle at 90% 0%,rgba(34,197,137,.075),transparent 30%),
    var(--v21-bg);
  color:var(--v21-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* identidade */
.brand-icon{
  background:url('/favicon-v21.png') center/contain no-repeat!important;
  color:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.login-logo{object-fit:contain!important;background:transparent!important;box-shadow:none!important}

/* estrutura */
.sidebar{
  border-right:1px solid var(--v21-line)!important;
  box-shadow:10px 0 30px rgba(18,43,33,.035);
}
.brand{border-bottom:1px solid var(--v21-line)!important}
.topbar{
  min-height:72px;
  border-bottom:1px solid var(--v21-line)!important;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(18px) saturate(1.15);
}
.content{max-width:1600px;margin:0 auto;padding:28px 30px 44px!important}

/* navegação */
.nav-title{font-size:9px!important;letter-spacing:.16em!important;font-weight:900!important;color:#9aa8a1!important;margin-top:20px!important}
.nav-item{
  min-height:43px!important;
  border-radius:12px!important;
  margin:3px 10px!important;
  padding:0 13px!important;
  transition:background .16s,transform .16s,color .16s!important;
}
.nav-item:hover{background:#f0f6f3!important;transform:translateX(2px)}
.nav-item.active{
  background:linear-gradient(135deg,#e5f7ef,#eefaf5)!important;
  color:#087b53!important;
  box-shadow:inset 0 0 0 1px rgba(24,173,120,.12)!important;
}
.nav-icon{font-size:15px!important}
.logout{border-top:1px solid var(--v21-line)!important}
.sidebar-collapse-btn{box-shadow:0 6px 18px rgba(0,0,0,.08)!important}

/* cards e painéis */
.hero,.card,.product-card,.product-detail,.user-card,.backup-action-card,.backup-security-note,.report-panel,.report-summary-card,.reports-head,.report-tab,.pricing-card,.pricing-summary-card,.profile-menu,.modal{
  border-color:var(--v21-line)!important;
  box-shadow:var(--v21-shadow)!important;
}
.card,.product-card,.user-card,.backup-action-card,.report-summary-card,.report-tab{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.card:hover,.product-card:hover,.user-card:hover,.backup-action-card:hover,.report-summary-card:hover,.report-tab:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--v21-shadow-hover)!important;
  border-color:var(--v21-line-strong)!important;
}

/* tipografia */
h1,h2,h3,h4,.card-title,.product-info b,.top-title{letter-spacing:-.025em}
h1{font-weight:800!important}
h2,h3{font-weight:760!important}
.sub,.desc,.meta,.help,.muted{color:var(--v21-muted)!important}

/* campos e busca */
input,textarea,select,.search,.reports-search input,.reports-toolbar select{
  border:1px solid var(--v21-line)!important;
  background:#fff!important;
  color:var(--v21-text)!important;
  border-radius:12px!important;
  transition:border-color .15s,box-shadow .15s,background .15s!important;
}
input:hover,textarea:hover,select:hover,.search:hover{border-color:var(--v21-line-strong)!important}
input:focus,textarea:focus,select:focus,.search:focus,.reports-search input:focus,.reports-toolbar select:focus{
  border-color:var(--v21-green)!important;
  box-shadow:0 0 0 3px rgba(24,173,120,.11)!important;
  outline:0!important;
}
input::placeholder,textarea::placeholder{color:#9ba8a2!important}

/* botões */
.btn,.quick-btn,.back,.close,.global-bell,.sidebar-collapse-btn,.drawer-close{
  border-radius:12px!important;
  border-color:var(--v21-line)!important;
  font-weight:750!important;
}
.btn.primary{
  background:linear-gradient(135deg,var(--v21-green),#20bd83)!important;
  border-color:var(--v21-green)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(24,173,120,.18)!important;
}
.btn.primary:hover{filter:brightness(.98);transform:translateY(-1px)}

/* produto */
.product-img,.card-img,.product-detail-photo{background:linear-gradient(145deg,#f8fbf9,#edf3f0)!important}
.product-detail{border-radius:22px!important}
.detail-field{border-radius:14px!important}
.sku-pill{font-weight:900!important;letter-spacing:.035em!important}
.product-quick-actions{gap:7px!important}
.quick-btn{min-height:38px!important}

/* conta */
.profile-menu{border-radius:17px!important;overflow:hidden}
.profile-menu-item{border-radius:11px!important}
.profile-menu-head{background:linear-gradient(135deg,#f7faf8,#eef7f3)!important;border-radius:12px!important}

/* login */
.login-page{
  background:
    radial-gradient(circle at 50% 5%,rgba(24,173,120,.13),transparent 35%),
    linear-gradient(145deg,#edf6f2,#f8fbf9)!important;
}
.login-card{border-radius:26px!important;padding:34px!important;box-shadow:0 35px 90px rgba(16,58,41,.15)!important}
.login-logo{width:100px!important;height:100px!important;border-radius:22px!important;margin-bottom:16px!important}
.login-card h1{font-size:27px!important}

/* relatórios */
.audit-table th{font-weight:900!important;letter-spacing:.08em!important}
.audit-table td{line-height:1.35}
.audit-value{font-weight:600}
.report-count{font-weight:850!important}

/* =========================================================
   TEMA ESCURO - contraste forte e legibilidade total
   ========================================================= */
:root[data-theme="dark"]{
  --v21-bg:#0b100e;
  --v21-panel:#121916;
  --v21-panel-2:#17201c;
  --v21-line:#27342f;
  --v21-line-strong:#3a4b44;
  --v21-text:#f2f7f4;
  --v21-muted:#a8b7b0;
  --v21-green:#2bc58b;
  --v21-green-2:#67ddb0;
  --v21-shadow:0 14px 38px rgba(0,0,0,.30);
  --v21-shadow-hover:0 22px 54px rgba(0,0,0,.40);
  --bg:#0b100e!important;
  --panel:#121916!important;
  --soft:#1a2420!important;
  --line:#27342f!important;
  --text:#f2f7f4!important;
  --muted:#a8b7b0!important;
  --green-soft:#13372b!important;
  --green-dark:#71e0b4!important;
}
:root[data-theme="dark"] body{
  background:radial-gradient(circle at 88% 0%,rgba(43,197,139,.055),transparent 30%),#0b100e!important;
  color:#f2f7f4!important;
}
:root[data-theme="dark"] .main{background:transparent!important}
:root[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#101714,#0c1210)!important;border-color:#27342f!important}
:root[data-theme="dark"] .topbar{background:rgba(16,23,20,.92)!important;border-color:#27342f!important;color:#f2f7f4!important}
:root[data-theme="dark"] .brand{border-color:#27342f!important}

/* qualquer texto que antes herdava preto */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .top-title,
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .product-info,
:root[data-theme="dark"] .product-info b,
:root[data-theme="dark"] .product-detail-info,
:root[data-theme="dark"] .product-detail-info b,
:root[data-theme="dark"] .product-detail-info strong,
:root[data-theme="dark"] .user-title b,
:root[data-theme="dark"] .backup-action-copy h2,
:root[data-theme="dark"] .reports-head h1,
:root[data-theme="dark"] .report-panel-head h2,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .modal b,
:root[data-theme="dark"] .modal label,
:root[data-theme="dark"] .account-info-main h3,
:root[data-theme="dark"] .profile-menu-item,
:root[data-theme="dark"] .profile-menu-item b,
:root[data-theme="dark"] .notification-text b{
  color:#f2f7f4!important;
}
:root[data-theme="dark"] .sub,
:root[data-theme="dark"] .desc,
:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .help,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .text-soft,
:root[data-theme="dark"] .product-description,
:root[data-theme="dark"] .report-panel-head p,
:root[data-theme="dark"] .reports-head p,
:root[data-theme="dark"] .backup-action-copy p,
:root[data-theme="dark"] .user-perm-summary,
:root[data-theme="dark"] .profile-menu-item small,
:root[data-theme="dark"] .profile-menu-head small{
  color:#a8b7b0!important;
}

/* superfícies que ainda podiam ficar claras */
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .product-detail,
:root[data-theme="dark"] .detail-field,
:root[data-theme="dark"] .user-card,
:root[data-theme="dark"] .backup-action-card,
:root[data-theme="dark"] .backup-security-note,
:root[data-theme="dark"] .backup-drop-zone,
:root[data-theme="dark"] .backup-validation,
:root[data-theme="dark"] .report-panel,
:root[data-theme="dark"] .report-summary-card,
:root[data-theme="dark"] .reports-head,
:root[data-theme="dark"] .report-tab,
:root[data-theme="dark"] .reports-toolbar,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .pricing-summary-card,
:root[data-theme="dark"] .pricing-global-box,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .profile-menu,
:root[data-theme="dark"] .notification-drawer,
:root[data-theme="dark"] .location-toast,
:root[data-theme="dark"] .account-details>div,
:root[data-theme="dark"] .perm-group{
  background:#121916!important;
  color:#f2f7f4!important;
  border-color:#27342f!important;
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .reports-head{background:linear-gradient(135deg,#131b18,#17211d)!important}
:root[data-theme="dark"] .report-tab.active{background:linear-gradient(135deg,#15392d,#15201c)!important}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .reports-search input,
:root[data-theme="dark"] .reports-toolbar select{
  background:#0d1411!important;
  color:#f2f7f4!important;
  border-color:#304039!important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#778981!important}

:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .quick-btn,
:root[data-theme="dark"] .back,
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .global-bell,
:root[data-theme="dark"] .sidebar-collapse-btn,
:root[data-theme="dark"] .drawer-close{
  background:#1a2420!important;
  color:#edf5f1!important;
  border-color:#33443c!important;
}
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .quick-btn:hover{background:#223029!important}
:root[data-theme="dark"] .btn.primary{background:linear-gradient(135deg,#1fb77f,#2bc58b)!important;color:#fff!important;border-color:#2bc58b!important}

:root[data-theme="dark"] .nav-title{color:#71827a!important}
:root[data-theme="dark"] .nav-item{color:#bdc9c3!important}
:root[data-theme="dark"] .nav-item:hover{background:#19231f!important;color:#fff!important}
:root[data-theme="dark"] .nav-item.active{background:linear-gradient(135deg,#15392d,#17241f)!important;color:#7ae3b7!important;box-shadow:inset 0 0 0 1px rgba(74,214,159,.15)!important}

:root[data-theme="dark"] .product-img,
:root[data-theme="dark"] .card-img,
:root[data-theme="dark"] .product-detail-photo,
:root[data-theme="dark"] .media-preview,
:root[data-theme="dark"] .media-upload{
  background:linear-gradient(145deg,#17201c,#101714)!important;
  border-color:#2b3a34!important;
}

:root[data-theme="dark"] .audit-table th{background:#17201c!important;color:#b9c7c0!important;border-color:#27342f!important}
:root[data-theme="dark"] .audit-table td{color:#eaf1ed!important;border-color:#23312b!important}
:root[data-theme="dark"] .audit-table tbody tr:hover{background:#17201c!important}
:root[data-theme="dark"] .audit-value{background:#18221e!important;color:#b8c6bf!important}
:root[data-theme="dark"] .audit-value.new{color:#edf5f1!important}
:root[data-theme="dark"] .report-count{background:#1b2621!important;color:#b9c7c0!important}

:root[data-theme="dark"] .count,
:root[data-theme="dark"] .sku-pill,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .badge-type{background:#17372c!important;color:#79dfb5!important}

:root[data-theme="dark"] .profile-menu-head{background:linear-gradient(135deg,#17211d,#101714)!important}
:root[data-theme="dark"] .profile-menu-item:hover{background:#1a2420!important;color:#fff!important}
:root[data-theme="dark"] .profile-menu-sep{background:#27342f!important}

:root[data-theme="dark"] .login-page{background:radial-gradient(circle at 50% 5%,rgba(43,197,139,.08),transparent 35%),linear-gradient(145deg,#0b100e,#111916)!important}
:root[data-theme="dark"] .login-card{background:#121916!important;color:#f2f7f4!important;border-color:#27342f!important}
:root[data-theme="dark"] .login-card p{color:#a8b7b0!important}

/* alertas mantêm contraste sem amarelo escuro ilegível */
:root[data-theme="dark"] .low-text,
:root[data-theme="dark"] .detail-alert,
:root[data-theme="dark"] .stock-bell,
:root[data-theme="dark"] .notification-item{
  background:#332a19!important;
  color:#f0d28a!important;
  border-color:#6c572e!important;
}
:root[data-theme="dark"] .notification-item b{color:#f6e4b2!important}

/* QR continua branco para leitura */
:root[data-theme="dark"] .qr-code-box{background:#fff!important}

/* scrollbar */
:root[data-theme="dark"] *{scrollbar-color:#43554d #121916}
:root[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
:root[data-theme="dark"] ::-webkit-scrollbar-track{background:#121916}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#43554d;border:2px solid #121916;border-radius:999px}

@media(max-width:900px){.content{padding:22px 18px 36px!important}}
@media(max-width:620px){.content{padding:18px 12px 30px!important}.login-card{padding:25px!important}}