/* ============================================================
   TALKBACK — LAYOUT SYSTEM
   ============================================================
   File: css/layout.css
   Purpose: Application shell structure, page layouts, grid,
            content containers, responsive rules.
   
   Load order:
   1. variables.css
   2. reset.css
   3. components.css
   4. layout.css      ← THIS FILE
   5. app.css
   
   LAYOUT INDEX:
   1.  App Shell
   2.  Page Container
   3.  Content Container
   4.  Sidebar Layout (Desktop)
   5.  Page Header
   6.  Section
   7.  Grid System
   8.  Flex Utilities
   9.  List Layout
   10. Split Layout
   11. Stack Layout
   12. Channel View Layout
   13. PTT Screen Layout
   14. Admin Layout
   15. Auth Layout
   16. Spacing Utilities
   17. Visibility Utilities
   18. Responsive Utilities
   ============================================================ */


/* ============================================================
   1. APP SHELL
   ============================================================
   The outermost container for the application.
   Handles viewport height, prevents overflow,
   and accounts for fixed top/bottom navigation.
   ============================================================ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-primary);
  color: var(--text-primary);
  position: relative;
  overflow-x: hidden;
}

/* Main content area — sits between top bar and bottom nav */
.app__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-height);
  padding-bottom: var(--bottom-nav-height);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* When there is no bottom nav (e.g., desktop or auth pages) */
.app__main--no-bottom-nav {
  padding-bottom: 0;
}

/* When there is no top bar (e.g., auth pages) */
.app__main--no-top-bar {
  padding-top: 0;
}

/* Full screen mode (no padding — e.g., map view) */
.app__main--full {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .app__main {
    padding-top: var(--nav-height-mobile);
  }
}


/* ============================================================
   2. PAGE CONTAINER
   ============================================================
   Wraps the content of individual pages/views.
   Centers content and applies horizontal padding.
   ============================================================ */

.page {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-6) var(--content-padding);
}

.page--narrow {
  max-width: var(--container-md);
}

.page--wide {
  max-width: var(--container-2xl);
}

.page--full {
  max-width: 100%;
  padding: 0;
}

.page--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height) - var(--bottom-nav-height));
  min-height: calc(100dvh - var(--nav-height) - var(--bottom-nav-height));
}

@media (max-width: 768px) {
  .page {
    padding: var(--space-4) var(--content-padding-mobile);
  }

  .page--centered {
    min-height: calc(100vh - var(--nav-height-mobile) - var(--bottom-nav-height));
    min-height: calc(100dvh - var(--nav-height-mobile) - var(--bottom-nav-height));
  }
}


/* ============================================================
   3. CONTENT CONTAINER
   ============================================================
   A narrower container for text-heavy or form content.
   Keeps content readable on wide screens.
   ============================================================ */

.content {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.content--sm {
  max-width: 480px;
}

.content--md {
  max-width: 600px;
}

.content--lg {
  max-width: 960px;
}

.content--full {
  max-width: 100%;
}


/* ============================================================
   4. SIDEBAR LAYOUT (DESKTOP)
   ============================================================
   Two-column layout with a fixed sidebar and scrollable
   main content. Used on tablet and desktop.
   ============================================================ */

.sidebar-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
}

.sidebar-layout__sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky);
}

.sidebar-layout__content {
  flex: 1;
  margin-left: var(--sidebar-width);
  overflow-y: auto;
  min-height: 0;
}

/* Sidebar sections */
.sidebar__header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--nav-height);
}

.sidebar__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
}

.sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}

.sidebar__section {
  padding: var(--space-3) var(--space-2);
}

.sidebar__section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-1);
}

/* Collapsed sidebar */
.sidebar-layout__sidebar--collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-layout__sidebar--collapsed + .sidebar-layout__content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Mobile: sidebar becomes hidden */
@media (max-width: 768px) {
  .sidebar-layout {
    flex-direction: column;
  }

  .sidebar-layout__sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
    overflow: visible;
    display: none;
  }

  .sidebar-layout__sidebar--mobile-visible {
    display: flex;
  }

  .sidebar-layout__content {
    margin-left: 0;
  }
}


/* ============================================================
   5. PAGE HEADER
   ============================================================
   Title area at the top of pages with title, subtitle,
   and action buttons.
   ============================================================ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.page-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}

.page-header__subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .page-header {
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-header__actions {
    width: 100%;
  }

  .page-header__actions .btn {
    flex: 1;
  }
}


/* ============================================================
   6. SECTION
   ============================================================
   Content sections within a page.
   ============================================================ */

.section {
  margin-bottom: var(--space-8);
}

.section:last-child {
  margin-bottom: 0;
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.section__subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.section__action {
  flex-shrink: 0;
}

/* Divider between sections */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-8) 0;
}


/* ============================================================
   7. GRID SYSTEM
   ============================================================ */

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid--auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid--gap-sm {
  gap: var(--space-3);
}

.grid--gap-lg {
  gap: var(--space-6);
}

.grid--gap-xl {
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid--2-mobile {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   8. FLEX UTILITIES
   ============================================================ */

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Alignment */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* Gaps */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }


/* ============================================================
   9. LIST LAYOUT
   ============================================================
   Vertical list of items (user rows, channel rows, etc.)
   ============================================================ */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.list--divided .list__item {
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.list--divided .list__item:last-child {
  border-bottom: none;
}

.list__item {
  min-height: var(--touch-target-min);
}

/* Card List — each item is a card */
.list--cards {
  gap: var(--space-3);
}

.list--cards .list__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}


/* ============================================================
   10. SPLIT LAYOUT
   ============================================================
   Two-pane layout — left panel and right panel.
   Commonly used for list + detail views.
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
}

.split__left {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.split__right {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split__left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* On mobile, show one pane at a time */
  .split--mobile-left .split__right {
    display: none;
  }

  .split--mobile-right .split__left {
    display: none;
  }
}


/* ============================================================
   11. STACK LAYOUT
   ============================================================
   Vertical stack with consistent spacing.
   ============================================================ */

.stack {
  display: flex;
  flex-direction: column;
}

.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-2); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }


/* ============================================================
   12. CHANNEL VIEW LAYOUT
   ============================================================
   The main PTT/channel view layout.
   Header → Speaker area → PTT button at bottom.
   ============================================================ */

.channel-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-height) - var(--bottom-nav-height));
  min-height: calc(100dvh - var(--nav-height) - var(--bottom-nav-height));
}

.channel-view__header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
}

.channel-view__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.channel-view__footer {
  padding: var(--space-6) var(--space-4);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .channel-view {
    min-height: calc(100vh - var(--nav-height-mobile) - var(--bottom-nav-height));
    min-height: calc(100dvh - var(--nav-height-mobile) - var(--bottom-nav-height));
  }
}


/* ============================================================
   13. PTT SCREEN LAYOUT
   ============================================================
   Full-screen optimized layout for the PTT experience.
   Centers the PTT button with maximum visual focus.
   ============================================================ */

.ptt-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: calc(100vh - var(--nav-height) - var(--bottom-nav-height));
  min-height: calc(100dvh - var(--nav-height) - var(--bottom-nav-height));
  padding: var(--space-4);
}

.ptt-screen__channel-info {
  text-align: center;
  padding: var(--space-4);
}

.ptt-screen__channel-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.ptt-screen__channel-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.ptt-screen__speaker-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-6);
}

.ptt-screen__ptt-area {
  padding: var(--space-6) var(--space-4);
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}

.ptt-screen__members {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

@media (max-width: 768px) {
  .ptt-screen {
    min-height: calc(100vh - var(--nav-height-mobile) - var(--bottom-nav-height));
    min-height: calc(100dvh - var(--nav-height-mobile) - var(--bottom-nav-height));
  }
}


/* ============================================================
   14. ADMIN LAYOUT
   ============================================================
   Dashboard-style layout with sidebar navigation
   and content area.
   ============================================================ */

.admin-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
}

.admin-layout__nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

.admin-layout__content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: var(--space-6);
  overflow-y: auto;
}

/* Admin nav items */
.admin-nav {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
  min-height: var(--touch-target-min);
  text-decoration: none;
}

.admin-nav__item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.admin-nav__item--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.admin-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-nav__label {
  flex: 1;
}

.admin-nav__badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 6px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

/* Admin stat cards */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
}

.admin-stat-card__label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.admin-stat-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}

.admin-stat-card__change {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-stat-card__change--up {
  color: var(--success);
}

.admin-stat-card__change--down {
  color: var(--danger);
}

@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }

  .admin-layout__nav {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: none;
  }

  .admin-layout__nav--mobile-visible {
    display: flex;
  }

  .admin-layout__content {
    margin-left: 0;
    padding: var(--space-4);
  }

  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-2);
  }

  .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav__item {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
  }
}


/* ============================================================
   15. AUTH LAYOUT
   ============================================================
   Centered layout for login, register, password reset.
   ============================================================ */

.auth-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-6);
  background: var(--bg-primary);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.auth-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.auth-card__logo-text {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.auth-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.auth-card__subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-card__footer {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.auth-card__footer a {
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.auth-card__footer a:hover {
  color: var(--accent-hover);
}

.auth-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.auth-card__divider::before,
.auth-card__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-card__divider-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

@media (max-width: 480px) {
  .auth-layout {
    padding: var(--space-4);
    align-items: flex-start;
    padding-top: var(--space-12);
  }

  .auth-card {
    padding: var(--space-6);
    border: none;
    box-shadow: none;
    background: transparent;
  }
}


/* ============================================================
   16. SPACING UTILITIES
   ============================================================ */

/* Margin */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }


/* ============================================================
   17. VISIBILITY UTILITIES
   ============================================================ */

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* Show/hide based on screen size */
.desktop-only {
  display: none;
}

.mobile-only {
  display: block;
}

@media (min-width: 769px) {
  .desktop-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }

  /* Flex variants */
  .desktop-only--flex {
    display: flex;
  }

  .desktop-only--grid {
    display: grid;
  }
}


/* ============================================================
   18. RESPONSIVE UTILITIES
   ============================================================ */

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

@media (max-width: 768px) {
  .mobile-text-center {
    text-align: center;
  }

  .mobile-text-left {
    text-align: left;
  }
}

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
.min-w-0 { min-width: 0; }

/* Height */
.h-full { height: 100%; }
.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-sticky);
}

/* Truncate text */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Border */
.border {
  border: 1px solid var(--border);
}

.border-bottom {
  border-bottom: 1px solid var(--border);
}

.border-top {
  border-top: 1px solid var(--border);
}

/* Border radius */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }