/* Modern Theme - Design Limpo e Elegante */
:root {
  /* Cores Principais Suaves */
  --primary: #4A90E2;
  --primary-light: #E8F2FF;
  --primary-hover: #357ABD;
  
  --secondary: #7B68EE;
  --secondary-light: #F0EDFF;
  
  --accent: #FF8A65;
  --accent-light: #FFF3F0;
  
  /* Cores Neutras - Usar variáveis do theme-system */
  --bg: var(--bg-secondary, #F5F7FA);
  --bg-card: var(--bg-primary, #FFFFFF);
  --bg-hover: var(--bg-hover, #FAFBFC);
  
  --text-primary: var(--text-primary, #1A202C);
  --text-secondary: var(--text-secondary, #4A5568);
  --text-tertiary: var(--text-tertiary, #718096);
  --text-light: var(--text-disabled, #A0AEC0);
  
  --border: var(--border-color, #E2E8F0);
  --border-light: var(--border-light, #EDF2F7);
  
  /* Status - Cores Suaves */
  --success: #48BB78;
  --success-light: #F0FFF4;
  --warning: #ED8936;
  --warning-light: #FFFAF0;
  --info: #4299E1;
  --info-light: #EBF8FF;
  --error-soft: #FC8181;
  --error-light: #FFF5F5;
  
  /* Sombras */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Espaçamentos */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}

/* Reset e Base */
* {
  box-sizing: border-box;
}

body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header */
.menu-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: var(--space-4) 0 !important;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.98) !important;
}

.menu-header .title-container {
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.menu-header .title-container img {
  height: 28px;
  border-radius: 6px;
}

.menu-header .item {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.menu-header .item:hover {
  color: var(--primary) !important;
}

.menu-header .item a {
  color: var(--text-secondary) !important;
  transition: color 0.2s ease;
}

.menu-header .item a:hover {
  color: var(--primary) !important;
}

/* User Role Indicator - Sem vermelho */
#user-role-indicator.admin {
  color: var(--text-secondary) !important;
}

#user-role-indicator.admin .icon {
  color: var(--secondary) !important;
}

#user-role-indicator.user {
  color: var(--text-secondary) !important;
}

#user-role-indicator.user .icon {
  color: var(--primary) !important;
}

/* Badges de Role - Cores Suaves */
#user-role-text {
  background: var(--secondary-light) !important;
  color: var(--secondary) !important;
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Cards */
.ui.card,
.ui.cards > .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: var(--space-3) !important;
  overflow: hidden;
}

.ui.card:hover,
.ui.cards > .card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
  border-color: var(--border) !important;
}

.ui.cards > .card.hidden {
  display: none !important;
}

/* Cards por Tipo */
.card.purple {
  border-left: 3px solid var(--secondary) !important;
}

[data-theme="light"] .card.purple:hover {
  background: var(--secondary-light) !important;
}

[data-theme="dark"] .card.purple:hover {
  background: var(--bg-hover) !important;
}

.card.red {
  border-left: 3px solid var(--accent) !important;
}

[data-theme="light"] .card.red:hover {
  background: var(--accent-light) !important;
}

[data-theme="dark"] .card.red:hover {
  background: var(--bg-hover) !important;
}

.card.blue {
  border-left: 3px solid var(--info) !important;
}

[data-theme="light"] .card.blue {
  background: var(--info-light) !important;
}

[data-theme="dark"] .card.blue {
  background: var(--bg-primary) !important;
}

.card.blue:hover {
  background: var(--bg-hover) !important;
}

.card.green {
  border-left: 3px solid var(--success) !important;
}

[data-theme="light"] .card.green {
  background: var(--success-light) !important;
}

[data-theme="dark"] .card.green {
  background: var(--bg-primary) !important;
}

.card.green:hover {
  background: var(--bg-hover) !important;
}

/* Ícones nos Cards */
.ui.card .header i.icon,
.ui.card .header .fas,
.ui.card .header .fa {
  margin-right: var(--space-2);
  color: var(--secondary-soft);
  font-size: 1.125rem;
}

.card.purple .header i.icon,
.card.purple .header .fas,
.card.purple .header .fa {
  color: var(--secondary) !important;
}

.card.red .header i.icon,
.card.red .header .fas,
.card.red .header .fa {
  color: var(--accent) !important;
}

.card.blue .header i.icon,
.card.blue .header .fas,
.card.blue .header .fa {
  color: var(--info) !important;
}

.card.green .header i.icon,
.card.green .header .fas,
.card.green .header .fa {
  color: var(--success) !important;
}

/* Card Content */
.ui.card .content {
  padding: var(--space-5) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Instance Card Compacto */
#instances-cards .ui.card {
  max-width: 100% !important;
}

#instances-cards .ui.three.column.grid {
  width: 100% !important;
  margin: 0 !important;
}

#instances-cards .ui.three.column.grid > .column {
  padding: 0 var(--space-3) !important;
}

#instances-cards .ui.very.relaxed.list {
  margin: 0 !important;
}

#instances-cards .ui.very.relaxed.list .item {
  padding: 0.4rem 0 !important;
  border: none !important;
  margin: 0 !important;
}

#instances-cards .ui.small.header {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Responsive para Instance Card */
@media (max-width: 768px) {
  #instances-cards .ui.three.column.grid > .column {
    padding: 0 var(--space-2) !important;
  }
  
  #instances-cards .ui.very.relaxed.list .item {
    padding: 0.3rem 0 !important;
  }
}

.ui.card .header {
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: var(--space-2);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui.card .description {
  color: var(--text-secondary) !important;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Botões */
.ui.button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: var(--space-3) var(--space-5) !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-xs) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
}

.dashboard-button {
  margin: var(--space-1) !important;
  min-width: auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding: var(--space-2) var(--space-4) !important;
}

.ui.table .dashboard-button {
  margin: var(--space-1) !important;
  padding: var(--space-2) var(--space-3) !important;
  font-size: 0.8125rem !important;
}

.ui.button i.icon {
  margin: 0 var(--space-1) 0 0 !important;
}

.ui.primary.button {
  background: var(--primary) !important;
  color: white !important;
}

.ui.primary.button:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}

.ui.secondary.button {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.ui.secondary.button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--text-light) !important;
}

.ui.green.button {
  background: var(--success) !important;
  color: white !important;
}

.ui.green.button:hover {
  background: #38A169 !important;
  transform: translateY(-1px);
}

/* Botões de Ação - Sem Vermelho Forte */
.ui.red.button,
.ui.negative.button {
  background: var(--error-soft) !important;
  color: white !important;
}

.ui.red.button:hover,
.ui.negative.button:hover {
  background: #F56565 !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}

.ui.orange.button {
  background: var(--warning) !important;
  color: white !important;
}

.ui.orange.button:hover {
  background: #DD6B20 !important;
}

/* Tabelas */
.ui.table {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
}

.ui.table thead th {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border) !important;
  padding: var(--space-4) !important;
}

.ui.table tbody td {
  border-color: var(--border-light) !important;
  padding: var(--space-4) !important;
  color: var(--text-primary) !important;
}

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

/* Status na Tabela */
.ui.table .positive,
.ui.table .green {
  color: var(--success) !important;
  font-weight: 500;
}

.ui.table .negative,
.ui.table .red {
  color: var(--error-soft) !important;
  font-weight: 500;
}

.status.Yes,
.status.true {
  color: var(--success) !important;
  font-weight: 500;
}

.status.No,
.status.false {
  color: var(--warning) !important;
  font-weight: 500;
}

/* Labels Horizontais */
.ui.horizontal.label {
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  padding: var(--space-1) var(--space-2) !important;
}

.ui.horizontal.label.red {
  background: var(--error-light) !important;
  color: var(--error-soft) !important;
  border: none !important;
}

.ui.horizontal.label.orange {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
  border: none !important;
}

.ui.horizontal.label.green {
  background: var(--success-light) !important;
  color: var(--success) !important;
  border: none !important;
}

/* Ícones nas tabelas */
.ui.table .orange.icon,
.times.orange.icon {
  color: var(--warning) !important;
}

.ui.table .green.icon,
.check.green.icon {
  color: var(--success) !important;
}

/* Headers de Página */
.main-header {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  padding: var(--space-6) var(--space-8) !important;
  margin-bottom: var(--space-6) !important;
  box-shadow: var(--shadow-sm) !important;
}

.main-header .ui.header {
  color: var(--text-primary) !important;
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
}

.main-header .ui.header .sub.header {
  color: var(--text-secondary) !important;
  font-weight: 400;
  font-size: 0.9375rem;
  margin-top: var(--space-1);
}

/* Dividers */
.ui.horizontal.divider {
  color: var(--text-tertiary) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: var(--space-10) 0 var(--space-4) 0 !important;
  border-top: 1px solid var(--border) !important;
  padding-top: var(--space-4);
}

.ui.horizontal.divider:before,
.ui.horizontal.divider:after {
  background: var(--border) !important;
}

/* Modais */
.ui.modal {
  border-radius: 16px !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border-light) !important;
  overflow: hidden;
}

.ui.modal > .header {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--space-5) var(--space-6) !important;
  font-weight: 600;
  font-size: 1.125rem;
}

.ui.modal > .content {
  padding: var(--space-6) !important;
  background: var(--bg-card) !important;
}

.ui.modal > .actions {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: var(--space-4) var(--space-6) !important;
}

/* Forms */
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form input[type="email"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.form select {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-size: 0.875rem;
  transition: all 0.2s ease !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
  outline: none !important;
}

.ui.form label {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: var(--space-2);
}

/* Messages */
.ui.message {
  border-radius: 10px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: var(--space-4) !important;
}

.ui.info.message {
  background: var(--info-light) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--info) !important;
}

.ui.success.message {
  background: var(--success-light) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--success) !important;
}

.ui.warning.message {
  background: var(--warning-light) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--warning) !important;
}

.ui.error.message {
  background: var(--error-light) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--error-soft) !important;
}

/* Segments */
.ui.segment {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--space-4) !important;
}

/* Loading */
.ui.dimmer {
  background-color: rgba(245, 247, 250, 0.95) !important;
  backdrop-filter: blur(4px);
}

/* Listas */
.ui.relaxed.divided.list > .item {
  border-bottom: 1px solid var(--border-light) !important;
  padding: var(--space-4) 0 !important;
}

.ui.relaxed.divided.list > .item:hover {
  background: var(--bg-hover) !important;
  border-radius: 8px;
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

/* Dropdowns */
.ui.dropdown {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
}

.ui.dropdown .menu {
  border-radius: 8px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-lg) !important;
  margin-top: var(--space-1) !important;
  background: var(--bg-card) !important;
}

.ui.dropdown .menu .item {
  color: var(--text-primary) !important;
  padding: var(--space-3) var(--space-4) !important;
}

.ui.dropdown .menu .item:hover {
  background: var(--bg-hover) !important;
  color: var(--primary) !important;
}

/* Checkbox e Toggle */
.ui.checkbox label {
  color: var(--text-primary) !important;
}

.ui.toggle.checkbox input:checked ~ label:before {
  background: var(--primary) !important;
}

/* Headers com Cores - Remover Vermelho */
.ui.red.header {
  color: var(--text-secondary) !important;
  font-weight: 600;
}

/* Labels e Badges */
.ui.label,
.ui.badge,
.ui.mini.label {
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  padding: var(--space-1) var(--space-2) !important;
  border: none !important;
}

/* Remover vermelhos fortes dos labels */
.ui.red.label,
.ui.mini.red.label {
  background: var(--error-light) !important;
  color: var(--error-soft) !important;
}

.ui.orange.label,
.ui.mini.orange.label {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
}

.ui.green.label,
.ui.mini.green.label {
  background: var(--success-light) !important;
  color: var(--success) !important;
}

.ui.blue.label,
.ui.mini.blue.label {
  background: var(--info-light) !important;
  color: var(--info) !important;
}

.ui.purple.label,
.ui.mini.purple.label {
  background: var(--secondary-light) !important;
  color: var(--secondary) !important;
}

/* Badge ADMIN no header */
#user-role-indicator span#user-role-text {
  background: var(--secondary-light) !important;
  color: var(--secondary) !important;
  padding: var(--space-1) var(--space-2) !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
}

/* Instance Cards Status */
.instance-card .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.instance-card .status-badge.connected {
  background: var(--success-light);
  color: var(--success);
}

.instance-card .status-badge.disconnected {
  background: var(--error-light);
  color: var(--error-soft);
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui.card,
.ui.segment,
.ui.table {
  animation: fadeIn 0.3s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
}

/* Container e Espaçamentos */
.p1 {
  padding: var(--space-4) var(--space-6) !important;
}

.ui.container.fluid {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}

#mainDashboard {
  padding-top: var(--space-4) !important;
  min-height: calc(100vh - 70px) !important;
  overflow: visible !important;
}

/* Admin Grid - Espaçamento do Header */
.admingrid {
  padding-top: var(--space-8) !important;
}

.admingrid h1.ui.header {
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
}

.admingrid #addInstanceButton {
  margin-bottom: var(--space-4) !important;
}

/* Grid de Cards */
.ui.three.column.stackable.grid.cards {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.ui.three.column.stackable.grid.cards > .card {
  flex: 0 0 calc(33.333% - 1.5rem) !important;
  margin: var(--space-3) !important;
  max-width: calc(33.333% - 1.5rem) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .ui.cards > .card {
    margin: var(--space-2) 0 !important;
  }
  
  .ui.three.column.stackable.grid.cards > .card {
    width: 100% !important;
  }
  
  .main-header {
    padding: var(--space-4) var(--space-5) !important;
  }
  
  .menu-header .title-container {
    font-size: 0.9375rem !important;
  }
  
  .ui.card .header {
    font-size: 0.9375rem;
  }
  
  .ui.button {
    padding: var(--space-2) var(--space-4) !important;
    font-size: 0.8125rem !important;
  }
  
  .p1 {
    padding: var(--space-3) var(--space-4) !important;
  }
}