/* =========================================================
   WIRTZ HUB · MAIN LAYOUT
   Estructura general · responsive · minimalista · dark safe
   ========================================================= */

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--rightbar-width);

  width: 100%;
  min-height: 100vh;

  background: transparent;
  overflow-x: hidden;

  transition:
    grid-template-columns var(--transition),
    background var(--transition);
}

:root[data-sidebar="hidden"] .app-shell {
  grid-template-columns: 0 minmax(0, 1fr) var(--rightbar-width);
}

:root[data-rightbar="hidden"] .app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 0;
}

:root[data-sidebar="hidden"][data-rightbar="hidden"] .app-shell {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

/* =========================================================
   MAIN
   ========================================================= */

.app-main {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 100vh;

  overflow-x: hidden;
  background: transparent;

  transition:
    background var(--transition),
    opacity var(--transition);
}

/* =========================================================
   CONTENT
   ========================================================= */

.app-content {
  flex: 1;

  min-width: 0;
  width: 100%;

  padding: 7px;

  overflow-x: hidden;
  overflow-y: auto;

  animation: layoutContentIn 0.22s ease both;

  transition:
    padding var(--transition),
    background var(--transition);
}

/* =========================================================
   CONTENT PANEL
   ========================================================= */

.content-panel {
  min-height: calc(100vh - var(--topbar-height) - 44px);

  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: var(--radius-xl);

  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.035);

  overflow: hidden;

  animation: layoutPanelIn 0.22s ease both;

  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    border-radius var(--transition),
    min-height var(--transition);
}

html[data-theme="dark"] .content-panel {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(10, 10, 10, 0.86);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 32px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   SIDEBAR OCULTO
   ========================================================= */

:root[data-sidebar="hidden"] .app-sidebar {
  width: 0;
  min-width: 0;
  padding: 0;

  border-right: 0;

  opacity: 0;
  pointer-events: none;

  overflow: hidden;
}

/* =========================================================
   RIGHTBAR OCULTO
   ========================================================= */

:root[data-rightbar="hidden"] .rightbar {
  width: 0;
  min-width: 0;
  padding: 0;

  border-left: 0;

  opacity: 0;
  pointer-events: none;

  overflow: hidden;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {
  .app-shell,
  :root[data-sidebar="hidden"] .app-shell,
  :root[data-rightbar="hidden"] .app-shell,
  :root[data-sidebar="hidden"][data-rightbar="hidden"] .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .rightbar {
    display: none;
  }

  :root[data-sidebar="hidden"] .app-shell {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .content-panel {
    min-height: calc(100vh - var(--topbar-height) - 42px);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 980px) {
  .app-shell,
  :root[data-sidebar="hidden"] .app-shell,
  :root[data-rightbar="hidden"] .app-shell,
  :root[data-sidebar="hidden"][data-rightbar="hidden"] .app-shell {
    grid-template-columns: 1fr;
  }

  .app-main {
    min-height: 100vh;
  }

  .app-content {
    padding: 6px;
  }

  .content-panel {
    min-height: auto;
    border-radius: 12px;
  }

  /*
    En mobile el sidebar es overlay fixed.
    No debe ocupar columna real del grid.
  */
  :root[data-sidebar="hidden"] .app-sidebar {
    width: min(232px, 84vw);
    min-width: min(232px, 84vw);
    padding: 8px 7px;

    border-right: 1px solid rgba(0, 0, 0, 0.16);

    opacity: 1;
    pointer-events: auto;

    overflow-y: auto;
    overflow-x: hidden;
  }

  html[data-theme="dark"]:root[data-sidebar="hidden"] .app-sidebar {
    border-right-color: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 620px) {
  .app-content {
    padding: 5px;
  }

  .content-panel {
    border-radius: 11px;
  }
}

@media (max-width: 380px) {
  .app-content {
    padding: 4px;
  }

  .content-panel {
    border-radius: 10px;
  }
}

/* =========================================================
   FULL WIDTH HELPERS
   ========================================================= */

.app-main,
.app-content,
.content-panel {
  max-width: 100%;
}

/* =========================================================
   SCROLLBAR CONTENT
   ========================================================= */

.app-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 128, 145, 0.35) transparent;
}

.app-content::-webkit-scrollbar {
  width: 7px;
}

.app-content::-webkit-scrollbar-track {
  background: transparent;
}

.app-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(120, 128, 145, 0.35);
  background-clip: content-box;
}

.app-content::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 128, 145, 0.55);
  background-clip: content-box;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes layoutContentIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes layoutPanelIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .app-main,
  .app-content,
  .content-panel,
  .app-sidebar,
  .rightbar {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   FIX · LAYOUT · SIDEBAR NO DEJA ESPACIO FANTASMA
   Corrige mobile / sidebar oculto / dashboard angosto
   ========================================================= */

/* Cuando el sidebar está oculto, la app principal ocupa todo */
html[data-sidebar="hidden"] .app-shell {
  grid-template-columns: 1fr !important;
}

html[data-sidebar="hidden"] .app-main {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Sidebar oculto no debe reservar espacio */
html[data-sidebar="hidden"] .app-sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  transform: translateX(-105%) !important;
  pointer-events: none !important;
}

/* Evita que el contenido quede corrido o limitado */
.app-main,
.app-content,
.content-panel {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   MOBILE / TABLET
   En pantallas chicas el sidebar siempre es overlay
   ========================================================= */

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .app-main {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1000 !important;
    width: min(260px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    height: 100vh !important;
    transform: translateX(-105%) !important;
    pointer-events: none !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.18) !important;
  }

  html[data-sidebar="visible"] .app-sidebar,
  html[data-sidebar="open"] .app-sidebar {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  html[data-sidebar="hidden"] .app-sidebar {
    transform: translateX(-105%) !important;
    pointer-events: none !important;
  }

  .app-content {
    padding-left: 7px !important;
    padding-right: 7px !important;
    overflow-x: hidden !important;
  }

  .content-panel {
    overflow-x: hidden !important;
  }
}

/* =========================================================
   MOBILE CHICO
   Evita corte lateral y espacio muerto
   ========================================================= */

@media (max-width: 620px) {
  .app-content {
    padding: 6px !important;
  }

  .app-shell,
  .app-main,
  .app-content,
  .content-panel {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  body {
    overflow-x: hidden !important;
  }
}