/* Site settings - UI density.
   Activated by html.density-compact / html.density-large (toggled in app.js igmSettings).
   Default (no class) = normal density, so these rules have zero effect unless chosen. */

/* ---------- Compact ---------- */
html.density-compact,
html.density-compact body {
  --base-height-multiplier: 7;
  --button-height: 28px;
  --field-height: 28px;
  --height-32: 28px;
}

html.density-compact fluent-button,
html.density-compact fluent-anchor {
  --button-height: 28px;
  --base-height-multiplier: 7;
  --base-horizontal-spacing-multiplier: 2;
}

html.density-compact fluent-button::part(control),
html.density-compact fluent-anchor::part(control),
html.density-compact fluent-text-field::part(control),
html.density-compact fluent-text-field::part(field),
html.density-compact fluent-number-field::part(control),
html.density-compact fluent-number-field::part(field),
html.density-compact fluent-search::part(control),
html.density-compact fluent-search::part(field),
html.density-compact fluent-select::part(control),
html.density-compact fluent-combobox::part(control),
html.density-compact fluent-date-picker::part(control),
html.density-compact fluent-time-picker::part(control) {
  min-height: 28px;
  font-size: 13px;
}

html.density-compact fluent-text-field,
html.density-compact fluent-number-field,
html.density-compact fluent-search,
html.density-compact fluent-select,
html.density-compact fluent-combobox,
html.density-compact fluent-date-picker,
html.density-compact fluent-time-picker {
  --field-height: 24px;
  --base-height-multiplier: 7;
  height: 24px !important;
}

/* Compact: shorter INPUT fields (24px) so they look proportional in compact.
   Buttons/anchors keep their height (block above stays 28px) - only the field
   controls are reduced. Applies to both disabled and editable fields. */
html.density-compact fluent-text-field::part(control),
html.density-compact fluent-text-field::part(field),
html.density-compact fluent-number-field::part(control),
html.density-compact fluent-number-field::part(field),
html.density-compact fluent-search::part(control),
html.density-compact fluent-search::part(field),
html.density-compact fluent-select::part(control),
html.density-compact fluent-combobox::part(control),
html.density-compact fluent-date-picker::part(control),
html.density-compact fluent-time-picker::part(control) {
  height: 24px !important;
  min-height: 24px !important;
}

/* Data grid - genuinely tighter rows (smaller font + lower row height).
   Must use !important + higher specificity to beat:
   - app.css  .fluent-data-grid-row > td { padding: 3px 3px 3px 5px !important }
   - per-grid scoped  [role=row] / [role=gridcell] { min-height: 32px } (spec 0,3,0)
   Only vertical metrics are touched - horizontal padding stays as-is. */
html.density-compact .fluent-data-grid [role="row"],
html.density-compact .fluent-data-grid [role="gridcell"],
html.density-compact .fluent-data-grid-row,
html.density-compact .fluent-data-grid-row > td,
html.density-compact .fluent-data-grid td {
  min-height: 26px !important;
}

html.density-compact .fluent-data-grid [role="gridcell"],
html.density-compact .fluent-data-grid-row > td,
html.density-compact .fluent-data-grid td {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html.density-compact .fluent-data-grid th,
html.density-compact .fluent-data-grid .column-header {
  min-height: 28px !important;
  font-size: 12px !important;
}

html.density-compact .paginator,
html.density-compact fluent-paginator {
  padding: 6px 12px;
  font-size: 11px;
}

html.density-compact .paginator-nav fluent-button::part(control),
html.density-compact .paginator fluent-button::part(control) {
  min-width: 24px;
  min-height: 22px;
  font-size: 11px;
}

html.density-compact .badge,
html.density-compact .status-badge {
  min-height: 16px;
  padding: 0 5px;
  font-size: 10px;
}

html.density-compact .form-field,
html.density-compact .form-field-dis,
html.density-compact .form-lookup {
  /* Shorter fields (24px) for compact - overrides igm.css `.form-field-dis {
     height: var(--height-32) !important }` (0,1,0); this selector is (0,2,0). */
  height: 24px !important;
  min-height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px;
  /* Base border (#efefef) is lighter than the disabled-field fill (#ebebeb) so fields
     blend into each other in tight compact rows. A darker border delineates them. */
  border-color: #c4c4c4 !important;
}

/* FluentUI inputs (Numele/Prenume/IDNP etc. = <fluent-text-field>) draw their box
   border inside shadow DOM via ::part(control); when disabled it is #e0e0e0, barely
   visible on the #ebebeb fill, so the field has no edge and merges with neighbours.
   Match the AirFrame field border (#c4c4c4). border-color only - focus is a separate
   box-shadow/underline, so this does not affect the focus ring. */
html.density-compact fluent-text-field::part(control),
html.density-compact fluent-number-field::part(control),
html.density-compact fluent-search::part(control),
html.density-compact fluent-select::part(control),
html.density-compact fluent-combobox::part(control),
html.density-compact fluent-date-picker::part(control),
html.density-compact fluent-time-picker::part(control) {
  border-color: #c4c4c4 !important;
}

/* Form labels + row spacing. The label is ~half of every form-cell, so
   without scaling it the form barely compacts (controls already scale via
   ::part rules above). !important beats airframe.css .form-label margins. */
html.density-compact .form-label,
html.density-compact .form-label-top {
  font-size: 12px !important;
}

/* Beside-layout label was centered against the old 28px field via a 7px top margin.
   With the field now 24px, shrink it so the label stays centered AND the label area
   (margin + 20px line) no longer holds the grid row taller than the 24px field. */
html.density-compact .form-label {
  margin-top: 2px !important;
}

html.density-compact .form-label-top {
  margin-top: 2px !important;
  margin-bottom: 1px !important;
}

html.density-compact .form-cell,
html.density-compact .form-cell-top {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

/* Lookup/picklist selected value (.form-lookup-item) + placeholder carry a
   hardcoded 14px that ignores density, so in compact the dropdown value looks
   bigger than the rest of the form. Inherit the (density-scaled) field font. */
html.density-compact .form-lookup .form-lookup-item,
html.density-compact .form-lookup .form-lookup-none,
html.density-large .form-lookup .form-lookup-item,
html.density-large .form-lookup .form-lookup-none {
  font-size: inherit !important;
}

/* Compact dropdowns: after shrinking the field to 24px the internal pieces drift off
   centre - the chevron <svg> is absolutely positioned with a 32px-era top:7px (sits
   low) and the value text rides ~3px high in its line-box (flex/line-height can't
   recentre it - only a nudge works, same approach as the normal-density lookup fix).
   Recentre both for the 24px field. */
html.density-compact .form-lookup > svg {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
html.density-compact .form-lookup > label,
html.density-compact .form-lookup .form-lookup-item,
html.density-compact .form-lookup .form-lookup-none {
  position: relative !important;
  top: 3px !important;
}

/* Sticky form-header banner (.form-header + .header-content h1/p): scale padding,
   title/description typography and sticky margin so the banner shrinks in compact.
   !important needed - app.css sets .form-header-sticky margin with !important. */
html.density-compact .form-header {
  padding: 6px 16px !important;
}
html.density-compact .form-header-sticky {
  margin: 0 14px 6px 14px !important;
}
html.density-compact .header-content h1 {
  font-size: 1.05em !important;
  margin-bottom: 2px !important;
}
html.density-compact .header-content p {
  font-size: 11.5px !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;
}

/* ---------- Large ---------- */
html.density-large,
html.density-large body {
  --base-height-multiplier: 10;
  --button-height: 40px;
  --field-height: 40px;
  --height-32: 40px;
}

html.density-large fluent-button,
html.density-large fluent-anchor {
  --button-height: 40px;
  --base-height-multiplier: 10;
  --base-horizontal-spacing-multiplier: 4;
}

html.density-large fluent-button::part(control),
html.density-large fluent-anchor::part(control),
html.density-large fluent-text-field::part(control),
html.density-large fluent-text-field::part(field),
html.density-large fluent-number-field::part(control),
html.density-large fluent-number-field::part(field),
html.density-large fluent-search::part(control),
html.density-large fluent-search::part(field),
html.density-large fluent-select::part(control),
html.density-large fluent-combobox::part(control),
html.density-large fluent-date-picker::part(control),
html.density-large fluent-time-picker::part(control) {
  min-height: 40px;
  font-size: 14px;
}

html.density-large fluent-text-field,
html.density-large fluent-number-field,
html.density-large fluent-search,
html.density-large fluent-select,
html.density-large fluent-combobox,
html.density-large fluent-date-picker,
html.density-large fluent-time-picker {
  --field-height: 40px;
  --base-height-multiplier: 10;
}

/* Data grid - taller, roomier rows. Same override strategy as compact:
   !important to beat app.css cell padding and per-grid scoped min-height:32px. */
html.density-large .fluent-data-grid [role="row"],
html.density-large .fluent-data-grid [role="gridcell"],
html.density-large .fluent-data-grid-row,
html.density-large .fluent-data-grid-row > td,
html.density-large .fluent-data-grid td {
  min-height: 44px !important;
}

html.density-large .fluent-data-grid [role="gridcell"],
html.density-large .fluent-data-grid-row > td,
html.density-large .fluent-data-grid td {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

html.density-large .fluent-data-grid th,
html.density-large .fluent-data-grid .column-header {
  min-height: 42px !important;
  font-size: 14px !important;
}

html.density-large .paginator,
html.density-large fluent-paginator {
  padding: 10px 16px;
  font-size: 13px;
}

html.density-large .paginator-nav fluent-button::part(control),
html.density-large .paginator fluent-button::part(control) {
  min-width: 32px;
  min-height: 30px;
  font-size: 13px;
}

html.density-large .badge,
html.density-large .status-badge {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 12px;
}

html.density-large .form-field,
html.density-large .form-field-dis,
html.density-large .form-lookup {
  min-height: 40px !important;
  font-size: 14px;
}

/* Form labels + row spacing - roomier counterpart to compact. */
html.density-large .form-label,
html.density-large .form-label-top {
  font-size: 15px !important;
}

html.density-large .form-label-top {
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

html.density-large .form-cell,
html.density-large .form-cell-top {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* Sticky form-header banner - roomier counterpart to compact. */
html.density-large .form-header {
  padding: 16px 28px !important;
}
html.density-large .form-header-sticky {
  margin: 0 14px 14px 14px !important;
}
html.density-large .header-content h1 {
  font-size: 1.55em !important;
  margin-bottom: 8px !important;
}
html.density-large .header-content p {
  font-size: 15px !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}