/* Prevent flash of unstyled content on page load */
html:not(.dark-mode) {
  background-color: #f0f2f5;
}

html.dark-mode {
  background-color: #0f172a;
}

:root {
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);

  /* Light Mode (default) */
  --body-bg: #f0f2f5;
  --body-color: #212529;
  --container-bg: #ffffff;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --table-bg: #ffffff;
  --table-header-bg: #f8f9fa;
  --table-border-color: #dee2e6;
  --table-hover-bg: #f8f9fa;
  --accent-color: #ffc107;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --sidebar-bg: #ffffff;
}

/* Dark Mode - Azul Noite */
body.dark-mode {
  --body-bg: #0f172a;
  --body-color: #e2e8f0;
  --container-bg: #1e293b;
  --card-bg: #1e293b;
  --header-bg: #1e293b;
  --table-bg: #1e293b;
  --table-header-bg: #334155;
  --table-border-color: #334155;
  --table-hover-bg: #334155;
  --accent-color: #f59e0b;
  --input-bg: #334155;
  --input-border: #475569;
  --sidebar-bg: #1e293b;
}

/* Dark mode overrides */
body.dark-mode {
  background-color: var(--body-bg);
  color: var(--body-color);
}

body.dark-mode .card,
body.dark-mode .custom-card {
  background-color: var(--card-bg);
  color: var(--body-color);
  border-color: var(--table-border-color);
}

body.dark-mode .sidebar-menu {
  background-color: var(--sidebar-bg);
  border-color: var(--table-border-color);
}

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--input-bg);
  color: var(--body-color);
  border-color: var(--input-border);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--input-bg);
  color: var(--body-color);
  border-color: var(--accent-color);
}

body.dark-mode .modal-content {
  background-color: var(--container-bg);
  color: var(--body-color);
}

body.dark-mode .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--table-border-color);
}

body.dark-mode .dropdown-item {
  color: var(--body-color);
}

body.dark-mode .dropdown-item:hover {
  background-color: var(--table-hover-bg);
}

body.dark-mode .list-group-item {
  background-color: var(--card-bg);
  color: var(--body-color);
  border-color: var(--table-border-color);
}

body.dark-mode .alert {
  border-color: var(--table-border-color);
}

body.dark-mode .text-muted {
  color: #a0aec0 !important;
}

body.dark-mode .text-dark {
  color: var(--body-color) !important;
}

body.dark-mode hr {
  border-color: var(--table-border-color);
}

body.dark-mode .nav-link {
  color: var(--body-color);
}

body.dark-mode .metric-card {
  background-color: var(--card-bg);
  color: var(--body-color);
}

/* Dark mode - Buttons */
body.dark-mode .btn {
  color: inherit;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-success,
body.dark-mode .btn-danger,
body.dark-mode .btn-warning,
body.dark-mode .btn-info {
  color: #000 !important;
}

body.dark-mode .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

body.dark-mode .btn-outline-secondary {
  color: #94a3b8 !important;
  border-color: #94a3b8 !important;
}

body.dark-mode .btn-outline-success {
  color: #4ade80 !important;
  border-color: #4ade80 !important;
}

body.dark-mode .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

body.dark-mode .btn-outline-warning {
  color: #fbbf24 !important;
  border-color: #fbbf24 !important;
}

body.dark-mode .btn-outline-info {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}

body.dark-mode .btn-outline-dark {
  color: var(--body-color) !important;
  border-color: var(--table-border-color) !important;
}

body.dark-mode .btn-outline-light {
  color: var(--body-color) !important;
  border-color: var(--table-border-color) !important;
}

/* Dark mode - Progress bars */
body.dark-mode .progress {
  background-color: var(--table-border-color);
}

body.dark-mode .progress-bar {
  color: #000 !important;
}

/* Dark mode - Badges */
body.dark-mode .badge.bg-light {
  background-color: var(--table-border-color) !important;
  color: var(--body-color) !important;
}

body.dark-mode .badge.bg-secondary {
  background-color: #475569 !important;
}

/* Dark mode - Tables */
body.dark-mode .table {
  color: var(--body-color);
}

body.dark-mode .table th,
body.dark-mode .table td {
  color: var(--body-color) !important;
  border-color: var(--table-border-color) !important;
}

body.dark-mode .table-light,
body.dark-mode .table-light th,
body.dark-mode .table-light td {
  background-color: var(--table-header-bg) !important;
  color: var(--body-color) !important;
}

body.dark-mode thead {
  background-color: var(--table-header-bg);
}

/* Dark mode - Headings and text */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--body-color);
}

body.dark-mode .card-title,
body.dark-mode .card-header,
body.dark-mode .modal-title {
  color: var(--body-color);
}

body.dark-mode .fw-bold,
body.dark-mode .fw-semibold,
body.dark-mode strong {
  color: inherit;
}

/* Dark mode - special elements */
body.dark-mode .header-bg {
  background-color: var(--header-bg);
  color: var(--body-color);
}

body.dark-mode .main-title {
  color: var(--body-color);
}

body.dark-mode .toast {
  background-color: var(--card-bg);
  color: var(--body-color);
}

body.dark-mode .toast-header {
  background-color: var(--table-header-bg);
  color: var(--body-color);
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* Dark mode - Sidebar specific */
body.dark-mode #menu .nav-link {
  color: var(--body-color);
}

body.dark-mode #menu .nav-link:hover {
  color: var(--accent-color);
}

body.dark-mode #menu .nav-link.active {
  background-color: var(--table-hover-bg);
  color: var(--accent-color);
}

/* Dark mode - Cards specific */
body.dark-mode .custom-card-header,
body.dark-mode .custom-card-title {
  color: var(--body-color);
}

body.dark-mode .custom-card-body {
  color: var(--body-color);
}

/* Dark mode - Stats and numbers */
body.dark-mode .metric-value,
body.dark-mode .stat-number {
  color: var(--body-color);
}

/* Dark mode - forms */
body.dark-mode label,
body.dark-mode .form-label {
  color: var(--body-color);
}

body.dark-mode .input-group-text {
  background-color: var(--input-bg);
  color: var(--body-color);
  border-color: var(--input-border);
}

/* Dark mode - Bootstrap overrides */
body.dark-mode .bg-white {
  background-color: var(--card-bg) !important;
}

body.dark-mode .border {
  border-color: var(--table-border-color) !important;
}

body.dark-mode .text-body {
  color: var(--body-color) !important;
}

/* Dark mode - Profile Modal */
body.dark-mode .profile-modal {
  color: var(--body-color);
}

body.dark-mode .profile-modal .bg-light {
  background-color: var(--table-header-bg) !important;
}

body.dark-mode .profile-modal h5 {
  color: var(--body-color);
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
  background-color: var(--table-header-bg);
  color: #94a3b8;
  border-color: var(--input-border);
}

body.dark-mode .modal-header {
  background-color: var(--header-bg);
  border-color: var(--table-border-color);
}

body.dark-mode .modal-footer {
  background-color: var(--header-bg);
  border-color: var(--table-border-color);
}

body.dark-mode .border-top {
  border-color: var(--table-border-color) !important;
}

/* Dark mode - Cards de métricas com gradiente azul */
body.dark-mode .metrics-grid .card,
body.dark-mode .metrics-grid .card.card-stats,
body.dark-mode .card.card-stats.card-primary,
body.dark-mode .card.card-stats.card-secondary,
body.dark-mode .card.card-stats.card-success,
body.dark-mode .card.card-stats.card-danger,
body.dark-mode .card.card-stats.card-warning,
body.dark-mode .card.card-stats.card-info,
body.dark-mode .card.card-stats.card-dark {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%) !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Cards stats - texto interno */
body.dark-mode .card.card-stats h6,
body.dark-mode .card.card-stats .text-secondary,
body.dark-mode .metrics-grid .card h6 {
  color: #94a3b8 !important;
}

body.dark-mode .card.card-stats h4,
body.dark-mode .metrics-grid .card h4 {
  color: var(--body-color) !important;
}

body.dark-mode .card.card-stats .text-muted,
body.dark-mode .metrics-grid .card .text-muted {
  color: #64748b !important;
}

body.dark-mode .text-warning {
  color: #fbbf24 !important;
}

body.dark-mode .text-danger {
  color: #f87171 !important;
}

body.dark-mode .text-success {
  color: #4ade80 !important;
}

body.dark-mode .text-info {
  color: #22d3ee !important;
}

body.dark-mode .text-primary {
  color: #60a5fa !important;
}

body.dark-mode .bg-warning {
  background-color: #1e40af !important;
  color: #e2e8f0 !important;
}

body.dark-mode .bg-danger {
  background-color: #1e3a8a !important;
  color: #e2e8f0 !important;
}

/* Cards de métricas com fundo amarelo/vermelho inline */
body.dark-mode [style*="background-color: #f8d7da"],
body.dark-mode [style*="background-color:#f8d7da"],
body.dark-mode [style*="background: #ffc"] {
  background: var(--card-bg) !important;
  border: 1px solid #60a5fa !important;
}

body {
  background-color: var(--body-bg);
}

.main-title {
  text-align: center;
  letter-spacing: 0.3px;
  font-weight: 600;
}

.card-title {
  text-align: center;
}

.card {
  border: 0;
}

header.header-bg {
  background-color: var(--header-bg);
}

.btn {
  transition: transform 0.08s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

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

.table thead th {
  font-weight: 600;
  color: var(--body-color);
  background-color: var(--table-header-bg);
}

.table tbody tr:hover {
  background-color: var(--table-bg) !important;
}

.table-hover>tbody>tr:hover {
  background-color: var(--table-bg) !important;
}

.table-hover>tbody>tr:hover>* {
  background-color: var(--table-bg) !important;
  color: var(--body-color) !important;
}

.table {
  color: var(--body-color);
  --bs-table-bg: var(--table-bg);
  --bs-table-color: var(--body-color);
  --bs-table-border-color: var(--table-border-color);
  --bs-table-hover-bg: var(--table-hover-bg);
  --bs-table-striped-bg: var(--table-bg);
}

.table tbody tr,
.table tfoot tr {
  background-color: var(--table-bg);
}

.table th,
.table td {
  border-color: var(--table-border-color) !important;
  padding: var(--space-3);
}

.user-profile-btn {
  width: 40px;
  height: 40px;
  box-shadow: var(--shadow-sm);
}

.rounded-3 {
  border-radius: var(--radius-lg) !important;
}

.shadow-soft {
  box-shadow: var(--shadow-sm) !important;
}

/* Esconder menu toggle antigo */
.menu-toggle {
  display: none;
}

/* Layout principal com sidebar fixa */
.main-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar sempre visível */
.sidebar-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  height: 100vh;
  background: var(--container-bg);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  border-right: 1px solid var(--table-border-color);
  padding: 1rem;
  overflow-y: auto;
  transition: width 0.3s ease-in-out;
  z-index: 1000;
}

.sidebar-menu.collapsed {
  width: 60px;
}

.sidebar-menu.collapsed .nav-link-text,
.sidebar-menu.collapsed .d-flex strong,
.sidebar-menu.collapsed .nav-item-divider {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: none;
}

.sidebar-menu.collapsed .nav-link {
  justify-content: center;
  padding: 0.8rem;
}

.sidebar-menu.collapsed .nav-link i {
  margin-right: 0 !important;
}

.sidebar-menu.collapsed .d-flex {
  justify-content: center;
}

/* Header do sidebar com toggle */
.sidebar-header {
  padding-right: 0.25rem;
}

/* Botão de toggle interno ao sidebar */
.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: transparent;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--body-color);
  opacity: 0.7;
}

.sidebar-toggle-btn:hover {
  background: var(--accent-color);
  color: #000;
  opacity: 1;
  border-color: var(--accent-color);
}

.sidebar-toggle-btn i {
  transition: transform 0.3s ease-in-out;
  font-size: 0.9rem;
}

/* Quando o sidebar está colapsado, centraliza o botão */
.sidebar-menu.collapsed .sidebar-toggle-btn {
  margin: 0 auto;
}

.sidebar-menu.collapsed .sidebar-header {
  justify-content: center !important;
}

.sidebar-menu.collapsed .sidebar-header>.d-flex:first-child {
  display: none !important;
}

/* Conteúdo principal */
.main-content {
  margin-left: 280px;
  flex: 1;
  transition: margin-left 0.3s ease-in-out;
  min-height: 100vh;
  width: calc(100% - 280px);
}

.nav-link {
  color: var(--body-color);
}

.nav-link:hover {
  color: var(--accent-color);
}

.progress .progress-bar {
  color: #000000;
  transition: width 0.3s ease-out, background-color 0.3s ease;
}

/* Progresso global - animação suave */
#progress-total-bar,
#checklist-global-progress-bar {
  transition: width 0.25s ease-out, background-color 0.3s ease;
}

/* Tom Select - Corrigir ícone de seta sobrepondo texto */
.ts-wrapper.single .ts-control {
  padding-right: 40px !important;
}

.ts-wrapper.single .ts-control::after {
  position: absolute;
  right: 12px !important;
  top: 50%;
  transform: translateY(-50%);
}

.ts-wrapper .ts-control .item {
  max-width: calc(100% - 35px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Garantir que o dropdown não sobreponha */
.ts-dropdown {
  z-index: 1060 !important;
}

.list-group-item {
  color: var(--body-color);
  background-color: var(--card-bg);
  border-color: var(--table-border-color);
}

.modal-content {
  background-color: var(--container-bg);
  color: var(--body-color);
  border-color: var(--table-border-color);
}

.menu-toggle i {
  color: var(--body-color);
}

#menu .nav-link {
  border-radius: var(--radius-md);
}

#menu .nav-item-divider hr {
  margin: 0.75rem 0;
}

.bigslide-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 24, 40, 0.3);
  z-index: 1025;
}

.push {
  transition: margin-left 0.3s ease;
}

.push.push-shifted {
  margin-left: 280px;
}

.table th,
.table td {
  color: var(--body-color) !important;
}

table {
  background-color: var(--table-bg) !important;
  color: var(--body-color) !important;
}

table> :not(caption)>*>* {
  background-color: var(--table-bg) !important;
  color: var(--body-color) !important;
  border-color: var(--table-border-color) !important;
}

.table-light,
.table-light> :not(caption)>*>* {
  --bs-table-bg: var(--table-bg);
  --bs-table-color: var(--body-color);
  --bs-table-border-color: var(--table-border-color);
  background-color: var(--table-bg) !important;
  color: var(--body-color) !important;
}

.table-striped {
  --bs-table-striped-bg: var(--table-bg);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: var(--table-bg) !important;
}

.bg-light,
.bg-white {
  background-color: var(--card-bg) !important;
  color: var(--body-color) !important;
}

.btn {
  color: #000000 !important;
}

.btn:hover,
.btn:focus {
  color: #000000 !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
  color: #000000 !important;
}

.btn-outline-primary {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}

.btn-close {
  filter: none;
  opacity: 0.85;
}

.btn-close:hover {
  opacity: 1;
}

.btn-edit-empresa {
  color: #0d6efd;
}

.btn-edit-empresa:hover,
.btn-edit-empresa:focus {
  color: #0b5ed7;
}

.modal .input-group {
  position: relative;
}

.modal .flatpickr-calendar {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  margin-top: 4px;
  z-index: 1060 !important;
  /* acima do conteúdo do modal */
}