/* SEARTAS custom */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 992px){
  .kanban-board{ grid-template-columns: 1fr; }
}

.kanban-col {
  min-height: 60vh;
  border: 1px dashed rgba(98,105,118,.35);
  border-radius: 12px;
  background: rgba(98,105,118,.04);
}

.kanban-col-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(98,105,118,.15);
}

.task-card {
  cursor: grab;
}

.task-card .badge-prio-low { background: rgba(32,107,196,.14); color: #206bc4; }
.task-card .badge-prio-medium { background: rgba(245,159,0,.16); color: #f59f00; }
.task-card .badge-prio-high { background: rgba(214,57,57,.18); color: #d63939; }

.tag-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  background: rgba(98,105,118,.10);
}

.dropzone{
  border:1px dashed rgba(98,105,118,.35)!important;
  border-radius:12px!important;
  background: rgba(98,105,118,.04)!important;
}


/* Fallback rich-text editor */
#seartas-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--tblr-body-bg);
  padding: .5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .75rem;
}
.seartas-fallback-editor {
  min-height: 360px;
  border: 1px solid var(--tblr-border-color);
  border-radius: .75rem;
  padding: 1rem;
  background: var(--tblr-bg-surface);
  overflow: auto;
}
.seartas-fallback-editor:focus {
  outline: 2px solid rgba(32,107,196,.25);
}

/* Dropzone fallback feedback */
.seartas-dz-hover {
  outline: 2px dashed rgba(32,107,196,.6);
  outline-offset: 6px;
}

/* Kanban fallback drag feedback */
.seartas-dragging { opacity: .6; }
.seartas-drop-hover { outline: 2px dashed rgba(32,107,196,.6); outline-offset: 6px; }


/* Dropzone fallback styling */
form.seartas-dropzone{
  border: 2px dashed rgba(98,105,118,.35);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all .15s ease;
  background: rgba(98,105,118,.04);
}
form.seartas-dropzone.seartas-drop-hover{
  border-color: rgba(32,107,196,.8);
  background: rgba(32,107,196,.06);
}
form.seartas-dropzone.seartas-dz-uploading{
  opacity: .7;
  pointer-events: none;
}
form.seartas-dropzone .dz-message{
  color: rgba(98,105,118,.95);
  font-size: .95rem;
}


/* =========================================================
   MELHORIAS VISUAIS (SEM REMOVER NADA DO SEU CSS)
   Tudo aqui embaixo só “refina” o Tabler e suas classes
   ========================================================= */

:root{
  --seartas-primary: #206bc4;
  --seartas-radius: 14px;
  --seartas-radius-sm: 12px;
  --seartas-shadow: 0 12px 30px rgba(0,0,0,.07);
  --seartas-shadow-sm: 0 8px 20px rgba(0,0,0,.06);
  --seartas-border: rgba(98,105,118,.18);
}

/* Fundo mais elegante */
body{
  background:
    radial-gradient(1000px 380px at 20% 0%, rgba(32,107,196,.10), transparent 60%),
    radial-gradient(900px 340px at 90% 0%, rgba(98,105,118,.10), transparent 55%),
    var(--tblr-body-bg, #f6f8fb);
}

/* Cards mais “premium” */
.card{
  border: 1px solid var(--seartas-border);
  border-radius: var(--seartas-radius);
  box-shadow: var(--seartas-shadow-sm);
}

/* Inputs/selects mais suaves */
.form-control,
.form-select{
  border-radius: var(--seartas-radius-sm);
}

/* Botões */
.btn{
  border-radius: var(--seartas-radius-sm);
}
.btn-primary{
  font-weight: 600;
}

/* Sidebar sticky (vai funcionar com a classe adicionada no base.html) */
.seartas-sidebar{
  position: sticky;
  top: 86px;
}
@media (max-width: 992px){
  .seartas-sidebar{ position: static; }
}

/* Menu lateral: hover e active melhores */
.seartas-sidebar .nav-pills .nav-link{
  border-radius: var(--seartas-radius-sm);
  padding: .55rem .75rem;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
  color: rgba(24,36,51,.78);
}
.seartas-sidebar .nav-pills .nav-link:hover{
  background: rgba(32,107,196,.08);
  transform: translateY(-1px);
}
.seartas-sidebar .nav-pills .nav-link.active{
  background: rgba(32,107,196,.12);
  color: rgba(11,42,85,1);
  box-shadow: inset 0 0 0 1px rgba(32,107,196,.18);
}

/* Kanban mais bonito (override SEM apagar suas regras) */
.kanban-board{
  gap: 14px;
}
.kanban-col{
  background: rgba(255,255,255,.80);
  box-shadow: var(--seartas-shadow-sm);
  overflow: hidden;
}
.kanban-col-header{
  background: linear-gradient(180deg, rgba(32,107,196,.08), transparent);
  padding: 12px 14px;
}

/* Task cards mais “clicáveis” */
.task-card{
  border-radius: 12px;
  transition: transform .08s ease, box-shadow .12s ease;
  user-select: none;
}
.task-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--seartas-shadow);
}
.task-card:active{
  cursor: grabbing;
}

/* Tags mais refinadas */
.tag-pill{
  border: 1px solid rgba(98,105,118,.14);
  padding: 2px 10px;
}

/* Dropzone mais clean */
.dropzone{
  background: rgba(255,255,255,.78)!important;
}

/* Toolbar/editor com sombra leve */
#seartas-editor-toolbar{
  box-shadow: var(--seartas-shadow-sm);
}
.seartas-fallback-editor{
  box-shadow: var(--seartas-shadow-sm);
  border-radius: .9rem;
}

/* Alerts mais bonitos */
.alert{
  border-radius: var(--seartas-radius-sm);
}

/* Modal com borda e radius */
.modal-content{
  border-radius: var(--seartas-radius);
  border: 1px solid rgba(98,105,118,.14);
}

.seartas-logo-badge{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, rgba(32,107,196,1), rgba(96,165,250,1));
  box-shadow: 0 10px 20px rgba(32,107,196,.22);
  border: 1px solid rgba(255,255,255,.22);
}

.seartas-brand-name{
  font-weight: 800;
  letter-spacing: .4px;
  font-size: 14px;
  color: rgba(24,36,51,.92);
}

.seartas-brand-sub{
  font-size: 11px;
  color: rgba(98,105,118,.85);
}


/* ============================== FILTROS ============================== */


/* ========== TAGS MANAGER BUTTONS (AJUSTE TAMANHO/ÍCONES) ========== */

/* botões pequenos (salvar/apagar) dentro da lista */
#tags-manager-wrap .btn{
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  line-height: 1;
}

/* ícones menores e consistentes */
#tags-manager-wrap .btn-outline-primary::before{
  content: "✓";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

#tags-manager-wrap .btn-outline-danger::before{
  content: "×";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

/* garante que qualquer <i> vazio não atrapalhe */
#tags-manager-wrap .btn i{ display: none; }

/* opcional: deixa a cor/contraste mais suave */
#tags-manager-wrap .btn-outline-primary{
  border-color: rgba(32,107,196,.55);
}
#tags-manager-wrap .btn-outline-danger{
  border-color: rgba(214,57,57,.55);
}

/*  BOTÃO "+ CRIAR" (ARRUMAR TAMANHO)  */
.seartas-tags-manager .seartas-btn-create-tag{
  height: 30px;                 /* igual aos inputs */
  padding: 0 .75rem;
  border-radius: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  line-height: 1;
  white-space: nowrap;
}

/* garante que o "+" não empurre o texto */
.seartas-tags-manager .seartas-btn-create-tag span{
  font-size: 14px;
  font-weight: 900;
  margin: 0 !important;
}

/* ============================== FILTROS ============================== */

/* =========================================================
   SEARTAS – CORES MAIS PROFISSIONAIS (menos branco)
   Cole este bloco no FINAL do custom.css
   ========================================================= */

:root{
  --seartas-surface: rgba(98,105,118,.06);      /* fundo de seção */
  --seartas-surface-2: rgba(98,105,118,.09);    /* header/caixas */
  --seartas-input-bg: rgba(255,255,255,.90);    /* inputs */
  --seartas-border-2: rgba(98,105,118,.22);     /* bordas */
  --seartas-text-muted: rgba(98,105,118,.90);
}

/* Fundo do app mais “corporativo” */
body{
  background:
    radial-gradient(1000px 380px at 20% 0%, rgba(32,107,196,.12), transparent 60%),
    radial-gradient(900px 340px at 90% 0%, rgba(98,105,118,.12), transparent 55%),
    #eef2f7 !important;
}

/* Page wrapper e áreas internas com leve contraste */
.page-wrapper .container-xl{
  padding-bottom: 1.25rem;
}

/* Cards: menos branco puro, borda melhor */
.card{
  background: rgba(255,255,255,.92);
  border-color: var(--seartas-border-2);
}

/* Header do card com “faixa” suave */
.card-header{
  background: linear-gradient(180deg, var(--seartas-surface-2), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(98,105,118,.14);
}

/* Modal: corpo mais suave */
.modal-content{
  background: rgba(255,255,255,.96);
}
.modal-body{
  background: var(--seartas-surface);
}

/* Inputs / selects: fundo sutil + borda um pouco mais visível */
.form-control,
.form-select{
  background: var(--seartas-input-bg);
  border-color: rgba(98,105,118,.28);
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(32,107,196,.55);
  box-shadow: 0 0 0 .2rem rgba(32,107,196,.12);
}

/* Labels e hints mais legíveis */
.form-label{
  color: rgba(24,36,51,.88);
}
.text-muted,
.form-hint{
  color: var(--seartas-text-muted) !important;
}

/* Botão primário com cara mais “premium” */
.btn-primary{
  background: linear-gradient(135deg, rgba(32,107,196,1), rgba(64,140,255,1));
  border-color: rgba(32,107,196,.85);
  box-shadow: 0 10px 18px rgba(32,107,196,.18);
}
.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 22px rgba(32,107,196,.22);
}
.btn-primary:active{
  transform: translateY(0.5px);
}

/* Badges “secondary-lt” menos apagados */
.badge.bg-secondary-lt{
  background: rgba(98,105,118,.12) !important;
  color: rgba(24,36,51,.85) !important;
  border: 1px solid rgba(98,105,118,.16);
}

/* Comentários e boxes com fundo leve */
#task-comments-wrap .card,
#task-comments-wrap .border{
  background: rgba(255,255,255,.92);
}

/* Dropzone com fundo mais “cartão” */
form.seartas-dropzone,
.dropzone{
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(98,105,118,.28) !important;
}


/* =========================================================
   SEARTAS – DETALHES AZUIS (SAFE OVERRIDES)
   Cole NO FINAL do custom.css
   ========================================================= */

:root{
  --seartas-accent: rgba(32,107,196,.18);
  --seartas-accent-2: rgba(32,107,196,.12);
  --seartas-accent-3: rgba(32,107,196,.08);
  --seartas-accent-strong: rgba(32,107,196,.40);
  --seartas-ink: rgba(24,36,51,.92);
}

/* texto base um pouco mais “corporativo” */
body{
  color: var(--seartas-ink);
}

/* 1) Cards com detalhe azul (SEM pseudo-elementos) */
.card{
  box-shadow:
    var(--seartas-shadow-sm),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(32,107,196,.06);
}
.card:hover{
  box-shadow:
    var(--seartas-shadow),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(32,107,196,.12);
}

/* 2) Headers de cards mais “azuis”, mas suaves */
.card-header{
  background: linear-gradient(180deg, rgba(32,107,196,.08), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(32,107,196,.10);
}

/* 3) Divisores (hr) e bordas comuns levemente azuladas */
hr{
  border-color: rgba(32,107,196,.12) !important;
  opacity: 1;
}
.border-top{
  border-top-color: rgba(32,107,196,.12) !important;
}
.border{
  border-color: rgba(98,105,118,.18) !important;
}

/* 4) Inputs/selects: foco azul mais bonito */
.form-control:focus,
.form-select:focus{
  border-color: rgba(32,107,196,.62) !important;
  box-shadow: 0 0 0 .20rem rgba(32,107,196,.14) !important;
}

/* 5) Tabs: deixa “Informações / Arquivos / Processos…” mais premium */
.nav-tabs{
  border-bottom: 1px solid rgba(32,107,196,.12);
}
.nav-tabs .nav-link{
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(24,36,51,.72);
  padding: .55rem .75rem;
  border-radius: 10px 10px 0 0;
}
.nav-tabs .nav-link:hover{
  background: rgba(32,107,196,.06);
  color: rgba(24,36,51,.86);
}
.nav-tabs .nav-link.active{
  background: rgba(32,107,196,.08);
  border-bottom-color: rgba(32,107,196,.55);
  color: rgba(11,42,85,1);
}

/* 6) Sidebar nav active com “linha” azul (SEM mexer no HTML) */
.seartas-sidebar .nav-pills .nav-link.active{
  position: relative;
}
.seartas-sidebar .nav-pills .nav-link.active::after{
  content:"";
  position:absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: rgba(32,107,196,.55);
  opacity: .9;
}

/* 7) Kanban: detalhe azul no topo da coluna (SEM pseudo-elemento) */
.kanban-col{
  border-color: rgba(32,107,196,.18);
  box-shadow:
    var(--seartas-shadow-sm),
    inset 0 3px 0 rgba(32,107,196,.18);
}
.kanban-col-header{
  border-bottom-color: rgba(32,107,196,.10);
}

/* 8) Task cards com borda azul sutil no hover */
.task-card{
  border: 1px solid rgba(98,105,118,.12);
}
.task-card:hover{
  border-color: rgba(32,107,196,.18);
}

/* 9) Badges (secondary-lt) com toque azulado */
.badge.bg-secondary-lt{
  background: rgba(32,107,196,.08) !important;
  border: 1px solid rgba(32,107,196,.12) !important;
  color: rgba(24,36,51,.86) !important;
}

/* 10) Tags coloridas: texto branco garantido */
.badge[style*="background:"]{
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

/* 11) Dropzone: mais “vivo” e com borda azul suave */
form.seartas-dropzone{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(32,107,196,.18) !important;
}
form.seartas-dropzone.seartas-drop-hover{
  border-color: rgba(32,107,196,.75) !important;
  background: rgba(32,107,196,.06) !important;
}

/* 12) Botões outline ficam mais alinhados com a paleta */
.btn-outline-secondary{
  border-color: rgba(98,105,118,.26);
}
.btn-outline-secondary:hover{
  border-color: rgba(32,107,196,.40);
  background: rgba(32,107,196,.06);
}

/* 13) Pequeno “highlight” em tabelas/listas (se houver) */
.table > :not(caption) > * > *{
  border-bottom-color: rgba(32,107,196,.10);
}

/* =========================================================
   Theme and overlays
   ========================================================= */

.task-tag-menu-portal{
  min-width: 280px;
  max-height: 320px;
  overflow: auto;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 420px at 20% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(950px 360px at 90% 0%, rgba(255,255,255,.03), transparent 56%),
    linear-gradient(180deg, #0a0c10 0%, #10131a 100%) !important;
  color: #eef2f8;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{
  background: #141821;
  color: #edf2fa;
  border-color: #2d3442;
}

html[data-theme="dark"] .card-header{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(20,24,33,.1));
  border-bottom-color: #2f3746;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .seartas-sidebar .card{
  background: #10141c;
  border-color: #2b3341;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-hint{
  color: #c9d2df !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background: #0f141d;
  color: #eff3fa;
  border-color: #354050;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
  border-color: #7aa7ff !important;
  box-shadow: 0 0 0 .2rem rgba(122,167,255,.18) !important;
}

html[data-theme="dark"] .btn-outline-secondary{
  color: #d9e2f2;
  border-color: #445265;
}

html[data-theme="dark"] .btn-outline-secondary:hover{
  background: #1f2734;
  border-color: #647997;
  color: #fff;
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link{
  color: #d2dbea;
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link:hover{
  background: rgba(255,255,255,.09);
  color: #f1f5fb;
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link.active{
  background: rgba(255,255,255,.14);
  color: #f7f9fd;
}

html[data-theme="dark"] .kanban-col{
  background: rgba(20,24,33,.9);
  border-color: #374153;
}

html[data-theme="dark"] .task-card{
  background: #161d29;
  border-color: #3b475b;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .task-card{
  transition: border-color .12s ease, background-color .12s ease;
}

html[data-theme="dark"] .card:hover{
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

html[data-theme="dark"] .task-card:hover{
  transform: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

html[data-theme="dark"] .page,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .container-xl{
  background: transparent !important;
}

html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer{
  background: transparent !important;
}

html[data-theme="dark"] .dropdown-item{
  color: #e1e8f4;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus{
  background: #222a37;
  color: #ffffff;
}

html[data-theme="dark"] .dropdown-divider{
  border-top-color: #394457;
}

html[data-theme="dark"] .nav-tabs{
  border-bottom-color: #3b4558;
}

html[data-theme="dark"] .nav-tabs .nav-link{
  color: #d3dced;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover{
  background: #222a37;
  color: #f0f4fb;
}

html[data-theme="dark"] .nav-tabs .nav-link.active{
  background: #1c2330;
  color: #f7f9fd;
  border-bottom-color: #80abff;
}

html[data-theme="dark"] .table{
  color: #e4ebf7;
}

html[data-theme="dark"] .table thead th{
  color: #eff4fb;
}

html[data-theme="dark"] .table > :not(caption) > * > *{
  background-color: rgba(20,24,33,.6);
  border-bottom-color: #3b4558;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: rgba(24,30,42,.68);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] [class*="bg-white"],
html[data-theme="dark"] [class*="bg-light"]{
  background: #161c28 !important;
  color: #edf2fa !important;
}

html[data-theme="dark"] .text-dark{
  color: #f1f6fd !important;
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] label,
html[data-theme="dark"] .small{
  color: #d5ddea;
}

html[data-theme="dark"] .btn{
  color: #e8eef8;
}

html[data-theme="dark"] .btn-outline-primary{
  color: #aecdff;
  border-color: #5f79a0;
}

html[data-theme="dark"] .btn-outline-primary:hover{
  color: #fff;
  background: #273245;
  border-color: #84abed;
}

html[data-theme="dark"] .btn-outline-danger{
  color: #ffb1b1;
  border-color: #8a5252;
}

html[data-theme="dark"] .btn-outline-danger:hover{
  color: #fff;
  background: #4a2a2a;
  border-color: #d07b7b;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b{
  color: #f2f6fd !important;
}

html[data-theme="dark"] .text-reset,
html[data-theme="dark"] a.text-reset{
  color: #e8eef8 !important;
}

html[data-theme="dark"] a{
  color: #9ec0ff;
}

html[data-theme="dark"] a:hover{
  color: #c1d7ff;
}

html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .input-icon-addon{
  background: #161d29;
  color: #dce5f3;
  border-color: #364152;
}

html[data-theme="dark"] .form-control::placeholder{
  color: #aab6c8;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary{
  background: #232b38;
  border-color: #3e4a5f;
  color: #e6edf9;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover{
  background: #2a3443;
  border-color: #53627a;
  color: #fff;
}

html[data-theme="dark"] .badge.bg-secondary-lt,
html[data-theme="dark"] .badge.bg-azure-lt{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #eef3fb !important;
}

html[data-theme="dark"] .badge.bg-green-lt{
  background: rgba(53,184,110,.2) !important;
  border: 1px solid rgba(53,184,110,.35) !important;
  color: #b6f1cf !important;
}

html[data-theme="dark"] .badge.bg-red-lt{
  background: rgba(214,87,87,.22) !important;
  border: 1px solid rgba(214,87,87,.38) !important;
  color: #ffc1c1 !important;
}

html[data-theme="dark"] .badge.bg-yellow-lt,
html[data-theme="dark"] .badge.bg-orange-lt{
  background: rgba(232,171,67,.22) !important;
  border: 1px solid rgba(232,171,67,.38) !important;
  color: #ffe1ad !important;
}

html[data-theme="dark"] .text-danger{
  color: #ff8d8d !important;
}

html[data-theme="dark"] .text-warning{
  color: #ffd588 !important;
}

html[data-theme="dark"] .text-success{
  color: #7ee0a5 !important;
}

html[data-theme="dark"] .text-info{
  color: #8cc8ff !important;
}

html[data-theme="dark"] i[class^="ti "],
html[data-theme="dark"] i[class*=" ti-"]{
  color: inherit;
}

/* =========================================================
   SEARTAS - sidebar-first polish (light motion, no layout changes)
   ========================================================= */

:root{
  --seartas-side-bg: rgba(255,255,255,.88);
  --seartas-side-border: rgba(98,105,118,.20);
  --seartas-side-link: rgba(24,36,51,.78);
  --seartas-side-link-strong: rgba(12,27,49,.96);
  --seartas-side-hover: rgba(32,107,196,.10);
  --seartas-side-active: rgba(32,107,196,.16);
}

.seartas-sidebar .card{
  background: var(--seartas-side-bg);
  border: 1px solid var(--seartas-side-border);
  box-shadow: 0 14px 28px rgba(12,22,38,.08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.seartas-sidebar .card-body{
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(32,107,196,.30) transparent;
}

.seartas-sidebar .nav-pills .nav-link{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  padding: .62rem .78rem .62rem .90rem;
  color: var(--seartas-side-link);
  font-weight: 600;
  letter-spacing: .08px;
  transition: transform .18s ease, color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.seartas-sidebar .nav-pills .nav-link::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(96deg, rgba(32,107,196,.15), rgba(32,107,196,.04));
  opacity: 0;
  transform: translateX(-10px) scale(.98);
  transition: opacity .20s ease, transform .20s ease;
  z-index: -1;
}

.seartas-sidebar .nav-pills .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: rgba(32,107,196,.68);
  opacity: 0;
  transform: scaleY(.32);
  transform-origin: center;
  transition: opacity .20s ease, transform .20s ease;
}

.seartas-sidebar .nav-pills .nav-link:hover{
  color: var(--seartas-side-link-strong);
  background: var(--seartas-side-hover);
  transform: translateX(2px);
}

.seartas-sidebar .nav-pills .nav-link:hover::before{
  opacity: 1;
  transform: translateX(0) scale(1);
}

.seartas-sidebar .nav-pills .nav-link:hover::after{
  opacity: .7;
  transform: scaleY(.72);
}

.seartas-sidebar .nav-pills .nav-link.active{
  color: var(--seartas-side-link-strong);
  background: var(--seartas-side-active);
  box-shadow: inset 0 0 0 1px rgba(32,107,196,.25), 0 8px 16px rgba(32,107,196,.12);
  animation: seartasSideActiveIn .30s ease;
}

.seartas-sidebar .nav-pills .nav-link.active::before,
.seartas-sidebar .nav-pills .nav-link.active::after{
  opacity: 1;
  transform: none;
}

.seartas-sidebar .nav-pills .nav-link i{
  opacity: .88;
  transition: transform .18s ease, opacity .18s ease;
}

.seartas-sidebar .nav-pills .nav-link:hover i,
.seartas-sidebar .nav-pills .nav-link.active i{
  opacity: 1;
  transform: translateX(1px);
}

@keyframes seartasSideActiveIn{
  from{
    transform: translateX(-2px);
  }
  to{
    transform: translateX(0);
  }
}

.card{
  transition: box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  border-color: rgba(32,107,196,.18);
  box-shadow: 0 14px 26px rgba(12,22,38,.10);
}

.btn{
  transition: transform .16s ease, box-shadow .16s ease;
}

.btn:hover{
  transform: translateY(-1px);
}

.form-control,
.form-select{
  background: rgba(255,255,255,.92);
}

html[data-theme="dark"] .seartas-sidebar .card{
  background: rgba(17,22,33,.86);
  border-color: rgba(106,127,158,.30);
  box-shadow: 0 16px 30px rgba(0,0,0,.34);
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link{
  color: rgba(225,233,245,.90);
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link::before{
  background: linear-gradient(96deg, rgba(122,167,255,.24), rgba(122,167,255,.08));
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link::after{
  background: rgba(140,181,255,.84);
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link:hover{
  color: #ffffff;
  background: rgba(122,167,255,.16);
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link.active{
  color: #ffffff;
  background: rgba(122,167,255,.24);
  box-shadow: inset 0 0 0 1px rgba(145,182,246,.34), 0 10px 18px rgba(20,43,82,.30);
}

html[data-theme="dark"] .card:hover{
  border-color: rgba(122,167,255,.24);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background: rgba(16,21,31,.92);
}

.seartas-sidebar .card-body::-webkit-scrollbar{
  width: 8px;
}

.seartas-sidebar .card-body::-webkit-scrollbar-thumb{
  background: rgba(32,107,196,.30);
  border-radius: 999px;
}

.seartas-sidebar .card-body::-webkit-scrollbar-track{
  background: transparent;
}

@media (max-width: 992px){
  .seartas-sidebar .card-body{
    max-height: none;
  }
}

/* =========================================================
   SEARTAS - stability pass (layout + dark consistency)
   ========================================================= */

html,
body{
  min-height: 100%;
}

body{
  min-height: 100vh;
  background-color: #eef2f7;
}

.page{
  min-height: 100vh;
}

.page-wrapper{
  min-height: calc(100vh - 72px);
}

.seartas-sidebar .nav-pills .nav-link{
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    color .20s ease,
    box-shadow .20s ease,
    background-color .20s ease;
}

.seartas-sidebar .nav-pills .nav-link:focus-visible{
  outline: 2px solid rgba(32,107,196,.34);
  outline-offset: 2px;
}

.seartas-sidebar .nav-pills .nav-link.active{
  transform: translateX(3px);
}

.seartas-sidebar .nav-pills .nav-link.active::after{
  width: 4px;
  opacity: 1;
}

.seartas-sidebar .card-body{
  scrollbar-gutter: stable;
}

html[data-theme="dark"] body{
  background-color: #0f131b;
}

html[data-theme="dark"] .page,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .container-xl{
  background: transparent !important;
}

html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-body{
  background: inherit !important;
}

html[data-theme="dark"] .small{
  color: #b9c4d6;
}

html[data-theme="dark"] .text-muted.small,
html[data-theme="dark"] .small.text-muted{
  color: #a8b4c8 !important;
}

html[data-theme="dark"] .task-modal-header{
  background: linear-gradient(180deg, rgba(27,35,49,.94), rgba(20,27,39,.88));
  border-bottom-color: rgba(120,142,173,.26);
}

html[data-theme="dark"] .task-modal-body{
  background:
    radial-gradient(1200px 420px at 30% -10%, rgba(122,167,255,.16), transparent 60%),
    radial-gradient(900px 360px at 92% 20%, rgba(83,208,143,.12), transparent 58%),
    rgba(16,22,32,.92);
}

html[data-theme="dark"] .task-chip{
  border-color: rgba(130,152,184,.30);
  background: rgba(28,37,51,.78);
  color: rgba(235,242,251,.92);
}

html[data-theme="dark"] .task-subline,
html[data-theme="dark"] .task-muted-hint{
  color: rgba(186,199,218,.82) !important;
}

html[data-theme="dark"] .task-desc{
  color: rgba(224,233,245,.90);
}

html[data-theme="dark"] .task-dropzone-wrap{
  border-color: rgba(123,147,180,.34);
  background: rgba(25,33,47,.72);
}

html[data-theme="dark"] .kanban-col{
  background: rgba(19,25,36,.92);
  border-color: rgba(118,140,172,.26);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

html[data-theme="dark"] .kanban-col-header{
  background: linear-gradient(180deg, rgba(35,46,64,.84), rgba(24,31,44,.76));
  border-bottom-color: rgba(116,138,169,.24);
}

html[data-theme="dark"] .kanban-col-header .fw-semibold{
  color: rgba(231,238,248,.94);
}

html[data-theme="dark"] .kanban-empty{
  border-color: rgba(125,148,181,.30);
  background: rgba(24,32,45,.78);
  color: rgba(201,213,231,.86);
}

html[data-theme="dark"] .seartas-file-ico{
  background: rgba(122,167,255,.20);
  border-color: rgba(122,167,255,.34);
  color: rgba(237,244,252,.96);
}

html[data-theme="dark"] .seartas-img-thumb{
  border-color: rgba(120,143,176,.30);
}

@media (prefers-reduced-motion: reduce){
  .seartas-sidebar .nav-pills .nav-link,
  .seartas-sidebar .nav-pills .nav-link::before,
  .seartas-sidebar .nav-pills .nav-link::after{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Global backdrop stabilization (avoid color "reset" on scroll)
   ========================================================= */

body{
  background-color: #eef2f7 !important;
  background-image:
    radial-gradient(1400px 540px at 12% -6%, rgba(32,107,196,.10), rgba(32,107,196,0) 72%),
    radial-gradient(1200px 500px at 92% -2%, rgba(98,105,118,.10), rgba(98,105,118,0) 70%),
    linear-gradient(180deg, #eef2f7 0%, #edf2f8 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  background-attachment: fixed, fixed, fixed !important;
}

html[data-theme="dark"] body{
  background-color: #0f131b !important;
  background-image:
    radial-gradient(1500px 560px at 15% -8%, rgba(122,167,255,.14), rgba(122,167,255,0) 72%),
    radial-gradient(1300px 520px at 88% -4%, rgba(83,208,143,.10), rgba(83,208,143,0) 74%),
    linear-gradient(180deg, #0f131b 0%, #121824 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  background-attachment: fixed, fixed, fixed !important;
}

/* =========================================================
   Dark Mode - black palette pass
   ========================================================= */

html[data-theme="dark"] body{
  color: #edf1f7 !important;
  background-color: #0b0d11 !important;
  background-image:
    radial-gradient(1300px 520px at 14% -8%, rgba(255,255,255,.055), rgba(255,255,255,0) 72%),
    radial-gradient(1100px 480px at 88% -4%, rgba(255,255,255,.04), rgba(255,255,255,0) 74%),
    linear-gradient(180deg, #090b0f 0%, #0f1218 100%) !important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .seartas-sidebar .card{
  background: #0f1116 !important;
  border-color: #232834 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{
  background: #12161f !important;
  border-color: #2a3040 !important;
  color: #edf2fb !important;
}

html[data-theme="dark"] .card-header{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(18,22,31,.88)) !important;
  border-bottom-color: #2a3040 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background: #0e1118 !important;
  border-color: #333b4b !important;
  color: #eef3fb !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
  border-color: #6f86ab !important;
  box-shadow: 0 0 0 .2rem rgba(122,134,158,.2) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > *{
  border-bottom-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-hint{
  color: #aeb8c8 !important;
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link{
  color: #d6ddeb !important;
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,.09) !important;
}

html[data-theme="dark"] .seartas-sidebar .nav-pills .nav-link.active{
  color: #ffffff !important;
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 16px rgba(0,0,0,.32) !important;
}

html[data-theme="dark"] .task-card{
  background: #171c26 !important;
  border-color: #333b4b !important;
}

html[data-theme="dark"] .kanban-col{
  background: #151a23 !important;
  border-color: #31394a !important;
}

html[data-theme="dark"] .kanban-col-header{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(21,26,35,.92)) !important;
  border-bottom-color: #2f3747 !important;
}

/* Home page specific dark tune (force black base even with inline styles) */
html[data-theme="dark"] .home-hero{
  background: #171c26 !important;
  border-color: #2f3646 !important;
}

html[data-theme="dark"] .home-hero::before{
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 74%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(23,28,38,.96)) !important;
}

html[data-theme="dark"] .home-kpi,
html[data-theme="dark"] .home-card{
  background: #151a23 !important;
  border-color: #31394a !important;
}

html[data-theme="dark"] .home-finance-box{
  background: #1a202c !important;
  border-color: #343d4e !important;
}

html[data-theme="dark"] .home-month-strip{
  background: #181e29 !important;
  border-color: #353e50 !important;
}

html[data-theme="dark"] .home-month-nav-btn,
html[data-theme="dark"] .home-month-now{
  background: #1e2532 !important;
  border-color: #3a4457 !important;
}

/* Top-left brand adaptation in both themes */
.seartas-logo-badge{
  background: linear-gradient(135deg, #245fb8, #3f8aee);
  border: 1px solid rgba(255,255,255,.25);
}

html[data-theme="dark"] .seartas-logo-badge{
  background: linear-gradient(135deg, #1a2230, #2b3445);
  border-color: rgba(150,171,207,.34);
  box-shadow: 0 10px 22px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.06);
  color: #f4f7fd;
}

html[data-theme="dark"] .seartas-brand-name{
  color: #f2f6fd;
}

html[data-theme="dark"] .seartas-brand-sub{
  color: #b4bfd1;
}

/* =========================================================
   Navegação lateral estável (sem flash entre abas)
   ========================================================= */
.seartas-nav-indicator{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(32,107,196,.18), rgba(32,107,196,.92), rgba(32,107,196,.18));
  transform-origin: left center;
}

.seartas-nav-indicator.htmx-request{
  opacity: 1;
  animation: seartas-nav-progress 1s linear infinite;
}

@keyframes seartas-nav-progress{
  0%{ transform: scaleX(.12); }
  60%{ transform: scaleX(.78); }
  100%{ transform: scaleX(.96); }
}

#seartas-main-content{
  transition: opacity .14s ease;
}

#seartas-main-content.seartas-main-loading{
  opacity: .45;
}

@media (prefers-reduced-motion: reduce){
  .seartas-nav-indicator.htmx-request{
    animation: none !important;
  }
  #seartas-main-content{
    transition: none !important;
  }
}

/* =========================================================
   Global backdrop polish (traços + sombras sutis)
   ========================================================= */
body{
  position: relative;
  isolation: isolate;
  background-color: #e9edf4 !important;
  background-image:
    radial-gradient(1300px 520px at 12% -8%, rgba(59,124,210,.12), rgba(59,124,210,0) 72%),
    radial-gradient(1180px 500px at 90% -4%, rgba(88,106,134,.10), rgba(88,106,134,0) 70%),
    linear-gradient(180deg, #e9edf4 0%, #e7ecf4 100%) !important;
}

body::before,
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before{
  opacity: .72;
  background:
    repeating-linear-gradient(114deg, rgba(46,102,177,.16) 0 1px, rgba(46,102,177,0) 1px 30px),
    repeating-linear-gradient(24deg, rgba(35,55,85,.12) 0 1px, rgba(35,55,85,0) 1px 40px);
  mask-image: radial-gradient(146% 84% at 50% 0%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 64%, transparent 100%);
  -webkit-mask-image: radial-gradient(146% 84% at 50% 0%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 64%, transparent 100%);
}

body::after{
  opacity: .92;
  background:
    radial-gradient(circle at 10% 16%, rgba(98,152,229,.23) 0, rgba(98,152,229,0) 42%),
    radial-gradient(circle at 92% 10%, rgba(107,124,152,.18) 0, rgba(107,124,152,0) 40%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 62%);
  filter: blur(2px);
}

.page,
.page-wrapper{
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] body{
  background-color: #0b0d12 !important;
  background-image:
    radial-gradient(1300px 520px at 12% -8%, rgba(255,255,255,.06), rgba(255,255,255,0) 72%),
    radial-gradient(1180px 500px at 90% -4%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #090b10 0%, #0d1016 100%) !important;
}

html[data-theme="dark"] body::before{
  opacity: .52;
  background:
    repeating-linear-gradient(114deg, rgba(196,211,236,.14) 0 1px, rgba(196,211,236,0) 1px 30px),
    repeating-linear-gradient(24deg, rgba(163,181,210,.11) 0 1px, rgba(163,181,210,0) 1px 40px);
}

html[data-theme="dark"] body::after{
  opacity: .68;
  background:
    radial-gradient(circle at 12% 16%, rgba(157,179,212,.14) 0, rgba(157,179,212,0) 40%),
    radial-gradient(circle at 88% 12%, rgba(146,163,188,.11) 0, rgba(146,163,188,0) 38%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 62%);
}

/* =========================================================
   Backdrop v2 (mais profissional, sem quadradinhos)
   ========================================================= */
body{
  background-color: #e8edf5 !important;
  background-image: linear-gradient(180deg, #edf2f8 0%, #e6ecf5 100%) !important;
}

body::before{
  opacity: .95 !important;
  background:
    radial-gradient(1180px 440px at -10% -12%, rgba(51,118,198,.20) 0%, rgba(51,118,198,0) 68%),
    radial-gradient(980px 380px at 110% -8%, rgba(87,106,136,.16) 0%, rgba(87,106,136,0) 66%),
    radial-gradient(860px 320px at 50% 112%, rgba(112,136,175,.10) 0%, rgba(112,136,175,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 42%) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

body::after{
  opacity: .58 !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(900px 320px at 50% -30%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 65%) !important;
  filter: blur(6px);
}

html[data-theme="dark"] body{
  background-color: #080a0f !important;
  background-image: linear-gradient(180deg, #0a0d13 0%, #0d1118 100%) !important;
}

html[data-theme="dark"] body::before{
  opacity: .86 !important;
  background:
    radial-gradient(1220px 440px at -10% -12%, rgba(130,156,196,.16) 0%, rgba(130,156,196,0) 68%),
    radial-gradient(960px 360px at 110% -10%, rgba(118,134,160,.14) 0%, rgba(118,134,160,0) 66%),
    radial-gradient(860px 320px at 50% 112%, rgba(96,115,145,.12) 0%, rgba(96,115,145,0) 70%) !important;
}

html[data-theme="dark"] body::after{
  opacity: .38 !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(900px 320px at 50% -30%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 65%) !important;
  filter: blur(8px);
}

/* =========================================================
   Backdrop v3 (imagem blur/gradient, visual profissional)
   ========================================================= */
body{
  background-color: #edf3fb !important;
  background-image: linear-gradient(166deg, #f8fbff 0%, #eef4fc 36%, #e6eef9 72%, #dfe8f6 100%) !important;
}

body::before{
  opacity: 1 !important;
  background:
    radial-gradient(62rem 36rem at -8% -16%, rgba(35,108,194,.34) 0%, rgba(35,108,194,0) 60%),
    radial-gradient(54rem 31rem at 112% -10%, rgba(95,119,154,.28) 0%, rgba(95,119,154,0) 63%),
    radial-gradient(50rem 26rem at 52% 116%, rgba(84,132,198,.20) 0%, rgba(84,132,198,0) 69%) !important;
  filter: blur(16px) saturate(114%);
}

body::after{
  opacity: .82 !important;
  background:
    radial-gradient(48rem 19rem at 14% 8%, rgba(255,255,255,.66) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(42rem 17rem at 86% 12%, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 67%),
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 56%) !important;
  filter: blur(20px);
}

html[data-theme="dark"] body{
  background-color: #090c12 !important;
  background-image: linear-gradient(170deg, #0b0f16 0%, #0d121a 44%, #101621 100%) !important;
}

html[data-theme="dark"] body::before{
  opacity: .92 !important;
  background:
    radial-gradient(58rem 34rem at -12% -16%, rgba(116,146,191,.20) 0%, rgba(116,146,191,0) 62%),
    radial-gradient(54rem 30rem at 112% -10%, rgba(122,138,163,.16) 0%, rgba(122,138,163,0) 64%),
    radial-gradient(46rem 24rem at 50% 114%, rgba(89,111,146,.17) 0%, rgba(89,111,146,0) 68%) !important;
  filter: blur(16px) saturate(104%);
}

html[data-theme="dark"] body::after{
  opacity: .30 !important;
  background:
    radial-gradient(50rem 20rem at 20% 8%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 68%),
    radial-gradient(44rem 18rem at 82% 12%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%) !important;
  filter: blur(24px);
}

/* Office custom background layer (always behind UI content) */
.seartas-office-bg-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--seartas-office-bg-image, none);
  background-repeat: no-repeat;
  background-position: var(--seartas-office-bg-pos-x, 50%) var(--seartas-office-bg-pos-y, 50%);
  background-size: cover;
  opacity: .34;
  filter: blur(1px) saturate(1.1) contrast(1.04);
  transform: scale(var(--seartas-office-bg-scale, 1.03));
  transform-origin: var(--seartas-office-bg-pos-x, 50%) var(--seartas-office-bg-pos-y, 50%);
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

html[data-theme="dark"] .seartas-office-bg-layer{
  opacity: .24;
  filter: blur(1px) saturate(1.06) brightness(.76);
}

/* PERF HOTFIX VPS */
body,
html[data-theme="dark"] body{
  background-attachment: scroll !important;
}

body::before,
body::after,
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after{
  filter: none !important;
}

body::before{
  opacity: .58 !important;
  background:
    radial-gradient(54rem 30rem at -8% -16%, rgba(35,108,194,.20) 0%, rgba(35,108,194,0) 64%),
    radial-gradient(46rem 26rem at 112% -10%, rgba(95,119,154,.16) 0%, rgba(95,119,154,0) 66%) !important;
}
body::after{
  opacity: .32 !important;
  background: radial-gradient(44rem 18rem at 14% 8%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 66%) !important;
}

html[data-theme="dark"] body::before{
  opacity: .54 !important;
  background:
    radial-gradient(54rem 30rem at -8% -16%, rgba(122,150,194,.14) 0%, rgba(122,150,194,0) 66%),
    radial-gradient(46rem 26rem at 112% -10%, rgba(122,138,163,.12) 0%, rgba(122,138,163,0) 68%) !important;
}
html[data-theme="dark"] body::after{
  opacity: .22 !important;
  background: radial-gradient(44rem 18rem at 18% 10%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 70%) !important;
}

.seartas-office-bg-layer{
  filter: none !important;
  transform: none !important;
  opacity: .16 !important;
  transition: opacity .16s ease !important;
}
html[data-theme="dark"] .seartas-office-bg-layer{
  opacity: .12 !important;
}

.page .card,
.page .navbar,
.page .modal-content,
.page .dropdown-menu,
.page .seartas-sidebar .card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.seartas-nav-indicator.htmx-request{ animation: none !important; }
#seartas-main-content{ transition: none !important; }