/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root { --line: #e2e2e2; --muted: #6b7280; --accent: #2563eb; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111; margin: 0; line-height: 1.5; }

.page { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: 1.25rem; }
.page-header h1 { margin: 0; font-size: 1.4rem; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.muted { color: var(--muted); font-size: .9rem; }
.empty { color: var(--muted); padding: 1rem 0; }

.card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; }

.button, button.button { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: .45rem .8rem; font-size: .9rem; cursor: pointer; text-decoration: none; }
.button-secondary { background: #f3f4f6; color: #111; border: 1px solid var(--line); }

.flash { padding: .6rem 1rem; font-size: .9rem; }
.flash-notice { background: #ecfdf5; color: #065f46; }
.flash-alert { background: #fef2f2; color: #991b1b; }

table.txns { width: 100%; border-collapse: collapse; }
table.txns th, table.txns td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; }
.flag-chip { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.badge { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; background: #f3f4f6; color: #374151; }
/* A transaction deleted in YNAB after the question went out. Dimmed rather than
   hidden: the contact was shown it, so the thread has to keep showing it too. */
.badge-gone { background: #fdecea; color: #8a2c22; }
table.txns tr.is-gone td { opacity: .55; }
table.txns tr.is-gone td:last-child { opacity: 1; }
.filters { display: flex; gap: .5rem; margin-bottom: 1rem; }
.filters a { text-decoration: none; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: #374151; font-size: .85rem; }
.filters a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.amount-negative { color: #991b1b; }
.amount-positive { color: #065f46; }
.action-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: #f9fafb; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .75rem; }
.action-bar select, .action-bar input[type=text] { padding: .35rem .5rem; }