/* KOJAK rep app · «العمليات»: the pending ones on top, always; the tabs, the new transaction button under them, and the
   transactions by day (owner decisions 2026-09-22). Colours from shared/tokens.css only. */
.ops-pending { margin-bottom: var(--kj-sp-4); padding: 10px 12px 12px; background: var(--kj-white); border: 0.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-xl); }
.ops-pending.has-items { background: var(--kj-gold-cream); border-color: var(--kj-gold); }
.ops-pending__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ops-pending__head .kj-icon { color: var(--kj-gold-deep); }
.ops-pending__head b { font-weight: var(--kj-fw-medium); }
.ops-pending__head .btn { margin-inline-start: auto; }
.ops-pending__empty { margin: 0; font-size: var(--kj-fs-sm); line-height: 1.6; color: var(--kj-gray-500); }
.draft-row { background: var(--kj-white); border-color: var(--kj-gold-soft); }
.draft-row .prow__avatar { background: var(--kj-gold-cream); }
.draft-row__go { display: inline-flex; align-items: center; gap: 2px; font-size: var(--kj-fs-xs); color: var(--kj-gold-deep); font-weight: var(--kj-fw-medium); }
.pending-row .prow__avatar { background: var(--kj-gold-soft); color: var(--kj-gold-deep); }

.ops-tabs { margin: 0 0 var(--kj-sp-2); }
/* the new transaction button: as wide as the tabs above it, and slim */
.ops-new { min-height: 40px; padding-block: 8px; margin-bottom: var(--kj-sp-3); border-radius: var(--kj-radius-full); font-size: var(--kj-fs-base); }
.ops-new .kj-icon { color: var(--kj-gold); }
.op-day + .op-day { margin-top: var(--kj-sp-4); }
.op-day__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 6px; font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); color: var(--kj-gray-600); }
.op-day__head small { font-weight: var(--kj-fw-normal); color: var(--kj-gray-500); }
.op-day__more { margin-top: 4px; min-height: 38px; font-size: var(--kj-fs-sm); color: var(--kj-gold-deep); }
.ops-rows { display: flex; flex-direction: column; gap: 6px; }
.op { display: flex; align-items: center; gap: var(--kj-sp-3); padding: 10px 14px; background: var(--kj-white); border: 0.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-xl); color: inherit; transition: border-color var(--kj-transition-fast); }
.op:active { border-color: var(--kj-gold); }
.op__body { flex: 1; min-width: 0; }
.op__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-weight: var(--kj-fw-medium); }
.op__title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op__title small { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); font-weight: var(--kj-fw-normal); white-space: nowrap; }
.op__sum { font-size: var(--kj-fs-sm); color: var(--kj-gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op__end { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.op__end .amt { font-size: var(--kj-fs-md); font-weight: var(--kj-fw-medium); }
.op--session .prow__avatar { background: var(--kj-info-soft); color: var(--kj-info-deep); }
.op--cancelled { opacity: .65; }
.ops-more { margin-top: var(--kj-sp-4); }