/* Theme variables for the Remnants Treasury Command palette. */
:root {
  --bg: #050505;
  --bg-2: #0d0b08;
  --panel: rgba(18, 16, 13, 0.92);
  --panel-2: rgba(28, 23, 17, 0.9);
  --gold: #c6a77b;
  --gold-2: #f2d29a;
  --gold-dim: rgba(198, 167, 123, 0.18);
  --gold-line: rgba(198, 167, 123, 0.32);
  --text: #f7efe2;
  --muted: #9e927e;
  --danger: #ff6b6b;
  --success: #79d98c;
  --warn: #ffd166;
  --ink: #090807;
  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --radius: 22px;
}

/* Global reset and base page behavior. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(198,167,123,.22), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(198,167,123,.12), transparent 24%),
    linear-gradient(135deg, #030303 0%, #090806 46%, #161108 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
  z-index: -1;
}

/* Layout container and top section styling. */
.shell {
  width: min(1520px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 24px 0 60px;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(198,167,123,.18), transparent 42%),
    linear-gradient(145deg, rgba(18,16,13,.96), rgba(5,5,5,.86));
  box-shadow: var(--shadow);
  padding: 26px;
  min-height: 190px;
}

.hero::after {
  content: "RMC";
  position: absolute;
  right: 24px;
  bottom: -38px;
  color: rgba(198,167,123,.05);
  font-size: clamp(96px, 14vw, 220px);
  font-weight: 950;
  letter-spacing: -12px;
  line-height: .8;
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 800;
  background: rgba(198,167,123,.1);
  border: 1px solid rgba(198,167,123,.28);
  border-radius: 999px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

.spark { width: 8px; height: 8px; border-radius: 99px; background: var(--gold); box-shadow: 0 0 18px var(--gold); }

h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 86px);
  letter-spacing: -0.07em;
  line-height: .86;
  max-width: 900px;
}

.hero p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 830px;
  margin: 18px 0 0;
  position: relative;
  z-index: 1;
}

.action-card {
  border: 1px solid var(--gold-line);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(198,167,123,.13), rgba(16,13,9,.88));
  box-shadow: var(--shadow);
  padding: 20px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.action-card h2 { margin: 0 0 8px; font-size: 22px; }
.action-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }

/* Site navigation pill-style menu. */
.nav {
  position: sticky;
  top: 12px;
  z-index: 9;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  margin: 18px 0;
  border: 1px solid rgba(198,167,123,.18);
  border-radius: 999px;
  background: rgba(5,5,5,.68);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}

.nav a, button, .btn {
  border: 0;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  transition: .18s ease;
  white-space: nowrap;
}

.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: #e9ddca;
  font-size: 13px;
}

.nav a:hover { background: rgba(198,167,123,.18); border-color: var(--gold-line); transform: translateY(-1px); }

.grid {
  display: grid;
  gap: 16px;
}

.stats { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
.stats > article { min-height: 180px; }
.two { grid-template-columns: 1.15fr .85fr; }
.three { grid-template-columns: repeat(3, 1fr); }
.four { grid-template-columns: repeat(4, 1fr); }

.panel {
  border: 1px solid rgba(198,167,123,.2);
  background:
    linear-gradient(145deg, rgba(198,167,123,.08), transparent 40%),
    var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.32);
  padding: 18px;
  overflow: hidden;
  position: relative;
}

.panel.soft { background: var(--panel-2); }

.panel h2, .panel h3 {
  margin: 0 0 14px;
  letter-spacing: -0.03em;
}

.panel h2 { font-size: 25px; }
.panel h3 { font-size: 18px; }

.stat {
  min-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; margin-bottom: 10px; }
.stat .value { font-size: clamp(25px, 2.9vw, 39px); font-weight: 950; letter-spacing: -0.06em; margin: 0 0 12px; }
.stat .hint { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.5; }

.good { color: var(--success); }
.bad { color: var(--danger); }
.gold { color: var(--gold-2); }
.warn { color: var(--warn); }

.progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}

.bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 22px rgba(198,167,123,.5);
}

/* Form layout and input field styling for dashboard controls. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
  align-items: end;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Standard form control appearance for inputs, selects, and textareas. */
input, select, textarea {
  width: 100%;
  color: var(--text);
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(198,167,123,.22);
  border-radius: 14px;
  padding: 11px 12px;
  font: inherit;
  outline: none;
  transition: .15s ease;
}

textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(198,167,123,.12); }
input[type="checkbox"] { width: auto; accent-color: var(--gold); }

/* Button styling used across actions, exports, and reset controls. */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  border-radius: 999px;
  padding: 10px 15px;
  background: linear-gradient(135deg, var(--gold), #8c6b43);
  color: #120d06;
  box-shadow: 0 14px 28px rgba(198,167,123,.18);
}

.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn.secondary { color: var(--text); background: rgba(255,255,255,.05); border: 1px solid rgba(198,167,123,.22); box-shadow: none; }
.btn.danger { color: #fff; background: rgba(255,107,107,.14); border: 1px solid rgba(255,107,107,.26); box-shadow: none; }
.btn.small { min-height: 34px; padding: 7px 10px; font-size: 12px; }

/* Table display styling for ledger, dues, and materials data. */
table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  font-size: 14px;
}

th, td { padding: 11px 10px; border-bottom: 1px solid rgba(198,167,123,.12); text-align: left; vertical-align: middle; }
th { color: var(--gold-2); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
tr:hover td { background: rgba(198,167,123,.045); }
.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(198,167,123,.14); }

/* Status pills to show paid, owed, partial, or exempt dues states. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(198,167,123,.2);
  background: rgba(198,167,123,.08);
  font-weight: 900;
  font-size: 12px;
  color: var(--gold-2);
  white-space: nowrap;
}

.pill.paid { color: var(--success); border-color: rgba(121,217,140,.32); background: rgba(121,217,140,.1); }
.pill.owe { color: var(--danger); border-color: rgba(255,107,107,.32); background: rgba(255,107,107,.1); }
.pill.partial { color: var(--warn); border-color: rgba(255,209,102,.28); background: rgba(255,209,102,.08); }
.pill.exempt { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }

.section { margin-top: 16px; }
.section-title { display:flex; justify-content:space-between; gap: 12px; align-items:flex-end; margin: 24px 0 12px; }
.section-title h2 { margin:0; font-size: clamp(25px, 3vw, 44px); letter-spacing:-.06em; }
.section-title p { margin:0; color:var(--muted); max-width: 720px; line-height:1.5; }

.callout {
  padding: 15px;
  border-radius: 18px;
  background: rgba(198,167,123,.08);
  border: 1px solid rgba(198,167,123,.2);
  color: #e8dbc6;
  line-height: 1.5;
}

/* Spreadsheet-style treasury ledger. */
.ledger-panel {
  padding: 14px;
}

.ledger-entry-grid {
  display: grid;
  grid-template-columns:
    minmax(130px, .7fr)
    minmax(170px, 1fr)
    minmax(180px, 1fr)
    minmax(220px, 1.4fr)
    minmax(130px, .7fr)
    minmax(130px, .7fr)
    auto;
  gap: 10px;
  align-items: end;
}

.ledger-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0;
}

.ledger-totals {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  min-height: 43px;
  padding: 8px 12px;
  border: 1px solid rgba(198,167,123,.16);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.ledger-table-wrap {
  max-height: 560px;
  overflow: auto;
  border-radius: 16px;
}

.ledger-table {
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
}

.ledger-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(15, 12, 8, .98);
  border-bottom: 1px solid rgba(198,167,123,.28);
}

.ledger-table td,
.ledger-table th {
  padding: 7px 8px;
}

.ledger-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.018);
}

.ledger-table tbody tr:hover td {
  background: rgba(198,167,123,.07);
}

.cell-input {
  width: 100%;
  min-height: 34px;
  border-radius: 9px;
  padding: 7px 8px;
  background: rgba(0,0,0,.18);
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
}

.cell-input:hover {
  border-color: rgba(198,167,123,.18);
  background: rgba(0,0,0,.28);
}

.cell-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,167,123,.11);
}

.money-cell {
  max-width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

/* Income / expense coloring for spreadsheet ledger rows. */
.ledger-table tbody tr.row-income td {
  background: rgba(121, 217, 140, 0.025);
}

.ledger-table tbody tr.row-expense td {
  background: rgba(255, 107, 107, 0.025);
}

.ledger-table tbody tr.row-income:hover td {
  background: rgba(121, 217, 140, 0.075);
}

.ledger-table tbody tr.row-expense:hover td {
  background: rgba(255, 107, 107, 0.075);
}

.ledger-table .cell-input.good,
.ledger-table .money-cell.good {
  color: var(--success) !important;
  border-color: rgba(121, 217, 140, 0.24);
  background: rgba(121, 217, 140, 0.08);
}

.ledger-table .cell-input.bad,
.ledger-table .money-cell.bad {
  color: var(--danger) !important;
  border-color: rgba(255, 107, 107, 0.24);
  background: rgba(255, 107, 107, 0.08);
}

.ledger-table .row-income .amount {
  color: var(--success);
}

.ledger-table .row-expense .amount {
  color: var(--danger);
}

/* Category color coding by transaction type. */
.category-income {
  color: var(--success) !important;
  border-color: rgba(121, 217, 140, 0.32) !important;
  background: rgba(121, 217, 140, 0.09) !important;
  font-weight: 900;
}

.category-expense {
  color: var(--danger) !important;
  border-color: rgba(255, 107, 107, 0.32) !important;
  background: rgba(255, 107, 107, 0.09) !important;
  font-weight: 900;
}

.category-opening {
  color: var(--gold-2) !important;
  border-color: rgba(198, 167, 123, 0.36) !important;
  background: rgba(198, 167, 123, 0.11) !important;
  font-weight: 900;
}

select option {
  background: #0d0b08;
  color: var(--text);
}

select option[value="Drug Sales"],
select option[value="Dues"],
select option[value="Donations"],
select option[value="Weapon Sales"],
select option[value="Fine Reimbursement"] {
  color: var(--success);
}

select option[value="Material Buys"],
select option[value="Withdrawal"],
select option[value="Weapon Buys"],
select option[value="Food & Drink"],
select option[value="Repairs"],
select option[value="Asset Taxes"],
select option[value="Miscellaneous Buys"] {
  color: var(--danger);
}

select option[value="Previous Month Balance"] {
  color: var(--gold-2);
}

.date-cell {
  min-width: 126px;
}

.category-cell {
  min-width: 160px;
}

.notes-cell {
  min-width: 220px;
}

.amount {
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mini-card {
  border-radius: 18px;
  border: 1px solid rgba(198,167,123,.16);
  background: rgba(0,0,0,.2);
  padding: 14px;
}
.mini-card strong { display:block; font-size: 20px; letter-spacing:-.04em; }
.mini-card span { color: var(--muted); font-size: 13px; }

.footer {
  margin-top: 30px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.right { text-align: right; }

/* Responsive layout adjustments for smaller screens. */
@media (max-width: 1180px) {
  .topbar, .two, .three, .four { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .action-card { min-width: auto; }
  .ledger-entry-grid,
  .ledger-toolbar { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .stats { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { padding: 20px; }
  .section-title { align-items: flex-start; flex-direction: column; }
  h1 { letter-spacing: -.05em; }
}