/**
 * Files Tab Enhancements - Phase 1 Quick Wins
 * Styles for improved file management UI
 * Modernized with CSS Custom Properties, logical properties, and @layer
 */

@layer files-base, files-components, files-responsive;

@layer files-base {
  /* ===========================
     CSS Custom Properties
     =========================== */
  :root {
    /* Colors - Bootstrap palette */
    --files-color-primary: #0d6efd;
    --files-color-primary-hover: #0a58ca;
    --files-color-success: #28a745;
    --files-color-danger: #dc3545;
    --files-color-warning: #ffc107;
    --files-color-info: #17a2b8;
    --files-color-secondary: #6c757d;
    --files-color-secondary-hover: #545b62;

    /* Neutral colors */
    --files-color-bg-light: #f8f9fa;
    --files-color-bg-white: #ffffff;
    --files-color-border: #dee2e6;
    --files-color-border-light: #e9ecef;
    --files-color-border-lighter: #f0f0f0;
    --files-color-text-dark: #212529;
    --files-color-text-muted: #6c757d;

    /* State colors */
    --files-color-folder-bg: #fffbf0;
    --files-color-folder-hover: #fff3cd;
    --files-color-highlight: #e7f3ff;

    /* Icon colors */
    --files-color-icon-pdf: #dc3545;
    --files-color-icon-image: #17a2b8;
    --files-color-icon-excel: #28a745;
    --files-color-icon-word: #0d6efd;
    --files-color-icon-invoice: #ffc107;
    --files-color-icon-folder: #fd7e14;

    /* Gradients */
    --files-gradient-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --files-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --files-gradient-success-hover: linear-gradient(135deg, #059669 0%, #047857 100%);

    /* Spacing */
    --files-spacing-xs: 0.25rem;
    --files-spacing-sm: 0.375rem;
    --files-spacing-md: 0.5rem;
    --files-spacing-lg: 0.75rem;
    --files-spacing-xl: 1rem;
    --files-spacing-2xl: 1.5rem;

    /* Border radius */
    --files-radius-sm: 0.375rem;
    --files-radius-md: 0.5rem;

    /* Shadows */
    --files-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --files-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
    --files-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.1);
    --files-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.1);
    --files-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);

    /* Transitions */
    --files-transition-fast: 0.2s;
    --files-transition-medium: 0.3s;

    /* Dimensions */
    --files-btn-size: 36px;
    --files-touch-target: 44px;
  }
}

@layer files-components {
  /* ===========================
     Breadcrumb Navigation
     =========================== */
  .files-header .breadcrumb {
    background-color: var(--files-color-bg-light);
    border-radius: var(--files-radius-md);
    padding-block: var(--files-spacing-lg);
    padding-inline: var(--files-spacing-xl);
    box-shadow: var(--files-shadow-sm);
  }

  .files-header .breadcrumb-item {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
  }

  .files-header .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    font-size: 1.25rem;
    color: var(--files-color-text-muted);
  }

  .files-header .breadcrumb-link {
    color: var(--files-color-primary);
    text-decoration: none;
    transition: color var(--files-transition-fast);
  }

  .files-header .breadcrumb-link:hover {
    color: var(--files-color-primary-hover);
    text-decoration: underline;
  }

  /* ===========================
     File Preview Modal
     =========================== */
  .file-preview-modal .file-preview-container {
    max-block-size: 70vh;
    overflow: auto;
    border: 1px solid var(--files-color-border);
    border-radius: var(--files-radius-md);
    background: var(--files-color-bg-light);
    padding: var(--files-spacing-xl);
  }

  .file-preview-iframe {
    inline-size: 100%;
    block-size: 70vh;
    border: none;
    border-radius: var(--files-radius-sm);
  }

  .file-preview-image {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
    margin-inline: auto;
    border-radius: var(--files-radius-sm);
    box-shadow: var(--files-shadow-lg);
  }

  .file-preview-text {
    background: var(--files-color-bg-white);
    padding: var(--files-spacing-xl);
    border-radius: var(--files-radius-sm);
    font-size: clamp(0.8rem, 2vw, 0.875rem);
    line-height: 1.6;
    max-block-size: 60vh;
    overflow: auto;
    text-align: start;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .file-preview-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--files-spacing-md);
    padding: var(--files-spacing-lg);
    background: var(--files-color-bg-light);
    border-radius: var(--files-radius-sm);
  }

  .file-preview-popup {
    padding: var(--files-spacing-2xl) !important;
  }

  /* ===========================
     Upload Progress
     =========================== */
  .upload-progress-container {
    animation: slideDown var(--files-transition-medium) ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .upload-progress-item {
    padding: var(--files-spacing-lg);
    background: var(--files-color-bg-light);
    border-radius: var(--files-radius-sm);
    border-inline-start: 3px solid var(--files-color-primary);
  }

  .upload-progress-item .progress {
    background-color: var(--files-color-border-light);
  }

  .upload-status {
    font-weight: 500;
  }

  /* ===========================
     File Table Enhancements
     =========================== */
  .fileTable {
    box-shadow: var(--files-shadow-md);
    border-radius: var(--files-radius-md);
    overflow: hidden;
  }

  .fileTable thead {
    background: var(--files-gradient-header);
    color: var(--files-color-bg-white);
  }

  .fileTable thead th {
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    letter-spacing: 0.5px;
    padding-block: var(--files-spacing-xl);
    padding-inline: var(--files-spacing-lg);
  }

  .fileTable tbody tr {
    transition: all var(--files-transition-fast) ease;
    border-block-end: 1px solid var(--files-color-border-lighter);
  }

  .fileTable tbody tr:hover {
    background-color: var(--files-color-bg-light);
    transform: translateX(2px);
  }

  .file-row {
    cursor: pointer;
  }

  .folder-row {
    background-color: var(--files-color-folder-bg);
  }

  .folder-row:hover {
    background-color: var(--files-color-folder-hover);
  }

  .file-link {
    color: var(--files-color-text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--files-transition-fast);
  }

  .file-link:hover {
    color: var(--files-color-primary);
    text-decoration: underline;
  }

  /* ===========================
     File Icons
     =========================== */
  .fileTable td:first-child {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
  }

  .fa-file-pdf {
    color: var(--files-color-icon-pdf);
  }

  .fa-file-image {
    color: var(--files-color-icon-image);
  }

  .fa-file-excel {
    color: var(--files-color-icon-excel);
  }

  .fa-file-word {
    color: var(--files-color-icon-word);
  }

  .fa-file-invoice-dollar {
    color: var(--files-color-icon-invoice);
  }

  .fa-folder {
    color: var(--files-color-icon-folder);
    font-size: clamp(1rem, 2vw, 1.125rem);
  }

  /* ===========================
     Action Buttons
     =========================== */
  .fileTable .btn-group {
    gap: var(--files-spacing-sm);
    display: flex;
  }

  .fileTable .btn-group .btn {
    padding: var(--files-spacing-md);
    inline-size: var(--files-btn-size);
    block-size: var(--files-btn-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--files-radius-sm);
    font-size: clamp(0.8rem, 2vw, 0.875rem);
    transition: all var(--files-transition-fast) ease;
    border: 1px solid transparent;
    background-color: var(--files-color-bg-light);
    color: var(--files-color-secondary);
  }

  .fileTable .btn-group .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--files-shadow-hover);
  }

  .fileTable .btn-group .btn:active {
    transform: translateY(0);
  }

  /* Button color variants */
  .fileTable .previewEfileButton {
    background-color: var(--files-color-highlight);
    color: var(--files-color-primary);
  }

  .fileTable .previewEfileButton:hover {
    background-color: var(--files-color-primary);
    color: var(--files-color-bg-white);
    border-color: var(--files-color-primary);
  }

  .fileTable .downloadEfileButton {
    background-color: #e8f5e9;
    color: var(--files-color-success);
  }

  .fileTable .downloadEfileButton:hover {
    background-color: var(--files-color-success);
    color: var(--files-color-bg-white);
    border-color: var(--files-color-success);
  }

  .fileTable .renameEfileButton {
    background-color: var(--files-color-bg-light);
    color: var(--files-color-secondary);
  }

  .fileTable .renameEfileButton:hover {
    background-color: var(--files-color-secondary);
    color: var(--files-color-bg-white);
    border-color: var(--files-color-secondary);
  }

  .fileTable .deleteEfileButton {
    background-color: #ffebee;
    color: var(--files-color-danger);
  }

  .fileTable .deleteEfileButton:hover {
    background-color: var(--files-color-danger);
    color: var(--files-color-bg-white);
    border-color: var(--files-color-danger);
  }

  /* ===========================
     Header Enhancements
     =========================== */
  .efileHeading {
    font-weight: 600;
    color: #495057;
  }

  .efileHeading i {
    color: var(--files-color-primary);
  }

  .files-header {
    border-block-end: 2px solid var(--files-color-border-light);
    padding-block-end: var(--files-spacing-xl);
    margin-top: 2rem;
  }

  .btn-lg {
    padding-block: var(--files-spacing-lg);
    padding-inline: var(--files-spacing-2xl);
    font-size: clamp(0.9rem, 2vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  .btn-success {
    background: var(--files-gradient-success);
    border: none;
  }

  .btn-success:hover {
    background: var(--files-gradient-success-hover);
    transform: translateY(-1px);
    box-shadow: var(--files-shadow-success);
  }

  /* ===========================
     Empty State
     =========================== */
  :is(.text-center .fa-folder-open, .text-center .fa-folder-plus) {
    color: #cbd5e1;
  }

  /* ===========================
     Drag and Drop
     =========================== */
  .fileTable.table-primary {
    background-color: var(--files-color-highlight) !important;
    border: 2px dashed var(--files-color-primary);
  }

  .fileTable.table-primary tbody tr {
    background-color: var(--files-color-highlight);
  }

  /* ===========================
     Rename Input Group
     =========================== */
  .rename-input-group {
    margin-block-start: var(--files-spacing-md);
  }

  .rename-input-group .input-group {
    max-inline-size: 400px;
  }

  /* ===========================
     Loading States
     =========================== */
  .spinner-border {
    color: var(--files-color-primary);
  }

  /* ===========================
     Accessibility
     =========================== */
  :is(.btn, .breadcrumb-link, .file-link, .folderLink):focus {
    outline: 2px solid var(--files-color-primary);
    outline-offset: 2px;
  }
}

@layer files-responsive {
  /* ===========================
     Mobile Responsiveness
     =========================== */
  @media (max-width: 768px) {
    .files-header .row > div {
      margin-block-end: var(--files-spacing-lg);
    }

    .files-header .col-md-4 {
      text-align: center !important;
    }

    .fileTable {
      font-size: clamp(0.8rem, 2vw, 0.875rem);
    }

    .fileTable thead th {
      padding-block: var(--files-spacing-md);
      padding-inline: var(--files-spacing-sm);
      font-size: clamp(0.65rem, 1.5vw, 0.7rem);
    }

    .fileTable tbody td {
      padding-block: var(--files-spacing-md);
      padding-inline: var(--files-spacing-sm);
    }

    .btn-group-sm .btn {
      padding-block: 0.2rem;
      padding-inline: 0.3rem;
      font-size: clamp(0.7rem, 2vw, 0.75rem);
    }

    .btn-group-sm .btn i {
      font-size: clamp(0.8rem, 2vw, 0.875rem);
    }

    .file-preview-iframe {
      block-size: 50vh;
    }

    .file-preview-modal {
      font-size: clamp(0.8rem, 2vw, 0.875rem);
    }

    .breadcrumb {
      font-size: clamp(0.7rem, 2vw, 0.75rem);
    }
  }

  /* Stack action buttons on very small screens */
  @media (max-width: 576px) {
    .btn-group {
      display: flex;
      flex-direction: column;
      gap: var(--files-spacing-xs);
    }

    .btn-group .btn {
      inline-size: 100%;
      border-radius: var(--files-spacing-xs) !important;
    }
  }

  /* ===========================
     Touch-Friendly Targets
     =========================== */
  @media (hover: none) and (pointer: coarse) {
    .btn {
      min-block-size: var(--files-touch-target);
      min-inline-size: var(--files-touch-target);
    }

    :is(.folderLink, .file-link) {
      padding-block: var(--files-spacing-md);
      display: inline-block;
    }

    .breadcrumb-link {
      padding-block: var(--files-spacing-xs);
      padding-inline: var(--files-spacing-md);
      display: inline-block;
    }
  }

  /* ===========================
     Print Styles
     =========================== */
  @media print {
    :is(.files-header .btn, .btn-group) {
      display: none;
    }

    .fileTable {
      box-shadow: none;
    }
  }

  /* ===========================
     Dark Mode Support
     =========================== */
  @media (prefers-color-scheme: dark) {
    :root {
      --files-color-bg-light: #2d3748;
      --files-color-bg-white: #1a202c;
      --files-color-border: #4a5568;
      --files-color-text-dark: #e2e8f0;
      --files-color-folder-bg: #2d3748;
      --files-color-folder-hover: #374151;
    }

    .files-header .breadcrumb {
      background-color: var(--files-color-bg-light);
    }

    :is(.file-preview-container, .file-preview-navigation, .upload-progress-item) {
      background: var(--files-color-bg-white);
      border-color: var(--files-color-border);
    }

    .file-preview-text {
      background: var(--files-color-bg-light);
      color: var(--files-color-text-dark);
    }

    .fileTable {
      background-color: var(--files-color-bg-white);
    }

    .fileTable tbody tr:hover {
      background-color: var(--files-color-bg-light);
    }

    .folder-row {
      background-color: var(--files-color-folder-bg);
    }

    .folder-row:hover {
      background-color: var(--files-color-folder-hover);
    }
  }
}