/* ============================================================
   THERA CLEAN
   Interface neutra + identidade Thera apenas nos detalhes
   ============================================================ */

/* ------------------------------------------------------------
   LIGHT THEME
   ------------------------------------------------------------ */

   :root,
   [data-bs-theme="light"] {
   
       /* Marca */
       --thera-blue: #015896;
       --thera-blue-hover: #014b80;
       --thera-blue-active: #013f6c;
   
       --thera-blue-soft: #eef6fb;
       --thera-blue-soft-hover: #e5f1f8;
   
       --thera-yellow: #fbc422;
       --thera-yellow-soft: rgba(251, 196, 34, 0.20);
   
       /* Layout */
       --thera-page: #f6f8fb;
       --thera-surface: #ffffff;
       --thera-surface-secondary: #fafbfc;
       --thera-surface-hover: #f3f5f8;
       --thera-surface-active: #eef4f8;
   
       /* Sidebar */
       --thera-sidebar: #ffffff;
       --thera-sidebar-hover: #f5f7f9;
       --thera-sidebar-active: #edf5fa;
   
       /* Texto */
       --thera-text: #1d2939;
       --thera-text-secondary: #475467;
       --thera-text-muted: #667085;
   
       /* Bordas */
       --thera-border: #e7ebf0;
       --thera-border-soft: #eef1f4;
   
       /* Sombras */
       --thera-shadow:
           0 1px 2px rgba(16, 24, 40, 0.02),
           0 2px 8px rgba(16, 24, 40, 0.025);
   }
   
   
   /* ------------------------------------------------------------
      DARK THEME
      ------------------------------------------------------------ */
   
   [data-bs-theme="dark"] {
   
       --thera-blue: #2485bd;
       --thera-blue-hover: #3295ca;
       --thera-blue-active: #1977ad;
   
       --thera-blue-soft: rgba(36, 133, 189, 0.12);
       --thera-blue-soft-hover: rgba(36, 133, 189, 0.17);
   
       --thera-yellow: #e6b624;
       --thera-yellow-soft: rgba(230, 182, 36, 0.15);
   
       /* Nada de preto puro */
       --thera-page: #101419;
       --thera-surface: #171c22;
       --thera-surface-secondary: #1a2027;
       --thera-surface-hover: #202730;
       --thera-surface-active: #222c35;
   
       /* Sidebar */
       --thera-sidebar: #151a20;
       --thera-sidebar-hover: #1c2229;
       --thera-sidebar-active: #1d2a33;
   
       /* Texto */
       --thera-text: #e6eaf0;
       --thera-text-secondary: #bdc5d0;
       --thera-text-muted: #8f9baa;
   
       /* Bordas */
       --thera-border: #272e37;
       --thera-border-soft: #222930;
   
       --thera-shadow: none;
   }
   
   
   /* ============================================================
      BODY / PÁGINA
      ============================================================ */
   
   html,
   body,
   .app-page,
   .app-wrapper,
   .app-main,
   .app-content {
       background-color: var(--thera-page) !important;
       color: var(--thera-text) !important;
   }
   
   
   /* ============================================================
      HEADER
      Clean: sem grande faixa azul
      ============================================================ */
   
   .app-header {
       background: var(--thera-surface) !important;
       border-bottom: 1px solid var(--thera-border) !important;
       box-shadow: none !important;
   }
   
   
   /* Remove qualquer fundo antigo do logo */
   
   .app-header .app-header-logo,
   .app-header .app-sidebar-logo,
   .app-header .app-sidebar-logo-default {
       background: transparent !important;
   }
   
   
   /* Ícones do header */
   
   .app-header .app-navbar > .app-navbar-item > .btn,
   .app-header .app-navbar > .app-navbar-item > .btn-icon,
   .app-header .app-navbar > .app-navbar-item > .btn i,
   .app-header .app-navbar > .app-navbar-item > .btn-icon i,
   .app-header .app-navbar i,
   .app-header .ki-outline {
       color: var(--thera-text-muted) !important;
   }
   
   
   /* Hover */
   
   .app-header .app-navbar > .app-navbar-item > .btn:hover,
   .app-header .app-navbar > .app-navbar-item > .btn-icon:hover {
       background-color: var(--thera-surface-hover) !important;
       color: var(--thera-text) !important;
   }
   
   
   /* ============================================================
      SIDEBAR
      ============================================================ */
   
   .app-sidebar {
       background: var(--thera-sidebar) !important;
       border-right: 1px solid var(--thera-border) !important;
       box-shadow: none !important;
   }
   
   
   /* Área da logo */
   
   .app-sidebar .app-sidebar-logo,
   .app-sidebar .app-sidebar-logo-default,
   .app-sidebar-logo {
       background: var(--thera-sidebar) !important;
       border-bottom: 1px solid var(--thera-border-soft) !important;
   }
   
   
   /* Links */
   
   .app-sidebar .menu-item > .menu-link {
       background: transparent !important;
   
       border-radius: 7px !important;
   
       margin-left: 10px !important;
       margin-right: 10px !important;
   
       transition:
           background-color 0.15s ease,
           color 0.15s ease !important;
   }
   
   
   /* Texto normal */
   
   .app-sidebar .menu-item > .menu-link .menu-title {
       color: var(--thera-text-secondary) !important;
       font-weight: 500 !important;
   }
   
   
   /* Ícone normal */
   
   .app-sidebar .menu-item > .menu-link .menu-icon,
   .app-sidebar .menu-item > .menu-link .menu-icon i,
   .app-sidebar .menu-item > .menu-link i {
       color: var(--thera-text-muted) !important;
   }
   
   
   /* ------------------------------------------------------------
      SIDEBAR HOVER
      ------------------------------------------------------------ */
   
   .app-sidebar .menu-item > .menu-link:hover,
   .app-sidebar .menu-item.hover > .menu-link {
       background-color: var(--thera-sidebar-hover) !important;
   }
   
   
   /* texto hover */
   
   .app-sidebar .menu-item > .menu-link:hover .menu-title,
   .app-sidebar .menu-item.hover > .menu-link .menu-title {
       color: var(--thera-text) !important;
   }
   
   
   /* ícone hover */
   
   .app-sidebar .menu-item > .menu-link:hover .menu-icon,
   .app-sidebar .menu-item > .menu-link:hover .menu-icon i,
   .app-sidebar .menu-item > .menu-link:hover i,
   .app-sidebar .menu-item.hover > .menu-link i {
       color: var(--thera-text-secondary) !important;
   }
   
   
   /* ------------------------------------------------------------
      SIDEBAR ATIVO
      Azul somente como nuance
      ------------------------------------------------------------ */
   
   .app-sidebar .menu-item.active > .menu-link,
   .app-sidebar .menu-item.here > .menu-link,
   .app-sidebar .menu-item.show > .menu-link {
       background-color: var(--thera-sidebar-active) !important;
   }
   
   
   /* texto ativo */
   
   .app-sidebar .menu-item.active > .menu-link .menu-title,
   .app-sidebar .menu-item.here > .menu-link .menu-title,
   .app-sidebar .menu-item.show > .menu-link .menu-title {
       color: var(--thera-blue) !important;
       font-weight: 600 !important;
   }
   
   
   /* ícone ativo */
   
   .app-sidebar .menu-item.active > .menu-link .menu-icon,
   .app-sidebar .menu-item.active > .menu-link .menu-icon i,
   .app-sidebar .menu-item.active > .menu-link i,
   
   .app-sidebar .menu-item.here > .menu-link .menu-icon,
   .app-sidebar .menu-item.here > .menu-link i,
   
   .app-sidebar .menu-item.show > .menu-link .menu-icon,
   .app-sidebar .menu-item.show > .menu-link i {
       color: var(--thera-blue) !important;
   }
   
   
   /* ============================================================
      CARDS
      ============================================================ */
   
   .card {
       background: var(--thera-surface) !important;
   
       border: 1px solid var(--thera-border) !important;
   
       box-shadow: var(--thera-shadow) !important;
   
       border-radius: 10px !important;
   }
   
   
   /* Header do card */
   
   .card-header {
       background: var(--thera-surface) !important;
       border-bottom: 1px solid var(--thera-border-soft) !important;
   }
   
   
   /* Títulos */
   
   .card-title,
   .card-header .card-title,
   .card-header h1,
   .card-header h2,
   .card-header h3,
   .card-header h4,
   .card-header h5,
   .card-header h6 {
       color: var(--thera-text) !important;
   }
   
   
   /* ============================================================
      TABELAS
      ============================================================ */
   
   .table {
       --bs-table-bg: transparent !important;
       --bs-table-color: var(--thera-text-secondary) !important;
   
       color: var(--thera-text-secondary) !important;
   }
   
   
   /* Cabeçalho */
   
   .table thead th,
   .table thead td {
       color: var(--thera-text-muted) !important;
   
       border-bottom-color: var(--thera-border) !important;
   
       font-weight: 600 !important;
   }
   
   
   /* Linhas */
   
   .table tbody tr,
   .table tbody td {
       border-color: var(--thera-border-soft) !important;
   }
   
   
   /* Hover */
   
   .table-hover tbody tr:hover > * {
       background-color: var(--thera-surface-hover) !important;
   }
   
   
   /* ============================================================
      DATATABLE
      ============================================================ */
   
   .dataTables_wrapper,
   .table-responsive {
       color: var(--thera-text-secondary) !important;
   }
   
   
   .dataTables_info,
   .dataTables_length,
   .dataTables_filter {
       color: var(--thera-text-muted) !important;
   }
   
   
   /* ============================================================
      FORMULÁRIOS
      ============================================================ */
   
   .form-control,
   .form-select {
       background-color: var(--thera-surface) !important;
   
       border: 1px solid var(--thera-border) !important;
   
       color: var(--thera-text) !important;
   
       box-shadow: none !important;
   }
   
   
   .form-control::placeholder {
       color: var(--thera-text-muted) !important;
       opacity: 0.85;
   }
   
   
   /* Hover */
   
   .form-control:hover,
   .form-select:hover {
       border-color: var(--thera-text-muted) !important;
   }
   
   
   /* Focus */
   
   .form-control:focus,
   .form-select:focus {
       background-color: var(--thera-surface) !important;
   
       border-color: var(--thera-blue) !important;
   
       color: var(--thera-text) !important;
   
       box-shadow:
           0 0 0 3px rgba(1, 88, 150, 0.10) !important;
   }
   
   
   [data-bs-theme="dark"] .form-control:focus,
   [data-bs-theme="dark"] .form-select:focus {
       box-shadow:
           0 0 0 3px rgba(36, 133, 189, 0.12) !important;
   }
   
   
   /* ============================================================
      CHECKBOX / RADIO
      ============================================================ */
   
   .form-check-input {
       background-color: var(--thera-surface) !important;
       border-color: var(--thera-border) !important;
   }
   
   
   .form-check-input:checked {
       background-color: var(--thera-blue) !important;
       border-color: var(--thera-blue) !important;
   }
   
   
   .form-check-input:focus {
       border-color: var(--thera-blue) !important;
   
       box-shadow:
           0 0 0 3px rgba(1, 88, 150, 0.10) !important;
   }
   
   
   /* ============================================================
      BOTÃO PRIMÁRIO
      ============================================================ */
   
   .btn-primary {
   
       --bs-btn-bg: var(--thera-blue);
       --bs-btn-border-color: var(--thera-blue);
       --bs-btn-color: #ffffff;
   
       --bs-btn-hover-bg: var(--thera-blue-hover);
       --bs-btn-hover-border-color: var(--thera-blue-hover);
       --bs-btn-hover-color: #ffffff;
   
       --bs-btn-active-bg: var(--thera-blue-active);
       --bs-btn-active-border-color: var(--thera-blue-active);
       --bs-btn-active-color: #ffffff;
   
       background-color: var(--thera-blue) !important;
       border-color: var(--thera-blue) !important;
   
       color: #ffffff !important;
   
       box-shadow: none !important;
   }
   
   
   .btn-primary:hover,
   .btn-primary:focus {
       background-color: var(--thera-blue-hover) !important;
       border-color: var(--thera-blue-hover) !important;
   
       color: #ffffff !important;
   }
   
   
   .btn-primary:active,
   .btn-primary.active {
       background-color: var(--thera-blue-active) !important;
       border-color: var(--thera-blue-active) !important;
   
       color: #ffffff !important;
   }
   
   
   /* ============================================================
      BOTÕES LIGHT / ÍCONES
      ============================================================ */
   
   .btn-light,
   .btn.btn-light,
   .btn-icon {
       background-color: var(--thera-surface-secondary) !important;
   
       border-color: var(--thera-border-soft) !important;
   
       color: var(--thera-text-muted) !important;
   }
   
   
   .btn-light:hover,
   .btn.btn-light:hover,
   .btn-icon:hover {
       background-color: var(--thera-surface-hover) !important;
   
       color: var(--thera-text) !important;
   }
   
   
   /* ============================================================
      PAGINAÇÃO
      ============================================================ */
   
   .pagination .page-link,
   .page-item .page-link {
       background: transparent !important;
   
       border-color: transparent !important;
   
       color: var(--thera-text-muted) !important;
   }
   
   
   .pagination .page-link:hover,
   .page-item .page-link:hover {
       background: var(--thera-surface-hover) !important;
   
       color: var(--thera-text) !important;
   }
   
   
   .page-item.active .page-link {
       background-color: var(--thera-blue) !important;
   
       border-color: var(--thera-blue) !important;
   
       color: #ffffff !important;
   }
   
   
   /* ============================================================
      DROPDOWNS / MENUS
      ============================================================ */
   
   .menu-sub,
   .menu-sub-dropdown,
   .menu-dropdown,
   .dropdown-menu {
       background: var(--thera-surface) !important;
   
       border: 1px solid var(--thera-border) !important;
   
       box-shadow:
           0 8px 24px rgba(16, 24, 40, 0.10) !important;
   
       color: var(--thera-text) !important;
   }
   
   
   [data-bs-theme="dark"] .menu-sub,
   [data-bs-theme="dark"] .menu-sub-dropdown,
   [data-bs-theme="dark"] .menu-dropdown,
   [data-bs-theme="dark"] .dropdown-menu {
       box-shadow:
           0 8px 24px rgba(0, 0, 0, 0.22) !important;
   }
   
   
   /* Links */
   
   .menu-sub .menu-link,
   .menu-sub .menu-title,
   .dropdown-menu .dropdown-item {
       color: var(--thera-text-secondary) !important;
   }
   
   
   /* Ícones */
   
   .menu-sub i,
   .menu-sub .ki-outline {
       color: var(--thera-text-muted) !important;
   }
   
   
   /* Hover */
   
   .menu-sub .menu-link:hover,
   .dropdown-menu .dropdown-item:hover {
       background-color: var(--thera-surface-hover) !important;
   
       color: var(--thera-text) !important;
   }
   
   
   /* ============================================================
      BADGES
      ============================================================ */
   
   .badge-light-primary {
       background-color: var(--thera-blue-soft) !important;
   
       color: var(--thera-blue) !important;
   }
   
   
   /* Amarelo só como detalhe secundário */
   
   .badge-light-warning {
       background-color: var(--thera-yellow-soft) !important;
   
       color: var(--thera-text-secondary) !important;
   }
   
   
   /* ============================================================
      LINKS
      ============================================================ */
   
   a {
       color: var(--thera-blue);
   }
   
   
   a:hover {
       color: var(--thera-blue-hover);
   }
   
   
   /* ============================================================
      SEPARADORES
      ============================================================ */
   
   .separator,
   .border-bottom,
   .border-top {
       border-color: var(--thera-border) !important;
   }
   
   
   /* ============================================================
      TEXTOS AUXILIARES
      ============================================================ */
   
   .text-muted {
       color: var(--thera-text-muted) !important;
   }
   
   
   .text-gray-400,
   .text-gray-500,
   .text-gray-600 {
       color: var(--thera-text-muted) !important;
   }
   
   
   .text-gray-700,
   .text-gray-800,
   .text-gray-900 {
       color: var(--thera-text) !important;
   }
   
   
   /* ============================================================
      SCROLLBAR - discreta
      ============================================================ */
   
   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   
   
   ::-webkit-scrollbar-track {
       background: transparent;
   }
   
   
   ::-webkit-scrollbar-thumb {
       background-color: var(--thera-border);
       border-radius: 20px;
   }
   
   
   ::-webkit-scrollbar-thumb:hover {
       background-color: var(--thera-text-muted);
   }
   
   /* ============================================================
      THERA CLEAN - BRAND TOUCH
      Adicionar NO FINAL do CSS atual
      ============================================================ */
   
   
   /* ============================================================
      LIGHT MODE
      ============================================================ */
   
   [data-bs-theme="light"] {
   
       /* Página levemente azulada */
       --thera-page: #f6f9fb;
   
       /* Sidebar quase branca, com nuance azul */
       --thera-sidebar: #fbfdff;
       --thera-sidebar-hover: #f1f6f9;
       --thera-sidebar-active: #eaf4f9;
   
       /* Superfícies */
       --thera-surface-secondary: #f8fafc;
   }
   
   
   /* ------------------------------------------------------------
      TÍTULO "Thera Files"
      Corrige o problema de contraste no modo claro
      ------------------------------------------------------------ */
   
   [data-bs-theme="light"] .app-sidebar-logo,
   [data-bs-theme="light"] .app-sidebar-logo a,
   [data-bs-theme="light"] .app-sidebar-logo span,
   [data-bs-theme="light"] .app-sidebar-logo .fw-bold,
   [data-bs-theme="light"] .app-sidebar-logo .text-white,
   [data-bs-theme="light"] .app-sidebar-logo-default {
       color: var(--thera-blue) !important;
   }
   
   
   /* No dark continua claro */
   
   [data-bs-theme="dark"] .app-sidebar-logo,
   [data-bs-theme="dark"] .app-sidebar-logo a,
   [data-bs-theme="dark"] .app-sidebar-logo span,
   [data-bs-theme="dark"] .app-sidebar-logo .fw-bold,
   [data-bs-theme="dark"] .app-sidebar-logo .text-white,
   [data-bs-theme="dark"] .app-sidebar-logo-default {
       color: #f4f7fb !important;
   }
   
   
   /* ============================================================
      LOGO / TOPO DA SIDEBAR
      ============================================================ */
   
   [data-bs-theme="light"] .app-sidebar .app-sidebar-logo,
   [data-bs-theme="light"] .app-sidebar-logo {
       background-color: #f7fbfd !important;
   
       /* detalhe Thera muito discreto */
       border-bottom:
           1px solid rgba(1, 88, 150, 0.10) !important;
   }
   
   
   /* ============================================================
      HEADER
      Quase branco, com uma nuance da marca
      ============================================================ */
   
   [data-bs-theme="light"] .app-header {
       background-color: #f8fbfd !important;
   
       border-bottom:
           1px solid rgba(1, 88, 150, 0.12) !important;
   }
   
   
   /* Pequena linha Thera.
      Bem mais discreta que a anterior. */
   
   [data-bs-theme="light"] .app-header::after {
       content: "";
   
       position: absolute;
   
       left: 0;
       right: 0;
       bottom: -1px;
   
       height: 2px;
   
       background:
           linear-gradient(
               90deg,
               rgba(1, 88, 150, 0.55) 0%,
               rgba(1, 88, 150, 0.18) 70%,
               rgba(251, 196, 34, 0.35) 100%
           );
   
       pointer-events: none;
   }
   
   
   /* ============================================================
      SIDEBAR - ITEM ATIVO
      ============================================================ */
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.active > .menu-link,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.here > .menu-link,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.show > .menu-link {
   
       background-color: #eaf4f9 !important;
   
       /* detalhe azul bem suave */
       box-shadow:
           inset 3px 0 0 rgba(1, 88, 150, 0.75) !important;
   }
   
   
   /* Texto do item ativo */
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.active > .menu-link .menu-title,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.here > .menu-link .menu-title,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.show > .menu-link .menu-title {
   
       color: #014f87 !important;
   }
   
   
   /* Ícone ativo */
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.active > .menu-link i,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.active > .menu-link .menu-icon,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.here > .menu-link i,
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item.show > .menu-link i {
   
       color: #015896 !important;
   }
   
   
   /* ============================================================
      SIDEBAR HOVER
      ============================================================ */
   
   [data-bs-theme="light"]
   .app-sidebar
   .menu-item > .menu-link:hover {
   
       background-color: #f1f6f9 !important;
   }
   
   
   /* ============================================================
      DARK MODE
      Mantém discreto, mas traz uma nuance Thera
      ============================================================ */
   
   [data-bs-theme="dark"] {
   
       --thera-page: #10151b;
   
       --thera-sidebar: #141a20;
       --thera-sidebar-hover: #1a222a;
       --thera-sidebar-active: #192b36;
   
       --thera-surface: #171d23;
   }
   
   
   /* Header dark levemente azulado */
   
   [data-bs-theme="dark"] .app-header {
       background-color: #151d24 !important;
   
       border-bottom:
           1px solid rgba(36, 133, 189, 0.18) !important;
   }
   
   
   /* Item ativo dark */
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.active > .menu-link,
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.here > .menu-link,
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.show > .menu-link {
   
       background-color: rgba(36, 133, 189, 0.10) !important;
   
       box-shadow:
           inset 3px 0 0 rgba(36, 133, 189, 0.65) !important;
   }
   
   
   /* Texto ativo no dark */
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.active > .menu-link .menu-title,
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.here > .menu-link .menu-title,
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.show > .menu-link .menu-title {
   
       color: #7fc0e2 !important;
   }
   
   
   /* Ícone ativo dark */
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.active > .menu-link i,
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.active > .menu-link .menu-icon,
   
   [data-bs-theme="dark"]
   .app-sidebar
   .menu-item.here > .menu-link i {
   
       color: #68acd2 !important;
   }
   
   
   /* ============================================================
      AMARELO THERA
      Usar somente como micro-detalhe
      ============================================================ */
   
   /* Pequeno destaque no botão primário ao focar */
   
   .btn-primary:focus {
       box-shadow:
           0 0 0 3px rgba(251, 196, 34, 0.16) !important;
   }
   
   
   /* Focus dos inputs:
      azul principal + um halo muito discreto */
   
   .form-control:focus,
   .form-select:focus {
       border-color: var(--thera-blue) !important;
   
       box-shadow:
           0 0 0 3px rgba(1, 88, 150, 0.09) !important;
   }

   /* Thera Share: esconde o menu Shares no Web Client.
      Não usar shares-disabled — isso corta a User API. */
   .app-sidebar a[href*="/web/client/shares"],
   .app-sidebar .menu-item:has(a[href*="/web/client/shares"]) {
       display: none !important;
   }