/* periods.css — «Продажі по періодах» (web/periods.js) and its entry on the Sales home. The kit
   (web/ea-ui.css, root .ea-page) gives the switch, the month strip, chips, the mini toggle, panels,
   rows, the split bar, the column chart (soft = "not final yet", the dashed forecast), the sheet and
   the states; this file keeps the page's own: the hero, the row bars, the dollar line, the sheet's
   blocks, the entry card.
   Colours (one meaning each): a month's / year's own soft hue for its sales (set by the page), soft
   pink for weekends, the amber family for the shops, white dashes for "not final yet" and the
   forecast, sage for dollars. No accent line on the left of anything. Numbers are tabular; motion
   is off under reduced motion (kit). */

#periods-root { padding: 0 16px 28px; }
#periods-root .ea-sentinel { margin-top: 0; }
.sp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 2px; }

/* ---------- hero: the chosen bucket, the toggle, the chart ---------- */
.sp-hero {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--ea-r-hero);
    padding: 14px 16px 12px;
    background: var(--ea-hero-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#periods-root .sp-sk-mini { width: 150px; height: 28px; }
#periods-root .sp-sk-big { width: 190px; height: 40px; margin-top: 12px; border-radius: 10px; }
.sp-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.sp-when { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-when__local { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ea-ink-4); }
.sp-mini { flex-shrink: 0; }
.sp-big {
    margin-top: 10px;
    font-family: var(--ea-font-num);
    font-size: 40px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--ea-ink);
    white-space: nowrap;
    overflow: hidden;
}
.sp-big--fit { font-size: 34px; }
#periods-root .sp-settled .ea-grow-x { animation: none; }
.sp-hero.is-dim .sp-big, .sp-hero.is-dim .sp-sub, .sp-hero.is-dim .sp-facts, .sp-hero.is-dim .sp-chart { opacity: 0.55; }
.sp-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--ea-ink-3); }
.sp-sub__n { min-width: 0; }
.sp-sub b { color: var(--ea-ink); font-weight: 650; }
.sp-detail {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 5px 8px 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ea-line);
    font-size: 12px;
    font-weight: 650;
    color: var(--ea-ink-2);
}
.sp-detail::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sp-detail:active { background: rgba(255, 255, 255, 0.1); }

.sp-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.sp-facts:empty { display: none; }
.sp-fact { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ea-ink-3); }
.sp-fact b { color: var(--ea-ink-2); font-weight: 650; white-space: nowrap; }
/* the forecast's key: a little dashed box, the same dashes as on its column */
.sp-fc-sw { width: 12px; height: 12px; flex-shrink: 0; border-radius: 3px; border: 1.2px dashed rgba(255, 255, 255, 0.6); }
/* in the hero's lines it sits in the coin's 17 px slot, so «прогноз» and «≈ … $» start on one line */
.sp-fact .sp-fc-sw { margin: 0 2.5px; }
/* dollars: a quiet sage coin */
.sp-usd-sw {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
    color: #b9d3bf;
    background: rgba(159, 196, 168, 0.16);
    box-shadow: inset 0 0 0 1px rgba(159, 196, 168, 0.32);
}
/* «ще не остаточно»: a dashed pill, never a colour */
.sp-nf {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.32);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ea-ink-3);
    white-space: nowrap;
}
.sp-shopline { font-size: 12px; color: var(--ea-ink-3); }
.sp-shopline b { color: var(--ea-ink-2); font-weight: 650; }
.sp-split .ea-split { margin-top: 4px; }
.sp-split .ea-legend { margin-top: 7px; }

.sp-chart { margin-top: 14px; }
.sp-chart .ea-col-mark.is-wkend { fill: #eea6c6; }
.sp-chart .ea-axis-lbl.is-wkend { fill: rgba(238, 166, 198, 0.8); }
/* what the colours on the chart mean (only what is on screen) */
.sp-keyline { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; color: var(--ea-ink-3); }
.sp-keyline:empty { display: none; }
.sp-keyline > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sp-keyline i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.sp-keyline i.sp-key-nf { background: rgba(255, 255, 255, 0.1); outline: 1px dashed rgba(255, 255, 255, 0.5); outline-offset: -1px; }

/* the month strip's chips carry their month's colour */
.sp-chip { display: inline-flex; align-items: center; gap: 6px; }
.sp-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
/* The chips' 44 px hit layer. The strip scrolls sideways (overflow-x), which clips vertically too, so the
   kit's centred ::before was cut to the chip's own 31 px; and right above the chips sits the sticky
   switch (z-index 5), so the layer can't grow upwards either. It hangs down instead: from the chip's top,
   44 px, inside 13 px of bottom padding that reaches 5 px into the hero's top edge (its border and
   padding, nothing to tap there) - the strip sits above the hero (z-index 1), still under the switch.
   The -7 px bottom margin (it collapses with the body's 2 px) keeps the hero where it was. */
#sp-months { position: relative; z-index: 1; transition: max-height 0.35s var(--ea-ease), opacity 0.3s, margin 0.35s var(--ea-ease), padding 0.35s var(--ea-ease); }
#sp-months.is-open { max-height: 58px; padding-bottom: 13px; margin-bottom: -7px; }
#sp-months .ea-chip::before { top: 0; transform: none; }

/* ---------- rows: newest first, full figures, a thin bar under the text ---------- */
.sp-rows .ea-panel__head { margin-bottom: 4px; }
.sp-list { gap: 2px; margin: 8px -8px 0; }
.sp-row {
    display: block;
    width: 100%;
    padding: 9px 8px;
    border-radius: 12px;
    text-align: left;
    content-visibility: auto;
    contain-intrinsic-size: auto 62px;
}
.sp-row:active { background: rgba(255, 255, 255, 0.05); }
.sp-row .ea-row__name { font-size: 14px; }
.sp-row__wd { color: var(--ea-ink-3); font-weight: 600; }
.sp-row.is-wkend .ea-row__name, .sp-row.is-wkend .sp-row__wd { color: #f2b4d0; }
.sp-row__val { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sp-row .ea-row__top { align-items: center; }
.sp-bar { display: flex; gap: 2px; height: 5px; margin-top: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.045); overflow: hidden; }
.sp-bar > span { flex: none; height: 100%; width: calc(var(--v) * 1%); min-width: 2px; border-radius: 3px; background: var(--c); }
.sp-bar.is-nf > span { opacity: 0.5; }
.sp-row__fc { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--ea-ink-3); }
.sp-row__fc b { color: var(--ea-ink-2); font-weight: 650; }
/* the year's dollars: a hairline bar on its own scale (the real-terms shape) + one muted line */
.sp-usd { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sp-usd__bar { flex: 0 0 32%; height: 3px; border-radius: 3px; background: rgba(159, 196, 168, 0.08); overflow: hidden; }
.sp-usd__bar > span { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 3px; background: rgba(159, 196, 168, 0.6); }
.sp-usd__t { min-width: 0; font-size: 12px; color: var(--ea-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-usd__t b { color: #b9d3bf; font-weight: 650; }
.sp-more { margin-top: 10px; }
/* the newest rows that can still move: one dashed label above them, a dashed hairline after them */
.sp-group { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 2px 8px; font-size: 11px; color: var(--ea-ink-4); }
.sp-group__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-group-end { height: 0; margin: 4px 8px; border-top: 1px dashed rgba(255, 255, 255, 0.12); }

/* «Як рахуємо» and the stamp; the summary (30 px) gets a 44 px hit layer like the kit's controls */
.sp-how { padding: 0 2px; }
#periods-root .sp-how summary { position: relative; }
#periods-root .sp-how summary::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sp-how p { margin: 6px 0 8px 17px; }

/* ---------- the bucket's sheet ---------- */
.sp-sheet .ea-sheet__title { font-variant-numeric: tabular-nums; }
.sp-sheet__nf { display: grid; gap: 6px; margin: 2px 0 10px; }
.sp-sheet__nf .sp-nf { justify-self: start; }
.sp-sheet__nf p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ea-ink-3); }
.sp-sheet__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 2px 4px; font-size: 13px; color: var(--ea-ink-3); }
.sp-sheet__total b { font-family: var(--ea-font-num); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--ea-ink); }
.sp-sheet__blk { margin-top: 10px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--ea-line); }
.sp-sheet__h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ea-ink-2); }
.sp-sheet__h i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.sp-sheet__h b { margin-left: auto; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ea-ink); white-space: nowrap; }
.sp-sheet .sp-stats { margin-top: 10px; padding-top: 10px; }
.sp-sheet .sp-stats .ea-stat__v { font-size: 16px; }
.sp-sheet__fc, .sp-sheet__usd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ea-ink-3); }
.sp-sheet__fc b, .sp-sheet__usd b { color: var(--ea-ink-2); font-weight: 650; }
.sp-sheet__usd b { color: #b9d3bf; }
.sp-shops { display: grid; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ea-line); }
.sp-shop { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 13px; }
.sp-shop i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.sp-shop__n { min-width: 0; color: var(--ea-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-shop__o { font-size: 12px; color: var(--ea-ink-3); white-space: nowrap; }
.sp-shop b { font-weight: 650; white-space: nowrap; text-align: right; }
.sp-sheet__go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin-top: 16px;
    border-radius: 14px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.32);
    font-size: 14px;
    font-weight: 650;
    color: var(--ea-ink);
}
.sp-sheet__go:active { background: rgba(94, 234, 212, 0.18); }

/* the header's back button (the app-wide .pmeta-back-btn, 28 px): a 44 px hit layer on this view */
#periods-view .pmeta-back-btn { position: relative; }
#periods-view .pmeta-back-btn::before { content: ''; position: absolute; inset: 50% -8px auto; height: 44px; transform: translateY(-50%); }

/* ---------- the entry on the Sales home (outside the page: the old home's look) ---------- */
.sp-entry {
    margin-bottom: 10px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.sp-entry__main {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 12px 15px 8px;
    background: none;
    border: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.sp-entry__main:active { background: rgba(255, 255, 255, 0.04); }
.sp-entry__text { flex: 1; min-width: 0; }
.sp-entry__title { font-size: 15px; font-weight: 600; }
.sp-entry__sub { margin-top: 2px; font-size: 12px; color: rgba(236, 236, 248, 0.56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-entry__go { flex-shrink: 0; color: rgba(236, 236, 248, 0.45); }
.sp-entry__chips { display: flex; gap: 8px; padding: 4px 15px 12px 66px; }
.sp-entry__chip {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(236, 236, 248, 0.82);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sp-entry__chip::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sp-entry__chip:active { background: rgba(255, 255, 255, 0.1); }