/* Additive workspace layout. Shared tokens own typography, color and rhythm. */
:root { scrollbar-gutter: stable; }
.workspace-login { max-width: var(--np-refund-login-width); }
.workspace-login h2 { font-size: var(--np-text-2xl); }
.workspace-login form { display: grid; gap: var(--np-space-5); }
.workspace-login .field input { font-family: var(--np-font-code); }
.workspace-filter { display: flex; align-items: end; gap: var(--np-space-3); margin-bottom: var(--np-space-4); }
.workspace-filter .field { flex: 1; }
.workspace-filters-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--np-space-3); margin-bottom: var(--np-space-4); }
.workspace-tabs { display: flex; flex-wrap: wrap; gap: var(--np-space-1-5); }
.workspace-tabs button { flex: 0 0 var(--np-quick-tab-width); width: var(--np-quick-tab-width); min-width: var(--np-quick-tab-width); max-width: var(--np-quick-tab-width); }
.workspace-tabs .workspace-count { width: var(--np-quick-tab-count-width); text-align: right; font-variant-numeric: tabular-nums; }
.workspace-table { table-layout: fixed; min-width: var(--np-transaction-table-base-width); }
.workspace-table th:first-child { width: 23%; }
.workspace-table th:nth-child(2) { width: 9%; }
.workspace-table th:nth-child(3) { width: 17%; }
.workspace-table th:nth-child(4) { width: 23%; }
.workspace-table th:nth-child(5) { width: 12%; }
.workspace-table th:nth-child(6) { width: 16%; }
.workspace-table .workspace-amount { white-space: nowrap; }
.workspace-table .badge { font-size: var(--np-text-xs); white-space: nowrap; }
.workspace-table .money-decimals { font-size: var(--np-money-table-fraction); }
.workspace-table .transaction-link { display: inline-flex; gap: var(--np-space-2); max-width: 100%; }
.workspace-order { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-reference { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-status { display: grid; justify-items: start; gap: var(--np-space-1-5); }
.workspace-status .card-operation-list { width: 100%; }
.workspace-status .card-operation-list li { gap: var(--np-space-1) var(--np-space-2); }
.workspace-load { min-height: var(--np-status-line-height); margin: 0; color: var(--np-color-text-muted); font-size: var(--np-text-sm); }
.workspace-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--np-space-7); }
.workspace-meta dd { min-width: 0; overflow-wrap: anywhere; }
.workspace-detail-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--np-space-3); }
.workspace-detail-title h2 { margin: 0; }
.workspace-detail-amount { font-size: var(--np-text-3xl); font-weight: var(--np-weight-semibold); }
.workspace-detail .np-info-surface { margin-bottom: 0; }
.workspace-detail .detail-list { margin-block: var(--np-space-3); }
.workspace-detail .panel-head { align-items: start; flex-wrap: wrap; }
.workspace-help { margin-top: var(--np-space-4); font-size: var(--np-text-sm); color: var(--np-color-text-muted); }
.workspace-events { display: grid; list-style: none; gap: var(--np-space-4); margin: 0; padding: 0; }
.workspace-events>li { border-bottom: var(--np-border-hairline) solid var(--np-color-border); padding-bottom: var(--np-space-4); }
.workspace-events>li:last-child { border: 0; padding-bottom: 0; }
/* Detail: the way back reads as a button, and an empty status line does not
   push the amount down; a loading or error message still gets its line. */
.workspace-detail .panel-head .btn.ghost { border-color: var(--np-color-border); }
.workspace-detail .panel-head .btn.ghost::before { content: "\2039"; font-size: var(--np-text-lg); line-height: var(--np-leading-compact); }
.workspace-detail > .workspace-load:empty { min-height: 0; }
.workspace-detail > .workspace-load:empty + .transaction-detail-summary { margin-top: var(--np-space-3); }
/* Payment filters read as one segmented control, not three loose labels. */
.workspace-tabs .transaction-quick-filter:not([aria-pressed="true"]) { border-color: var(--np-color-border-subtle); }
@media(max-width:1100px) {
  .workspace-meta { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:760px) {
  .workspace-filter { flex-wrap: wrap; }
  .workspace-filter .field { flex-basis: 100%; }
  /* The compact table minimum (.table-wrap table) must not apply here: the
     rows become cards, and a wider table hid method and amount off-screen. */
  .table-wrap .workspace-table { min-width: 0; }
  /* The three payment filters share one row instead of three full-width rows. */
  .workspace-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .workspace-tabs button { width: auto; min-width: 0; max-width: none; }
  .workspace-table thead { display: none; }
  .workspace-table tbody { display: block; }
  .workspace-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--np-space-3); padding: var(--np-space-4) 0; border-bottom: var(--np-border-hairline) solid var(--np-color-border); }
  .workspace-table td { display: block; padding: 0; border: 0; }
  .workspace-table td:first-child { grid-column: 1; grid-row: 1; }
  .workspace-table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .workspace-table td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .workspace-table td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .workspace-table td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
  .workspace-table td:nth-child(6) { grid-column: 2; grid-row: 2; align-self: center; }
  .workspace-table .np-datetime { font-size: var(--np-text-sm); }
  /* Without column headers a lone "-" for "no review mark" reads as noise. */
  .workspace-table td:nth-child(5):has([aria-label="Nema oznake za proveru"]) { display: none; }
}