/*
 * day.css: the styles of the Day view (all the visits of the bots on one UTC day): the bar with the links to the neighbouring days and the switch of the mode, the summary, the chart of the hours with its legend and tooltip, the switches of the layout and of the scope, and the three lists (by bots, by pages, all visits).
 * Loaded by: web/panel/index.html (a link element, last of the style files); it reads only the tokens of tokens.css and the custom property --c (the colour of a bot) that the scripts set. Every class has the prefix day-; the cards, the figures, the switch and the tooltip come from panel.css, visits.css, tip.css and frame.css. The drawing is done by assets/js/ui/day-tab.js, day-hours.js, day-lists.js and day-parts.js.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough. The colour never carries a meaning alone: bots have their names, errors have a sign, classes have a word.
 * @comments-complete 2026-11-13
 */

/* A double click on a day of the charts of Visits opens the Day view: the browser must not select the words of the axis for it. */
.chart-wrap svg, .bl-wrap svg { user-select: none; }

/* The bar over the view: the days before and after on the left, the switch of the mode on the right. */
.day-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.day-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.day-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.day-nav .vchip { text-decoration: none; color: var(--text); font-variant-numeric: var(--num); }

/* The summary: three figures in a row, the note about a day that was cut under them. */
.day-figs { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.day-trunc { max-width: none; }

/* The chart of the hours: drawn for the width of its box (ui/day-hours.js draws it again when the width changes), so the text of the axis keeps its size. */
.day-hours-plot { position: relative; min-width: 0; border-radius: 6px; }
.day-hours-plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.day-hours-plot svg { display: block; max-width: 100%; }
.day-tip { top: 4px; margin-left: 10px; }
.day-tip.is-right { margin-left: -10px; transform: translateX(-100%); }
.day-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.day-chips { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.day-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); font-size: 12.5px; }
.day-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-chip b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.day-chip-more { color: var(--text-3); cursor: default; }

/* The switches over the list. */
.day-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.day-bot-select { min-width: 160px; }

/* The lists share the look of a row: the count on the right, a line under the row. */
.day-list-card { gap: 12px; }
.day-list, .day-bp-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.day-paged { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.day-paged > .day-list, .day-paged > .day-bp-list { align-self: stretch; }
.day-more { cursor: pointer; }
.day-n { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); text-align: right; }
.day-bot-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.day-bot-name .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.day-vendor { overflow: hidden; color: var(--text-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }

/* By bots: the line of a bot is the button that opens its pages. */
.day-bot { border-bottom: 1px solid var(--line); }
.day-toggle { display: grid; grid-template-columns: 16px minmax(0, 1.4fr) minmax(60px, 1fr) 64px; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.day-toggle:hover { background: var(--surface-2); }
.day-chev { width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.15s; }
.day-toggle[aria-expanded="true"] .day-chev { transform: rotate(45deg); }
.day-bp-list { padding: 0 4px 8px 32px; }
.day-bp { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; border-bottom: 1px dashed var(--line); }

/* By pages: the address and its bots on the left, the count on the right. */
.day-page { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.day-page-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* All visits: a row of five cells under a head of the same columns. */
.day-visit { display: grid; grid-template-columns: 78px minmax(110px, 0.8fr) minmax(0, 2fr) 64px minmax(96px, 0.6fr); align-items: center; gap: 12px; min-height: 34px; padding: 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.day-visit-head { min-height: 30px; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.day-time { color: var(--text-2); font-variant-numeric: var(--num); }
.day-status { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: var(--num); }
.day-status.is-error { color: var(--st-error); font-weight: var(--fw-semibold); }
.day-class { color: var(--text-2); font-size: var(--fs-s); }
.day-class.is-confirmed { color: var(--st-current); }
.day-class.is-no_list { color: var(--text-3); }

@media (max-width: 720px) {
  .day-toggle { grid-template-columns: 16px minmax(0, 1fr) 56px; }
  .day-toggle .hbar { display: none; }
  .day-visit { grid-template-columns: 70px minmax(0, 1fr) 52px; row-gap: 2px; }
  .day-visit > :nth-child(1) { grid-area: 1 / 1; }
  .day-visit > :nth-child(2) { grid-area: 1 / 2; }
  .day-visit > :nth-child(4) { grid-area: 1 / 3; }
  .day-visit > :nth-child(3) { grid-area: 2 / 1 / 3 / -1; }
  .day-visit > :nth-child(5) { grid-area: 3 / 1 / 4 / -1; }
  .day-visit-head { display: none; }
}