:root {
  --app-bg: #f5f7fb;
  --app-primary: #1f4f8f;
  --app-primary-dark: #163a6a;
  --app-radius: 0.875rem;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 31, 79, 143;
  --bs-border-radius: var(--app-radius);
}

html,
body {
  min-height: 100%;
  background: var(--app-bg);
}

body {
  color: #172033;
}

.app-shell {
  min-height: 100dvh;
}

.app-main {
  min-height: 100dvh;
  padding-bottom: 5rem;
}

.app-hero {
  background:
    linear-gradient(135deg, rgba(31, 79, 143, 0.98), rgba(22, 58, 106, 0.98));
}

.app-brand-mark {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 800;
  letter-spacing: 0;
}

.app-stat {
  border-radius: var(--app-radius);
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.app-stat__value {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
}

.app-stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

.app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(var(--app-nav-items, 3), 1fr);
  padding: 0.45rem max(0.75rem, env(safe-area-inset-right)) max(0.45rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.app-bottom-nav__item {
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  color: #667085;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
}

.app-bottom-nav__item i {
  font-size: 1.25rem;
}

.app-bottom-nav__item.active {
  color: var(--app-primary);
}

.app-empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin-inline: auto;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: var(--app-primary);
  background: rgba(var(--bs-primary-rgb), 0.08);
  font-size: 1.5rem;
}

.app-login-card {
  max-width: 26rem;
}

.app-page-header {
  background: #fff;
}

.app-table-card {
  overflow: hidden;
}

.app-form-panel {
  max-width: 48rem;
}

.btn {
  font-weight: 700;
}

.btn:active {
  transform: scale(0.98);
}