// ==========================================================================
// Files Page Styles - Modern Design
// ==========================================================================

.files-page {
  
  .admin-main {
    padding-left: 1.25rem; // Subtle increase from main sidebar
    
    @include media-breakpoint-down(lg) {
      padding-left: 1rem; // Standard on smaller screens
    }
  }
  
  // Main files layout wrapper
  .files-layout {
    min-height: calc(100vh - var(--header-height) - var(--footer-height) - 3rem);
    margin-bottom: 2rem; // Add margin to ensure separation from footer
    
    @include media-breakpoint-up(lg) {
      min-height: calc(100vh - var(--header-height) - var(--footer-height) - 2rem);
      margin-bottom: 1.5rem;
    }
  }

  // ==========================================================================
  // FILES SIDEBAR STYLES
  // ==========================================================================
  
  .files-sidebar {
    background: var(--files-sidebar-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--files-border);
    padding: 0;
    height: 100%;
    overflow: hidden;
    transition: all var(--transition-base);

    @include media-breakpoint-down(lg) {
      position: fixed;
      left: -100%;
      top: var(--header-height);
      width: 320px;
      z-index: 1050;
      height: calc(100vh - var(--header-height) - var(--footer-height));
      border-radius: 0;

      &.show {
        left: 0;
      }
    }

    @include media-breakpoint-down(md) {
      width: 280px;
    }

    @include media-breakpoint-down(sm) {
      width: 100%;
    }

    .sidebar-section {
      padding: 1.5rem;
      border-bottom: 1px solid var(--files-border);

      &:last-child {
        border-bottom: none;
        flex: 1;
        overflow-y: auto;
      }

      h5, h6 {
        color: var(--files-text);
        font-weight: 600;
        margin-bottom: 1rem;
        font-size: 1rem;
      }
    }
  }

  // Storage info section
  .storage-info {
    background: linear-gradient(135deg, var(--bs-primary), #8b5cf6);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    color: white;
    margin-bottom: 1rem;

    h6 {
      color: white !important;
      margin-bottom: 0.75rem;
    }

    .storage-bar {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50px;
      height: 8px;
      overflow: hidden;
      margin: 0.75rem 0;

      .storage-progress {
        background: white;
        height: 100%;
        border-radius: 50px;
        transition: width 0.5s ease-in-out;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
      }
    }

    small {
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
  }

  // Quick access items
  .list-group-item {
    background: transparent;
    border: none;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--files-text);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    margin-bottom: 0.25rem;

    &:hover {
      background: rgba(var(--bs-primary-rgb), 0.1);
      color: var(--bs-primary);
      transform: translateX(4px);
    }

    &.active {
      background: var(--bs-primary);
      color: white;
    }

    i {
      width: 20px;
      text-align: center;
      font-size: 1rem;
    }

    .badge {
      background: rgba(var(--bs-secondary-rgb), 0.1);
      color: var(--files-text-muted);
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
      border-radius: 50px;
      font-weight: 500;
    }

    &:hover .badge {
      background: rgba(var(--bs-primary-rgb), 0.2);
      color: var(--bs-primary);
    }

    &.active .badge {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }
  }

  // Folder items
  .folder-item {
    padding: 0.75rem 0;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);

    &:hover {
      background: rgba(var(--bs-primary-rgb), 0.05);
      transform: translateX(2px);
    }

    .fw-medium {
      color: var(--files-text);
      font-size: 0.9rem;
    }

    small {
      color: var(--files-text-muted);
      font-size: 0.75rem;
    }

    i {
      color: var(--bs-primary);
      font-size: 1.1rem;
    }
  }

  // Recent files
  .recent-file-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);

    &:hover {
      background: rgba(var(--bs-primary-rgb), 0.05);
      transform: translateX(2px);
    }

    .file-icon {
      width: 32px;
      height: 32px;
      border-radius: var(--border-radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem !important;
      margin-right: 0.75rem;
      flex-shrink: 0;
    }

    .fw-medium {
      color: var(--files-text);
      font-size: 0.85rem;
      line-height: 1.3;
    }

    small {
      color: var(--files-text-muted);
      font-size: 0.75rem;
    }
  }

  // ==========================================================================
  // FILES MAIN AREA STYLES
  // ==========================================================================

  .files-main {
    padding-left: 1.5rem;

    @include media-breakpoint-down(lg) {
      padding-left: 0;
      margin-top: 1rem;
    }
  }

  // Files main header
  .files-main-header {
    background: var(--files-header-bg);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--box-shadow-sm);
    border: 1px solid var(--files-border);

    .breadcrumb {
      background: none;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;

      .breadcrumb-item {
        &.active {
          color: var(--files-text);
          font-weight: 500;
        }

        a {
          color: var(--bs-primary);
          text-decoration: none;
          transition: all var(--transition-fast);

          &:hover {
            color: var(--bs-primary);
            text-decoration: underline;
          }
        }
      }
    }

    .view-toggle {
      display: flex;
      background: rgba(var(--bs-secondary-rgb), 0.1);
      border-radius: var(--border-radius);
      overflow: hidden;
      border: 1px solid var(--files-border);

      .view-btn {
        border: none;
        background: transparent;
        color: var(--files-text-muted);
        padding: 0.5rem 0.75rem;
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: rgba(var(--bs-secondary-rgb), 0.1);
          color: var(--files-text);
        }

        &.active {
          background: var(--bs-primary);
          color: white;
        }

        i {
          font-size: 1rem;
        }
      }
    }
  }

  // ==========================================================================
  // FILE GRID STYLES
  // ==========================================================================

  .file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;

    @include media-breakpoint-down(md) {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 1rem;
    }

    @include media-breakpoint-down(sm) {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 0.75rem;
    }

    .file-item {
      background: var(--files-item-bg);
      border: 1px solid var(--files-border);
      border-radius: var(--border-radius-lg);
      padding: 1.5rem;
      text-align: center;
      cursor: pointer;
      transition: all var(--transition-base);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: transparent;
        transition: all var(--transition-fast);
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--box-shadow-lg);
        border-color: rgba(var(--bs-primary-rgb), 0.3);

        &::before {
          background: var(--bs-primary);
        }
      }

      &.selected {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), 0.05);

        &::before {
          background: var(--bs-primary);
        }
      }

      .file-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 1rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        transition: all var(--transition-fast);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
          border-radius: inherit;
        }
      }

      .file-name {
        font-weight: 500;
        color: var(--files-text);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .file-size,
      .file-date {
        color: var(--files-text-muted);
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
      }

      .file-date {
        margin-bottom: 0;
      }

      &:hover .file-icon {
        transform: scale(1.1);
      }
    }
  }

  // File type colors
  .file-icon {
    &.document {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
    }

    &.spreadsheet {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
    }

    &.image {
      background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      color: white;
    }

    &.presentation {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: white;
    }

    &.video {
      background: linear-gradient(135deg, #06b6d4, #0891b2);
      color: white;
    }

    &.audio {
      background: linear-gradient(135deg, #ec4899, #db2777);
      color: white;
    }

    &.archive {
      background: linear-gradient(135deg, #6b7280, #4b5563);
      color: white;
    }

    &.folder {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
    }

    &.other {
      background: linear-gradient(135deg, #64748b, #475569);
      color: white;
    }
  }

  // ==========================================================================
  // UPLOAD ZONE STYLES
  // ==========================================================================

  .upload-zone {
    border: 2px dashed var(--files-border);
    border-radius: var(--border-radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    background: var(--files-upload-bg);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.1) 0%, transparent 70%);
      opacity: 0;
      transition: opacity var(--transition-base);
    }

    &:hover {
      border-color: var(--bs-primary);
      background: rgba(var(--bs-primary-rgb), 0.02);
      transform: translateY(-2px);

      &::before {
        opacity: 1;
      }

      i {
        transform: scale(1.1);
        color: var(--bs-primary);
      }
    }

    i {
      color: var(--files-text-muted);
      transition: all var(--transition-fast);
      margin-bottom: 1rem;
    }

    h5 {
      color: var(--files-text);
      font-weight: 500;
      margin-bottom: 0.5rem;
    }

    p {
      color: var(--files-text-muted);
      margin: 0;
    }
  }

  // ==========================================================================
  // TABLE STYLES (List View)
  // ==========================================================================

  .table-responsive {
    max-height: 70vh; // Simpler, more flexible height
    overflow-y: auto;
    border-radius: var(--border-radius-lg);
    
    @include media-breakpoint-down(lg) {
      max-height: 60vh;
    }
  }

  .table {
    background: var(--files-item-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow-sm);
    border: 1px solid var(--files-border);
    margin-bottom: 0; // Remove default margin to prevent overflow

    thead {
      background: var(--files-header-bg);
      border-bottom: 1px solid var(--files-border);

      th {
        border: none;
        color: var(--files-text);
        font-weight: 600;
        font-size: 0.875rem;
        padding: 1rem;
        vertical-align: middle;

        // Simplified checkbox styling for table header
        .form-check-input {
          width: 16px;
          height: 16px;
          border: 1px solid var(--files-border);
          border-radius: 3px;
          background: var(--files-item-bg);
          transition: all var(--transition-fast);

          &:checked {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
          }

          &:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
          }
        }
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 0.1);
        transition: all var(--transition-fast);

        &:hover {
          background: rgba(var(--bs-primary-rgb), 0.03);
        }

        &.table-active {
          background: rgba(var(--bs-primary-rgb), 0.08);
        }

        &:last-child {
          border-bottom: none;
        }

        td {
          border: none;
          padding: 1rem;
          vertical-align: middle;
          color: var(--files-text);

          // Simplified checkbox styling for table rows
          .form-check-input {
            width: 16px;
            height: 16px;
            border: 1px solid var(--files-border);
            border-radius: 3px;
            background: var(--files-item-bg);
            transition: all var(--transition-fast);

            &:checked {
              background-color: var(--bs-primary);
              border-color: var(--bs-primary);
            }

            &:focus {
              box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
            }
          }

          // Consistent file icon sizing and positioning
          .file-icon {
            width: 32px !important;
            height: 32px !important;
            font-size: 0.9rem !important;
            border-radius: var(--border-radius-sm);
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0;
          }

          .badge {
            background: rgba(var(--bs-secondary-rgb), 0.1);
            color: var(--files-text-muted);
            border: 1px solid rgba(var(--bs-border-color-rgb), 0.2);
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: var(--border-radius-sm);
          }
        }
      }
    }
  }

  // ==========================================================================
  // RESPONSIVE DESIGN
  // ==========================================================================

  @include media-breakpoint-down(lg) {
    .files-main-header {
      .d-flex {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch !important;
      }

      .d-flex.align-items-center {
        flex-direction: row;
      }
    }
  }

  @include media-breakpoint-down(md) {
    .files-layout {
      height: calc(100vh - var(--header-height) - var(--footer-height) - 1rem);
    }

    .sidebar-section {
      padding: 1rem;
    }

    .files-main-header {
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .file-grid {
      .file-item {
        padding: 1rem;

        .file-icon {
          width: 48px;
          height: 48px;
          font-size: 1.5rem;
        }
      }
    }
  }

  @include media-breakpoint-down(sm) {
    .files-layout {
      height: calc(100vh - var(--header-height) - var(--footer-height) - 0.5rem);
    }

    .upload-zone {
      padding: 2rem 1rem;

      .fs-1 {
        font-size: 2.5rem !important;
      }
    }

    .table {
      font-size: 0.875rem;

      th, td {
        padding: 0.75rem 0.5rem;
      }
    }
  }
}

// ==========================================================================
// CSS CUSTOM PROPERTIES
// ==========================================================================

:root {
  --files-bg: #{$body-bg};
  --files-sidebar-bg: #{$white};
  --files-border: #{$border-color};
  --files-text: #{$body-color};
  --files-text-muted: #{$text-muted};
  --files-header-bg: #{$white};
  --files-item-bg: #{$white};
  --files-item-hover: #{$gray-50};
  --files-upload-bg: #{$gray-50};
}

[data-bs-theme="dark"] {
  --files-bg: #{$dark-bg};
  --files-sidebar-bg: #{$gray-800};
  --files-border: #{$dark-border-color};
  --files-text: #{$dark-color};
  --files-text-muted: #{$dark-text-muted};
  --files-header-bg: #{$gray-800};
  --files-item-bg: #{$gray-800};
  --files-item-hover: #{$gray-700};
  --files-upload-bg: #{$gray-900};
}

// ==========================================================================
// ANIMATIONS
// ==========================================================================

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-item {
  animation: fadeInUp 0.3s ease-out;
}

.file-grid .file-item:nth-child(odd) {
  animation-delay: 0.05s;
}

.file-grid .file-item:nth-child(even) {
  animation-delay: 0.1s;
}