/* KawawaMarket Admin — Statistics */

/* --st-second is the colour of the second of two things set side by side —
   the website beside the app, listings beside views. The first is the brand
   orange. The pair was checked for colour-blind separation and for contrast
   on white; change either and check again. */
.st_wrap { float: left; width: 100%; margin-top: 16px; --st-second: #2a78d6; }

/* Tabs — the Settings page's pills (.sc_tabs, admin-modern.css). They bring
   their own space underneath, and four of them need to wrap on a phone. */
.st_tabs { flex-wrap: wrap; }
.st_tabs + .st_wrap { margin-top: 0; }
/* A tab's first row starts where the tab starts: straight under the period
   buttons, or under the tabs themselves on Income. */
.st_panel > .st_card:first-child, .st_panel > .st_grid:first-child > .st_card { margin-top: 0; }

/* Period */
.st_bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.st_bar[hidden] { display: none; }
.st_bar p { margin: 0; font-size: 13px; color: var(--kw-muted); }
.st_seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--kw-subtle); }
.st_seg button {
    border: 0; background: none; padding: 8px 16px; border-radius: 9px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--kw-ink-2);
}
.st_seg button.on { background: #fff; color: #b34700; box-shadow: var(--kw-shadow-xs); }
.st_seg button:focus-visible { outline: 3px solid var(--kw-brand); outline-offset: 1px; }
/* The same switch inside a card's heading, where "View all" would go. */
.st_seg--small { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.st_seg--small button { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.st_seg .n { margin-left: 4px; font-weight: 700; }

/* Headline tiles */
.st_tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.st_tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; }
.st_tile {
    display: flex; flex-direction: column; gap: 4px; padding: 16px;
    border: 1px solid var(--kw-line); border-radius: var(--kw-radius); background: #fff;
    box-shadow: var(--kw-shadow-xs);
}
.st_tile .ico {
    width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; display: grid; place-items: center;
    background: var(--kw-brand-soft); color: #b34700; font-size: 14px;
}
.st_tile .lbl { font-size: 13px; color: var(--kw-ink-2); }
.st_tile .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--kw-ink); line-height: 1.2; }
.st_delta { font-size: 12.5px; font-weight: 600; color: var(--kw-muted); }
.st_delta.up { color: var(--kw-success-ink); }
.st_delta.down { color: var(--kw-danger); }
.st_delta i { font-size: 10px; margin-right: 2px; }

/* Cards */
.st_card {
    margin-top: 18px; padding: 20px; border: 1px solid var(--kw-line); border-radius: var(--kw-radius);
    background: #fff; box-shadow: var(--kw-shadow-xs); min-width: 0;
}
/* A grid so a list's "View all" can sit to the right of its title and its
   description without either needing a wrapper. */
.st_head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin-bottom: 14px; }
.st_head h3 { grid-column: 1; margin: 0; font-size: 16px; font-weight: 700; color: var(--kw-ink); }
.st_head p { grid-column: 1; margin: 3px 0 0; font-size: 13px; color: var(--kw-muted); }
.st_head a { color: #b34700; font-weight: 600; }
.st_all {
    grid-column: 2; grid-row: 1 / span 2; align-self: start; padding: 7px 12px; cursor: pointer;
    border: 1px solid var(--kw-line); border-radius: 9px; background: #fff;
    font-size: 13px; font-weight: 600; color: #b34700; white-space: nowrap;
}
.st_all:hover { border-color: var(--kw-brand); background: var(--kw-brand-soft); }
.st_all:focus-visible { outline: 3px solid var(--kw-brand); outline-offset: 1px; }

/* The number a card leads with, and the sentence it ends on */
.st_fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; }
.st_fig .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--kw-ink); line-height: 1.2; }
.st_fig .lbl { font-size: 13px; color: var(--kw-ink-2); }
.st_note { margin: 10px 0 0; font-size: 13px; color: var(--kw-ink-2); }

/* Which line is which: a short stroke of the line's colour, never coloured text */
.st_legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; font-size: 13px; color: var(--kw-ink-2); }
.st_legend span { display: inline-flex; align-items: center; gap: 6px; }
.st_legend i { width: 14px; border-top: 2px solid var(--kw-brand); border-radius: 2px; }
.st_legend i.s2 { border-color: var(--st-second); }
/* Bars are keyed with a block, lines with a stroke: the key looks like the mark. */
.st_legend i.box { width: 10px; height: 10px; border: 0; border-radius: 2px; background: var(--kw-brand); }
.st_legend i.box.s2 { background: var(--st-second); }
.st_legend b { font-weight: 700; color: var(--kw-ink); }
.st_sub { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--kw-ink-2); }
.st_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st_grid--inner { margin-top: 22px; gap: 28px; }
.st_head + .st_grid--inner { margin-top: 0; }
.st_none { margin: 12px 0; font-size: 13.5px; color: var(--kw-muted); }

/* Line chart */
.st_line svg { display: block; width: 100%; height: auto; }
.st_line .g { stroke: var(--kw-line); stroke-width: 1; }
.st_line .ax { font-size: 12px; fill: var(--kw-muted); }
.st_line .ln { fill: none; stroke: var(--kw-brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st_line .cross { stroke: var(--kw-ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.st_line .dot { fill: var(--kw-brand); stroke: #fff; stroke-width: 2; }
.st_line .ln.s2 { stroke: var(--st-second); }
.st_line .dot.s2 { fill: var(--st-second); }
.st_line .end { font-size: 12px; font-weight: 600; fill: var(--kw-ink-2); }

/* Columns. The whole slot answers to the pointer, not just the column in it. */
.st_line .bar { fill: var(--kw-brand); }
.st_line .hit { fill: transparent; }
.st_line .col:hover .bar { fill: var(--kw-brand-2); }
.st_line .cap { font-size: 12px; font-weight: 700; fill: var(--kw-ink); }

/* The week by the hour. --v is a square's share of the busiest hour. */
.st_heat { overflow-x: auto; }
.st_heat_grid {
    display: grid; grid-template-columns: 40px repeat(24, minmax(0, 1fr)); gap: 2px;
    align-items: center; min-width: 620px;
}
.st_heat_grid .hr { height: 20px; font-size: 12px; color: var(--kw-muted); white-space: nowrap; }
.st_heat_grid .day { font-size: 12px; color: var(--kw-ink-2); }
.st_heat_grid i {
    display: block; height: 26px; border-radius: 4px;
    background: color-mix(in srgb, var(--kw-brand) calc((.06 + .94 * var(--v)) * 100%), #fff);
}
.st_heat_grid i:hover { outline: 2px solid var(--kw-ink); outline-offset: 1px; }
.st_heat_foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.st_heat_foot .st_note { margin: 0; }
.st_scale { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--kw-muted); }
.st_scale i { width: 18px; height: 12px; border-radius: 3px; }
.st_scale i:nth-of-type(1) { background: color-mix(in srgb, var(--kw-brand) 6%, #fff); }
.st_scale i:nth-of-type(2) { background: color-mix(in srgb, var(--kw-brand) 30%, #fff); }
.st_scale i:nth-of-type(3) { background: color-mix(in srgb, var(--kw-brand) 53%, #fff); }
.st_scale i:nth-of-type(4) { background: color-mix(in srgb, var(--kw-brand) 77%, #fff); }
.st_scale i:nth-of-type(5) { background: var(--kw-brand); }

/* Ranked bars */
.st_row {
    display: grid; grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1fr) 64px;
    align-items: center; gap: 10px; padding: 7px 0;
}
.st_row .rank { font-size: 12px; font-weight: 700; color: var(--kw-muted); text-align: center; }
.st_row .name {
    font-size: 13.5px; font-weight: 600; color: var(--kw-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st_row .name small {
    display: block; font-size: 12px; font-weight: 400; color: var(--kw-muted);
    overflow: hidden; text-overflow: ellipsis;
}
.st_row .track { height: 10px; border-radius: 4px; background: var(--kw-subtle); }
.st_row .fill { display: block; height: 100%; border-radius: 4px; background: var(--kw-brand); }
.st_row .num { font-size: 13px; font-weight: 700; color: var(--kw-ink); text-align: right; font-variant-numeric: tabular-nums; }
#incomeBySlot .st_row, #incomeByMethod .st_row, #topAdvertisers .st_row { grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1fr) 84px; }

/* From a visit to a call: the same bars without a rank, and between two of
   them how many go on. */
.st_row--plain { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 64px; }
.st_step { margin: 1px 0; font-size: 12.5px; color: var(--kw-muted); }
.st_step i { width: 14px; margin-right: 4px; font-size: 10px; text-align: center; }

/* Searches going up and down */
.st_move { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.st_move .name {
    min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--kw-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st_move .name small { display: block; font-size: 12px; font-weight: 400; color: var(--kw-muted); }
.st_move .st_delta { white-space: nowrap; }

/* Two shares side by side: a pair of bars to a row, the figures beside them */
.st_pair {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 40px;
    align-items: center; gap: 10px; padding: 7px 0;
}
.st_pair .name {
    font-size: 13.5px; font-weight: 600; color: var(--kw-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st_pair .tracks { display: grid; gap: 4px; }
.st_pair .track { height: 10px; border-radius: 4px; background: var(--kw-subtle); }
.st_pair .fill { display: block; height: 100%; border-radius: 4px; background: var(--kw-brand); }
.st_pair .fill.s2 { background: var(--st-second); }
.st_pair .nums { font-size: 12px; font-weight: 700; color: var(--kw-ink); text-align: right; font-variant-numeric: tabular-nums; }
.st_pair .nums span { display: block; line-height: 14px; }

/* Income per month */
.st_cols { display: flex; align-items: flex-end; gap: 14px; height: 200px; }
.st_col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.st_col .bar { width: 100%; max-width: 56px; border-radius: 4px 4px 0 0; background: var(--kw-brand); }
.st_col .num { font-size: 12px; font-weight: 700; color: var(--kw-ink); white-space: nowrap; }
.st_col .lbl { font-size: 12px; color: var(--kw-muted); }

/* Tooltip */
.st_tip {
    position: fixed; z-index: 2000; pointer-events: none; padding: 8px 10px; border-radius: 8px;
    background: var(--kw-ink); color: #fff; font-size: 12.5px; line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* View all: the whole of one list, a page at a time.
   The body is the part that scrolls, so its top padding is given to the column
   headings instead — otherwise rows would show through above them as they
   pass. --rows is how many rows a full page holds (set by statistics.js). */
.st_modal_sub { margin: 3px 0 0; font-size: 13px; color: var(--kw-muted); }
/* By id, because the panel's own dialog rules are written with one. The
   height is the headings (46), a full page of rows (52 each) and the padding
   under them (22). */
#listModal .modal-body {
    padding-top: 0;
    min-height: min(calc(var(--rows, 10) * 52px + 68px), calc(100vh - 260px));
}
/* The panel's close button takes its × from an image the mockup does not
   have, so on this dialog it is drawn in. */
#listModal .btn-close {
    background: #FF7203 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Separate borders, not collapsed: a collapsed rule does not travel with the
   headings when they stick, and they would lose the line under them. */
.st_table { width: 100%; border-collapse: separate; border-spacing: 0; }
.st_table th, .st_table td { padding: 0 8px; border-bottom: 1px solid var(--kw-line); font-size: 13.5px; }
.st_table thead th {
    position: sticky; top: 0; z-index: 1; height: 46px; padding-top: 10px; background: #fff;
    font-size: 12px; font-weight: 700; color: var(--kw-muted);
}
.st_table tbody tr { height: 52px; }
.st_table .rank { width: 40px; text-align: center; font-size: 12px; font-weight: 700; color: var(--kw-muted); }
.st_table .name { font-weight: 600; color: var(--kw-ink); }
.st_table .name small { display: block; font-size: 12px; font-weight: 400; color: var(--kw-muted); }
.st_table .track { width: 30%; }
.st_table .track > span { display: block; height: 10px; border-radius: 4px; background: var(--kw-subtle); }
.st_table .fill { display: block; height: 100%; border-radius: 4px; background: var(--kw-brand); }
.st_table .num {
    width: 96px; text-align: right; white-space: nowrap;
    font-weight: 700; color: var(--kw-ink); font-variant-numeric: tabular-nums;
}
.st_table thead .num { color: var(--kw-muted); }
/* The same table on a card, for a handful of figures: nothing scrolls, so the
   headings need not stick, and the columns share the width. */
.st_table--small thead th { position: static; height: 34px; padding-top: 0; }
.st_table--small tbody tr { height: 46px; }
.st_table--small .num { width: auto; }

/* Sellers to call: a work list, so it is wide — it scrolls sideways inside its
   card before it squeezes a phone number onto two lines. */
/* Positioned, so that anything positioned inside the table — the hidden text
   of a column heading — is clipped with it instead of widening the page. */
.st_scroll { position: relative; overflow-x: auto; }
.st_calls { min-width: 900px; }
.st_calls tbody tr { height: 56px; }
.st_calls th, .st_calls td { white-space: nowrap; }
.st_calls .name a { color: var(--kw-ink); text-decoration: none; }
.st_calls .name a:hover { color: #b34700; text-decoration: underline; }
.st_calls .none { font-weight: 400; color: var(--kw-muted); }
.st_calls .seen i { margin-right: 6px; font-size: 12px; color: var(--kw-danger); }
.st_calls .act { text-align: right; }
.st_tel { font-weight: 600; color: #b34700; text-decoration: none; }
.st_tel:hover { text-decoration: underline; }
.st_tel i { margin-right: 7px; font-size: 12px; }
.st_called {
    min-width: 124px; padding: 7px 12px; cursor: pointer;
    border: 1px solid var(--kw-line); border-radius: 9px; background: #fff;
    font-size: 13px; font-weight: 600; color: var(--kw-ink-2);
}
.st_called:hover { border-color: var(--kw-brand); color: #b34700; }
.st_called.on { border-color: var(--kw-success); color: var(--kw-success-ink); }
.st_called i { margin-right: 6px; font-size: 11px; }
.st_called:focus-visible, .st_tel:focus-visible, .st_calls .name a:focus-visible {
    outline: 3px solid var(--kw-brand); outline-offset: 1px;
}

.st_pager { justify-content: space-between; }
/* On a card it has no dialog footer to lay it out. */
.st_pager--card { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.st_pager--card[hidden] { display: none; }
.st_pager p { margin: 0; font-size: 13px; color: var(--kw-ink-2); }
.st_pager label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--kw-ink-2); }
.st_pager select {
    height: 34px; padding: 0 8px; border: 1px solid var(--kw-line); border-radius: 9px;
    background: #fff; font-size: 13px; font-weight: 600; color: var(--kw-ink);
}
.st_pager ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.st_pager .gap { min-width: 20px; text-align: center; color: var(--kw-muted); }
.st_pager button {
    min-width: 34px; height: 34px; padding: 0 8px; cursor: pointer;
    border: 1px solid var(--kw-line); border-radius: 9px; background: #fff;
    font-size: 13px; font-weight: 600; color: var(--kw-ink-2);
}
.st_pager button:hover:not(:disabled):not(.on) { border-color: var(--kw-brand); color: #b34700; }
.st_pager button.on { border-color: var(--kw-brand); background: var(--kw-brand); color: #fff; }
.st_pager button:disabled { opacity: .45; cursor: default; }
.st_pager button:focus-visible, .st_pager select:focus-visible { outline: 3px solid var(--kw-brand); outline-offset: 1px; }

@media (max-width: 1199px) {
    .st_tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .st_tiles, .st_tiles--three, .st_grid { grid-template-columns: minmax(0, 1fr); }
    .st_col .num { display: none; }
    /* On a phone the dialog keeps the figures and drops the bar beside them. */
    .st_table .track { display: none; }
    .st_table .num { width: auto; }
    .st_pager { justify-content: center; }
}