/* ===============================
   GLOBAL STYLES
   =============================== */

body {
  background-color: var(--color-background);
  overflow-x: hidden;
}

.page-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width-collapsed);
  transition: margin-left 0.35s var(--ease-out-expo);
}

@media (max-width: 768px) {
  .page-content {
    margin-left: 0;
  }
}

main {
  flex: 1;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-lg);
}

/* Section spacing */
.section {
  padding-block: var(--spacing-4xl);
}

/* Selection color */
::selection {
  background-color: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary-dark);
}

/* Focus visible for keyboard a11y */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Utility: visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}