/* Container needs position:relative so the overlay can sit on top */
  #avatar-container {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
  }

  /* Your existing avatar styling */
  #avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }

  /* The hover overlay */
  #avatar-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
  }
  #avatar-container:hover #avatar-overlay {
    opacity: 1;
  }
  .vertical-label {
  writing-mode: vertical-rl;   /* flows text vertically */
  transform: rotate(180deg);   /* flips direction so it reads top‑to‑bottom */
  white-space: nowrap;         /* keeps the name on one line */
  display: inline-block;       /* lets width/height take effect */
  line-height: 1;              /* avoids extra spacing */
}

  /* === Avatar utilities ===================================== */

/* 1. Base — makes anything perfectly round */
.avatar,
.avatar > img {
  display: inline-block;
  width: var(--avatar-size, 40px);   /* default 40 × 40 */
  height: var(--avatar-size, 40px);
  border-radius: 50%;
  overflow: hidden;                 /* crop corners */
  object-fit: cover;                /* fill without stretching */
}

/* 2. Size presets — tweak or add more if you like */
.avatar-xs { --avatar-size: 24px; }   /* 1.5 rem */
.avatar-sm { --avatar-size: 32px; }   /* 2 rem  */
.avatar-md { --avatar-size: 40px; }   /* 2.5 rem */
.avatar-lg { --avatar-size: 56px; }   /* 3.5 rem */
.avatar-xl { --avatar-size: 72px; }   /* 4.5 rem */

.swipe-wrapper {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.swipe-buttons {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  z-index: 1;
}

.swipe-card {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  border-radius: 2rem;
}

.swipe-card.swiped-left {
  transform: translateX(-150px);
}

.swipe-card.swiped-right {
  transform: translateX(150px);
}

.swipe-buttons button {
  min-width: 80px;
}

.amount-box {
  font-family: 'Nunito', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}
.safe-area-top {
  padding-top: env(safe-area-inset-top, 20px);
}
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 10px);
}
.navbar.fixed-top {
  padding-top: env(safe-area-inset-top, 20px);
}
#tab-scroll-container button {
  line-height: 1.2;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Защита от лишней высоты из-за браузеров */
#tab-scroll-container a {
  display: inline-block;
}

/* Иногда помогает добавить внутреннюю обёртку */
#tab-scroll-container {
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
html.htmx-swapping *,
html.htmx-request * {
  transition: none !important;
  animation: none !important;
}
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* убрать задержку */
}

.company-card-hover {
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.company-card-hover:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.amount-box-right {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: #333;
  display: flex;
  justify-content: flex-end; /* вместо center */
  text-align: right;
  min-width: 100px;
  height: 100%;
}