/* Genel bakış, v3 (docs/superpowers/specs/2026-10-25-panel-ux-v3-design.md "Genel bakış"): the head with one primary
   button, ONE strip of four numbers, "Bugün" and "Son 30 gün" side by side (.grid.g2: one column under 900 px), "Son
   işlemler" full width. Prefix db-. Colour: the accent on the primary button and the chart bars only; the warn colour on a
   warning sub-line of the strip; everything else text / muted / line. Loaded before full-view.css and calm.css. */
.db-page .page-head{margin-bottom:0}                      /* the stack's gap spaces the head (calm.css adds 24 px of its own) */
.db-page .page-head .btn{flex:none}

/* ---- the strip: one card, four cells divided by hairlines; two by two under 900 px */
.kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0}
.kpi-cell{display:flex;flex-direction:column;gap:2px;min-width:0;padding:18px 20px;border-right:1px solid var(--line);color:inherit}
.kpi-cell:last-child{border-right:0}
@media (hover:hover){.kpi-cell:hover{background:var(--panel2)}}
.kpi-cell:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;text-decoration:none}
.kpi-l{font-size:13px;color:var(--muted)}
.kpi-v{font-size:28px;font-weight:600;line-height:1.2;margin:2px 0;font-variant-numeric:tabular-nums;color:var(--text)}
.kpi-d{font-size:13px;color:var(--muted)}
.kpi-d.warn{color:var(--warn)}
@media (max-width:900px){
  .kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-cell:nth-child(2){border-right:0}
  .kpi-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---- the two cards of a row stretch to one height */
.db-two{align-items:stretch}
.db-two > .card{display:flex;flex-direction:column}
.db-two > .card > .card-b{flex:1 1 auto}

/* ---- the one-line rows of "Bugün", "Son işlemler" and the viewer's quick links: the text, a grey detail, a relative time,
   a chevron. The text and the detail end in "…" (whole in their titles); an owner's wrap instead (full-view). 43 px a row. */
.db-rows > .db-row{display:flex;align-items:center;gap:12px;padding:11px 20px;font-size:14px;color:var(--text)}
@media (hover:hover){.db-rows > a.db-row:hover{background:var(--panel2)}}
.db-rows > a.db-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;text-decoration:none}
.db-row .t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li.db-row .t b{display:inline;font-weight:500;white-space:inherit;overflow:visible;text-overflow:clip}
.db-row .d{flex:0 1 auto;min-width:0;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.db-row .p-time{flex:none;font-size:13px;color:var(--muted)}
.db-chev{flex:none;color:var(--faint);font-size:16px;line-height:1}
.db-none{margin:0;font-size:14px}
.db-all{font-size:13px;color:var(--muted)}
@media (hover:hover){.db-all:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
html.full-view .db-row .t,html.full-view .db-row .d{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* the owner's detail keeps its own width (up to half the row) and breaks at its spaces, inside a word only when that word
   alone is too long for it: shrinking it with the text broke "Standard" in two on a phone */
html.full-view .db-row .d{max-width:50%;text-align:right;flex-shrink:0;overflow-wrap:break-word}

/* ---- the chart: the bars in the accent (panel.css .bar-r), the axis labels muted */
.db-chart .chart{overflow:visible}
.db-chart .chart .axis{fill:var(--muted)}