/* ============================================================================
   PetStays — Dashboard Shell
   Layout moderno del dashboard: sidebar fijo (sticky) + colapsable a rail de
   iconos, contenido principal con ancho fijo y gutters consistentes, y un
   sistema de grillas propio (.ps-grid) estable y uniforme.

   Carga SOLO en páginas del dashboard (ver petstays_enqueue_dashboard_shell()
   en functions.php). Es la hoja AUTORITATIVA del layout del dashboard; el
   mecanismo antiguo de float en style.css fue retirado para deferir a esta.
   ========================================================================== */

/* ── Tokens de diseño ─────────────────────────────────────────────────────
   Namespaced --ps-* para no chocar con el :root del calendario (room-counter).
   Un solo morado de marca canónico (antes había 3: #ba84fc/#b881fc/#c084fc). */
:root {
  --ps-purple: #ba84fc;
  --ps-purple-600: #a065f0;
  --ps-purple-050: #f4ecff;
  --ps-purple-100: #e9d5ff;

  --ps-text: #1f2937;
  --ps-text-muted: #5d6475;
  --ps-surface: #ffffff;
  --ps-bg: #f7f8fa;
  --ps-border: #e8eaf0;

  /* Escala de espaciado (base 4px) */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 20px;
  --ps-space-6: 24px;
  --ps-space-8: 32px;

  --ps-radius: 16px;
  --ps-radius-sm: 10px;
  --ps-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --ps-shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 16px 34px rgba(124, 58, 237, 0.12);

  /* Card canónica del dashboard — FUENTE ÚNICA de la receta de tarjeta.
     Todos los paneles de contenido (perfil, listados, widgets del panel,
     recibos, stat cards) leen estos tokens: cambiar la receta = editar aquí.
     Excluidos a propósito: inbox, packs, add/edit-listing, beneficios
     (tienen layout/diseño propio). */
  --ps-card-bg: #ffffff;
  --ps-card-border-color: #eef0f3;
  --ps-card-radius: 12px;
  --ps-card-pad: 24px;
  --ps-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);

  /* Shell */
  --ps-sidebar-w: 268px;
  --ps-sidebar-w-collapsed: 64px;
  --ps-content-max: 1440px;
  --ps-gutter: 24px;
  --ps-gap: 20px;
  --ps-sticky-top: 20px;
}

/* ── Sistema de grillas propio (12 columnas) ──────────────────────────────
   minmax(0, 1fr) en todas las columnas: previene el overflow clásico de CSS
   Grid (los ítems no respetan el ancho del track sin esto). */
.ps-grid {
  display: grid;
  gap: var(--ps-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.ps-col-3  { grid-column: span 3; }
.ps-col-4  { grid-column: span 4; }
.ps-col-6  { grid-column: span 6; }
.ps-col-8  { grid-column: span 8; }
.ps-col-9  { grid-column: span 9; }
.ps-col-12 { grid-column: span 12; }

@media (max-width: 991px) {
  .ps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ps-col-3, .ps-col-4, .ps-col-6, .ps-col-8, .ps-col-9, .ps-col-12 {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .ps-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-col-3, .ps-col-4, .ps-col-6, .ps-col-8, .ps-col-9, .ps-col-12 {
    grid-column: span 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHELL DE ESCRITORIO (≥992px)
   Dos columnas via CSS Grid: [sidebar fijo] [contenido]. Reemplaza el antiguo
   float:left + margin-left:300px (retirado de style.css).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .row.is_dashboard {
    display: grid;
    grid-template-columns: var(--ps-sidebar-w) minmax(0, 1fr);
    gap: var(--ps-gutter);
    align-items: start;
    margin: 0;
    padding: 0 var(--ps-gutter);
    box-sizing: border-box;
    transition: grid-template-columns 0.28s ease;
  }
  /* Neutraliza el clearfix de Bootstrap .row (pseudo-elementos se volverían
     ítems de grid y crearían tracks fantasma). */
  .row.is_dashboard::before,
  .row.is_dashboard::after {
    display: none;
  }

  /* Estado colapsado → rail de iconos */
  .ps-sidebar-collapsed .row.is_dashboard {
    grid-template-columns: var(--ps-sidebar-w-collapsed) minmax(0, 1fr);
  }

  /* ── Columna 1: sidebar sticky, siempre visible al hacer scroll ── */
  .row.is_dashboard > .user_tab_menu {
    grid-column: 1;
    position: sticky;
    top: var(--ps-sticky-top);
    align-self: start;
    max-height: calc(100vh - (var(--ps-sticky-top) * 2));
    overflow-y: auto;
    overflow-x: hidden;
    float: none;          /* anula el float heredado */
    width: auto;
    margin: 0;
    box-sizing: border-box;
  }

  /* ── Columna 2: contenido, ancho fijo, pegado a la izquierda ── */
  .row.is_dashboard > .dashboard-margin {
    grid-column: 2;
    min-width: 0;         /* clave anti-overflow dentro del grid */
    margin: 0;
    width: 100%;
    max-width: var(--ps-content-max);
    overflow: visible;
    box-sizing: border-box;
  }

  /* Blindaje del calendario (movido desde style.css): nunca excede su caja;
     su área deslizable scrollea dentro de la tarjeta. */
  .dashboard-margin .wprentals_allinone_wrapper {
    max-width: 100%;
    box-sizing: border-box;
  }
  .dashboard-margin .cal-scroll-wrapper {
    overflow-x: auto;
  }

  /* ── Botón de colapso (solo escritorio) ──────────────────────────────────
     Vive como una barra superior dentro del sidebar, alineado a la derecha
     (margin-left:auto en contexto de bloque). No usa position:absolute para
     que no "flote" sobre la esquina de la tarjeta. */
  .ps-sidebar-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
    flex: none;
    margin: 0 0 8px auto;
    padding: 0;
    border: 1px solid var(--ps-border);
    border-radius: 9px;
    background: var(--ps-surface);
    color: var(--ps-text-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.05s ease;
  }
  .ps-sidebar-collapse:hover {
    background: var(--ps-purple-050);
    color: var(--ps-purple-600);
    border-color: var(--ps-purple-100);
    box-shadow: 0 1px 4px rgba(160, 101, 240, 0.2);
  }
  .ps-sidebar-collapse:active {
    transform: translateY(1px);
  }
  .ps-sidebar-collapse:focus-visible {
    outline: 2px solid var(--ps-purple);
    outline-offset: 2px;
  }
  .ps-sidebar-collapse i {
    /* El tema padre define ".user_tab_menu i { margin-right:20px; width:15px }"
       (pensado para íconos seguidos de texto) — sin este reset, ese margen
       desplazaba el ícono ~10px a la izquierda del centro real del botón. */
    margin: 0;
    width: auto;
    font-size: 15px;
    line-height: 1;
    transition: transform 0.28s ease;
  }
  .ps-sidebar-collapsed .ps-sidebar-collapse i {
    transform: rotate(180deg);
  }
  /* En rail: el botón deja de ser una caja con borde "flotando" arriba y pasa
     a integrarse con la misma familia visual que los íconos de navegación
     (sin borde, fondo sutil, mismo tamaño que un ítem del menú) — antes se
     veía como un elemento ajeno, desconectado del resto del sidebar. */
  .ps-sidebar-collapsed .ps-sidebar-collapse {
    /* Mismo tamaño cuadrado que en el estado expandido (antes era 36px, más
       grande que los 34px expandidos — un rail angosto no debe tener un
       control más grande que el del sidebar completo). */
    margin: 0 auto 6px;
    border: none;
    background: var(--ps-bg);
    box-shadow: none;
  }
  .ps-sidebar-collapsed .ps-sidebar-collapse:hover {
    background: var(--ps-purple-050);
    color: var(--ps-purple-600);
  }

  /* ── Modo RAIL: ocultar todo menos avatar + links (+ botón) ── */
  .ps-sidebar-collapsed .user_tab_menu {
    padding-left: var(--ps-space-2);
    padding-right: var(--ps-space-2);
    padding-top: 10px;
    text-align: center;
  }
  .ps-sidebar-collapsed .user_tab_menu > *:not(.user_dashboard_links):not(.profile-image-wrapper):not(.ps-sidebar-collapse):not(.user_tab_menu_close) {
    display: none;
  }
  .ps-sidebar-collapsed .user_tab_menu .profile_wellcome {
    display: none;
  }
  /* Bloque de avatar: mismo espaciado compacto que el resto del rail, en vez
     del padding/margin pensado para el sidebar expandido (que dejaba un
     hueco grande entre el botón y el avatar). */
  .ps-sidebar-collapsed .profile-image-wrapper {
    margin-bottom: 6px;
    padding-bottom: 8px;
  }
  .ps-sidebar-collapsed .user_tab_menu #profile-image-menu {
    width: 36px;
    height: 36px;
    margin-bottom: 0;
  }

  /* Rail: cada ítem es un CUADRO FIJO CENTRADO (patrón de rail de iconos).
     Tamaño fijo + margin auto + justify/align center = el ícono queda SIEMPRE
     en el centro exacto del cuadro, sin importar el glifo ni el ancho del texto
     colapsado. El ítem activo es un cuadro morado con el ícono al centro.
     (El texto del label se colapsa con font-size:0 — es un nodo de texto sin
     envoltorio, no se puede display:none.) */
  .ps-sidebar-collapsed .user_dashboard_links {
    align-items: center;
    gap: 4px;
  }
  .ps-sidebar-collapsed .user_dashboard_links a {
    /* display:flex es OBLIGATORIO aquí: el tema padre define
       .user_dashboard_links a { display:inline-block } y en el sitio real su
       dashboard-style.css carga DESPUÉS del style.css del hijo, así que gana
       inline-block → sin este flex, justify/align-items no aplican y el ícono
       queda pegado ARRIBA del cuadro en vez de centrado. Esta hoja carga con
       priority 1000 (la última), por eso gana. */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 auto;
    font-size: 0;
    border-radius: 10px;
    position: relative;
  }
  .ps-sidebar-collapsed .user_dashboard_links a i {
    font-size: 15px;
    line-height: 1;
    width: auto;
    margin: 0;
  }
  /* Badge de no leídos en rail: en un cuadro de 40px no cabe "221" → se muestra
     como un punto indicador en la esquina superior derecha. */
  .ps-sidebar-collapsed .user_dashboard_links a .unread_mess_wrap_menu {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    border-radius: 50%;
    background: var(--ps-purple);
    display: block;
  }

  /* Tooltip del label en hover (rail). data-label lo inyecta dashboard-shell.js
     desde el texto del enlace, así no hay que editar los 16 ítems. */
  .ps-sidebar-collapsed .user_dashboard_links a::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ps-text);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 50;
    box-shadow: var(--ps-shadow-sm);
  }
  .ps-sidebar-collapsed .user_dashboard_links a:empty::after,
  .ps-sidebar-collapsed .user_dashboard_links a:not([data-label])::after {
    content: none;
  }
  .ps-sidebar-collapsed .user_dashboard_links a:hover::after {
    opacity: 1;
  }
}

/* En móvil el sidebar es un drawer off-canvas (style.css L5503+): el botón de
   colapso de escritorio no aplica. */
@media (max-width: 991px) {
  .ps-sidebar-collapse {
    display: none;
  }
}

/* ── Refinamiento visual del sidebar con tokens ──────────────────────────
   Nota: en móvil (≤991px) el sidebar es un drawer con reglas más específicas
   en style.css que ganan sobre estas; aquí solo afinamos color/forma. */
.user_tab_menu {
  border-color: var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.05);
  padding: 12px 14px;
}

/* Avatar + saludo compactos, con divisor bajo el bloque de perfil. El header
   tenía demasiado aire (avatar 80px + márgenes amplios); se reduce para dar
   más protagonismo a la navegación. */
.user_tab_menu .profile-image-wrapper {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ps-border);
}
.user_tab_menu #profile-image-menu {
  width: 60px;
  height: 60px;
  margin: 0 auto 8px;
  border: 2px solid var(--ps-border);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}
.user_tab_menu .profile_wellcome {
  color: var(--ps-text);
  font-size: 14.5px;
  font-weight: 600;
}

/* Lista de navegación: compacta, iconos atenuados, estados claros */
.user_dashboard_links {
  gap: 2px;
}
.user_dashboard_links a {
  padding: 9px 11px;
  border-radius: 10px;
  gap: 11px;
  color: var(--ps-text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.user_dashboard_links a i {
  width: 18px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  color: #9aa1b2;
  transition: color 0.16s ease;
}
.user_dashboard_links a:hover {
  background-color: var(--ps-purple-050);
  color: var(--ps-purple-600);
}
.user_dashboard_links a:hover i {
  color: var(--ps-purple-600);
}
.user_dashboard_links a.user_tab_active {
  background-color: var(--ps-purple);
  color: #fff;
  box-shadow: 0 4px 12px rgba(160, 101, 240, 0.28);
}
.user_dashboard_links a.user_tab_active i {
  color: #fff;
}
.user_dashboard_links a.user_tab_active:hover {
  background-color: var(--ps-purple-600);
  color: #fff;
}
.user_dashboard_links a.user_tab_active:hover i {
  color: #fff;
}