/* Shared button sizing for landing and auth ctas */
:root {
  --routeit-btn-radius: 15px;
}

.btn-ui {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  gap: 0.5rem;
  white-space: nowrap;
  line-height: 1;
  border-radius: var(--routeit-btn-radius);
}

.btn-ui-lg {
  height: 54px;
  min-height: 54px;
}

.btn-ui-md {
  height: 46px;
  min-height: 46px;
}

.btn-ui-sm {
  height: 38px;
  min-height: 38px;
}

.btn-ui > svg {
  flex-shrink: 0;
}

/* Dashboard density system */
.dashboard-shell {
  --dash-h1: 1.4rem;
  --dash-h2: 1.05rem;
  --dash-h3: 0.95rem;
  --dash-text-sm: 0.82rem;
  --dash-text-xs: 0.73rem;
  --dash-accent: #2548ab;
  --dash-accent-strong: #1a3278;
  --dash-accent-soft: #dbe7ff;
  --dash-accent-rgb: 37 72 171;
}

.dashboard-shell.dashboard-density-cozy {
  --dash-h1: 1.55rem;
  --dash-h2: 1.12rem;
  --dash-h3: 1rem;
  --dash-text-sm: 0.88rem;
  --dash-text-xs: 0.78rem;
}

.dashboard-shell [class~="text-3xl"] {
  font-size: calc(var(--dash-h1) + 0.3rem);
  line-height: 1.18;
}

.dashboard-shell [class~="text-2xl"] {
  font-size: var(--dash-h1);
  line-height: 1.22;
}

.dashboard-shell [class~="text-xl"] {
  font-size: var(--dash-h2);
  line-height: 1.28;
}

.dashboard-shell [class~="text-lg"] {
  font-size: var(--dash-h3);
  line-height: 1.32;
}

.dashboard-shell [class~="text-sm"] {
  font-size: var(--dash-text-sm);
  line-height: 1.35;
}

.dashboard-shell [class~="text-xs"] {
  font-size: var(--dash-text-xs);
  line-height: 1.3;
}

.dashboard-shell [class~="rounded-2xl"] {
  border-radius: 0.9rem;
}

.dashboard-shell [class~="rounded-xl"] {
  border-radius: 0.75rem;
}

.dashboard-shell [class~="p-6"] {
  padding: 1.1rem;
}

.dashboard-shell [class~="p-5"] {
  padding: 0.95rem;
}

.dashboard-shell [class~="p-4"] {
  padding: 0.8rem;
}

.dashboard-shell [class~="px-6"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

.dashboard-shell [class~="py-4"] {
  padding-top: 0.72rem;
  padding-bottom: 0.72rem;
}

.dashboard-shell [class~="py-3"] {
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

.dashboard-shell table th,
.dashboard-shell table td {
  padding-top: 0.58rem !important;
  padding-bottom: 0.58rem !important;
}

.dashboard-shell .dashboard-content {
  scrollbar-gutter: stable;
}

.dashboard-shell .dashboard-page {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
}

.dashboard-shell .dashboard-nav-item {
  border: 1px solid transparent;
}

.dashboard-shell .dashboard-nav-item .dashboard-nav-icon {
  color: #64748b;
}

.dashboard-shell .dashboard-nav-item:hover .dashboard-nav-icon {
  color: #334155;
}

.dashboard-shell .dashboard-nav-active {
  color: #ffffff;
  border-color: transparent;
  background: var(--dash-accent);
  box-shadow: 0 2px 8px -2px rgb(var(--dash-accent-rgb) / 0.5);
}

.dashboard-shell .dashboard-nav-active::before {
  display: none;
}

.dashboard-shell .dashboard-nav-active .dashboard-nav-icon {
  color: #ffffff;
  transform: scale(1.04);
}

.dashboard-shell .dashboard-nav-active .dashboard-nav-label {
  color: #ffffff;
  letter-spacing: 0.01em;
}

.dashboard-shell .dashboard-nav-item.dashboard-nav-item-collapsed.dashboard-nav-active::before {
  display: none;
}

.dashboard-shell .dashboard-nav-item.dashboard-nav-item-collapsed.dashboard-nav-active {
  background: var(--dash-accent);
  border-color: transparent;
}

.dashboard-shell .dashboard-accent-badge {
  background-color: var(--dash-accent);
}

.dashboard-shell .dashboard-accent-avatar {
  background-image: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-strong));
}

.dashboard-shell .dashboard-accent-link {
  color: var(--dash-accent);
}

.dashboard-shell .dashboard-accent-link:hover {
  color: var(--dash-accent-strong);
}

.dashboard-shell .dashboard-search-input:focus {
  border-color: rgb(var(--dash-accent-rgb) / 0.45);
  box-shadow: 0 0 0 2px rgb(var(--dash-accent-rgb) / 0.15);
}

.dashboard-shell [class*="bg-[#2548AB]"] {
  background-color: var(--dash-accent) !important;
}

.dashboard-shell [class*="hover:bg-[#1a3278]"]:hover {
  background-color: var(--dash-accent-strong) !important;
}

.dashboard-shell [class*="text-[#2548AB]"] {
  color: var(--dash-accent) !important;
}

.dashboard-shell [class*="hover:text-[#1a3278]"]:hover {
  color: var(--dash-accent-strong) !important;
}

.dashboard-shell [class*="border-[#2548AB]"] {
  border-color: var(--dash-accent) !important;
}

.dashboard-shell [class*="focus:border-[#2548AB]"]:focus {
  border-color: var(--dash-accent) !important;
}

.dashboard-shell [class*="from-[#2548AB]"] {
  --tw-gradient-from: var(--dash-accent) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--dash-accent-rgb) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.dashboard-shell [class*="to-[#1a3278]"],
.dashboard-shell [class*="to-[#3b6de0]"] {
  --tw-gradient-to: var(--dash-accent-strong) var(--tw-gradient-to-position) !important;
}

.dashboard-shell button:focus,
.dashboard-shell input:focus,
.dashboard-shell select:focus,
.dashboard-shell textarea:focus {
  border-color: rgb(var(--dash-accent-rgb) / 0.45);
}

.dashboard-shell :focus-visible {
  outline: 2px solid rgb(var(--dash-accent-rgb) / 0.35);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .dashboard-shell [class~="text-3xl"] {
    font-size: 1.6rem;
  }

  .dashboard-shell [class~="text-2xl"] {
    font-size: 1.28rem;
  }

  .dashboard-shell [class~="p-6"] {
    padding: 0.95rem;
  }

  .dashboard-shell [class~="p-5"] {
    padding: 0.85rem;
  }
}