/* Bank Account Transactions — page-specific additions on top of the shared vx design system.
   Loaded globally via app.js alongside vx-design-system.css (see rationale there).
   NOTE: several class names here (.account-carousel, .account-carousel-item, .account-card,
   .active-account, .account-settings-btn, .account-actions-dropdown, .carousel-nav) are
   referenced by assets/controllers/account_carousel_controller.js and Bootstrap dropdown JS —
   do not rename them. */

/* ===== Page shell — one rounded card wrapping header, accounts, action bar & register =====
   overflow is intentionally visible (not hidden) so the account cards' Bootstrap "dropup"
   settings menus can escape the card bounds like they did in the original markup. Horizontal
   carousel clipping is handled on .account-carousel-wrapper instead. Top/bottom are white
   (header / pagination) so the rounded corners stay clean without clipping. */
.tx-shell { background: #fff; border: 1px solid #E3E8F0; border-radius: 16px; }
.tx-shell-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid #EEF1F6; flex-wrap: wrap; }
.tx-shell-title { font-size: 20px; font-weight: 800; color: #1E2A63; }
.tx-shell-alerts { padding: 16px 24px 0; }

/* ===== Account carousel ===== */
.tx-accounts { position: relative; padding: 22px 44px; border-bottom: 1px solid #EEF1F6; }
/* clip paged-out cards horizontally, but keep the vertical axis visible so the
   dropup settings menu can extend above the card without being cut off. */
.account-carousel-wrapper { overflow-x: clip; overflow-y: visible; }
.account-carousel { display: flex; gap: 20px; transition: transform 0.3s ease; }
.account-carousel-item { flex: 0 0 calc(33.333% - 14px); min-width: calc(33.333% - 14px); position: relative; }
@media (max-width: 991px) { .account-carousel-item { flex: 0 0 calc(50% - 10px); min-width: calc(50% - 10px); } }
@media (max-width: 767px) { .account-carousel-item { flex: 0 0 100%; min-width: 100%; } }

.account-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #E7ECF4; border-radius: 14px; padding: 18px 20px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.account-card:hover { border-color: #C9D6EC; box-shadow: 0 8px 20px -10px rgba(20,30,70,.22); transform: translateY(-2px); }
.account-card.active-account { border-color: #3B6EF6; box-shadow: 0 6px 20px -8px rgba(59,110,246,.35); }
.account-card.active-account .tx-acct-name { color: #3B6EF6; }

.tx-acct-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tx-acct-name { font-size: 16px; font-weight: 800; color: #1E2A63; }
.tx-acct-mask { font-size: 12.5px; color: #8892A8; margin-top: 2px; }
.tx-sync-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 20px; font-size: 11.5px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.tx-sync-badge.is-synced { background: #E7EEFF; color: #3B6EF6; }
.tx-sync-badge.is-manual { background: #F1F4FA; color: #8892A8; }

.tx-acct-type { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #94A0B8; margin: 14px 0 12px; text-transform: uppercase; }

.tx-acct-balances { display: flex; gap: 24px; }
.tx-balance { flex: 1; min-width: 0; }
.tx-balance.tx-balance-bank { border-left: 1px solid #EEF1F6; padding-left: 24px; }
.tx-balance-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #94A0B8; margin-bottom: 5px; }
.tx-balance-amt { font-size: 19px; font-weight: 800; }
.tx-balance-amt.pos { color: #1FA463; }
.tx-balance-amt.neg { color: #E5484D; }
.tx-balance-date { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #94A0B8; margin-top: 4px; }
.tx-balance-date i { opacity: .75; cursor: help; }

.tx-acct-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; padding-right: 34px; border-top: 1px solid #F1F4F9; }
.tx-acct-footer-info { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #94A0B8; min-width: 0; }
.tx-acct-footer-info i { margin-right: 3px; }
.tx-acct-footer-info .tx-warn { color: #B47A08; }
.tx-acct-footer-info .tx-danger { color: #E5484D; }

/* carousel nav arrows */
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #E3E8F0; box-shadow: 0 6px 18px -6px rgba(20,30,70,.28); display: flex; align-items: center; justify-content: center; color: #3B6EF6; cursor: pointer; }
.carousel-nav:hover { background: #3B6EF6; color: #fff; border-color: #3B6EF6; }
.carousel-nav-prev { left: 8px; }
.carousel-nav-next { right: 8px; }

/* gear settings dropdown — kept OUTSIDE the card link so clicking it never navigates */
.account-actions-dropdown { position: absolute; bottom: 18px; right: 20px; z-index: 20; }
.account-settings-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: #B4BECF; cursor: pointer; padding: 0; transition: background-color .15s, color .15s; }
.account-settings-btn:hover, .account-settings-btn:focus, .account-settings-btn.show { background: #F1F4FA; color: #3D486A; }
.account-actions-dropdown .dropdown-menu { min-width: 214px; border: 1px solid #E7ECF4; border-radius: 11px; box-shadow: 0 18px 44px -12px rgba(20,30,70,.28); padding: 6px; z-index: 10000; }
.account-actions-dropdown .dropdown-item { padding: 8px 12px; font-size: 13.5px; border-radius: 8px; color: #3D486A; transition: background-color .12s; }
.account-actions-dropdown .dropdown-item:hover { background: #F5F8FF; color: #1C2540; }
.account-actions-dropdown .dropdown-item i { width: 18px; margin-right: 6px; color: #94A0B8; }
.account-actions-dropdown .dropdown-item.text-warning:hover { color: #B47A08; }
.account-actions-dropdown .dropdown-item.text-success:hover { color: #1FA463; }
.account-actions-dropdown .dropdown-divider { margin: 6px 4px; border-color: #EEF1F6; }

/* ===== Action bar (Add Transaction / filters + segmented review tabs) ===== */
.tx-actionbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 24px; flex-wrap: wrap; }
.tx-actionbar-left { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 260px; }
.tx-actionbar-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.tx-btn-dark { background: #1E2A63; color: #fff; }
.tx-btn-dark:hover { background: #16204D; color: #fff; }

.tx-segmented { display: inline-flex; background: #F1F4FA; border: 1px solid #E7ECF4; border-radius: 10px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.tx-segment { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: #8892A8; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tx-segment:hover { color: #3D486A; }
.tx-segment.active { background: #fff; color: #1E2A63; box-shadow: 0 1px 3px rgba(20,30,70,.12); }
.tx-seg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px; background: #EAECF6; color: #5B6BD6; font-size: 11px; font-weight: 800; }

/* ===== Filter form (collapsible, driven by filter-toggle controller) ===== */
.tx-filter-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 14px 16px; background: #F7F9FC; border: 1px solid #EEF1F6; border-radius: 12px; }
.tx-filter-form .input-bordered, .tx-filter-form .form-control { height: 42px; padding: 0 14px; border: 1px solid #D9E0EC; border-radius: 10px; font-size: 14px; color: #1C2540; background: #fff; min-width: 200px; }

/* ===== Transaction register (grid table) ===== */
.tx-table-head { display: grid; grid-template-columns: 100px 1fr 1.2fr 1fr 90px; padding: 12px 24px; background: #F7F9FC; border-top: 1px solid #EEF1F6; border-bottom: 1px solid #EEF1F6; }
.tx-th { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #7A869E; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
.tx-th.tx-right { justify-content: flex-end; text-align: right; }
.tx-th a { color: inherit; text-decoration: none; text-transform: uppercase; }
.tx-th a:hover { color: #3B6EF6; }
.tx-th svg { flex-shrink: 0; }

.tx-table-row { display: grid; grid-template-columns: 100px 1fr 1.2fr 1fr 90px; align-items: center; padding: 13px 24px; border-bottom: 1px solid #F1F4F9; }
.tx-table-row:hover { background: #F9FBFE; }

.tx-cell-date { font-size: 13.5px; font-weight: 700; color: #3D486A; }
.tx-cell-desc { min-width: 0; }
.tx-desc-main { font-size: 14px; font-weight: 700; color: #1C2540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-desc-sub { font-size: 12px; color: #94A0B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-cell-amount { font-size: 14px; font-weight: 800; text-align: right; }
.tx-cell-amount.pos { color: #1FA463; }
.tx-cell-amount.neg { color: #1C2540; }
.tx-cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.tx-cat-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.tx-pending-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 20px; background: #F1F4FA; color: #8892A8; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

/* inline category editor chrome inside the grid cell (internals/targets untouched) */
.tx-cell-category { min-width: 0; }
.tx-cell-category .inline-category-editor { position: relative; }
.tx-cell-category .category-display { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.tx-cell-category .tx-cat-label { font-size: 13.5px; color: #3D486A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-cell-category .autocomplete-dropdown { position: absolute; top: 100%; left: 0; z-index: 1002; min-width: 200px; background: #fff; border: 1px solid #E7ECF4; border-radius: 10px; box-shadow: 0 18px 44px -12px rgba(20,30,70,.28); }

/* extra icon-button color variants (base + primary/info/secondary live in shared/invoices CSS) */
.vx-icon-btn-success { background: #E4F6EC; color: #1FA463; }
.vx-icon-btn-success:hover { background: #1FA463; color: #fff; }
.vx-icon-btn-locked { background: #F1F4FA; color: #B4BECF; cursor: not-allowed; }

/* pagination wrapper */
.tx-pagination { padding: 18px 24px; }

/* ===== Add Bank Account chooser modal ===== */
.tx-addbank-subtitle { font-size: 13px; color: #8892A8; margin-top: 2px; }
.tx-addbank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .tx-addbank-grid { grid-template-columns: 1fr; } }

.tx-addbank-option { border: 1.5px solid #E3E8F0; border-radius: 14px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.tx-addbank-option:hover { color: inherit; }
.tx-addbank-option:first-child:hover { border-color: #3B6EF6; box-shadow: 0 12px 28px -16px rgba(59,110,246,.5); }
.tx-addbank-option:last-child:hover { border-color: #1E2A63; box-shadow: 0 12px 28px -16px rgba(30,42,99,.4); }

.tx-addbank-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tx-addbank-icon-plaid { background: #EAF0FF; color: #3B6EF6; }
.tx-addbank-icon-manual { background: #EEF1F6; color: #1E2A63; }

.tx-addbank-option-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #1E2A63; }
.tx-addbank-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: #1FA463; background: #E6F6EE; padding: 3px 7px; border-radius: 5px; }
.tx-addbank-option-desc { font-size: 13px; color: #6B7690; line-height: 1.55; margin-top: 6px; }
.tx-addbank-option-cta { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.tx-addbank-cta-plaid { color: #3B6EF6; }
.tx-addbank-cta-manual { color: #1E2A63; }

/* ===== Add Manual Account page ===== */
.vx-form-help { font-size: 12px; color: #94A0B8; margin-top: 6px; }
.tx-sidebar-help { font-size: 12.5px; color: #8892A8; line-height: 1.5; margin-bottom: 16px; }
.tx-currency-input { position: relative; }
.tx-currency-input .vx-input { padding-left: 22px; }
.tx-currency-prefix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #A9B4C8; font-size: 14px; pointer-events: none; }

.tx-manual-notice { display: flex; align-items: flex-start; gap: 12px; background: #FFF8EC; border: 1px solid #F4E3BE; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: #7A5B12; line-height: 1.55; }
.tx-manual-notice b { color: #6A4E0C; }
.tx-manual-notice-icon { color: #C88A0A; flex-shrink: 0; margin-top: 1px; }

.tx-connect-later { background: #EAF0FF; border: 1px solid #CFDDFB; border-radius: 16px; padding: 20px 22px; }
.tx-connect-later-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 800; color: #1E2A63; margin-bottom: 8px; }
.tx-connect-later-title svg { color: #3B6EF6; }
.tx-connect-later-desc { font-size: 13px; color: #42527A; line-height: 1.55; margin-bottom: 14px; }
.tx-connect-later-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #3B6EF6; background: none; border: none; padding: 0; cursor: pointer; }

@media (max-width: 767px) {
    .tx-actionbar { flex-direction: column; }
    .tx-segmented { width: 100%; }
    .tx-segment { flex: 1; justify-content: center; }
}