/* Dodijeljeni ugovori, Rang liste (R1 track awards). Tokens only: no hex here. */

/* ---- filter bar: on the page at every width (owner rule: filters are never
   hidden); components.css stacks .filters on a phone, this screen has five
   controls and pairs the two short ones instead. ---- */
.aw-filters .filters-q { max-width: 380px; }
.aw-filters .filters-select { min-width: 150px; }
.aw-filters .aw-narrow { min-width: 124px; }
.aw-filters option:disabled { color: var(--disabled-ink); }
/* As a flex row the five controls need 1.106 px and .main never gives that on
   a laptop, so "Vrsta postupka" was left alone on a second row at every width
   from 768 px to 1279 px. A grid lays them out in full rows instead: three
   tracks while the bar is narrow (search over two of them, then the four
   selects), all five in one row once each track is wide enough to read
   (from 900 px). Every control stays on the page either way. */
@media (min-width: 720px) {
  .filters.aw-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) 12px; align-items: center; }
  .aw-filters > * { min-width: 0; }
  .aw-filters .filters-q { grid-column: span 2; max-width: none; }
  .aw-filters .filters-select, .aw-filters .aw-narrow { min-width: 0; }
}
@media (min-width: 900px) {
  .filters.aw-filters { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
  .aw-filters .filters-q { grid-column: auto; }
}
@media (max-width: 719px) {
  /* Search, oblast and source take a line each; year and quarter share one. */
  .filters.aw-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
  .aw-filters > * { grid-column: 1 / -1; min-width: 0; }
  .aw-filters .filters-q { max-width: none; }
  .aw-filters .aw-narrow { grid-column: auto; min-width: 0; }
}

/* ---- the line above the list: how many rows, how many count, Excel ---- */
.aw-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.aw-summary { min-width: 0; }
.aw-count { font: 600 15px/22px var(--font-sans); }
.aw-counted { font: var(--text-body-small); color: var(--ink-muted); margin-top: 2px; }
.aw-counted b { color: var(--ink); }
/* "Kako brojimo": the rule behind the two different counts on this screen.
   A <details> instead of the title= it used to be - it is focusable, it
   opens on a touch screen and it is announced. */
.aw-how { margin-top: 4px; font: var(--text-body-small); color: var(--ink-muted); }
.aw-how summary { display: inline-block; color: var(--brand); font-weight: 600; cursor: pointer; padding: 2px 0; }
.aw-how p { margin-top: 4px; max-width: 62ch; }
.aw-how-print { font: var(--text-body-small); color: var(--ink-muted); margin-top: 4px; }
.aw-export { flex: 0 0 auto; }
.aw-chips { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: 6px; }
.aw-chips .chip { overflow-wrap: anywhere; }
.aw-chip-x { color: inherit; font-size: 15px; line-height: 1; padding: 0 2px; }
.aw-chip-x:hover { color: var(--danger); text-decoration: none; }

/* ---- awarded table: six columns have to fit beside the sidebar at 1280 ---- */
table.awarded td.c-title { min-width: 200px; }
table.awarded td { overflow-wrap: anywhere; }
@media (min-width: 720px), print {
  table.awarded th, table.awarded td { padding-left: 12px; padding-right: 12px; }
  table.awarded th:first-child, table.awarded td:first-child { padding-left: 20px; }
  table.awarded th:last-child, table.awarded td:last-child { padding-right: 20px; }
  table.awarded th:nth-child(1) { width: 30%; }
  table.awarded th:nth-child(2) { width: 20%; }
  table.awarded th:nth-child(4) { width: 19%; }
  /* Oblast is the only column with no width, so `overflow-wrap: anywhere`
     drove its min-content width to zero and it collapsed onto the width of
     its own nowrap header: "Osiguranje" broke as "Osiguran / je" at every
     desktop width. Give it a width and let its one word stay whole. */
  table.awarded th:nth-child(3) { width: 12%; }
  table.awarded td:nth-child(3) { overflow-wrap: normal; }
  table.awarded .oblast { flex-wrap: wrap; }
}
.aw-more { white-space: nowrap; }
/* Captions sit under the figure, so the figures of a column stay aligned. */
.aw-kind, .aw-yearly { display: block; font-weight: 400; }
.aw-fix { font: 600 11px/14px var(--font-sans); color: var(--warning-ink); background: var(--warning-soft); border-radius: var(--radius-sm); padding: 1px 5px; text-decoration: none; }

/* ---- rankings: selects beside the title (mockup), period row, controls, foot ---- */
.rk-form { margin: 0; }
.rk-form .select { width: auto; }
.rk-form option:disabled { color: var(--disabled-ink); }
@media (max-width: 719px) { .rk-form .select { width: 100%; } }

.rk-period { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.rk-date label { display: block; font: var(--text-label); color: var(--ink-muted); margin-bottom: 4px; }
.rk-date .input { width: auto; min-width: 150px; padding: 7px 10px; }
.rk-date .input:disabled { background: var(--surface-100); color: var(--ink-muted); }
.rk-hint { align-self: center; }
.rk-sub { margin-bottom: var(--space-3); }
.rk-sub b { color: var(--ink); }
.rank-controls.rk-controls { align-items: center; justify-content: space-between; }
.rk-foot { margin: 0 0 var(--space-4); }
table.rank .c-name a { color: var(--ink); }
table.rank .c-name a:hover { color: var(--brand); }
@media (max-width: 719px) {
  .rk-date { flex: 1 1 130px; }
  .rk-date .input { width: 100%; min-width: 0; }
  .rk-hint { flex: 1 1 100%; }
  /* A rank row as a card: number and name on top, the two figures side by
     side, the bar across the bottom. */
  .table-wrap-cards table.data.cards.rank tr { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; }
  .table-wrap-cards table.data.cards.rank td.c-rank { grid-column: 1; grid-row: 1; width: auto; }
  .table-wrap-cards table.data.cards.rank td.c-name { grid-column: 2 / -1; grid-row: 1; font-size: 15px; }
  .table-wrap-cards table.data.cards.rank td.c-n { grid-column: 2; grid-row: 2; }
  .table-wrap-cards table.data.cards.rank td.c-v { grid-column: 3; grid-row: 2; text-align: right; font-size: 15px; }
  .table-wrap-cards table.data.cards.rank td.c-bar { grid-column: 2 / -1; grid-row: 3; width: auto; min-width: 0; padding-top: 4px; }
  .table-wrap-cards table.data.cards.rank td.c-rank::before,
  .table-wrap-cards table.data.cards.rank td.c-name::before,
  .table-wrap-cards table.data.cards.rank td.c-bar::before { display: none; }
}

/* One line instead of a page of 51 KM car washes. */
.aw-held {
  font: var(--text-body-small);
  color: var(--ink-muted);
  margin: var(--space-1) 0 0;
  max-width: 78ch;
}