/* ============================================================
   Inbox / postings — Honey design system (Phase 2).
   Token-driven; shared components live in components.css.
   Note: .posting* and .posting-counterparty* are shared with the
   posting show/detail views and the assign-transaction modal.
   ============================================================ */
.posting {
    margin-bottom: 1rem;
}

/* Surface card per posting row (inbox list). The modal/minimal use of
   _posting_card omits .posting--card to stay flat inside the dialog. */
.posting--card .posting__content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem;
    transition: border-color 0.15s ease;
}
.posting--card .posting__content:hover {
    border-color: var(--border-strong);
}

.posting__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Bordered variant (e.g. inside the assign-transaction modal). */
.posting__content--bordered {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.posting__main {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-width: 0;
}

.posting__body {
    flex: 1;
    margin-top: -2px;
    min-width: 0;
}

.posting__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    gap: 0.5rem;
}

.posting__subject {
    flex: 1;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent-strong);
    min-width: 0;
}

.posting__time {
    color: var(--txt-subtle);
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.posting__metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.posting__attachments {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--txt-subtle);
    font-size: 0.875rem;
}

.posting__expense, .posting__transaction {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--accent-strong);
}

/* Delete (trash) button — token-driven destructive pill. */
.posting__delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    color: var(--neg);
    background: var(--neg-soft);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.posting__delete-btn:hover {
    opacity: 0.8;
}

.posting__avatar, .counterparty-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: white;
    font-weight: 600;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.posting__avatar {
    cursor: pointer;
}

.posting__avatar--detail, .counterparty-avatar--detail {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    margin-top: 0;
}

.posting-counterparty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.posting-counterparty__info {
    display: flex;
    flex-direction: row;
    min-width: 0;
    overflow: hidden;
}

.posting-counterparty__name {
    font-weight: bold;
    flex-shrink: 0;
}

.posting-counterparty__email {
    color: var(--txt-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.posting-counterparty__info--sm { font-size: var(--txt-sm); }
.posting-counterparty__info--lg { font-size: var(--txt-lg); }

/* Inbox empty state — surface card matching the redesign mockup. */
.inbox-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--txt);
    border-radius: var(--radius-3xl);
    padding: var(--space-14) var(--space-6);
    text-align: center;
}

/* Rounded icon badge atop the empty state. */
.inbox-empty__badge {
    background: var(--accent-soft);
    color: var(--accent-strong);
    margin-inline: auto;
    display: flex;
    width: var(--space-16);
    height: var(--space-16);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    font-size: var(--txt-2xl);
}
.inbox-empty__title {
    margin-top: var(--space-5);
    font-size: var(--txt-xl);
    font-weight: var(--weight-black);
}
.inbox-empty__body {
    margin-inline: auto;
    margin-top: var(--space-2);
    max-width: 28rem;
    font-size: var(--txt-sm);
}

/* Address pill with copy button inside the empty state. */
.inbox-empty__pill {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--txt);
    margin-inline: auto;
    margin-top: var(--space-5);
    display: flex;
    max-width: 24rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    padding: var(--space-2-5) var(--space-4);
}
.inbox-empty__addr {
    font-weight: var(--weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-full);
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--txt-xs);
    font-weight: var(--weight-bold);
    cursor: pointer;
}
.inbox-copy-btn:focus { outline: none; }

/* ---------- Assign-transaction modal ---------- */
.assign-modal {
    background: var(--surface);
    color: var(--txt);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
}
.assign-modal__inner {
    padding: var(--space-6);
    position: relative;
}
.assign-modal__title {
    font-size: var(--txt-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
}
.assign-modal__search { margin-bottom: var(--space-4); }
.assign-modal__spinner {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
}
.assign-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.assign-modal__btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--txt-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
}
.assign-modal__btn:focus { outline: none; }
.assign-modal__btn:disabled { opacity: 0.5; }
.assign-modal::backdrop {
    background: rgb(0 0 0 / 0.5);
}

.assign-modal__close {
    color: var(--txt-subtle);
    transition: color 0.15s ease;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1);
    cursor: pointer;
}
.assign-modal__close:hover {
    color: var(--txt);
}

/* Search input inside the modal (mirrors .cat-search). */
.assign-search {
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--txt);
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
    font-size: var(--txt-sm);
}
.assign-search:focus {
    outline: none;
    border-color: var(--border-strong);
}
.assign-search::placeholder {
    color: var(--txt-subtle);
}

/* Search results list. */
.assign-results {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
}
.assign-results--scroll {
    max-height: 15rem;
    overflow-y: auto;
}
.assign-result {
    border-top: 1px solid var(--border);
    transition: background-color 0.15s ease;
    display: flex;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}
.assign-result:first-child {
    border-top: none;
}
.assign-result:hover {
    background: var(--surface-2);
}
.assign-result__main {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.assign-result__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.assign-result__line {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.assign-result__radio {
    accent-color: var(--accent);
    margin-right: var(--space-3);
}
.assign-result__title {
    color: var(--txt);
    font-weight: 500;
}
.assign-result__amount {
    color: var(--txt);
}
.assign-result__date {
    color: var(--txt-subtle);
    font-size: var(--txt-sm);
    margin-left: var(--space-6);
}

.assign-empty {
    border: 1px dashed var(--border-strong);
    border-radius: 0.75rem;
    color: var(--txt-subtle);
    text-align: center;
    padding-block: var(--space-8);
}
.assign-hint {
    color: var(--txt-subtle);
}
.assign-hint--sm { font-size: var(--txt-xs); }
.assign-hint--prompt {
    text-align: center;
    padding-block: var(--space-6);
    font-style: italic;
}
.assign-hint__icon {
    font-size: 2rem;
    display: block;
    margin-inline: auto;
    margin-bottom: var(--space-2);
}

.assign-modal__actions {
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

/* Search loading spinner (uses border-bottom color). */
.accent-spinner {
    border-bottom-color: var(--accent);
}
.assign-spinner {
    border-radius: var(--radius-full);
    width: var(--space-4);
    height: var(--space-4);
    border-bottom: 2px solid;
    animation: inbox-spin 1s linear infinite;
}

/* ============================================================
   Layout classes (replace former Tailwind utility soup).
   Page scaffold reuses .expense-page; cards reuse .expense-panel.
   ============================================================ */

/* ---------- Inbox index header + status filter ---------- */
.inbox-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
@media (max-width: 48rem) {
    .inbox-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
.inbox-seg {
    display: inline-flex;
    gap: var(--space-1);
    border-radius: var(--radius-full);
    padding: var(--space-1);
    width: fit-content;
}
.inbox-seg__btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: var(--space-1-5) var(--space-5);
    font-size: var(--txt-xs);
    font-weight: var(--weight-bold);
}
.inbox-copy-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--weight-bold);
    vertical-align: baseline;
    cursor: pointer;
}
.inbox-copy-inline:hover { text-decoration: underline; }
.inbox-copy-inline:focus { outline: none; }
.inbox-copy-icon { font-size: var(--txt-xs); }
.inbox-hint {
    margin-bottom: var(--space-5);
    font-size: var(--txt-sm);
}

/* ---------- Infinite-scroll controls + spinner ---------- */
.inbox-more {
    margin-top: var(--space-8);
    text-align: center;
}
.inbox-loading { padding-block: var(--space-4); }
.inbox-loading__note {
    font-size: var(--txt-sm);
    margin-top: var(--space-2);
}
.inbox-spinner {
    color: var(--accent-strong);
    display: block;
    width: var(--space-8);
    height: var(--space-8);
    margin-inline: auto;
    animation: inbox-spin 1s linear infinite;
}
@keyframes inbox-spin {
    to { transform: rotate(360deg); }
}
.inbox-spinner__track { opacity: 0.25; }
.inbox-spinner__head { opacity: 0.75; }

/* ---------- Posting detail (show page) ---------- */
.posting-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}
.posting-back-link:hover { opacity: 0.8; }
.posting-detail__title {
    margin-bottom: var(--space-4);
    font-size: var(--txt-2xl);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
}
.posting-detail__head {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
@media (max-width: 48rem) {
    .posting-detail__head {
        flex-direction: column;
        align-items: flex-start;
    }
}
.posting-label {
    font-size: var(--txt-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-1);
}
.posting-detail__assign {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.posting-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--txt-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
}
.posting-btn:focus { outline: none; }
.posting-warning {
    border-left: 4px solid var(--warn);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    border-radius: var(--radius);
    background: var(--warn-soft);
    color: var(--txt);
}
.posting-warning__title {
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
}
.posting-warning__list {
    list-style: disc;
    padding-left: var(--space-5);
}
.posting-attach-empty {
    font-style: italic;
    margin-bottom: var(--space-2);
}

/* Fade out animation for posting removal */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; height: 0; margin-bottom: 0; padding: 0; }
}

.posting.fade-out,
.posting[data-turbo-temporary] {
  animation: fadeOut 0.5s ease forwards;
}