/*
  Tema Decmetal para o Planka 2.2.1
  Paleta copiada do site oficial https://www.decmetal.com.br/ (bloco :root do site).
  Ordem de uso: branco/papel (base) > azul-marinho (estrutura) > laranja (destaque).

  Este arquivo complementa a troca de cores feita pelo compose (ver "command" no
  docker-compose), que substitui os tons padrao do Planka pelos tons abaixo.
  Os nomes de classe (ex.: _jdrq3_) sao da versao 2.2.1; por isso a imagem fica fixada nessa versao.
*/

:root {
  --dec-navy: #0B1F3A;
  --dec-navy-deep: #071528;
  --dec-navy-2: #0F2847;
  --dec-navy-3: #16283F;
  --dec-steel: #3C5470;
  --dec-yellow: #F2A900;       /* laranja Decmetal */
  --dec-yellow-hover: #D99700;
  --dec-red: #C8102E;
  --dec-paper: #F5F4F0;
  --dec-paper-2: #EBEAE4;
  --dec-ink: #0D131C;
  --dec-ink-soft: #565F6B;
  --dec-line: #DBDAD2;
  --dec-white: #FFFFFF;
  --dec-muted: #93A0B0;
}

::selection { background: var(--dec-yellow); color: var(--dec-navy); }

/* Fundo geral: cinza claro "papel" do site (#F5F4F0) */
#app { background: var(--dec-paper) !important; }
#app ._wrapper_rbzeo_5,
#app ._wrapper_18h1r_37 { background: transparent !important; }

/* Colunas: papel escuro com borda fina, como os blocos do site */
#app ._outerWrapper_hsqrn_135 { border: 1px solid var(--dec-line); }

/* Elementos que o Planka desenha para fundo escuro (texto branco): passam a usar azul-marinho */
#app ._content_3ys5t_5, #app ._content_3ys5t_5 a, #app ._header_3ys5t_15,
#app ._textLink_1u45e_13, #app ._closeButton_1u45e_38,
#app ._searchInactive_1ls9w_14, #app ._searchInactive_1ls9w_14 input, #app ._searchInactive_1ls9w_14 input::placeholder,
#app ._button_ygjr8_8, #app ._addButton_u3rl2_5,
#app ._editButton_cjxaz_5, #app ._name_cjxaz_30, #app ._tab_cjxaz_47:hover ._name_cjxaz_30, #app ._tabActive_cjxaz_62 ._name_cjxaz_30,
#app ._addButton_mp09h_5,
#app ._filterLabel_uc4mw_27, #app ._filterTitle_uc4mw_42,
#app ._searchInactive_uc4mw_64, #app ._searchInactive_uc4mw_64 input, #app ._searchInactive_uc4mw_64 input::placeholder,
#app ._button_1cyxy_8, #app ._buttonGroup_1cyxy_23 ._button_1cyxy_8:enabled,
#app ._icon_1gfxr_5, #app ._othersButton_1gfxr_9,
#app ._addButton_1lbjc_5, #app ._contextTitle_1cmnv_26,
#app ._wrapper_4cmp3_201, #app ._contentError_1l6bz_19,
#app ._addListButton_11uup_5, #app ._addCardButton_1utaf_5, #app ._addCardButton_1bbow_5 {
  color: var(--dec-navy) !important;
}
#app ._addButton_suzcb_5, #app ._addListButton_11uup_5, #app ._addCardButton_1utaf_5, #app ._addCardButton_1bbow_5 {
  color: var(--dec-ink-soft) !important;
  fill: var(--dec-ink-soft) !important;
}

/* Fundos escuros translucidos viram tons suaves de azul-marinho sobre o papel */
#app ._searchInactive_1ls9w_14 input, #app ._button_ygjr8_8, #app ._addButton_u3rl2_5,
#app ._tabActive_cjxaz_62, #app ._filterLabel_uc4mw_27, #app ._searchInactive_uc4mw_64 input,
#app ._button_1cyxy_8, #app ._othersButton_1gfxr_9, #app ._addButton_1lbjc_5,
#app ._addListButton_11uup_5, #app ._addCardButton_1utaf_5, #app ._addCardButton_1bbow_5 {
  background: rgba(11, 31, 58, .08) !important;
}
#app ._buttonGroup_ygjr8_24 ._button_ygjr8_8:enabled, #app ._buttonGroup_1cyxy_23 ._button_1cyxy_8:enabled,
#app ._wrapper_1gfxr_28, #app ._contextTitle_1cmnv_26 {
  background: rgba(11, 31, 58, .05) !important;
}
#app ._button_ygjr8_8:hover, #app ._addButton_u3rl2_5:hover, #app ._tab_cjxaz_47:hover, #app ._tabActive_cjxaz_62:hover,
#app ._filterLabel_uc4mw_27:hover, #app ._button_1cyxy_8:hover, #app ._othersButton_1gfxr_9:hover,
#app ._addButton_1lbjc_5:hover, #app ._addListButton_11uup_5:hover,
#app ._addCardButton_1utaf_5:hover, #app ._addCardButton_1bbow_5:hover {
  background: rgba(11, 31, 58, .14) !important;
}
/* Aba ativa do quadro: filete laranja embaixo, como os links do menu do site */
#app ._tabActive_cjxaz_62 { box-shadow: inset 0 -2px 0 var(--dec-yellow); }
#app ._prevButton_1c0ax_5 { background: rgba(11, 31, 58, .04) !important; }
#app ._prevButtonIcon_1c0ax_24 { color: var(--dec-muted) !important; }

/* Barra do topo: marinho profundo com filete laranja (como a barra de progresso do site) */
#app ._wrapper_jdrq3_89 {
  background: var(--dec-navy-deep) !important;
  box-shadow: inset 0 -3px 0 var(--dec-yellow);
}

/* Logo Decmetal na barra do topo de TODAS as paginas (o Planka so mostra logo na pagina inicial).
   O texto PLANKA original some e a marca entra como primeiro item da barra, sobre fundo branco. */
#app ._logo_jdrq3_40 { display: none !important; }
#app ._wrapper_jdrq3_89::before {
  content: "";
  flex: 0 0 168px;
  height: 34px;
  margin: 8px 4px 8px 12px;
  border-radius: 3px;
  background: var(--dec-white) url(/decmetal-marca.png) center / 150px auto no-repeat;
}

/* Tela de login: logo Decmetal no lugar do titulo PLANKA e painel azul-marinho no lugar da foto */
#app ._logo_45te1_70 { max-height: 200px; max-width: 100%; }
#app ._formTitle_45te1_36 { display: none; }
#app ._cover_45te1_5 {
  background: linear-gradient(160deg, var(--dec-navy-deep), var(--dec-navy-2)) !important;
  box-shadow: inset 6px 0 0 var(--dec-yellow);
}
#app ._coverOverlay_45te1_8 { background: transparent !important; }

/* Botao principal (salvar, adicionar, entrar): laranja com texto marinho, igual .btn-yellow do site */
.ui.positive.button, .ui.positive.buttons .button,
.ui.green.button, .ui.green.buttons .button {
  background-color: var(--dec-yellow) !important;
  color: var(--dec-navy) !important;
  box-shadow: none !important;
}
.ui.positive.button:hover, .ui.positive.buttons .button:hover,
.ui.positive.button:focus, .ui.positive.button:active,
.ui.green.button:hover, .ui.green.buttons .button:hover {
  background-color: var(--dec-yellow-hover) !important;
  color: var(--dec-navy) !important;
}
#app [class*="_confirmations_"] { border-color: var(--dec-yellow) !important; }

/* Botao secundario: marinho com texto branco, igual .btn do site */
.ui.primary.button, .ui.primary.buttons .button {
  background-color: var(--dec-navy) !important;
  color: var(--dec-white) !important;
}
.ui.primary.button:hover, .ui.primary.buttons .button:hover {
  background-color: var(--dec-navy-2) !important;
}

/* Campos em foco: borda laranja */
.ui.input > input:focus, .ui.form input:focus, .ui.form textarea:focus {
  border-color: var(--dec-yellow) !important;
}

/* Etiquetas: cores da marca */
#app [class*="_backgroundBerryRed_"]      { background: var(--dec-red) !important;    color: var(--dec-white) !important; }
#app [class*="_backgroundPumpkinOrange_"] { background: var(--dec-yellow) !important; color: var(--dec-navy) !important; }
#app [class*="_backgroundLagoonBlue_"]    { background: var(--dec-steel) !important;  color: var(--dec-white) !important; }
#app [class*="_backgroundMidnightBlue_"]  { background: var(--dec-navy) !important;   color: var(--dec-white) !important; }