:root {
  --navy: #0f2747;
  --navy-dark: #091b32;
  --blue: #e30613;
  --blue-dark: #b90410;
  --blue-soft: #fff0f1;
  --red: #e30613;
  --red-dark: #b90410;
  --graphite: #1f2937;
  --black: #0f2747;
  --bg: #f4f7fb;
  --line: #dde3ea;
  --text: #1f2937;
  --muted: #64748b;
  --good: #059669;
  --warn: #d97706;
  --bad: #dc2626;
  --shadow: 0 10px 28px rgba(15, 39, 71, .08);
}

body,
#view-dashboard {
  background: var(--bg);
  color: var(--text);
}

.login-shell {
  background:
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, .13), transparent 34%),
    linear-gradient(135deg, #f8fbff, #eaf0f7);
}

.login-card {
  border-top-color: var(--blue);
  box-shadow: 0 22px 55px rgba(15, 39, 71, .14);
}

.eyebrow,
.panel-kicker {
  color: var(--blue);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.primary {
  background: var(--blue);
  box-shadow: 0 5px 14px rgba(37, 99, 235, .18);
}

.primary:hover {
  background: var(--blue-dark);
}

.secondary {
  background: #e8edf3;
  color: var(--navy);
}

.sidebar,
.sidebar.topbar {
  background: linear-gradient(100deg, var(--navy-dark), var(--navy));
  border-color: var(--blue);
  box-shadow: 0 5px 20px rgba(9, 27, 50, .22);
}

.topbar .brand,
.topbar-user {
  border-color: rgba(255, 255, 255, .16);
}

.brand small,
.topbar nav button,
.topbar .logout {
  color: #c9d5e5;
}

nav button:hover,
nav button.active,
.topbar nav button:hover,
.topbar nav button.active,
.nav-group.open > button {
  background: var(--blue);
  color: #fff;
}

.nav-submenu,
.topbar nav .nav-submenu {
  background: var(--navy-dark);
  border-color: rgba(255, 255, 255, .13);
  border-bottom-color: var(--blue);
  box-shadow: 0 16px 32px rgba(9, 27, 50, .3);
}

main header {
  background: rgba(255, 255, 255, .96);
  border-color: var(--line);
  box-shadow: 0 2px 12px rgba(15, 39, 71, .04);
}

.menu {
  background: var(--blue-soft);
  color: var(--navy);
}

.card,
.panel,
.table-panel,
.filters,
.performance-card,
.goal-card,
.command-panel,
.command-kpi,
.command-period,
.tracking-access-card,
.tracking-config-card {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.card .accent,
.metric,
.bar span {
  background: var(--blue);
  border-color: var(--blue);
}

.card.good .accent { background: var(--good); }
.card.warn .accent { background: var(--warn); }
.card.bad .accent { background: var(--bad); }

th {
  background: #f1f5f9;
  color: #526175;
}

th,
td {
  border-bottom-color: #e6ebf1;
}

tbody tr:hover {
  background: #f8fbff;
}

.badge.ACTIVE,
.badge.PAID,
.badge.RECEIVED,
.badge.CONFIRMED {
  background: #e1f7ef;
  color: var(--good);
}

.badge.DELINQUENT,
.badge.OVERDUE,
.badge.EXPIRED,
.badge.CANCELED,
.badge.DELETED,
.badge.REFUNDED {
  background: #fee9e9;
  color: var(--bad);
}

.badge.PENDING,
.badge.PAYABLE,
.badge.SUSPENDED {
  background: #fff4dc;
  color: var(--warn);
}

.action {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.action.pay {
  background: #e1f7ef;
  color: var(--good);
}

.filter-clear,
.error {
  color: var(--bad);
}

dialog {
  border-top-color: var(--blue);
}

.flash {
  background: var(--navy);
  border-left-color: var(--blue);
}

.quick-actions button:hover {
  border-color: var(--blue);
  color: var(--blue-dark);
}

.quick-actions i,
.goal-edit {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.daily-legend i,
.received-line {
  background: var(--good);
  stroke: var(--good);
}

.spent-line {
  stroke: var(--bad);
}

.daily-legend i.spent {
  background: var(--bad);
}

.goal-ring {
  background: conic-gradient(var(--blue) var(--progress), #e7ecf2 0);
}

.goal-track span,
.ranking-list span > i em {
  background: var(--blue);
}

.command-kpi.brand > i,
.billing-item.issued > i {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.projection-item.balance {
  background: var(--navy);
  border-color: var(--navy);
}

.portfolio-bar span.active,
.portfolio-legend i.active {
  background: var(--good);
}

.portfolio-bar span.late,
.portfolio-legend i.late,
.expense-bars i em {
  background: var(--bad);
}

.tracking-open {
  background: var(--blue);
}

.tracking-open:hover {
  background: var(--blue-dark);
}

@media (max-width: 900px) {
  .topbar nav {
    background: var(--navy);
    border-bottom-color: var(--blue);
  }

  .nav-submenu {
    background: var(--navy-dark);
    border-left-color: var(--blue);
  }
}
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}
.password-field input {
  width: 100%;
  padding-right: 48px !important;
}
.password-field .password-toggle {
  position: absolute;
  right: 6px;
  width: 38px;
  min-width: 38px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent !important;
  color: #4b5563;
  box-shadow: none;
  cursor: pointer;
  font-size: 18px;
}
.password-field .password-toggle:hover,
.password-field .password-toggle:focus-visible {
  background: #f2f4f7 !important;
  outline: 2px solid #e1251b;
}