/* Kliendi konto (#/konto): suured numbrid, juuksepiirid, peen ajajoon, tabelnumbrid. Ainult tokenid. */
.account-page { background: var(--color-bg); }
.account-page > .container > * + * { margin-top: var(--space-7); }
.account-page > .container > .account-section, .account-layout { margin-top: var(--space-8); }
.account-layout, .account-side, .account-main { display: grid; gap: var(--space-8); min-width: 0; align-content: start; }
.account-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.account-header h1 { margin: 0; }
.account-header .lead { margin-top: var(--space-2); margin-bottom: 0; max-width: 680px; color: var(--color-text-muted); }
.account-header .account-customer { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-4); }
.account-header .account-customer .field__label { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); }
.account-header .account-customer .select { width: auto; min-width: 180px; min-height: var(--control-h-sm); font-size: var(--fs-sm); }
.account-header .account-customer .field__hint { margin: 0; font-size: var(--fs-xs); }
.account-header > .btn { flex-shrink: 0; }
.account-customer { max-width: 360px; }

/* Ülevaate plaadid: suur number, väike silt */
.account-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--space-3); }
.account-kpi { padding: var(--space-5); gap: var(--space-2); }
.account-kpi p { margin: 0; }
.account-kpi .kpi__label { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.account-kpi .kpi__value { font-size: var(--fs-3xl); font-weight: var(--fw-regular); white-space: nowrap; }
.account-kpi__hint { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-snug); }

.account-section { display: grid; gap: var(--space-5); min-width: 0; }
.account-section > h2, .account-section__head h2 { font-size: var(--fs-2xl); margin: 0; }
.account-section__head, .account-item__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.account-section__head { align-items: flex-end; }
.account-section__head .field { min-width: min(100%, 240px); }
.account-section > p { margin: 0; max-width: var(--measure); }

/* Päringud */
.account-inquiry { display: grid; gap: var(--space-5); }
.account-inquiry h3 { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.account-inquiry__note { margin: 0; color: var(--color-text-soft); font-size: var(--fs-sm); }
.account-inquiry__package { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-block: 1px solid var(--color-border); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.account-inquiry__package-label { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted); }

/* Peen 8 sammu ajajoon: 1 px joon, väike täpp */
.account-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
.account-timeline li { position: relative; display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4) var(--space-2) 0 0; border-top: 1px solid var(--color-border-strong); font-size: var(--fs-xs); color: var(--color-text-muted); min-width: 0; }
.account-timeline li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
.account-timeline li.is-done { border-top-color: var(--color-text-soft); color: var(--color-text-soft); }
.account-timeline li.is-done::before { background: var(--color-text-soft); border-color: var(--color-text-soft); }
.account-timeline li.is-current { border-top-color: var(--color-primary); color: var(--color-text); font-weight: var(--fw-medium); }
.account-timeline li.is-current::before { width: 9px; height: 9px; top: -5px; background: var(--color-primary); border-color: var(--color-primary); outline: 3px solid var(--color-primary-soft-2); }
.account-timeline__number { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-weight: var(--fw-regular); }
.account-timeline li > span:last-child { overflow-wrap: anywhere; }
.account-timeline time, .account-timeline small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); margin-top: 2px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Esemed: puhas ruudustik, juuksepiirid */
.account-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-3); }
.account-item { min-width: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); }
.account-item__media .photo { border-radius: var(--radius-sm); }
.account-item__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
@media (max-width: 479px) { .account-item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); } }
.account-item__head p { margin: 0; color: var(--color-text-muted); }
.account-item h3 { font-size: var(--fs-lg); margin: var(--space-2) 0 0; }
.account-item h3 + p { margin: 0; }
.account-item__facts { display: grid; margin: var(--space-2) 0 0; border-top: 1px solid var(--color-border); }
.account-item__facts div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.account-item__facts dt { color: var(--color-text-muted); }
.account-item__facts dd { margin: 0; font-weight: var(--fw-medium); text-align: right; font-variant-numeric: tabular-nums; }
.account-price-proposal { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-warning-border); border-radius: var(--radius-sm); background: var(--color-warning-soft); }
.account-price-proposal p { margin: 0; }
.account-decision, .account-item-history { border-bottom: 1px solid var(--color-border); }
.account-item-history { margin-top: auto; border-bottom: 0; }
.account-item summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-soft); }
.account-item .timeline { margin: var(--space-2) 0 var(--space-3); }
.account-decision > p { margin: 0; }
.account-decision .cluster { margin: var(--space-3) 0; }

/* Müügiaruanne ja väljamaksed: tabelnumbrid */
.account-page .table-wrap { min-width: 0; max-width: 100%; }
.account-page .table { min-width: 720px; font-variant-numeric: tabular-nums; }
.account-page .table caption { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); }
/* Kitsal ekraanil keritakse 720 px tabelit ümbrises: allkiri jääb nähtava ala laiuseks, et tekst ei lõiguks. */
@media (max-width: 759px) {
  .account-page .table caption { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter) - 2px); box-sizing: border-box; }
}
.account-page .table th[scope="row"] { font-weight: var(--fw-regular); }
.account-report__title, .account-report__package { display: block; margin-top: 2px; }
.account-report__title { font-weight: var(--fw-medium); color: var(--color-text); }
.account-report__package { font-size: var(--fs-xs); color: var(--color-text-muted); }
.account-report__rate { color: var(--color-text-soft); }
.account-report__flag { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.account-report__payout { font-weight: var(--fw-medium); }
.account-page .table tfoot th { font-weight: var(--fw-regular); color: var(--color-text-soft); border-top: 1px solid var(--color-border-strong); }
.account-page .table tfoot tr + tr th, .account-page .table tfoot tr + tr td { border-top: 1px solid var(--color-border); }
.account-page .table tbody tr:last-child th, .account-page .table tfoot th, .account-page .table tfoot td { border-bottom: 0; }
.account-report__total th, .account-report__total td { color: var(--color-text); font-weight: var(--fw-semibold); }
.account-report__total td.is-num { font-size: var(--fs-lg); }
.account-page .table-wrap + p { margin: 0; }

.account-modal .modal__body { display: grid; gap: var(--space-4); }
.account-modal form { margin: 0; }
.account-page [hidden] { display: none !important; }

@media (max-width: 900px) {
  .account-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-5); }
}
@media (max-width: 600px) {
  .account-page > .container > .account-section { margin-top: var(--space-7); }
  .account-header { align-items: flex-start; flex-direction: column; }
  .account-section__head { align-items: stretch; flex-direction: column; }
  .account-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-kpi { padding: var(--space-4); }
  .account-kpi .kpi__value { font-size: var(--fs-2xl); }
  /* Kitsal ekraanil vertikaalne ajajoon: 1 px joon vasakul */
  /* 8 sammu ühel keritaval real (vertikaalse 650 px nimekirja asemel) */
  .account-timeline { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding: 6px var(--space-4) 0; scroll-padding-inline: var(--space-4); }
  .account-timeline::-webkit-scrollbar { display: none; }
  .account-timeline li { flex: 0 0 88px; }
  .account-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .account-modal .modal__foot { flex-wrap: wrap; }
}

/* KPI-kaardid ilmuvad astmeliselt (viivitus CSS-ist, JS-is inline-stiile ei ole). */
.account-kpis > :nth-child(2) { --i: 1; }
.account-kpis > :nth-child(3) { --i: 2; }
.account-kpis > :nth-child(4) { --i: 3; }
.account-kpis > :nth-child(5) { --i: 4; }

/* Desktop: esemed ja müügiaruanne põhiveerus, päringud kõrvalveerus (kleepub). Mobiilis päringud enne esemeid. */
@media (min-width: 1200px) {
  .account-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: var(--space-7); align-items: start; }
  .account-main { grid-column: 1; grid-row: 1; }
  .account-side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
  .account-side .account-inquiry { padding: var(--space-4); gap: var(--space-3); }
  .account-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  /* Kõrvalveerus ajajoon 4 × 2 (kaheksa sammu ei mahu ühte ritta). */
  .account-side .account-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-4); }
  .account-page > .container > .account-section, .account-layout { margin-top: var(--space-6); }
}