/*
  Common UI kit - white theme (loaded on every page by layouts/application).
  Wrap a page in <div class="ui"> to use it; nothing here touches old pages.

  Parts:  .ui-head (title + buttons)    .ui-btn / .ui-btn--primary
          .ui-stats > .ui-stat          .ui-card
          .ui-toolbar, .ui-search, .ui-field
          .ui-tabs > .ui-tab (+ .ui-count)
          .ui-table-wrap > .ui-table    .ui-avatar, .ui-tag, .ui-amt, .ui-icon-btn
          .ui-foot (+ will_paginate)    .ui-empty
  Also styles the shortcut bar (.tp) from layouts/_theme-panel.
*/
.ui, .tp {
  --ui-ink: #1a2330;
  --ui-navy: #1f3650;
  --ui-muted: #5b6573;
  --ui-faint: #8a93a0;
  --ui-line: #e4e8ee;
  --ui-line-2: #eef1f5;
  --ui-field: #d7dce3;
  --ui-soft: #f3f5f8;
  --ui-page: #f6f7f9;
  --ui-gold: #d4a356;
  --ui-teal: #3a8a86;
  --ui-rust: #c2622d;
  --ui-dr: #23774a;
  --ui-cr: #a4471b;
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ui {
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--ui-font); font-size: 13px; color: var(--ui-ink);
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui label { margin: 0; font-weight: 400; }
.ui h1, .ui h2 { margin: 0; font-family: inherit; color: var(--ui-navy); }
.ui a { color: var(--ui-navy); }
.ui .num, .ui-amt, .ui-stat-value { font-variant-numeric: tabular-nums; }

/* ---------- page head ---------- */
.ui-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ui-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ui-title h1 { font-size: 20px; font-weight: 700 !important; }
.ui-sub { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- buttons ---------- */
.ui-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--ui-field); border-radius: 8px;
  background: #fff; color: var(--ui-ink) !important;
  font: 600 13px/1 var(--ui-font); text-decoration: none !important; white-space: nowrap; cursor: pointer;
}
.ui-btn:hover { background: var(--ui-soft); }
.ui-btn--primary { background: var(--ui-navy); border-color: var(--ui-navy); color: #fff !important; }
.ui-btn--primary:hover { background: #172a40; }
.ui-btn:focus-visible, .ui-icon-btn:focus-visible, .ui-tab:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }

/* ---------- stat cards ---------- */
.ui-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ui-stat {
  --accent: var(--ui-navy);
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: #fff; border: 1px solid var(--ui-line); border-top: 3px solid var(--accent); border-radius: 10px;
}
.ui-stat--teal { --accent: var(--ui-teal); }
.ui-stat--rust { --accent: var(--ui-rust); }
.ui-stat--gold { --accent: var(--ui-gold); }
.ui-stat-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--ui-muted); font-weight: 500; }
.ui-stat-value { font-size: 18px; font-weight: 700; color: var(--ui-navy); }
.ui-stat-value.is-dr { color: var(--ui-dr); }
.ui-stat-value.is-cr { color: var(--ui-cr); }
.ui-stat-note { font-size: 11px; color: var(--ui-muted); }

/* ---------- card ---------- */
.ui-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; }
.ui-card > * { min-width: 0; }

/* ---------- toolbar: search + fields ---------- */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.ui-search { position: relative; flex: 1 1 280px; }
.ui-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ui-faint); pointer-events: none; }
.ui-input, .ui-select {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--ui-field); border-radius: 8px; background: #fff;
  font: 400 13px var(--ui-font); color: var(--ui-ink);
}
.ui-search .ui-input { padding-left: 34px; }
.ui-input:focus, .ui-select:focus { outline: none; border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(31, 54, 80, .12); }
.ui-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ui-muted); font-weight: 400; }
.ui-field .ui-select { width: auto; min-width: 140px; }

/* ---------- tabs ---------- */
.ui-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ui-line); }
.ui-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 10px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ui-muted) !important; font-weight: 500; text-decoration: none !important; white-space: nowrap;
}
.ui-tab:hover { color: var(--ui-ink) !important; }
.ui-tab.is-on { color: var(--ui-navy) !important; font-weight: 700; border-bottom-color: var(--ui-navy); }
.ui-count { padding: 0 6px; border-radius: 999px; background: var(--ui-soft); color: var(--ui-muted); font-size: 11px; font-weight: 600; line-height: 18px; }
.ui-tab.is-on .ui-count { background: var(--ui-navy); color: #fff; }

/* ---------- table ---------- */
.ui-table-wrap { border: 1px solid var(--ui-line); border-radius: 10px; overflow-x: auto; }
.ui-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.ui-table th {
  padding: 10px 12px; background: var(--ui-page); border-bottom: 1px solid var(--ui-line);
  color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; white-space: nowrap;
}
.ui-table td { padding: 12px; border-bottom: 1px solid var(--ui-line-2); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: #fafbfc; }
.ui-table .num { text-align: right; }
.ui-table .dim, .ui .dim { color: var(--ui-faint); }

.ui-party { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.ui-party-name { font-weight: 600; color: var(--ui-ink) !important; text-decoration: none !important; }
.ui-party-name:hover { color: var(--ui-navy) !important; text-decoration: underline !important; }
.ui-party-sub { color: var(--ui-muted); }
.ui-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: var(--ui-navy);
}
.ui-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ui-tag { padding: 1px 6px; border-radius: 4px; background: var(--ui-soft); color: var(--ui-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.ui-tag--blue  { background: #e8eef6; color: var(--ui-navy); font-weight: 600; }
.ui-tag--gold  { background: #f8eedb; color: #7a5410; font-weight: 600; }
.ui-tag--green { background: #e6f3ec; color: var(--ui-dr); font-weight: 600; }
.ui-tag--rust  { background: #f8ebe3; color: var(--ui-cr); font-weight: 600; }

.ui-icon-text { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ui-icon-text svg { color: var(--ui-faint); flex: none; }
.ui-add-link { color: var(--ui-faint) !important; }
.ui-add-link:hover { color: var(--ui-navy) !important; }

.ui-amt { display: block; font-weight: 700; white-space: nowrap; }
.ui-amt--dr { color: var(--ui-dr); }
.ui-amt--cr { color: var(--ui-cr); }
.ui-amt--zero { color: var(--ui-faint); }
.ui-amt-note { display: block; font-size: 11px; color: var(--ui-muted); }

.ui-row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.ui-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; color: var(--ui-muted) !important;
}
.ui-icon-btn:hover { background: var(--ui-soft); color: var(--ui-navy) !important; }
.ui-icon-btn--danger:hover { background: #fbeceb; color: #c0392b !important; }

.ui-empty { padding: 28px 12px; text-align: center; color: var(--ui-muted); }

/* ---------- footer + will_paginate ---------- */
.ui-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--ui-muted); }
.ui-foot .pagination { display: flex; gap: 4px; margin: 0; }
.ui-foot .pagination > a,
.ui-foot .pagination > span,
.ui-foot .pagination > em {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ui-field); border-radius: 8px; background: #fff;
  color: var(--ui-ink); font-style: normal; font-weight: 600; text-decoration: none;
}
.ui-foot .pagination > a:hover { background: var(--ui-soft); }
.ui-foot .pagination .current { background: var(--ui-navy); border-color: var(--ui-navy); color: #fff; }
.ui-foot .pagination .disabled { color: var(--ui-faint); }

@media (max-width: 767px) {
  .ui-field { flex: 1 1 140px; }
  .ui-field .ui-select { width: 100%; min-width: 0; }
}

/* ---------- shortcut bar (layouts/_theme-panel) ---------- */
.tp {
  display: flex; align-items: stretch;
  margin: 0 0 12px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--ui-line); border-radius: 12px;
  font-family: var(--ui-font);
  overflow-x: auto; scrollbar-width: thin;
}
.tp *, .tp *::before, .tp *::after { box-sizing: border-box; }
.tp-group { display: flex; flex-direction: column; gap: 4px; padding: 0 10px; flex: none; }
.tp-group + .tp-group { border-left: 1px solid var(--ui-line); }
.tp-group:first-child { padding-left: 0; }
.tp-label { padding-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-faint); }
.tp-items { display: flex; gap: 2px; }
.tp-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 76px; padding: 8px 10px 6px; border-radius: 8px;
  color: var(--ui-ink) !important; font-size: 12px; font-weight: 500; line-height: 1.2;
  text-decoration: none !important; white-space: nowrap; transition: background-color .15s;
}
.tp-item:hover { background: var(--ui-soft); }
.tp-item:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 1px; }
.tp-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: var(--ui-soft); color: var(--ui-navy);
}
.tp-item:hover .tp-icon { background: #e8ecf1; }
.tp-item.is-on { background: var(--ui-navy); color: #fff !important; }
.tp-item.is-on .tp-icon { background: rgba(255, 255, 255, .14); color: var(--ui-gold); }
.tp-badge {
  position: absolute; top: -7px; left: 18px; min-width: 18px; padding: 1px 6px;
  border: 2px solid #fff; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.3;
}
.tp-badge--navy { background: var(--ui-navy); color: #fff; }
.tp-badge--gold { background: var(--ui-gold); color: #3a2a0c; }