/*
 * Invytx GearLedger visual refresh.
 * Presentation only: no routes, IDs, links, data operations, or scripts.
 */
:root {
  --bg-primary: #050a0f;
  --bg-secondary: #08131c;
  --bg-card: #0b1721;
  --bg-card-strong: #101e29;
  --border-subtle: #22323f;
  --border-strong: #384b59;
  --text-primary: #f4f7f8;
  --text-secondary: #9eabb6;
  --accent-primary: #a8b83f;
  --accent-muted: #71802a;
  --status-success: #a8b83f;
  --bg: #050a0f;
  --panel: #0b1721;
  --panel-2: #101e29;
  --text: #f4f7f8;
  --muted: #9eabb6;
  --line: #22323f;
  --accent: #a8b83f;
  --ok: #83c99a;
  --radius: 12px;
}

html { color-scheme: dark; }

body {
  background:
    linear-gradient(30deg, transparent 24%, rgba(168,184,63,.025) 25%, rgba(168,184,63,.025) 26%, transparent 27%, transparent 74%, rgba(168,184,63,.025) 75%, rgba(168,184,63,.025) 76%, transparent 77%),
    linear-gradient(150deg, transparent 24%, rgba(168,184,63,.018) 25%, rgba(168,184,63,.018) 26%, transparent 27%, transparent 74%, rgba(168,184,63,.018) 75%, rgba(168,184,63,.018) 76%, transparent 77%),
    radial-gradient(circle at 82% 12%, rgba(168,184,63,.1), transparent 25rem),
    linear-gradient(135deg, #02060a 0%, #050a0f 45%, #071520 100%) !important;
  background-size: 64px 112px, 64px 112px, auto, auto !important;
  color: #f4f7f8;
}

header {
  padding: 14px 24px;
  background: rgba(3,9,14,.92) !important;
  border-color: #22323f !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
}

h1 {
  letter-spacing: .07em !important;
  text-transform: uppercase;
  font-weight: 900 !important;
}

h2 { letter-spacing: -.01em; }

.brand img,
.login-logo {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.42));
}

.brand-kicker {
  color: #a8b83f !important;
  letter-spacing: .16em !important;
  font-weight: 900 !important;
}

main { grid-template-columns: 238px minmax(0,1fr); }

nav,
.sidebar {
  background: linear-gradient(180deg, rgba(5,15,23,.98), rgba(3,10,16,.92)) !important;
  border-color: #22323f !important;
  padding: 18px 12px;
}

nav button,
.nav button {
  position: relative;
  border-color: transparent;
  border-radius: 9px;
}

nav button::before,
.nav button::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 2px 0;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

nav button:hover:not(:disabled),
.nav button:hover:not(:disabled) {
  color: #f4f7f8;
  background: rgba(255,255,255,.035);
}

nav button.active,
.nav button.active {
  background: linear-gradient(90deg, rgba(168,184,63,.18), rgba(168,184,63,.05)) !important;
  border-color: rgba(168,184,63,.4) !important;
  box-shadow: inset 3px 0 0 #a8b83f;
}

nav button.active::before,
.nav button.active::before {
  background: #a8b83f;
  border-color: #a8b83f;
}

section.content,
main > section { padding: clamp(16px,2.2vw,28px); }

.card {
  background: linear-gradient(145deg, rgba(16,30,41,.96), rgba(9,21,30,.94)) !important;
  border: 1px solid #22323f !important;
  border-radius: 12px !important;
  padding: 18px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}

.metric,
.metric-card {
  background: linear-gradient(155deg, rgba(12,27,38,.98), rgba(7,17,25,.96)) !important;
  border: 1px solid #22323f !important;
  border-radius: 10px !important;
  min-height: 92px;
  padding: 14px !important;
  position: relative;
  overflow: hidden;
}

.metric::after,
.metric-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 2px;
  background: #a8b83f;
  opacity: .75;
}

.metric strong,
.metric-value {
  font-size: 1.72rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em;
}

.profile-card,
.receipt-card {
  background: rgba(8,19,29,.92) !important;
  border-color: #22323f !important;
  border-radius: 10px !important;
}

.profile-card.default {
  border-color: rgba(168,184,63,.75) !important;
  box-shadow: inset 3px 0 0 #a8b83f;
}

button {
  border-radius: 9px !important;
  font-weight: 800 !important;
  transition: transform .12s, background .12s, border-color .12s;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #384b59;
}

button.primary {
  color: #050b12 !important;
  border-color: #bdce4e !important;
  background: linear-gradient(135deg, #b3c446, #89982f) !important;
  box-shadow: 0 6px 18px rgba(168,184,63,.16);
}

input,
select,
textarea {
  border-color: #22323f !important;
  border-radius: 9px !important;
  background: #06111a !important;
  color: #f4f7f8 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0 !important;
  border-color: #a8b83f !important;
  box-shadow: 0 0 0 3px rgba(168,184,63,.12);
}

table {
  background: rgba(7,17,25,.58) !important;
  border-radius: 8px;
  overflow: hidden;
}

th {
  color: #9eabb6 !important;
  background: #06111a !important;
  font-size: .7rem !important;
  letter-spacing: .075em !important;
}

th,
td { border-color: #22323f !important; padding: 10px 9px !important; }
tbody tr:hover { background: rgba(168,184,63,.035); }

.pill {
  border-color: #22323f !important;
  background: #06111a !important;
  font-weight: 700;
  letter-spacing: .035em;
}

.pill.cloud {
  color: #e1eba5 !important;
  border-color: rgba(168,184,63,.55) !important;
  background: rgba(168,184,63,.12) !important;
}

.login .card,
.login-shell .card,
.loading-shell .card {
  padding: 28px !important;
  border-color: rgba(168,184,63,.32) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
}

::selection { background: rgba(168,184,63,.32); color: #fff; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  nav,
  .sidebar { padding: 10px; }
}