/* custom.css - Tema Material Design 3 (Oscuro) Profesional para KiwiIRC */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* Material Design 3 Dark Colors Pivot */
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;
  
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3B383E;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
}

body, .kiwi-app, .kiwi-wrap, .kiwi-workspace {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  background-color: var(--md-sys-color-surface) !important;
  background-image: none !important; /* Eliminamos gradientes para algo más profesional */
  color: var(--md-sys-color-on-surface) !important;
}

/* -------------------------------------------------------------
   REGLAS CRÍTICAS DE CONTRASTE PARA INPUTS DE TEXTO
------------------------------------------------------------- */
input, textarea, .kiwi-controlinput-inner, .kiwi-controlinput-input, [contenteditable], .ql-editor {
  color: var(--md-sys-color-on-surface) !important;
  background-color: transparent !important;
  caret-color: var(--md-sys-color-primary) !important;
}

/* Forzar el color del texto placeholder */
::placeholder, .ql-editor.ql-blank::before {
  color: var(--md-sys-color-outline) !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------
   COMPONENTES PRINCIPALES
------------------------------------------------------------- */

/* Sidebar izquierda (Network/State browser) */
.kiwi-statebrowser {
  background: var(--md-sys-color-surface-container) !important;
  border-right: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* Sidebar derecha (Userlist/Sidebar pane) */
.kiwi-sidebar {
  background: var(--md-sys-color-surface-container) !important;
  border-left: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* Nicks en listas de usuarios y redes */
.kiwi-userlist-nick, .kiwi-network-name {
  color: var(--md-sys-color-on-surface) !important;
  font-weight: 500 !important;
}

/* Encabezado del canal (Controlbox) */
.kiwi-controlbox {
  background: var(--md-sys-color-surface-container-low) !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  padding: 12px 16px !important;
}

.kiwi-controlbox-header {
  font-weight: 500;
  font-size: 1.15em;
  color: var(--md-sys-color-on-surface) !important;
}

/* -------------------------------------------------------------
   AREA DE MENSAJES (CHAT)
------------------------------------------------------------- */
.kiwi-messagelist {
  background: var(--md-sys-color-surface) !important;
}

.kiwi-messagelist-message {
  padding: 8px 16px !important;
  margin: 4px 8px;
  border-radius: 8px;
  color: var(--md-sys-color-on-surface) !important;
  transition: background-color 0.15s ease;
  line-height: 1.5;
}

.kiwi-messagelist-message:hover {
  background-color: var(--md-sys-color-surface-container) !important;
}

/* Tiempos de los mensajes */
.kiwi-messagelist-time {
  color: var(--md-sys-color-on-surface-variant) !important;
}

/* Nicks en chat */
.kiwi-messagelist-nick {
  font-weight: 700 !important;
  font-size: 0.95em;
  color: var(--md-sys-color-primary) !important;
}

/* -------------------------------------------------------------
   INPUT DE MENSAJES (Abajo)
------------------------------------------------------------- */
.kiwi-controlinput {
  background: var(--md-sys-color-surface-container) !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--md-sys-color-outline-variant) !important;
}

.kiwi-controlinput-inner {
  background-color: var(--md-sys-color-surface-container-high) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  border-radius: 28px !important; /* M3 full radius */
  padding: 8px 20px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  min-height: 48px;
  display: flex !important;
  align-items: center;
}

.kiwi-controlinput-inner:focus-within {
  border-color: var(--md-sys-color-primary) !important;
  border-width: 2px !important;
  padding: 7px 19px !important; /* Compensar 1px extra de borde */
}

/* -------------------------------------------------------------
   BOTONES (Estilo Filled / Pill de Material 3)
------------------------------------------------------------- */
.u-button,
.kiwi-welcome-simple-start,
.kiwi-customserver-start {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border: none !important;
  border-radius: 100px !important; /* Bordes totalmente redondeados */
  padding: 10px 24px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
  text-transform: none !important;
  font-size: 0.95em !important;
}

.u-button:hover,
.kiwi-welcome-simple-start:hover,
.kiwi-customserver-start:hover {
  background-color: #EADDFF !important; /* Primary hover */
}

/* -------------------------------------------------------------
   VENTANAS MODALES / DIÁLOGOS
------------------------------------------------------------- */
.u-window {
  background: var(--md-sys-color-surface-container-high) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: 28px !important; /* M3 Dialog radius */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
  color: var(--md-sys-color-on-surface) !important;
}

.u-window-header {
  background: transparent !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface) !important;
}

/* -------------------------------------------------------------
   ESTILOS DE LISTAS (Salas/Redes)
------------------------------------------------------------- */
.kiwi-statebrowser-channel, .kiwi-statebrowser-network {
  transition: background-color 0.2s ease;
  border-radius: 20px !important; /* M3 Navigation Drawer style */
  margin: 4px 12px !important;
  padding: 10px 16px !important;
  color: var(--md-sys-color-on-surface-variant) !important;
}

.kiwi-statebrowser-channel:hover, .kiwi-statebrowser-network:hover {
  background-color: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface) !important;
  padding-left: 16px !important; /* Remover desplazamiento molesto */
}

.kiwi-statebrowser-channel.kiwi-statebrowser-channel-active {
  background-color: var(--md-sys-color-primary-container) !important;
  border-left: none !important;
  color: var(--md-sys-color-on-primary-container) !important;
  font-weight: 500 !important;
}

/* Iconos y herramientas */
.kiwi-controlbox-tools i, .kiwi-app i {
  color: var(--md-sys-color-on-surface-variant) !important;
  transition: color 0.2s ease;
}

.kiwi-controlbox-tools i:hover, .kiwi-app i:hover {
  color: var(--md-sys-color-on-surface) !important;
}

/* Avatares más limpios */
.kiwi-avatar {
  border-radius: 50% !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* Scrollbars profesionales y discretos */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-outline);
}

/* -------------------------------------------------------------
   PANELES LATERALES, INFO DE USUARIO Y FORMULARIOS
------------------------------------------------------------- */
.kiwi-sidebar, .kiwi-sidebar-content, .kiwi-userbox, .kiwi-userprofile, .u-form {
  color: var(--md-sys-color-on-surface) !important;
}

.kiwi-sidebar *, .kiwi-userbox *, .kiwi-userprofile *, .u-form *, .u-form label, .u-form span {
  color: var(--md-sys-color-on-surface) !important;
}

.kiwi-sidebar-options, .kiwi-userprofile-info {
  color: var(--md-sys-color-on-surface-variant) !important;
}

/* -------------------------------------------------------------
   CHECKBOXES Y RADIO BUTTONS (Material Design 3)
------------------------------------------------------------- */
input[type="checkbox"], input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--md-sys-color-outline) !important;
  border-radius: 4px !important;
  background-color: var(--md-sys-color-surface-container) !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-content: center !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--md-sys-color-primary) !important;
  border-color: var(--md-sys-color-primary) !important;
}

input[type="checkbox"]:checked::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  box-shadow: inset 1em 1em var(--md-sys-color-on-primary) !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

input[type="radio"]:checked::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: var(--md-sys-color-on-primary) !important;
}

/* -------------------------------------------------------------
   INPUTS DE LOGIN Y FORMULARIOS (.u-input)
------------------------------------------------------------- */
.u-input, .kiwi-welcome-simple .u-input,  .kiwi-welcome-simple-form {
  background: transparent !important;
  border: none !important;
}

/* Forzar que CUALQUIER input de texto o password, especialmente el de Apodo, tenga fondo oscuro y texto claro legible */
input, input[type="text"], input[type="password"], .u-input input[type="text"], .u-input input[type="password"], .kiwi-welcome-simple input[type="text"], .kiwi-welcome-simple input[type="password"] {
  background-color: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface) !important; /* TEXTO CLARO LEGIBLE (E6E0E9) */
  caret-color: var(--md-sys-color-primary) !important; /* CURSOR VISIBLE (morado) */
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100%;
  box-sizing: border-box !important;
  font-size: 1rem !important;
}

input::placeholder {
  color: var(--md-sys-color-outline) !important;
  opacity: 1 !important;
}

.u-input input:focus, .u-input textarea:focus, .kiwi-welcome-simple input:focus, input:focus {
  border-color: var(--md-sys-color-primary) !important;
  box-shadow: 0 0 0 1px var(--md-sys-color-primary) !important;
  background-color: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface) !important; /* Mantener al enfocar */
}

.u-input span, .kiwi-welcome-simple label, .kiwi-welcome-simple .u-input label, .kiwi-welcome-simple-pass-lbl {
  color: var(--md-sys-color-on-surface-variant) !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* -------------------------------------------------------------
   HERRAMIENTAS DEL INPUT (Botones de Envío, Emojis, etc.)
------------------------------------------------------------- */
.kiwi-controlinput-tools, .kiwi-controlinput-tools-container, .kiwi-controlinput-plugins {
  background-color: transparent !important;
  background: transparent !important;
}

.kiwi-controlinput-tool, .kiwi-controlinput-button, .kiwi-app i.fa-paper-plane, .kiwi-app i.fa-smile {
  background-color: transparent !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border: none !important;
}

.kiwi-controlinput-tool:hover, .kiwi-controlinput-button:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: 50%;
}

.kiwi-controlinput-tools {
  filter: invert(1) hue-rotate(180deg) brightness(1.5); /* Truco rápido si son iconos SVG/IMG negros fijos */
}