/*
 * CSS Personalizado para o Super Painel
*/

:root {
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-pill: 50rem;
}

body {
  background-color: #f0f2f5;
}

/* Efeito Blur para o Modal */
header,
main {
  transition: filter 0.3s ease-in-out;
}
body.modal-open header,
body.modal-open main {
  filter: blur(4px);
}

/* --- COMPONENTES GERAIS --- */
.navbar {
  border-bottom: 1px solid var(--bs-border-color-translucent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.section-title {
  font-weight: 700;
  color: var(--bs-body-color);
}
.filter-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- KPIs (CARDS DE RESUMO) --- */
.kpi-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-left: 5px solid;
}
.kpi-title {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
}
.kpi-value {
  font-weight: 700;
}
.kpi-icon {
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-acessos {
  border-color: #0d6efd;
}
.kpi-acessos .kpi-icon {
  background-color: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.kpi-producao {
  border-color: #198754;
}
.kpi-producao .kpi-icon {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.kpi-max-acesso {
  border-color: #6f42c1;
}
.kpi-max-acesso .kpi-icon {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.kpi-max-producao {
  border-color: #ffc107;
}
.kpi-max-producao .kpi-icon {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

/* Adicione estas linhas ao seu style.css, na seção de KPIs */

.kpi-min-acesso {
  border-color: #dc3545;
}
.kpi-min-acesso .kpi-icon {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.kpi-min-producao {
  border-color: #fd7e14;
}
.kpi-min-producao .kpi-icon {
  background-color: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}

/* --- CARDS DE CIDADE (COM BARRAS DE PROGRESSO) --- */
.client-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.client-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.metric-row.data-point {
  cursor: pointer;
}
.metric-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
}
.metric-value {
  font-weight: 700;
  color: var(--bs-body-color);
}
.progress {
  height: 8px;
  background-color: var(--bs-tertiary-bg);
}

/* --- SELETOR DE TEMA (DARK/LIGHT) --- */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch {
  display: inline-block;
  height: 28px;
  position: relative;
  width: 55px;
}
.theme-switch input {
  display: none;
}
.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 20px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-sun-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
input:checked + .slider {
  background-color: #3498db;
}
input:checked + .slider:before {
  transform: translateX(26px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-moon-stars-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162h1.212a.217.217 0 0 1 .154.371l-.986.715.387 1.162a.217.217 0 0 1-.316.228l-.986-.715-.986.715a.217.217 0 0 1-.316-.228l.387-1.162-.986-.715a.217.217 0 0 1 .154-.371h1.212l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a.796.796 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a.796.796 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z'/%3E%3C/svg%3E");
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

/* --- REGRAS PARA O TEMA DARK --- */
body.dark-mode {
  background-color: #2d3748;
  --bs-body-bg: #4a5568;
  --bs-body-color: #cbd5e0;
  --bs-secondary-bg: #4a5568;
  --bs-tertiary-bg: #2d3748;
  --bs-border-color: #4a5568;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-primary: #3498db;
}
body.dark-mode header.navbar {
  background-color: #4a5568 !important;
  border-bottom-color: #2d3748 !important;
}
body.dark-mode .navbar-brand,
body.dark-mode .navbar-text {
  color: #fff;
}
body.dark-mode .btn-light {
  background-color: #2d3748;
  border-color: #2d3748;
  color: #fff;
}
body.dark-mode .btn-light:hover {
  background-color: #1a202c;
  border-color: #1a202c;
}
body.dark-mode .client-card,
body.dark-mode .filter-card,
body.dark-mode .kpi-card,
body.dark-mode .modal-content,
body.dark-mode .alert-secondary {
  background-color: var(--bs-secondary-bg);
  box-shadow: none;
  border: 1px solid var(--bs-border-color);
}
body.dark-mode .kpi-card {
  border-left: 5px solid;
}
body.dark-mode .form-control {
  color-scheme: dark;
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
body.dark-mode .form-control:focus {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-primary);
  color: var(--bs-body-color);
}
body.dark-mode .kpi-title,
body.dark-mode .metric-label span {
  color: #a0aec0;
}
body.dark-mode .progress {
  background-color: #2d3748;
}
body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- LISTA DE USUÁRIOS NO MODAL --- */
.user-list-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.user-list-item:last-child {
  border-bottom: none;
}
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  margin-right: 1rem;
  font-size: 1.2rem;
}
.user-details {
  flex-grow: 1;
}
.professional-name {
  font-weight: 500;
  color: var(--bs-body-color);
}
.login-timestamp {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}
body.dark-mode .user-list-item {
  border-bottom-color: var(--bs-border-color);
}
body.dark-mode .professional-name {
  color: var(--bs-body-color);
}
body.dark-mode .login-timestamp {
  color: #a0aec0;
}

/* --- TABELA DO MODAL --- */
.modal-table th,
.modal-table td {
  vertical-align: middle;
}
.modal-table th:not(:first-child),
.modal-table td:not(:first-child) {
  text-align: center;
}