/* Buttons, filters, segmented controls and search. */
/* ---------------------------------------------------------- the filter bar */
/* A filter is its own control, not a chip: a chip labels something, a filter
   turns part of a view on or off. The segmented switch on Табло sets the
   measure — 14px text in a 42px control — and every other filter follows it,
   so a bar of them reads as one row of controls rather than as a mix of
   unrelated widgets. */
.check-chip,
.filter-select,
.segment > button,
.segment > a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
}

/* The two that stand on their own rather than inside a group wear the same
   capsule a segment does — grey ground, no outline, ink once they are on —
   and carry its full height (4px + 34px + 4px), so a row of filters is one
   set of controls whether they came in a group or alone. */
.check-chip,
.filter-select {
  height: 42px;
  border-radius: 999px;
  background-color: var(--card2);
  border: 0;
  color: var(--text);
}

.check-chip:hover,
.filter-select:hover {
  box-shadow: none;
  background-color: var(--hover);
}

/* The capsule itself says whether the filter is on, exactly as a segment item
   does, which leaves the box inside it with nothing to say. It stays in the
   page for the keyboard and for screen readers. */
.check-chip input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The inner pill is the part that fills, so an "on" toggle carries the same
   block of ink as the active item of a segment, not a taller one. */
.check-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
}

.check-chip:has(input:checked) > span {
  background-color: var(--ink);
  color: var(--ink-text);
}

/* The row that holds the filter groups, and a group inside it. */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filters .filter-set {
  gap: 6px;
}

/* One type style for every real button, whether it is a <button> or an <a>:
   uppercase, bold, slightly spaced. Variants differ only in background and border. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.btn.primary {
  --button-hover-ring: var(--ink);
  background: var(--ink);
  color: var(--ink-text);
  border-color: transparent;
}

/* A solid coloured button carries its label in --on-fill on a *-fill tone:
   white on the plain --red is only 3.48:1 in the light theme and 2.98:1 in
   the dark one, both under AA for a 12px bold label. */
.btn.danger {
  --button-hover-ring: var(--red-fill);
  background: var(--red-fill);
  color: var(--on-fill);
  border-color: transparent;
}

.btn.ok {
  background: var(--green-bg);
  color: var(--green-ink);
  border-color: transparent;
}

.btn.compact {
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
}

/* A filter that is a real checkbox, dressed as a pill. */
.check-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  margin: 0;
}

/* A filter that is a select, with its own chevron. */
.filter-select {
  width: auto;
  padding: 0 36px 0 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23111114' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* The chevron is a picture, so it cannot take a token: the dark theme swaps
   the whole image. It lives here, beside the control it belongs to. */
[data-theme="dark"] .filter-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23f2f3f6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Segmented control: one grey capsule, the active segment is ink. */
/* Segmented control: one grey capsule, the active segment is ink. */
.segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--card2);
}

/* On Настройки the capsule is a direct child of the page column, which would
   stretch it the full width; elsewhere it sits inside a row and is left alone. */
main > .segment {
  align-self: start;
}

/* A segment item is a <button> or, when it navigates, an <a>. Both are laid
   out the same way so the text sits in the middle of the pill either way. */
.segment > button,
.segment > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}

.segment > button:hover,
.segment > a:hover {
  box-shadow: none;
  background: var(--card);
}

.segment > button.on,
.segment > a.on,
.segment > [aria-selected="true"] {
  background: var(--ink);
  color: var(--ink-text);
}

/* The count that rides along with a filter's name. */
.segment .n {
  font-size: 11px;
  opacity: .6;
  margin-left: 5px;
}

/* The red hairline was 1.48:1 against the card; mixed at 65% it is 3.47:1,
   which is what a control's edge needs. */
.btn.link-danger {
  --button-hover-ring: var(--red-line);
  color: var(--red-ink);
  border-color: color-mix(in srgb,var(--red-ink) 65%,var(--card));
}

/* A small count chip inside a button, e.g. the number of notes. */
.btn .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--card2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.btn.primary .count {
  background: rgba(255,255,255,.18);
  color: inherit;
}

/* ------------------------------------------- buttons dressed as something else */
/* Everything that opens a popup is a real <button>, so Tab reaches it and a
   screen reader announces it as a control instead of as plain text. These
   rows, lines and cards keep the look of the <a> or <div> they replace: the
   button type styles (uppercase, bold, centred, no width) are undone here,
   and each element's own rule supplies the rest. */
button.mline,
button.info-client,
button.search-item,
button.name,
button.foot-link,
button.glyph,
button.kbd {
  font-family: inherit;
  /* The UA sets a button's line-height to normal, which would change the
     height of the line or row it now stands in. */
  line-height: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

button.mline,
button.info-client,
button.search-item {
  width: 100%;
  font-weight: 400;
}

button.name {
  min-width: 0;
  max-width: 100%;
  font-weight: inherit;
}

/* The hover ring belongs to things that look like buttons; these carry their
   own hover (a background wash) or none at all. */
button.mline:hover,
button.info-client:hover,
button.search-item:hover,
button.name:hover,
button.foot-link:hover,
button.kbd:hover {
  box-shadow: none;
}

/* The name inside a row: a control, drawn exactly like the text it replaces. */
button.name {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* "N плащания ›" and "абонамент" in a card's foot: links in every way but the
   tag, which has to be a button because there is no page behind them. */
.card .foot button.foot-link {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  font-weight: 500;
  color: var(--tone-ink);
}

/* The ESC hint in the search palette closes the palette, so it is a button. */
button.kbd {
  font-weight: 500;
  background: none;
}

/* The round glyph in a client row is the button that opens the client's card,
   so the keyboard has a way in that is not the row itself (the row folds the
   accordion). It is drawn exactly as the <span> it replaces. */
button.glyph {
  padding: 0;
  color: inherit;
}

button.glyph:hover {
  box-shadow: none;
}


/* -------------------------------------------------------------- tooltip */
/* A control with no word on it names itself on hover. Same ink capsule the
   rail uses for its icons, a size smaller, and below the control rather than
   beside it, which is where a row or a column header has the room. It shows
   for the keyboard too, so tabbing a row of icons is not a row of blanks.
   The rail keeps its own placement: its rules are more specific than these.
   Written as data-tip rather than title so the browser does not also raise
   its own late, unstyled tooltip over this one. */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ink-text);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  /* The control it names may be a button in capitals; the tooltip is a
     sentence, so it takes none of that. */
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 5;
}

/* A tooltip cannot leave the box it is drawn in, and a list that scrolls
   sideways clips at its own edge. For a control near that edge the capsule
   hangs from the control's side instead of from its middle, so the words stay
   inside the list rather than being cut off by it. */
[data-tip-align="start"]::after {
  left: 0;
  transform: none;
}

[data-tip-align="end"]::after {
  left: auto;
  right: 0;
  transform: none;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
}