/*
 * LAB2 Theme — Rise CRM visual override
 * Carregado após custom-style.css — não editar arquivos do sistema base.
 * Todas as customizações LAB2 ficam aqui.
 */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Cores primárias LAB2 */
  --lab2-red:          #FF2E4D;
  --lab2-red-hover:    #e0253f;
  --lab2-red-dim:      rgba(255, 46, 77, 0.10);
  --lab2-red-dim-hover:rgba(255, 46, 77, 0.16);

  /* Sidebar escura */
  --sidebar-bg:        #18181b;
  --sidebar-width:     220px;
  --sidebar-collapsed-width: 70px;
  --sidebar-border:    rgba(255, 255, 255, 0.06);
  --sidebar-link:      #a1a1aa;
  --sidebar-link-hover:#ffffff;
  --sidebar-active-bg: rgba(255, 46, 77, 0.12);
  --sidebar-icon:      #71717a;

  /* Escala de neutros (slate) */
  --slate-50:  #fafafa;
  --slate-100: #f4f4f5;
  --slate-200: #e4e4e7;
  --slate-300: #d4d4d8;
  --slate-400: #a1a1aa;
  --slate-500: #71717a;
  --slate-600: #52525b;
  --slate-700: #3f3f46;
  --slate-800: #27272a;
  --slate-900: #18181b;

  /* Superfícies e bordas */
  --surface:         #ffffff;
  --surface-raised:  #fafafa;
  --surface-card:    #ffffff;
  --surface-overlay: rgba(0,0,0,0.5);
  --border:          #e4e4e7;
  --border-light:    #f0f0f1;
  --border-subtle:   #e2e8f0;
  --border-default:  #cbd5e1;

  /* Texto */
  --text-primary:    #18181b;
  --text-secondary:  #52525b;
  --text-tertiary:   #a1a1aa;

  /* Semânticas */
  --color-success:   #22c55e;
  --color-warning:   #f59e0b;
  --color-danger:    #ef4444;
  --color-info:      #3b82f6;

  /* Raios e sombras */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 999px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);
  --shadow-xl:  0 20px 60px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.10);

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;

  /* Transições */
  --transition: 150ms cubic-bezier(.4,0,.2,1);
}

/* ─── 2. TIPOGRAFIA BASE ────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans) !important;
  color: var(--text-primary);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
}

/* ─── 3. SIDEBAR — DARK ─────────────────────────────────────────────────────── */

/* Container principal */
.sidebar {
  width: var(--sidebar-width) !important;
  background: var(--sidebar-bg) !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Logo/brand area */
.sidebar-brand,
.sidebar .sidebar-brand {
  width: var(--sidebar-width) !important;
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
}

/* Scroll wrapper */
.sidebar-scroll {
  background: var(--sidebar-bg) !important;
  margin-top: 65px;
}

/* Menu items — estado padrão */
.sidebar-menu li a,
.sidebar-menu > li > a {
  color: var(--sidebar-link) !important;
  border-radius: var(--radius-sm) !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  transition: background var(--transition), color var(--transition) !important;
  font-size: 13px;
  font-weight: 450;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hover */
.sidebar-menu li a:hover,
.sidebar-menu > li > a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--sidebar-link-hover) !important;
}

/* Estado ativo — barra lateral vermelha em vez de fundo azul sólido */
.sidebar-menu li.active > a,
.sidebar-menu > li.active > a {
  background: var(--sidebar-active-bg) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--lab2-red) !important;
  padding-left: 9px !important; /* compensa a borda de 3px */
  font-weight: 500;
}

/* Ícones no menu */
.sidebar-menu li a .nav-icon,
.sidebar-menu li a i,
.sidebar-menu li a svg {
  color: var(--sidebar-icon) !important;
  opacity: 1;
  flex-shrink: 0;
}

.sidebar-menu li a:hover .nav-icon,
.sidebar-menu li a:hover i,
.sidebar-menu li a:hover svg,
.sidebar-menu li.active > a .nav-icon,
.sidebar-menu li.active > a i,
.sidebar-menu li.active > a svg {
  color: #ffffff !important;
}

/* Separadores de seção */
.sidebar-menu .sidebar-nav-title,
.sidebar-menu .nav-title {
  color: var(--slate-600) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 20px 4px;
  margin: 0;
}

/* Submenus */
.sidebar-menu .sub-menu,
.sidebar-menu ul.sub-menu {
  background: transparent !important;
  padding-left: 0;
}

.sidebar-menu .sub-menu li a {
  padding-left: 36px !important;
  font-size: 12.5px;
  color: var(--slate-500) !important;
}

.sidebar-menu .sub-menu li a:hover {
  color: #ffffff !important;
}

.sidebar-menu .sub-menu li.active > a {
  color: #ffffff !important;
  border-left: 3px solid var(--lab2-red) !important;
  padding-left: 33px !important;
}

/* Contador/badge no menu */
.sidebar-menu .menu-badge {
  background: var(--lab2-red) !important;
  color: #fff !important;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: auto;
}

/* ─── 4. TOPBAR ─────────────────────────────────────────────────────────────── */

.navbar-custom,
nav.navbar-custom,
#default-navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  left: var(--sidebar-width) !important;
}

/* Ajuste da margem esquerda quando sidebar está aberta */
.navbar-custom .container-fluid,
#default-navbar .container-fluid {
  padding-left: 0;
}

/* ─── 5. LAYOUT — MAIN CONTENT ──────────────────────────────────────────────── */

/* Compensa o novo width da sidebar (220px) — apenas no container raiz */
.page-container {
  margin-left: var(--sidebar-width) !important;
  transition: margin-left var(--transition);
}

/* Desktop: sidebar-toggled = sidebar recolhida, mantendo ícones visíveis */
@media (min-width: 991px) {
  body.sidebar-toggled {
    min-height: 100vh !important;
  }

  body.sidebar-toggled .sidebar {
    position: fixed !important;
    left: 0 !important;
    width: var(--sidebar-collapsed-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: visible;
  }

  body.sidebar-toggled .sidebar-brand,
  body.sidebar-toggled .sidebar .sidebar-brand {
    width: var(--sidebar-collapsed-width) !important;
  }

  body.sidebar-toggled .sidebar .sidebar-brand.brand-logo {
    display: none !important;
  }

  body.sidebar-toggled .sidebar .sidebar-brand.brand-logo-mini {
    display: flex !important;
  }

  body.sidebar-toggled .sidebar-scroll {
    height: calc(100vh - 65px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 65px) !important;
    overflow: visible !important;
  }

  body.sidebar-toggled .navbar-custom,
  body.sidebar-toggled nav.navbar-custom,
  body.sidebar-toggled #default-navbar {
    left: var(--sidebar-collapsed-width) !important;
  }

  body.sidebar-toggled .page-container,
  body.sidebar-toggled div.overflow-auto.page-container {
    margin-left: var(--sidebar-collapsed-width) !important;
  }

  body.sidebar-toggled.compact-view-active .page-container,
  body.sidebar-toggled.compact-view-active div.overflow-auto.page-container {
    height: calc(100vh - 65px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sidebar-toggled.compact-view-active .lab2-split-wrap,
  body.sidebar-toggled.compact-view-active #page-content,
  body.sidebar-toggled.compact-view-active #compact-details-page,
  body.sidebar-toggled.compact-view-active .compact-view-left-panel {
    min-height: 0 !important;
  }

  body.sidebar-toggled.compact-view-active #compact-details-page {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel .table-responsive,
  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel .scrollable-table,
  body.sidebar-toggled.lab2-clients-page .lab2-client-list-panel .table-responsive,
  body.sidebar-toggled.lab2-clients-page .lab2-client-list-panel .scrollable-table {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.sidebar-toggled .sidebar-menu li a,
  body.sidebar-toggled .sidebar-menu > li > a {
    justify-content: center;
    gap: 0;
    width: calc(var(--sidebar-collapsed-width) - 16px) !important;
    min-height: 42px;
    margin: 1px 8px !important;
    padding: 9px 0 !important;
    box-shadow: none !important;
  }

  body.sidebar-toggled .sidebar-menu li.active > a,
  body.sidebar-toggled .sidebar-menu > li.active > a {
    padding-left: 0 !important;
  }

  body.sidebar-toggled .sidebar-menu li,
  body.sidebar-toggled .sidebar-menu li:hover {
    width: var(--sidebar-collapsed-width) !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  body.sidebar-toggled .sidebar-menu li:hover > a {
    width: calc(var(--sidebar-collapsed-width) - 16px) !important;
    box-shadow: none !important;
  }

  body.sidebar-toggled .sidebar-menu li a .menu-text {
    display: none !important;
  }

  body.sidebar-toggled .sidebar-menu li.main:hover > a .menu-text {
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) - 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1010;
    display: inline-flex !important;
    align-items: center;
    width: 180px;
    min-width: 0;
    height: 42px;
    margin-left: 0 !important;
    padding: 0 14px !important;
    border-radius: var(--radius-md);
    background: #27272a;
    color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }

  body.sidebar-toggled .sidebar-menu li.expand:hover > a .menu-text {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  body.sidebar-toggled .sidebar-menu li.expand > a::after {
    display: none !important;
  }

  body.sidebar-toggled .sidebar-menu li ul {
    left: var(--sidebar-collapsed-width) !important;
    top: 42px;
    z-index: 1009;
    display: none;
    width: 180px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: #27272a !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.2) !important;
  }

  body.sidebar-toggled .sidebar-menu li:hover > ul {
    display: block !important;
  }

  body.sidebar-toggled .sidebar-menu li ul li,
  body.sidebar-toggled .sidebar-menu li ul li:hover {
    width: 100% !important;
    background: transparent !important;
  }

  body.sidebar-toggled .sidebar-menu li ul li a {
    width: 100% !important;
    min-height: 0;
    justify-content: flex-start !important;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: var(--sidebar-link) !important;
  }

  body.sidebar-toggled .sidebar-menu li ul li a:hover {
    background: rgba(255,255,255,.06) !important;
    color: #ffffff !important;
  }

  body.sidebar-toggled .sidebar-menu li ul li a span {
    position: static !important;
    display: inline !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font-size: 12.5px;
  }
}

@media (max-width: 990px) {
  .navbar-custom,
  nav.navbar-custom,
  #default-navbar {
    left: 0 !important;
  }

  body.sidebar-toggled .page-container,
  body.sidebar-toggled div.overflow-auto.page-container {
    margin-left: 0 !important;
  }
}

/* ─── 6. BOTÕES ─────────────────────────────────────────────────────────────── */

/* Botão primário → vermelho LAB2 */
.btn-primary {
  background: var(--lab2-red) !important;
  border-color: var(--lab2-red) !important;
  color: #ffffff !important;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition), box-shadow var(--transition) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background: var(--lab2-red-hover) !important;
  border-color: var(--lab2-red-hover) !important;
  box-shadow: 0 0 0 3px rgba(255,46,77,.25) !important;
}

.btn-primary:focus {
  outline: none;
}

/* Variante outline */
.btn-outline-primary {
  border-color: var(--lab2-red) !important;
  color: var(--lab2-red) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--lab2-red) !important;
  color: #ffffff !important;
}

/* Botão ghost / secundário */
.btn-default,
.btn-secondary {
  background: var(--slate-100) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--slate-200) !important;
}

/* ─── 7. LINKS ──────────────────────────────────────────────────────────────── */

a {
  color: var(--lab2-red);
}

a:hover {
  color: var(--lab2-red-hover);
}

/* ─── 8. BADGES / CHIPS ─────────────────────────────────────────────────────── */

.badge-primary,
.label-primary {
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
  border-radius: var(--radius-full) !important;
}

.badge-success { background: rgba(34,197,94,.12) !important; color: #16a34a !important; }
.badge-warning { background: rgba(245,158,11,.12) !important; color: #b45309 !important; }
.badge-danger  { background: rgba(239,68,68,.12)  !important; color: #dc2626 !important; }
.badge-info    { background: rgba(59,130,246,.12) !important; color: #2563eb !important; }

/* ─── 9. CARDS ──────────────────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
}

.card-header {
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 14px 20px !important;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* ─── 10. TABELAS ───────────────────────────────────────────────────────────── */

.table thead th {
  background: var(--slate-50) !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 16px !important;
}

.table tbody td {
  border-bottom: 1px solid var(--border-light) !important;
  padding: 12px 16px !important;
  color: var(--text-primary);
  font-size: 13.5px;
  vertical-align: middle !important;
}

.table tbody tr:hover td {
  background: var(--slate-50) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--lab2-red) !important;
  border-color: var(--lab2-red) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--slate-100) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ─── 11. FORMS ─────────────────────────────────────────────────────────────── */

.form-control {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255,46,77,.12) !important;
  outline: none !important;
}

.form-label,
label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px !important;
}

/* Select2 */
.select2-container--bootstrap .select2-selection {
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

.select2-container--bootstrap .select2-selection--single:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255,46,77,.12) !important;
}

.select2-container--bootstrap .select2-results__option--highlighted {
  background: var(--lab2-red) !important;
}

/* ─── 12. MODAIS ────────────────────────────────────────────────────────────── */

.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}

.modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px !important;
}

.close {
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
  font-size: 20px;
  line-height: 1;
}

.close:hover {
  color: var(--text-primary) !important;
}

/* ─── 13. ABAS / TABS ───────────────────────────────────────────────────────── */

.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--lab2-red) !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* Recolore o indicador ::after nativo do CRM em TODAS as páginas.
   O CRM usa background-color no ::after — nunca border-bottom no elemento.
   Cobre: .active, .active.show e qualquer combinação. */
.nav-tabs li a.active::after,
.nav-tabs li a.active.show::after {
  background-color: var(--lab2-red) !important;
}

.nav-tabs li:not(.title-tab) a:not(.active):hover::after {
  background-color: var(--slate-300) !important;
}

/* ─── 14. ALERTAS ───────────────────────────────────────────────────────────── */

.alert {
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 13.5px;
}

.alert-success { background: rgba(34,197,94,.08)  !important; color: #166534 !important; }
.alert-warning { background: rgba(245,158,11,.08) !important; color: #92400e !important; }
.alert-danger  { background: rgba(239,68,68,.08)  !important; color: #991b1b !important; }
.alert-info    { background: rgba(59,130,246,.08) !important; color: #1e40af !important; }

/* ─── 15. SCROLLBAR ─────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--slate-400);
}

/* Scrollbar dentro da sidebar */
.sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
}

.sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.25);
}

/* ─── 16. DASHBOARD WIDGETS ─────────────────────────────────────────────────── */

.widget-bg-1,
.widget-bg-2,
.widget-bg-3,
.widget-bg-4 {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
}

/* Contadores */
.col-stat .number {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.1;
}

/* ─── 17. UTILIDADES LAB2 ───────────────────────────────────────────────────── */

/* Avatar genérico */
.lab2-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Chip / tag */
.lab2-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 500;
  background: var(--slate-100);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.lab2-chip:hover,
.lab2-chip.active {
  background: var(--lab2-red-dim);
  border-color: rgba(255,46,77,.25);
  color: var(--lab2-red);
}

/* Dot de presença/status */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.online  { background: var(--color-success); }
.status-dot.away    { background: var(--color-warning); }
.status-dot.offline { background: var(--slate-300); }

/* ─── 18. PRINT ─────────────────────────────────────────────────────────────── */

@media print {
  .sidebar,
  .navbar-custom,
  #default-navbar {
    display: none !important;
  }

  .page-container {
    margin-left: 0 !important;
  }
}

/* ─── 19. RESPONSIVO ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar {
    left: calc(-1 * var(--sidebar-width));
    transition: left var(--transition);
  }

  body.sidebar-toggled .sidebar {
    left: 0;
  }

  .page-container {
    margin-left: 0 !important;
  }
}

/* ─── 19a. MÓDULO DASHBOARD ─────────────────────────────────────────────────── */

/* Layout geral da página de dashboard */
.dashboard-view {
  padding: 20px 24px !important;
}

/* Header do dashboard (título + color tags) */
.dashbaord-header-area {
  margin-bottom: 20px !important;
}

.dashbaord-header-area h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.2;
}

/* Bolinhas de dashboard (cor-tag) */
.color-tag {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  display: inline-block;
}

.color-tag.border-circle {
  box-shadow: 0 0 0 2px var(--border), 0 0 0 4px transparent;
  outline: 2px solid var(--slate-400);
}

/* Linhas e colunas de widgets */
.dashboards-row {
  margin-bottom: 16px !important;
}

.dashboards-row .widget-container {
  padding: 0 8px !important;
}

.dashboards-row .widget-container:first-child {
  padding-left: 0 !important;
}

.dashboards-row .widget-container:last-child {
  padding-right: 0 !important;
}

/* ── Widget ícone (stat counter: "open_tasks_widget" etc.) ── */
.dashboard-icon-widget {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
  overflow: hidden;
  position: relative;
}

.dashboard-icon-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lab2-red);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  opacity: .6;
}

.dashboard-icon-widget:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

.dashboard-icon-widget .card-body {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
}

/* Ícone do widget */
.dashboard-icon-widget .widget-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  opacity: .9;
}

/* Número grande */
.dashboard-icon-widget .widget-details h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.5px;
}

/* Label abaixo do número */
.dashboard-icon-widget .widget-details span {
  font-size: 11.5px !important;
  color: var(--text-secondary) !important;
  font-weight: 500;
  display: block;
  margin-top: 2px;
}

/* Hover link externo que envolve o widget */
a.white-link {
  text-decoration: none !important;
  display: block;
}

/* ── Widget cards comuns (gráficos, listas) ── */
.card .card-header {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.card .card-header i,
.card .card-header svg {
  color: var(--text-tertiary) !important;
  flex-shrink: 0;
}

/* ── Anúncios / Alertas no topo do dashboard ── */
.alert.announcements-alert {
  border-left: 3px solid var(--lab2-red) !important;
  border-radius: var(--radius-md) !important;
  background: var(--lab2-red-dim) !important;
  color: var(--text-primary) !important;
}

/* ── Dropdown de mais opções do dashboard ── */
.dashboard-dropdown .dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  min-width: 180px;
}

.dashboard-dropdown .dropdown-item:hover {
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
}

/* ─── 19b. DASHBOARD LAB2 — LAYER 4 ───────────────────────────────────────── */

body.lab2-dashboard-body .scrollable-page.main-scrollable-page {
  background: #f1f5f9 !important;
}

#page-content.lab2-dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: calc(100vh - 58px);
  padding: 24px !important;
  background: #f1f5f9 !important;
}

.lab2-dashboard-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lab2-dashboard-greeting h1 {
  margin: 0;
  color: var(--slate-900);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

.lab2-dashboard-greeting p {
  margin: 4px 0 0;
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 500;
}

.lab2-dashboard-primary-action,
.lab2-dashboard-primary-action.btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--lab2-red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(255, 46, 77, .25);
}

.lab2-dashboard-primary-action:hover {
  background: var(--lab2-red-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 46, 77, .32);
}

.lab2-dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lab2-dashboard-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  color: var(--slate-800);
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.lab2-dashboard-stat-card:hover {
  color: var(--slate-800);
  border-color: var(--border-default);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .05);
  transform: translateY(-1px);
}

.lab2-dashboard-stat-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-info);
}

.lab2-stat-red .lab2-dashboard-stat-accent { background: var(--lab2-red); }
.lab2-stat-success .lab2-dashboard-stat-accent { background: var(--color-success); }
.lab2-stat-warning .lab2-dashboard-stat-accent { background: var(--color-warning); }

.lab2-dashboard-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: #eff6ff;
  color: var(--color-info);
}

.lab2-stat-red .lab2-dashboard-stat-icon {
  background: #fff1f2;
  color: var(--lab2-red);
}

.lab2-stat-success .lab2-dashboard-stat-icon {
  background: #f0fdf4;
  color: var(--color-success);
}

.lab2-stat-warning .lab2-dashboard-stat-icon {
  background: #fffbeb;
  color: var(--color-warning);
}

.lab2-dashboard-stat-icon svg {
  width: 16px;
  height: 16px;
}

.lab2-dashboard-stat-label {
  margin-bottom: 4px;
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.2;
  text-transform: uppercase;
}

.lab2-dashboard-stat-card strong {
  color: var(--slate-900);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.lab2-stat-warning strong {
  color: var(--color-danger);
}

.lab2-dashboard-stat-delta {
  margin-top: 8px;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
}

.lab2-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.lab2-dashboard-main-col,
.lab2-dashboard-side-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.lab2-dashboard-card {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.lab2-dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: #fff;
}

.lab2-dashboard-card-header h2 {
  margin: 0;
  color: var(--slate-800);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.lab2-dashboard-card-header a {
  color: var(--lab2-red);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.lab2-dashboard-task-list,
.lab2-dashboard-lead-list,
.lab2-dashboard-deadline-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.lab2-dashboard-task-row,
.lab2-dashboard-deadline-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  color: var(--slate-800) !important;
  text-decoration: none !important;
  transition: background var(--transition);
}

.lab2-dashboard-task-row:hover,
.lab2-dashboard-deadline-row:hover,
.lab2-dashboard-lead-row:hover {
  background: var(--slate-50);
}

.lab2-dashboard-task-check {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid var(--slate-300);
  border-radius: 4px;
}

.lab2-dashboard-task-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.lab2-dashboard-task-info strong,
.lab2-dashboard-deadline-row strong {
  display: block;
  overflow: hidden;
  color: var(--slate-800);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab2-dashboard-task-info > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 3px;
}

.lab2-dashboard-task-info em {
  display: inline-flex;
  max-width: 160px;
  padding: 2px 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--label-color);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab2-dashboard-task-info small,
.lab2-dashboard-deadline-row small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.lab2-dashboard-task-info small svg,
.lab2-dashboard-deadline-row small svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.lab2-dashboard-task-info .expired,
.lab2-dashboard-deadline-row .expired {
  color: var(--color-danger);
}

.lab2-dashboard-task-info .today,
.lab2-dashboard-deadline-row .today {
  color: var(--color-warning);
}

.lab2-dashboard-priority-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
}

.lab2-dashboard-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}

.lab2-dashboard-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.lab2-dashboard-activity-item img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  object-fit: cover;
}

.lab2-dashboard-activity-item > div {
  min-width: 0;
  padding-top: 2px;
}

.lab2-dashboard-activity-item p {
  margin: 0;
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.lab2-dashboard-activity-item p strong {
  color: var(--slate-800);
  font-weight: 700;
}

.lab2-dashboard-activity-item a {
  color: var(--slate-800);
  font-weight: 600;
  text-decoration: none;
}

.lab2-dashboard-inline-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.lab2-dashboard-inline-badge.success {
  background: #dcfce7;
  color: #16a34a;
}

.lab2-dashboard-inline-badge.warning {
  background: #fef3c7;
  color: #d97706;
}

.lab2-dashboard-inline-badge.danger {
  background: #fee2e2;
  color: #dc2626;
}

.lab2-dashboard-activity-change {
  margin-top: 3px;
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.45;
}

.lab2-dashboard-activity-item time {
  display: block;
  margin-top: 3px;
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 500;
}

.lab2-dashboard-lead-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 1px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  color: var(--slate-800) !important;
  text-decoration: none !important;
  transition: background var(--transition);
}

.lab2-dashboard-lead-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.lab2-dashboard-lead-row strong {
  overflow: hidden;
  color: var(--slate-800);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab2-dashboard-lead-row small {
  overflow: hidden;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab2-dashboard-deadline-row {
  align-items: flex-start;
}

.lab2-dashboard-deadline-row > span:last-child {
  min-width: 0;
}

.lab2-dashboard-deadline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--radius-md);
  background: #f0fdf4;
  color: var(--color-success);
}

.lab2-dashboard-deadline-icon.expired {
  background: #fff1f2;
  color: var(--color-danger);
}

.lab2-dashboard-deadline-icon.today {
  background: #fffbeb;
  color: var(--color-warning);
}

.lab2-dashboard-deadline-icon svg {
  width: 14px;
  height: 14px;
}

.lab2-dashboard-empty-state {
  padding: 14px 10px;
  color: var(--slate-400);
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 1180px) {
  .lab2-dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lab2-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #page-content.lab2-dashboard-page {
    padding: 16px !important;
  }

  .lab2-dashboard-greeting {
    align-items: flex-start;
    flex-direction: column;
  }

  .lab2-dashboard-stats-grid {
    grid-template-columns: 1fr;
  }

  .lab2-dashboard-primary-action {
    width: 100%;
    justify-content: center;
  }
}

/* ─── 19b-0. MÓDULO PROJETOS ─────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   PAINEL ESQUERDO — lista de projetos em modo card (compact view)
   ════════════════════════════════════════════════════════════════ */

/* Wrapper do split panel — cobre tanto o d-flex do Rise CRM quanto o nosso */
body.compact-view-active .lab2-split-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  min-height: calc(100vh - 65px);
}

body.lab2-projects-page.compact-view-active .page-container,
body.lab2-projects-page.compact-view-active div.overflow-auto.page-container {
  height: calc(100vh - 65px) !important;
  overflow: hidden !important;
}

body.lab2-projects-page.compact-view-active .scrollable-page.main-scrollable-page {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}

body.lab2-projects-page.compact-view-active #page-content.projects-list-view {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--slate-50) !important;
}

body.lab2-projects-page.compact-view-active #page-content.projects-list-view > .lab2-split-wrap {
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Painel esquerdo compacto — coluna fixa do split, sem overlay */
body.compact-view-active .compact-view-left-panel {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex-shrink: 0 !important;
  background: #fff !important;
  border-right: 1px solid var(--slate-200) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: sticky !important;
  top: 60px !important; /* altura do topbar */
  max-height: calc(100vh - 60px) !important;
  align-self: flex-start !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 1 !important;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.lab2-projects-page.compact-view-active .mobile-mirror {
  width: 320px !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel > .list-section {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* .table-responsive contém toda a tabela — não pode ser hidden */
body.compact-view-active .compact-view-left-panel .table-responsive {
  overflow: hidden !important;
}

/* Oculta apenas o cabeçalho/rodapé da DataTable no painel esquerdo */
body.compact-view-active .compact-view-left-panel thead,
body.compact-view-active .compact-view-left-panel tfoot,
body.compact-view-active .compact-view-left-panel .DTFC_LeftWrapper,
body.compact-view-active .compact-view-left-panel .dataTables_scrollHead {
  display: none !important;
}

/* Oculta o card wrapper padrão na esquerda para evitar sombra dupla */
body.compact-view-active .compact-view-left-panel > .list-section > .card {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel > .list-section > .card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Header do painel esquerdo (título + botão Novo) */
body.compact-view-active .compact-view-left-panel .page-title.b-a,
body.compact-view-active .compact-view-left-panel ul.nav-tabs.bg-white.title {
  background: var(--surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--slate-200) !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .page-title.b-a,
body.lab2-projects-page.compact-view-active .compact-view-left-panel ul.nav-tabs.bg-white.title {
  min-height: 72px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel ul.nav-tabs.bg-white.title > .nav-item,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .page-title.b-a h1 {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .compact-view-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  color: var(--slate-900) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

body.compact-view-active .compact-view-left-panel .page-title.b-a h1,
body.compact-view-active .compact-view-left-panel ul.nav-tabs.bg-white.title .nav-link {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.compact-view-active .compact-view-left-panel .title-button-group {
  gap: 6px !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .title-button-group,
body.lab2-projects-page.compact-view-active .compact-view-left-panel #mobile-function-button,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .more-options-btn,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .mobile-function-button-dropdown {
  display: none !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .lab2-project-list-add-btn {
  margin-left: auto !important;
  padding: 7px 12px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Oculta botões Importar e Gerenciar Labels no painel esquerdo para não poluir */
body.compact-view-active .compact-view-left-panel .btn-default:not(:last-child) {
  display: none !important;
}

/* ── Pagination bar: Rise CRM usa position:fixed + width:350px — override ── */
body.compact-view-active .compact-view-left-panel .datatable-tools {
  position: sticky !important;
  bottom: 0 !important;
  width: 260px !important;
  background: #fff !important;
  border-top: 1px solid var(--slate-200) !important;
  z-index: 5 !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .datatable-tools {
  position: static !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .datatable-tools,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-layout-row:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .datatable-tools .btn,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .smart-filter-bar .btn {
  width: 100% !important;
  min-height: 36px !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .dataTables_filter,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-search {
  width: 100% !important;
  padding: 0 !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .dataTables_filter label,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-search label {
  width: 100% !important;
  margin: 0 !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .dataTables_filter input,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-search input {
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--slate-700) !important;
  font-size: 13px !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .dataTables_filter input:focus,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-search input:focus {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255,45,85,.12) !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .table-responsive,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-container,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-layout-row,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-layout-table,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dt-layout-full,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .dataTables_wrapper,
body.lab2-projects-page.compact-view-active .compact-view-left-panel table,
body.lab2-projects-page.compact-view-active .compact-view-left-panel tbody {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Área de scroll da tabela — altura automática dentro do painel sticky ── */
body.compact-view-active .compact-view-left-panel .scrollable-table {
  height: auto !important;
  overflow-y: visible !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel .scrollable-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Filtros smart-filter no painel esquerdo ── */
body.compact-view-active .compact-view-left-panel .smart-filter-bar,
body.compact-view-active .compact-view-left-panel .dataTables_filter,
body.compact-view-active .compact-view-left-panel .dataTables_length,
body.compact-view-active .compact-view-left-panel .dataTables_info,
body.compact-view-active .compact-view-left-panel .dataTables_paginate {
  padding: 8px 12px !important;
  font-size: 11px !important;
}

/* ── Linha da tabela em modo card ── */
body.compact-view-active .compact-view-left-panel .lab2-proj-item-row {
  display: block;
  border-bottom: 1px solid var(--slate-100);
  transition: background .1s;
}

body.compact-view-active .compact-view-left-panel tr {
  display: block !important;
  border-bottom: none !important;
}

body.lab2-projects-page.compact-view-active .compact-view-left-panel tr,
body.lab2-projects-page.compact-view-active .compact-view-left-panel table.dataTable tbody td.all,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .lab2-proj-item-row,
body.lab2-projects-page.compact-view-active .compact-view-left-panel .lab2-proj-card-link {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Oculta todas as células por padrão; apenas a coluna .all (título/card) fica visível */
body.compact-view-active .compact-view-left-panel table.dataTable tbody td {
  display: none !important;
  border: none !important;
  padding: 0 !important;
}

body.compact-view-active .compact-view-left-panel table.dataTable tbody td.all {
  display: block !important;
  border: none !important;
  padding: 0 !important;
}

body.compact-view-active .compact-view-left-panel tr:hover .lab2-proj-item-row,
body.compact-view-active .compact-view-left-panel tr.active .lab2-proj-item-row {
  background: transparent !important;
}

body.compact-view-active .compact-view-left-panel tr:hover {
  background: var(--slate-50) !important;
}

body.compact-view-active .compact-view-left-panel tr.active {
  background: var(--lab2-red-dim) !important;
  box-shadow: inset 3px 0 0 var(--lab2-red) !important;
}

/* ── Layout interno do card de projeto ── */
.lab2-proj-card-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 12px 16px !important;
}

.lab2-proj-item-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lab2-proj-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lab2-proj-icon-svg {
  width: 15px !important;
  height: 15px !important;
}

.lab2-proj-item-body {
  flex: 1;
  min-width: 0;
}

.lab2-proj-item-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
  line-height: 1.3 !important;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lab2-proj-item-client {
  font-size: 11px !important;
  color: var(--slate-400) !important;
  margin-top: 2px !important;
}

.lab2-proj-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.lab2-prog-bar-sm {
  flex: 1;
  height: 3px;
  background: var(--slate-200);
  border-radius: 2px;
  overflow: hidden;
}

.lab2-prog-fill-sm {
  height: 100%;
  border-radius: 2px;
}

.lab2-prog-pct {
  font-size: 10px !important;
  color: var(--slate-400) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.lab2-proj-deadline {
  font-size: 10px !important;
  color: var(--slate-400) !important;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px !important;
}

.lab2-proj-deadline-icon {
  width: 10px !important;
  height: 10px !important;
}

.lab2-proj-deadline--overdue {
  color: #ef4444 !important;
}

.lab2-proj-deadline--done {
  color: #22c55e !important;
}

/* ── Painel direito (detalhe do projeto) ── */
body.compact-view-active #compact-details-page {
  flex: 1 1 0% !important;    /* preenche o espaço restante após o painel esquerdo */
  width: auto !important;     /* override w-100 do Rise CRM */
  min-width: 0 !important;
  overflow-y: auto !important;
  background: var(--slate-50) !important;
  margin-left: 0 !important;  /* override Rise CRM's 350px */
  position: relative !important;
  left: auto !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  margin-left: 0 !important;
  position: relative !important;
  left: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Seta ">" do DataTable Responsive (dtr-control) — ocultar no painel esquerdo ── */
body.compact-view-active .compact-view-left-panel table.dataTable tbody td.dtr-control::before,
body.compact-view-active .compact-view-left-panel table.dataTable tbody td.dtr-control::after {
  display: none !important;
}
body.compact-view-active .compact-view-left-panel table.dataTable tbody td.dtr-control {
  padding-left: 0 !important;
}

/* ── Cor da linha ativa — override do azul (#6690F4) do Rise CRM ── */
body.compact-view-active .compact-view-left-panel .dataTable:not(.js-selection-mode) tbody tr.active td,
body.compact-view-active .compact-view-left-panel .dataTable:not(.js-selection-mode) tbody tr.active:hover td {
  background: var(--lab2-red-dim) !important;
  color: var(--slate-800) !important;
}
body.compact-view-active .compact-view-left-panel .dataTable:not(.js-selection-mode) tbody tr.active td a,
body.compact-view-active .compact-view-left-panel .dataTable:not(.js-selection-mode) tbody tr.active td .text-default {
  color: var(--slate-800) !important;
}

/* ── Placeholder quando nenhum projeto está selecionado ── */
.lab2-proj-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  gap: 16px;
  color: var(--slate-300);
}

.lab2-proj-placeholder-icon svg {
  width: 36px !important;
  height: 36px !important;
  color: var(--slate-300);
}

.lab2-proj-placeholder-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--slate-400) !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   DETALHE DO PROJETO — painel direito
   ════════════════════════════════════════════════════════════════ */

/* Container do projeto */
body.compact-view-active #compact-details-page .page-content.project-details-view {
  padding: 0 !important;
}

body.compact-view-active #compact-details-page .container-fluid {
  padding: 0 !important;
  max-width: 100% !important;
}

body.compact-view-active #compact-details-page .row {
  margin: 0 !important;
}

body.compact-view-active #compact-details-page .col-md-12 {
  padding: 0 !important;
}

/* Back button no detalhe */
body.compact-view-active #compact-details-page .details-view-top-button {
  display: none !important;
}

/* ── Seção de título do projeto ── */
body.compact-view-active #compact-details-page .project-title-section {
  background: #fff !important;
  border-bottom: 1px solid var(--slate-200) !important;
  padding: 20px 28px 0 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .page-title.no-bg {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .page-title.no-bg > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-header-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-header-icon .icon,
body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-header-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--lab2-red) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-header-info {
  min-width: 0 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
  color: var(--slate-400) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-breadcrumb a,
body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-breadcrumb span {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-breadcrumb a:hover {
  color: var(--lab2-red) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-breadcrumb-icon {
  width: 12px !important;
  height: 12px !important;
  color: var(--slate-300) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* Título e ícone do projeto */
body.compact-view-active #compact-details-page .page-title.no-bg h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  letter-spacing: -.02em !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page #star-mark {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page #star-mark a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--slate-400) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page #star-mark a:hover {
  background: var(--slate-100) !important;
  color: var(--lab2-red) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin-top: 7px !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--lab2-red) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.72) !important;
  animation: task-dot-pulse 1.8s ease-in-out infinite;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--slate-500) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-meta-item svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--slate-400) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-meta-sep {
  width: 1px !important;
  height: 14px !important;
  background: var(--slate-200) !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-team-avatars {
  display: inline-flex !important;
  align-items: center !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-team-avatar {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-left: -6px !important;
  background: var(--slate-200) !important;
  color: var(--slate-500) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-team-avatar:first-child {
  margin-left: 0 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .lab2-project-team-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Grupo de botões (Editar, Adicionar tarefa, etc.) */
body.compact-view-active #compact-details-page .project-title-button-group-section .btn {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .project-title-button-group-section,
body.lab2-projects-page.compact-view-active #compact-details-page .project-title-button-group-section .title-button-group {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .project-title-button-group-section .btn-default {
  border: 1px solid var(--slate-200) !important;
  background: #fff !important;
  color: var(--slate-700) !important;
  box-shadow: none !important;
}

body.lab2-projects-page.compact-view-active #compact-details-page .project-title-button-group-section .btn-default:hover {
  background: var(--slate-50) !important;
  color: var(--slate-900) !important;
}

/* ── Barra de progresso no detalhe ── */
body.compact-view-active #compact-details-page .progress {
  height: 5px !important;
  border-radius: 3px !important;
  margin-bottom: 0 !important;
  background: var(--slate-200) !important;
}

body.compact-view-active #compact-details-page .progress-bar {
  border-radius: 3px !important;
}

/* ── Strip de progresso LAB2 no header do projeto ── */
.lab2-proj-progress-strip {
  padding: 10px 0 14px;
}

.lab2-progress-label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lab2-progress-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--slate-500) !important;
}

.lab2-progress-pct {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--slate-700) !important;
}

.lab2-progress-bar-track {
  height: 5px;
  background: var(--slate-200);
  border-radius: 3px;
  overflow: hidden;
}

.lab2-progress-bar-fill {
  height: 100%;
  background: var(--lab2-red);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Tab bar do projeto — estilo prototype ── */
body.compact-view-active #compact-details-page #project-tabs.nav-tabs,
.project-details-view #project-tabs.nav-tabs {
  border-top: 1px solid var(--slate-200) !important;
  border-bottom: 0 !important;
  background: #fff !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
}

body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link,
.project-details-view #project-tabs .nav-item .nav-link {
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-500) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color .13s, border-color .13s !important;
}

body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link .lab2-project-tab-icon,
.project-details-view #project-tabs .nav-item .nav-link .lab2-project-tab-icon {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}

body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link:hover,
.project-details-view #project-tabs .nav-item .nav-link:hover {
  color: var(--slate-700) !important;
  border-bottom-color: var(--slate-300) !important;
  background: transparent !important;
}

body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link.active,
.project-details-view #project-tabs .nav-item .nav-link.active {
  color: var(--lab2-red) !important;
  border-bottom-color: var(--lab2-red) !important;
  background: transparent !important;
}

/* ── Conteúdo das abas do projeto ── */
body.compact-view-active #compact-details-page .tab-content {
  background: var(--slate-50) !important;
  padding: 24px 28px !important;
}

/* ── Overview do projeto — aproximação do layer8 ── */
body.compact-view-active #compact-details-page .lab2-project-overview {
  background: transparent !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 20px !important;
  margin: 0 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview-main,
body.compact-view-active #compact-details-page .lab2-project-overview-side {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview-main > .row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview-main > .row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview-main > .row > .col-md-12 {
  grid-column: 1 / -1 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .card {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .card + .card,
body.compact-view-active #compact-details-page .lab2-project-overview [class*="col-"] + [class*="col-"] .card {
  margin-top: 0 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .card-header {
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .card-header h4 {
  margin: 0 !important;
  color: var(--slate-900) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .card-body {
  padding: 18px !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .bg-primary.p30 {
  min-height: 86px !important;
  padding: 24px !important;
  background: var(--slate-800) !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .chart-circle {
  width: 150px !important;
  height: 150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .mt-50 {
  margin-top: -54px !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview #project-progress-chart {
  width: 150px !important;
  height: 150px !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview #task-status-chart {
  min-height: 220px !important;
  max-height: 220px !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .list-group-item {
  padding: 12px 18px !important;
  border-color: var(--slate-100) !important;
  color: var(--slate-600) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .project-activity-section {
  height: fit-content !important;
  max-height: none !important;
}

body.compact-view-active #compact-details-page .lab2-project-overview .project-activity-section .card-body {
  max-height: none !important;
  overflow: visible !important;
}

/* ── Barra de progresso nos projetos (tabela e detalhe) ── */
.progress {
  background: var(--slate-200) !important;
  border-radius: var(--radius-full) !important;
  height: 6px !important;
  overflow: hidden;
}

.progress-bar {
  background: var(--lab2-red) !important;
  border-radius: var(--radius-full) !important;
  transition: width .4s ease !important;
}

/* Texto de percentual ao lado da barra */
.progress-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

/* ── Detalhe do projeto (view normal, não compact) ── */
.project-details-view .project-title-section {
  background: #fff !important;
  border-bottom: 1px solid var(--slate-200) !important;
  padding: 20px 28px 0 !important;
}

.project-details-view .page-title.no-bg {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
}

.project-details-view .lab2-project-header-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.project-details-view .lab2-project-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
}

.project-details-view .lab2-project-header-icon svg,
.project-details-view .lab2-project-header-icon .icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--lab2-red) !important;
}

.project-details-view .lab2-project-header-info {
  min-width: 0 !important;
}

.project-details-view .lab2-project-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
  color: var(--slate-400) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.project-details-view .lab2-project-breadcrumb a,
.project-details-view .lab2-project-breadcrumb span {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

.project-details-view .lab2-project-breadcrumb a:hover {
  color: var(--lab2-red) !important;
}

.project-details-view .lab2-project-breadcrumb-icon {
  width: 12px !important;
  height: 12px !important;
  color: var(--slate-300) !important;
}

.project-details-view .lab2-project-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.project-details-view .page-title.no-bg h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  letter-spacing: -.02em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.project-details-view #star-mark {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.project-details-view #star-mark a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--slate-400) !important;
}

.project-details-view #star-mark a:hover {
  background: var(--slate-100) !important;
  color: var(--lab2-red) !important;
}

.project-details-view .lab2-project-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin-top: 7px !important;
}

.project-details-view .lab2-project-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--lab2-red) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.project-details-view .lab2-project-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.72) !important;
  animation: task-dot-pulse 1.8s ease-in-out infinite;
}

.project-details-view .lab2-project-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--slate-500) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.project-details-view .lab2-project-meta-item svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--slate-400) !important;
}

.project-details-view .lab2-project-meta-sep {
  width: 1px !important;
  height: 14px !important;
  background: var(--slate-200) !important;
}

.project-details-view .lab2-project-team-avatars {
  display: inline-flex !important;
  align-items: center !important;
}

.project-details-view .lab2-project-team-avatar {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-left: -6px !important;
  background: var(--slate-200) !important;
  color: var(--slate-500) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

.project-details-view .lab2-project-team-avatar:first-child {
  margin-left: 0 !important;
}

.project-details-view .lab2-project-team-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.project-details-view .project-title-button-group-section,
.project-details-view .project-title-button-group-section .title-button-group {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.project-details-view .project-title-button-group-section .btn {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.project-details-view .project-title-button-group-section .btn-default {
  border: 1px solid var(--slate-200) !important;
  background: #fff !important;
  color: var(--slate-700) !important;
  box-shadow: none !important;
}

.project-details-view .project-title-button-group-section .btn-default:hover {
  background: var(--slate-50) !important;
  color: var(--slate-900) !important;
}

.project-details-view #project-tabs.nav-tabs {
  border-top: 1px solid var(--slate-200) !important;
  border-bottom: 0 !important;
  background: #fff !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.project-details-view .tab-content {
  background: var(--slate-50) !important;
  padding: 24px 28px !important;
}

.project-details-view .lab2-project-overview {
  background: transparent !important;
}

.project-details-view .lab2-project-overview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 20px !important;
  margin: 0 !important;
}

.project-details-view .lab2-project-overview-main,
.project-details-view .lab2-project-overview-side {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.project-details-view .lab2-project-overview-main > .row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
}

.project-details-view .lab2-project-overview-main > .row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.project-details-view .lab2-project-overview-main > .row > .col-md-12 {
  grid-column: 1 / -1 !important;
}

.project-details-view .lab2-project-overview .card {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.project-details-view .lab2-project-overview .card-header {
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
}

.project-details-view .lab2-project-overview .card-header h4 {
  margin: 0 !important;
  color: var(--slate-900) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.project-details-view .lab2-project-overview .card-body {
  padding: 18px !important;
}

.project-details-view .lab2-project-overview .project-activity-section {
  height: fit-content !important;
  max-height: none !important;
}

/* Botão Actions (dropdown primário) no project_title_buttons */
.project-page .btn-primary.dropdown-toggle,
#page-content .btn-primary.dropdown-toggle.caret {
  background: var(--lab2-red) !important;
  border-color: var(--lab2-red) !important;
}

/* Dropdown de ações do projeto */
.dropdown-menu[role="menu"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.dropdown-menu[role="menu"] .dropdown-item {
  font-size: 13px !important;
  padding: 8px 16px !important;
  color: var(--text-primary) !important;
}

.dropdown-menu[role="menu"] .dropdown-item:hover {
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
}

/* Descrição do projeto */
.project-description-area,
#project-description {
  font-size: 13.5px !important;
  line-height: 1.6;
  color: var(--text-secondary) !important;
}

/* ── Membros do projeto (avatares) ── */
.project-members-area .avatar,
.project-member-avatar {
  border: 2px solid var(--surface) !important;
}

@media (max-width: 1180px) {
  .project-details-view .page-title.no-bg,
  body.lab2-projects-page.compact-view-active #compact-details-page .page-title.no-bg {
    flex-wrap: wrap !important;
  }

  .project-details-view .project-title-button-group-section,
  body.lab2-projects-page.compact-view-active #compact-details-page .project-title-button-group-section {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .project-details-view .project-title-button-group-section .title-button-group,
  body.lab2-projects-page.compact-view-active #compact-details-page .project-title-button-group-section .title-button-group {
    justify-content: flex-start !important;
  }

  .project-details-view .lab2-project-overview-grid,
  body.compact-view-active #compact-details-page .lab2-project-overview-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 960px) {
  .project-details-view .project-title-section,
  body.compact-view-active #compact-details-page .project-title-section {
    padding: 18px 18px 0 !important;
  }

  .project-details-view .tab-content,
  body.compact-view-active #compact-details-page .tab-content {
    padding: 18px !important;
  }

  .project-details-view .lab2-project-overview-main > .row,
  body.compact-view-active #compact-details-page .lab2-project-overview-main > .row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body.lab2-projects-page.compact-view-active .lab2-split-wrap {
    flex-direction: column !important;
    overflow: auto !important;
  }

  body.lab2-projects-page.compact-view-active .compact-view-left-panel,
  body.lab2-projects-page.compact-view-active .mobile-mirror {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  body.lab2-projects-page.compact-view-active .compact-view-left-panel {
    height: auto !important;
    max-height: 42vh !important;
  }

  body.lab2-projects-page.compact-view-active #compact-details-page {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ── Lista de projetos (modo tabela, sem compact view) ── */
.projects-list-view {
  background: var(--slate-50);
}

.projects-list-view .page-title.b-a {
  background: var(--surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 20px !important;
}

.projects-list-view .page-title.b-a h1 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0;
}

/* ─── 19b-i. MÓDULO CLIENTES ────────────────────────────────────────────────── */

/* ── Lista de clientes ── */
.clients-list-view {
  background: var(--slate-50);
}

body.lab2-clients-page .page-container,
body.lab2-clients-page div.overflow-auto.page-container {
  height: calc(100vh - 65px) !important;
  overflow: hidden !important;
}

body.lab2-clients-page .scrollable-page.main-scrollable-page {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}

.lab2-clients-module-page {
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--slate-100) !important;
}

.lab2-clients-module-page > .grid-button {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.lab2-clients-module-page #client-tabs.nav-tabs.title {
  flex: 0 0 auto !important;
  height: 54px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
  align-items: center !important;
}

.lab2-clients-module-page #client-tabs.nav-tabs.title > li > a {
  height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--slate-500) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.lab2-clients-module-page #client-tabs.nav-tabs.title > li > a.active {
  color: var(--lab2-red) !important;
  border-bottom-color: var(--lab2-red) !important;
}

.lab2-clients-module-page #client-tabs .tab-title {
  margin-left: auto !important;
}

.lab2-clients-module-page #client-tabs .title-button-group {
  display: none !important;
}

.lab2-clients-module-page > .grid-button > .tab-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--slate-100) !important;
}

.lab2-clients-module-page > .grid-button > .tab-content > .tab-pane {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.lab2-clients-list-view {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--slate-100) !important;
}

.lab2-clients-split-wrap {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body.lab2-clients-page.compact-view-active .lab2-client-list-panel {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
  border-right: 1px solid var(--slate-200) !important;
}

body.lab2-clients-page.compact-view-active .lab2-client-list-panel > .list-section {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.lab2-client-page-header {
  height: 56px;
  flex: 0 0 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}

.lab2-client-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lab2-client-heading-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
}

.lab2-client-heading-count {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.lab2-client-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lab2-client-search {
  width: 230px;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--slate-400);
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.lab2-client-search:focus-within {
  background: #fff;
  border-color: var(--lab2-red);
  box-shadow: 0 0 0 3px rgba(255,45,85,.12);
}

.lab2-client-search input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--slate-700);
  font-size: 13px;
  box-shadow: none !important;
}

.lab2-client-search input::placeholder {
  color: var(--slate-400);
}

.lab2-client-header-btn {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.lab2-client-filter-bar {
  height: 44px;
  flex: 0 0 44px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  overflow-x: auto;
  scrollbar-width: none;
}

.lab2-client-filter-bar::-webkit-scrollbar {
  display: none;
}

.lab2-client-chip {
  min-height: 26px;
  padding: 4px 10px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .13s, border-color .13s, background .13s;
}

.lab2-client-chip:hover {
  border-color: var(--slate-400);
  color: var(--slate-800);
}

.lab2-client-chip.active {
  background: var(--lab2-red-dim);
  border-color: var(--lab2-red);
  color: var(--lab2-red);
}

.lab2-client-chip svg {
  width: 11px !important;
  height: 11px !important;
}

.lab2-client-chip-dot.is-active {
  color: #0ea5e9 !important;
  fill: #0ea5e9;
}

.lab2-client-chip-dot.is-prospect {
  color: #a78bfa !important;
  fill: #a78bfa;
}

.lab2-client-chip-dot.is-paused {
  color: #f59e0b !important;
  fill: #f59e0b;
}

.lab2-client-chip-dot.is-closed {
  color: #64748b !important;
  fill: #64748b;
}

.lab2-client-filter-sep {
  width: 1px;
  height: 20px;
  background: var(--slate-200);
  margin: 0 4px;
  flex: 0 0 1px;
}

.lab2-client-sort-label {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.lab2-client-sort-label svg {
  width: 13px !important;
  height: 13px !important;
}

body.lab2-clients-page .lab2-client-list-panel > .list-section > .card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

body.lab2-clients-page .lab2-client-list-panel .table-responsive,
body.lab2-clients-page .lab2-client-list-panel .scrollable-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

body.lab2-clients-page .lab2-client-list-panel .filter-section-container {
  flex: 0 0 auto !important;
  padding: 10px 24px !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
}

body.lab2-clients-page .lab2-client-list-panel .filter-section-flex-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.lab2-clients-page .lab2-client-list-panel .lab2-hidden-native-search {
  display: none !important;
}

body.lab2-clients-page .lab2-client-list-panel .filter-form {
  margin-top: 8px !important;
}

body.lab2-clients-page .lab2-client-list-panel .filter-form .btn,
body.lab2-clients-page .lab2-client-list-panel .filter-section-left .btn,
body.lab2-clients-page .lab2-client-list-panel .filter-section-right .btn {
  min-height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.lab2-clients-page #client-table {
  border-collapse: collapse !important;
}

body.lab2-clients-page #client-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  padding: 9px 16px !important;
  background: var(--slate-50) !important;
  border-bottom: 1px solid var(--slate-200) !important;
  color: var(--slate-500) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

body.lab2-clients-page #client-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--slate-200) !important;
  transition: background .1s;
}

body.lab2-clients-page #client-table tbody tr:hover {
  background: var(--slate-50) !important;
}

body.lab2-clients-page #client-table tbody tr.active,
body.lab2-clients-page #client-table.dataTable:not(.js-selection-mode) tbody tr.active td,
body.lab2-clients-page #client-table.dataTable:not(.js-selection-mode) tbody tr.active:hover td {
  background: rgba(255,46,77,.04) !important;
  box-shadow: inset 3px 0 0 var(--lab2-red) !important;
  color: var(--slate-800) !important;
}

body.lab2-clients-page #client-table tbody td {
  padding: 12px 16px !important;
  border: 0 !important;
  vertical-align: middle !important;
}

.lab2-client-row-link {
  color: inherit !important;
  text-decoration: none !important;
  display: block;
}

.lab2-client-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.lab2-client-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex: 0 0 36px;
}

.lab2-client-name-wrap {
  min-width: 0;
  display: block;
}

.lab2-client-name {
  display: block;
  color: var(--slate-800);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.lab2-client-company {
  display: block;
  margin-top: 1px;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.lab2-client-contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--slate-600);
  font-size: 12px;
  line-height: 1.35;
}

.lab2-client-contact-cell .avatar {
  display: none;
}

.lab2-client-contact-name a {
  color: var(--slate-700) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.lab2-client-contact-phone {
  color: var(--slate-500);
}

.lab2-client-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 120px;
}

.lab2-client-tag,
.lab2-client-tag-row .badge {
  padding: 2px 7px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  background: rgba(100,116,139,.1) !important;
  color: var(--slate-500) !important;
}

.lab2-client-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1.45;
}

.lab2-client-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
}

.lab2-client-status-dot.is-pulsing {
  animation: task-dot-pulse 1.8s ease-in-out infinite;
}

.lab2-client-metric {
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 800;
}

.lab2-client-metric-sub {
  margin-top: 1px;
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 500;
}

.lab2-client-since {
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.lab2-client-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity .13s;
}

body.lab2-clients-page #client-table tbody tr:hover .lab2-client-row-actions {
  opacity: 1;
}

.lab2-client-row-action {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--slate-500) !important;
  text-decoration: none !important;
  transition: background .13s, color .13s;
}

.lab2-client-row-action:hover {
  background: var(--slate-200);
  color: var(--slate-800) !important;
}

body.lab2-clients-page .lab2-client-list-panel .datatable-tools {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 10px 24px !important;
  border-top: 1px solid var(--slate-200) !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  z-index: 1 !important;
}

body.lab2-clients-page .lab2-client-list-panel .datatable-tools > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.lab2-clients-page .lab2-client-list-panel .datatable-tools > [class*="col-"]:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.lab2-clients-page .lab2-client-list-panel .datatable-tools > [class*="col-"]:last-child {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body.lab2-clients-page .lab2-client-list-panel .table-bottom-left,
body.lab2-clients-page .lab2-client-list-panel .dataTables_info,
body.lab2-clients-page .lab2-client-list-panel .dt-info {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--slate-400) !important;
  font-size: 11px !important;
}

body.lab2-clients-page .lab2-client-list-panel .table-bottom-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.lab2-clients-page .lab2-client-list-panel .dataTables_length,
body.lab2-clients-page .lab2-client-list-panel .dataTables_paginate,
body.lab2-clients-page .lab2-client-list-panel .dt-length,
body.lab2-clients-page .lab2-client-list-panel .dt-paging {
  padding: 0 !important;
  margin: 0 !important;
}

body.lab2-clients-page .lab2-client-list-panel .dataTables_length label,
body.lab2-clients-page .lab2-client-list-panel .dt-length label {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.lab2-clients-page .lab2-client-list-panel .dataTables_paginate ul.pagination,
body.lab2-clients-page .lab2-client-list-panel .dt-paging ul.pagination {
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

body.lab2-clients-page.compact-view-active #compact-details-page.lab2-client-detail-pane {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  border-left: 0 !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0;
  transition: flex-basis .24s cubic-bezier(.4,0,.2,1), width .24s cubic-bezier(.4,0,.2,1), max-width .24s cubic-bezier(.4,0,.2,1), opacity .16s ease;
}

body.lab2-clients-page.compact-view-active #compact-details-page.lab2-client-detail-pane.is-open {
  flex: 0 0 clamp(500px, 34vw, 560px) !important;
  width: clamp(500px, 34vw, 560px) !important;
  min-width: clamp(500px, 34vw, 560px) !important;
  max-width: clamp(500px, 34vw, 560px) !important;
  border-left: 1px solid var(--slate-200) !important;
  opacity: 1;
}

.lab2-client-placeholder {
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--slate-400);
  text-align: center;
  padding: 24px;
}

.lab2-client-placeholder-icon,
.lab2-client-placeholder-icon svg {
  width: 34px !important;
  height: 34px !important;
  color: var(--slate-300) !important;
}

.lab2-client-placeholder p {
  margin: 0;
  color: var(--slate-400);
  font-size: 13px;
  font-weight: 600;
}

.lab2-client-detail-view {
  height: 100% !important;
  min-height: 0 !important;
  background: #fff !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.lab2-client-detail-view > .container-fluid,
.lab2-client-detail-view > .container-fluid > .row,
.lab2-client-detail-view > .container-fluid > .row > .col-md-12 {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lab2-client-detail-view > .container-fluid > .row > .col-md-12 {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.lab2-clients-page #compact-details-page .details-view-top-button {
  display: none !important;
}

.lab2-client-detail-view .page-title.no-bg {
  flex: 0 0 auto;
  display: block !important;
  padding: 18px 24px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
}

.lab2-client-detail-close {
  width: 28px;
  height: 28px;
  margin-left: auto;
  margin-bottom: 12px;
  border: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--slate-500);
  transition: background .13s, color .13s;
}

.lab2-client-detail-close:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}

.lab2-client-detail-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
}

.lab2-client-detail-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.lab2-client-detail-hero-body {
  min-width: 0;
}

.lab2-client-detail-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lab2-client-detail-view .page-title.no-bg h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--slate-900) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

.lab2-client-detail-view #star-mark {
  flex: 0 0 auto;
  display: inline-flex;
}

.lab2-client-detail-view #star-mark a {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-400) !important;
}

.lab2-client-detail-view #star-mark a:hover {
  background: var(--slate-100);
  color: var(--lab2-red) !important;
}

.lab2-client-lead-help {
  color: var(--slate-400);
}

.lab2-client-detail-company {
  margin-top: 2px;
  color: var(--slate-500);
  font-size: 13px;
  font-weight: 500;
}

.lab2-client-detail-status {
  margin-top: 6px;
}

.lab2-client-detail-view #client-details-tabs {
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

.lab2-client-detail-view #client-details-tabs::-webkit-scrollbar {
  display: none;
}

.lab2-client-detail-view #client-details-tabs li > a,
.lab2-client-detail-view #client-details-tabs .nav-link {
  padding: 9px 0 !important;
  margin-right: 20px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--slate-500) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.lab2-client-detail-view #client-details-tabs li > a:hover,
.lab2-client-detail-view #client-details-tabs .nav-link:hover {
  color: var(--slate-700) !important;
}

.lab2-client-detail-view #client-details-tabs li > a.active,
.lab2-client-detail-view #client-details-tabs .nav-link.active {
  color: var(--lab2-red) !important;
  border-bottom-color: var(--lab2-red) !important;
}

.lab2-client-detail-view > .container-fluid > .row > .col-md-12 > .tab-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background: #fff !important;
  padding: 20px 24px !important;
}

.lab2-client-detail-view .tab-content .card,
.lab2-client-detail-view .tab-content .card-body,
.lab2-client-detail-view .tab-content .card-header {
  border-radius: var(--radius-md) !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .details-view-wrapper {
  display: block !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .details-view-left-section,
body.lab2-clients-page #compact-details-page .lab2-client-detail-view .details-view-right-section {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .details-view-right-section {
  margin-top: 16px !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .details-view-wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .details-view-wrapper [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .card {
  border: 1px solid var(--slate-200) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 14px !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .card-header {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--slate-200) !important;
  background: #fff !important;
  color: var(--slate-900) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.lab2-clients-page #compact-details-page .lab2-client-detail-view .card-body {
  padding: 14px !important;
}

.lab2-client-detail-footer {
  flex: 0 0 auto;
  padding: 14px 24px;
  border-top: 1px solid var(--slate-200);
  background: #fff;
  display: flex;
  gap: 8px;
}

.lab2-client-detail-footer .btn {
  min-height: 34px !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.lab2-client-detail-footer .btn-primary {
  flex: 1 1 auto;
}

.lab2-client-delete-btn {
  color: #dc3545 !important;
  border-color: rgba(220,53,69,.25) !important;
}

.lab2-client-delete-btn:hover {
  background: rgba(220,53,69,.06) !important;
  border-color: #dc3545 !important;
}

@media (max-width: 1180px) {
  body.lab2-clients-page.compact-view-active #compact-details-page.lab2-client-detail-pane.is-open {
    flex-basis: 440px !important;
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
  }

  .lab2-client-search {
    width: 190px;
  }

  body.lab2-clients-page #client-table thead th,
  body.lab2-clients-page #client-table tbody td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 900px) {
  body.lab2-clients-page .page-container,
  body.lab2-clients-page div.overflow-auto.page-container,
  body.lab2-clients-page .scrollable-page.main-scrollable-page,
  .lab2-clients-module-page,
  .lab2-clients-list-view {
    height: auto !important;
    min-height: calc(100vh - 65px) !important;
    overflow: auto !important;
  }

  .lab2-clients-split-wrap {
    flex-direction: column !important;
    overflow: visible !important;
  }

  body.lab2-clients-page.compact-view-active .lab2-client-list-panel {
    height: auto !important;
    min-height: 48vh !important;
    overflow: visible !important;
  }

  body.lab2-clients-page.compact-view-active #compact-details-page.lab2-client-detail-pane.is-open {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 460px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--slate-200) !important;
  }

  .lab2-client-page-header {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lab2-client-header-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .lab2-client-search {
    width: 100%;
  }

  .lab2-client-filter-bar {
    padding: 0 16px;
  }

  body.lab2-clients-page .lab2-client-list-panel .filter-section-container {
    padding: 10px 16px !important;
  }

  .lab2-client-detail-view > .container-fluid > .row > .col-md-12 > .tab-content {
    max-height: none !important;
  }
}

/* ── Header da view de detalhe do cliente ── */
.clients-view-button + .clearfix .page-title.no-bg h1,
.page-title.no-bg h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-title.no-bg h1 i,
.page-title.no-bg h1 svg {
  color: var(--text-tertiary) !important;
}

/* ── Abas com scroll horizontal (detalhe do cliente) ── */
.nav.nav-tabs.scrollable-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav.nav-tabs.scrollable-tabs::-webkit-scrollbar {
  display: none;
}

.nav.nav-tabs.scrollable-tabs .nav-link,
.nav.nav-tabs.scrollable-tabs li > a {
  white-space: nowrap;
  color: var(--text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

.nav.nav-tabs.scrollable-tabs .nav-link:hover,
.nav.nav-tabs.scrollable-tabs li > a:hover {
  color: var(--text-primary) !important;
  border-bottom-color: transparent !important;
}

.nav.nav-tabs.scrollable-tabs .nav-link.active,
.nav.nav-tabs.scrollable-tabs li > a.active {
  color: var(--lab2-red) !important;
  border-bottom-color: transparent !important;
  font-weight: 600 !important;
}

/* ── Info widgets da overview do cliente ── */
.client-info-widget,
.info-widget {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
}

.client-info-widget .widget-title,
.info-widget .widget-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary) !important;
  margin-bottom: 8px;
}

/* Botão voltar (back button) */
a.dark.float-start[href*="clients"] {
  color: var(--text-secondary) !important;
  font-size: 13px;
  text-decoration: none !important;
}

a.dark.float-start[href*="clients"]:hover {
  color: var(--lab2-red) !important;
}

/* ─── 19b-ii. MÓDULO LEADS ──────────────────────────────────────────────────── */

/* ── Vista lista ── */
.leads-list-view ul.nav.nav-tabs.title {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Vista kanban ── */
.leads-kanban-view {
  background: var(--slate-50);
}

/* Container de colunas kanban */
#kanban-container.kanban-container {
  padding: 20px 16px;
  gap: 14px;
  display: flex !important;
}

/* Coluna individual */
.kanban-col {
  background: var(--slate-100) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  min-width: 300px !important;
  max-width: 300px !important;
  flex-shrink: 0;
}

/* Cabeçalho da coluna (título + contagem) */
.kanban-col-title {
  position: relative;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  min-height: 66px;
  padding: 12px 126px 12px 14px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--surface) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  /* border-bottom inline já vem do PHP com a cor do status */
}

#kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title {
  display: flex;
  align-items: center;
  text-align: left;
}

#kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .status-title {
  float: none !important;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.35;
}

#kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .collapse-kanban-column {
  position: absolute;
  top: 50%;
  right: 90px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--slate-700);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), background var(--transition);
}

#kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title:hover .collapse-kanban-column {
  opacity: 1;
  pointer-events: auto;
}

#kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .kanban-item-count {
  position: absolute;
  top: 50%;
  right: 42px;
  transform: translateY(-50%);
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

#kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .kanban-col-add-btn {
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

#kanban-container .kanban-col.kanban-col-collapsed {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  flex: 0 0 56px !important;
  align-self: flex-start;
  margin: 0 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

#kanban-container .kanban-col.kanban-col-collapsed .kanban-col-title {
  width: 56px !important;
  min-width: 56px !important;
  height: 232px !important;
  min-height: 0 !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: center;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

#kanban-container .kanban-col.kanban-col-collapsed .kanban-col-title .status-title {
  float: none !important;
  display: block;
  max-height: 142px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

#kanban-container .kanban-col.kanban-col-collapsed .kanban-col-title .kanban-item-count {
  position: static !important;
  transform: none !important;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  writing-mode: horizontal-tb !important;
}

#kanban-container .kanban-col.kanban-col-collapsed .collapse-kanban-column,
#kanban-container .kanban-col.kanban-col-collapsed .kanban-col-add-btn,
#kanban-container .kanban-col.kanban-col-collapsed .kanban-input,
#kanban-container .kanban-col.kanban-col-collapsed .kanban-item-list {
  display: none !important;
}

body.tasks-page .all-tasks-kanban-view {
  background: #f1f5f9;
}

body.lab2-tasks-kanban-view .page-container,
body.lab2-tasks-kanban-view div.overflow-auto.page-container {
  height: calc(100vh - 65px) !important;
  overflow: hidden !important;
}

body.lab2-tasks-kanban-view .scrollable-page.main-scrollable-page {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}

body.lab2-tasks-kanban-view #page-content.all-tasks-kanban-view {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.lab2-tasks-kanban-view #page-content.all-tasks-kanban-view > ul.nav.title {
  flex: 0 0 auto;
}

body.tasks-page .all-tasks-kanban-view > .card {
  background: #f1f5f9 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.lab2-tasks-kanban-view #page-content.all-tasks-kanban-view > .card {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.tasks-page .all-tasks-kanban-view #js-kanban-filter-container {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-subtle);
}

body.lab2-tasks-kanban-view #js-kanban-filter-container {
  flex: 0 0 auto;
}

body.lab2-tasks-kanban-view #load-kanban {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

body.tasks-page #kanban-wrapper {
  background: #f1f5f9;
  min-height: 360px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.lab2-tasks-kanban-view #kanban-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

body.tasks-page #kanban-container.kanban-container {
  box-sizing: border-box;
  height: 100%;
  padding: 22px 18px 22px;
  gap: 16px;
  align-items: flex-start;
  background: #f1f5f9 !important;
  border: 0 !important;
  min-height: 0;
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) {
  width: 304px !important;
  min-width: 304px !important;
  max-width: 304px !important;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f1f5f9 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title {
  min-height: 58px;
  margin: 0 !important;
  padding: 14px 88px 12px 14px !important;
  background: var(--surface) !important;
  border-bottom: 0 !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--slate-700) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: none;
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .status-title {
  line-height: 1.35;
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .collapse-kanban-column {
  right: 76px;
  color: var(--slate-400);
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .kanban-item-count {
  right: 44px;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--slate-400);
  font-size: 12px;
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-col-title .kanban-col-add-btn {
  right: 12px;
  color: var(--slate-400);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed):hover .kanban-col-title .kanban-col-add-btn {
  opacity: 1;
}

body.tasks-page #kanban-container .kanban-col:not(.kanban-col-collapsed) .kanban-item-list {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  padding: 8px !important;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.tasks-page #kanban-container .kanban-col .kanban-item-list .kanban-item {
  position: relative;
  flex: 0 0 auto;
  width: 100% !important;
  min-height: 0;
  margin: 0 !important;
  padding: 11px 12px 10px 16px !important;
  display: block !important;
  overflow: hidden;
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  color: var(--slate-600) !important;
  cursor: grab !important;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

body.tasks-page #kanban-container .kanban-col .kanban-item-list .kanban-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  display: block;
  background: var(--slate-400);
}

body.tasks-page #kanban-container .kanban-col .kanban-item-list .kanban-item::after {
  display: none;
}

body.tasks-page #kanban-container .kanban-1 .kanban-item::before,
body.tasks-page #kanban-container .kanban-7 .kanban-item::before {
  background: var(--slate-500);
}

body.tasks-page #kanban-container .kanban-2 .kanban-item::before {
  background: #3b82f6;
}

body.tasks-page #kanban-container .kanban-4 .kanban-item::before,
body.tasks-page #kanban-container .kanban-5 .kanban-item::before,
body.tasks-page #kanban-container .kanban-6 .kanban-item::before {
  background: var(--color-warning);
}

body.tasks-page #kanban-container .kanban-3 .kanban-item::before {
  background: var(--color-success);
}

body.tasks-page #kanban-container .kanban-col .kanban-item-list .kanban-item:hover,
body.tasks-page #kanban-container .kanban-col .kanban-item-list .kanban-item:active,
body.tasks-page #kanban-container .kanban-col .kanban-item-list .kanban-item:focus {
  background: var(--surface) !important;
  border-color: var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--slate-700) !important;
  text-decoration: none;
  transform: translateY(-2px);
}

body.tasks-page #kanban-container .kanban-item .avatar {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  margin: 0 7px 0 0 !important;
}

body.tasks-page #kanban-container .kanban-item .avatar img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
}

body.tasks-page #kanban-container .kanban-item strong {
  color: var(--slate-800);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

body.tasks-page #kanban-container .kanban-item > .clearfix:first-of-type {
  clear: both;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 7px;
  color: var(--slate-400);
}

body.tasks-page #kanban-container .kanban-item > .clearfix:first-of-type > div {
  float: none !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--slate-400);
}

body.tasks-page #kanban-container .kanban-item > .clearfix.mt5.text-truncate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0 7px !important;
  color: var(--slate-500);
  font-size: 12px;
  line-height: 1.35;
}

body.tasks-page #kanban-container .kanban-item .text-off,
body.tasks-page #kanban-container .kanban-item svg.text-off {
  color: var(--slate-400) !important;
}

body.tasks-page #kanban-container .kanban-item .meta {
  float: none !important;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 8px 4px 0 7px !important;
}

body.tasks-page #kanban-container .kanban-item .sub-task-icon.priority-badge {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

body.tasks-page #kanban-container .kanban-item .badge {
  border-radius: var(--radius-pill) !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1;
}

body.tasks-page #kanban-container .kanban-add-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 8px 8px;
  border-radius: var(--radius-md);
  color: var(--slate-400);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background var(--transition), color var(--transition);
}

body.tasks-page #kanban-container .kanban-add-card-link:hover {
  background: var(--slate-200);
  color: var(--slate-600);
}

body.tasks-page #kanban-container .kanban-col.kanban-col-collapsed .kanban-add-card-link {
  display: none !important;
}

/* Lista de itens da coluna */
.kanban-item-list {
  padding: 8px !important;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card de lead no kanban */
.lead-kanban-item.kanban-item,
span.lead-kanban-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  display: block !important;
  cursor: grab !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
  box-shadow: var(--shadow-sm);
}

.lead-kanban-item.kanban-item:hover,
span.lead-kanban-item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Nome da empresa no card */
.lead-kanban-item a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.lead-kanban-item a:hover {
  color: var(--lab2-red) !important;
}

/* Ícones meta (contatos, eventos, etc.) */
.lead-kanban-item .text-off {
  color: var(--slate-400) !important;
}

/* Avatar no card */
.lead-kanban-item .avatar img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* Input para adicionar lead inline na coluna */
.kanban-input.general-form input.form-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Filtros do kanban */
#kanban-filters {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* ─── 19b. MÓDULO TAREFAS ───────────────────────────────────────────────────── */

/* Header da página (nav-tabs com título + botões) */
.all-tasks-view ul.nav.nav-tabs.title {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.all-tasks-view ul.nav.nav-tabs.title .title-tab h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

/* Barra de chips de filtro rápido */
#task-quick-chips {
  background: var(--slate-50) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 16px !important;
}

/* Label "Filtros:" */
#task-quick-chips > span:first-child {
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Chips inativos */
.quick-chip.btn-default,
.quick-chip.btn.btn-xs.btn-default {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-full) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: background var(--transition), border-color var(--transition), color var(--transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}

.quick-chip.btn-default:hover,
.quick-chip.btn.btn-xs.btn-default:hover {
  background: var(--lab2-red-dim) !important;
  border-color: rgba(255,46,77,.25) !important;
  color: var(--lab2-red) !important;
}

/* Chip ativo — tinted em vez de sólido (diferencia dos botões de ação primária) */
.quick-chip.btn-primary,
.quick-chip.btn.btn-xs.btn-primary {
  background: var(--lab2-red-dim) !important;
  border: 1px solid rgba(255,46,77,.35) !important;
  color: var(--lab2-red) !important;
  border-radius: var(--radius-full) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}

/* Link "Limpar" — NÃO sobrescrever display (controlado por JS via fadeIn/fadeOut) */
#task-chips-clear {
  color: var(--lab2-red) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  opacity: .8;
  align-items: center;
  gap: 3px;
  text-decoration: none !important;
}

#task-chips-clear:hover {
  opacity: 1;
}

/* Border colorida à esquerda das linhas (cor do status) */
td.list-status-border {
  border-left-width: 3px !important;
  border-left-style: solid !important;
}

/* Badge de status clicável */
.badge.task-status-editable {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  border-radius: var(--radius-full) !important;
  padding: 3px 9px !important;
}

/* Labels de tarefa abaixo do título */
.dark + div[style*="margin-top:4px"],
.text-wrap + div[style*="margin-top:4px"] {
  margin-top: 5px !important;
}

/* ─── 20. LOGO NA SIDEBAR ESCURA ────────────────────────────────────────────── */

/*
 * O logo vem do banco (get_logo_url). Se for uma imagem escura ela some no fundo
 * dark. Este filtro inverte e clareia para exibição garantida em fundos escuros.
 * Descomente a linha filter se o logo da LAB2 for escuro/opaco.
 */
.sidebar .sidebar-brand img.dashboard-image {
  max-height: 36px;
  width: auto;
  object-fit: contain;
  /* filter: brightness(0) invert(1); */ /* ← ativar se logo escuro */
}

/* Área da brand (topo da sidebar) */
.sidebar .sidebar-brand.brand-logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 65px;
  text-decoration: none;
}

/* Mini-logo (sidebar recolhida) */
.sidebar .sidebar-brand.brand-logo-mini {
  display: none !important;
  align-items: center;
  justify-content: center;
  height: 65px;
}

/* Botão X de fechar sidebar no mobile */
.sidebar .sidebar-toggle-btn {
  color: var(--sidebar-link) !important;
  background: transparent;
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 10;
}

.sidebar .sidebar-toggle-btn:hover {
  color: #fff !important;
}

/* ─── 21. OVERFLOW WRAPPER (layout/index.php) ───────────────────────────────── */

/*
 * O wrapper real é .overflow-auto.page-container — a classe overflow-auto do
 * Bootstrap não precisa override, mas a margin-left precisa ser certeira.
 */
div.overflow-auto.page-container {
  margin-left: var(--sidebar-width) !important;
  transition: margin-left var(--transition);
}

body.sidebar-toggled div.overflow-auto.page-container {
  margin-left: var(--sidebar-collapsed-width) !important;
}

@media (max-width: 990px) {
  body.sidebar-toggled div.overflow-auto.page-container {
    margin-left: 0 !important;
  }
}

/* Área de conteúdo principal */
.scrollable-page.main-scrollable-page {
  min-height: calc(100vh - 65px);
  padding-top: 0;
}

/* ─── 22. MOBILE BOTTOM MENU ────────────────────────────────────────────────── */

nav.mobile-bottom-menu {
  background: var(--sidebar-bg) !important;
  border-top: 1px solid var(--sidebar-border) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.2) !important;
}

nav.mobile-bottom-menu .menu-item a,
nav.mobile-bottom-menu .menu-item {
  color: var(--sidebar-link) !important;
}

nav.mobile-bottom-menu .menu-item .icon,
nav.mobile-bottom-menu .menu-item svg,
nav.mobile-bottom-menu #mobile-function-button .icon,
nav.mobile-bottom-menu #mobile-function-button svg {
  color: var(--sidebar-link) !important;
  stroke: currentColor !important;
}

nav.mobile-bottom-menu .menu-item:hover .icon,
nav.mobile-bottom-menu .menu-item:hover svg,
nav.mobile-bottom-menu .menu-item.active .icon,
nav.mobile-bottom-menu .menu-item.active svg,
nav.mobile-bottom-menu .menu-item.focus .icon,
nav.mobile-bottom-menu .menu-item.focus svg,
nav.mobile-bottom-menu #mobile-function-button:hover .icon,
nav.mobile-bottom-menu #mobile-function-button:hover svg,
nav.mobile-bottom-menu #mobile-function-button.active .icon,
nav.mobile-bottom-menu #mobile-function-button.active svg,
nav.mobile-bottom-menu #mobile-function-button.focus .icon,
nav.mobile-bottom-menu #mobile-function-button.focus svg {
  color: var(--lab2-red) !important;
  stroke: currentColor !important;
}

nav.mobile-bottom-menu .menu-item a:hover,
nav.mobile-bottom-menu .menu-item a.active {
  color: var(--lab2-red) !important;
}

/* ─── 23. TOPBAR — AJUSTES FINOS ────────────────────────────────────────────── */

/* Altura do topbar alinhada com a sidebar-brand (65px) */
.navbar-custom,
nav.navbar-custom {
  height: 65px;
}

/* Ícones do topbar */
.navbar-custom .nav-link i,
.navbar-custom .nav-link svg,
#default-navbar .nav-link i,
#default-navbar .nav-link svg {
  color: var(--slate-500);
  transition: color var(--transition);
}

.navbar-custom .nav-link:hover i,
.navbar-custom .nav-link:hover svg,
#default-navbar .nav-link:hover i,
#default-navbar .nav-link:hover svg {
  color: var(--text-primary);
}

/* Badge de notificação no topbar */
#default-navbar .nav-link {
  position: relative;
}

#default-navbar .notification-badge-container {
  position: absolute;
  top: 13px;
  right: 8px;
  width: auto;
  height: auto;
  line-height: 1;
  background: transparent !important;
  pointer-events: none;
}

#default-navbar .notification-badge-container .badge.up {
  position: static !important;
  min-width: 16px;
  height: 16px;
  margin: 0 !important;
  padding: 0 4px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lab2-red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
}

/* Dropdown do usuário */
.user-dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.user-dropdown-menu .dropdown-item {
  font-size: 13.5px;
  color: var(--text-primary) !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm);
  margin: 1px 4px;
}

.user-dropdown-menu .dropdown-item:hover {
  background: var(--slate-100) !important;
}

.user-dropdown-menu .dropdown-divider {
  border-color: var(--border) !important;
  margin: 4px 0 !important;
}

/* Avatar no topbar */
#user-dropdown .avatar-xs {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden;
}

#user-dropdown .user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ─── 24. SUBMENU — DASH ICON ───────────────────────────────────────────────── */

/*
 * No left_menu.php, submenus usam data-feather='minus' (traço).
 * Substituímos visualmente por um ponto colorido via CSS.
 */
.sidebar-menu ul li a i[data-feather="minus"],
.sidebar-menu ul li a svg[data-icon="minus"],
.sidebar-menu ul li a svg[data-feather="minus"],
.sidebar-menu ul li a svg.feather-minus,
.sidebar-menu ul li a .feather-minus {
  display: none !important;
}

.sidebar-menu ul li a span {
  margin-left: 0 !important;
}

.sidebar-menu ul li a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-600);
  margin-right: 10px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.sidebar-menu ul li a:hover::before,
.sidebar-menu ul li.active > a::before {
  background: var(--lab2-red);
}

/* ─── 25. PRE-LOADER ─────────────────────────────────────────────────────────── */

#pre-loader .app-loader {
  background: var(--slate-50) !important;
}

#pre-loader .loading {
  border-top-color: var(--lab2-red) !important;
}

/* ─── 26. QUICK ADD DROPDOWN (topbar) ──────────────────────────────────────── */

#quick-add-dropdown,
.quick-add-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

#quick-add-dropdown .dropdown-item:hover,
.quick-add-menu .dropdown-item:hover {
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
}

/* ─── 27. SIDEBAR EXPAND/TOGGLE (JS classes) ───────────────────────────────── */

/* Seta de expand de submenu */
#sidebar-menu > li.expand > a::before,
.sidebar-menu > li.expand > a::before {
  content: none !important;
  display: none !important;
}

.sidebar-menu li.expand > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--sidebar-link);
  border-bottom: 1.5px solid var(--sidebar-link);
  transform: rotate(45deg);
  margin-left: auto;
  transition: transform var(--transition), border-color var(--transition);
}

.sidebar-menu li.expand.open > a::after {
  transform: rotate(-135deg);
  border-color: var(--sidebar-link-hover);
}

.sidebar-menu li.active.expand > a::after {
  border-color: rgba(255,255,255,.6);
}

/* ─── 28. PAGE TITLE / BREADCRUMB ───────────────────────────────────────────── */

.page-title h4,
.page-title h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-tertiary);
}

.breadcrumb-item a {
  color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
  color: var(--text-primary) !important;
}

/* ─── 29. TASKS — Cards KPI ─────────────────────────────────────────────────── */

.task-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.task-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.task-kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.task-kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-400);
  margin-bottom: 8px;
}

.task-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.5px;
  line-height: 1;
}

.task-kpi-value.kpi-warn    { color: var(--color-warning); }
.task-kpi-value.kpi-success { color: var(--color-success); }

.task-kpi-delta {
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 6px;
}
.task-kpi-delta.warn { color: var(--color-warning); }
.task-kpi-delta.up   { color: var(--color-success); }

@media (max-width: 900px) {
  .task-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .task-kpi-grid { grid-template-columns: 1fr; padding: 12px 12px 4px; }
}

/* ─── 30. TASKS — Coluna Prior. (ponto colorido) ────────────────────────────── */

.lab2-priority-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}

.all-tasks-view #task-table td.w50 {
  text-align: center !important;
}

/* ─── 31. TASKS — Fidelidade ao protótipo (Bloco 1 CSS) ────────────────────── */

/* 1. Cabeçalhos da tabela — uppercase, muted, menor */
.all-tasks-view #task-table thead th,
#task-table_wrapper thead th {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--slate-400) !important;
  background: var(--slate-50) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}

/* 2. Ocultar "+ Adicionar novo filtro" — não consta no protótipo */
.all-tasks-view .show-filter-form-button {
  display: none !important;
}

/* 3. Ocultar botões Excel e Imprimir — não constam no protótipo */
.all-tasks-view .buttons-excel,
.all-tasks-view .buttons-print {
  display: none !important;
}

/* 4. Responsável — mostrar somente avatar, sem nome */
.all-tasks-view #task-table td.min-w150 a {
  font-size: 0 !important;
  vertical-align: middle;
  display: inline-flex !important;
  align-items: center !important;
}
.all-tasks-view #task-table td.min-w150 a .avatar.avatar-xs {
  font-size: 13px !important;
  margin-right: 0 !important;
}

/* 5. Botões de ação — ícones compactos, visíveis só no hover da linha */
.all-tasks-view #task-table td.option a.edit,
.all-tasks-view #task-table td.option a.delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--slate-400) !important;
  background: transparent !important;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition) !important;
}
.all-tasks-view #task-table tbody tr:hover td.option a.edit,
.all-tasks-view #task-table tbody tr:hover td.option a.delete {
  opacity: 1;
}
.all-tasks-view #task-table td.option a.edit:hover,
.all-tasks-view #task-table td.option a.delete:hover {
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
}

/* 6. Tarefa concluída — título riscado */
.all-tasks-view #task-table tr:has(.checkbox-checked) td a.js-selection-id {
  text-decoration: line-through !important;
  color: var(--slate-400) !important;
  opacity: 0.75;
}

/* 7. Colaboradores — avatar-xs mais compacto (sem margem extra) */
.all-tasks-view #task-table td:has(.avatar.avatar-xs) .avatar.avatar-xs + .avatar.avatar-xs {
  margin-left: -6px;
}

/* 8. Padding do card da tabela — respira mais */
.all-tasks-view .card.border-top-0 {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* 9. Linha da tabela — hover sutil */
.all-tasks-view #task-table tbody tr {
  transition: background var(--transition) !important;
}
.all-tasks-view #task-table tbody tr:hover {
  background: var(--slate-50) !important;
}

/* ─── 31b. TASKS — Estrutura fiel ao protótipo LAB2 ───────────────────────── */

.all-tasks-view {
  padding: 24px !important;
}

.lab2-task-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  margin-bottom: 20px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.lab2-task-title-group {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.lab2-task-page-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.lab2-task-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  border: 0 !important;
  margin: 0;
  padding: 0;
}

.lab2-task-tabs li {
  list-style: none;
  margin: 0 !important;
}

.lab2-task-tabs li a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.lab2-task-tabs li a:hover {
  color: var(--text-primary) !important;
}

.lab2-task-tabs li a.active {
  color: var(--text-primary) !important;
  border-bottom-color: var(--text-primary) !important;
  font-weight: 600;
}

.lab2-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.lab2-task-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px !important;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
}

.lab2-task-content {
  min-width: 0;
}

.lab2-task-content .task-kpi-grid {
  padding: 0;
  margin-bottom: 20px;
  border-bottom: 0;
}

.lab2-task-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

.lab2-task-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lab2-task-table-card #task-table_wrapper .filter-section-container {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.lab2-task-table-card #task-table_wrapper .filter-section-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.lab2-task-table-card #task-table_wrapper input[type="search"] {
  height: 32px;
  min-width: 220px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: none !important;
}

.lab2-task-table-card #task-table_wrapper input[type="search"]:focus {
  border-color: rgba(255,46,77,.45) !important;
  box-shadow: 0 0 0 3px rgba(255,46,77,.08) !important;
}

.lab2-task-table-card #task-table {
  margin: 0 !important;
  border-collapse: collapse !important;
}

.lab2-task-table-card #task-table tbody td {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  color: var(--text-secondary);
  vertical-align: middle;
}

.all-tasks-view #task-table td a.js-selection-id {
  color: var(--text-primary) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.all-tasks-view #task-table td a.js-selection-id:hover {
  color: var(--text-primary) !important;
  text-decoration: underline;
}

.all-tasks-view #task-table td.list-status-border {
  border-left-width: 3px !important;
}

.all-tasks-view #task-table td a:not(.btn):not(.badge):not(.edit):not(.delete) {
  color: var(--slate-700);
  font-weight: 500;
}

.lab2-date-muted {
  color: var(--slate-500);
  font-weight: 500;
}

.lab2-date-time {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 500;
}

.lab2-deadline-expired {
  color: var(--color-danger);
  font-weight: 600;
}

.lab2-deadline-today {
  color: var(--color-warning);
  font-weight: 600;
}

.badge.task-status-editable {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  white-space: nowrap;
}

.lab2-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,.78);
}

.task-status-editable:hover .lab2-status-dot {
  animation: lab2-status-dot-pulse 1.8s ease-in-out infinite;
}

.app-popover.lab2-task-status-popover {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08) !important;
  overflow: visible !important;
  min-width: 190px !important;
  z-index: 10060 !important;
}

.app-popover.lab2-task-status-popover .app-popover-body {
  padding: 6px !important;
  max-height: var(--lab2-task-status-menu-max-height, min(320px, calc(100vh - 24px))) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
}

.app-popover.lab2-task-status-popover .app-popover-body::-webkit-scrollbar {
  width: 6px;
}

.app-popover.lab2-task-status-popover .app-popover-body::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-pill);
}

.app-popover.lab2-task-status-popover .dropdown-item.list-group-item {
  min-height: 38px;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  display: flex;
  align-items: center;
  color: var(--slate-600) !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  transition: background .12s ease, color .12s ease;
}

.app-popover.lab2-task-status-popover .dropdown-item.list-group-item:hover,
.app-popover.lab2-task-status-popover .dropdown-item.list-group-item:focus {
  background: var(--slate-100) !important;
  color: var(--slate-900) !important;
}

.app-popover.lab2-task-status-popover .dropdown-item.list-group-item.active {
  background: var(--slate-900) !important;
  color: #fff !important;
}

.app-popover.lab2-task-status-popover.lab2-popover-above .app-popover-arrow {
  top: auto !important;
  bottom: -6px !important;
  transform: rotate(45deg) !important;
}

.lab2-task-status-static {
  cursor: default !important;
}

@keyframes lab2-status-dot-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .5;
    transform: scale(1.35);
  }
}

@media (max-width: 1100px) {
  .lab2-task-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .lab2-task-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .all-tasks-view {
    padding: 14px !important;
  }

  .lab2-task-title-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .lab2-task-tabs {
    gap: 16px;
  }

  .lab2-task-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .lab2-task-table-card #task-table_wrapper input[type="search"] {
    min-width: 0;
    width: 100%;
  }
}

/* ─── 32. MODAL DE CRIAÇÃO/EDIÇÃO DE TAREFA ─────────────────────────────────── */

#ajaxModal.lab2-task-form-modal .modal-dialog,
#ajaxModal.lab2-task-form-modal .modal-dialog.modal-lg,
#ajaxModal.lab2-task-form-modal .modal-dialog.modal-xl,
#ajaxModal.lab2-task-form-modal .modal-dialog.modal-fluid {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: 640px !important;
  height: auto !important;
  max-height: calc(100vh - 48px);
  margin: 24px auto !important;
}

#ajaxModal.lab2-task-form-modal .modal-content {
  max-height: calc(100vh - 48px);
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  background: #fff;
}

#ajaxModal.lab2-task-form-modal .modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 18px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: #fff;
}

#ajaxModal.lab2-task-form-modal #ajaxModalTitle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.lab2-task-form-header-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--lab2-red-dim);
  color: var(--lab2-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lab2-task-form-header-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lab2-task-form-header-title {
  color: var(--slate-900);
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  letter-spacing: -.2px;
  line-height: 1.25 !important;
}

.lab2-task-form-header-subtitle {
  margin-top: 2px;
  color: var(--slate-400);
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

#ajaxModal.lab2-task-form-modal .btn-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  opacity: .6;
  transition: background-color var(--transition), opacity var(--transition);
}

#ajaxModal.lab2-task-form-modal .btn-close:hover {
  background-color: var(--slate-100);
  opacity: .9;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px !important;
  overflow-y: auto !important;
  background: #fff;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-body::-webkit-scrollbar {
  width: 4px;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-body::-webkit-scrollbar-thumb {
  background: var(--slate-200);
  border-radius: var(--radius-pill);
}

.lab2-task-form-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 0 !important;
}

.lab2-task-form-content > input[type="hidden"] {
  display: none;
}

.lab2-task-form-section-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--slate-400);
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .7px;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.lab2-task-form-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.lab2-task-field {
  margin: 0 !important;
  min-width: 0;
}

.lab2-task-field > .row {
  display: block !important;
  margin: 0 !important;
}

.lab2-task-field > .row > [class*="col-"],
.lab2-task-field-custom-fields .form-group > .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.lab2-task-field label,
.lab2-task-form-label,
.lab2-task-field-custom-fields label {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 0 5px !important;
  color: var(--slate-600) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.lab2-task-field .text-danger {
  color: var(--lab2-red) !important;
}

.lab2-task-title-meta {
  float: right;
  margin-top: -22px;
}

.lab2-task-title-meta .char-count {
  color: var(--slate-400);
  font-size: var(--text-xs) !important;
}

#ajaxModal.lab2-task-form-modal .form-control,
#ajaxModal.lab2-task-form-modal input.form-control,
#ajaxModal.lab2-task-form-modal textarea.form-control,
#ajaxModal.lab2-task-form-modal .select2-container .select2-choice,
#ajaxModal.lab2-task-form-modal .select2-container-multi .select2-choices {
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border: 1.5px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  color: var(--slate-800) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-md) !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#ajaxModal.lab2-task-form-modal .form-control:hover,
#ajaxModal.lab2-task-form-modal .select2-container .select2-choice:hover,
#ajaxModal.lab2-task-form-modal .select2-container-multi .select2-choices:hover {
  border-color: var(--border-default) !important;
}

#ajaxModal.lab2-task-form-modal .form-control:focus,
#ajaxModal.lab2-task-form-modal .select2-container-active .select2-choice,
#ajaxModal.lab2-task-form-modal .select2-container-active .select2-choices {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .10) !important;
}

#ajaxModal.lab2-task-form-modal #title {
  min-height: 48px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
}

#ajaxModal.lab2-task-form-modal #description {
  min-height: 92px !important;
  resize: vertical;
}

#ajaxModal.lab2-task-form-modal .tox-tinymce {
  min-height: 148px !important;
  border: 1.5px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  overflow: hidden;
}

#ajaxModal.lab2-task-form-modal .tox-tinymce:hover {
  border-color: var(--border-default) !important;
}

#ajaxModal.lab2-task-form-modal .tox.tox-tinymce.tox-edit-focus {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .10) !important;
}

#ajaxModal.lab2-task-form-modal .tox .tox-toolbar,
#ajaxModal.lab2-task-form-modal .tox .tox-toolbar__primary,
#ajaxModal.lab2-task-form-modal .tox .tox-toolbar__overflow {
  background: var(--slate-50) !important;
}

#ajaxModal.lab2-task-form-modal .select2-container {
  width: 100% !important;
}

#ajaxModal.lab2-task-form-modal .select2-container.form-control,
#ajaxModal.lab2-task-form-modal .select2-container-multi.form-control {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#ajaxModal.lab2-task-form-modal .select2-container .select2-choice {
  display: flex !important;
  align-items: center;
}

#ajaxModal.lab2-task-form-modal .select2-container .select2-choice .select2-arrow {
  border-left: 0 !important;
  background: transparent !important;
}

#ajaxModal.lab2-task-form-modal .select2-container-multi .select2-choices {
  height: auto !important;
  min-height: 40px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 9px !important;
}

#ajaxModal.lab2-task-form-modal .select2-container-multi .select2-choices .select2-search-choice {
  margin: 0 !important;
  padding: 3px 8px 3px 20px !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#ajaxModal.lab2-task-form-modal .help-block,
#ajaxModal.lab2-task-form-modal .field-error {
  margin-top: 5px;
  color: var(--color-danger) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
}

#ajaxModal.lab2-task-form-modal .has-error .form-control,
#ajaxModal.lab2-task-form-modal .has-error .select2-choice,
#ajaxModal.lab2-task-form-modal .has-error .select2-choices {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important;
}

#ajaxModal.lab2-task-form-modal .has-error .select2-container.form-control,
#ajaxModal.lab2-task-form-modal .has-error .select2-container-multi.form-control {
  border: 0 !important;
  box-shadow: none !important;
}

#ajaxModal.lab2-task-form-modal .has-error .select2-container.form-control .select2-choice,
#ajaxModal.lab2-task-form-modal .has-error .select2-container-multi.form-control .select2-choices {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important;
}

.lab2-task-field-title,
.lab2-task-field-description,
.lab2-task-field-assigned,
.lab2-task-field-collaborators,
.lab2-task-field-labels,
.lab2-task-field-recurring,
.lab2-task-recurring-fields,
.lab2-task-field-custom-fields,
.lab2-task-field-clone-option,
.lab2-task-field-attachments,
.lab2-task-context-option {
  grid-column: 1 / -1;
}

.lab2-task-field-title { order: 10; }
.lab2-task-field-description { order: 20; }
.lab2-task-form-section-classification { order: 30; }
.lab2-task-field-status { order: 31; }
.lab2-task-field-priority { order: 32; }
.lab2-task-form-section-context { order: 40; }
.lab2-task-field-context { order: 41; }
.lab2-task-context-option { order: 42; }
.lab2-task-field-points { order: 43; }
.lab2-task-field-milestone { order: 44; }
.lab2-task-form-section-people { order: 50; }
.lab2-task-field-assigned { order: 51; }
.lab2-task-field-collaborators { order: 52; }
.lab2-task-form-section-dates { order: 60; }
.lab2-task-field-start-date { order: 61; }
.lab2-task-field-deadline { order: 62; }
.lab2-task-field-labels { order: 70; }
.lab2-task-field-recurring { order: 80; }
.lab2-task-recurring-fields { order: 81; }
#next_recurring_date_container { order: 82; }
.lab2-task-field-custom-fields { order: 85; }
.lab2-task-field-clone-option { order: 86; }
.lab2-task-field-attachments { order: 90; }

#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring > .row {
  padding: 10px 12px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 42px;
  transition: border-color var(--transition), background var(--transition);
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring > .row:hover {
  border-color: var(--border-default);
  background: var(--slate-50);
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring.is-on > .row {
  border-color: rgba(255, 46, 77, .35);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--lab2-red-dim);
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring > .row label {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 1 auto;
  margin: 0 !important;
  color: var(--slate-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-recurring-toggle-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

#ajaxModal.lab2-task-form-modal .lab2-task-recurring-toggle-label > svg {
  color: var(--slate-400);
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring.is-on .lab2-task-recurring-toggle-label,
#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring.is-on .lab2-task-recurring-toggle-label > svg {
  color: var(--lab2-red) !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-recurring .col-md-9 {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin-left: auto;
  flex: 0 0 auto;
}

#ajaxModal.lab2-task-form-modal #recurring {
  position: relative;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 34px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--slate-200) !important;
  background-image: none !important;
  margin: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--transition);
}

#ajaxModal.lab2-task-form-modal #recurring::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
  transition: transform var(--transition);
}

#ajaxModal.lab2-task-form-modal #recurring:checked {
  background: var(--lab2-red) !important;
}

#ajaxModal.lab2-task-form-modal #recurring:checked::after {
  transform: translateX(16px);
}

#ajaxModal.lab2-task-form-modal #recurring_fields:not(.hide) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  margin-top: -14px !important;
  border: 1.5px solid rgba(255, 46, 77, .20);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--lab2-red-dim);
}

#ajaxModal.lab2-task-form-modal #recurring_fields .form-group {
  margin: 0 !important;
  min-width: 0;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:nth-child(2) {
  position: relative;
}

#ajaxModal.lab2-task-form-modal #recurring_fields .row {
  display: grid !important;
  margin: 0 !important;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(34px, auto) 40px;
  gap: 6px 8px;
  align-items: center;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:first-child > .row {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: minmax(34px, auto) 40px;
  gap: 6px 10px;
  align-items: center;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group > .row > label,
#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:first-child > .row > label {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  margin: 0 !important;
  align-self: start;
  align-items: flex-start;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:first-child > .row > .col-md-4,
#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:first-child > .row > .col-md-5,
#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:nth-child(2) > .row > .col-md-4 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  grid-row: 2;
  align-self: stretch;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:nth-child(2) > .row > .col-md-5 {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  width: auto !important;
  max-width: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:first-child > .row > .col-md-4 {
  grid-column: 1;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:first-child > .row > .col-md-5 {
  grid-column: 2;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:nth-child(2) > .row > .col-md-4 {
  grid-column: 1 / -1;
}

#ajaxModal.lab2-task-form-modal #recurring_fields > .form-group:nth-child(2) > .row > .col-md-5 .help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
}

#ajaxModal.lab2-task-form-modal #recurring_fields .select2-container.form-control,
#ajaxModal.lab2-task-form-modal #recurring_fields .select2-container .select2-choice,
#ajaxModal.lab2-task-form-modal #recurring_fields .form-control {
  max-width: 100% !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-attachments .me-auto {
  width: 100%;
  min-height: 112px;
  margin: 0 !important;
  padding: 20px;
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-attachments .me-auto:hover {
  border-color: var(--lab2-red);
  background: var(--lab2-red-dim);
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-attachments .upload-file-button {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--lab2-red) !important;
  box-shadow: none !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-field-attachments .upload-file-button::after {
  content: "Arraste arquivos aqui ou clique para selecionar";
  display: block;
  margin-top: 6px;
  color: var(--slate-500);
  font-size: var(--text-sm);
  font-weight: 500;
}

#ajaxModal.lab2-task-form-modal .post-file-previews {
  margin-top: 10px;
  border-color: var(--border-subtle) !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 16px 24px !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: var(--slate-50);
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-link {
  padding: 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--slate-400) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-link:hover {
  color: var(--slate-700) !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer #save-and-show-button {
  margin-left: auto !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-default,
#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-primary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-default {
  border: 1.5px solid var(--border-subtle) !important;
  background: transparent !important;
  color: var(--slate-600) !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-default:hover {
  background: var(--slate-100) !important;
  color: var(--slate-800) !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-primary {
  border: 0 !important;
  background: var(--lab2-red) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(255, 46, 77, .25) !important;
}

#ajaxModal.lab2-task-form-modal .lab2-task-form-footer .btn-primary:hover {
  background: var(--lab2-red-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 46, 77, .35) !important;
}

@media (max-width: 640px) {
  #ajaxModal.lab2-task-form-modal .modal-dialog,
  #ajaxModal.lab2-task-form-modal .modal-dialog.modal-lg,
  #ajaxModal.lab2-task-form-modal .modal-dialog.modal-xl,
  #ajaxModal.lab2-task-form-modal .modal-dialog.modal-fluid {
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    max-height: calc(100vh - 24px);
  }

  #ajaxModal.lab2-task-form-modal .modal-content {
    max-height: calc(100vh - 24px);
  }

  #ajaxModal.lab2-task-form-modal .modal-header,
  #ajaxModal.lab2-task-form-modal .lab2-task-form-body,
  #ajaxModal.lab2-task-form-modal .lab2-task-form-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .lab2-task-form-content,
  #ajaxModal.lab2-task-form-modal #recurring_fields:not(.hide) {
    grid-template-columns: 1fr;
  }

  .lab2-task-field {
    grid-column: 1 / -1;
  }

  #ajaxModal.lab2-task-form-modal .lab2-task-form-footer {
    flex-wrap: wrap;
  }

  #ajaxModal.lab2-task-form-modal .lab2-task-form-footer #save-and-show-button {
    margin-left: 0 !important;
  }
}

/* ─── 33. MODAL DE DETALHE DE TAREFA ────────────────────────────────────────── */

#ajaxModal.lab2-task-modal .modal-dialog,
#ajaxModal.lab2-task-modal .modal-dialog.modal-lg,
#ajaxModal.lab2-task-modal .modal-dialog.modal-xl,
#ajaxModal.lab2-task-modal .modal-dialog.modal-fluid {
  width: min(900px, calc(100vw - 48px)) !important;
  max-width: min(900px, calc(100vw - 48px)) !important;
  height: min(90vh, calc(100vh - 48px)) !important;
  margin: 24px auto !important;
  display: flex;
  align-items: stretch;
}

#ajaxModal.lab2-task-modal .modal-content {
  height: 100%;
  max-height: none;
  min-height: 0;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

#ajaxModal.lab2-task-modal #ajaxModalContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#ajaxModal.lab2-task-modal .modal-header {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--surface-card);
  display: flex;
  align-items: flex-start !important;
  gap: 12px;
  flex-shrink: 0;
}

#ajaxModal.lab2-task-modal #ajaxModalTitle {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--slate-900) !important;
  line-height: 1.25 !important;
}

#ajaxModal.lab2-task-modal .btn-close {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: var(--radius-md);
  opacity: .55;
  transition: background-color var(--transition), opacity var(--transition);
}

#ajaxModal.lab2-task-modal .btn-close:hover {
  background-color: var(--slate-100);
  opacity: .85;
}

.task-modal-id {
  flex-shrink: 0;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--slate-400);
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}

.task-modal-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.task-modal-title {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: -2px -4px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  color: var(--slate-900);
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 1.25 !important;
  transition: background var(--transition);
}

.task-modal-title:hover {
  background: var(--slate-50);
}

.task-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.task-modal-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.task-modal-meta-chip svg {
  width: 11px;
  height: 11px;
  opacity: .7;
}

.task-modal-meta-chip.is-danger {
  color: var(--color-danger);
}

.task-modal-meta-chip.is-warning {
  color: var(--color-warning);
}

.task-modal-link {
  width: 32px;
  height: 32px;
  margin: -4px 4px 0 0;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  transition: background var(--transition), color var(--transition);
}

.task-modal-link:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}

#ajaxModal.lab2-task-modal .modal-body.task-view-modal-body {
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.lab2-task-modal-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
}

#ajaxModal.lab2-task-modal,
#ajaxModal.lab2-task-modal .modal-content,
.lab2-task-modal-layout {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: 1.5 !important;
  color: var(--slate-800);
}

#ajaxModal.lab2-task-modal .modal-content p,
#ajaxModal.lab2-task-modal .modal-content li,
#ajaxModal.lab2-task-modal .modal-content td,
#ajaxModal.lab2-task-modal .modal-content th,
#ajaxModal.lab2-task-modal .modal-content label,
#ajaxModal.lab2-task-modal .modal-content input,
#ajaxModal.lab2-task-modal .modal-content textarea,
#ajaxModal.lab2-task-modal .modal-content select,
#ajaxModal.lab2-task-modal .modal-content button,
#ajaxModal.lab2-task-modal .modal-content .btn,
.lab2-task-modal-layout p,
.lab2-task-modal-layout li,
.lab2-task-modal-layout td,
.lab2-task-modal-layout th,
.lab2-task-modal-layout label,
.lab2-task-modal-layout input,
.lab2-task-modal-layout textarea,
.lab2-task-modal-layout select,
.lab2-task-modal-layout button,
.lab2-task-modal-layout .btn {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: 1.5 !important;
}

.lab2-task-modal-main {
  order: 1;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.lab2-task-modal-main::-webkit-scrollbar,
.lab2-task-modal-sidebar::-webkit-scrollbar {
  width: 3px;
}

.lab2-task-modal-main::-webkit-scrollbar-thumb,
.lab2-task-modal-sidebar::-webkit-scrollbar-thumb {
  background: var(--slate-200);
  border-radius: var(--radius-pill);
}

.lab2-task-modal-main > .clearfix > .container-fluid {
  padding: 0;
}

.lab2-task-modal-main > .clearfix > .container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lab2-task-modal-main > .clearfix > .container-fluid > .row > [class*="col-"] {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0 !important;
}

.lab2-task-modal-sidebar {
  order: 2;
  width: 252px;
  flex: 0 0 252px;
  min-height: 0;
  overflow-y: auto;
  background: var(--slate-50) !important;
  border-left: 1px solid var(--border-subtle) !important;
}

.lab2-task-sidebar-inner {
  padding: 20px 18px;
}

.lab2-task-meta-list {
  display: flex;
  flex-direction: column;
}

.lab2-task-meta-list > * {
  order: 90;
}

.lab2-task-meta-list > .col-md-12,
.lab2-task-meta-list > #task-reminders,
.lab2-task-meta-list > #pinned-comment {
  width: 100%;
  margin-bottom: 13px !important;
  padding-left: 0;
  padding-right: 0;
}

.lab2-task-meta-list hr {
  border-color: var(--border-subtle) !important;
  opacity: 1;
  margin: 4px 0 12px !important;
}

.lab2-task-meta-list p {
  margin-bottom: 12px !important;
  color: var(--slate-400) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

.lab2-task-meta-list [style*="font-size:10px"] {
  margin-bottom: 5px !important;
  color: var(--slate-400) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
}

.lab2-task-meta-list a:not(.btn),
.lab2-task-meta-list .text-off {
  color: var(--slate-700);
  font-size: var(--text-sm) !important;
  font-weight: 500;
  text-decoration: none;
}

.lab2-task-meta-list .text-off {
  color: var(--slate-400) !important;
  font-weight: 400;
  font-style: normal;
}

.lab2-task-meta-list .badge,
.lab2-task-meta-list .mt0.badge {
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.status-badge-wrap {
  order: 10;
  display: flex;
  justify-content: center;
  margin-bottom: 18px !important;
}

.task-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 18px !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.task-status-pill:hover {
  opacity: .88;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.task-status-pill a,
.task-status-pill a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

.task-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  flex-shrink: 0;
  animation: task-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes task-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: .4; transform: scale(1.4); }
}

.lab2-task-assignee-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin: -5px -8px !important;
  border-bottom: 0 !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.lab2-task-assignee-row:hover {
  background: var(--border-subtle);
}

.lab2-task-assignee-row .avatar-sm,
.lab2-task-assignee-row .avatar-sm img {
  width: 22px;
  height: 22px;
}

.lab2-task-assignee-info {
  min-width: 0;
  flex: 1;
}

.lab2-task-assignee-info > div a {
  color: var(--slate-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

.lab2-task-assignee-info p {
  margin: 6px 0 0 !important;
}

.lab2-task-meta-field {
  order: 90;
}

.lab2-task-meta-section-dates { order: 20; }
.lab2-task-meta-field-start { order: 21; }
.lab2-task-meta-field-deadline { order: 22; }
.lab2-task-meta-section-details { order: 30; }
.lab2-task-meta-field-assignee { order: 31; }
.lab2-task-meta-field-priority { order: 32; }
.lab2-task-meta-field-project { order: 33; }
.lab2-task-meta-field-points { order: 34; }
.lab2-task-meta-field-milestone { order: 35; }
.lab2-task-meta-section-labels { order: 40; }
.lab2-task-meta-field-labels { order: 41; }
.lab2-task-meta-section-collaborators { order: 50; }
.lab2-task-meta-field-collaborators { order: 51; }
.lab2-task-meta-field-progress { order: 52; }
#ajaxModal.lab2-task-modal .lab2-task-meta-list > .col-md-12:not(.lab2-task-meta-field):not(.lab2-task-meta-section),
#ajaxModal.lab2-task-modal #pinned-comment,
#ajaxModal.lab2-task-modal #task-reminders {
  order: 90 !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-section-dates,
#ajaxModal.lab2-task-modal .lab2-task-meta-field-milestone,
#ajaxModal.lab2-task-modal .lab2-task-meta-field-progress {
  display: none !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-section-details p {
  display: none !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-section-details {
  margin-top: 10px !important;
  margin-bottom: 16px !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-section-details hr {
  margin: 0 !important;
}

.lab2-task-meta-field-label {
  margin-bottom: 5px !important;
  color: var(--slate-400) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin: -5px -8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--slate-700);
  font-size: var(--text-sm) !important;
  font-weight: 500;
  transition: background var(--transition);
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress):hover {
  background: var(--border-subtle);
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) svg,
#ajaxModal.lab2-task-modal .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) i {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--slate-400);
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-labels > div:last-child {
  align-items: flex-start;
  min-height: 0;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-labels > div:first-child {
  display: none !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-labels > div:last-child:hover {
  background: transparent;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-priority .priority-badge {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  margin-right: 3px !important;
  vertical-align: middle;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-priority .priority-badge svg,
#ajaxModal.lab2-task-modal .lab2-task-meta-field-priority .priority-badge i {
  display: none !important;
}

.lab2-section-label,
.task-meta-label {
  margin-bottom: 10px;
  color: var(--slate-400);
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .7px;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.lab2-modal-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
}

.lab2-modal-section:first-of-type,
.lab2-description-section {
  border-top: 0;
  padding-top: 0;
}

.task-description-box {
  min-height: 80px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--slate-50);
  color: var(--slate-600);
  font-size: var(--text-md) !important;
  line-height: 1.65 !important;
  word-break: break-word;
  cursor: text;
  transition: border-color var(--transition), background var(--transition);
}

.task-description-box:hover {
  border-color: var(--border-default);
  background: #fff;
}

.task-description-box p:last-child {
  margin-bottom: 0;
}

.task-description-box p {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.lab2-task-context-line {
  color: var(--slate-700);
  font-size: var(--text-md) !important;
  line-height: 1.5 !important;
}

#ajaxModal.lab2-task-modal .lab2-task-context-line {
  display: none !important;
}

.lab2-task-context-line strong {
  color: var(--slate-900);
  font-weight: 700;
}

.lab2-task-context-line a,
.lab2-task-context-line strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

.lab2-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.lab2-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--slate-900);
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.lab2-section-title strong {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.lab2-section-title span {
  color: var(--slate-700);
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
}

.lab2-sortable-toggle .form-check,
.lab2-sortable-toggle .form-check.form-switch,
.lab2-sortable-toggle .form-check.form-check-reverse,
.lab2-sortable-toggle .form-check.form-switch.form-check-reverse {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.lab2-sortable-toggle .form-check-label {
  order: 1;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--slate-600);
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .7px;
  line-height: 1.2 !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.lab2-sortable-toggle .form-check-input {
  order: 2;
  position: static !important;
  float: none !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 20px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  border-color: var(--border-default);
  cursor: pointer;
  box-shadow: none;
}

.lab2-sortable-toggle .form-check-input:focus {
  border-color: var(--border-default);
  box-shadow: 0 0 0 3px rgba(203, 213, 225, .35);
}

.lab2-sortable-toggle .form-check-input:checked {
  background-color: var(--lab2-red);
  border-color: var(--lab2-red);
}

.lab2-sortable-toggle .form-check-input:checked:focus {
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .14);
}

.lab2-checklist-section .form-control,
.lab2-subtask-section .form-control,
#dependency-area .form-control {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--slate-700);
  font-size: var(--text-md) !important;
  line-height: 1.5 !important;
  box-shadow: none;
}

.lab2-checklist-section .form-control::placeholder,
.lab2-subtask-section .form-control::placeholder {
  color: var(--slate-400);
}

.lab2-task-modal-layout .checklist-items,
.lab2-task-modal-layout .sub-tasks-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lab2-task-modal-layout .checklist-items .list-group-item,
.lab2-task-modal-layout .sub-tasks-container .list-group-item,
.lab2-task-modal-layout .checklist-items .checklist-item-row,
.lab2-task-modal-layout .sub-tasks-container .sub-task-row {
  border: 0 !important;
  border-radius: var(--radius-md);
  padding: 8px 10px !important;
  transition: background var(--transition);
}

.lab2-task-modal-layout .checklist-items .list-group-item:hover,
.lab2-task-modal-layout .sub-tasks-container .list-group-item:hover,
.lab2-task-modal-layout .checklist-items .checklist-item-row:hover,
.lab2-task-modal-layout .sub-tasks-container .sub-task-row:hover {
  background: var(--slate-50);
}

#ajaxModal.lab2-task-modal .checkbox-checked {
  border-color: var(--color-success) !important;
  background-color: var(--color-success) !important;
}

.lab2-dependency-action .btn {
  padding: 7px 16px;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: var(--slate-50) !important;
  color: var(--slate-900) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500;
  line-height: 1.4 !important;
}

#dependency-area {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
}

#dependency-area .list-group-item {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--slate-50);
}

.lab2-comment-section {
  padding-bottom: 8px;
}

.lab2-task-activity-container {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.lab2-task-activity-container .comment-form-container {
  gap: 10px;
  border-bottom: 0 !important;
  padding-bottom: 0;
}

.lab2-task-activity-container .post-dropzone {
  margin-bottom: 0 !important;
}

.lab2-task-activity-container textarea.form-control,
.lab2-task-activity-container .tox-tinymce {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.lab2-task-activity-container textarea.form-control {
  color: var(--slate-700) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
}

.lab2-task-activity-container .tox .tox-toolbar,
.lab2-task-activity-container .tox .tox-toolbar__primary,
.lab2-task-activity-container .tox .tox-statusbar {
  background: var(--slate-50) !important;
}

.lab2-task-activity-container .card-footer {
  margin-top: 8px;
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.lab2-activity-logs {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.lab2-activity-logs .d-flex.border-bottom {
  gap: 10px;
  margin-bottom: 16px !important;
  border-bottom-color: var(--border-subtle) !important;
}

.lab2-activity-logs .card-title {
  margin-bottom: 4px;
  color: var(--slate-600);
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
}

.lab2-activity-logs p {
  color: var(--slate-600);
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
}

#ajaxModal.lab2-task-modal .modal-footer {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap;
  gap: 8px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--surface-card);
  overflow: visible !important;
  transform: none !important;
}

#ajaxModal.lab2-task-modal .modal-footer .btn {
  position: static !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 7px 16px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  color: var(--slate-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600;
  line-height: 1.4 !important;
  white-space: nowrap;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

#ajaxModal.lab2-task-modal .modal-footer .btn svg,
#ajaxModal.lab2-task-modal .modal-footer .btn i,
#ajaxModal.lab2-task-modal .modal-footer .btn .icon,
#ajaxModal.lab2-task-modal .modal-footer .btn .icon-16 {
  flex: 0 0 auto;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  margin: 0 !important;
  stroke-width: 2 !important;
}

#ajaxModal.lab2-task-modal .modal-footer .btn:hover {
  background: var(--slate-50) !important;
  border-color: var(--border-default) !important;
  color: var(--slate-900) !important;
}

#ajaxModal.lab2-task-modal .modal-footer .delete-task {
  margin-left: auto !important;
  border-color: transparent !important;
  color: var(--color-danger) !important;
}

#ajaxModal.lab2-task-modal .modal-footer .delete-task:hover {
  background: #fff1f2 !important;
  border-color: transparent !important;
}

/* ─── 33b. PÁGINA DE DETALHE DE TAREFA ───────────────────────────────────── */

#page-content.lab2-task-detail-view {
  padding: 24px !important;
  background: var(--slate-50);
}

.lab2-task-detail-shell {
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-sans) !important;
}

.lab2-task-detail-header {
  min-height: 112px;
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.lab2-task-detail-title-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.lab2-task-detail-actions {
  flex: 0 0 auto;
  margin-top: 2px;
}

.lab2-task-detail-action-menu {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 7px 13px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: var(--slate-50) !important;
  color: var(--slate-800) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

.lab2-task-detail-action-menu:hover,
.lab2-task-detail-action-menu:focus {
  background: #fff !important;
  border-color: var(--border-default) !important;
  color: var(--slate-900) !important;
}

.lab2-task-detail-actions .dropdown-menu {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lab2-task-detail-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--slate-700);
  font-size: var(--text-sm) !important;
  font-weight: 500;
}

.lab2-task-detail-actions .dropdown-item.delete-task {
  color: var(--color-danger);
}

.lab2-task-detail-body {
  min-height: 0;
}

.lab2-task-detail-view .lab2-task-modal-layout {
  height: auto;
  min-height: 650px;
  overflow: visible;
  align-items: stretch;
}

.lab2-task-detail-view .lab2-task-modal-main {
  padding: 28px 34px 34px;
  overflow: visible;
}

.lab2-task-detail-view .lab2-task-modal-sidebar {
  width: 340px;
  flex-basis: 340px;
  overflow: visible;
}

.lab2-task-detail-view .lab2-task-sidebar-inner {
  padding: 24px 22px;
}

.lab2-task-detail-view .lab2-description-section {
  margin-top: 0 !important;
}

.lab2-task-detail-view .task-description-box {
  min-height: 90px;
}

.lab2-task-detail-view .lab2-task-context-line,
.lab2-task-detail-view .lab2-task-meta-section-dates,
.lab2-task-detail-view .lab2-task-meta-field-milestone,
.lab2-task-detail-view .lab2-task-meta-field-progress {
  display: none !important;
}

.lab2-task-detail-view .lab2-task-meta-section-details {
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

.lab2-task-detail-view .lab2-task-meta-section-details p {
  display: none !important;
}

.lab2-task-detail-view .lab2-task-meta-section-details hr {
  margin: 0 !important;
}

.lab2-task-detail-view .lab2-task-meta-list > .col-md-12:not(.lab2-task-meta-field):not(.lab2-task-meta-section),
.lab2-task-detail-view #pinned-comment,
.lab2-task-detail-view #task-reminders {
  order: 90 !important;
}

.lab2-task-detail-view .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin: -5px -8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--slate-700);
  font-size: var(--text-sm) !important;
  font-weight: 500;
  transition: background var(--transition);
}

.lab2-task-detail-view .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress):hover {
  background: var(--border-subtle);
}

.lab2-task-detail-view .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lab2-task-detail-view .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) svg,
.lab2-task-detail-view .lab2-task-meta-field > div:not(.lab2-task-meta-field-label):not(.lab2-task-assignee-row):not(.progress) i {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--slate-500);
}

.lab2-task-detail-view .lab2-task-meta-field-labels > div:first-child {
  display: none !important;
}

.lab2-task-detail-view .lab2-task-meta-field-labels > div:last-child {
  align-items: flex-start;
  min-height: 0;
}

.lab2-task-detail-view .lab2-task-meta-field-labels > div:last-child:hover {
  background: transparent;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-start a[data-act-type="start_time"] .text-off,
.lab2-task-detail-view .lab2-task-meta-field-start a[data-act-type="start_time"] .text-off {
  display: none !important;
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-start .lab2-meta-value-icon,
.lab2-task-detail-view .lab2-task-meta-field-start .lab2-meta-value-icon {
  color: var(--slate-600);
}

#ajaxModal.lab2-task-modal .lab2-task-meta-field-deadline .lab2-meta-value-icon,
.lab2-task-detail-view .lab2-task-meta-field-deadline .lab2-meta-value-icon {
  color: var(--color-danger);
}

.lab2-task-detail-view .lab2-task-meta-field-priority .priority-badge {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  margin-right: 3px !important;
  vertical-align: middle;
}

.lab2-task-detail-view .lab2-task-meta-field-priority .priority-badge svg,
.lab2-task-detail-view .lab2-task-meta-field-priority .priority-badge i {
  display: none !important;
}

@media (max-width: 900px) {
  #ajaxModal.lab2-task-modal .modal-dialog,
  #ajaxModal.lab2-task-modal .modal-dialog.modal-lg,
  #ajaxModal.lab2-task-modal .modal-dialog.modal-xl,
  #ajaxModal.lab2-task-modal .modal-dialog.modal-fluid {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    margin: 12px auto !important;
  }

  #ajaxModal.lab2-task-modal .modal-content {
    height: 100%;
    max-height: none;
  }

  .lab2-task-modal-layout {
    flex-direction: column;
    overflow-y: auto;
  }

  .lab2-task-modal-main,
  .lab2-task-modal-sidebar {
    width: 100%;
    flex: 0 0 auto;
    overflow: visible;
  }

  .lab2-task-modal-sidebar {
    border-left: 0 !important;
    border-top: 1px solid var(--border-subtle) !important;
    order: 2;
  }

  .lab2-task-modal-main {
    order: 1;
  }

  #page-content.lab2-task-detail-view {
    padding: 14px !important;
  }

  .lab2-task-detail-header {
    min-height: 0;
    flex-direction: column;
    padding: 18px;
  }

  .lab2-task-detail-actions {
    align-self: flex-end;
  }

  .lab2-task-detail-view .lab2-task-modal-layout {
    min-height: 0;
  }

  .lab2-task-detail-view .lab2-task-modal-sidebar {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 640px) {
  #ajaxModal.lab2-task-modal .modal-header {
    padding: 16px !important;
  }

  #ajaxModal.lab2-task-modal #ajaxModalTitle {
    gap: 8px !important;
  }

  .task-modal-title {
    font-size: 18px !important;
  }

  .lab2-task-modal-main,
  .lab2-task-sidebar-inner {
    padding: 16px;
  }

  .lab2-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .lab2-sortable-toggle {
    align-self: flex-end;
  }

  #ajaxModal.lab2-task-modal .modal-footer {
    flex-wrap: wrap;
    min-height: 0;
    padding: 12px 16px !important;
  }

  #ajaxModal.lab2-task-modal .modal-footer .delete-task {
    margin-left: 0 !important;
  }

  .lab2-task-detail-title-group {
    gap: 8px;
  }

  .lab2-task-detail-actions {
    align-self: stretch;
  }

  .lab2-task-detail-action-menu {
    width: 100%;
    justify-content: center;
  }
}

/* ─── XX. MÓDULO SIGNIN ──────────────────────────────────────────────────── */

/* Oculta elementos do layout interno na página de login */
body.lab2-signin-page .sidebar,
body.lab2-signin-page .navbar-custom,
body.lab2-signin-page #default-navbar,
body.lab2-signin-page .page-container {
  display: none !important;
}

body.lab2-signin-page {
  background: var(--sidebar-bg);
  overflow: hidden;
}

/* Shell de dois painéis */
.lab2-signin-shell {
  display: flex;
  width: 100vw;
  height: 100vh;
}

/* ── Painel esquerdo: branding ── */
.lab2-signin-brand {
  flex: 0 0 42%;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}

.lab2-signin-brand::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -160px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(255,46,77,.16) 0%, transparent 68%);
  pointer-events: none;
}

.lab2-signin-brand::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255,46,77,.07) 0%, transparent 70%);
  pointer-events: none;
}

.lab2-signin-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 320px;
}

.lab2-signin-logo-mark {
  display: block;
  margin-bottom: 32px;
}

.lab2-signin-logo-img {
  max-width: 200px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lab2-signin-agency-name {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.lab2-signin-tagline {
  font-size: 15px;
  color: var(--slate-400);
  line-height: 1.65;
  margin-bottom: 40px;
}

.lab2-signin-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lab2-signin-brand-tags span {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* ── Painel direito: formulário ── */
.lab2-signin-form-panel {
  flex: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
}

.lab2-signin-form-wrap {
  width: 100%;
  max-width: 380px;
}

/* Cabeçalho do formulário */
.lab2-signin-header {
  margin-bottom: 36px;
}

.lab2-signin-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.lab2-signin-subtitle {
  font-size: 14px;
  color: var(--slate-400);
  margin: 0;
}

/* Campos */
.lab2-signin-field {
  margin-bottom: 22px;
}

.lab2-signin-field label {
  display: block;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-700) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 7px !important;
}

.lab2-signin-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.lab2-signin-field-header label {
  margin-bottom: 0 !important;
}

.lab2-signin-forgot {
  font-size: 12px !important;
  color: var(--lab2-red) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.lab2-signin-forgot:hover {
  text-decoration: underline !important;
  color: var(--lab2-red-hover) !important;
}

.lab2-signin-input {
  display: block !important;
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 8px !important;
  color: var(--slate-800) !important;
  background: var(--slate-50) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
}

.lab2-signin-input:focus {
  border-color: var(--lab2-red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,46,77,.09) !important;
}

.lab2-signin-input::placeholder {
  color: var(--slate-300) !important;
}

/* Botão */
.lab2-signin-btn {
  display: block !important;
  width: 100% !important;
  padding: 13px !important;
  background: var(--lab2-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .18s, transform .1s !important;
  margin-top: 8px !important;
}

.lab2-signin-btn:hover {
  background: var(--lab2-red-hover) !important;
}

.lab2-signin-btn:active {
  transform: scale(0.99);
}

/* Alerta de erro */
.lab2-signin-error {
  margin-bottom: 20px;
  font-size: 13px;
  border-radius: 8px !important;
  background: rgba(255,46,77,.07) !important;
  color: var(--lab2-red) !important;
  border: 1px solid rgba(255,46,77,.20) !important;
  padding: 10px 14px !important;
}

.lab2-signin-error i,
.lab2-signin-error svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

/* Rodapé */
.lab2-signin-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--slate-400);
}

/* ── Reset/nova senha — formulários secundários com estilo consistente ── */
.lab2-signin-form-wrap .card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

.lab2-signin-form-wrap .card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 28px !important;
  text-align: left !important;
}

.lab2-signin-form-wrap .card-header h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

.lab2-signin-form-wrap .card-body {
  padding: 0 !important;
}

.lab2-signin-form-wrap .form-group {
  margin-bottom: 22px !important;
}

.lab2-signin-form-wrap .form-group label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-700) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 7px !important;
}

.lab2-signin-form-wrap .form-group .form-control {
  padding: 12px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 8px !important;
  background: var(--slate-50) !important;
  color: var(--slate-800) !important;
  box-shadow: none !important;
}

.lab2-signin-form-wrap .form-group .form-control:focus {
  border-color: var(--lab2-red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,46,77,.09) !important;
}

.lab2-signin-form-wrap .btn.btn-primary.btn-lg,
.lab2-signin-form-wrap .btn.btn-primary.btn-block {
  padding: 13px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.lab2-signin-form-wrap .mt5 {
  margin-top: 16px !important;
  text-align: center;
  font-size: 13px;
}

/* ── Mobile: oculta painel de branding ── */
@media (max-width: 767px) {
  body.lab2-signin-page {
    overflow: auto;
  }

  .lab2-signin-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .lab2-signin-brand {
    display: none !important;
  }

  .lab2-signin-form-panel {
    padding: 40px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FILE MANAGER — LAB2 Theme
   Scope: body:has(#file-manager-sidebar)
   DOM: .box > #file-manager-sidebar | #file-manager-items-box | #file-details-box
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell: sobrescreve display:table do .box ─────────────────────── */
body:has(#file-manager-sidebar) .page-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

body:has(#file-manager-sidebar) .box {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  overflow: hidden !important;
  border-spacing: 0 !important;
  background: var(--slate-100) !important;
  min-height: calc(100vh - 68px) !important;
}

body:has(#file-manager-sidebar) .box > .box-content {
  display: flex !important;
  flex-direction: column !important;
  vertical-align: unset !important;
}

/* ── Painel esquerdo: árvore de pastas ────────────────────────────── */
#file-manager-sidebar {
  flex: 0 0 252px !important;
  width: 252px !important;
  min-width: 252px !important;
  max-width: 252px !important;
  background: #fff !important;
  border-right: 1px solid var(--slate-200) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Caixa de busca no sidebar */
#file-manager-sidebar .search-box {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--slate-100) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  margin: 12px 12px 10px !important;
  transition: border-color .15s, background .15s !important;
}

#file-manager-sidebar .search-box:focus-within {
  border-color: var(--lab2-red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .08) !important;
}

#file-manager-sidebar .search-box .form-control {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--slate-700) !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}

#file-manager-sidebar .search-box .form-control::placeholder {
  color: var(--slate-400) !important;
}

/* Lista de grupos no sidebar (root folder, etc.) */
#file-manager-sidebar > ul.list-group {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

#file-manager-sidebar > ul.list-group:nth-child(2) {
  border-bottom: 1px solid var(--slate-100) !important;
  padding-bottom: 6px !important;
  margin-bottom: 4px !important;
}

#file-manager-sidebar .list-group-item {
  display: flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--slate-600) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .1s, color .1s !important;
  text-decoration: none !important;
  margin-bottom: 1px !important;
}

#file-manager-sidebar .list-group-item:hover {
  background: var(--slate-50) !important;
  color: var(--slate-800) !important;
}

#file-manager-sidebar .list-group-item .icon-16 {
  width: 14px !important;
  height: 14px !important;
  color: var(--slate-400) !important;
  flex-shrink: 0 !important;
}

/* Rótulo "Favoritos" */
#file-manager-sidebar > label.p15 {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--slate-400) !important;
  padding: 8px 18px 4px !important;
  margin-bottom: 0 !important;
  display: block !important;
}

/* Lista de favoritos — rola se necessário */
#favourite-folders {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 8px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#favourite-folders .list-group-item {
  display: flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--slate-600) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .1s, color .1s !important;
  text-decoration: none !important;
  margin-bottom: 1px !important;
}

#favourite-folders .list-group-item:hover {
  background: var(--slate-50) !important;
  color: var(--slate-800) !important;
}

#favourite-folders .list-group-item .icon-16 {
  width: 14px !important;
  height: 14px !important;
  color: var(--slate-400) !important;
  flex-shrink: 0 !important;
}

/* ── Painel central: conteúdo dos arquivos ────────────────────────── */
#file-manager-items-box {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--slate-50) !important;
  padding: 0 !important;
}

#file-manager-container-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Barra de título (breadcrumb + botões) */
#file-manger-title-bar {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 20px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--slate-200) !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  gap: 10px !important;
  margin: 0 !important;
}

#file-manger-title-bar h1 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  line-height: 1 !important;
}

#file-manger-title-bar h1 .breadcrumb-folder-item {
  color: var(--slate-500) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

#file-manger-title-bar h1 .breadcrumb-folder-item:hover {
  color: var(--lab2-red) !important;
}

#file-manger-title-bar h1 .icon-18 {
  width: 16px !important;
  height: 16px !important;
}

#file-manger-title-bar .title-button-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#file-manger-title-bar .title-button-group .btn {
  font-size: 12px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
}

/* Área de conteúdo: rolagem */
.file-manager-container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px !important;
  background: var(--slate-50) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

#file-manager-window-area {
  min-height: 200px !important;
}

/* ── Grid de arquivos e pastas ─────────────────────────────────────── */
.files-and-folders-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-content: start !important;
}

/* ── Card de pasta (horizontal, ocupa 2 colunas) ──────────────────── */
.files-and-folders-list .folder-item[data-type="folder"] {
  grid-column: span 2 !important;
  background: #fff !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}

.files-and-folders-list .folder-item[data-type="folder"]:hover {
  border-color: var(--slate-300) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  transform: translateY(-1px) !important;
}

/* Conteúdo interno da pasta */
.folder-item[data-type="folder"] .folder-thumb-area {
  padding: 14px !important;
  display: block !important;
}

.folder-item[data-type="folder"] .folder-thumb-area .d-flex {
  align-items: center !important;
  flex-direction: row !important;
}

.folder-item[data-type="folder"] .folder-thumb-area .icon-wrapper {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 8px !important;
  background: rgba(255, 46, 77, .08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
}

.folder-item[data-type="folder"] .icon-wrapper .bold-folder-icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--lab2-red) !important;
}

.folder-item[data-type="folder"] .folder-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-700) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.folder-item[data-type="folder"] .folder-info {
  font-size: 11px !important;
  color: var(--slate-400) !important;
  display: block !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
}

/* ── Card de arquivo (vertical) ───────────────────────────────────── */
.files-and-folders-list .folder-item[data-type="file"] {
  background: #fff !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
  display: flex !important;
  flex-direction: column !important;
}

.files-and-folders-list .folder-item[data-type="file"]:hover {
  border-color: var(--slate-300) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  transform: translateY(-1px) !important;
}

/* Área de thumbnail do arquivo */
.folder-item[data-type="file"] .file-thumb-area {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.folder-item[data-type="file"] .file-thumb-area > .d-flex {
  flex-direction: column !important;
  flex: 1 !important;
  align-items: stretch !important;
}

/* Ícone: área superior (thumbnail) */
.folder-item[data-type="file"] .file-thumb-area .icon-wrapper {
  height: 88px !important;
  width: 100% !important;
  background: var(--slate-50) !important;
  border-bottom: 1px solid var(--slate-200) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.folder-item[data-type="file"] .icon-wrapper .bold-file-icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--slate-300) !important;
}

/* Informações do arquivo (nome + tamanho) */
.folder-item[data-type="file"] .file-thumb-area .w-100 {
  padding: 10px 12px !important;
  min-width: 0 !important;
}

.folder-item[data-type="file"] .text-break {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.folder-item[data-type="file"] .text-break a {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--slate-700) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.folder-item[data-type="file"] .text-break a:hover {
  color: var(--lab2-red) !important;
}

.folder-item[data-type="file"] .file-size {
  font-size: 10px !important;
  color: var(--slate-400) !important;
  display: block !important;
  margin-top: 3px !important;
  font-weight: 400 !important;
}

/* ── Botão de 3 pontos (menu de contexto) ─────────────────────────── */
.folder-item {
  position: relative !important;
}

.file-manager-more-menu {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--slate-200) !important;
  color: var(--slate-500) !important;
  opacity: 0 !important;
  transition: opacity .15s, background .13s !important;
  cursor: pointer !important;
  backdrop-filter: blur(4px) !important;
  z-index: 2 !important;
}

.folder-item:hover .file-manager-more-menu {
  opacity: 1 !important;
}

.file-manager-more-menu:hover {
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
  border-color: var(--slate-300) !important;
}

.file-manager-more-menu .icon-18 {
  width: 14px !important;
  height: 14px !important;
}

/* Estado selecionado */
.folder-item .folder-item-content.selected-folder-item,
.folder-item .folder-item-content.focus {
  background: rgba(255, 46, 77, .04) !important;
}

.folder-item[data-type="folder"].selected-folder-item,
.folder-item[data-type="file"].selected-folder-item {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .10) !important;
}

/* ── Painel direito: detalhes do arquivo ──────────────────────────── */
#file-details-box {
  flex: 0 0 280px !important;
  width: 280px !important;
  background: #fff !important;
  border-left: 1px solid var(--slate-200) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: flex-basis .25s cubic-bezier(.4, 0, .2, 1),
              width .25s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Ocultar painel (usa .hide do CRM) — ID tem precedência sobre .hide */
#file-details-box.hide {
  display: block !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  border-left: none !important;
  min-width: 0 !important;
}

.sticky-details-section {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  min-width: 280px !important;
}

.sticky-details-section .card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

.sticky-details-section .page-title {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--slate-200) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.sticky-details-section .page-title h1 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--slate-800) !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1 !important;
}

.sticky-details-section .card-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Placeholder: nenhum arquivo selecionado */
.no-file-selected {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 200px !important;
  gap: 10px !important;
  color: var(--slate-400) !important;
}

.no-file-selected .files-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.no-file-selected .no-file-selected-icon {
  width: 48px !important;
  height: 48px !important;
  color: var(--slate-300) !important;
}

.no-file-selected .no-file-selected-text {
  font-size: 12px !important;
  color: var(--slate-400) !important;
  text-align: center !important;
}

/* Área de preview no painel de detalhes */
.file-manager-preview-section {
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  background: var(--slate-100) !important;
  min-height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Ícones padrão: icon-40 nos cards ────────────────────────────── */
.files-and-folders-list .icon-40 {
  width: 20px !important;
  height: 20px !important;
  min-width: unset !important;
  min-height: unset !important;
}

.folder-item[data-type="file"] .icon-wrapper .icon-40 {
  width: 32px !important;
  height: 32px !important;
}

/* ── Remove .w300 que conflita com o painel de detalhes ──────────── */
body:has(#file-manager-sidebar) .box-content.w300 {
  width: auto !important;
}

/* ── Sticky removido (flexbox gerencia posicionamento) ───────────── */
body:has(#file-manager-sidebar) .sticky-details-section.stick {
  position: static !important;
  width: auto !important;
}

/* ── Menu de contexto: estilos LAB2 ──────────────────────────────── */
#folder-context-menu.dropdown-menu {
  border-radius: 8px !important;
  border: 1px solid var(--slate-200) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10) !important;
  padding: 4px !important;
  min-width: 180px !important;
}

#folder-context-menu .dropdown-item {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  color: var(--slate-700) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

#folder-context-menu .dropdown-item:hover {
  background: var(--slate-50) !important;
  color: var(--slate-900) !important;
}

#folder-context-menu .dropdown-item .icon-16 {
  width: 14px !important;
  height: 14px !important;
  color: var(--slate-400) !important;
  flex-shrink: 0 !important;
}

/* ── Responsivo mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #file-manager-sidebar {
    display: none !important;
  }

  .files-and-folders-list {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }

  .files-and-folders-list .folder-item[data-type="folder"] {
    grid-column: span 2 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS — LAB2 Theme
   Scope: body:has(#settings-left-menu-accordion)
   DOM: .row > .col-sm-3 (nav) | .col-sm-9 (content)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell: dois painéis lado a lado ─────────────────────────────── */
body:has(#settings-left-menu-accordion) #page-content {
  padding: 0 !important;
  margin: 0 !important;
}

body:has(#settings-left-menu-accordion) #page-content > .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  min-height: calc(100vh - 68px) !important;
}

/* ── Coluna esquerda: nav de configurações ───────────────────────── */
body:has(#settings-left-menu-accordion) #page-content > .row > .col-sm-3 {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  padding: 0 !important;
  background: #fff !important;
  border-right: 1px solid var(--slate-200) !important;
  overflow-y: auto !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important;
  height: calc(100vh - 68px) !important;
}

/* ── Coluna direita: conteúdo ────────────────────────────────────── */
body:has(#settings-left-menu-accordion) #page-content > .row > .col-sm-9 {
  flex: 1 !important;
  max-width: none !important;
  width: auto !important;
  padding: 28px 36px !important;
  overflow-y: auto !important;
  background: var(--slate-100) !important;
  min-height: calc(100vh - 68px) !important;
}

/* ── Nav accordion: container ────────────────────────────────────── */
#settings-left-menu-accordion {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Cabeçalho virtual via pseudo-elemento */
#settings-left-menu-accordion::before {
  content: "Configurações";
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  padding: 20px 16px 16px !important;
  border-bottom: 1px solid var(--slate-200) !important;
  margin-bottom: 6px !important;
  font-family: var(--font) !important;
}

/* ── Grupo de configurações: cabeçalho colapsável ────────────────── */
.settings-anchor {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--slate-400) !important;
  padding: 10px 16px 4px !important;
  cursor: default !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  user-select: none !important;
}

/* Remove o chevron do collapse */
.settings-anchor::after {
  display: none !important;
}

/* ── Itens da nav de settings ─────────────────────────────────────── */
.help-catagory {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
  background: transparent !important;
}

.help-catagory .list-group-item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--slate-600) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
  text-decoration: none !important;
  margin-bottom: 1px !important;
  position: relative !important;
}

/* Usa ID para especificidade (1,x,0) e bater o border-left: !important do CRM */
#settings-left-menu-accordion .help-catagory .list-group-item:hover,
#settings-left-menu-accordion .help-catagory .list-group-item.active {
  border-left: none !important;
  text-indent: 0 !important;
}

#settings-left-menu-accordion .help-catagory .list-group-item:hover {
  background: var(--slate-100) !important;
  color: var(--slate-800) !important;
}

#settings-left-menu-accordion .help-catagory .list-group-item.active {
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
  font-weight: 600 !important;
}

#settings-left-menu-accordion .help-catagory .list-group-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 2px !important;
  background: var(--lab2-red) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* Grupos colapsados: não mudar o comportamento, só esconder a borda */
.collapse {
  border: none !important;
}

/* ── Card de conteúdo das configurações ──────────────────────────── */
body:has(#settings-left-menu-accordion) .col-sm-9 > .card,
body:has(#settings-left-menu-accordion) .col-sm-9 > .card.no-border {
  border: 1px solid var(--slate-200) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: #fff !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

/* ── Tabs internas do card (sub-abas de cada seção) ──────────────── */
body:has(#settings-left-menu-accordion) .nav.nav-tabs.title.scrollable-tabs {
  background: #fff !important;
  border-bottom: 1px solid var(--slate-200) !important;
  padding: 0 20px !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}

body:has(#settings-left-menu-accordion) .nav.nav-tabs.title.scrollable-tabs .title-tab h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

body:has(#settings-left-menu-accordion) .nav.nav-tabs.title.scrollable-tabs > li > a {
  display: block !important;
  padding: 14px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--slate-500) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color .13s !important;
  white-space: nowrap !important;
}

body:has(#settings-left-menu-accordion) .nav.nav-tabs.title.scrollable-tabs > li > a:hover {
  color: var(--slate-800) !important;
}

body:has(#settings-left-menu-accordion) .nav.nav-tabs.title.scrollable-tabs > li > a.active,
body:has(#settings-left-menu-accordion) .nav.nav-tabs.title.scrollable-tabs > li.active > a {
  color: var(--lab2-red) !important;
  font-weight: 600 !important;
}


/* ── Card body: área de formulário ───────────────────────────────── */
body:has(#settings-left-menu-accordion) .card-body.post-dropzone,
body:has(#settings-left-menu-accordion) .tab-pane .card-body {
  padding: 24px !important;
}

/* ── Formulários horizontais (label col-md-3 + input col-md-9) ───── */
body:has(#settings-left-menu-accordion) .form-group {
  margin-bottom: 20px !important;
  padding: 0 !important;
  border: none !important;
}

body:has(#settings-left-menu-accordion) .form-group:last-child {
  margin-bottom: 0 !important;
}

body:has(#settings-left-menu-accordion) .form-group > .row > label,
body:has(#settings-left-menu-accordion) .form-group .col-md-3 {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--slate-500) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding-top: 10px !important;
  line-height: 1.3 !important;
}

body:has(#settings-left-menu-accordion) .form-group .form-control,
body:has(#settings-left-menu-accordion) .form-group select.form-control,
body:has(#settings-left-menu-accordion) .form-group textarea.form-control {
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: var(--slate-700) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

body:has(#settings-left-menu-accordion) .form-group .form-control:focus,
body:has(#settings-left-menu-accordion) .form-group select.form-control:focus,
body:has(#settings-left-menu-accordion) .form-group textarea.form-control:focus {
  border-color: var(--lab2-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .08) !important;
  outline: none !important;
}

body:has(#settings-left-menu-accordion) .form-group .form-control::placeholder {
  color: var(--slate-300) !important;
}

/* Linha separadora entre form-groups */
body:has(#settings-left-menu-accordion) .dashed-row .form-group {
  border-bottom: 1px solid var(--slate-100) !important;
  padding-bottom: 20px !important;
}

body:has(#settings-left-menu-accordion) .dashed-row .form-group:last-child {
  border-bottom: none !important;
}

/* ── Toggles (form-switch) ───────────────────────────────────────── */
body:has(#settings-left-menu-accordion) .form-switch .form-check-input {
  width: 40px !important;
  height: 22px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  background-color: var(--slate-200) !important;
  border: none !important;
  transition: background-color .2s !important;
}

body:has(#settings-left-menu-accordion) .form-switch .form-check-input:checked {
  background-color: var(--lab2-red) !important;
  border-color: var(--lab2-red) !important;
}

body:has(#settings-left-menu-accordion) .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 46, 77, .12) !important;
  border-color: transparent !important;
}

/* ── Botões padrão dentro das settings ───────────────────────────── */
body:has(#settings-left-menu-accordion) .btn.btn-default {
  background: #fff !important;
  border: 1.5px solid var(--slate-200) !important;
  color: var(--slate-600) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background .13s, border-color .13s !important;
}

body:has(#settings-left-menu-accordion) .btn.btn-default:hover {
  background: var(--slate-50) !important;
  border-color: var(--slate-300) !important;
}

body:has(#settings-left-menu-accordion) .btn.btn-primary {
  background: var(--lab2-red) !important;
  border-color: var(--lab2-red) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body:has(#settings-left-menu-accordion) .btn.btn-primary:hover {
  background: var(--lab2-red-hover) !important;
  border-color: var(--lab2-red-hover) !important;
}

/* ── Textarea dentro de settings ─────────────────────────────────── */
body:has(#settings-left-menu-accordion) .form-group textarea.form-control {
  min-height: 80px !important;
  resize: vertical !important;
}

/* ── Hint / help text ────────────────────────────────────────────── */
body:has(#settings-left-menu-accordion) .help-block,
body:has(#settings-left-menu-accordion) .text-help {
  font-size: 11px !important;
  color: var(--slate-400) !important;
  margin-top: 4px !important;
}

/* ── Color theme picker (se existir) ─────────────────────────────── */
body:has(#settings-left-menu-accordion) .color-item {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 3px solid transparent !important;
  transition: transform .13s, border-color .13s !important;
}

body:has(#settings-left-menu-accordion) .color-item:hover {
  transform: scale(1.15) !important;
}

body:has(#settings-left-menu-accordion) .color-item.active {
  border-color: var(--slate-900) !important;
}

/* ── Seção de integração (lista de serviços) ─────────────────────── */
body:has(#settings-left-menu-accordion) .integration-settings-item {
  background: #fff !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  transition: border-color .13s !important;
  margin-bottom: 10px !important;
}

body:has(#settings-left-menu-accordion) .integration-settings-item:hover {
  border-color: var(--slate-300) !important;
}

/* ── Badges de status ────────────────────────────────────────────── */
body:has(#settings-left-menu-accordion) .badge {
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

/* ── Responsivo mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  body:has(#settings-left-menu-accordion) #page-content > .row {
    flex-direction: column !important;
  }

  body:has(#settings-left-menu-accordion) #page-content > .row > .col-sm-3 {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: static !important;
    border-right: none !important;
    border-bottom: 1px solid var(--slate-200) !important;
  }

  body:has(#settings-left-menu-accordion) #page-content > .row > .col-sm-9 {
    padding: 20px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   USER DROPDOWN — LAB2 Theme
   Scope: #user-dropdown (trigger) + .user-dropdown-menu (menu)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trigger: pill do usuário na navbar ──────────────────────────── */
#user-dropdown {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px 5px 6px !important;
  border-radius: 40px !important;
  border: 1px solid transparent !important;
  transition: background .15s, border-color .15s !important;
  text-decoration: none !important;
}

#user-dropdown:hover,
#user-dropdown.show {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

/* Remove o caret padrão do Bootstrap */
#user-dropdown::after {
  display: none !important;
}

/* Avatar circular com borda fina */
#user-dropdown .avatar-xs img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, .15) !important;
  display: block !important;
}

/* Nome do usuário */
#user-dropdown .user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

/* ── Dropdown menu ───────────────────────────────────────────────── */
.user-dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid var(--slate-200) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06) !important;
  padding: 6px !important;
  min-width: 220px !important;
  margin-top: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* ── Itens do menu ───────────────────────────────────────────────── */
.user-dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--slate-700) !important;
  transition: background .12s, color .12s !important;
  text-decoration: none !important;
}

.user-dropdown-menu .dropdown-item:hover {
  background: var(--slate-100) !important;
  color: var(--slate-900) !important;
}

/* Ícones: cor neutra por padrão, herda no hover */
.user-dropdown-menu .dropdown-item svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--slate-400) !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
  transition: color .12s !important;
}

.user-dropdown-menu .dropdown-item:hover svg {
  color: var(--slate-600) !important;
}

/* ── Divisor ─────────────────────────────────────────────────────── */
.user-dropdown-menu .dropdown-divider {
  border-color: var(--slate-100) !important;
  margin: 4px 0 !important;
  opacity: 1 !important;
}

/* ── Item Sair: ação destrutiva em vermelho ──────────────────────── */
.user-dropdown-menu li:last-child .dropdown-item {
  color: var(--lab2-red) !important;
}

.user-dropdown-menu li:last-child .dropdown-item svg {
  color: var(--lab2-red) !important;
  opacity: .7 !important;
}

.user-dropdown-menu li:last-child .dropdown-item:hover {
  background: var(--lab2-red-dim) !important;
  color: var(--lab2-red) !important;
}

.user-dropdown-menu li:last-child .dropdown-item:hover svg {
  color: var(--lab2-red) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   NOTIFICATIONS DROPDOWN — LAB2 theme
   Escopo: .notification-dropdown (classe exclusiva do painel)
   ════════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────────── */
.notification-dropdown {
  border-radius: 14px !important;
  border: 1px solid var(--slate-200) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06) !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-width: 400px !important;
}

/* ── Cabeçalho ───────────────────────────────────────────────────── */
.notification-dropdown .notificatio-plate-title-area {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--slate-100) !important;
  background: #fff !important;
  /* remove floats do markup original */
  overflow: visible !important;
}

/* "Notificações" — título à esquerda (primeiro filho) */
.notification-dropdown .notificatio-plate-title-area > *:first-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--slate-800) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  float: none !important;
}

/* Links de ação: "marcar tudo como lido" e "Configurações" */
.notification-dropdown .notificatio-plate-title-area a {
  font-size: 12px !important;
  color: var(--slate-400) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  float: none !important;
  transition: color .12s !important;
}

.notification-dropdown .notificatio-plate-title-area a:hover {
  color: var(--lab2-red) !important;
}

/* Separa os dois links de ação com um ponto */
.notification-dropdown .notificatio-plate-title-area a + a::before {
  content: '·' !important;
  margin: 0 6px !important;
  color: var(--slate-300) !important;
}

/* ── Lista de itens ──────────────────────────────────────────────── */
#notificaion-popup-list {
  max-height: 400px !important;
  overflow-y: auto !important;
  background: #fff !important;
}

/* ── Item base ───────────────────────────────────────────────────── */
.notification-dropdown .list-group-item.dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--slate-100) !important;
  background: #fff !important;
  color: var(--slate-700) !important;
  border-radius: 0 !important;
  white-space: normal !important;
  transition: background .12s !important;
  position: relative !important;
}

.notification-dropdown .list-group-item.dropdown-item:last-child {
  border-bottom: none !important;
}

.notification-dropdown .list-group-item.dropdown-item:hover {
  background: var(--slate-50) !important;
  color: var(--slate-900) !important;
}

/* ── Item não lido ───────────────────────────────────────────────── */
.notification-dropdown .list-group-item.unread-notification {
  background: rgba(255, 46, 77, .04) !important;
  border-left: 3px solid var(--lab2-red) !important;
  padding-left: 13px !important; /* 16 - 3px da borda */
}

.notification-dropdown .list-group-item.unread-notification:hover {
  background: rgba(255, 46, 77, .08) !important;
}

/* ── Avatar ──────────────────────────────────────────────────────── */
.notification-dropdown .list-group-item img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* ── Conteúdo de texto ───────────────────────────────────────────── */
.notification-dropdown .list-group-item .w100p {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Linha superior: nome + timestamp */
.notification-dropdown .list-group-item .mb5 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
}

.notification-dropdown .list-group-item .mb5 strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
  line-height: 1.3 !important;
}

/* Timestamp */
.notification-dropdown .list-group-item .mb5 .text-off {
  font-size: 11px !important;
  color: var(--slate-400) !important;
  white-space: nowrap !important;
  float: none !important;
  flex-shrink: 0 !important;
  font-weight: 400 !important;
}

/* Corpo da notificação */
.notification-dropdown .list-group-item .text-break {
  font-size: 12px !important;
  color: var(--slate-500) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.notification-dropdown .list-group-item .text-break p {
  margin: 0 !important;
}

/* ── Rodapé "Ver Todos" ──────────────────────────────────────────── */
.notification-dropdown .card-footer {
  padding: 0 !important;
  background: #fff !important;
  border-top: 1px solid var(--slate-100) !important;
  border-radius: 0 !important;
}

.notification-dropdown .card-footer a {
  display: block !important;
  width: 100% !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--lab2-red) !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: background .12s !important;
  border-radius: 0 0 14px 14px !important;
}

.notification-dropdown .card-footer a:hover {
  background: var(--lab2-red-dim) !important;
}

/* ════════════════════════════════════════════════════════════════════
   LOADERS — substitui o azul #6690F4 por cinza escuro
   ════════════════════════════════════════════════════════════════════ */

/* Spinner de página / modal grande */
.circle-loader {
  border-top-color: var(--slate-600) !important;
  border-color: rgba(100, 110, 120, .15) !important;
  border-top-color: var(--slate-600) !important;
}

/* Loader flutuante de área (app-loader) */
.app-loader .loading {
  border-color: var(--slate-600) !important;
  border-top-color: transparent !important;
}

/* Loader de tabela / DataTable */
.table-loader .loading {
  border-color: var(--slate-600) !important;
  border-top-color: transparent !important;
}

/* Loader inline (dentro de botões, listas, etc.) */
.inline-loader {
  border-color: var(--slate-600) !important;
  border-top-color: transparent !important;
}

.inline-loader:hover,
.loader-container.inline-loader:hover {
  background-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   TAB INDICATORS — evita indicador duplicado
   O Rise CRM ja desenha o estado ativo com a::after. Alguns layouts LAB2
   tambem adicionavam border-bottom no link ativo, criando duas barras.
   ════════════════════════════════════════════════════════════════════ */

.lab2-clients-module-page #client-tabs.nav-tabs.title > li > a,
.lab2-clients-module-page #client-tabs.nav-tabs.title > li > a:hover,
.lab2-clients-module-page #client-tabs.nav-tabs.title > li > a.active,
.lab2-client-detail-view #client-details-tabs li > a,
.lab2-client-detail-view #client-details-tabs li > a:hover,
.lab2-client-detail-view #client-details-tabs li > a.active,
.lab2-client-detail-view #client-details-tabs .nav-link,
.lab2-client-detail-view #client-details-tabs .nav-link:hover,
.lab2-client-detail-view #client-details-tabs .nav-link.active,
body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link,
body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link:hover,
body.compact-view-active #compact-details-page #project-tabs .nav-item .nav-link.active,
.project-details-view #project-tabs .nav-item .nav-link,
.project-details-view #project-tabs .nav-item .nav-link:hover,
.project-details-view #project-tabs .nav-item .nav-link.active {
  border-bottom-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   PWA / MOBILE SAFETY NET
   Corrige vazamento de layout desktop em telas estreitas.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 990px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .navbar-custom,
  nav.navbar-custom,
  #default-navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .page-container,
  div.overflow-auto.page-container,
  body.sidebar-toggled .page-container,
  body.sidebar-toggled div.overflow-auto.page-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }

  .scrollable-page.main-scrollable-page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #page-content {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .sidebar .sidebar-toggle-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 31;
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    color: var(--sidebar-link) !important;
  }

  .sidebar .sidebar-toggle-btn:hover,
  .sidebar .sidebar-toggle-btn:focus {
    background: rgba(255,255,255,.08);
    color: #fff !important;
  }

  .sidebar .sidebar-toggle-btn svg,
  .sidebar .sidebar-toggle-btn i {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  .sidebar #left-menu-topbar-button-container {
    position: absolute !important;
    top: 14px !important;
    right: 58px !important;
    z-index: 30;
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto !important;
    height: 38px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sidebar #left-menu-topbar-button-container .menu-item {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sidebar #left-menu-topbar-button-container .nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    color: var(--sidebar-link) !important;
  }

  .sidebar #left-menu-topbar-button-container .nav-link:hover,
  .sidebar #left-menu-topbar-button-container .nav-link:focus {
    background: rgba(255,255,255,.08);
    color: #fff !important;
  }

  .sidebar #left-menu-topbar-button-container .nav-link svg,
  .sidebar #left-menu-topbar-button-container .nav-link i {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  .sidebar #left-menu-topbar-button-container .dropdown-menu {
    top: 42px !important;
    right: 0 !important;
    left: auto !important;
    max-height: min(70vh, 420px);
    overflow-y: auto;
  }

  body.lab2-dashboard-body #page-content.lab2-dashboard-page {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lab2-dashboard-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lab2-dashboard-stats-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lab2-dashboard-main-col,
  .lab2-dashboard-side-col,
  .lab2-dashboard-card,
  .lab2-dashboard-stat-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .lab2-dashboard-activity-item > div,
  .lab2-dashboard-task-info,
  .lab2-dashboard-deadline-row > span:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .lab2-dashboard-activity-item p,
  .lab2-dashboard-activity-item a,
  .lab2-dashboard-activity-change,
  .lab2-dashboard-task-info strong,
  .lab2-dashboard-deadline-row strong {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 640px) {
  #default-navbar .container-fluid {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #default-navbar .brand-logo {
    display: flex !important;
    align-items: center;
    min-width: 0;
  }

  #default-navbar .brand-logo .dashboard-image,
  #default-navbar .dashboard-image {
    width: auto !important;
    max-width: min(56vw, 220px) !important;
    height: auto !important;
    max-height: 44px !important;
    object-fit: contain;
  }

  #default-navbar .nav-link {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  #default-navbar .nav-link svg,
  #default-navbar .nav-link i {
    width: 22px;
    height: 22px;
  }

  #default-navbar #user-dropdown .user-name {
    display: none !important;
  }

  #default-navbar .notification-badge-container {
    top: 8px;
    right: 2px;
  }

  body.lab2-dashboard-body #page-content.lab2-dashboard-page {
    gap: 14px;
    padding: 14px !important;
  }

  .lab2-dashboard-greeting {
    gap: 10px;
  }

  .lab2-dashboard-stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lab2-dashboard-card-header {
    padding: 14px 16px;
  }

  .lab2-dashboard-activity-feed,
  .lab2-dashboard-task-list,
  .lab2-dashboard-lead-list,
  .lab2-dashboard-deadline-list {
    padding: 12px;
  }

  .lab2-dashboard-activity-item {
    gap: 9px;
  }

  .lab2-dashboard-lead-row strong,
  .lab2-dashboard-lead-row small,
  .lab2-dashboard-task-info strong,
  .lab2-dashboard-task-info em,
  .lab2-dashboard-deadline-row strong {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .scrollable-page.main-scrollable-page {
      padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    nav.mobile-bottom-menu {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}

/* ════════════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR + COMPACT VIEW SCROLL
   Deve ficar no fim do arquivo para vencer overrides dos módulos.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 991px) {
  body.sidebar-toggled.lab2-projects-page.compact-view-active .page-container,
  body.sidebar-toggled.lab2-projects-page.compact-view-active div.overflow-auto.page-container,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .page-container,
  body.sidebar-toggled.lab2-clients-page.compact-view-active div.overflow-auto.page-container {
    height: calc(100vh - 65px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sidebar-toggled.lab2-projects-page.compact-view-active .scrollable-page.main-scrollable-page,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .scrollable-page.main-scrollable-page,
  body.sidebar-toggled.lab2-projects-page.compact-view-active #page-content,
  body.sidebar-toggled.lab2-clients-page.compact-view-active #page-content,
  body.sidebar-toggled.lab2-projects-page.compact-view-active .lab2-split-wrap,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .lab2-clients-split-wrap {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .lab2-client-list-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel > .list-section,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .lab2-client-list-panel > .list-section,
  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel > .list-section > .card,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .lab2-client-list-panel > .list-section > .card {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel .table-responsive.scrollable-table,
  body.sidebar-toggled.lab2-projects-page.compact-view-active .compact-view-left-panel .scrollable-table,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .lab2-client-list-panel .table-responsive.scrollable-table,
  body.sidebar-toggled.lab2-clients-page.compact-view-active .lab2-client-list-panel .scrollable-table {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.sidebar-toggled.lab2-projects-page.compact-view-active #compact-details-page,
  body.sidebar-toggled.lab2-clients-page.compact-view-active #compact-details-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}