/* Sidebar styles for ticmac-crm */
:root{
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --tc-primary: #802484;
  --sidebar-bg: #ffffff;
  --sidebar-border: #ebebef;
  --sidebar-text: #333;
  --sidebar-hover-bg: rgba(128,36,132,0.06);
}

.app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  padding: 1.2rem 0.6rem 0.6rem 0.6rem; /* increase top padding so burger sits lower */
  z-index: 99999; /* make sidebar sit above everything */
  overflow-y: auto;
  overflow-x: visible; /* allow floating labels to overflow horizontally without clipping */
  overflow: visible; /* allow top glow to show beyond the sidebar bounds */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 220ms cubic-bezier(.2,.9,.2,1), padding 220ms cubic-bezier(.2,.9,.2,1);
}

.sidebar-top { display:flex; align-items:center; justify-content:flex-start; padding:0.6rem 0.2rem 0 0.2rem }

.sidebar-logo { max-width: 110px; height: auto; display:block }

.sidebar-nav { list-style: none; padding: 0; margin: 0.6rem 0 1rem 0; flex: 1 1 auto }
.sidebar-nav li { margin: 0.25rem 0 }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sidebar-text);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}

.sidebar-link:hover, .sidebar-link:focus { background: var(--sidebar-hover-bg); color: var(--tc-primary); transform: translateY(-2px) }

.sidebar-link.active { 
  background: linear-gradient(135deg, rgba(128,36,132,0.15), rgba(128,36,132,0.05)); 
  color: var(--tc-primary); 
  box-shadow: 0 8px 24px rgba(128,36,132,0.12);
  border-left: 4px solid var(--tc-primary);
  font-weight: 600;
  pointer-events: none;
  cursor: default;
}

.sidebar-bottom { display:flex; flex-direction:column; align-items:center; gap:0.8rem; padding-top:0.6rem }

.sidebar-bottom .sidebar-logo-wrap { margin-top: 0.6rem }

.sidebar-footer { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--sidebar-border) }

.app-sidebar::-webkit-scrollbar { width: 10px; }
.app-sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--tc-primary); border-radius: 8px; }

/* Firefox */
.app-sidebar { scrollbar-width: thin; scrollbar-color: var(--tc-primary) rgba(0,0,0,0.03); }

.main-content { margin-left: 0 !important; transition: none; }
.app-sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.app-sidebar.collapsed .label { display: none; }
.app-sidebar.collapsed .sidebar-logo { display: none; }
.app-sidebar.collapsed .sidebar-link { justify-content:center; padding: 0.6rem 0.4rem }
/* remove the adjacent sibling rule that previously shifted main content */
.app-sidebar + .main-content { margin-left: 0 !important; }
.sidebar-bottom .sidebar-logo-wrap { margin-top: 0.6rem }

/* Disable hover/click effects on the logos (they are decorative) */
.sidebar-logo, .collapsed-logo { pointer-events: none; }
.sidebar-logo:hover, .collapsed-logo:hover { transform: none; }
.app-sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.app-sidebar.collapsed .label { display: none; }
.app-sidebar.collapsed .sidebar-logo { display: none; }
.app-sidebar.collapsed .sidebar-link { justify-content:center; padding: 0.6rem 0.4rem }
.app-sidebar.collapsed + .main-content { margin-left: var(--sidebar-collapsed-width); }

.app-sidebar .sidebar-top .sidebar-toggle { background: transparent; border: none; padding: .25rem; display:flex; align-items:center; justify-content:center; color: var(--tc-primary) }
.app-sidebar .sidebar-toggle svg { display:block }
/* make the toggle above everything so hover/expand appears over page content */
.app-sidebar .sidebar-toggle { position: relative; z-index: 3001; }

/* Keep logout and logo pinned to bottom */
.sidebar-bottom { margin-bottom: 0.6rem }
.sidebar-bottom .logout { align-self: center }

/* make icons use the project's purple color */
.app-sidebar .icon i, .app-sidebar .sidebar-toggle i { color: var(--tc-primary); font-size: 1.05rem }

/* make icons slightly larger for better touch targets */
.app-sidebar .icon i { font-size: 1.25rem; }
.app-sidebar .sidebar-toggle i { font-size: 1.6rem; }

/* decorative purple vertical line and subtle shadow at the right edge of the sidebar */
.app-sidebar::after {
  content: '';
  position: absolute;
  right: 0;
  width: 3px; /* thinner */
  /* center vertically and do not span full height */
  top: 50%;
  transform: translateY(-50%);
  height: 80%;
  background: #802484;
  box-shadow: -1px 0 2px 0 rgba(128,36,132,0.6);
  border-radius: 2px;
  pointer-events: none;
}

/* prominent purple top line for the sidebar (mirrors navbar) */
.app-sidebar::before {
  /* use fixed positioning so the glow is not clipped by sidebar scrolling */
  content: '';
  position: fixed;
  top: 0; /* align with viewport top (sidebar is at top:0) */
  left: -6%; /* extend beyond sidebar to make it wider */
  right: -6%;
  height: 14px; /* taller line */
  background: var(--tc-primary);
  filter: blur(4px);
  transform: translateY(-4px);
  z-index: 100005; /* above sidebar content */
  pointer-events: none;
}

/* add a soft halo above the sidebar line */
.sidebar-top { position: relative; }
.app-sidebar .sidebar-top::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 6px;
  right: 6px;
  height: 26px;
  background: rgba(128,36,132,0.16);
  filter: blur(16px);
  z-index: 100004;
  pointer-events: none;
}

/* collapsed-only items */
.collapsed-only { display: none; }
.app-sidebar.collapsed .collapsed-only { display: flex; justify-content:center; }

/* Collapsed imagotipo logo sizing */
.collapsed-logo { width: 26px; height: auto; display: block }

/* Ensure logo images use object-fit to avoid distortion */
.sidebar-logo, .collapsed-logo { object-fit: contain; }

/* Force display for collapsed logo in tricky contexts (higher specificity) */
.app-sidebar.collapsed .collapsed-only { display: flex !important; }
.app-sidebar.collapsed .collapsed-only .collapsed-logo { display: block !important; }

/* Make collapsed-only link look like plain image, not a button */
.app-sidebar .collapsed-only { padding: 0; background: transparent; box-shadow: none; border-radius: 0 }
.app-sidebar .collapsed-only .icon { padding: 0 }
.app-sidebar .collapsed-only:hover { background: transparent; transform: none }

/* Floating label that appears when hovering an item in collapsed mode */
.app-sidebar.collapsed .sidebar-link { position: relative; }
.app-sidebar.collapsed .sidebar-link .label { display: none; }
.app-sidebar.collapsed .sidebar-link:hover {
  /* don't move the item on hover when collapsed (prevents layout changes) */
  transform: none;
}
.app-sidebar.collapsed .sidebar-link:hover .label {
  /* Ensure the inline label inside the collapsed sidebar never appears; we use a floating tooltip appended to body instead */
  display: none !important;
}

/* Floating tooltip appended to body (outside sidebar) */
.floating-sidebar-tooltip {
  position: fixed;
  background: var(--tc-primary);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(128,36,132,0.18);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 100000; /* above sidebar */
  pointer-events: none;
  font-weight: 600;
}
.floating-sidebar-tooltip .ft-icon { width: 18px; height: 18px; background: rgba(255,255,255,0.12); border-radius:6px; display:inline-block }
.floating-sidebar-tooltip .ft-text { white-space: nowrap }

/* Add a small icon inside the floating label, align like the example */
.app-sidebar.collapsed .sidebar-link:hover .label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
}


@media (max-width: 767px) {
  /* Only hide the sidebar automatically on small mobile viewports.
     For tablet widths above 767px the sidebar will remain visible. */
  .app-sidebar { transform: translateX(-110%); transition: transform .22s ease }
  body.sidebar-open .app-sidebar { transform: translateX(0) }
  .main-content { margin-left: 0 }
}