/**
 * LocalHub Modern Enterprise Design System
 * Clean, Luminous, High-End SaaS Aesthetic
 * 100% Offline Compatible (No CDN dependencies)
 */

:root {
  /* Paleta Luminosa e Moderna */
  --lh-bg: #f8fafc;
  --lh-bg-subtle: #f1f5f9;
  --lh-card-bg: #ffffff;
  --lh-card-border: #e2e8f0;
  --lh-card-border-hover: #cbd5e1;
  
  --lh-primary: #2563eb;
  --lh-primary-hover: #1d4ed8;
  --lh-primary-light: #eff6ff;
  
  --lh-indigo: #4f46e5;
  --lh-indigo-light: #eef2ff;
  
  --lh-success: #10b981;
  --lh-success-light: #ecfdf5;
  --lh-success-text: #047857;
  
  --lh-warning: #f59e0b;
  --lh-warning-light: #fffbeb;
  --lh-warning-text: #b45309;
  
  --lh-danger: #ef4444;
  --lh-danger-light: #fef2f2;
  --lh-danger-text: #b91c1c;
  
  --lh-text: #0f172a;
  --lh-text-secondary: #475569;
  --lh-text-muted: #64748b;
  --lh-text-subtle: #94a3b8;
  
  --lh-sidebar-bg: #ffffff;
  --lh-sidebar-border: #e2e8f0;
  
  --lh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --lh-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --lh-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --lh-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --lh-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -2px rgba(15, 23, 42, 0.04);
}

/* Reset & Base */
body {
  background-color: var(--lh-bg);
  background-image: 
    radial-gradient(at 100% 0%, rgba(239, 246, 255, 0.8) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(241, 245, 249, 0.8) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--lh-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Cartões Principais */
.lh-card {
  background: var(--lh-card-bg);
  border: 1px solid var(--lh-card-border);
  border-radius: 16px;
  box-shadow: var(--lh-shadow-card);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.lh-card:hover {
  border-color: var(--lh-card-border-hover);
  box-shadow: var(--lh-shadow-md);
}

/* Cartões de Estatísticas / Métricas com Cores Vibrantes */
.lh-stat-card {
  padding: 1.5rem;
  border: 1px solid var(--lh-card-border);
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.lh-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
}

/* Card Azul (Colaboradores) */
.lh-stat-blue {
  background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
  border-top: 3px solid #2563eb;
  border-color: #dbeafe;
}
.lh-stat-blue .lh-stat-icon-wrapper {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
}
.lh-stat-blue .stat-val {
  color: #1e3a8a;
}

/* Card Verde (Dispositivos Online) */
.lh-stat-emerald {
  background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 100%);
  border-top: 3px solid #10b981;
  border-color: #d1fae5;
}
.lh-stat-emerald .lh-stat-icon-wrapper {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3);
}
.lh-stat-emerald .stat-val {
  color: #064e3b;
}

/* Card Laranja / Âmbar (Mailbox Store-and-Forward) */
.lh-stat-amber {
  background: linear-gradient(145deg, #ffffff 0%, #fffbeb 100%);
  border-top: 3px solid #f59e0b;
  border-color: #fef3c7;
}
.lh-stat-amber .lh-stat-icon-wrapper {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.3);
}
.lh-stat-amber .stat-val {
  color: #78350f;
}

/* Card Roxo (Armazenamento / Storage) */
.lh-stat-purple {
  background: linear-gradient(145deg, #ffffff 0%, #faf5ff 100%);
  border-top: 3px solid #8b5cf6;
  border-color: #ede9fe;
}
.lh-stat-purple .lh-stat-icon-wrapper {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(139, 92, 246, 0.3);
}
.lh-stat-purple .stat-val {
  color: #4c1d95;
}

.lh-stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.lh-stat-card:hover .lh-stat-icon-wrapper {
  transform: scale(1.06);
}

/* Badges e Pílulas */
.lh-badge-online {
  background-color: var(--lh-success-light);
  color: var(--lh-success-text);
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lh-badge-online::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--lh-success);
  box-shadow: 0 0 6px var(--lh-success);
  animation: lh-pulse-glow 2s infinite ease-in-out;
}

.lh-badge-offline {
  background-color: var(--lh-bg-subtle);
  color: var(--lh-text-muted);
  border: 1px solid var(--lh-card-border);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lh-badge-offline::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--lh-text-subtle);
}

@keyframes lh-pulse-glow {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Botões */
.lh-btn-primary {
  background: var(--lh-primary);
  border: 1px solid var(--lh-primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 18px;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.lh-btn-primary:hover {
  background: var(--lh-primary-hover);
  border-color: var(--lh-primary-hover);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.lh-btn-outline {
  background: #ffffff;
  border: 1px solid var(--lh-card-border);
  color: var(--lh-text-secondary);
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 16px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.lh-btn-outline:hover {
  background: var(--lh-bg-subtle);
  border-color: var(--lh-card-border-hover);
  color: var(--lh-text);
}

/* Campos de Formulário */
.lh-form-control {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--lh-text) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 0.95rem !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.lh-form-control:focus {
  border-color: var(--lh-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none !important;
}

.lh-form-control::placeholder {
  color: var(--lh-text-subtle) !important;
}

/* Sidebar Azul Fixa e Elegante (Não obedece ao scroll geral) */
.lh-sidebar {
  width: 270px;
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 40%, #172554 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1040;
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.1);
}

.lh-sidebar-heading {
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1.1rem 0.8rem 0.35rem 0.8rem;
}

.lh-sidebar-link {
  color: #dbeafe;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 0.92rem;
  transition: all 0.15s ease;
  margin-bottom: 3px;
}

.lh-sidebar-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(3px);
}

.lh-sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 3px solid #60a5fa;
}

.lh-sidebar-link .nav-icon {
  color: #93c5fd;
  transition: color 0.15s ease;
}

.lh-sidebar-link:hover .nav-icon,
.lh-sidebar-link.active .nav-icon {
  color: #ffffff;
}

/* User Card na base da Sidebar */
.lh-sidebar-user-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
}

.lh-navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--lh-card-border);
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Compensação para a Sidebar Fixa no Desktop */
@media (min-width: 992px) {
  .main-wrapper {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
  }
}

/* Tabelas Claras e Limpas */
.table-lh {
  color: var(--lh-text);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.table-lh thead th {
  background: var(--lh-bg-subtle);
  color: var(--lh-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-top: 1px solid var(--lh-card-border);
  border-bottom: 1px solid var(--lh-card-border);
}

.table-lh thead th:first-child {
  border-left: 1px solid var(--lh-card-border);
  border-top-left-radius: 10px;
}

.table-lh thead th:last-child {
  border-right: 1px solid var(--lh-card-border);
  border-top-right-radius: 10px;
}

.table-lh tbody tr {
  background: #ffffff;
  transition: background 0.15s ease;
}

.table-lh tbody tr:hover {
  background: #f8fafc;
}

.table-lh td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--lh-card-border);
  vertical-align: middle;
}

.table-lh tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

.table-lh tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

.table-lh tbody td:first-child {
  border-left: 1px solid var(--lh-card-border);
}

.table-lh tbody td:last-child {
  border-right: 1px solid var(--lh-card-border);
}

/* Barra de Progresso */
.lh-progress {
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
}

.lh-progress .progress-bar {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 9999px;
}

/* Layout Responsivo para Dispositivos Móveis */
@media (max-width: 991.98px) {
  .lh-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }
  
  .lh-sidebar.show {
    transform: translateX(0);
  }
  
  .lh-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1030;
  }
  
  .lh-sidebar-backdrop.show {
    display: block;
  }
}