/* Coin Flow App Styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

.app-container {
  min-height: 100vh;
}

.pointer {
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  background-color: rgb(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.05);
}

/* Disclosure button: an accessible toggle styled to read as inline text
   (used for expand/collapse table rows in the trends charts). */
.disclosure-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 0.875em;
}

.disclosure-btn:focus-visible {
  outline: 2px solid rgb(13 110 253 / 50%);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Main Content.
   Padding is deliberately not set here: <main> also carries .container-fluid
   and .py-4, and since the theme service injects Bootswatch after this file, a
   `padding` here loses horizontally to .container-fluid and vertically to
   .py-4's !important. Only the width cap actually applies. */
.main-content {
  max-width: 1600px;
  margin: 0 auto;
}

/* Bootstrap handles background, border-radius, and padding (via .card-body). */
.card {
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.card h2 {
  margin-bottom: 1rem;
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Account List */
.account-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bs-tertiary-bg);
  border-radius: 6px;
}

.account-name {
  font-weight: 500;
}

.account-balance {
  font-weight: 600;
  color: var(--bs-success);
}

/* Transaction List */
.transaction-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
}

.transaction-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.transaction-name {
  font-weight: 500;
}

.transaction-category {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.transaction-amount {
  font-weight: 600;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Responsive */
@media (width <= 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* iOS Safari auto-zooms any focused field rendered below 16px — and never
     zooms back out. The app leans on Bootstrap's -sm field sizes (0.875rem) in
     table rows and filter bars, so force 16px on touch-sized screens.
     Anchored under html[] because the theme service injects Bootswatch after
     this file; the extra element selector wins without needing !important. */
  html .form-control,
  html .form-select,
  html .form-control.form-control-sm,
  html .form-select.form-select-sm,
  html .searchable-select.form-select-sm .form-control {
    font-size: 16px;
  }

  /* Touch target size (WCAG 2.5.5). Icon-only actions in table rows and card
     headers are btn-sm, which lands around 24px — well under a fingertip.
     inline-flex + centring keeps the glyph put while the box grows.
     Anchored under html[] for the same Bootswatch load-order reason. */
  html .btn,
  html .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Bootstrap sizes check-style toggle buttons via their label, not the input. */
  html .btn-check + .btn {
    display: inline-flex;
  }

  /* Nested scroll regions fight touch momentum, and this one also reserves
     200px of dead space below the rows. Let the page do the scrolling on a
     phone. Anchored under html[] because .transactions-scroll is declared
     further down this file — at equal specificity that one would win.
     (.tags-cell's touch minimum lives in transactions.css — the class is
     scoped there, so a global selector would never match it.) */
  html .transactions-scroll {
    max-height: none;
    overflow-y: visible;
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   Utility classes (replacing static inline styles; see no-inline-styles).
   Bootstrap's own .w-auto / .text-nowrap / .text-truncate / .bg-light are
   reused directly where they fit.
   --------------------------------------------------------------------------- */

/* Dim backdrop for the app's custom (non-Bootstrap-backdrop) modals */
.modal-dim {
  background-color: rgb(0 0 0 / 50%);
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.word-break-all {
  word-break: break-all;
}

/* Slim progress bars. Compound selectors so they win over Bootstrap's own
   .progress height, which is injected (via the theme service) after app.css. */
.progress.progress-h-8 {
  height: 8px;
}

.progress.progress-h-4 {
  height: 4px;
}

/* Fixed widths */
.w-70px {
  width: 70px;
}

.w-100px {
  width: 100px;
}

.w-120px {
  width: 120px;
}

.min-w-250px {
  min-width: 250px;
}

/* Color swatch input (e.g. tag/category color picker). Compound selector to win
   over Bootstrap's .form-control-color sizing. */
.form-control-color.color-swatch-input {
  width: 3rem;
  height: 38px;
}

/* Tiny button text. Compound selector to win over Bootstrap's .btn-sm font-size. */
.btn.fs-tiny {
  font-size: 0.7rem;
  line-height: 1;
}

.fs-3rem {
  font-size: 3rem;
}

/* Fixed table layout */
.table-fixed {
  table-layout: fixed;
}

/* Vertically scrollable regions */
.scroll-y-120 {
  max-height: 120px;
  overflow-y: auto;
}

.scroll-y-150 {
  max-height: 150px;
  overflow-y: auto;
}

.scroll-y-300 {
  max-height: 300px;
  overflow-y: auto;
}

.transactions-scroll {
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: 200px;
}

/* Bootswatch dark themes compile btn-close with a white SVG. When
   data-bs-theme=dark is also set (which we do for Bootstrap color-var support),
   Bootswatch's own [data-bs-theme=dark] rule inverts that white X to black.
   Reset the filter so the native white icon shows. html[] specificity (0,2,1)
   beats Bootswatch's [data-bs-theme=dark] (0,2,0) even though Bootswatch loads
   after this file. */
html[data-bootswatch-dark] .btn-close {
  filter: none;
}