/* public/css/layout.css
 * Header & Sidebar Collapse Button Enhancements
 * Last Updated: 2025-05-30
 */

/* ╭─────────────────────────────────────────────╮
   │ Header: Backdrop & Brand Styling            │
   ╰─────────────────────────────────────────────╯ */
header.fixed-header {
  background-color: rgba(255,255,255,0.7);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--border-light);
}
.dark header.fixed-header {
  background-color: rgba(31,41,55,0.7);
  border-color: var(--border-dark);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  header.fixed-header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,0.6);
  }
  .dark header.fixed-header {
    background-color: rgba(31,41,55,0.6);
  }
}

/* Brand/Logo Link Styling */
header.fixed-header a.brand-link {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary-light);
  transition: color var(--transition-fast);
}
.dark header.fixed-header a.brand-link {
  color: var(--primary-dark);
}
header.fixed-header a.brand-link:hover {
  color: var(--primary-hover-light);
}
.dark header.fixed-header a.brand-link:hover {
  color: var(--primary-hover-dark);
}

/* Header Navigation Links (scoped override if needed) */
header.fixed-header nav a.nav-link {
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
  /* For other nav-link styles, see style.css for consistency */
}

/* ╭─────────────────────────────────────────────╮
   │ Sidebar Collapse Button Enhancements        │
   ╰─────────────────────────────────────────────╯ */
/* General Button Style */
#sidebarCollapseBtn {
  position: absolute;
  top: 0.65rem;
  right: -0.75rem;
  z-index: 60;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: #fff;
  border: 2px solid var(--card-bg-light);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-std);
  transform: translateX(0) rotate(0deg);
}
.dark #sidebarCollapseBtn {
  background-color: var(--primary-dark);
  color: var(--color-secondary-900);
  border-color: var(--card-bg-dark);
}

#sidebarCollapseBtn:hover {
  background-color: var(--primary-hover-light);
  transform: scale(1.10);
  box-shadow: var(--shadow-xl);
}
.dark #sidebarCollapseBtn:hover {
  background-color: var(--primary-hover-dark);
}
#sidebarCollapseBtn svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-std);
}

/* Collapsed Sidebar: Button Placement/Rotation */
body.sidebar-collapsed #sidebar #sidebarCollapseBtn {
  right: -0.75rem;          /* Remain on new sidebar edge */
  transform: rotate(180deg);
}
body.sidebar-collapsed #sidebar #sidebarCollapseBtn:hover {
  transform: scale(1.10) rotate(180deg);
}

/* Hide Collapse Button on Mobile (<768px) */
@media (max-width: 767px) {
  #sidebarCollapseBtn {
    display: none !important;
  }
}