/* Ajustes do painel por cima do SASH (Bootstrap 5.3 + styles.min.css).
 *
 * Carrega depois do style.css antigo. Durante a migracao as duas coisas
 * convivem: as views ja convertidas usam classes Bootstrap/SASH, as outras
 * ainda usam o style.css. A ponte de tokens abaixo faz as antigas herdarem a
 * paleta do SASH, para o painel nao ficar com duas caras enquanto isso.
 */

/* ---------- ponte de tokens: style.css antigo -> variaveis do SASH ---------- */

html[data-theme] {
  --bg: rgb(var(--body-bg-rgb));
  --card: var(--custom-white);
  --text: var(--default-text-color);
  --muted: var(--text-muted);
  --border: var(--default-border);
  --accent: var(--primary-color);
  --accent-soft: var(--primary01);
  --error: rgb(var(--danger-rgb));
  --input-disabled: var(--default-background);
}

body {
  font-family: var(--default-font-family);
  background: rgb(var(--body-bg-rgb));
  color: var(--default-text-color);
}

/* O .page do SASH centra o conteudo na vertical (justify-content:center):
   numa view curta o titulo descia. Painel quer tudo encostado ao topo. */
.page { justify-content: flex-start; }

/* ---------- marca (sem imagem de logo) ---------- */

.brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--menu-prime-color);
}
.app-header .brand-text { color: var(--header-prime-color); }

/* ---------- sidebar ----------
 * Os itens sao <button> (disabled funciona no modo offline) e o style.css
 * antigo pinta todo button de azul. Reset aqui, com especificidade de sobra. */

.app-sidebar button.side-menu__item {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: start;
  font-size: inherit;
  filter: none;
  transform: none;
}
.app-sidebar button.side-menu__item:disabled { opacity: .4; cursor: not-allowed; }
.app-sidebar .slide-menu.child1 button.side-menu__item,
.app-sidebar .slide-menu.child1 a.side-menu__item { color: var(--menu-prime-color); }
.app-sidebar .slide-menu.child1 button.side-menu__item.active { color: var(--primary-color); }

/* Submenu por modo: sem o defaultmenu.js do SASH, abre e fecha pela classe
   .open que o setMode() poe no <li>. */
.app-sidebar .slide.has-sub > .slide-menu { display: none; }
.app-sidebar .slide.has-sub.open > .slide-menu { display: block; }
.app-sidebar .slide.has-sub .side-menu__angle { transition: transform .2s ease; }
.app-sidebar .slide.has-sub.open > .side-menu__item .side-menu__angle { transform: rotate(90deg); }

/* Ponto de alerta no modo (Financeiro: import pendente; Emails: resposta
   atrasada). */
.app-sidebar .mode-link { position: relative; }
.app-sidebar .mode-link.has-alert::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: 2.4rem;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--warning-rgb));
  box-shadow: 0 0 0 2px var(--menu-bg);
}

/* ---------- header ---------- */

.app-header button.header-link {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 1rem .65rem;
  filter: none;
  transform: none;
  color: inherit;
}
.app-header #sidebar-toggle { display: none; }
.app-header .header-link-icon { font-size: 1.1rem; color: var(--header-prime-color); }
.app-header .horizontal-logo { align-self: center; }
.page-header { margin: 1.25rem 0; min-height: 0; }
.page-title { font-size: 1.25rem; font-weight: 600; margin: 0; }

@media (max-width: 991.98px) {
  .app-header #sidebar-toggle { display: flex; }
  /* Overlay do off-canvas (o do SASH, que nasce visibility:hidden): fecha a
     sidebar ao tocar fora dela. */
  html[data-toggled="open"] #responsive-overlay { visibility: visible; }
}

/* ---------- largura por view ----------
 * Mesmas larguras de antes (memoria painel-largura-views), agora num
 * invólucro que tambem leva o page-header, para o titulo alinhar com o
 * conteudo. Base 1200px, que e a largura da Visao geral. */

.view-wrap { max-width: 1200px; margin: 0 auto; padding-bottom: 1.5rem; }
.view-wrap:has(#app[data-view="day"]) { max-width: 1050px; }
.view-wrap:has(#app[data-view="calendar"]) { max-width: 1500px; }
.view-wrap:has(#app[data-view="board"]) { max-width: none; }
.view-wrap:has(#app[data-view="expenses"]) { max-width: 1280px; }

#app { display: block; width: 100%; }

/* ---------- barras globais ---------- */

#urgent-bar { width: 100%; text-align: start; }

/* ---------- iPhone instalado: notch e barra de gestos ---------- */

@media (display-mode: standalone) {
  .app-header { padding-top: env(safe-area-inset-top); }
  .main-content { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- ui.js: toast e confirm ---------- */

.toast-container { z-index: 1090; }
.toast-container .toast { width: min(400px, calc(100vw - 32px)); }
.toast-container .toast-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.toast-container .toast.bg-primary-transparent,
.toast-container .toast.bg-success-transparent,
.toast-container .toast.bg-danger-transparent { background-color: var(--custom-white) !important; }
.toast-container .toast.bg-primary-transparent { border-inline-start: 3px solid var(--primary-color) !important; }
.toast-container .toast.bg-success-transparent { border-inline-start: 3px solid rgb(var(--success-rgb)) !important; }
.toast-container .toast.bg-danger-transparent  { border-inline-start: 3px solid rgb(var(--danger-rgb)) !important; }
.toast-container .toast { box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.toast-container .btn-close { filter: none; padding: .5rem; }
html[data-theme-mode="dark"] .toast-container .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.modal-sm-confirm { max-width: 420px; }

/* Botoes do Bootstrap: o style.css antigo pinta todo <button> de azul, com
   filter no hover e translate no active. Nos .btn isso briga com o SASH. */
button.btn { font-size: .8125rem; filter: none; }
button.btn:active { transform: none; }
button.btn-close { background-color: transparent; }

/* ---------- containers das views ----------
 * .panel e o contentor de quase todas as views antigas: fica com a cara do
 * card do SASH ate cada view ser convertida para card custom-card. */

.panel {
  background: var(--custom-white);
  border: 0;
  border-radius: 7px;
  box-shadow: var(--shadow-color) 0 4px 25px 0;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ---------- Board (kanban) ----------
 * Colunas sao card custom-card; o card de tarefa e .task-card (nao .card,
 * que e do Bootstrap). A faixa colorida a esquerda e a UNICA pista do
 * projeto no card: nao tirar. */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  align-items: start;
}

.board-col { margin-bottom: 0; min-height: 120px; }
.board-col .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  border-top: 3px solid var(--col);
  border-radius: 7px 7px 0 0;
}
.board-col .card-title { margin: 0; font-size: .9rem; }
.board-col .col-count {
  background: color-mix(in srgb, var(--col) 18%, transparent);
  color: var(--col);
  font-weight: 600;
}
.board-col .card-body { padding: .85rem; }

.col-cards {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 24px;
}

.task-card {
  position: relative;
  background: color-mix(in srgb, var(--proj, var(--custom-white)) var(--proj-tint), var(--custom-white));
  border: 1px solid var(--default-border);
  border-left: var(--proj-bar) solid var(--proj, var(--default-border));
  border-radius: 0 6px 6px 0;
  padding: .65rem .8rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: border-color .12s, box-shadow .12s;
}
/* Hover acende o contorno mas mantem a faixa do projeto. */
.task-card:hover {
  border-color: var(--primary-color);
  border-left-color: var(--proj, var(--primary-color));
  box-shadow: var(--shadow-color) 0 4px 16px 0;
}
.task-card.dragging { opacity: .45; }
.task-card-title { font-size: .875rem; line-height: 1.4; font-weight: 500; word-break: break-word; }
.task-card-meta { margin-top: .35rem; font-size: .75rem; color: var(--text-muted); }
.task-card-pr { color: var(--text-muted); text-decoration: none; }
.task-card-pr:hover { color: var(--primary-color); text-decoration: underline; }
.board-bar { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.board-bar:has(#announce-btn[hidden]) { display: none; }
.announce-panel .an-head { margin: 1rem 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.announce-panel .an-head:first-child { margin-top: 0; }
.announce-panel .an-row { padding: .6rem 0; border-bottom: 1px solid var(--default-border); }
.announce-panel .an-title { font-weight: 500; margin-bottom: .4rem; }
.announce-panel .an-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.announce-panel .an-draft { margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.announce-panel .an-draft[hidden] { display: none; }
.announce-panel .an-draft-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.task-card-thumb {
  margin: -.65rem -.8rem .5rem;
  border-radius: 0 6px 0 0;
  overflow: hidden;
  max-height: 120px;
}
.task-card-thumb img { width: 100%; display: block; object-fit: cover; max-height: 120px; }
.task-card-aged {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(var(--success-rgb));
  color: #fff;
  font-size: 10px;
}

.board-col .card-add-btn {
  width: 100%;
  margin-top: .6rem;
  padding: .5rem .75rem;
  text-align: start;
  font-size: .8125rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--default-border);
  border-radius: 6px;
  filter: none;
}
.board-col .card-add-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }
.task-card:has(.task-card-aged) .task-card-title { padding-right: 18px; }

/* ---------- Day ---------- */

.day-card .day-header { justify-content: space-between; gap: .75rem; }
.day-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.day-nav #day-date { width: auto; }
.day-card .card-footer.day-total {
  text-align: end;
  font-size: .95rem;
  background: transparent;
  border-top: 1px solid var(--default-border);
}
.time-input { width: 90px; text-align: center; }
.task-form .btn { white-space: nowrap; }
.task-form input:disabled { background: var(--default-background); }
.task-item { border-radius: 0 6px 6px 0; padding: .6rem .85rem; font-size: .875rem; }
.task-item .task-time { font-size: .8rem; padding: .2rem .6rem; }
.task-item .actions { gap: .35rem; }
.task-item .actions .btn-icon { width: 1.9rem; height: 1.9rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.project-btn { font-size: .8125rem; padding: .4rem .9rem; }
.project-btn.selected { box-shadow: 0 0 0 3px var(--primary03); border-color: #fff; }
.suggestions { background: var(--custom-white); border-color: var(--default-border); }
.suggestion { font-size: .875rem; padding: .5rem .85rem; }
.suggestion:hover, .suggestion.active { background: var(--primary01); color: var(--primary-color); }
.prev-day .day-task-list { margin: 0; }

/* ---------- modais antigos (div.modal[hidden] + .modal-box) ----------
 * Continuam com a logica propria de abrir/fechar; aqui so ganham a cara do
 * modal-content do SASH. */

.modal:not(.fade) > .modal-box {
  z-index: 1;
  background: var(--custom-white);
  border: 0;
  border-radius: .5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
  padding: 1.25rem 1.5rem;
}
.modal:not(.fade) .modal-head {
  margin: -1.25rem -1.5rem 1.25rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--default-border);
}
.modal:not(.fade) .modal-close { border: 0; background: transparent; color: var(--text-muted); font-size: 1rem; }
.modal:not(.fade) .modal-close:hover { color: var(--default-text-color); background: var(--default-background); }
.modal:not(.fade) .modal-actions,
.modal:not(.fade) .card-tools { border-top: 1px solid var(--default-border); padding-top: 1rem; }

/* Cabecalho dos .panel antigos com a cara do card-header do SASH: o primeiro
   h2 (ou a barra .exp-head / .cal-header que o leva) vira faixa com divisoria. */
.panel > h2:first-child,
.panel > .exp-head:first-child,
.panel > .cal-header:first-child {
  margin: -1.25rem -1.25rem 1.25rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--default-border);
}
.panel > h2:first-child { font-size: .9375rem; font-weight: 700; }
.panel > .exp-head:first-child h2 { font-size: .9375rem; font-weight: 700; margin-bottom: 0; }
.panel > .exp-head:first-child { flex-wrap: wrap; }

/* Linhas de lista com acoes em icone (Projects, Day). */
.project-item .actions { gap: .35rem; }
.project-item .actions .btn-icon { width: 1.9rem; height: 1.9rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.badge-off { border-radius: .25rem; }

/* ---------- controlos comuns ---------- */

/* .period-buttons e o controlo segmentado de todo o painel (Week/Month/Year,
   Todas/Entradas/Saidas, filtros de Meetings...). Fica como btn-group do
   SASH: botoes colados, o ativo em primary. */
.period-buttons { display: inline-flex; gap: 0; flex-wrap: nowrap; }
.period-buttons button {
  background: var(--custom-white);
  color: var(--default-text-color);
  border: 1px solid var(--default-border);
  border-radius: 0;
  padding: .45rem .85rem;
  font-size: .8125rem;
  margin-inline-start: -1px;
  filter: none;
}
.period-buttons button:first-child { border-radius: .35rem 0 0 .35rem; margin-inline-start: 0; }
.period-buttons button:last-child { border-radius: 0 .35rem .35rem 0; }
.period-buttons button:hover { background: var(--primary01); color: var(--primary-color); }
.period-buttons button.active {
  position: relative;
  z-index: 1;
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* Blocos de numeros (Summary, Financeiro, Revolut, Brudine...): widget do
   SASH, fundo do card com borda, nao o roxo claro de antes. */
.cr-stat {
  background: var(--custom-white);
  border: 1px solid var(--default-border);
  border-radius: 7px;
  padding: .9rem 1.1rem;
  box-shadow: none;
}
.cr-stat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; font-weight: 500; }
.cr-stat-val { font-size: 1.35rem; font-weight: 600; color: var(--default-text-color); }
.cr-stat-val.fin-pos, .exp-amount.fin-pos { color: rgb(var(--success-rgb)); }
.cr-stat-val.fin-neg, .exp-amount.fin-neg, .cr-stat-val.exp-neg { color: rgb(var(--danger-rgb)); }

/* Selos de estado */
.badge.badge-sent { color: rgb(var(--success-rgb)); border: 0; }
.badge.badge-pending { color: rgb(var(--warning-rgb)); border: 0; }

/* Botao de acao principal verde de algumas views (+ Adicionar, + Ciclo...) */
.exp-head .btn-add, .exp-head button:not(.btn-soft):not(.btn) { background: var(--primary-color); }

/* ---------- login ---------- */
body.login-screen { min-height: 100dvh; }
body.login-screen .brand-text { color: var(--primary-color); }