/* ==========================================================================
   new_new admin panel — navigation & look-and-feel polish
   Extends the login's visual language (indigo/purple #5b47fb, clean cards,
   soft shadows) to the sidebar, header and base components everywhere the
   shared layoutHome/header templates are used. Conservative layer only:
   no HTML/structure changes beyond enabling the theme's own
   .az-sidebar-indigo-dark preset in header.php.
   ========================================================================== */

:root {
  --nn-primary: #5b47fb;
  --nn-primary-dark: #4433d1;
  --nn-primary-darker: #2f2694;
  --nn-ink: #26292c;
  --nn-muted: #7c828c;
  --nn-border: #e6e7ee;
  --nn-surface: #ffffff;
  --nn-radius-lg: 14px;
  --nn-radius-md: 10px;
  --nn-radius-sm: 8px;
  --nn-shadow: 0 2px 16px rgba(28, 39, 60, .06);
  --nn-shadow-hover: 0 10px 28px rgba(28, 39, 60, .12);
  --nn-transition: all .2s ease;

  /* Bootstrap 4 contextual colors used across templates, kept in sync
     so buttons/badges/dropdown accents match without touching markup. */
  --nn-secondary: #6c757d;
  --nn-secondary-dark: #5a6268;
  --nn-success: #28a745;
  --nn-success-dark: #218838;
  --nn-danger: #dc3545;
  --nn-danger-dark: #c82333;
  --nn-warning: #ffc107;
  --nn-warning-dark: #e0a800;
  --nn-info: #17a2b8;
  --nn-info-dark: #138496;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Sidebar ---------- */
/* Align the theme's built-in indigo-dark preset to the login's accent */
.az-sidebar-indigo-dark {
  background-color: var(--nn-primary-darker) !important;
  background-image: linear-gradient(180deg, var(--nn-primary-dark) 0%, var(--nn-primary-darker) 100%);
}

/* The base theme puts horizontal padding on .az-sidebar-body, so every
   row's active/hover background sits inset from it and can never reach
   the sidebar's real edges. Move that padding onto the row content
   (nav-label / nav-link) instead, so .nav-item itself spans the full
   width and its ::before highlight can go truly edge-to-edge. */
.az-sidebar-indigo-dark .az-sidebar-body {
  padding-left: 0;
  padding-right: 0;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-label {
  padding-left: 20px;
  padding-right: 20px;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-link {
  padding-left: 20px;
  padding-right: 20px;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-link.with-sub::after {
  right: 20px;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-item + .nav-item::before {
  left: 50px;
  right: 20px;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-sub {
  margin-left: 27px;
  padding-right: 20px;
}

/* Base theme's darker "open section" band behind the submenu
   (.nav-sub::before) was calibrated for the old .az-sidebar-body
   padding (20px) and the old .nav-sub margin-left (7px). Now that
   padding lives on .nav-link instead and .nav-sub's margin-left is
   27px (see above), the old hardcoded offsets (-32px/-20px) overshoot
   past the sidebar's real edges into the content area. Recompute for
   the new geometry: -27px reaches the sidebar's left edge, and 0
   already sits flush with its right edge. */
.az-sidebar-indigo-dark .az-sidebar-body .nav-sub::before {
  left: -27px;
  right: 0;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-item.active::before {
  background-color: rgba(255, 255, 255, .08);
  left: 0;
  right: 0;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-link {
  border-radius: var(--nn-radius-sm);
  transition: var(--nn-transition);
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-item.active > .nav-link,
.az-sidebar-indigo-dark .az-sidebar-body .nav-item.active > .nav-link:hover {
  color: #fff;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-sub-item.active .nav-sub-link {
  font-weight: 600;
}

/* Base theme sets nav text at 35-45% white opacity, which only reaches
   ~2.7-3.5:1 contrast against this dark background (WCAG AA needs 4.5:1
   for body text). Raise opacity so labels stay legible. */
.az-sidebar-indigo-dark .az-sidebar-body .nav-label {
  color: rgba(255, 255, 255, .6);
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-link {
  color: rgba(255, 255, 255, .78);
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-link i {
  color: rgba(255, 255, 255, .85);
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-link:hover,
.az-sidebar-indigo-dark .az-sidebar-body .nav-link:focus {
  color: #fff;
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-sub-link {
  color: rgba(255, 255, 255, .72);
}

.az-sidebar-indigo-dark .az-sidebar-body .nav-sub-link:hover,
.az-sidebar-indigo-dark .az-sidebar-body .nav-sub-link:focus {
  color: #fff;
}

.az-sidebar-header {
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* veikel_logo.png is purple-on-transparent, made for a light background.
   On the dark indigo sidebar it barely reads (purple text on near-purple
   bg). Force it to solid white here instead of shipping a second asset. */
.az-sidebar-indigo-dark .az-sidebar-header .az-logo img {
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* ---------- Header ---------- */
.az-header {
  background: var(--nn-surface);
  box-shadow: var(--nn-shadow);
}

.az-header-center .form-control {
  border-radius: 100px;
  border-color: var(--nn-border);
  transition: var(--nn-transition);
}

.az-header-center .form-control:focus {
  border-color: var(--nn-primary);
  box-shadow: 0 0 0 3px rgba(91, 71, 251, .15);
}

.az-header-right .az-img-user img,
.az-profile-menu .az-img-user img {
  transition: var(--nn-transition);
}

.az-profile-menu:hover .az-img-user img {
  box-shadow: 0 0 0 3px rgba(91, 71, 251, .2);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--nn-radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: var(--nn-transition);
}

.btn:active {
  transform: translateY(0) scale(.98);
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 3px rgba(91, 71, 251, .25);
}

.btn:disabled,
.btn.disabled {
  transform: none;
  box-shadow: none;
  opacity: .55;
}

.btn-sm {
  border-radius: var(--nn-radius-sm);
  font-weight: 600;
}

.btn-az-primary,
.btn-primary {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
}

.btn-az-primary:hover,
.btn-az-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--nn-primary-dark);
  border-color: var(--nn-primary-dark);
  box-shadow: 0 8px 18px rgba(91, 71, 251, .25);
  transform: translateY(-1px);
}

.btn-purple {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
  color: #fff;
}

.btn-purple:hover {
  background-color: var(--nn-primary-dark);
  border-color: var(--nn-primary-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(91, 71, 251, .25);
  transform: translateY(-1px);
}

/* "Acciones" buttons and other neutral actions get a quieter, flatter
   treatment so the primary/purple CTAs keep visual priority. */
.btn-secondary {
  background-color: #f3f4f8;
  border-color: #f3f4f8;
  color: var(--nn-ink);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e9eaf2;
  border-color: #e9eaf2;
  color: var(--nn-ink);
  box-shadow: 0 6px 14px rgba(28, 39, 60, .08);
  transform: translateY(-1px);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--nn-success-dark);
  border-color: var(--nn-success-dark);
  box-shadow: 0 8px 18px rgba(40, 167, 69, .22);
  transform: translateY(-1px);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--nn-danger-dark);
  border-color: var(--nn-danger-dark);
  box-shadow: 0 8px 18px rgba(220, 53, 69, .22);
  transform: translateY(-1px);
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--nn-info-dark);
  border-color: var(--nn-info-dark);
  box-shadow: 0 8px 18px rgba(23, 162, 184, .22);
  transform: translateY(-1px);
}

.btn-group .btn {
  border-radius: var(--nn-radius-sm);
}

/* ---------- Dropdowns (row "Acciones" menus, header menus) ---------- */
.dropdown-menu {
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius-md);
  box-shadow: var(--nn-shadow-hover);
  padding: 6px;
  margin-top: 6px;
}

.dropdown-item {
  border-radius: var(--nn-radius-sm);
  padding: .5rem .75rem;
  font-size: .9rem;
  transition: var(--nn-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(91, 71, 251, .08);
  color: var(--nn-primary-dark);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--nn-primary);
  color: #fff;
}

.dropdown-divider {
  border-top-color: var(--nn-border);
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius-lg);
  box-shadow: var(--nn-shadow);
  transition: var(--nn-transition);
}

.card:hover {
  box-shadow: var(--nn-shadow-hover);
}

.card-header {
  border-bottom-color: var(--nn-border);
}

/* ---------- Tables ---------- */
.table-responsive {
  /* sin borde ni esquinas redondeadas: pedido explicito, se aplica a todas
     las tablas del sitio (antes tenian un borde gris + esquinas redondeadas
     que no se querian).
     overflow: hidden (ambos ejes) tapaba ademas el scroll horizontal de
     Bootstrap: en tablas mas anchas que su contenedor (ej: search/keywords
     con 6 columnas en un col-lg-9), las columnas de la derecha quedaban
     inaccesibles, sin scrollbar. */
  overflow-x: auto;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  background-color: #fafafd;
  border-bottom-width: 1px;
  border-top: none;
  color: var(--nn-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .03em;
  padding-top: .9rem;
  padding-bottom: .9rem;
  white-space: nowrap;
}

.table td,
.table th {
  vertical-align: middle;
  padding-top: .85rem;
  padding-bottom: .85rem;
  border-color: var(--nn-border);
}

.table tbody tr {
  transition: background-color .15s ease;
}

.table-striped tbody tr:hover,
.table tbody tr:hover {
  background-color: rgba(91, 71, 251, .035);
}

.table .min-width {
  width: 1%;
  white-space: nowrap;
}

/* ---------- Badges ---------- */
/* Soft, tinted badges instead of solid saturated fills — reads calmer
   next to the flatter buttons/tables above. */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
  padding: .4em .65em;
}

.badge-pill {
  font-weight: 600;
}

.badge-primary {
  background-color: rgba(91, 71, 251, .12);
  color: var(--nn-primary-dark);
}

.badge-secondary {
  background-color: #eef0f4;
  color: var(--nn-muted);
}

.badge-success {
  background-color: rgba(40, 167, 69, .12);
  color: var(--nn-success-dark);
}

.badge-danger {
  background-color: rgba(220, 53, 69, .12);
  color: var(--nn-danger-dark);
}

.badge-info {
  background-color: rgba(23, 162, 184, .12);
  color: var(--nn-info-dark);
}

.badge-warning {
  background-color: rgba(255, 193, 7, .18);
  color: #8a6400;
}

/* ---------- Empty states / alerts ---------- */
.alert {
  border-radius: var(--nn-radius-md);
  border: 1px solid transparent;
}

/* ---------- Pagination ---------- */
.pagination .page-item.active .page-link {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
}

.pagination .page-link {
  border-radius: var(--nn-radius-sm);
  color: var(--nn-primary);
  transition: var(--nn-transition);
}

.pagination .page-link:hover {
  background-color: rgba(91, 71, 251, .08);
  color: var(--nn-primary-dark);
}

/* ---------- Dropdown menus inside scrollable tables ---------- */
/* table-responsive clips row-action dropdowns with overflow-x:auto; once one
   is open, stop clipping so it can render above neighboring cards/panels. */
.table-responsive:has(.dropdown-menu.show) {
  overflow: visible;
}

.table-responsive .dropdown-menu {
  z-index: 1050;
}

/* Let a very wide page (big data tables) shrink the content column instead
   of stretching the body row and wrapping it below the sidebar. Safe because
   the theme keeps `.az-content { flex: 1 }` (flex-basis 0) and the footer is
   nested inside .az-content, not a body-level flex sibling. */
body.az-body-sidebar > .az-content {
  min-width: 0;
}