/* Cards — flat matte surfaces */
.card { background: var(--bg2); border-radius: 18px; padding: 20px; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: none; }
.card-sm { padding: 14px; }
.stat-card { background: var(--bg2); border-radius: 18px; padding: 18px; border: 1px solid var(--border); box-shadow: none; }
.stat-val { font-size: 26px; font-weight: 600; margin: 4px 0; word-break: break-word; overflow-wrap: break-word; }
@media(max-width:640px) { .stat-val { font-size: 20px; } }
.stat-lbl { font-size: 12px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* Buttons — solid matte, no gradient, no glow */
.btn { background: var(--accent, #6366F1); color: #fff; border: none; border-radius: 12px; padding: 12px 20px; cursor: pointer; font-size: 14px; font-weight: 500; transition: opacity .15s, transform .1s; box-shadow: none; }
.btn:hover { opacity: .88; }
.btn:active { transform: scale(0.97); }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; box-shadow: none; }
.btn-primary { background: var(--accent, #6366F1); color: #fff; box-shadow: none; }
.bs { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 10px 18px; cursor: pointer; font-size: 14px; font-weight: 500; transition: opacity .15s, transform .1s, border-color .15s; }
.bs:hover { border-color: var(--line-2, rgba(255,255,255,.08)); }
.bs:active { transform: scale(0.97); }
.bs.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.bs.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
.btn-danger { background: var(--red); color: #fff; border: none; border-radius: 12px; padding: 10px 18px; cursor: pointer; font-size: 14px; font-weight: 600; box-shadow: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.gh { background: transparent; color: var(--text); border: none; cursor: pointer; font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.gh:hover { background: var(--bg3); }

/* Forms — flat matte inputs, no glow */
input, select, textarea {
  background: var(--bg3, var(--panel));
  color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.05));
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
input:hover, select:hover, textarea:hover {
  border-color: var(--line-2, rgba(255,255,255,.08));
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 0 0 2px rgba(99,102,241,.10);
}
input::placeholder, textarea::placeholder { color: var(--muted, #6B7A96); }
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto; appearance: auto;
  width: 18px; height: 18px; padding: 0; border-radius: 4px;
  accent-color: var(--accent, #6366F1);
  cursor: pointer; flex-shrink: 0;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7A96'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
/* Green text for filled entry form fields */
.tpl-field:not([readonly]):not(:placeholder-shown) { color: #22c55e !important; }
input.tpl-field:focus:not([readonly]) { color: #22c55e !important; border-color: #22c55e; }
textarea.tpl-field:not(:placeholder-shown) { color: #22c55e !important; }
/* Labels — NOT bold, NOT bright */
label { font-size: 13px; color: var(--text-2, #9FB0CC); margin-bottom: 6px; display: block; font-weight: 500; }
.form-input {
  background: var(--bg3, var(--panel));
  color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.05));
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color .2s ease;
  box-shadow: none;
}
.form-input:hover { border-color: var(--line-2, rgba(255,255,255,.08)); }
.form-input:focus { border-color: rgba(99,102,241,.35); box-shadow: 0 0 0 2px rgba(99,102,241,.10); }
.form-input::placeholder { color: var(--muted, #6B7A96); }
hr, .divider { border: none; border-top: 1px solid var(--line, rgba(255,255,255,.05)); margin: 16px 0; }
.fg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.frow { display: flex; gap: 10px; align-items: flex-end; }
/* Inline row that NEVER stacks on mobile — use for Amount+Currency, Date pairs */
.inline-row { display: flex; gap: 8px; flex-wrap: nowrap; }
.inline-row input, .inline-row select, .inline-row textarea { width: auto !important; }
.inline-row .fg { flex: 1; min-width: 0; margin-bottom: 0; }
.inline-row .fg-fixed { flex: 0 0 auto; min-width: 0; margin-bottom: 0; }
@media(max-width:640px) { .frow, .form-row { flex-direction: column; grid-template-columns: 1fr; } }
@media(max-width:640px) { input, select, textarea { font-size: 16px !important; border-radius: 10px !important; } }
@media(max-width:640px) { .inline-row input, .inline-row select { font-size: 16px !important; } }

/* Tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted-2, var(--muted)); font-size: 11px; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line, var(--border)); text-transform: uppercase; letter-spacing: .06em; }
td { padding: 10px; border-bottom: 1px solid var(--line, var(--border)); vertical-align: middle; word-break: break-word; overflow-wrap: break-word; color: var(--text-2, var(--text)); }
tr:last-child td { border-bottom: none; }
tr.row-selected td { background: rgba(108,99,255,.1) !important; }
/* Amount cells: allow wrapping and reduce font on mobile for very large numbers */
td[style*="font-weight:700"], td[style*="font-weight: 700"] {
  overflow-wrap: break-word;
  word-break: normal;
}
@media(max-width:640px) {
  td { font-size: 13px; padding: 8px 6px; }
  td[style*="font-weight:700"], td[style*="font-weight: 700"] {
    font-size: 12px;
  }
}
.show-mobile { display: none; }
.mobile-label { display: none; }
@media(max-width:640px) { .hide-mobile { display: none; } .show-mobile { display: block !important; } .mobile-label { display: block; } }
/* Hero other-currency panel: stack below main balance on small screens */
@media(max-width:520px) {
  .hero-flex { flex-direction: column !important; }
  .other-cur-panel { flex-direction: row !important; overflow-x: auto; min-width: 0 !important; gap: 8px; padding-bottom: 2px; }
  .other-cur-panel > div { flex-shrink: 0; min-width: 120px; }
}

/* Badge — calm, production style */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
.badge-green  { background: var(--green-bg,  rgba(127,224,208,.12)); color: var(--green);  border-color: rgba(127,224,208,.18); }
.badge-red    { background: var(--red-bg,    rgba(208,120,120,.12)); color: var(--red);    border-color: rgba(208,120,120,.18); }
.badge-yellow { background: var(--gold-bg,   rgba(214,185,122,.12)); color: var(--amber);  border-color: rgba(214,185,122,.18); }
.badge-purple { background: rgba(108,99,255,.10); color: var(--accent); border-color: rgba(108,99,255,.2); }
.badge-blue   { background: var(--blue-bg,   rgba(143,168,214,.12)); color: var(--blue, var(--accent)); border-color: rgba(143,168,214,.18); }
.badge-gray   { background: rgba(255,255,255,.05); color: var(--muted); border-color: rgba(255,255,255,.08); }

/* Action menu — v1 style */
.action-menu { position: relative; display: inline-block; }
.action-menu-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 18px; }
.action-dropdown { display: none; position: fixed; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; min-width: 150px; z-index: 9000; box-shadow: 0 8px 24px rgba(0,0,0,.10); max-height: 70vh; overflow-y: auto; }
.action-dropdown.open { display: block; }
.action-dropdown button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 10px 16px; cursor: pointer; font-size: 13px; }
.action-dropdown button:hover { background: var(--bg3); }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.10); animation: fadeIn .2s; }

/* Modal — v1 style */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9100; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background: var(--bg2); border-radius: 18px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; border: 1px solid var(--border); box-shadow: none; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
@media(max-width:640px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { max-height: 92vh; border-radius: 18px 18px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); max-width: 100vw; width: 100%; animation: slideUp .22s ease; }
}

/* Nav badge */
.nav-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ── Dashboard Tip Card ───────────────────────────────────────── */
.dash-tip { background:var(--bg3); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:9px 14px; font-size:13px; color:var(--muted); margin-bottom:14px; display:flex; align-items:center; gap:10px; }

/* ── Contact avatar colors ────────────────────────────────────── */
.contact-avatar { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; text-shadow:0 1px 2px rgba(0,0,0,.4); }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:4px; justify-content:center; padding:16px 0 4px; flex-wrap:wrap; }
.pg-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:5px 11px; cursor:pointer; font-size:13px; font-weight:500; }
.pg-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.pg-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pg-btn:disabled { opacity:.4; cursor:default; }

/* ── Currency ledger tabs ─────────────────────────────────────── */
.currency-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.currency-tab { background:var(--bg3); border:1px solid var(--border); color:var(--muted); border-radius:20px; padding:4px 14px; cursor:pointer; font-size:12px; font-weight:600; transition:all .15s; }
.currency-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }