:root {
  --so-navy: #1d2d5a;
  --so-navy-dark: #16224a;
  --so-green: #2f9e44;
  --so-light: #f6f8fb;
}

html, body { height: 100%; }
.app-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--so-light);
}

.app-navbar .brand-title {
  color: var(--so-navy);
  font-size: 1.25rem;
}
.app-navbar .nav-link {
  color: var(--so-navy);
  font-size: 0.85rem;
  font-weight: 600;
}
.app-navbar .nav-link i { font-size: 1.1rem; }
.app-navbar .nav-link.active { color: var(--so-green); }
.accent-bar { height: 3px; background: var(--so-green); }

.page-title {
  color: var(--so-navy);
  font-weight: 700;
}
.page-title i { margin-right: .4rem; }

/* KPI cards, like the Fixed Assets dashboard */
.kpi-card {
  background: #fff;
  border: 1px solid #e4e8ef;
  border-radius: .5rem;
}
.kpi-card .icon-tile {
  width: 48px; height: 48px;
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
}
.kpi-card .kpi-label { color: #6b7280; font-size: .85rem; }
.kpi-card .kpi-value { color: var(--so-navy); font-size: 1.4rem; font-weight: 700; }
.kpi-card .kpi-sub { color: #9aa2b1; font-size: .78rem; }
.kpi-card .card-footer {
  background: #fbfcfe;
  border-top: 1px solid #eef1f6;
  font-size: .85rem;
}
.tile-navy { background: var(--so-navy); }
.tile-green { background: #2f9e44; }
.tile-amber { background: #e8a13c; }
.tile-red { background: #d9534f; }
.tile-teal { background: #3bc9db; }

/* navy section header bars */
.section-bar {
  background: var(--so-navy);
  color: #fff;
  border-radius: .4rem .4rem 0 0;
  padding: .5rem .9rem;
  font-weight: 600;
}
.section-bar i { margin-right: .4rem; }
.section-body {
  background: #fff;
  border: 1px solid #e4e8ef;
  border-top: 0;
  border-radius: 0 0 .4rem .4rem;
}

.table-sm td, .table-sm th { font-size: .85rem; }
.amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.badge-matched { background: #d3f0d9; color: #1e7a32; }
.badge-flagged { background: #fdeccf; color: #a4700f; }
.badge-approved { background: var(--so-navy); color: #fff; }
.badge-unmatched { background: #f3d6d5; color: #94302c; }

.app-footer {
  background: var(--so-navy-dark);
  color: #cdd5e8;
}
.app-footer em { color: #9fe0ae; }

.detail-box {
  background: #f8fafc;
  border: 1px solid #e4e8ef;
  border-radius: .4rem;
}

.sortable-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th.sortable:hover { text-decoration: underline; }
.sortable-table th.sortable .sort-icon { font-size: .7rem; opacity: .7; }

/* Searchable GL-account picker (macro in partials/_gl_picker.html).
   Menu options are built client-side from /gl-accounts.json, so only the
   filtered subset is ever in the DOM. */
.gl-picker { position: relative; }
.gl-picker-menu {
  position: absolute; z-index: 1050; top: calc(100% + 2px); left: 0;
  width: 30rem; max-width: calc(100vw - 2rem); max-height: 15.5rem; overflow-y: auto;
  background: #fff; border: 1px solid #c7ced8; border-radius: .35rem;
  box-shadow: 0 .5rem 1.25rem rgba(20, 34, 74, .18);
  font-size: .75rem; line-height: 1.25; padding: .15rem 0;
}
.gl-picker-menu.flip-right { left: auto; right: 0; }
.gl-picker-opt {
  display: grid; grid-template-columns: 8.5rem 1fr; align-items: baseline;
  padding: .18rem .3rem .18rem .55rem; cursor: pointer;
}
.gl-picker-opt:hover, .gl-picker-opt.active { background: var(--so-light); }
.gl-picker-opt .gl-picker-code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-weight: 600; font-size: .72rem; letter-spacing: -.01em; white-space: nowrap;
  color: var(--so-navy); border-right: 1px solid #e6eaf1; padding-right: .55rem;
}
.gl-picker-opt .gl-picker-name {
  color: #5a6472; padding-left: .55rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-picker-opt mark { background: #fff3bf; color: inherit; padding: 0; border-radius: 2px; }
.gl-picker-opt.active .gl-picker-name { color: #3d4652; }
.gl-picker-menu .gl-picker-empty,
.gl-picker-menu .gl-picker-more {
  padding: .3rem .55rem; color: #8a93a3; font-size: .7rem;
}
.gl-picker-menu .gl-picker-more { border-top: 1px solid #eef1f5; background: #fbfcfe; }