/* ========================================================================
   iTech Vault Tropicalization v2 — sobreescribir CSS variables nativas
   Funciona aunque Angular re-renderice (las variables son globales)
   ======================================================================== */

:root,
html,
html.theme_light,
html.theme_dark,
body {
  /* iTech brand colors mapeados a las escalas Vaultwarden */
  --color-brand-050: 220 240 254;
  --color-brand-100: 198 230 252;
  --color-brand-200: 165 215 248;
  --color-brand-300: 100 188 240;
  --color-brand-400: 50 161 220;
  --color-brand-500: 23 163 222;   /* iTech celeste #17A3DE */
  --color-brand-600: 19 142 195;
  --color-brand-700: 50 101 174;   /* iTech azul #3265AE */
  --color-brand-800: 38 85 145;
  --color-brand-900: 11 60 110;
  --color-brand-950: 6 30 60;

  /* Reemplazar TEAL (Bitwarden primary) por celeste iTech */
  --color-teal-050: 220 240 254;
  --color-teal-100: 198 230 252;
  --color-teal-200: 165 215 248;
  --color-teal-300: 100 188 240;
  --color-teal-400: 50 161 220;
  --color-teal-500: 23 163 222;
  --color-teal-600: 19 142 195;
  --color-teal-700: 50 101 174;
  --color-teal-800: 38 85 145;
  --color-teal-900: 11 60 110;
  --color-teal-950: 6 30 60;

  /* Backgrounds = navy iTech */
  --color-background: 11 22 40 !important;       /* #0B1628 */
  --color-background-alt: 6 14 26 !important;    /* #060E1A */
  --color-background-alt2: 15 27 47 !important;  /* #0F1B2F */

  /* Texto = blanco/gris claro */
  --color-text-main: 226 232 240 !important;
  --color-text-alt: 241 245 249 !important;
  --color-text-headings: 255 255 255 !important;
  --color-text-muted: 148 163 184 !important;
  --color-text-primary: 23 163 222 !important;
  --color-text-contrast: 255 255 255 !important;

  /* Borders */
  --color-border-base: 23 163 222 !important;
}

/* === Forzar fondo dark global === */
html, body {
  background: linear-gradient(180deg, #060E1A 0%, #0B1628 100%) !important;
  color: #E2E8F0 !important;
}

/* === Logo iTech reemplaza Vaultwarden === */
img.new-logo-themed,
img[alt="Vaultwarden"],
img[alt="Bitwarden"],
img.logo-image {
  content: url('/itech-logo.png') !important;
  max-width: 240px !important;
  width: 240px !important;
  height: auto !important;
  filter: drop-shadow(0 4px 16px rgba(23, 163, 222, 0.3));
}

/* === Esconder SVGs decorativos de Vaultwarden === */
svg[viewBox="0 0 501 226"],
svg[viewBox="0 0 506 297"] {
  display: none !important;
}

/* === Cards glassmorphism === */
.tw-bg-background, .tw-bg-background-alt, .tw-bg-background-alt2,
[class*="bg-background"], .card, .login-card, app-login form,
.box, .panel, .vault-item {
  background: rgba(11, 22, 40, 0.7) !important;
  border: 1px solid rgba(23, 163, 222, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
}

/* === Headings === */
h1, h2, h3, .display-4, .heading,
[class*="tw-text-headings"] {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

p, label, span:not([class*="badge"]):not([class*="status"]),
.text-muted, [class*="tw-text-muted"] {
  color: #94A3B8 !important;
}

/* === Inputs === */
input, select, textarea,
.form-control, .form-input,
input.tw-bg-background-alt, input.tw-bg-background {
  background: rgba(15, 27, 47, 0.8) !important;
  border: 1px solid rgba(23, 163, 222, 0.25) !important;
  color: #F1F5F9 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #17A3DE !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(23, 163, 222, 0.15) !important;
}

/* === Botones primary === */
button.btn-primary, .btn.btn-primary,
button.tw-bg-primary, button[class*="primary"]:not([class*="outline"]),
input[type="submit"], .button-primary {
  background: linear-gradient(135deg, #17A3DE 0%, #3265AE 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
}

button.btn-primary:hover, .btn.btn-primary:hover,
button.tw-bg-primary:hover {
  background: linear-gradient(135deg, #1488BC 0%, #265591 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(23, 163, 222, 0.3);
}

/* === Botones outline === */
button.btn-outline-primary, .btn-outline-primary {
  border: 1px solid rgba(23, 163, 222, 0.4) !important;
  color: #17A3DE !important;
  background: transparent !important;
  border-radius: 10px !important;
}

button.btn-outline-primary:hover {
  background: rgba(23, 163, 222, 0.1) !important;
  border-color: #17A3DE !important;
  color: #FFFFFF !important;
}

/* === Sidebar / Nav === */
nav, .nav, .sidenav, .sidebar, header.navbar,
.bit-tab-list, .bit-nav-item {
  background: rgba(6, 14, 26, 0.95) !important;
  backdrop-filter: blur(20px);
  border-color: rgba(23, 163, 222, 0.15) !important;
}

.nav-link, .nav a, .sidebar a {
  color: #94A3B8 !important;
  font-weight: 500;
}

.nav-link.active, .nav a.active, .nav-link:hover {
  color: #17A3DE !important;
}

/* === Status alerts === */
.alert-success, .toast-success, [class*="bg-success"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
  border-left: 4px solid #10B981 !important;
  color: #6EE7B7 !important;
}

.alert-danger, .toast-error, [class*="bg-danger"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)) !important;
  border-left: 4px solid #EF4444 !important;
  color: #FCA5A5 !important;
}

.alert-warning, [class*="bg-warning"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2)) !important;
  border-left: 4px solid #F59E0B !important;
  color: #FCD34D !important;
}

.alert-info, [class*="bg-info"] {
  background: linear-gradient(135deg, rgba(23, 163, 222, 0.2), rgba(50, 101, 174, 0.2)) !important;
  border-left: 4px solid #17A3DE !important;
  color: #7DD3FC !important;
}

/* === Modales === */
.modal-content, .dialog-content {
  background: rgba(11, 22, 40, 0.95) !important;
  border: 1px solid rgba(23, 163, 222, 0.25) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(24px);
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(6, 14, 26, 0.5); }
::-webkit-scrollbar-thumb { background: rgba(23, 163, 222, 0.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(23, 163, 222, 0.5); }

/* === Selection === */
::selection { background: rgba(23, 163, 222, 0.4); color: #FFFFFF; }

/* === Footer === */
footer, .footer {
  background: transparent !important;
  border-top: 1px solid rgba(23, 163, 222, 0.1);
  color: #94A3B8 !important;
}

/* === Spinner === */
.spinner-border, .bwi-spinner { color: #17A3DE !important; }

/* === Vault icons === */
.icon, svg.icon, .bwi { color: inherit !important; }