/* mudblazor-compact.css — shared compact/dense styling for MudBlazor components
   Sections are organized by component family for clarity and maintainability.
*/

/* === Compact Selects & Popovers ===
   Thin bordered controls matching the composer mockup (24px, #d2d6de border,
   4px radius, 11px). Reused by the AgentPicker controls and the session picker. */
.chat-compact-select .mud-input {
    font-size: 11px !important;
    color: var(--mud-palette-text-primary);
}
.chat-compact-select .mud-input.mud-input-outlined {
    min-height: 24px;
}
.chat-compact-select .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
    border-radius: 4px !important;
}
.chat-compact-select .mud-input-control-input-container {
    padding: 0 !important;
}
.chat-compact-select .mud-input-slot,
.chat-compact-select input.mud-input-slot,
.chat-compact-select div.mud-input-slot {
    min-height: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.chat-compact-select .mud-select-input {
    line-height: 24px;
}
.chat-compact-select .mud-input-adornment-end {
    margin-top: 0;
}
/* Pull the dropdown caret snug to the right edge so selects match the model
   button (numeric spinners are left alone). */
.chat-compact-select.mud-select .mud-input-adornment-end {
    margin-right: -9px;
}
/* Drop MudBlazor's dense top/bottom margin so the selects/numeric fields line up
   with the model button (which has no such margin) at the same y-position. */
.chat-compact-select.mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hook class used by MudSelectItem in compact selectors. */
.chat-compact-popover .mud-list-item {
    min-height: unset;
    padding-top: 2px;
    padding-bottom: 2px;
}
.chat-compact-popover .mud-list-item-gutters {
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.chat-compact-popover .mud-typography {
    font-size: 0.75rem !important;
    line-height: 1.3;
}

/* === Compact TreeView === */
.compact-treeview .mud-treeview-item-content {
  min-height: 22px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.92rem;
}
.compact-treeview .mud-treeview-item {
  margin-bottom: 0;
}
.compact-treeview .mud-treeview-item-icon {
  margin-right: 4px;
}
.compact-treeview .mud-typography.mud-typography-body1.mud-treeview-item-label {
  margin-left: 2px;
  font-size: 0.8rem;
}
.compact-treeview .mud-treeview-item-text {
  margin-left: 2px;
  font-size: 0.8rem;
}
.compact-treeview .mud-treeview-group {
  margin-left: 4px !important;
}

 /* Reduce padding in MudFileExplorer to make it more compact */
.compact-table .mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 2px 2px !important;
    padding-inline-start: 2px !important;
    padding-inline-end: 2px !important;
}

/* === Compact AppBar === */
/* Reduce leading whitespace so the drawer-toggle icon sits closer to the edge.
   MudBlazor's dense toolbar uses 24px horizontal padding; Edge="Edge.Start"
   pulls the leading icon back by 12px, netting a 12px inset. Tighten the left
   padding so the inset is smaller. */
.mud-appbar .mud-toolbar-appbar {
    padding-left: 16px;
}


/* === Expansion panel headers ===
   MudBlazor sets user-select:none on .mud-expand-panel-header (it is a toggle).
   The header text is content users want to select and copy; dragging still
   selects, clicking still toggles. */
.compact-panel .mud-expand-panel-header {
    user-select: text;
}

/* === Tabs ===
   MudBlazor hardcodes text-transform: uppercase on .mud-tab (no theme hook).
   Follow the theme's button text-transform instead so tabs match buttons. */
.mud-tab {
    text-transform: var(--mud-typography-button-text-transform);
    letter-spacing: normal;
}