// ==========================================================================
// DASHBOARD LAYOUTS
// ==========================================================================
// Theme-agnostic dashboard layout structures
// Visual styling handled by themes
// ==========================================================================

@use '../../semantic' as semantic;

// DASHBOARD CONTAINER
.dashboard-container {
  display: grid;
  grid-template-areas: 
    "sidebar header"
    "sidebar content";
  grid-template-columns: var(--sidebar-width, #{semantic.$semantic-sizing-sidebar-expanded}) 1fr;
  grid-template-rows: var(--header-height, #{semantic.$semantic-sizing-navbar-height}) 1fr;
  height: 100vh;
  overflow: hidden;
}

// DASHBOARD HEADER
.dashboard-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
  z-index: var(--z-header, 100);
  position: relative;

  .header-title {
    font-size: var(--header-title-size, 1.25rem);
    font-weight: var(--header-title-weight, 600);
    margin: 0;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--header-actions-gap, #{semantic.$semantic-spacing-component-padding-md});
  }
}

// DASHBOARD SIDEBAR
.dashboard-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: var(--z-sidebar, 90);
  position: relative;

  .sidebar-header {
    padding: var(--sidebar-header-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
    flex-shrink: 0;
  }

  .sidebar-nav {
    flex: 1;
    padding: 0 var(--sidebar-nav-padding, #{semantic.$semantic-spacing-component-padding-md});
    overflow-y: auto;
  }

  .sidebar-footer {
    padding: var(--sidebar-footer-padding, #{semantic.$semantic-spacing-component-padding-md});
    flex-shrink: 0;
  }

  // Sidebar state classes
  &.sidebar-is-collapsed {
    width: var(--sidebar-width-collapsed, #{semantic.$semantic-sizing-sidebar-collapsed});
    
    .sidebar-text,
    .sidebar-nav-text {
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition-duration, 0.2s) var(--transition-easing, ease);
    }

    .sidebar-nav-item {
      justify-content: center;
      padding: #{semantic.$semantic-spacing-component-padding-sm};
    }
  }

  &.sidebar-overlay-mode {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width, #{semantic.$semantic-sizing-sidebar-expanded});
    z-index: var(--z-sidebar-overlay, 1000);
    transform: translateX(-100%);
    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, ease);

    &.sidebar-open {
      transform: translateX(0);
    }
  }

  &.sidebar-fixed-position {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }
}

// DASHBOARD CONTENT
.dashboard-content {
  grid-area: content;
  overflow-y: auto;
  padding: var(--content-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
  position: relative;

  &.dashboard-content-full {
    padding: 0;
  }

  &.dashboard-content-constrained {
    max-width: var(--content-max-width, #{semantic.$semantic-sizing-content-wide});
    margin: 0 auto;
  }

  // Content state classes
  &.content-with-padding {
    padding: var(--content-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
  }

  &.content-is-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - var(--header-height, #{semantic.$semantic-sizing-navbar-height}));
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);

    // Webkit scrollbar styling
    &::-webkit-scrollbar {
      width: #{$base-spacing-2}; // 8px
      height: #{$base-spacing-2};
    }

    &::-webkit-scrollbar-track {
      background: var(--scrollbar-track, transparent);
      border-radius: #{$base-border-radius-sm};
    }

    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
      border-radius: #{$base-border-radius-sm};
      border: 1px solid var(--scrollbar-thumb-border, transparent);

      &:hover {
        background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
      }

      &:active {
        background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
      }
    }

    // Invisible scrollbar variant
    &.scrollbar-invisible {
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  &.content-is-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  &.content-has-breadcrumbs {
    .content-breadcrumbs {
      margin-bottom: #{semantic.$semantic-spacing-content-paragraph};
      padding-bottom: #{semantic.$semantic-spacing-component-padding-sm};
      border-bottom: #{semantic.$semantic-border-divider-width} solid var(--content-breadcrumb-border, transparent);
    }
  }

  // Content header styling
  .content-header {
    margin-bottom: #{semantic.$semantic-spacing-layout-section-sm};

    .content-title {
      font-size: var(--content-title-size, 2rem);
      font-weight: var(--content-title-weight, 600);
      margin: 0 0 #{semantic.$semantic-spacing-component-padding-sm} 0;
      line-height: var(--content-title-line-height, 1.2);
    }

    .content-subtitle {
      font-size: var(--content-subtitle-size, 1.125rem);
      color: var(--content-subtitle-color, rgba(0, 0, 0, 0.6));
      margin: 0;
      line-height: var(--content-subtitle-line-height, 1.4);
    }
  }

  // Content actions styling
  .content-actions {
    margin-top: #{semantic.$semantic-spacing-layout-section-sm};
    padding-top: #{semantic.$semantic-spacing-component-padding-md};
    border-top: #{semantic.$semantic-border-divider-width} solid var(--content-actions-border, transparent);
    display: flex;
    gap: #{semantic.$semantic-spacing-component-padding-sm};
    justify-content: flex-end;
    align-items: center;
  }
}

// COLLAPSIBLE SIDEBAR VARIANT
.dashboard-container.sidebar-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed, 72px) 1fr;

  .dashboard-sidebar {
    .sidebar-text {
      display: none;
    }
  }
}

// RESPONSIVE DASHBOARD
@media (max-width: 768px) {
  .dashboard-container {
    grid-template-areas: 
      "header"
      "content";
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height, 64px) 1fr;
  }

  .dashboard-sidebar {
    position: fixed;
    top: var(--header-height, 64px);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width, 280px);
    transform: translateX(-100%);
    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, ease);
    z-index: var(--z-sidebar-mobile, 1000);

    &.sidebar-open {
      transform: translateX(0);
    }
  }

  .dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, ease);
    z-index: var(--z-overlay, 999);
    pointer-events: none;

    &.overlay-active {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }
  }
}

// DASHBOARD GRID LAYOUTS
.dashboard-grid {
  display: grid;
  gap: var(--dashboard-grid-gap, 24px);
  
  &.grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  &.grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  
  &.grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  &.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width, 300px), 1fr));
  }

  &.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 300px), 1fr));
  }
}

// RESPONSIVE GRID
@media (max-width: 1200px) {
  .dashboard-grid.grid-4-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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