/* 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: #465062;
}
.chat-compact-select .mud-input.mud-input-outlined {
    min-height: 24px;
}
.chat-compact-select .mud-input-outlined-border {
    border-color: #d2d6de !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;
}


/* === Future: Add more compact/dense classes by component family here === */

/* === Chat session toolbar query container (plan171) ===
   Establish the container on the session-action row here (global sheet), not the
   scoped .razor.css, because the row is a MudStack whose root does not receive
   the component's scoped attribute. The @container chattoolbar rules that switch
   the session actions between inline and the overflow menu live in
   ChatViewPanel.razor.css and query this container. */
.chat-view-panel-session-row {
    container-type: inline-size;
    container-name: chattoolbar;
}