/* ================================================
   WAYSOLUTIONS DESIGN SYSTEM v1.0
   Overrides sobre LeptonX Lite + Bootstrap 5
================================================ */

/* ── 1. Variables de marca ── */
:root {
  /* Paleta principal */
  --ws-blue:        #1A5CCC;
  --ws-blue-deep:   #0D2D6B;
  --ws-blue-night:  #0D1B3E;
  --ws-blue-mid:    #1249A8;
  --ws-gray-blue:   #4A6080;
  --ws-blue-cloud:  #E8F0FC;
  --ws-blue-pale:   #F0F4FD;
  --ws-bg:          #F4F6FB;
  --ws-white:       #FFFFFF;

  /* Estados */
  --ws-success:     #1D9E75;
  --ws-success-bg:  #E1F5EE;
  --ws-warning:     #EF9F27;
  --ws-warning-bg:  #FAEEDA;
  --ws-danger:      #E24B4A;
  --ws-danger-bg:   #FCEBEB;

  /* Texto */
  --ws-text-1:      #0D1B3E;
  --ws-text-2:      #2D3F5E;
  --ws-text-3:      #4A6080;
  --ws-text-4:      #8A9BBC;

  /* Bordes */
  --ws-border:      rgba(26, 92, 204, 0.12);
  --ws-border-md:   rgba(26, 92, 204, 0.22);

  /* Radios */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(13, 27, 62, 0.08);
  --shadow-md: 0 4px 16px rgba(13, 27, 62, 0.10);
  --shadow-lg: 0 8px 32px rgba(13, 27, 62, 0.14);

  /* Tipografía */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  /* Bootstrap overrides */
  --bs-primary:          #1A5CCC;
  --bs-primary-rgb:      26, 92, 204;
  --bs-success:          #1D9E75;
  --bs-success-rgb:      29, 158, 117;
  --bs-warning:          #EF9F27;
  --bs-warning-rgb:      239, 159, 39;
  --bs-danger:           #E24B4A;
  --bs-danger-rgb:       226, 75, 74;
  --bs-body-font-family: 'Source Sans 3', sans-serif;
  --bs-body-color:       #0D1B3E;
  --bs-body-bg:          #F4F6FB;
  --bs-border-color:     rgba(26, 92, 204, 0.15);
  --bs-border-radius:    10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 14px;
  --bs-link-color:       #1A5CCC;
  --bs-link-hover-color: #1249A8;
}

/* ── 2. Base tipográfica ── */
body {
  font-family: var(--font-body) !important;
  font-size: 15px;
  color: var(--ws-text-1);
  background: var(--ws-bg) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display) !important;
  color: var(--ws-text-1);
  font-weight: 700;
}

/* ── 3. LeptonX Sidebar — overrides con selectores exactos ── */

/* Brand color: reemplaza el rosa #f72585 por azul WaySolutions */
:root {
  --lpx-brand: #1A5CCC;
}

/* Fondos del sidebar — cubrir TODOS los contenedores internos */
.lpx-sidebar,
.lpx-sidebar-container,
.lpx-sidebar-container .lpx-sidebar,
.lpx-sidebar .lpx-nav,
.lpx-sidebar .lpx-nav .lpx-nav-menu,
.lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu,
#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-nav-menu,
.lpx-sidebar .lpx-logo-container,
.lpx-sidebar .lpx-scroll-container {
  background-color: #0D1B3E !important;
}

/* Eliminar bordes o separadores del sidebar */
.lpx-sidebar .lpx-logo-container {
  border-bottom: none !important;
  box-shadow:    none !important;
}

/* Texto base del nav */
.lpx-nav,
.lpx-nav-menu .lpx-menu-item-link {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Hover nav link */
.lpx-nav-menu .lpx-menu-item-link:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Ícono en hover — reemplaza --lpx-brand (rosa) */
.lpx-nav-menu .lpx-menu-item-link:hover .lpx-menu-item-icon {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
}

/* Nav link activo/expandido (LeptonX usa .selected y .expanded) */
.lpx-nav-menu .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-menu-item-link.expanded {
  color: #fff !important;
  background-color: rgba(26, 92, 204, 0.28) !important;
  border-left: 3px solid #1A5CCC !important;
}

/* Ícono activo/expandido — reemplaza --lpx-brand (rosa) */
.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .dd-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .dd-icon {
  color: #1A5CCC !important;
  opacity: 1 !important;
}

/* Nombre de la app en sidebar */
.lpx-brand-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* Logo login (fondo claro) */
:root .lpx-brand-logo {
  --lpx-logo:      url('/images/logo/leptonx/logo-light.png');
  --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png');
}

/* Sidebar: ícono W de 40px a la izquierda del texto "WaySolutions" */
.lpx-sidebar .lpx-brand-logo {
  display:             block !important;
  background-image:    url('/images/logo/leptonx/logo-icon-sm.png') !important;
  background-size:     contain !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  width:               36px !important;
  height:              36px !important;
  min-width:           36px !important;
  margin-right:        8px !important;
  flex-shrink:         0 !important;
}

/* Logo en página de login */
.lpx-login-box .lpx-brand-logo,
.lpx-login-text-area .lpx-brand-logo,
.lpx-brand-logo.lpx-login-logo {
  width:               200px !important;
  height:              60px !important;
  background-size:     contain !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  display:             block !important;
}

/* ── 4. LeptonX Topbar overrides ── */
.lpx-navbar,
.lpx-topbar,
header.lpx-header {
  background: #fff !important;
  border-bottom: 1px solid var(--ws-border) !important;
  box-shadow: none !important;
}

.lpx-navbar .navbar-brand,
.lpx-topbar .navbar-brand {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--ws-text-1) !important;
}

/* ── 5. Content area ── */
.lpx-content-container,
.lpx-main-content,
main.lpx-content {
  background: var(--ws-bg) !important;
}

/* ── 6. Cards ── */
.card {
  background: var(--ws-white) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.card:hover {
  box-shadow: var(--shadow-md) !important;
}

.card-header {
  background: var(--ws-white) !important;
  border-bottom: 1px solid var(--ws-border) !important;
  padding: 16px 22px 14px !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ws-text-1) !important;
  margin: 0 !important;
}

.card-body {
  padding: 20px 22px !important;
}

/* ── 7. Botones ── */
.btn {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--r-full) !important;
  border-width: 1.5px !important;
  padding: 8px 18px !important;
  transition: all 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-sm {
  font-size: 12px !important;
  padding: 5px 14px !important;
}

.btn-primary {
  background: var(--ws-blue) !important;
  border-color: var(--ws-blue) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--ws-blue-mid) !important;
  border-color: var(--ws-blue-mid) !important;
}

.btn-secondary {
  background: transparent !important;
  border-color: var(--ws-blue) !important;
  color: var(--ws-blue) !important;
}
.btn-secondary:hover {
  background: var(--ws-blue-cloud) !important;
}

.btn-outline-secondary {
  border-color: var(--ws-border-md) !important;
  color: var(--ws-text-2) !important;
}
.btn-outline-secondary:hover {
  background: var(--ws-blue-pale) !important;
  border-color: var(--ws-blue) !important;
  color: var(--ws-blue) !important;
}

.btn-warning {
  background: var(--ws-warning) !important;
  border-color: var(--ws-warning) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--ws-danger) !important;
  border-color: var(--ws-danger) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--ws-success) !important;
  border-color: var(--ws-success) !important;
  color: #fff !important;
}

/* ── 8. Badges ── */
.badge {
  font-family: var(--font-display) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: var(--r-full) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

.bg-primary,
.badge.bg-primary     { background: var(--ws-blue-cloud) !important; color: #0C447C !important; }
.bg-success,
.badge.bg-success     { background: var(--ws-success-bg) !important; color: #085041 !important; }
.bg-warning,
.badge.bg-warning     { background: var(--ws-warning-bg) !important; color: #633806 !important; }
.bg-danger,
.badge.bg-danger      { background: var(--ws-danger-bg)  !important; color: #791F1F !important; }
.bg-secondary,
.badge.bg-secondary   { background: #ECEEF3 !important; color: #444 !important; }

/* ── 9. Tablas ── */
.table,
.datagrid-table,
.b-table {
  font-size: 14px !important;
  color: var(--ws-text-1) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.table thead th,
.datagrid-table thead th,
.b-table thead th {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--ws-text-3) !important;
  background: var(--ws-bg) !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--ws-border) !important;
  white-space: nowrap !important;
}

.table tbody tr,
.datagrid-table tbody tr,
.b-table tbody tr {
  border-bottom: 1px solid var(--ws-border) !important;
  transition: background 0.1s !important;
}

.table tbody tr:hover,
.datagrid-table tbody tr:hover,
.b-table tbody tr:hover {
  background: var(--ws-blue-pale) !important;
}

.table tbody td,
.datagrid-table tbody td,
.b-table tbody td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  color: var(--ws-text-1) !important;
  border-bottom: 1px solid var(--ws-border) !important;
}

/* ── 10. Formularios ── */
.form-label {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ws-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 5px !important;
}

.form-control,
.form-select {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ws-text-1) !important;
  background: var(--ws-white) !important;
  border: 1px solid var(--ws-border-md) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 13px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ws-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 92, 204, 0.12) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--ws-text-4) !important;
}

.input-group .btn {
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}

.input-group .form-control {
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
}

/* ── 11. Tabs ── */
.nav-tabs {
  border-bottom: 2px solid var(--ws-border) !important;
  gap: 4px !important;
}

.nav-tabs .nav-link {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ws-text-3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  padding: 9px 16px !important;
  margin-bottom: -2px !important;
  transition: all 0.15s !important;
}

.nav-tabs .nav-link:hover {
  color: var(--ws-blue) !important;
  background: var(--ws-blue-pale) !important;
  border-bottom-color: var(--ws-blue-cloud) !important;
}

.nav-tabs .nav-link.active {
  color: var(--ws-blue) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--ws-blue) !important;
}

/* ── 12. Modales ── */
.modal-content {
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}

.modal-header {
  background: var(--ws-white) !important;
  border-bottom: 1px solid var(--ws-border) !important;
  padding: 18px 24px !important;
}

.modal-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ws-text-1) !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--ws-border) !important;
  padding: 14px 24px !important;
  background: var(--ws-bg) !important;
}

/* Modal ancho extra para edición de cubos */
.modal-cube-wide .modal-dialog {
  max-width: 1100px;
  width: 95vw;
}

/* ── 13. Alerts ── */
.alert {
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  border-width: 1px !important;
}

.alert-danger  { background: var(--ws-danger-bg)  !important; border-color: rgba(226,75,74,0.25)   !important; color: #791F1F !important; }
.alert-success { background: var(--ws-success-bg) !important; border-color: rgba(29,158,117,0.25)  !important; color: #085041 !important; }
.alert-warning { background: var(--ws-warning-bg) !important; border-color: rgba(239,159,39,0.25)  !important; color: #633806 !important; }
.alert-info    { background: var(--ws-blue-cloud)  !important; border-color: rgba(26,92,204,0.25)   !important; color: #0C447C !important; }

/* ── 14. Paginación Blazorise ── */
.pagination .page-link {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ws-blue) !important;
  border-color: var(--ws-border) !important;
  border-radius: var(--r-sm) !important;
  margin: 0 2px !important;
}

.pagination .page-item.active .page-link {
  background: var(--ws-blue) !important;
  border-color: var(--ws-blue) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  background: var(--ws-blue-pale) !important;
  border-color: var(--ws-blue) !important;
}

/* ── 15. Page header util classes ── */
.ws-page-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ws-text-1) !important;
  line-height: 1.2 !important;
}

.ws-page-subtitle {
  font-size: 14px !important;
  color: var(--ws-text-3) !important;
  margin-top: 3px !important;
}

/* ── 16. KPI Cards ── */
.ws-kpi-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  transition: box-shadow 0.15s;
}
.ws-kpi-card:hover { box-shadow: var(--shadow-md); }

.ws-kpi-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ws-text-3);
}

.ws-kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ws-text-1);
  line-height: 1;
  margin: 10px 0 6px;
}

.ws-kpi-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.ws-kpi-icon.blue   { background: var(--ws-blue-cloud); color: var(--ws-blue); }
.ws-kpi-icon.green  { background: var(--ws-success-bg); color: var(--ws-success); }
.ws-kpi-icon.amber  { background: var(--ws-warning-bg); color: var(--ws-warning); }
.ws-kpi-icon.red    { background: var(--ws-danger-bg);  color: var(--ws-danger); }

/* ── 17. Spinner de carga ── */
.spinner {
  width: 40px;
  height: 40px;
  display: block;
  position: fixed;
  top: calc(50% - 20px);
  right: calc(50% - 20px);
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--ws-blue);
  opacity: 0.6;
  position: absolute;
  top: 0; left: 0;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation:         sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 { animation-delay: -1s; }

@keyframes sk-bounce {
  0%, 100% { transform: scale(0); }
  50%       { transform: scale(1); }
}

/* ── 18. Brand logo LeptonX ── */
:root .lpx-brand-logo {
  --lpx-logo:      url('/images/logo/leptonx/logo-light.png');
  --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png');
}

/* ── 19. Ocultar primer div duplicado ── */
#ApplicationContainer > div:first-child:not(:only-child) {
  display: none !important;
}

/* ── 20. Texto utilitarios ── */
.text-muted  { color: var(--ws-text-3) !important; }
.text-primary { color: var(--ws-blue) !important; }
.text-success { color: var(--ws-success) !important; }
.text-warning { color: var(--ws-warning) !important; }
.text-danger  { color: var(--ws-danger) !important; }

/* ── 21. Favoritos sidebar ── */
.ws-fav-section { padding: 8px 0 0; }

.ws-fav-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.45);
}

.ws-fav-header-icon {
  font-size: 10px;
  color: #F5C542;
  opacity: .8;
}

.ws-fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-fav-link {
  display: flex !important;
  align-items: center;
  padding: 7px 20px !important;
  font-size: 13px !important;
  gap: 8px;
  color: rgba(255,255,255,.75) !important;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.ws-fav-icon {
  width: 20px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
  color: rgba(255,255,255,.5);
  transition: color .15s;
}

.ws-fav-link:hover,
.ws-fav-link.selected {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.ws-fav-link:hover .ws-fav-icon,
.ws-fav-link.selected .ws-fav-icon {
  color: #1A5CCC !important;
}

.ws-fav-divider {
  margin: 8px 16px 4px;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* Ocultar sección cuando el sidebar está en modo icono (colapsado) */
.hover-trigger .lpx-sidebar-container:not(:hover) .ws-fav-section { display: none; }

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .lpx-sidebar-container:not(:hover) .ws-fav-section { display: none; }
}

/* Botón estrella en cada ítem del menú */
.lpx-menu-item-link { position: relative; }

.ws-star {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1;
  color: rgba(255,255,255,.25);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  z-index: 10;
}

.ws-star.active {
  color: #F5C542;
  opacity: 1 !important;
}

.lpx-menu-item-link:hover .ws-star {
  opacity: 1;
}

.ws-star:hover {
  color: #F5C542;
}