/*
  Custom Tailwind CSS for CCNA Cheat Sheet
  Add any custom styles or overrides below.
*/

/* Example: Custom scrollbar for dark mode */
::-webkit-scrollbar {
  width: 8px;
  background: #1f2937;
}
::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}
.description {
  white-space: pre-line;
}
/* Example: Focus ring override for better accessibility */
:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.7);
  z-index: 40;
  display: none;
}
.sidebar-open .sidebar-overlay {
  display: block;
}

/* Sidebar fixed to top-left, full height, shadow */
#sidebar {
  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.25);
}

/* Hide sidebar on mobile by default */
@media (max-width: 768px) {
  #sidebar {
    transform: translateX(-100%);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 50;
    width: 16rem;
    background: #1f2937;
    transition: transform 0.2s;
  }
  #sidebar.open {
    transform: translateX(0);
  }
}

/* Search dropdown shadow and style */
#search-dropdown {
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid #374151;
  background: #1f2937;
  color: #f3f4f6;
  max-height: 18rem;
  overflow-y: auto;
}

#search-dropdown div[tabindex="0"]:focus,
#search-dropdown div[tabindex="0"]:hover {
  background: #2563eb;
  color: #fff;
}

/* Sidebar toggle button always visible on mobile */
#sidebar-toggle {
  display: block;
}
@media (min-width: 769px) {
  #sidebar-toggle {
    display: none;
  }
}

/* Main content margin for sidebar */
@media (min-width: 768px) {
  .md\:ml-64 {
    margin-left: 16rem;
  }
}

/* Details/summary dark theme tweaks */
details {
  background: #1f2937;
  color: #f3f4f6;
}
details[open] summary {
  background: #2563eb;
  color: #fff;
}
summary {
  background: #111827;
  color: #f3f4f6;
  border-radius: 0.375rem;
}

/* Table dark theme */
table {
  background: #111827;
  color: #f3f4f6;
  border-radius: 0.375rem;
}
td,
th {
  border-bottom: 1px solid #374151;
}