/* ============================================================================
 * Shared Collapsible Panel Component
 * ============================================================================
 * Reusable CSS for collapsible sidebar/properties panels
 * Used by: Code, Vis, Writer, Scholar workspaces
 * ========================================================================== */

/* ===========================================================================
   BASE PANEL STYLES
   These define the common structure for collapsible panels
   =========================================================================== */

/* Collapsible panel base */
.collapsible-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width 0.2s ease,
    min-width 0.2s ease;
  flex-shrink: 0;
}

/* Collapsed state - uses --ui-collapsed-pane-width (default 48px), cursor pointer for click-to-expand */
.collapsible-panel.collapsed {
  width: var(--ui-collapsed-pane-width, 48px) !important;
  min-width: var(--ui-collapsed-pane-width, 48px) !important;
  cursor: pointer;
}

/* Hide content when collapsed */
.collapsible-panel.collapsed .panel-content,
.collapsible-panel.collapsed .sidebar-content,
.collapsible-panel.collapsed .properties-content,
.collapsible-panel.collapsed .panel-body,
.collapsible-panel.collapsed .panel-footer {
  display: none;
}

/* Collapsed header: full height, top-aligned, vertical layout
   Uses !important to override app-specific rules (e.g. writer's
   height: 50px !important, max-height: 50px) */
.collapsible-panel.collapsed .panel-header {
  padding: 8px 0 0;
  justify-content: flex-start !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  flex-direction: column;
  align-items: center;
  border-bottom: none;
}

/* Panel title: visible as inline heading when expanded, vertical text when collapsed */
.collapsible-panel .panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

/* Collapsed: icon on top, horizontal label below (matching workspace sidebar) */
.collapsible-panel.collapsed .panel-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary, #8ba7b8);
  margin: 4px 0 0;
  white-space: nowrap;
  line-height: 1;
}

.collapsible-panel.collapsed .panel-title i {
  display: block;
  font-size: var(--ui-nav-icon-size, 20px);
  color: var(--workspace-icon-primary, #059669);
}

/* Collapsed toggle button: compact */
.collapsible-panel.collapsed .panel-toggle-btn {
  border: none;
  margin: 4px 0;
  padding: 4px;
}

/* ===========================================================================
   PANEL HEADER STYLES
   =========================================================================== */

.collapsible-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 50px;
  min-height: 50px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--workspace-border-default);
  background: var(--workspace-bg-secondary);
  position: relative;
}

/* ---- Expanded panel indicator bar (REMOVED) ----
   Previously showed a 3px left-edge bar on expanded panel headers.
   Removed: title divs should not have left border highlighters. */

/* Expanded header hover: green background on empty space (foldable state)
   JS adds .foldable class when cursor is on empty header area */
.collapsible-panel:not(.collapsed) .panel-header.foldable,
.collapsible-panel:not(.collapsed) .pane-header.foldable,
.collapsible-panel:not(.collapsed) .details-header.foldable,
.collapsible-panel:not(.collapsed) .properties-header.foldable,
.collapsible-panel:not(.collapsed) .sidebar-header.foldable,
.collapsible-panel:not(.collapsed) .tools-nav-header.foldable,
.collapsible-panel:not(.collapsed) .terminal-panel-top.foldable,
.workspace-sidebar:not(.collapsed) .sidebar-header.foldable {
  background: rgba(5, 150, 105, 0.15) !important;
}
[data-theme="light"] .collapsible-panel:not(.collapsed) .panel-header.foldable,
[data-theme="light"] .collapsible-panel:not(.collapsed) .pane-header.foldable,
[data-theme="light"]
  .collapsible-panel:not(.collapsed)
  .details-header.foldable,
[data-theme="light"]
  .collapsible-panel:not(.collapsed)
  .properties-header.foldable,
[data-theme="light"]
  .collapsible-panel:not(.collapsed)
  .sidebar-header.foldable,
[data-theme="light"]
  .collapsible-panel:not(.collapsed)
  .tools-nav-header.foldable,
[data-theme="light"]
  .collapsible-panel:not(.collapsed)
  .terminal-panel-top.foldable,
[data-theme="light"]
  .workspace-sidebar:not(.collapsed)
  .sidebar-header.foldable {
  background: rgba(5, 150, 105, 0.12) !important;
}

/* Collapsed header - compact horizontal padding */
.collapsible-panel.collapsed .panel-header {
  padding-left: 4px;
  padding-right: 4px;
}

/* Header title */
.collapsible-panel .panel-header h4,
.collapsible-panel .panel-header h5 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Header icon */
.collapsible-panel .panel-header h4 i,
.collapsible-panel .panel-header h5 i {
  color: var(--workspace-icon-primary);
}

/* Hide title when collapsed */
.collapsible-panel.collapsed .panel-header h4,
.collapsible-panel.collapsed .panel-header h5 {
  display: none;
}

/* ===========================================================================
   TOGGLE BUTTON STYLES
   =========================================================================== */

.panel-toggle-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-toggle-btn:hover {
  background: var(--workspace-bg-tertiary);
  color: var(--workspace-icon-primary);
}

/* Toggle button in collapsed state - full width centered */
.collapsible-panel.collapsed .panel-toggle-btn {
  width: 100%;
  padding: 4px;
}

/* Opt-in: hide title when expanded (content is self-explanatory) */
.collapsible-panel:not(.collapsed)[data-hide-title-expanded] .panel-title {
  display: none;
}

/* ===========================================================================
   PANEL CONTENT STYLES
   =========================================================================== */

.collapsible-panel .panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===========================================================================
   SIDEBAR PANEL (LEFT)
   =========================================================================== */

.collapsible-panel.sidebar-panel {
  width: 250px;
  min-width: 10px;
  border-right: none; /* Resizer handles visual separation */
}

/* ===========================================================================
   PROPERTIES PANEL (RIGHT)
   =========================================================================== */

.collapsible-panel.properties-panel {
  width: 320px;
  min-width: 10px;
  border-left: none; /* Resizer handles visual separation */
}

/* ===========================================================================
   COLLAPSED HOVER EFFECTS
   Animated chevron indicator + background highlight on collapsed panels
   =========================================================================== */

/* Hover: green-tinted background + edge glow (covers header too) */
.collapsible-panel.collapsed:hover,
.collapsible-panel.collapsed:hover .panel-header,
.collapsible-panel.collapsed:hover .pane-header,
.collapsible-panel.collapsed:hover .details-header,
.collapsible-panel.collapsed:hover .properties-header,
.collapsible-panel.collapsed:hover .tools-nav-header,
.collapsible-panel.collapsed:hover .terminal-panel-top {
  background: rgba(5, 150, 105, 0.08) !important;
}
.collapsible-panel.collapsed:hover {
  box-shadow: inset -3px 0 10px -4px var(--workspace-icon-primary);
}
.collapsible-panel.collapsed:has(.right-panel-toggle):hover {
  box-shadow: inset 3px 0 10px -4px var(--workspace-icon-primary);
}
[data-theme="light"] .collapsible-panel.collapsed:hover,
[data-theme="light"] .collapsible-panel.collapsed:hover .panel-header,
[data-theme="light"] .collapsible-panel.collapsed:hover .pane-header,
[data-theme="light"] .collapsible-panel.collapsed:hover .details-header,
[data-theme="light"] .collapsible-panel.collapsed:hover .properties-header,
[data-theme="light"] .collapsible-panel.collapsed:hover .tools-nav-header,
[data-theme="light"] .collapsible-panel.collapsed:hover .terminal-panel-top {
  background: rgba(5, 150, 105, 0.06) !important;
}

/* ===========================================================================
   LIGHT THEME OVERRIDES
   =========================================================================== */

[data-theme="light"] .collapsible-panel .panel-header {
  background: var(--workspace-bg-secondary);
  border-bottom-color: var(--workspace-border-default);
}

[data-theme="light"] .collapsible-panel .panel-header h4,
[data-theme="light"] .collapsible-panel .panel-header h5 {
  color: var(--text-primary);
}

[data-theme="light"] .panel-toggle-btn:hover {
  background: var(--workspace-bg-tertiary);
}

/* Backward compatibility aliases moved to collapsible-panel-compat.css */

/* ===========================================================================
   SHARED DETAILS PANEL (RIGHT PANEL)
   Standard details/properties panel used across all workspace modules.
   Provides: header with toggle button, content area, collapsed state.
   Used by: Writer, Scholar, Vis, Console, Hub, Verifier
   =========================================================================== */

/* Details header - standard 50px with toggle + title */
.details-header,
.properties-header {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid var(--workspace-border-default);
  background: var(--workspace-bg-secondary);
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.details-header h5,
.details-header .panel-title,
.properties-header h5,
.properties-header .panel-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--workspace-text-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.details-header h5 i,
.details-header .panel-title i,
.properties-header h5 i,
.properties-header .panel-title i {
  color: var(--workspace-icon-primary);
}

/* Details content area */
.details-content,
.properties-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  color: var(--workspace-text-primary);
}

/* Collapsed state for details/properties panels: hide content, keep title */
.collapsed .details-header h4,
.collapsed .details-header h5,
.collapsed .properties-header h4,
.collapsed .properties-header h5,
.collapsed .details-content,
.collapsed .properties-content {
  display: none;
}

/* Show panel-title in collapsed details/properties: icon on top, label below */
.collapsed .details-header .panel-title,
.collapsed .properties-header .panel-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary, #8ba7b8);
  margin: 4px 0 0;
  white-space: nowrap;
  line-height: 1;
}

.collapsed .details-header .panel-title i,
.collapsed .properties-header .panel-title i {
  display: block;
  font-size: var(--ui-nav-icon-size, 20px);
  color: var(--workspace-icon-primary, #059669);
}

.collapsed .details-header,
.collapsed .properties-header {
  padding: 8px 0 0;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  flex-direction: column;
  border-bottom: none;
}

.collapsed .details-toggle,
.collapsed .properties-toggle,
.collapsed .properties-toggle-btn {
  border: none;
  margin: 4px 0;
  padding: 4px;
}

/* ===========================================================================
   SHARED SIDEBAR HEADER COLLAPSED STATE
   When a sidebar is collapsed, hide everything in the header except
   the toggle button (.panel-toggle-btn / .sidebar-toggle / .sidebar-toggle-btn).
   Works for console, writer, scholar, vis modules.
   =========================================================================== */

.collapsed .sidebar-header {
  padding: 8px 0 0;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}

.collapsed
  .sidebar-header
  > *:not(.panel-toggle-btn):not(.sidebar-toggle):not(.sidebar-toggle-btn):not(
    .sidebar-title
  ) {
  display: none;
}

.collapsed .sidebar-header .panel-toggle-btn,
.collapsed .sidebar-header .sidebar-toggle,
.collapsed .sidebar-header .sidebar-toggle-btn {
  border: none;
  margin: 4px 0;
  padding: 4px;
}

/* Sidebar title: icon on top, label below when collapsed — scoped to collapsible-panel.
   workspace-sidebar has its own collapsed rules in workspace-sidebar.css */
.collapsible-panel.collapsed .sidebar-header .sidebar-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary, #8ba7b8);
  margin: 4px 0 0;
  white-space: nowrap;
  line-height: 1;
}

.collapsible-panel.collapsed .sidebar-header .sidebar-title i {
  display: block;
  font-size: var(--ui-nav-icon-size, 20px);
  color: var(--workspace-icon-primary, #059669);
}