/**
 * RSL Adaptive Density Mode
 * @version 1.0.0
 *
 * Automatically adjusts spacing, padding, and gaps based on:
 * - Pointer type (coarse/fine)
 * - Viewport size
 * - User preferences
 */

/* ============================================
   DENSITY CSS VARIABLES
   ============================================ */

:root {
  /* Compact Density - Fine pointer (mouse/trackpad) */
  --density-compact-gap: 0.75rem;
  --density-compact-padding: 0.5rem;
  --density-compact-item-padding: 0.75rem;
  --density-compact-sidebar-margin: 1rem;

  /* Standard Density - Default */
  --density-standard-gap: 1rem;
  --density-standard-padding: 1rem;
  --density-standard-item-padding: 1rem;
  --density-standard-sidebar-margin: 1.5rem;

  /* Spacious Density - Coarse pointer (touch) */
  --density-spacious-gap: 1.5rem;
  --density-spacious-padding: 1.5rem;
  --density-spacious-item-padding: 1.5rem;
  --density-spacious-sidebar-margin: 2rem;

  /* Active density variables (defaults to standard) */
  --rsl-gap: var(--density-standard-gap);
  --rsl-padding: var(--density-standard-padding);
  --rsl-item-padding: var(--density-standard-item-padding);
  --rsl-sidebar-margin: var(--density-standard-sidebar-margin);
}

/* ============================================
   DENSITY MODE CLASSES
   ============================================ */

/* Compact Density */
[data-rsl-density="compact"],
.rsl-density-compact {
  --rsl-gap: var(--density-compact-gap);
  --rsl-padding: var(--density-compact-padding);
  --rsl-item-padding: var(--density-compact-item-padding);
  --rsl-sidebar-margin: var(--density-compact-sidebar-margin);
}

/* Standard Density */
[data-rsl-density="standard"],
.rsl-density-standard {
  --rsl-gap: var(--density-standard-gap);
  --rsl-padding: var(--density-standard-padding);
  --rsl-item-padding: var(--density-standard-item-padding);
  --rsl-sidebar-margin: var(--density-standard-sidebar-margin);
}

/* Spacious Density */
[data-rsl-density="spacious"],
.rsl-density-spacious {
  --rsl-gap: var(--density-spacious-gap);
  --rsl-padding: var(--density-spacious-padding);
  --rsl-item-padding: var(--density-spacious-item-padding);
  --rsl-sidebar-margin: var(--density-spacious-sidebar-margin);
}

/* ============================================
   APPLY DENSITY TO SLOT LAYOUTS
   ============================================ */

.slot-layout,
.nested-slot-layout,
.responsive-slot-layout {
  gap: var(--rsl-gap);
}

/* Slot items with optional padding */
.slot-item[data-padded="true"],
.slot-item.padded {
  padding: var(--rsl-item-padding);
}

/* Slot item wrapper */
.slot-item-wrapper {
  gap: var(--rsl-gap);
}

/* Sidebar margins */
.rsl-sidebar {
  margin: 0 var(--rsl-sidebar-margin) var(--rsl-sidebar-margin) 0;
}

@media (max-width: 768px) {
  .rsl-sidebar {
    margin: 0 0 var(--rsl-sidebar-margin) 0;
  }
}

/* ============================================
   BALANCED LAYOUT DENSITY SUPPORT
   ============================================ */

/* Container for balanced columns */
.responsive-slot-layout[data-layout="balanced"] {
  display: flex;
  gap: var(--rsl-gap);
  align-items: flex-start;
}

/* Individual columns */
.responsive-slot-layout[data-layout="balanced"] .rsl-smart-column {
  display: flex;
  flex-direction: column;
  gap: var(--rsl-gap);
  flex: 1;
  min-width: 0; /* Prevents flex items from overflowing */
}

/* Mobile: stack columns vertically */
@media (max-width: 768px) {
  .responsive-slot-layout[data-layout="balanced"] {
    flex-direction: column;
  }

  .responsive-slot-layout[data-layout="balanced"] .rsl-smart-column {
    width: 100%;
  }
}

/* ============================================
   ACCESSIBILITY & USER PREFERENCES
   ============================================ */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .slot-layout,
  .nested-slot-layout,
  .responsive-slot-layout,
  .slot-item {
    transition: none !important;
    animation: none !important;
  }
}

/* Increase spacing for users who prefer larger text */
@media (prefers-contrast: more) {
  :root {
    --density-compact-gap: 1rem;
    --density-standard-gap: 1.25rem;
    --density-spacious-gap: 1.75rem;
  }
}

/* ============================================
   DENSITY MODE INDICATORS (OPTIONAL)
   ============================================ */

/* Add visual indicator for current density (for debugging/demos) */
[data-rsl-density]::before {
  /* Hidden by default - uncomment to enable */
  /* content: attr(data-rsl-density);
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.75rem;
  z-index: 9999;
  text-transform: uppercase;
  font-weight: bold; */
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* On very small screens, enforce minimum spacing */
@media (max-width: 480px) {
  [data-rsl-density="compact"] {
    --rsl-gap: 0.875rem;
  }
}

/* On very large screens, allow more generous spacing */
@media (min-width: 1600px) {
  [data-rsl-density="spacious"] {
    --rsl-gap: 2rem;
    --rsl-padding: 2rem;
  }
}