/* =============================================================
 * OG.GLASS v4 — skin definitiva do Portal Oriente Peças
 * -------------------------------------------------------------
 * Carregado DEPOIS do styles.css: reveste as classes legadas
 * (.panel, .kpi, .btn, .modal, inputs, tabelas) com a linguagem
 * og.glass — vidro translúcido + blur + brilho interno + a barra
 * de gradiente da marca — SEM tocar no markup dos 122 módulos.
 *
 * Princípios:
 *  - Texto sempre sólido (nunca opacity em texto)
 *  - Tabelas longas: linhas sólidas (glass só no container) → GPU
 *  - Fallback sólido se o navegador não tem backdrop-filter
 *  - Dark mode coberto via :root[data-theme="dark"]
 *  - !important restrito a propriedades de superfície (bg/borda/
 *    sombra/blur) pra vencer o CSS legado com previsibilidade
 * ============================================================= */

:root{
  /* superfícies glass (claro) */
  --og-bg:            rgba(255,255,255,.62);
  --og-bg-strong:     rgba(255,255,255,.78);
  --og-bg-input:      rgba(255,255,255,.66);
  --og-bg-dark:       rgba(8,22,18,.86);
  --og-border:        rgba(255,255,255,.65);
  --og-border-soft:   rgba(14,79,59,.10);
  --og-blur:          blur(18px) saturate(1.55);
  --og-blur-strong:   blur(26px) saturate(1.6);
  --og-shadow:        0 8px 26px rgba(6,60,50,.10);
  --og-shadow-hover:  0 14px 34px rgba(6,60,50,.16);
  --og-shadow-modal:  0 28px 80px rgba(4,30,25,.35);
  --og-inset:         inset 0 1px 0 rgba(255,255,255,.75);
  --og-inset-dark:    inset 0 1px 0 rgba(255,255,255,.14);
  /* assinatura: barra gradiente da marca */
  --og-topbar-grad:   linear-gradient(90deg,#068070 0%,#2D8D6B 45%,#9AB859 100%);
  --og-brand-grad:    linear-gradient(135deg,#068070 0%,#2D8D6B 60%,#61A262 100%);
}

/* ============ FUNDO GERAL: gradiente da marca + anéis ============ */
body{
  background:
    radial-gradient(900px 540px at 100% -10%, rgba(208,204,82,.13), transparent 55%),
    radial-gradient(760px 560px at -8% 108%, rgba(6,128,112,.14), transparent 60%),
    linear-gradient(160deg,#EAF4EF 0%,#F2F7F0 45%,#EDF6F2 100%) fixed !important;
}
/* anéis da marca em marca d'água (canto sup. direito) */
body::after{
  content:'';position:fixed;top:-170px;right:-170px;width:520px;height:520px;
  border-radius:50%;pointer-events:none;z-index:0;opacity:.07;
  background:
    radial-gradient(circle, transparent 57%, #068070 57.5%, #068070 60.5%, transparent 61%),
    radial-gradient(circle, transparent 71%, #068070 71.5%, #068070 74.5%, transparent 75%),
    radial-gradient(circle, transparent 85%, #068070 85.5%, #068070 88.5%, transparent 89%);
}
.content{ background:transparent !important; }

/* ============ SIDEBAR (vidro escuro) ============ */
.sidebar{
  background:
    radial-gradient(ellipse 600px 800px at 50% 40%, rgba(6,128,112,.20), transparent 70%),
    linear-gradient(180deg, rgba(4,18,14,.92) 0%, rgba(10,34,27,.90) 60%, rgba(13,44,35,.88) 100%) !important;
  backdrop-filter:var(--og-blur);-webkit-backdrop-filter:var(--og-blur);
  border-right:1px solid rgba(255,255,255,.07) !important;
  box-shadow:var(--og-inset-dark), 6px 0 30px rgba(4,24,19,.25) !important;
}
.sidebar .nav-item:hover{ background:rgba(255,255,255,.07) !important; }
.sidebar .nav-item.active{
  background:rgba(154,184,89,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 3px 0 0 #D0CC52 !important;
}

/* ============ TOPBAR (vidro claro) ============ */
.topbar{
  background:var(--og-bg-strong) !important;
  backdrop-filter:var(--og-blur);-webkit-backdrop-filter:var(--og-blur);
  border-bottom:1px solid var(--og-border) !important;
  box-shadow:var(--og-inset), 0 6px 22px rgba(6,60,50,.07) !important;
}

/* ============ PANELS & FAMÍLIA DE CARDS ============ */
.panel,
.ed-card, .sgc-painel, .orc-sk-card, .cat-kpi, .cred-card,
.serie-card, .compras-card, .cot-card, .audit-card,
.prod-kpi-card, .mod-card, .dash-card{
  background:var(--og-bg) !important;
  backdrop-filter:var(--og-blur);-webkit-backdrop-filter:var(--og-blur);
  border:1px solid var(--og-border) !important;
  border-radius:16px !important;
  box-shadow:var(--og-shadow), var(--og-inset) !important;
}
.panel-header,
.ed-card-head, .sgc-painel-head, .orc-sk-card-head{
  background:transparent !important;
  border-bottom:1px solid var(--og-border-soft) !important;
}

/* ============ KPIs — assinatura og.glass (barra gradiente) ============ */
.kpi{
  background:var(--og-bg) !important;
  backdrop-filter:var(--og-blur);-webkit-backdrop-filter:var(--og-blur);
  border:1px solid var(--og-border) !important;
  border-radius:16px !important;
  box-shadow:var(--og-shadow), var(--og-inset) !important;
  position:relative;overflow:hidden;
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--og-topbar-grad);opacity:.9;
}
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--og-shadow-hover), var(--og-inset) !important; }

/* ============ BOTÕES ============ */
.btn:not(.btn-primary):not(.btn-secondary):not([style*="background"]){
  background:var(--og-bg-strong) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--og-border-soft) !important;
  box-shadow:var(--og-inset), 0 2px 8px rgba(6,60,50,.06) !important;
}
.btn:not(.btn-primary):not(.btn-secondary):not([style*="background"]):hover{
  border-color:rgba(6,128,112,.35) !important;
  box-shadow:var(--og-inset), 0 4px 14px rgba(6,60,50,.12) !important;
}
.btn-primary{
  background:var(--og-brand-grad) !important;
  border:none !important;
  box-shadow:0 8px 20px rgba(6,110,92,.32), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary:hover{
  box-shadow:0 10px 26px rgba(6,110,92,.42), inset 0 1px 0 rgba(255,255,255,.25) !important;
  filter:brightness(1.04);
}
.btn-primary:active{ transform:scale(.985); }
.btn-secondary{
  background:rgba(14,79,59,.07) !important;
  border:1px solid rgba(14,79,59,.16) !important;
}

/* ============ INPUTS / SELECTS / TEXTAREA ============ */
.field-input, .input, input[type="text"], input[type="search"],
input[type="number"], input[type="date"], input[type="email"],
input[type="password"], select, textarea{
  background:var(--og-bg-input) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--og-border-soft) !important;
  box-shadow:var(--og-inset) !important;
}
.field-input:focus, .input:focus, input:focus, select:focus, textarea:focus{
  border-color:rgba(6,128,112,.55) !important;
  box-shadow:var(--og-inset), 0 0 0 3px rgba(6,128,112,.13) !important;
  outline:none !important;
}

/* ============ MODAIS / DROPDOWNS ============ */
.modal-overlay{ background:rgba(6,26,21,.45) !important; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); }
.modal, .modal-content, .popup, .dialog{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:var(--og-blur-strong);-webkit-backdrop-filter:var(--og-blur-strong);
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:18px !important;
  box-shadow:var(--og-shadow-modal), var(--og-inset) !important;
}
.dropdown, .cfg-dropdown, .modulo-dropdown{
  background:rgba(255,255,255,.9) !important;
  backdrop-filter:var(--og-blur);-webkit-backdrop-filter:var(--og-blur);
  border:1px solid var(--og-border) !important;
  border-radius:14px !important;
  box-shadow:var(--og-shadow-hover) !important;
}

/* ============ TABELAS (glass no container, linhas sólidas) ============ */
.panel table thead th, .page table thead th{
  background:rgba(246,252,249,.92) !important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.panel table tbody tr:hover td, .page table tbody tr:hover td{
  background:rgba(6,128,112,.05);
}

/* ============ SCROLLBARS ============ */
::-webkit-scrollbar{ width:9px;height:9px; }
::-webkit-scrollbar-thumb{ background:rgba(14,79,59,.22);border-radius:9px;border:2px solid transparent;background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(14,79,59,.38);background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* ============ DARK MODE ============ */
:root[data-theme="dark"] body{
  background:
    radial-gradient(900px 540px at 100% -10%, rgba(208,204,82,.06), transparent 55%),
    radial-gradient(760px 560px at -8% 108%, rgba(6,128,112,.12), transparent 60%),
    linear-gradient(160deg,#0A1613 0%,#0D1F1A 50%,#0B1A16 100%) fixed !important;
}
:root[data-theme="dark"] body::after{ opacity:.05; }
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .ed-card, :root[data-theme="dark"] .sgc-painel,
:root[data-theme="dark"] .orc-sk-card, :root[data-theme="dark"] .cat-kpi,
:root[data-theme="dark"] .cred-card, :root[data-theme="dark"] .serie-card,
:root[data-theme="dark"] .compras-card, :root[data-theme="dark"] .cot-card,
:root[data-theme="dark"] .audit-card, :root[data-theme="dark"] .prod-kpi-card{
  background:rgba(18,30,26,.72) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:var(--og-inset-dark), 0 10px 30px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] .topbar{
  background:rgba(12,24,20,.82) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
  box-shadow:var(--og-inset-dark) !important;
}
:root[data-theme="dark"] .modal, :root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown, :root[data-theme="dark"] .cfg-dropdown{
  background:rgba(16,28,24,.9) !important;
  border-color:rgba(255,255,255,.1) !important;
}
:root[data-theme="dark"] .field-input, :root[data-theme="dark"] .input,
:root[data-theme="dark"] select, :root[data-theme="dark"] textarea{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* ============ FALLBACK sem backdrop-filter ============ */
@supports not (backdrop-filter: blur(1px)){
  .panel,.kpi,.ed-card,.sgc-painel,.orc-sk-card,.cat-kpi,.cred-card,
  .serie-card,.compras-card,.cot-card,.audit-card{ background:#fff !important; }
  .topbar{ background:#fbfdfc !important; }
  .modal,.modal-content{ background:#fff !important; }
  .sidebar{ background:linear-gradient(180deg,#061813,#0E2620) !important; }
}

/* ============ ACESSIBILIDADE: menos movimento ============ */
@media (prefers-reduced-motion: reduce){
  .kpi:hover{ transform:none; }
  .btn-primary:active{ transform:none; }
}

/* =============================================================
 * v4.1 — cobertura das classes CUSTOMIZADAS por módulo
 * (cards/KPIs que cada módulo criou por conta própria)
 * ============================================================= */

/* KPIs e painéis "singulares" (poucos por tela — glass completo) */
.cat-painel, .cat-painel-card,
.meu-kanban-kpi, .rep-kpi, .psup-kpi, .kn-kpi,
.transp-card, .g-card, .prod-card{
  background:var(--og-bg) !important;
  backdrop-filter:var(--og-blur);-webkit-backdrop-filter:var(--og-blur);
  border:1px solid var(--og-border) !important;
  border-radius:16px !important;
  box-shadow:var(--og-shadow), var(--og-inset) !important;
  position:relative;overflow:hidden;
}
.meu-kanban-kpi::before, .rep-kpi::before, .psup-kpi::before, .kn-kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--og-topbar-grad);opacity:.9;
}

/* Cards REPETIDOS em lista/kanban (dezenas por tela — translúcido
   SEM blur, senão a GPU chora no kanban e no inbox do WhatsApp) */
.meu-kanban-card, .item-card, .ctx-card{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(14,79,59,.10) !important;
  border-radius:12px !important;
  box-shadow:0 2px 8px rgba(6,60,50,.06), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.meu-kanban-card:hover, .item-card:hover, .ctx-card:hover{
  box-shadow:0 6px 16px rgba(6,60,50,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
  border-color:rgba(6,128,112,.25) !important;
}

/* modal-card segue a linguagem dos modais */
.modal-card{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:var(--og-blur-strong);-webkit-backdrop-filter:var(--og-blur-strong);
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:18px !important;
  box-shadow:var(--og-shadow-modal), var(--og-inset) !important;
}

/* Dark mode das customizadas */
:root[data-theme="dark"] .cat-painel, :root[data-theme="dark"] .cat-painel-card,
:root[data-theme="dark"] .meu-kanban-kpi, :root[data-theme="dark"] .rep-kpi,
:root[data-theme="dark"] .psup-kpi, :root[data-theme="dark"] .kn-kpi,
:root[data-theme="dark"] .transp-card, :root[data-theme="dark"] .g-card,
:root[data-theme="dark"] .prod-card, :root[data-theme="dark"] .modal-card{
  background:rgba(18,30,26,.72) !important;
  border-color:rgba(255,255,255,.09) !important;
}
:root[data-theme="dark"] .meu-kanban-card, :root[data-theme="dark"] .item-card,
:root[data-theme="dark"] .ctx-card{
  background:rgba(24,38,33,.85) !important;
  border-color:rgba(255,255,255,.08) !important;
}