@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── CASH Brand tokens ─────────────────────────────────────────────────────── */
:root {
  --md-primary-fg-color:        #1a1a2e;
  --md-primary-fg-color--light: #16213e;
  --md-primary-fg-color--dark:  #0f0e17;
  --md-accent-fg-color:         #e94560;
  --md-typeset-a-color:         #e94560;

  --cash-navy:   #1a1a2e;
  --cash-coral:  #e94560;
  --cash-surface: #f8f9fc;
  --cash-border:  #e2e8f0;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:    #16213e;
  --md-default-bg-color:    #0f0e17;
  --cash-surface: #1e2028;
  --cash-border:  #2d3147;
}

/* ─── Header ────────────────────────────────────────────────────────────────── */
.md-header {
  background-color: var(--cash-navy);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* ─── Tabs ──────────────────────────────────────────────────────────────────── */
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--cash-coral) !important;
  font-weight: 600;
}

/* ─── Accent / links ────────────────────────────────────────────────────────── */
.md-typeset a {
  color: var(--cash-coral);
}
.md-typeset a:hover {
  color: #c73652;
}

/* ─── Tables ────────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.md-typeset table:not([class]) th {
  background: var(--cash-surface);
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ─── Admonitions ───────────────────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-left-width: 4px;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.md-button--primary {
  background-color: var(--cash-navy) !important;
  border-color: var(--cash-navy) !important;
  color: #fff !important;
}
.md-button--primary:hover,
.md-button--primary:focus {
  background-color: var(--cash-coral) !important;
  border-color: var(--cash-coral) !important;
}

/* ─── Step list ─────────────────────────────────────────────────────────────── */
.md-typeset ol.steps > li {
  padding: 0.5rem 0 0.5rem 0.5rem;
  border-left: 3px solid var(--cash-coral);
  margin-bottom: 0.75rem;
}

/* ─── Role badge ────────────────────────────────────────────────────────────── */
.role-agent    { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 600; background: #e3f2fd; color: #1565c0; }
.role-manager  { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 600; background: #f3e5f5; color: #6a1b9a; }
.role-admin    { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 600; background: #fff3e0; color: #e65100; }

/* ─── Role switcher (announce bar) ─────────────────────────────────────────── */
.cash-role-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.cash-role-label { color: rgba(255,255,255,0.7); font-weight: 500; }
.cash-role-current { color: #fff; font-weight: 700; min-width: 5rem; }
.cash-role-buttons { display: flex; gap: 0.25rem; }
.cash-role-btn {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cash-role-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.cash-role-btn--active {
  background: var(--cash-coral);
  border-color: var(--cash-coral);
  color: #fff;
}