/* ============================================================
   FinLedger — ledger styling
   Every money value uses mono tabular numerals, with a thin rail on
   the left of each amount showing DR or CR. That rail is the panel's
   signature: when you scan a column of numbers, your eye picks up the
   direction without having to read it.
   ============================================================ */

:root {
  --ink: #0F1729;
  --line: #DCE2EC;
  --cr: #0B7A55;
  --dr: #C2352A;
  --accent: #2B4EE6;
}

.num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* signature: ledger rail */
.rail {
  display: inline-block;
  padding-left: .55rem;
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.rail-cr { border-left-color: var(--cr); color: var(--cr); }
.rail-dr { border-left-color: var(--dr); color: var(--dr); }

.pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 3px; text-transform: uppercase;
}
.pill-cr { background: #E4F3EC; color: var(--cr); }
.pill-dr { background: #FAE9E7; color: var(--dr); }
.pill-mut{ background: #EEF1F6; color: #5A6784; }
.pill-warn{ background: #FDF0DC; color: #B4690E; }

/* ---------- form controls ---------- */
.fld {
  width: 100%; padding: .5rem .65rem; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--ink); outline: none;
}
.fld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,78,230,.14); }
.fld:disabled { background: #F4F6FA; color: #7A879F; }
.lbl { display:block; font-size: 11.5px; font-weight: 600; letter-spacing:.02em;
       text-transform: uppercase; color:#5A6784; margin-bottom: .3rem; }

.btn { display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
       padding:.5rem .9rem; font-size:13.5px; font-weight:500; border-radius:6px;
       border:1px solid transparent; cursor:pointer; white-space:nowrap; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background: var(--ink); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#1A2540; }
.btn-accent { background: var(--accent); color:#fff; }
.btn-accent:hover:not(:disabled) { background:#2340C4; }
.btn-ghost { background:#fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background:#F4F6FA; }
.btn-danger { background:#fff; border-color:#EBC3BF; color: var(--dr); }
.btn-danger:hover:not(:disabled) { background:#FCF2F1; }
.btn-sm { padding:.3rem .6rem; font-size:12.5px; }

.card { background:#fff; border:1px solid var(--line); border-radius:8px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- DataTables ---------- */
table.dataTable { width:100% !important; border-collapse:collapse; font-size:13px; }
table.dataTable thead th {
  background:#F6F8FB; border-bottom:1px solid var(--line) !important;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#5A6784; padding:.6rem .7rem; white-space:nowrap;
}
table.dataTable tbody td { padding:.55rem .7rem; border-bottom:1px solid #EEF1F6; vertical-align:top; }
table.dataTable tbody tr:hover { background:#F8FAFD; }
table.dataTable tbody tr.selected { background:#EEF2FE !important; }
.dt-container { font-size:13px; }
.dt-search input, .dt-length select { border:1px solid var(--line); border-radius:6px; padding:.35rem .5rem; }
/* Pagination.
   DataTables applies its own rules at `div.dt-container .dt-paging
   .dt-paging-button.current` with !important, which is more specific than
   a plain class selector. So instead of fighting those rules we set its
   own CSS variables. That keeps the current page button dark with white
   text — previously both went black and the number was invisible. */
div.dt-container {
  --dt-paging-button_color:                  #0F1729;
  --dt-paging-button_background:             #fff;
  --dt-paging-button_border:                 1px solid #DCE2EC;
  --dt-paging-button_border-radius:          6px;
  --dt-paging-button_padding:                .3rem .7rem;

  --dt-paging-button_color-current:          #ffffff;
  --dt-paging-button_background-current:     #0F1729;
  --dt-paging-button_border-current:         1px solid #0F1729;

  --dt-paging-button_color-current-hover:      #ffffff;
  --dt-paging-button_background-current-hover: #1A2540;
  --dt-paging-button_border-current-hover:     1px solid #1A2540;

  --dt-paging-button_color-hover:            #0F1729;
  --dt-paging-button_background-hover:       #F4F6FA;
  --dt-paging-button_border-hover:           1px solid #DCE2EC;

  --dt-paging-button_color-disabled:         #9AA6BC;
  --dt-paging-button_background-disabled:    #fff;
  --dt-paging-button_border-disabled:        1px solid #EEF1F6;

  --dt-paging-button_box-shadow:             none;
  --dt-paging-button_box-shadow-active:      none;
}
div.dt-container .dt-paging .dt-paging-button { margin-left: 3px; font-size: 12.5px; }
div.dt-container .dt-paging .dt-paging-button.current { font-weight: 600; }
div.dt-container .dt-layout-row { margin:.5rem 0; }

.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- progress ---------- */
.bar { height:8px; background:#E3E8F1; border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--accent); width:0; transition:width .25s ease; }

/* ---------- toast ---------- */
.toast { background:#fff; border:1px solid var(--line); border-left-width:3px;
         border-radius:6px; padding:.7rem .85rem; font-size:13px;
         box-shadow:0 6px 24px rgba(15,23,41,.12); }
.toast-ok  { border-left-color: var(--cr); }
.toast-err { border-left-color: var(--dr); }
.toast-info{ border-left-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}