/* public/css/dashboard.css
 * Dashboard Layout & Sidebar Styling (Feature-complete)
 * Last Updated: 2025-05-30
 */

/* ╭─────────────────────────────────────────────╮
   │ Sidebar Core Layout & Aesthetic             │
   ╰─────────────────────────────────────────────╯ */
#sidebar {
  width: 19rem;                       /* ~304px, wide for comfort */
  min-height: 100%;
  position: relative;
  z-index: 55;                        /* Layer: below header, above main content */
  background-color: var(--card-bg-light);
  border-right: 1px solid var(--border-light);
  transition: width var(--transition-std) ease-in-out, transform var(--transition-std) ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;                   /* Uniform internal space */
}
.dark #sidebar {
  background-color: var(--card-bg-dark);
  border-color: var(--border-dark);
}

/* Sidebar Sections: Spacing, Dividers */
.sidebar-section {
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}
.sidebar-section:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}
.dark .sidebar-section:not(:last-child) {
  border-bottom-color: var(--border-dark);
}

/* Sidebar Section Titles */
.sidebar-section-title {
  padding: 0.25rem 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted-light);
  text-transform: uppercase;
}
.dark .sidebar-section-title {
  color: var(--text-muted-dark);
}

/* ╭─────────────────────────────────────────────╮
   │ Mobile Sidebar (CodeGen, <768px)           │
   ╰─────────────────────────────────────────────╯ */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    width: 85%;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border-light);
    padding-top: calc(var(--header-height) + 0.5rem);
  }
  .dark #sidebar {
    border-color: var(--border-dark);
  }
  /* #sidebarOverlay is handled in JS for overlay/dimming */
}

/* ╭─────────────────────────────────────────────╮
   │ Desktop Sidebar Collapse (≥768px)           │
   ╰─────────────────────────────────────────────╯ */
body.sidebar-collapsed #sidebar {
  width: 4.75rem;                /* 76px, icon bar */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Hide sidebar text/inputs when collapsed */
body.sidebar-collapsed #sidebar .sidebar-item-text,
body.sidebar-collapsed #sidebar .sidebar-section-title,
body.sidebar-collapsed #sidebar .file-context-group .truncate,
body.sidebar-collapsed #sidebar #fileContextContainer p,
body.sidebar-collapsed #sidebar #addFileContextBtn,
body.sidebar-collapsed #sidebar #uploadFolderBtn,
body.sidebar-collapsed #sidebar #fileContextContainer .text-xs.text-gray-400,
body.sidebar-collapsed #sidebar #sessionsList .text-\[0\.7rem\] {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: -10px;
  transform: translateX(-20px) scaleX(0.5);
  transition:
    opacity 0.1s ease-out,
    transform 0.1s ease-out,
    width 0.1s ease-out,
    height 0.1s step-end,
    margin-left 0.1s ease-out;
}

/* Restore sidebar text/inputs when expanded */
body:not(.sidebar-collapsed) #sidebar .sidebar-item-text,
body:not(.sidebar-collapsed) #sidebar .sidebar-section-title,
body:not(.sidebar-collapsed) #sidebar .file-context-group .truncate,
body:not(.sidebar-collapsed) #sidebar #fileContextContainer p,
body:not(.sidebar-collapsed) #sidebar #addFileContextBtn,
body:not(.sidebar-collapsed) #sidebar #uploadFolderBtn,
body:not(.sidebar-collapsed) #sidebar #fileContextContainer .text-xs.text-gray-400,
body:not(.sidebar-collapsed) #sidebar #sessionsList .text-\[0\.7rem\] {
  opacity: 1;
  pointer-events: auto;
  width: auto;
  height: auto;
  margin-left: 0;
  transform: translateX(0) scaleX(1);
  transition:
    opacity 0.2s ease-in 0.1s,
    transform 0.2s ease-in 0.1s,
    width 0.2s ease-in 0.1s,
    height 0.15s step-start,
    margin-left 0.2s ease-in 0.1s;
}

/* Sidebar list/button alignment in collapsed state */
body.sidebar-collapsed #sidebar .sidebar-section .btn,
body.sidebar-collapsed #sidebar #sessionsList li {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
body.sidebar-collapsed #sidebar .sidebar-section .btn .icon-sm {
  margin-right: 0 !important;
}
body.sidebar-collapsed #sidebar #sessionsList li .sidebar-item-text,
body.sidebar-collapsed #sidebar .sidebar-section .btn .sidebar-item-text {
  display: none;
}
body.sidebar-collapsed #sidebar .flex.items-center > .icon-sm {
  margin: auto;
}

/* Hide model select in collapsed sidebar */
body.sidebar-collapsed #sidebar label[for="model"],
body.sidebar-collapsed #sidebar select#model {
  display: none;
}

/* File context fields and remove buttons when collapsed */
body.sidebar-collapsed #sidebar #fileContextContainer .file-context-group {
  padding: 0.25rem;
}
body.sidebar-collapsed #sidebar #fileContextContainer .file-context-group input,
body.sidebar-collapsed #sidebar #fileContextContainer .file-context-group textarea {
  display: none;
}
body.sidebar-collapsed #sidebar #fileContextContainer .file-context-group .remove-file-btn,
body.sidebar-collapsed #sidebar #fileContextContainer .file-context-group .remove-folder-file-btn {
  width: 100%;
  text-align: center;
}

/* ╭─────────────────────────────────────────────╮
   │ Sessions List Flex and Actions              │
   ╰─────────────────────────────────────────────╯ */
/* Main session list items as flex rows */
#sessionsList .session-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#sessionsList .session-main-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Pin icon container */
#sessionsList .pin-status-icon-container {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.375rem;
  flex-shrink: 0;
}

/* Actions (3-dot menu, etc.) */
#sessionsList .session-actions-container {
  position: relative;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
#sessionsList .session-options-btn {
  /* JS sets: opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity */
  /* Always visible on mobile if needed (set in JS) */
}

/* Dropdown action menu */
.session-action-menu {
  /* JS sets:
     hidden absolute right-0 mt-1 w-40 bg-white dark:bg-gray-800
     border border-gray-200 dark:border-gray-600 rounded-md shadow-xl z-20 py-1 */
  /* z-index: 120+ recommended for popover menu */
}

/* Action menu items */
.session-menu-item {
  cursor: pointer;
  /* JS/Tailwind: block w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 */
}
.session-menu-item.js-delete-action {
  /* If needed: color: var(--color-danger-500); */
}
.session-menu-item.js-delete-action:hover {
  /* If needed: background: var(--color-danger-50); */
}
.session-menu-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Pinned sessions: additional style if needed */
#sessionsList li.session-pinned .session-main-info {
  /* Example: font-weight: 600; */
}

/* Explicit class for the session title text if extra styling needed */
#sessionsList .session-title-text {
  /* Style as needed */
}