:root {
  --orange: #f97316;
  --orange-dark: #ea580c;
  --orange-light: #fff4e6;
  --orange-soft: #ffe8cc;
  --ink: #3a2c1f;
  --muted: #9a8b7a;
}

* { font-family: "Kanit", "Segoe UI", sans-serif; }

body {
  background: var(--orange-light);
  color: var(--ink);
}

.navbar-brand,
h1, h2, h3, h4, h5 { font-weight: 600; }

.topbar {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.25);
}

.topbar h3 { margin: 0; font-weight: 700; }
.topbar .subtitle { opacity: .9; font-size: .9rem; }

.btn-orange {
  background: #fff;
  color: var(--orange-dark);
  border: none;
  font-weight: 600;
  border-radius: 10px;
}
.btn-orange:hover { background: var(--orange-soft); color: var(--orange-dark); }

.card-stat {
  border: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(154, 107, 58, .10);
  border-top: 4px solid var(--orange);
}
.card-stat .label { color: var(--muted); font-size: .85rem; font-weight: 500; }
.card-stat .value { font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.card-stat .value.accent { color: var(--orange-dark); }

.filter-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 14px rgba(154, 107, 58, .08);
}
.filter-card label { font-size: .82rem; font-weight: 500; color: var(--muted); }
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--orange-soft);
}
.form-control:focus, .form-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .15);
}

.table-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(154, 107, 58, .08);
}
.table-card .card-header {
  background: #fff;
  border-bottom: 1px solid var(--orange-soft);
  font-weight: 600;
  color: var(--ink);
}
table thead th {
  background: var(--orange);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  border: none;
}
table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
table thead th.sortable:hover { background: var(--orange-dark); }
.sort-icon { font-size: .75em; opacity: .6; margin-left: .3rem; }
.sort-icon.active { opacity: 1; }
table tbody tr:hover { background: var(--orange-light); }
tfoot td {
  font-weight: 700;
  background: var(--orange-soft);
  color: var(--ink);
}
.text-deposit { color: #16a34a; font-weight: 600; }
.text-withdraw { color: #dc2626; font-weight: 600; }

.footnote { color: var(--muted); font-size: .82rem; }

.btn-history {
  background: none;
  border: none;
  color: var(--orange-dark);
  margin-left: .4rem;
  padding: 0;
  font-size: 1rem;
  vertical-align: middle;
  cursor: pointer;
}
.btn-history:hover { color: var(--orange); }

.modal-content { border-radius: 16px; border: none; }
.modal-header { border-bottom: 1px solid var(--orange-soft); }
.history-table thead th { background: var(--orange); color: #fff; font-weight: 500; }
.badge-deposit { background: #dcfce7; color: #16a34a; }
.badge-withdraw { background: #fee2e2; color: #dc2626; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .topbar { box-shadow: none; }
  .card-stat, .table-card, .filter-card { box-shadow: none; }
}