/* src/public/css/styles.css */
body{min-height:100vh}
:root{
  --nav-h: 56px;           /* alto de tu navbar */
  --sidebar-w: 248px;      /* ancho del sidebar */
  --sidebar-bg: #0f1216;   /* fondo oscuro elegante */
  --sidebar-border: #1b1f24;
  --sidebar-muted: #8b949e;
  --sidebar-hover: #161b22;
  --sidebar-active: #0d6efd;
}

/* Quita la franja blanca: el body tendrá fondo consistente */
html, body { height: 100%; background: var(--bs-body-bg); }

/* Shell general */
.app-shell{ min-height: calc(100dvh - var(--nav-h)); }

/* === Sidebar (desktop) FIXED === */
.app-sidebar{
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 14px 10px;
  overflow-y: auto;
}

/* Navegación */
.sidebar-nav{ display: flex; flex-direction: column; gap: 2px; }
.menu-section{
  margin: 12px 10px 6px;
  font-size: .75rem;
  color: var(--sidebar-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.menu-link{
  display: block;
  padding: 10px 12px;
  margin: 0 6px;
  border-radius: 10px;
  color: #d0d7de;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.menu-link:hover{ background: var(--sidebar-hover); color: #fff; transform: translateX(2px); }
.menu-link.active{
  background: linear-gradient(90deg, rgba(13,110,253,.18), rgba(13,110,253,.06));
  color: #fff;
  border: 1px solid rgba(13,110,253,.28);
}

/* Contenido: deja espacio lateral en desktop para el sidebar fijo */
.app-content{ min-width: 0; }
@media (min-width: 768px){
  .app-content { margin-left: var(--sidebar-w); }
}

/* Offcanvas móvil */
@media (max-width: 767.98px){
  .app-sidebar{ display: none; }          /* se oculta; usamos el offcanvas */
}

/* Suaviza cards y tablas (más moderno) */
.card{ border-radius: 14px; }
.table{ --bs-table-hover-bg: rgba(13,110,253,.04); }
.alert{ border-radius: 12px; }

.table thead th { white-space: nowrap; }
.btn-group .btn svg { display:block; }

/* Mejoras de cabecera de filtros */
@media (max-width: 576px){
  .form-label.small { display:block; }
  .btn.btn-sm { width: 100%; }
}

#saleModal .table th { white-space: nowrap; }

/* Encabezados de tabla pegajosos para listados largos */
.table-sticky thead th {
  position: sticky;
  top: 0;                    /* si tienes una navbar fija, usa top: 56px; */
  z-index: 5;
  background: var(--bs-body-bg);  /* evita transparencia al pasar por filas */
}

/* Línea sutil bajo el header */
.table-sticky thead th::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background-color: rgba(0,0,0,.08);
}

/* ===== Sticky header para tablas largas ===== */
.table-sticky {
  /* Bootstrap pone collapse; sticky no funciona bien así */
  border-collapse: separate !important;
  border-spacing: 0;                 /* para que no cambie el aspecto */
}

.table-sticky thead th {
  position: sticky;
  top: var(--stick-top, 0);          /* ajusta si tienes navbar fija, ej: 56px */
  z-index: 5;
  background: var(--bs-body-bg);     /* evita transparencia al pasar filas */
  /* opcional: línea inferior sutil */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Si la tabla está dentro de .table-responsive, que solo desborde en X */
.table-responsive.table-sticky-wrap { overflow-y: visible; }

.table td, .table th { vertical-align: middle; }

/* Overlay de carga general */
.app-loading-overlay,
.login-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2050;
  transition: opacity .2s ease;
  opacity: 1;
}

.app-loading-overlay.hidden,
.login-loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loading-overlay img,
.login-loading-overlay img {
  width: 88px;
  height: 88px;
}

.app-loading-overlay .loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header usuario */
.user-circle {
  width: 28px;
  height: 28px;
  font-size: .8rem;
}

#navbarUserName {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}