/* Chic by Karin – graf tržeb, žebříček kousků a přehled zákaznic.
   Navazuje na paletu a fonty ze style.css, nic vlastního nezavádí.
   Načítá se až za style.css (kvůli přebití mobilních pravidel .orders-table). */

/* ---------- graf tržeb po měsících ---------- */
.chart-lead { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 12px; }
.chart-lead strong { color: var(--ink); font-weight: 500; }

.chart { max-width: 640px; margin: 0; }
/* SVG má viewBox, takže se roztáhne na šířku rodiče a na telefonu se zmenší. */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-axis { stroke: var(--clay); stroke-width: 0.8; }
.chart-bar { fill: var(--olive); }
/* Měsíc bez tržeb: tenký proužek na ose, ať je poznat nula od chybějícího údaje. */
.chart-bar.is-zero { fill: var(--sand); }
.chart-value { fill: var(--ink-soft); font-family: var(--font-body); font-size: 9px; }
.chart-month { fill: var(--ink-soft); font-family: var(--font-body); font-size: 8.5px; }
.chart-year { fill: var(--clay); font-family: var(--font-body); font-size: 7.5px; letter-spacing: 0.1em; }
.chart-note { margin-top: 10px; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; }

.chart-table { margin-top: 14px; }
.chart-table > summary {
  cursor: pointer; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--olive-deep); padding: 4px 0;
}
.chart-table > summary:hover { color: var(--olive); }
.chart-table .orders-table { margin-top: 8px; max-width: 640px; }

/* ---------- nejprodávanější kousky ---------- */
.rank { list-style: none; display: grid; gap: 10px; counter-reset: rank; max-width: 640px; }
.rank-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 12px 16px; background: var(--paper); }
.rank-name { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
.rank-name::before {
  counter-increment: rank; content: counter(rank) ". ";
  font-family: var(--font-body); font-size: 0.8rem; color: var(--clay);
}
.rank-meta { font-size: 0.84rem; color: var(--ink-soft); white-space: nowrap; align-self: center; }
.rank-bar { grid-column: 1 / -1; height: 5px; background: var(--sand); }
.rank-fill { display: block; height: 100%; background: var(--olive-soft); }
/* Šířku pruhu nelze psát inline (CSP), jede se po krocích po 5 %. */
.rank-fill.w-5 { width: 5%; }
.rank-fill.w-10 { width: 10%; }
.rank-fill.w-15 { width: 15%; }
.rank-fill.w-20 { width: 20%; }
.rank-fill.w-25 { width: 25%; }
.rank-fill.w-30 { width: 30%; }
.rank-fill.w-35 { width: 35%; }
.rank-fill.w-40 { width: 40%; }
.rank-fill.w-45 { width: 45%; }
.rank-fill.w-50 { width: 50%; }
.rank-fill.w-55 { width: 55%; }
.rank-fill.w-60 { width: 60%; }
.rank-fill.w-65 { width: 65%; }
.rank-fill.w-70 { width: 70%; }
.rank-fill.w-75 { width: 75%; }
.rank-fill.w-80 { width: 80%; }
.rank-fill.w-85 { width: 85%; }
.rank-fill.w-90 { width: 90%; }
.rank-fill.w-95 { width: 95%; }
.rank-fill.w-100 { width: 100%; }

/* ---------- zákaznice ---------- */
.dash-stat.is-money .dash-stat-num { font-size: 1.3rem; }
.cust-empty { margin-top: 18px; }
.cust-sortbar { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 0.84rem; color: var(--ink-soft); margin-top: 22px; }
.cust-sort { color: var(--olive-deep); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.cust-sort:hover { border-bottom-color: var(--olive-soft); }
.cust-sort.is-active { border-bottom-color: var(--olive-deep); }
.cust-never { color: var(--ink-soft); font-style: italic; }
.cust-table td:nth-child(2), .cust-table th:nth-child(2) { text-align: right; white-space: nowrap; }
.cust-table td:nth-child(3), .cust-table th:nth-child(3) { text-align: right; white-space: nowrap; }
.cust-table small { color: var(--ink-soft); }

/* .stack-table = tabulka, ze které se na telefonu stanou kartičky s popiskem
   u každé hodnoty. Vodorovné posouvání (.orders-table na mobilu) na 390 px
   utne poslední sloupce a není poznat, že se dá posouvat. */
@media (max-width: 560px) {
  table.stack-table, table.stack-table tbody, table.stack-table tr, table.stack-table td { display: block; width: 100%; }
  table.stack-table { overflow-x: visible; }
  table.stack-table thead { position: absolute; left: -9999px; }
  table.stack-table tr { border-bottom: 1px solid var(--line); padding: 12px 14px; }
  table.stack-table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  table.stack-table td::before {
    content: attr(data-label); color: var(--ink-soft); font-size: 0.76rem;
    letter-spacing: 0.06em; text-align: left; flex: none;
  }
  table.stack-table td:first-child { display: block; text-align: left; margin-bottom: 6px; }
  table.stack-table td:first-child::before { content: none; }
  table.stack-table td:nth-child(2), table.stack-table td:nth-child(3) { text-align: right; }
  .rank-item { grid-template-columns: 1fr; }
  .rank-meta { align-self: start; }

  /* Dlaždice tržeb a stavů: style.css sice má mobilní pravidlo repeat(2, 1fr),
     ale základní .dash-cards/.dash-stats s repeat(3)/repeat(4) stojí v souboru
     až ZA mediální sekcí – při stejné specificitě vyhrálo pozdější pravidlo
     a na 390 px dlaždice utíkaly za pravý okraj. Přebíjí se tady, protože
     dashboard.css se načítá až za style.css. */
  .dash-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dash-cards .dash-card:last-child { grid-column: 1 / -1; }
  .dash-card { padding: 16px; }
  .dash-card-value { font-size: 1.5rem; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- prodané zboží ---------- */
.sold-count { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 16px; }

.sold-list { list-style: none; display: grid; gap: 10px; }
.sold-item {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  background: var(--paper); padding: 14px 16px;
}
/* Vrácené do prodeje: olivový proužek u levé hrany odlišuje řádek od skrytých. */
.sold-item.is-back { background: #ecf1e4; box-shadow: inset 3px 0 0 var(--olive-soft); }

.sold-media { width: 68px; aspect-ratio: 5/6; overflow: hidden; background: var(--sand); }
.sold-media img, .sold-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 1.5rem; }

.sold-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; line-height: 1.25; }
.sold-name a { text-decoration: none; }
.sold-name a:hover { text-decoration: underline; }
.sold-meta { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; margin-top: 1px; }
.sold-sale { font-size: 0.88rem; margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sold-sale strong { font-weight: 500; }
.sold-sale a { color: var(--olive-deep); }
.sold-sep { color: var(--clay); }
.sold-status { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; background: #fff; }
.sold-buyer { font-size: 0.82rem; color: var(--ink-soft); margin-top: 3px; }

.sold-actions { display: grid; justify-items: end; gap: 8px; }
.sold-tag {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; background: var(--ink); color: var(--cream);
}
.sold-tag.is-back { background: transparent; color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.sold-actions .btn { white-space: nowrap; }

/* V okně úprav: vysvětlivka u zaškrtávátka „Zveřejnit hned". */
.modal-sold-hint { font-size: 0.82rem; color: var(--ink-soft); background: var(--paper); padding: 10px 12px; margin-top: -4px; }

@media (max-width: 560px) {
  /* Na telefonu jde fotka a text vedle sebe, tlačítko na celou šířku pod ně –
     palec ho tak trefí bez míření a dlouhý název nemusí soupeřit o místo. */
  .sold-item { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .sold-media { width: 58px; }
  .sold-actions {
    grid-column: 1 / -1; grid-template-columns: auto 1fr;
    justify-items: stretch; align-items: center; gap: 12px;
  }
  .sold-tag { justify-self: start; }
  .sold-actions .btn { text-align: center; padding: 9px 14px; }
}

/* ---------- dotazy ke kouskům ---------- */
/* Nevyřízený dotaz drží olivový proužek u levé hrany (stejné gesto jako
   u vrácených kousků), vyřízený zesvětlá na obyčejný rámeček. */
.qa-list { list-style: none; display: grid; gap: 12px; }
.qa-item {
  display: grid; gap: 10px; padding: 16px 18px;
  background: var(--paper); box-shadow: inset 3px 0 0 var(--olive);
}
.qa-item.is-done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.qa-item.is-done .qa-product { color: var(--ink-soft); }

.qa-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.qa-product { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
.qa-product a { text-decoration: none; }
.qa-product a:hover { text-decoration: underline; }
.qa-gone { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-soft); }
.qa-when { margin-left: auto; font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.qa-from { font-size: 0.86rem; color: var(--ink-soft); }
.qa-from a { color: var(--olive-deep); }
/* Zalomení řádků z dotazu zůstává, obsah je escapovaný (esc()). */
.qa-text { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; padding: 12px 14px; font-size: 0.96rem; line-height: 1.6; }
.qa-item.is-done .qa-text { background: var(--paper); }
.qa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qa-actions .inline-form { display: inline-block; margin: 0; }
.qa-actions .btn { text-decoration: none; }

@media (max-width: 560px) {
  /* Datum pod nadpis, tlačítka pod sebe přes celou šířku – tři vedle sebe
     se na 390 px lámou doprostřed slova a míří se na ně špatně. */
  .qa-item { padding: 14px; }
  .qa-when { margin-left: 0; width: 100%; white-space: normal; }
  .qa-actions { display: grid; gap: 8px; }
  .qa-actions .inline-form { display: block; }
  /* Terč pro palec: samotné .btn-small má 32 px, tady se odsazuje na 46. */
  .qa-actions .btn { display: block; width: 100%; text-align: center; padding: 13px 16px; }
}