/* ═══════════════════════════════════════════════
   HUBTOOLS — barra lateral (voltar à área de trabalho + tema) e correções de contraste
   Carregado depois de style.css/hubtools.css no index.html e no gestao.html.
   O tema é escolhido em js/hub-ui.js e fica em <html data-tema="escuro|claro">.
═══════════════════════════════════════════════ */

/* ── TEMA CLARO: só troca as variáveis; o resto do sistema já usa var(--…) ── */
:root[data-tema="claro"]{
  /* hub (style.css + hubtools.css) */
  --ht-bg:#EEF2F6;--ht-bg2:#FFFFFF;--ht-card:#FFFFFF;--ht-card-hover:#EDF3F8;
  --ht-border:#D3DCE4;--ht-primary:#12945A;--ht-primary-hover:#0F8150;
  --ht-primary-dark:#0B6B41;--ht-text:#122031;--ht-text2:#47596B;
  --ht-muted:#68798A;--ht-warning:#A35B00;--ht-danger:#C62828;
  /* gestao.html */
  --bg:#EEF2F6;--bg2:#FFFFFF;--card:#FFFFFF;--card-hover:#EDF3F8;
  --border:#D3DCE4;--text:#122031;--text2:#47596B;--muted:#68798A;
  --primary:#12945A;--primary-dark:#0B6B41;--green:#12945A;--green-dark:#0B6B41;
  --red:#C62828;--orange:#A35B00;
}
:root[data-tema="claro"] body{background:var(--ht-bg);color:var(--ht-text);}
:root[data-tema="claro"] #workspaceView{background:#EEF2F6;}
:root[data-tema="claro"] #workspaceView::before{opacity:.10;}
:root[data-tema="claro"] #workspaceView::after{background:
  linear-gradient(rgba(18,148,90,.05) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(18,148,90,.05) 1px,transparent 1px) 0 0/48px 48px;}
:root[data-tema="claro"] .ws-topbar{background:rgba(255,255,255,.82);border-bottom-color:#D3DCE4;}
:root[data-tema="claro"] .ws-card{
  background:linear-gradient(155deg,#FFFFFF,#F7FAFC 60%,#F1F5F9)!important;
  border-color:#D3DCE4!important;box-shadow:0 8px 20px rgba(18,32,49,.08),inset 0 1px 0 #fff;}
:root[data-tema="claro"] .ws-card:hover{border-color:var(--ht-primary)!important;
  box-shadow:0 12px 26px rgba(18,32,49,.12),0 0 0 1px rgba(18,148,90,.15);}
:root[data-tema="claro"] .ws-greeting h1,:root[data-tema="claro"] .ws-card-name{color:var(--ht-text)!important;}
:root[data-tema="claro"] .ws-greeting-sub,:root[data-tema="claro"] .ws-card-desc{color:var(--ht-text2)!important;}
:root[data-tema="claro"] .ws-card-icon{background:rgba(18,148,90,.08);border-color:rgba(18,148,90,.35);}
:root[data-tema="claro"] .ws-card-icon svg,:root[data-tema="claro"] .ws-card-go{stroke:var(--ht-primary);color:var(--ht-primary);}
:root[data-tema="claro"] .ws-card-icon svg .f{fill:var(--ht-primary);}
:root[data-tema="claro"] .ws-card-icon svg .f2{fill:#3FBE84;}
:root[data-tema="claro"] .ws-user-chip{background:#FFFFFF;border-color:#D3DCE4;}
:root[data-tema="claro"] .ht-sub,:root[data-tema="claro"] .ws-section-title{color:var(--ht-text2);}
:root[data-tema="claro"] .ws-foot{color:#7B8A98;}

/* ══ CONTRASTE — Check List (o quadro nasceu claro; o tema escuro trocou só os fundos) ══ */
#clView .board-col-name,
#clView .board-card-name,
#clView .board-modal-title{color:var(--ht-text)!important;}
#clView .board-col-count{color:var(--ht-text2)!important;background:rgba(127,143,160,.18)!important;}
#clView .board-card-ct{color:var(--ht-text2)!important;}
#clView .board-card-ct.bdone{color:var(--ht-primary)!important;}
#clView .board-card-bar-wrap,
#clView .board-modal-bar-wrap{background:rgba(127,143,160,.28)!important;}
#clView .board-add-card-btn{color:var(--ht-text2)!important;}
#clView .board-add-card-btn:hover{background:rgba(127,143,160,.14)!important;color:var(--ht-text)!important;}
#clView .board-col-name:hover{background:rgba(127,143,160,.14);}
#clView .board-col-name:focus{background:var(--ht-bg2);box-shadow:0 0 0 2px var(--ht-primary);}
#clView .board-inline-input,
#clView .board-add-item-input{background:var(--ht-bg2)!important;color:var(--ht-text)!important;border-color:var(--ht-border)!important;}
#clView .board-inline-input:focus,
#clView .board-add-item-input:focus{border-color:var(--ht-primary)!important;}
#clView .board-inline-save,
#clView .board-add-item-btn{background:var(--ht-primary)!important;}
#clView .board-add-col-btn,
#clView .board-add-col-form{background:var(--ht-card)!important;border:1px solid var(--ht-border)!important;}
#clView .board-add-col-btn{color:var(--ht-text)!important;}
#clView .board-add-col-btn:hover{background:var(--ht-card-hover)!important;}
/* modal do card */
.board-modal{background:var(--ht-card)!important;color:var(--ht-text)!important;}
.board-modal-sec-label,.board-modal-pct,.board-modal-sub{color:var(--ht-text2)!important;}
.board-item-label{color:var(--ht-text)!important;}
.board-item.bck .board-item-label{color:var(--ht-muted)!important;}
.board-item:hover{background:rgba(127,143,160,.14)!important;}
.board-item-check{background:var(--ht-bg2)!important;border-color:var(--ht-border)!important;}
.board-item.bck .board-item-check{background:var(--ht-primary)!important;border-color:var(--ht-primary)!important;color:#fff!important;}
.board-item-del:hover{background:rgba(198,40,40,.12)!important;}
.board-modal-del-card{color:var(--ht-danger)!important;}
.board-modal-del-card:hover{background:rgba(198,40,40,.12)!important;}

/* cabeçalho do modal: o tema tira a cor da coluna, então o X e o título seguem o tema */
.board-modal-head{border-bottom:1px solid var(--ht-border)!important;}
.board-modal-x{background:rgba(127,143,160,.2)!important;color:var(--ht-text)!important;}
.board-modal-x:hover{background:rgba(198,40,40,.16)!important;color:var(--ht-danger)!important;}
.board-modal-title:focus{background:rgba(127,143,160,.18)!important;}

/* Planograma e MIX: textos que ficaram com a cor antiga */
#homeView .home-breadcrumb,#homeView .home-header h1{color:var(--ht-text)!important;}
#mixView .mix-row,#mixView .mix-row td{color:var(--ht-text)!important;}

/* ══════════════════════════════════════════════
   BARRA LATERAL RETRÁTIL
══════════════════════════════════════════════ */
.hr-aba{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:100000;
  width:22px;height:86px;border:none;border-radius:0 10px 10px 0;cursor:pointer;
  background:linear-gradient(135deg,var(--ht-primary,#28C978),var(--ht-primary-dark,#159A5A));
  color:#fff;display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:2px 0 12px rgba(0,0,0,.35);transition:width .18s,filter .18s;
}
.hr-aba:hover{width:28px;filter:brightness(1.1);}
.hr-aba svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.hr-fundo{position:fixed;inset:0;z-index:100000;background:rgba(3,10,18,.55);opacity:0;pointer-events:none;transition:opacity .2s;}
.hr-fundo.hr-on{opacity:1;pointer-events:auto;}
.hr{
  position:fixed;left:0;top:0;bottom:0;z-index:100001;width:248px;max-width:84vw;
  background:var(--ht-bg2,#0C1A2B);border-right:1px solid var(--ht-border,#2A3B4F);
  box-shadow:6px 0 28px rgba(0,0,0,.4);transform:translateX(-100%);transition:transform .22s ease;
  display:flex;flex-direction:column;color:var(--ht-text,#F4F7FA);
  font-family:'Inter',system-ui,sans-serif;
}
.hr.hr-on{transform:translateX(0);}
.hr-topo{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid var(--ht-border,#2A3B4F);}
.hr-topo svg{width:34px;height:34px;flex:none;}
.hr-topo b{font-size:17px;font-weight:700;letter-spacing:-.4px;}
.hr-topo b i{font-style:normal;color:var(--ht-primary,#28C978);}
.hr-topo small{display:block;font-size:8.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ht-text2,#94A3B8);margin-top:3px;}
.hr-fechar{margin-left:auto;background:none;border:none;color:var(--ht-text2,#94A3B8);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px;}
.hr-fechar:hover{color:var(--ht-danger,#EF4444);background:rgba(198,40,40,.1);}
.hr-corpo{padding:12px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;}
.hr-titulo{font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ht-muted,#64748B);margin:10px 6px 2px;}
.hr-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;
  background:transparent;border:1px solid transparent;color:var(--ht-text,#F4F7FA);
  font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background .15s,border-color .15s;
}
.hr-item:hover{background:var(--ht-card-hover,#182B40);border-color:var(--ht-border,#2A3B4F);}
.hr-item svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.hr-item.hr-sel{background:rgba(40,201,120,.12);border-color:var(--ht-primary,#28C978);color:var(--ht-primary,#28C978);font-weight:600;}
.hr-item .hr-ok{margin-left:auto;font-size:13px;opacity:0;}
.hr-item.hr-sel .hr-ok{opacity:1;}
.hr-rodape{margin-top:auto;padding:12px 16px;border-top:1px solid var(--ht-border,#2A3B4F);font-size:11px;color:var(--ht-muted,#64748B);}
@media (max-width:540px){ .hr-aba{height:72px;} }
@media (prefers-reduced-motion:reduce){ .hr,.hr-fundo,.hr-aba{transition:none;} }

/* A tela de entrada é sempre escura — a arte foi feita para o fundo escuro.
   As variáveis são redeclaradas dentro do #loginView, então valem para todo o bloco. */
:root[data-tema="claro"] #loginView{
  --ht-bg:#071321;--ht-bg2:#0C1A2B;--ht-card:#122235;--ht-card-hover:#182B40;
  --ht-border:#2A3B4F;--ht-text:#F4F7FA;--ht-text2:#94A3B8;--ht-muted:#64748B;
  background:#071321;color:#F4F7FA;
}