/* AI Theme overrides to align global template with login design */
:root{
  /* Bootstrap primary in AI violet */
  --bs-primary: #7C3AED;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #22D3EE;
  --bs-link-hover-color: #06B6D4;
  --ai-primary: #7C3AED;
  --ai-secondary: #06B6D4;
  --ai-accent: #22D3EE;
}

/* Links */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Buttons - primary */
.btn-primary {
  color: #05121F;
  background: linear-gradient(90deg, var(--ai-secondary), var(--ai-accent));
  border-color: rgba(34,211,238,0.5);
  box-shadow: 0 6px 16px rgba(6,182,212,.28), inset 0 0 8px rgba(255,255,255,.12);
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.05);
  color: #05121F;
  background: linear-gradient(90deg, var(--ai-secondary), var(--ai-accent));
  border-color: rgba(34,211,238,0.6);
}
.btn-primary:active,
.btn-primary.active {
  filter: none;
  color: #05121F;
  background: linear-gradient(90deg, var(--ai-secondary), var(--ai-accent));
}

/* Outline primary keeps AI hues */
.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary:hover,
.btn-outline-primary:focus { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* Background and text helpers */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }

/* Form focus ring and border tint */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ai-accent);
  box-shadow: 0 0 0 0.2rem rgba(34,211,238,0.15);
}

/* Toggle, switches, and range inputs */
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); }

/* Badges and alerts primary */
.badge.bg-primary { background-color: var(--bs-primary) !important; }
.alert-primary { color: #fff; background-color: rgba(var(--bs-primary-rgb), .16); border-color: rgba(var(--bs-primary-rgb), .5); }

/* Nav active states */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--bs-primary); }
.nav-link { color: var(--bs-link-color); }
.nav-link:hover { color: var(--bs-link-hover-color); }

/* Sidebar collapsed adjustments: larger icons and proper logo fit */
@media (min-width: 1200px) {
  /* Make icons more prominent when the menu is collapsed */
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
  .layout-menu .menu-vertical .menu-inner > .menu-item > .menu-link .menu-icon {
    font-size: 1.75rem; /* was ~1.375rem */
    width: 1.75rem;
  }
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
  .layout-menu .menu-vertical .menu-inner > .menu-item > .menu-link .menu-icon svg,
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
  .layout-menu .menu-vertical .menu-inner > .menu-item > .menu-link .menu-icon i {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Ensure the brand logo is fully visible and not cropped */
  .layout-menu .app-brand-logo {
    overflow: visible; /* avoid cropping */
  }
  .layout-menu .app-brand-logo img,
  .layout-menu .app-brand-logo svg {
    display: block;
    width: 100%;
    max-height: 40px;
    height: auto;
    object-fit: contain; /* show the whole logo */
  }
}

/* Tamaños consistentes para SVG en el menú */
.menu-vertical .menu-link svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

/* Cuando el menú está colapsado */
.layout-menu-collapsed .menu-vertical .menu-link svg {
  width: 1.25rem;
  height: 1.25rem;
}