/* Transactions view: filters and table */

.txn-controls{
  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.txn-controls input[type="text"]{
  flex:1;
  min-width:200px;
  padding:9px 14px;
  border:1px solid var(--line-input);
  border-radius:9px;
  font-size:13px;
  font-family:inherit;
  background:var(--card);
}
.txn-controls select{
  appearance:none;
  background:var(--card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%236c7086" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 12px center;
  border:1px solid var(--line-input);
  border-radius:9px;
  padding:9px 30px 9px 14px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
}
table.txn-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
table.txn-table thead th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-faint);
  font-weight:600;
  padding:0 12px 10px;
  border-bottom:1px solid var(--line);
}
table.txn-table td{
  padding:11px 12px;
  border-bottom:1px solid var(--line-soft);
  color:var(--text);
  vertical-align:middle;
}
table.txn-table tbody tr:hover{background:var(--line-soft);}
td.amount-cell{font-family:var(--font-mono); font-weight:600; text-align:right; white-space:nowrap;}
td.date-cell{color:var(--text-dim); white-space:nowrap; font-family:var(--font-mono); font-size:12.5px;}
.table-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:18px 20px;
  overflow-x:auto;
}
.table-count{font-size:12px; color:var(--text-faint); margin:10px 2px 0;}

/* ---- Inline category picker ---- */

/* A category can be changed without leaving the table. The pill is a button
   opening the app's own menu rather than a <select>; js/render/categoryPicker.js
   carries the reason, which is the phone. Wired with one delegated listener on
   <tbody>, not one per row. */
.cat-cell{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.cat-pill{
  display:inline-block;
  border:1px solid transparent;
  border-radius:20px;
  padding:3px 22px 3px 9px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  line-height:1.45;
  text-align:left;
  cursor:pointer;
  /* A <select> truncated a long category name on its own. A button does not,
     and without this one stretches the column until the table scrolls. */
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  /* The row sets its hue through background-color, deliberately not the
     background shorthand — that reset this caret to none, which is why the
     control spent so long reserving 22px for an arrow it never drew. */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5"><path d="M1 1l3 3 3-3" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.cat-pill:hover{border-color:currentColor;}
/* focus-visible, not focus: a button keeps focus after a click, and a ring left
   sitting on the pill you just used reads as an error state. */
.cat-pill:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
.cat-pill.is-overridden{border-style:dashed; border-color:currentColor;}

/* Fixed, not absolute like the other two menus: .table-wrap is a scroll
   container for the six-column table, and an absolutely positioned descendant
   would be clipped at its edge. Coordinates come from the pill on open, so the
   inherited top/margin-top have to be cleared. */
.cat-menu{
  position:fixed;
  top:auto;
  margin-top:0;
  width:200px;
}
.cat-reset{
  border:none;
  background:transparent;
  color:var(--text-faint);
  font-size:11px;
  line-height:1;
  padding:3px 4px;
  border-radius:5px;
  cursor:pointer;
}
.cat-reset:hover{background:var(--line-soft); color:var(--text);}

.txn-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.txn-foot .table-count{margin:0 2px;}

/* ---- Row actions ---- */

.txn-actions{
  width:1%;
  white-space:nowrap;
  text-align:right;
}
.txn-action{
  border:none;
  background:transparent;
  color:var(--text-faint);
  font-size:12px;
  line-height:1;
  padding:5px 6px;
  border-radius:6px;
  cursor:pointer;
  /* Revealed on hover so the table stays calm to read, but always reachable by keyboard. */
  opacity:0;
  transition:opacity .12s ease, background .12s ease, color .12s ease;
}
.txn-table tbody tr:hover .txn-action,
.txn-action:focus-visible{opacity:1;}
.txn-action:hover{background:var(--line-soft); color:var(--text);}
.txn-delete:hover{background:var(--rust-soft); color:var(--rust);}

@media (hover: none){
  .txn-action{opacity:1;}   /* no hover on touch: never hide the only way to edit */
}

.txn-manual{
  display:inline-block;
  margin-left:7px;
  padding:1px 6px;
  border-radius:5px;
  background:var(--line-soft);
  color:var(--text-faint);
  font-family:var(--font-body);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  vertical-align:middle;
}

/* ---- Add / edit dialog ---- */

.txn-dialog{
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(17,18,28,0.35);
  padding:26px 26px 22px;
  width:min(400px, calc(100vw - 32px));
  background:var(--card);
  color:var(--text);
}
.txn-dialog::backdrop{background:rgba(17,18,28,0.34);}

.txn-dialog-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 20px;
}

.txn-field{display:flex; flex-direction:column; margin-bottom:15px;}
.txn-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
.txn-input{
  width:100%;
  padding:9px 13px;
  border:1px solid var(--line-input);
  border-radius:9px;
  font-size:13.5px;
  font-family:inherit;
  background:var(--card);
  color:var(--text);
}
.txn-input:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
}

.txn-direction{display:flex; gap:8px;}
.txn-direction label{
  flex:1;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid var(--line-input);
  border-radius:9px;
  font-size:13px;
  cursor:pointer;
}
.txn-direction label:has(input:checked){
  border-color:var(--teal);
  background:var(--teal-soft);
  color:var(--teal);
  font-weight:600;
}
.txn-direction input{accent-color:var(--teal); margin:0;}

/* Money in / money out is two options and reads well side by side. A list of
   accounts is however many you have, and side by side they squash to nothing —
   so the same control stacks when the choices are open-ended. */
.txn-direction.txn-stack{flex-direction:column;}
.txn-direction.txn-stack label{flex:none;}
/* A choice that is out of reach still shows, so nobody hunts for an option that
   used to be there — but it must not look pickable. */
.txn-direction label:has(input:disabled){
  opacity:0.5;
  cursor:default;
}
.txn-sub{
  margin-left:auto;
  font-size:11.5px;
  font-weight:400;
  color:var(--text-faint);
  /* A long file name shortens rather than pushing the account's own name out of
     the row: the name is what you are choosing between. */
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.txn-amount-wrap{position:relative;}
.txn-amount-prefix{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-faint);
  pointer-events:none;
}
/* Mono first, then the reserve: --money-pad is measured in this element's own
   `ch`, so the font has to be the one the symbol is drawn in. */
.txn-amount-wrap .txn-input{padding-left:var(--money-pad); font-family:var(--font-mono);}

/* The same arrangement for a date field, with the glyph on the trailing edge.
   Not drawn here: on a wide screen the browser supplies its own calendar
   indicator, and two of them is worse than none. css/responsive.css turns this
   on at the width where that indicator is taken away.

   --text-dim rather than --text-faint: an icon is a UI component and wants
   3:1 (WCAG 1.4.11), which faint clears on the dark card at 5.18:1 and misses
   on the light one at 2.85:1. Dim reads 4.88:1 and 6.94:1. */
.txn-date-wrap{position:relative;}
.txn-date-icon{
  display:none;
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-dim);
  /* The whole field opens the picker, so the glyph must not swallow the tap. */
  pointer-events:none;
}

.txn-dialog-error{
  background:var(--rust-soft);
  color:var(--rust);
  font-size:12.5px;
  line-height:1.5;
  padding:10px 12px;
  border-radius:9px;
  margin:0 0 14px;
}

/* Explains a dialog that asks a question rather than collecting a record —
   currently only the date-format one. --text-dim measures 4.88:1 on --card. */
.txn-dialog-note{
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.6;
  margin:-8px 0 18px;
}
.txn-dialog-note strong{
  color:var(--text);
  font-family:var(--font-mono);
  font-weight:500;
}

.txn-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:20px;
}


/* Marks a dialog field as optional, alongside its uppercase label. */
.txn-label-hint{
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
  color:var(--text-faint);
}