/* Dashboard sekmesi (client/js/dashboard.js). Renkler ui.css değişkenlerinden; koyu tema kendiliğinden uyar. */
#dashboard { max-width: var(--sk-max); margin: 0 auto; padding: 16px; display: grid; gap: 24px; }
/* Kartlar: kenarlik yerine ince golge. Koyu temada golge gorunmez, kenarlik kalir. */
#dashboard .h-card { border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
:root[data-theme="dark"] #dashboard .h-card { border-color: var(--sk-line); }
.d-bar { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.d-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.d-actions .h-apply { padding: 9px 14px; }
/* Karsilama: pazaryeri logosu (koyu temada da beyaz kutu), ad, bugun, son cekme */
.d-hello { display: flex; gap: 14px; align-items: center; min-width: 0; }
.d-logo { flex: none; width: 64px; height: 64px; display: grid; place-items: center; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.d-logo img { width: 100%; height: auto; }
.d-hello > div { display: grid; gap: 2px; min-width: 0; }
.d-hello b { font-size: 17px; }
.d-hello span { font-size: 13px; color: var(--sk-muted); }
.d-hello .d-store { color: var(--sk-accent); font-weight: 700; }
/* Ikincil buton: acik vurgu zemini, vurgu kenarligi */
.d-btn { min-height: 34px; padding: 6px 14px; border: 1.5px solid var(--sk-accent); border-radius: 9px; background: var(--sk-accent-soft); color: var(--sk-fg); font: 600 13px/1.2 var(--sk-font); cursor: pointer; }
.d-btn:hover { background: var(--sk-surface); }
/* Acik bolum izgara ogesi: icindeki genis tablo bolumu buyutmesin, kendi kutusunda kaysin (telefon) */
.d-orders { min-width: 0; max-width: 100%; }
.d-orders summary { cursor: pointer; list-style: none; }
.d-orders summary::-webkit-details-marker { display: none; }
.d-orders summary h3::before { content: '▸ '; color: var(--sk-muted); }
.d-orders[open] summary h3::before { content: '▾ '; }
.d-orders #d-orders-more { margin-top: 10px; }
/* Tarih araligi diyalogu */
.d-dialog { border: 0; border-radius: var(--sk-r); padding: 24px; width: min(440px, calc(100vw - 32px)); background: var(--sk-surface); color: var(--sk-fg); box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
.d-dialog::backdrop { background: rgb(0 0 0 / .35); }
.d-dialog form { display: grid; gap: 16px; }
.d-dialog h3 { margin: 0; font-size: 17px; }
.d-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-range label { display: grid; gap: 4px; font-size: 12.5px; color: var(--sk-muted); font-weight: 600; }
.d-range input { padding: 8px; border: 1px solid var(--sk-line); border-radius: 9px; background: var(--sk-surface-2); color: var(--sk-fg); font: inherit; min-width: 0; }
.d-err { margin: 0; color: var(--sk-bad); font-size: 13px; font-weight: 600; }
.d-err:empty { display: none; }
.d-dlg-actions { display: flex; justify-content: flex-end; gap: 10px; }
.d-dlg-actions .h-apply { justify-self: auto; padding: 8px 16px; }
#d-body { display: grid; gap: 24px; }
.d-good { color: var(--sk-good); }
.d-bad { color: var(--sk-bad); }
/* Koyu temada ui.css tum td'lere yazi rengi veriyor; tablodaki kar / zarar rengi kalsin */
#dashboard td.d-good { color: var(--sk-good); }
#dashboard td.d-bad { color: var(--sk-bad); }
.d-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.d-sec { padding: 16px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.d-sec h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-fg)); }
.d-sec h3 .h-hint { font-weight: 500; }
.d-wide { grid-column: 1 / -1; }
/* Masraf kalemleri renkleri (client/js/dashboardMasraf.js): dataviz kategorik sirasi, c7 iade zarari icin kirmizi; acik ve koyu zemin icin ayri. */
#dashboard { --d-c1: #2a78d6; --d-c2: #eb6834; --d-c3: #1baf7a; --d-c4: #eda100; --d-c5: #e87ba4; --d-c6: #6250d6; --d-c7: #e34948; --d-c8: #8c5a3c; }
:root[data-theme="dark"] #dashboard { --d-c1: #3987e5; --d-c2: #d95926; --d-c3: #199e70; --d-c4: #c98500; --d-c5: #d55181; --d-c6: #9085e9; --d-c7: #e66767; --d-c8: #c08a64; }
.d-sec .h-tablewrap { max-height: 360px; overflow: auto; }
.d-table th { position: sticky; top: 0; background: var(--sk-surface); }
.d-table td small { display: block; color: var(--sk-muted); font-size: 11.5px; }
.d-table td, .d-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--sk-line); }
/* Uzun urun adi tabloyu genisletip kar sutununu disari itmesin */
.d-table td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 96px; }
/* Siparis listeleri (client/js/dashboardSiparis.js): sira rozeti, gercek / tahmini / iade rozeti, kucuk kar cubugu */
.d-rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sk-surface-2); color: var(--sk-muted); font-size: 11.5px; font-weight: 800; margin-right: 8px; vertical-align: middle; }
.d-rank-1 { background: var(--sk-accent); color: var(--sk-on-accent); }
.d-no { white-space: nowrap; }
.d-table td .d-no ~ small { padding-left: 30px; }
.d-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--sk-surface-2); color: var(--sk-muted); margin-left: 6px; vertical-align: 1px; }
.d-tag-real { background: var(--sk-good-soft); color: var(--sk-good); }
.d-tag-ret { background: var(--sk-bad-soft); color: var(--sk-bad); }
.d-mini { display: inline-block; vertical-align: middle; width: 56px; height: 6px; border-radius: 99px; background: var(--sk-surface-2); margin-left: 8px; overflow: hidden; }
.d-mini i { display: block; height: 100%; border-radius: 99px; }
.d-mini i.d-good { background: var(--sk-good); }
.d-mini i.d-bad { background: var(--sk-bad); }
.d-list-toggle { justify-self: start; }
/* Siparis tablosu: hizli suzgec cipleri, etkin suzgec cipleri, basligin altinda suzgec satiri, telefonda panel */
.d-muted { color: var(--sk-muted); }
#dashboard td.d-muted { color: var(--sk-muted); }
.d-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d-tools .h-chips { flex: 1; }
.d-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-active:empty { display: none; }
.d-chip-x { display: inline-flex; align-items: center; gap: 6px; }
.d-chip-x b { font-weight: 800; opacity: .7; }
.d-sec .d-orders-wrap { max-height: 620px; }
.d-otable th { vertical-align: bottom; }
.d-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.d-sort:hover, .d-sort:focus-visible { color: var(--sk-accent); }
.d-sort[aria-sort="ascending"]::after { content: " ↑"; }
.d-sort[aria-sort="descending"]::after { content: " ↓"; }
.d-frow th { top: 30px; padding: 4px 6px 8px; background: var(--sk-surface-2); }
.d-frow th > div { display: grid; gap: 4px; }
.d-frow .d-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-fin { width: 100%; min-width: 0; min-height: 30px; margin: 0; padding: 4px 7px; border: 1px solid var(--sk-line); border-radius: 7px; background: var(--sk-surface); color: var(--sk-fg); font: 12px/1.2 var(--sk-font); box-sizing: border-box; }
.d-fin::placeholder { color: var(--sk-muted); }
.d-frow th:not(:first-child) .d-fin { text-align: right; }
.d-kinds { position: relative; }
.d-kinds summary { list-style: none; cursor: pointer; }
.d-kinds summary::-webkit-details-marker { display: none; }
.d-kinds summary .d-fin { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; cursor: pointer; }
.d-kinds summary .d-fin::after { content: "▾"; color: var(--sk-muted); }
.d-kinds-pop { position: absolute; right: 0; top: calc(100% + 4px); background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 10px; box-shadow: var(--sk-shadow); padding: 8px; display: grid; gap: 2px; z-index: 4; min-width: 230px; }
.d-kinds-pop label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px; font-size: 13px; font-weight: 500; color: var(--sk-fg); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.d-kinds-pop label:hover { background: var(--sk-surface-2); }
.d-kinds-pop input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--sk-accent); }
.d-panel, #d-panel-toggle { display: none; }
.d-foot { font-size: 13px; color: var(--sk-muted); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; }
.d-foot b { color: var(--sk-fg); font-variant-numeric: tabular-nums; }
.d-foot b.d-bad { color: var(--sk-bad); }
@media (max-width: 820px) {
  .d-frow { display: none; }
  .d-tools .h-chips { flex-basis: 100%; }
  #d-panel-toggle { display: inline-block; }
  .d-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; border: 1px solid var(--sk-line); border-radius: 10px; background: var(--sk-surface-2); }
  .d-panel[hidden] { display: none; }
  .d-panel label { display: grid; gap: 4px; margin: 0; font-size: 12px; color: var(--sk-muted); font-weight: 600; min-width: 0; }
  .d-panel .d-fin { min-height: 36px; font-size: 16px; }
  .d-panel .d-kinds-pop { position: static; box-shadow: none; padding: 4px 0 0; }
}
/* Urun hesap dokumu (client/js/urunDokum.js): tablodaki urun adi dugme, tiklayinca genis pencere */
.u-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted var(--sk-muted); text-underline-offset: 4px; }
.u-link:hover, .u-link:focus-visible { color: var(--sk-accent); text-decoration-color: currentColor; }
.u-dialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.u-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.u-head p { margin: 4px 0 0; }
#u-body { display: grid; gap: 16px; }
.u-sec { display: grid; gap: 8px; min-width: 0; }
.u-sec h4 { margin: 0; font-size: 15px; }
.u-sec h4 .h-hint { font-weight: 500; }
.u-sec > .h-hint { margin: 0; }
.u-calc { max-width: 640px; }
.u-calc tfoot td { font-weight: 800; font-size: 15px; border-top: 2px solid var(--sk-fg); border-bottom: 0; }
.u-packages { max-height: 420px; overflow: auto; }
.u-packages td:last-child { white-space: normal; min-width: 72px; }
/* Paket listesi: sipariş no arama, sıralama ve filtreler; sıralanabilir başlık düğme */
.u-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u-tools input[type="search"], .u-tools select { min-height: 34px; margin: 0; padding: 6px 10px; border: 1px solid var(--sk-line); border-radius: 9px; background: var(--sk-surface-2); color: var(--sk-fg); font: 13px/1.2 var(--sk-font); min-width: 0; max-width: 100%; }
.u-tools input[type="search"] { flex: 1 1 180px; max-width: 240px; }
.u-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--sk-fg); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.u-check input { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--sk-accent); }
.u-match { margin: 0; }
.u-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.u-sort:hover, .u-sort:focus-visible { color: var(--sk-accent); }
@media (max-width: 600px) {
  .u-dialog { padding: 16px; }
  /* 16px altinda telefon arama kutusuna dokununca sayfayi buyutur */
  .u-tools input[type="search"] { flex-basis: 100%; max-width: none; font-size: 16px; }
}
@media print { .u-link { text-decoration: none; } }
@media (max-width: 920px) {
  .d-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .d-table { font-size: 12.5px; }
  .d-table td, .d-table th { padding: 6px 4px; }
  .d-mini { display: none; }
}
/* Masraf kalemleri karti (client/js/dashboardMasraf.js): sol kutu (sana kalan, kisa bilgiler, aylara gore kar orani) + kalem satirlari; halka gorunumu */
.d-mhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.d-mhead h3 { margin: 0; }
/* Iki gorunum ayni hucrede ust uste; gizli olan yer tutar ki gorunum degisince kartin boyu oynamasin */
.d-mviews { display: grid; }
.d-mview { grid-area: 1 / 1; }
.d-mview:not(.d-mview-on) { visibility: hidden; }
.d-mgrid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px 28px; align-items: stretch; }
.d-mcall { background: var(--sk-surface-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.d-mring-row { display: flex; align-items: center; gap: 14px; }
.d-mring { flex: none; }
.d-mring text { font-family: var(--sk-font); font-size: 17px; font-weight: 800; fill: var(--sk-fg); }
.d-mbig { font-size: 28px; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.d-mbig small { display: block; font-size: 13px; font-weight: 600; color: var(--sk-muted); margin-top: 4px; }
.d-mmeta { margin: 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--sk-muted); }
.d-mmeta div { display: flex; justify-content: space-between; gap: 10px; }
.d-mmeta dd { margin: 0; font-weight: 700; color: var(--sk-fg); text-align: right; font-variant-numeric: tabular-nums; }
.d-mblock { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sk-line); }
.d-mblock h4 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--sk-muted); }
/* 100 TL kime gidiyor: dort alici, tek serit + satirlar */
.d-mkbar { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; background: var(--sk-surface); }
.d-mkbar i { display: block; min-width: 3px; }
.d-mklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.d-mklist li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.d-mkdot { width: 10px; height: 10px; border-radius: 3px; }
/* Alici adi ve aciklamasi tek satirda (sigmazsa aciklama ... ile kisalir) */
.d-mkad { display: flex; align-items: baseline; gap: 6px; font-weight: 700; min-width: 0; white-space: nowrap; }
.d-mkad small { font-size: 11.5px; font-weight: 400; color: var(--sk-muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.d-mklist b { font-variant-numeric: tabular-nums; }
/* Aylara gore kar orani: ustteki bloklarin hemen altinda; cubuklarin boyu iki gorunumde de ayni ve sabit (sag liste uzasa da buyumez) */
.d-maylar { flex: none; }
.d-mbars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; height: 84px; }
.d-mbars-bos { display: block; height: auto; min-height: 0; font-size: 12.5px; color: var(--sk-muted); }
.d-mbars > div { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 4px; text-align: center; min-width: 0; }
.d-mbars i { display: block; align-self: end; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--sk-good) 40%, var(--sk-surface)); min-height: 3px; }
.d-mbars .d-mcur i { background: var(--sk-good); }
.d-mv { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-ml { font-size: 11.5px; color: var(--sk-muted); }
.d-mcur .d-ml { color: var(--sk-fg); font-weight: 700; }
.d-crows { display: grid; gap: 6px; align-content: start; }
.d-crow { display: grid; grid-template-columns: 34px minmax(110px, 150px) minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; }
.d-crows-compact .d-crow { grid-template-columns: 34px minmax(0, 1fr) auto; }
.d-crow:hover, .d-crow.d-on { background: var(--sk-surface-2); }
.d-crow-sum { border-top: 1px solid var(--sk-line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 10px; font-weight: 800; }
.d-mico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.d-mic { width: 18px; height: 18px; }
.d-clab { display: grid; min-width: 0; }
.d-clab small { font-size: 11.5px; color: var(--sk-muted); font-weight: 400; }
.d-ctrack { height: 22px; border-radius: 6px; background: var(--sk-surface-2); overflow: hidden; }
.d-ctrack i { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.d-cvals { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-cvals b { font-size: 14px; min-width: 52px; text-align: right; display: inline-block; }
.d-cvals span { color: var(--sk-muted); font-size: 12.5px; min-width: 80px; text-align: right; display: inline-block; }
/* Halka gorunumu: butun = maliyeti bilinen ciro, kar da dilim; dilime gelince satir vurgulanir, tiklayinca sabitlenir */
.d-mdonut-wrap { align-items: center; }
.d-mdonut-wrap .d-mmeta, .d-mdonut-wrap .d-mblock { width: 100%; }
.d-mdonut { width: 100%; max-width: 200px; height: auto; display: block; }
.d-mdonut text { pointer-events: none; font-family: var(--sk-font); }
.d-mdl { font-size: 12px; fill: var(--sk-muted); }
.d-mdv { font-size: 27px; font-weight: 800; fill: var(--sk-fg); }
.d-mseg { transition: stroke-width .12s, opacity .12s; cursor: pointer; }
.d-mseg:hover, .d-mseg.d-on { stroke-width: 38; }
.d-mdonut.d-dim .d-mseg:not(.d-on) { opacity: .3; }
/* Genis ekran: kalem satirlari sol kutunun boyuna esit yayilir (altta bos kalmaz), yazilar ve simgeler buyur;
   aciklama tek satir (sigmazsa ... ile kisalir, tamami satirin uzerine gelince) ki kart ekrana sigsin;
   rozet sutunu sabit genislikte ki "gecen ayla ayni" yazan satirda yuzde ve tutar kaymasin */
@media (min-width: 921px) {
  .d-crows { grid-auto-rows: 1fr; align-content: stretch; gap: 2px; }
  .d-crow { grid-template-columns: 36px minmax(170px, 1fr) minmax(0, 1fr) auto; gap: 0 14px; padding: 4px 12px; font-size: 15.5px; }
  .d-crows-compact .d-crow { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .d-crow-sum { font-size: 16.5px; }
  .d-crow .d-mico { width: 36px; height: 36px; border-radius: 10px; }
  .d-crow .d-mic { width: 20px; height: 20px; }
  .d-clab > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-clab small { font-size: 13px; }
  .d-cvals { gap: 14px; }
  .d-cvals b { font-size: 17px; min-width: 62px; }
  .d-cvals span { font-size: 14px; min-width: 96px; }
  .d-crow .d-cvals .d-delta { font-size: 13px; min-width: 128px; padding: 3px 10px; }
}
@media (max-width: 920px) {
  .d-mview:not(.d-mview-on) { display: none; }
  .d-mgrid { grid-template-columns: 1fr; }
  .d-mdonut-wrap { align-items: center; }
  .d-crow { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "i lab" "i vals" "track track"; gap: 4px 10px; }
  .d-crows-compact .d-crow { grid-template-areas: "i lab" "i vals"; }
  .d-crow .d-mico { grid-area: i; }
  .d-crow .d-clab { grid-area: lab; }
  .d-crow .d-clab small { display: none; }
  .d-crow .d-ctrack { grid-area: track; height: 10px; }
  .d-crow .d-cvals { grid-area: vals; flex-wrap: wrap; }
  .d-cvals b, .d-cvals span { min-width: 0; text-align: left; }
}
@media print { .d-mhead .h-chips { display: none; } }
/* Tazmin / ceza satiri dugme gibi: basinca faturalar penceresi (client/js/dashboardCeza.js) */
.d-crow[data-ceza-ac] { cursor: pointer; }
.d-crow[data-ceza-ac]:hover { box-shadow: inset 0 0 0 1px var(--sk-line); }
.d-crow[data-ceza-ac]:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
.d-clink { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--sk-accent-soft); color: var(--sk-accent); font-size: 11.5px; font-style: normal; font-weight: 700; vertical-align: 2px; }
@media print { .d-clink { display: none; } }
/* Tazmin / ceza faturalari penceresi */
.c-dialog { width: min(1040px, calc(100vw - 32px)); }
.c-wrap { display: grid; gap: 12px; min-width: 0; }
.c-wrap > .h-hint { margin: 0; }
.c-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; color: var(--sk-muted); }
.c-legend b { color: var(--sk-fg); }
.c-table td { vertical-align: top; }
.c-table td:nth-child(2) { white-space: normal; min-width: 180px; max-width: 320px; }
.c-table td:last-child { white-space: normal; min-width: 150px; }
.c-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; user-select: all; }
.c-find { white-space: nowrap; }
.c-dokum td { background: var(--sk-surface-2); white-space: normal; }
.c-msg { margin: 0; font-size: 13px; line-height: 1.5; }
.c-msg small { display: block; color: var(--sk-muted); font-size: 11.5px; margin-top: 2px; }
.c-items { margin: 0; background: var(--sk-surface); }
/* Telefon: her fatura bir kart (tur ve tutar ustte, tarih ve fatura no altinda, "Siparişi bul" en altta); yana kaydirma gerekmez */
@media (max-width: 600px) {
  .c-table thead, .c-items thead { display: none; }
  .c-table, .c-table tbody, .c-dokum, .c-dokum td { display: block; }
  .c-table tr[data-c-row] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; border-bottom: 1px solid var(--sk-line); }
  .c-table tr[data-c-row] td { border: 0; padding: 0; min-width: 0; max-width: none; white-space: normal; }
  .c-table tr[data-c-row] td:nth-child(1) { grid-area: 2 / 1; }
  .c-table tr[data-c-row] td:nth-child(1) small { display: inline; margin-left: 6px; }
  .c-table tr[data-c-row] td:nth-child(2) { grid-area: 1 / 1; }
  .c-table tr[data-c-row] td:nth-child(3) { grid-area: 3 / 1; overflow-wrap: anywhere; }
  .c-table tr[data-c-row] td:nth-child(4) { grid-area: 1 / 2 / 4 / 3; text-align: right; max-width: 130px; }
  .c-table tr[data-c-row] td:nth-child(5) { grid-area: 4 / 1 / 5 / 3; margin-top: 6px; }
  .c-dokum td { padding: 10px; border-bottom: 1px solid var(--sk-line); }
  .c-items, .c-items tbody { display: block; }
  .c-items tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0; }
  .c-items td { border: 0; padding: 0; min-width: 0; white-space: normal; }
  .c-items td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .c-items td:nth-child(3) { grid-area: 3 / 1 / 4 / 3; }
  .c-items td:nth-child(4) { grid-area: 1 / 2; text-align: right; }
}

/* Kar performansi karti (client/js/dashboardGrafik.js): cubuk grafik kutunun genisliginde, ipucu, ozet kutulari, takvim gorunumu */
.d-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.d-ghead h3 { margin: 0; }
.d-gtools { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.d-glegend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12.5px; color: var(--sk-muted); }
.d-glegend span { display: inline-flex; align-items: center; gap: 6px; }
.d-glegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.d-gln { display: inline-block; width: 16px; height: 2px; border-radius: 0; background: var(--sk-muted); opacity: .7; }
.d-gwkl { background: var(--sk-surface-2); border: 1px solid var(--sk-line); }
.d-gwrap { position: relative; min-width: 0; }
.d-gchart { width: 100%; display: block; overflow: visible; }
.d-gchart text { font-family: var(--sk-font); font-size: 11.5px; fill: var(--sk-muted); }
.d-gchart .d-glbl { font-weight: 700; fill: var(--sk-fg); paint-order: stroke; stroke: var(--sk-surface); stroke-width: 3px; stroke-linejoin: round; }
.d-ggrid { stroke: var(--sk-line); stroke-width: 1; }
.d-gbase { stroke: var(--sk-muted); stroke-width: 1; opacity: .7; }
.d-gwk { fill: var(--sk-surface-2); }
.d-ghit { fill: transparent; cursor: pointer; }
.d-gbar { transition: opacity .12s; }
.d-ghit:hover + .d-gbar, .d-ghit:focus-visible + .d-gbar { opacity: .75; }
.d-gsel { fill: none; stroke: var(--sk-accent); stroke-width: 2; }
.d-gprev { fill: none; stroke: var(--sk-muted); stroke-width: 2; opacity: .55; stroke-linejoin: round; stroke-linecap: round; }
.d-gtip { position: absolute; pointer-events: none; background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 10px; padding: 8px 10px; box-shadow: var(--sk-shadow); font-size: 12.5px; display: grid; gap: 3px; min-width: 160px; z-index: 3; color: var(--sk-fg); }
.d-gtip[hidden] { display: none; }
.d-gtip b { font-size: 12px; color: var(--sk-muted); font-weight: 600; }
.d-gtip div { display: flex; justify-content: space-between; gap: 14px; }
.d-gtip div span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.d-gtip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.d-gtip i.d-gln { width: 10px; height: 2px; vertical-align: 2px; }
.d-gsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.d-gsum > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--sk-surface-2); min-width: 0; }
.d-gsum small { font-size: 12px; color: var(--sk-muted); }
.d-gsum b { font-size: 14px; font-variant-numeric: tabular-nums; }
.d-gsum b span { font-weight: 500; color: var(--sk-muted); font-size: 12px; }
.d-gsum b.d-bad { color: var(--sk-bad); }
/* Takvim gorunumu */
.d-gcal { display: grid; gap: 4px; align-items: center; justify-content: center; }
.d-gdow { font-size: 11px; color: var(--sk-muted); text-align: right; padding-right: 4px; }
.d-gmon { font-size: 11px; color: var(--sk-muted); font-weight: 700; white-space: nowrap; }
.d-gcell { aspect-ratio: 1; max-height: 56px; width: 100%; border-radius: 6px; background: var(--sk-surface-2); display: grid; place-items: center; font: 700 11px/1 var(--sk-font); color: var(--sk-fg); border: 0; margin: 0; padding: 0; min-width: 0; cursor: pointer; }
.d-gcell.d-goff { background: transparent; cursor: default; }
.d-gcell.d-gl3 { color: #fff; }
.d-gcell.d-gselc { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.d-gcell:hover { filter: brightness(.92); }
.d-gcal-legend { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sk-muted); flex-wrap: wrap; }
.d-gcal-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
/* Genis metrik karti: uc sutun */
@media (max-width: 920px) {
  .d-gsum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .d-gcell { font-size: 10px; border-radius: 4px; }
}
@media print { .d-gtools { display: none; } }

/* Ozet kartlari (client/js/dashboardOzet.js): dort kart, simge, gecen aya gore rozet, kucuk egri; ortalamalar seridi; dikkat seridi; aciklama */
.d-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.d-kpi { padding: 16px 18px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; cursor: help; }
.d-klbl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--sk-muted); }
.d-kico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sk-accent-soft); color: var(--sk-accent); }
.d-kico svg { width: 18px; height: 18px; }
.d-kval { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.d-krow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 22px; }
.d-kspark { flex: 1 1 140px; width: 100%; max-width: 240px; height: auto; display: block; overflow: visible; margin-left: auto; }
/* Küçük eğri (dashboardEgri.js): dolgu + çizgi, bitmemiş gün kesik ve boş daire, geçen ay gri, ortalama kesik, sıfır çizgisi */
.d-kspark .d-ksf { fill: var(--sk-accent); opacity: .10; }
.d-kspark .d-ksl { fill: none; stroke: var(--sk-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.d-kspark .d-ksd { stroke-dasharray: 2.5 2.5; opacity: .8; }
.d-kspark .d-ksc { fill: var(--sk-accent); stroke: var(--sk-surface); stroke-width: 1.5; }
.d-kspark .d-ksc.is-partial { fill: var(--sk-surface); stroke: var(--sk-accent); stroke-width: 1.5; }
.d-kspark .d-ksp { fill: none; stroke: var(--sk-muted); stroke-width: 1.1; opacity: .6; }
.d-kspark .d-ksa { stroke: var(--sk-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.d-kspark .d-ksz { stroke: var(--sk-line); stroke-width: 1; }
.d-kspark .d-kst { fill: transparent; }
.d-kspark .d-kst:hover { fill: var(--sk-accent); fill-opacity: .08; }
.d-ksub { font-size: 12px; color: var(--sk-muted); }
.d-kmeter { height: 6px; border-radius: 99px; background: var(--sk-good-soft); overflow: hidden; margin-bottom: 4px; }
.d-kmeter i { display: block; height: 100%; background: var(--sk-good); border-radius: 99px; }
.d-kpnote { margin: -8px 0 0; }
.d-pnote { margin: -6px 4px 0; }
.d-avgs { padding: 4px 8px; }
.d-avgs dl { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.d-avgs dl > div { padding: 10px; display: grid; gap: 2px; border-left: 1px solid var(--sk-line); min-width: 0; cursor: help; }
.d-avgs dl > div:first-child { border-left: 0; }
.d-avgs dt { font-size: 12px; color: var(--sk-muted); text-decoration: underline dashed var(--sk-line); text-underline-offset: 4px; }
.d-avgs dd { margin: 0; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.d-alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.d-alert { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--sk-surface-2); border: 1px solid var(--sk-line); min-width: 0; }
.d-alert .d-kico { background: var(--sk-surface); }
.d-alert-bad { background: var(--sk-bad-soft); border-color: transparent; }
.d-alert-bad .d-kico { color: var(--sk-bad); }
.d-alert-warn { background: var(--sk-warn-soft); border-color: transparent; }
.d-alert-warn .d-kico { color: var(--sk-warn); }
.d-alert > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.d-alert b { font-size: 14px; }
.d-alert small { font-size: 12px; color: var(--sk-muted); }
.d-alert .d-btn { flex: none; min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
.d-howto { padding: 0 4px; }
.d-howto summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sk-muted); list-style: none; }
.d-howto summary::-webkit-details-marker { display: none; }
.d-howto summary::before { content: "▸ "; }
.d-howto[open] summary::before { content: "▾ "; }
.d-howto ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--sk-muted); display: grid; gap: 4px; }
.d-howto b { color: var(--sk-fg); }
@media (max-width: 1000px) {
  .d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-avgs dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-avgs dl > div:nth-child(4) { border-left: 0; }
  .d-alerts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .d-kval { font-size: 23px; }
  .d-avgs { padding: 4px 0; }
  .d-avgs dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-avgs dl > div:nth-child(odd) { border-left: 0; }
  .d-avgs dl > div:nth-child(4) { border-left: 1px solid var(--sk-line); }
}
@media print { .d-alert .d-btn { display: none; } .d-howto { display: none; } }

/* PDF olarak indir (yazdir): yalnizca dashboard; dugmeler gizli, tarih araligi duz yazi olarak kalir */
@media print {
  .sk-header, body > .footer, .h-bar, .feedback-button, .d-bar button:not(#d-range-btn), #d-sync-status { display: none !important; }
  /* Ekranda kaydirilan oge body (sabit yukseklik); yazdirmada serbest kalsin, yoksa PDF tek sayfada kesiliyor */
  html, body { height: auto !important; max-height: none !important; overflow: visible !important; }
  body { background: #fff !important; }
  #dashboard .h-card { box-shadow: none; border-color: #ddd; }
  #d-range-btn { border: 0; background: none; padding: 0; font-size: 14px; }
  .d-sec, .d-card { break-inside: avoid; }
}
/* Gecen ayla karsilastirma (client/js/dashboardKarsilastir.js): ust seritte kutu, kartlarda ve masraf listesinde rozet, grafikte gri cizgi */
.d-cmp { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--sk-muted); cursor: pointer; white-space: nowrap; }
.d-cmp input { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--sk-accent); }
.d-cmp small { font-size: 12px; font-weight: 500; }
.d-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--sk-surface-2); color: var(--sk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-delta-up { background: var(--sk-good-soft); color: var(--sk-good); }
.d-delta-down { background: var(--sk-bad-soft); color: var(--sk-bad); }
.d-cvals .d-delta { min-width: 84px; justify-content: center; }
@media (max-width: 600px) { .d-cmp { white-space: normal; } .d-cvals .d-delta { min-width: 0; } }
@media print { .d-cmp input { display: none; } }

/* Basliga kucultulebilen kart (client/js/dashboardKatla.js): ok dugmesi, kucukken tek satir ozet */
.d-fhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.d-fhead h3 { margin: 0; flex: 0 1 auto; min-width: 0; }
.d-fsum { display: none; flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--sk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-fbtn { flex: none; margin-left: auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--sk-line); border-radius: 8px; background: var(--sk-surface-2); color: var(--sk-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.d-fbtn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.d-fbtn:hover { color: var(--sk-fg); border-color: var(--sk-accent); }
.d-fold-closed .d-fsum { display: block; }
.d-fold-closed .d-fhead h3 .h-hint { display: none; } /* kucukken basligin yaninda ozet var, ipucu yer kaplamasin */
.d-fold-closed .d-fbtn svg { transform: rotate(-90deg); }
.d-fold-closed .d-fbody { display: none; }
.d-fold-closed { gap: 0; }
.d-fbody { display: grid; gap: 10px; min-width: 0; }
@media (max-width: 600px) { .d-fhead { flex-wrap: wrap; } .d-fsum { flex-basis: 100%; white-space: normal; } .d-fbtn { margin-left: auto; } }
@media print { .d-fbtn { display: none; } }

/* Kargo firmalari (client/js/dashboardKargo.js): pay seridi, firma tablosu, en dusuk kargo / en yuksek kar notu */
.d-kgshare { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--sk-surface-2); }
.d-kgshare i { display: block; height: 100%; min-width: 3px; }
.d-kgname { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.d-kgdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.d-kgtable td small { display: block; font-size: 11.5px; color: var(--sk-muted); }
.d-kgnote { margin: 0; font-size: 13px; color: var(--sk-fg); }
.d-kgnote b { font-weight: 700; }
/* Satış analizi kartı (dashboardSatis.js): seçim şeridi, özet rakamlar, günlük ciro, sekmeli tablo */
.d-sa { display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: opacity .15s; } /* kartın gövdesi grid: içerik genişliği kartı aşmasın */
.d-sa.is-loading { opacity: .55; pointer-events: none; }
.d-sa-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.d-sa-range { font-size: 13.5px; color: var(--sk-fg); }
.d-sa-range .u-link { color: var(--sk-muted); font-size: 13px; }
.d-sa-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sk-muted); }
.d-sa select, .d-sa input[type="search"] {
  height: 36px; border: 1px solid var(--sk-line); border-radius: 9px; background: var(--sk-surface-2); color: var(--sk-fg);
  font: 500 13.5px var(--sk-font); padding: 0 10px; margin: 0; min-width: 0;
}
.d-sa-sel select { min-width: 170px; max-width: 260px; }
.d-sa select.is-on { border-color: var(--sk-accent); background: var(--sk-accent-soft); font-weight: 700; }
.d-sa select:focus, .d-sa input[type="search"]:focus { outline: 3px solid var(--sk-focus); border-color: var(--sk-accent); }
.d-sa-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 12px; border: 1px solid var(--sk-accent); border-radius: 999px; background: var(--sk-accent-soft); font-size: 13px; }
.d-sa-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.d-sa-chip button { border: 0; background: none; color: var(--sk-fg); font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.d-sa-chip button:hover { background: var(--sk-surface); }
.d-sa-info { margin: 0; }
.d-sa-stats { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--sk-line); border-radius: 12px; background: var(--sk-surface-2); }
.d-sa-stats div { min-width: 0; }
.d-sa-stats dt { font-size: 11.5px; font-weight: 600; color: var(--sk-muted); text-transform: uppercase; letter-spacing: .03em; }
.d-sa-stats dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-sa-stats small { display: block; font-size: 11.5px; color: var(--sk-muted); }
.d-sa-warn { margin: 0; font-size: 12.5px; color: var(--sk-warn); }
#dashboard .d-sa-table td small.d-sa-warn { color: var(--sk-warn); }
.d-sa-chart { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.d-sa-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13px; font-weight: 700; color: var(--sk-fg); }
.d-sa-chart svg { display: block; width: 100%; height: 110px; border-bottom: 1px solid var(--sk-line); }
.d-sa-chart rect { fill: var(--d-c1); }
.d-sa-chart rect.is-loss { fill: var(--d-c7); }
.d-sa-chart rect { cursor: pointer; }
.d-sa-chart rect:hover, .d-sa-chart rect.is-on { opacity: .7; }
.d-sa-day { margin: 0; min-height: 1.4em; }
.d-sa-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sk-muted); }
.d-sa-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.d-sa-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.d-sa-tabs .h-chip b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.d-sa-find { display: flex; justify-content: flex-end; gap: 8px; flex: 0 1 420px; min-width: 0; }
.d-sa-find input[type="search"] { flex: 1 1 200px; }
.d-sec .d-sa .h-tablewrap { max-height: none; } /* sayfa sayfa "daha göster"; kutu içinde kaydırma olmasın */
.d-sa-table { width: 100%; table-layout: fixed; }
.d-sa-table col.c-rank { width: 44px; }
.d-sa-table col.c-qty { width: 76px; }
.d-sa-table col.c-rev { width: 140px; }
.d-sa-table col.c-profit { width: 150px; }
.d-sa-table col.c-margin { width: 76px; }
.d-sa-table col.c-act { width: 92px; }
.d-sa-table td small { display: block; font-size: 11.5px; color: var(--sk-muted); }
.d-sa-table .d-sa-rank { color: var(--sk-muted); font-variant-numeric: tabular-nums; }
#dashboard .d-sa-table .d-sa-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-sa-table td.d-sa-num small { white-space: normal; }
/* Ad sütunu: uzun Trendyol adı ve altındaki bilgi tek satıra sığar, sonu "…" (tamamı üstüne gelince) */
.d-sa-table .d-sa-name { overflow: hidden; }
.d-sa-table .d-sa-name .u-link, .d-sa-table .d-sa-name b, .d-sa-table .d-sa-name small { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-sa-table .d-sa-act { text-align: right; }
.d-sa-calc { padding: 4px 10px; font-size: 12.5px; background: none; border-color: var(--sk-line); color: var(--sk-muted); }
.d-sa-calc:hover, .d-sa-calc:focus-visible { border-color: var(--sk-accent); color: var(--sk-accent); }
.d-sa-legend { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--sk-muted); }
.d-sa-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--d-c7); margin-right: 5px; vertical-align: -1px; }
@media (max-width: 920px) { .d-sa-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .d-sa-sel, .d-sa-find { flex: 1 1 100%; }
  /* Seçicinin genişliği en uzun seçeneğe göre büyümesin (uzun kategori adları kartı taşırıyordu) */
  .d-sa-sel select { flex: 1 1 0; min-width: 0; width: 100%; max-width: none; font-size: 16px; }
  .d-sa input[type="search"], .d-sa-find select { font-size: 16px; }
  .d-sa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-sa-table .d-sa-rank { display: none; }
  /* Dar ekranda sabit genişlik yok: ad iki satıra kadar kırılır, tablo kutu içinde yana kayar */
  .d-sa-table { table-layout: auto; }
  .d-sa-table col { width: auto !important; }
  .d-sa-table .d-sa-name { min-width: 150px; }
  .d-sa-table .d-sa-name .u-link, .d-sa-table .d-sa-name b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media print { .d-sa-bar .d-btn, .d-sa-range .u-link, .d-sa-tools, .d-sa-calc, .d-sa [data-sa="more"], .d-sa-chip button { display: none; } }

/* Aylik kar hedefi (client/js/dashboardHedef.js): halka, altili sayi listesi, ay ilerleme cubugu, tahmin, form */
.d-hin { display: grid; gap: 12px; min-width: 0; }
.d-hgrid { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; }
.d-hring { position: relative; width: 124px; height: 124px; }
.d-hring svg { width: 100%; height: 100%; display: block; }
.d-hring-bg { fill: none; stroke: var(--sk-surface-2); stroke-width: 11; }
.d-hring-fg { fill: none; stroke: var(--sk-good); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.d-hwarn .d-hring-fg { stroke: var(--sk-warn); }
.d-hring-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.d-hring-txt b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d-hring-txt span { font-size: 11.5px; color: var(--sk-muted); font-weight: 600; }
.d-hstats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.d-hstats div { min-width: 0; }
.d-hstats dt { font-size: 11.5px; font-weight: 600; color: var(--sk-muted); text-transform: uppercase; letter-spacing: .03em; }
.d-hstats dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-hstats dd small { display: block; font-size: 11.5px; font-weight: 500; color: var(--sk-muted); white-space: normal; }
.d-hmsg { margin: 0; font-size: 13.5px; }
.d-warn { color: var(--sk-warn); }
.d-hbar { display: grid; gap: 4px; }
.d-hbar-track { position: relative; height: 12px; border-radius: 6px; background: var(--sk-surface-2); overflow: visible; }
.d-hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--sk-good); }
.d-hbar-fill.d-hwarn { background: var(--sk-warn); }
.d-hbar-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--sk-fg); border-radius: 1px; }
.d-hbar-today span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: var(--sk-fg); white-space: nowrap; }
.d-hbar { padding-top: 14px; }
.d-hbar-lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sk-muted); font-weight: 600; }
.d-hfore { margin: 0; font-size: 13px; color: var(--sk-muted); }
.d-hfore b { color: var(--sk-fg); }
.d-hactions { display: flex; gap: 8px; flex-wrap: wrap; }
.d-btn-quiet { border-color: var(--sk-line); background: var(--sk-surface); color: var(--sk-muted); }
.d-hform { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin: 0; padding: 12px; border: 1px dashed var(--sk-line); border-radius: 10px; background: var(--sk-surface-2); }
.d-hform label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sk-muted); }
.d-hform input { width: 160px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--sk-line); border-radius: 8px; background: var(--sk-surface); color: var(--sk-fg); font: 600 15px var(--sk-font); }
.d-hform .h-apply { min-height: 36px; }
.d-herr { flex-basis: 100%; font-size: 12.5px; color: var(--sk-bad); font-weight: 600; }
.d-herr:empty { display: none; }
.d-hopen { display: grid; gap: 10px; }
.d-hopen p { margin: 0; font-size: 13.5px; }
.d-olink { color: inherit; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
.d-olink:hover { color: var(--sk-accent); }
@media (max-width: 1000px) { .d-hstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .d-hgrid { grid-template-columns: 1fr; justify-items: center; }
  .d-hstats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-hform input { width: 100%; }
  .d-hform label { flex: 1 1 100%; }
}
@media print { .d-hactions, .d-hform { display: none; } .d-olink { text-decoration: none; } }