/*
 * GenieACS Custom Theme - NetLink Internet
 * Creado: 2025-12-17
 * Objetivo: UI mas moderna y user-friendly
 */

/* ==========================================
   VARIABLES - PALETA DE COLORES MODERNA
   ========================================== */
:root {
  /* Colores principales - Azul profesional */
  --color1: #e2e8f0 !important;  /* Gris claro bordes */
  --color2: #94a3b8 !important;  /* Gris medio */
  --color3: #f8fafc !important;  /* Fondo inputs */
  --color4: #2563eb !important;  /* Azul principal */
  --color5: #1e293b !important;  /* Texto oscuro */
  
  /* Colores adicionales */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --background: #f1f5f9;
  --surface: #ffffff;
  --border: #e2e8f0;
  
  /* Status colors mejorados */
  --status-red: 0 84% 60% !important;
  --status-green: 142 71% 45% !important;
  --status-gray: 215 14% 80% !important;
  --status-yellow: 38 92% 50% !important;
  
  /* Tipografia */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transiciones */
  --fade: 0.15s !important;
}

/* ==========================================
   TIPOGRAFIA GLOBAL
   ========================================== */
body, input, button, select, option, textarea {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   HEADER - BARRA SUPERIOR
   ========================================== */
#header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-bottom: none !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
}

#header > .logo > img {
  filter: brightness(0) invert(1) !important;
  height: 48px !important;
  margin: 12px 20px !important;
}

#header > .logo > .version {
  color: rgba(255,255,255,0.7) !important;
  font-size: 11px !important;
}

/* Navegacion tabs */
#header > nav > ul > li {
  background-color: rgba(255,255,255,0.1) !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 4px !important;
  transition: all 0.2s ease !important;
}

#header > nav > ul > li:hover {
  background-color: rgba(255,255,255,0.2) !important;
}

#header > nav > ul > li.active {
  background-color: var(--surface) !important;
}

#header > nav > ul > li > a,
#header > nav > ul > li > a:visited,
#header > nav > ul > li > a:hover {
  color: white !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#header > nav > ul > li.active > a {
  color: var(--primary) !important;
}

/* Menu usuario */
#header > .user-menu {
  margin: 10px 20px !important;
}

#header > .user-menu a {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

#header > .user-menu a:hover {
  background: rgba(255,255,255,0.25) !important;
}

/* ==========================================
   SIDEBAR - MENU LATERAL
   ========================================== */
#side-menu {
  background-color: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  padding: 16px 0 !important;
}

#side-menu > ul > li > a {
  background-color: transparent !important;
  color: var(--color5) !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin: 2px 0 !important;
  font-size: 14px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

#side-menu > ul > li > a:hover {
  background-color: var(--background) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}

#side-menu > ul > li.active > a {
  background-color: #eff6ff !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ==========================================
   CONTENIDO PRINCIPAL
   ========================================== */
#content-wrapper {
  background-color: var(--background) !important;
}

#content {
  background-color: var(--surface) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  padding: 24px !important;
  margin: 20px !important;
}

/* ==========================================
   TITULOS
   ========================================== */
h1 {
  color: var(--color5) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--border) !important;
}

h2 {
  color: var(--color5) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

h3 {
  color: var(--color5) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ==========================================
   TABLAS
   ========================================== */
table.table {
  width: 100% !important;
  background: var(--surface) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}

table.table th {
  background-color: var(--primary) !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: none !important;
}

table.table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 14px !important;
}

table.table.highlight > tbody > tr:hover {
  background-color: #f0f9ff !important;
}

table.table tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Links en tablas */
table.table a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

table.table a:hover {
  color: var(--primary-dark) !important;
  text-decoration: underline !important;
  background: none !important;
}

/* ==========================================
   BOTONES
   ========================================== */
button, input[type=button] {
  background-color: var(--primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--shadow-sm) !important;
}

button:hover:enabled, input[type=button]:hover:enabled {
  background-color: var(--primary-dark) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px) !important;
}

button:disabled, input[type=button]:disabled {
  background-color: #94a3b8 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

button.primary, input[type=button].primary {
  background-color: var(--primary) !important;
}

button.critical, input[type=button].critical {
  background-color: var(--danger) !important;
  color: white !important;
}

button.critical:hover:enabled {
  background-color: #dc2626 !important;
}

/* Botones secundarios */
.actions-bar > button {
  margin-right: 12px !important;
}

/* ==========================================
   INPUTS Y FORMULARIOS
   ========================================== */
input, select, textarea, .CodeMirror {
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background-color: var(--surface) !important;
  transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus,
input:hover, select:hover, textarea:hover,
.CodeMirror:focus, .CodeMirror:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

input.error, select.error, textarea.error {
  border-color: var(--danger) !important;
  background-color: #fef2f2 !important;
}

/* Filter input */
.filter > input {
  width: 400px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
}

/* ==========================================
   TAGS
   ========================================== */
span.tag {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  background-image: none !important;
  color: var(--primary) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ==========================================
   DRAWER (Panel superior)
   ========================================== */
#header > .drawer-wrapper > .drawer {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: var(--shadow-lg) !important;
}

#header > .drawer-wrapper > .drawer > .status > .pending.active {
  background-color: rgba(34, 197, 94, 0.2) !important;
  color: #166534 !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
}

#header > .drawer-wrapper > .drawer > .status > .fault.active {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #991b1b !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
}

/* ==========================================
   NOTIFICACIONES
   ========================================== */
#header > .drawer-wrapper > .notifications-wrapper > .notification {
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
}

#header > .drawer-wrapper > .notifications-wrapper > .notification.success {
  background-color: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #166534 !important;
}

#header > .drawer-wrapper > .notifications-wrapper > .notification.error {
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

#header > .drawer-wrapper > .notifications-wrapper > .notification.warning {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

/* ==========================================
   OVERLAYS Y MODALES
   ========================================== */
.overlay-wrapper > .overlay {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.05) !important;
  padding: 24px !important;
}

/* ==========================================
   PARAMETROS
   ========================================== */
table.parameter-list th {
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.all-parameters > input {
  width: 100% !important;
  max-width: 800px !important;
}

.all-parameters > .parameter-list {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  height: 400px !important;
}

/* ==========================================
   PIE CHARTS (Graficos)
   ========================================== */
.pie-chart > svg > path {
  stroke: white !important;
  stroke-width: 2px !important;
}

/* ==========================================
   OVERVIEW PAGE
   ========================================== */
.page-overview > h1 {
  color: var(--primary) !important;
  font-size: 28px !important;
}

/* ==========================================
   WIZARD (Setup inicial)
   ========================================== */
.wizard-dialog {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 32px !important;
}

/* ==========================================
   LOADING SPINNER
   ========================================== */
.loading-overlay:after {
  width: 40px !important;
  height: 40px !important;
}

/* ==========================================
   SCROLLBARS (Webkit)
   ========================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================
   RESPONSIVE - Mobile friendly
   ========================================== */
@media (max-width: 768px) {
  #content {
    margin: 10px !important;
    padding: 16px !important;
  }
  
  #header > nav > ul > li > a {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  
  table.table td, table.table th {
    padding: 8px 10px !important;
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
  #header, #side-menu {
    display: none !important;
  }
  
  #content {
    margin: 0 !important;
    box-shadow: none !important;
  }
}