/* frontend/css/sidebar.css */
/* =========================================================
   Rasta Pets – Sidebar Veterinaria Minimalista
   Estilo: limpio, suave, amigable y profesional
   ========================================================= */

:root {
  /* Base */
  --sidebar-bg: #ffffff;
  --sidebar-bg-soft: #f6f9fc;
  --sidebar-active-bg: #e9fbf7;
  --sidebar-hover-bg: #f2fcf9;

  /* Textos */
  --sidebar-text: #102a56;
  --sidebar-muted: #7b8ba8;
  --sidebar-muted-light: #a6b3c9;

  /* Marca */
  --sidebar-primary: #22c7a9;
  --sidebar-primary-hover: #16a88e;
  --sidebar-primary-soft: #e9fbf7;

  /* Estados */
  --sidebar-danger: #ef4444;
  --sidebar-danger-soft: #fff1f2;

  /* Bordes y sombras */
  --sidebar-border: #e8eef6;
  --sidebar-shadow: 0 18px 45px rgba(16, 42, 86, 0.06);
  --sidebar-shadow-hover: 0 16px 35px rgba(34, 199, 169, 0.16);

  /* Tamaños */
  --sidebar-w: 260px;
  --sidebar-w-mini: 76px;
  --footer-h: 86px;

  /* Radius */
  --sidebar-radius-sm: 12px;
  --sidebar-radius-md: 16px;
  --sidebar-radius-lg: 22px;
  --sidebar-radius-xl: 28px;

  /* Transición */
  --sidebar-transition: 0.25s ease;

  /* Tipografía */
  --font-family: "Inter", "DM Sans", system-ui, sans-serif;
}

/* ------------------ Contenedor fijo ---------------------- */
#sidebar-container {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-shadow);
  transition: width var(--sidebar-transition);
  z-index: 20;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
}

#app-root {
  margin-left: var(--sidebar-w);
  transition: margin-left var(--sidebar-transition);
}

/* ------------------ Sidebar ------------------------------ */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-family);
  background:
    radial-gradient(circle at bottom left, rgba(34, 199, 169, 0.10), transparent 30%),
    var(--sidebar-bg);
}

/* ------------------ Marca -------------------------------- */
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 24px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand__link {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
  color: var(--sidebar-text);
  text-decoration: none;
}

.brand__logo {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  background: linear-gradient(135deg, #e9fbf7 0%, #d9f8f1 100%);
  border: 1px solid rgba(34, 199, 169, 0.22);
  box-shadow: 0 12px 28px rgba(34, 199, 169, 0.16);

  overflow: hidden;
}

.brand__logo img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.brand__name {
  color: var(--sidebar-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  white-space: normal;
}

.sidebar__toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--sidebar-bg-soft);
  border: 1px solid var(--sidebar-border);
  border-radius: 14px;

  color: var(--sidebar-muted);
  font-size: 20px;

  cursor: pointer;
  transition:
    background var(--sidebar-transition),
    color var(--sidebar-transition),
    transform var(--sidebar-transition),
    box-shadow var(--sidebar-transition);
}

.sidebar__toggle:hover {
  background: var(--sidebar-primary);
  color: #ffffff;
  transform: rotate(90deg);
  box-shadow: 0 12px 24px rgba(34, 199, 169, 0.24);
}

/* ------------------ Navegación --------------------------- */
.sidebar__nav {
  flex: 1;
  padding: 18px 14px 8px 14px;
  overflow-y: auto;
}

.nav__item {
  position: relative;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;

  min-height: 52px;
  padding: 13px 16px;
  margin-bottom: 7px;

  border-radius: var(--sidebar-radius-md);

  color: var(--sidebar-muted);
  text-decoration: none;

  font-size: 15px;
  font-weight: 700;

  transition:
    background var(--sidebar-transition),
    color var(--sidebar-transition),
    transform var(--sidebar-transition),
    box-shadow var(--sidebar-transition);
}

.nav__item .label {
  color: inherit;
  transition: color var(--sidebar-transition);
}

/* Íconos */
.nav-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: currentColor;
  transition: transform var(--sidebar-transition), color var(--sidebar-transition);
}

.nav-icon img,
.nav-icon svg {
  width: 100%;
  height: 100%;
}

.nav-icon img {
  object-fit: contain;
  filter: grayscale(1) opacity(0.65);
  transition: filter var(--sidebar-transition), opacity var(--sidebar-transition);
}

.nav-icon svg {
  display: block;
  stroke: currentColor;
  transition: stroke var(--sidebar-transition);
}

/* Hover */
.nav__item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-primary-hover);
  transform: translateX(3px);
}

.nav__item:hover .nav-icon {
  transform: scale(1.06);
}

.nav__item:hover .nav-icon img {
  filter: none;
  opacity: 1;
}

/* Active */
.nav__item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-primary-hover);
  box-shadow: inset 0 0 0 1px rgba(34, 199, 169, 0.16);
  transform: translateX(3px);
}

.nav__item.active::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: var(--sidebar-primary);
  transform: translateY(-50%);
}

.nav__item.active .label {
  color: var(--sidebar-primary-hover);
  font-weight: 800;
}

.nav__item.active .nav-icon img {
  filter: none;
  opacity: 1;
}

.nav__item.active .nav-icon svg {
  stroke: var(--sidebar-primary-hover);
}

/* ------------------ Botón Logout ------------------------- */
.nav__logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;

  width: 100%;
  min-height: 52px;
  padding: 13px 16px;

  background: transparent;
  border: none;
  border-radius: var(--sidebar-radius-md);

  color: var(--sidebar-muted);
  cursor: pointer;

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;

  transition:
    background var(--sidebar-transition),
    color var(--sidebar-transition),
    transform var(--sidebar-transition);
}

.nav__logout:hover {
  background: var(--sidebar-danger-soft);
  color: var(--sidebar-danger);
  transform: translateX(3px);
}

.nav__logout:hover .nav-icon img {
  filter: none;
  opacity: 1;
}

.nav__logout:hover .nav-icon svg {
  stroke: var(--sidebar-danger);
}

/* ------------------ Decoración inferior opcional ---------- */
.sidebar__pet-decoration {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 90px;

  height: 120px;

  border-radius: var(--sidebar-radius-xl);
  background:
    radial-gradient(circle at 25% 70%, rgba(34, 199, 169, 0.16), transparent 28%),
    linear-gradient(180deg, #f4fcfa 0%, #e9fbf7 100%);

  border: 1px solid rgba(34, 199, 169, 0.12);
  pointer-events: none;
}

/* ------------------ Footer / Salir ----------------------- */
.sidebar__footer {
  padding: 18px 14px;
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
}

body.sidebar-mini .sidebar__footer {
  padding: 14px 8px;
}

/* ------------------ Estado mini -------------------------- */
body.sidebar-mini #sidebar-container {
  width: var(--sidebar-w-mini);
}

body.sidebar-mini #app-root {
  margin-left: var(--sidebar-w-mini);
}

body.sidebar-mini .brand__name,
body.sidebar-mini .label {
  display: none !important;
}

body.sidebar-mini .sidebar__brand {
  min-height: 96px;
  justify-content: center;
  padding: 18px 10px;
  gap: 0;
}

body.sidebar-mini .brand__link {
  justify-content: center;
  flex: 0;
}

body.sidebar-mini .brand__logo {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-radius: 17px;
}

body.sidebar-mini .sidebar__toggle {
  position: absolute;
  top: 66px;
  right: 8px;

  width: 26px;
  height: 26px;
  font-size: 15px;
  border-radius: 9px;
}

body.sidebar-mini .sidebar__nav {
  padding: 14px 10px;
  padding-bottom: calc(var(--footer-h) + 14px);
}

body.sidebar-mini .nav__item {
  justify-content: center !important;
  gap: 0 !important;

  min-height: 52px;
  padding: 0 !important;

  border-radius: var(--sidebar-radius-md);
  transform: none !important;
}

body.sidebar-mini .nav__item.active::before {
  left: 4px;
  height: 22px;
}

body.sidebar-mini .nav-icon {
  width: 24px;
  height: 24px;
  margin: 0 !important;
}

body.sidebar-mini .nav__item:hover,
body.sidebar-mini .nav__item.active {
  transform: none !important;
}

body.sidebar-mini .nav__logout {
  justify-content: center !important;
  gap: 0 !important;
  min-height: 52px;
  padding: 0 !important;
}

body.sidebar-mini .sidebar__pet-decoration {
  display: none;
}

/* ------------------ Tooltip para mini sidebar ------------- */
body.sidebar-mini .nav__item::after,
body.sidebar-mini .nav__logout::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;

  padding: 7px 10px;

  background: var(--sidebar-text);
  color: #ffffff;

  border-radius: 10px;

  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--sidebar-transition), transform var(--sidebar-transition);
  z-index: 100;
}

body.sidebar-mini .nav__item:hover::after,
body.sidebar-mini .nav__logout:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ------------------ Scrollbar ---------------------------- */
.sidebar__nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(123, 139, 168, 0.28);
  border-radius: 999px;
}

.sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 139, 168, 0.48);
}

/* ------------------ Responsivo --------------------------- */
@media (max-width: 900px) {
  #sidebar-container {
    width: 0;
    border-right: none;
    box-shadow: none;
  }

  #app-root {
    margin-left: 0;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: min(86vw, 310px);
    max-width: 330px;

    background: var(--sidebar-bg);
    box-shadow: var(--sidebar-shadow-hover);

    transform: translateX(-100%);
    transition: transform var(--sidebar-transition);
    z-index: 40;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .sidebar__brand {
    min-height: 108px;
  }
}

/* ------------------ Ocultar sidebar en login -------------- */
body.no-sidebar #sidebar-container {
  display: none !important;
}

body.no-sidebar #app-root {
  margin-left: 0 !important;
}

/* ------------------ Botón de menú móvil flotante ---------- */
.mobile-menu-btn {
  display: none;
}

@media (max-width: 900px) {
  body.with-sidebar .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 18px;
    left: 18px;
    width: 46px;
    height: 46px;
    background: var(--sidebar-bg, #ffffff);
    border: 1px solid var(--sidebar-border, #e8eef6);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(16, 42, 86, 0.08);
    color: var(--sidebar-text, #102a56);
    font-size: 24px;
    z-index: 30; /* Encima de la página, debajo del sidebar */
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
  }

  body.with-sidebar .mobile-menu-btn:hover {
    background: var(--sidebar-hover-bg, #f2fcf9);
    color: var(--sidebar-primary, #22c7a9);
  }

  /* Ajustar espacio del header si el menú móvil está visible */
  body.with-sidebar .page__header {
    padding-left: 60px; /* Dejar espacio para el botón flotante en móvil */
  }
}

body.no-sidebar .mobile-menu-btn {
  display: none !important;
}