/* ----------------------------------------------------------- control bar
 * templates/ui/control_bar.html. Every segment and every dropdown carries a
 * label over it saying what it changes (.ctl, .ctl__label: micro, graphite,
 * like a form label). One bar per table or chart, between two cloud rules:
 * left which data, right how they are shown, tools at the right end; on a
 * narrow screen whole groups wrap, never a single button (WEB-KOM-09).
 *
 * A bar is dense: everything in it takes the compact height. Components
 * only ever read --ctl-h; the bar redefines it. The older bars of the
 * charts and tables (.cc-controls, .cc-bar, .hv-toolbar, .chart-controls)
 * are dense bars too until they are rebuilt (Etappe 3). */
@layer ui {
.ctl-bar, .cc-controls, .cc-bar, .hv-toolbar, .chart-controls { --ctl-h: var(--ctl-h-sm); }

.ctl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  min-width: 0; margin: 0; }
.ctl__label { display: block; margin: 0; font-size: var(--t-micro); line-height: 1; color: var(--text-secondary);
  white-space: nowrap; }

.ctl-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4) var(--s-5); padding: var(--s-4) 0; margin: 0 0 var(--gap-rel);
  border-top: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); }
.ctl-bar__grp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-5); min-width: 0; }
.ctl-bar__grp--view { margin-left: auto; gap: var(--s-4); }
.ctl-bar__div { width: 1px; height: var(--ctl-h); background: var(--mist); }

/* «Eigener …»: From and To in the panel style of the dropdowns. */
.ctl-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 42; display: flex; align-items: flex-end;
  gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface-page); border: 1px solid var(--rule-fine);
  white-space: nowrap; }
.ctl-pop .cc-dd__pop { max-height: 16rem; }
.ctl-apply { height: var(--ctl-h); padding: 0 var(--s-4); }

/* The row search: a line of its own at the bottom of the bar, under the
   tools, between the bar's rules - the portal's search field (ui/field.css)
   at the bar's height with its label over it. It used to hang under the
   icon as a loose box over the next line (WEB-KOM-09, WEB-BEW-04). */
.ctl-bar__find { flex: 1 0 100%; display: grid; justify-content: end; gap: .3rem; min-width: 0; }
.ctl-bar__find input { width: 17rem; max-width: 100%; }

/* Etappe 3: what the dossiers' bars also carry - a switch as a checkbox
   with its label (owner decision 7), a count, and the pager under a data
   table (rows per page, the pages as a segment), without the bar's rules. */
.ctl-bar .ctl-check { display: inline-flex; align-items: center; height: var(--ctl-h); margin: 0; }
.ctl-bar .hv-count { align-self: center; font-size: var(--t-micro); color: var(--text-secondary); white-space: nowrap; }
.ctl-bar--pager { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 0; border-bottom: 0; }

@media (max-width: 720px) {
  .ctl-bar { gap: var(--s-4); }
  .ctl-bar__grp--view { margin-left: 0; }
  .ctl-bar__div { display: none; }
  /* As wide as From, To and Apply need: sized to the narrow range select
     it stood as a column with only «Von» in sight, the rest under the
     opened list. */
  .ctl-pop { right: auto; left: 0; flex-wrap: wrap; white-space: normal; width: max-content;
    max-width: calc(100vw - 3rem); }
  .ctl-bar__find { justify-content: stretch; }
  .ctl-bar__find input { width: 100%; }
}
}  /* @layer ui */