Corp/backend/static/css/components/common.css

/**
 * common.css
 * Общие переиспользуемые классы для всех компонентов
 * Избегает дублирования между компонентами
 */

/* ─────────────────────────────────────────────────────────────
   BUTTONS
────────────────────────────────────────────────────────────── */

/* Иконочная кнопка */
.btn-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--button-radius, 10px);
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
}

.btn-icon:hover {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

.btn-icon--primary {
  color: var(--bs-primary);
}

.btn-icon--danger {
  color: var(--bs-danger);
}

.btn-icon--success {
  color: var(--bs-success);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   BADGES
────────────────────────────────────────────────────────────── */

/* Бейдж подтверждения */
.badge-acked {
  background: color-mix(in srgb, var(--bs-success) 20%, transparent);
  color: var(--bs-success);
  border: 1px solid color-mix(in srgb, var(--bs-success) 30%, transparent);
  padding: 0.28rem 0.55rem;
  border-radius: var(--badge-radius, 999px);
  font-size: 0.8rem;
  font-weight: 500;
}

[data-bs-theme="dark"] .badge-acked {
  background: color-mix(in srgb, var(--bs-success) 15%, #000);
  color: color-mix(in srgb, var(--bs-success) 80%, #fff);
  border-color: color-mix(in srgb, var(--bs-success) 25%, transparent);
}

/* Бейдж статуса */
.badge-status {
  padding: var(--space-1);
  border-radius: var(--badge-radius, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}

.badge-status--pending {
  background: color-mix(in srgb, var(--bs-warning) 15%, transparent);
  color: var(--bs-warning);
  border-color: color-mix(in srgb, var(--bs-warning) 30%, transparent);
}

.badge-status--approved {
  background: color-mix(in srgb, var(--bs-success) 15%, transparent);
  color: var(--bs-success);
  border-color: color-mix(in srgb, var(--bs-success) 30%, transparent);
}

.badge-status--rejected {
  background: color-mix(in srgb, var(--bs-danger) 15%, transparent);
  color: var(--bs-danger);
  border-color: color-mix(in srgb, var(--bs-danger) 30%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   AVATARS
────────────────────────────────────────────────────────────── */

.avatar {
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg);
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar i {
  color: var(--bs-secondary-color);
}

/* Размеры */
.avatar-xs {
  width: var(--avatar-xs, 28px);
  height: var(--avatar-xs, 28px);
}

.avatar-sm {
  width: var(--avatar-sm, 36px);
  height: var(--avatar-sm, 36px);
}

.avatar-md {
  width: var(--avatar-md, 44px);
  height: var(--avatar-md, 44px);
}

.avatar-lg {
  width: var(--avatar-lg, 64px);
  height: var(--avatar-lg, 64px);
}

.avatar-xl {
  width: var(--avatar-xl, 96px);
  height: var(--avatar-xl, 96px);
}

/* ─────────────────────────────────────────────────────────────
   FEED AUTHOR & META
────────────────────────────────────────────────────────────── */

.card-title {
  font-weight: 700;
  color: var(--bs-body-color);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-subtitle {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-subtitle a {
  color: inherit;
  text-decoration: none;
}

.card-subtitle a:hover {
  color: var(--bs-primary);
}

/* ─────────────────────────────────────────────────────────────
   CHIPS
────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--badge-radius, 999px);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  font-size: 0.82rem;
  color: var(--bs-body-color);
}

.chip-remove {
  cursor: pointer;
  color: var(--bs-danger);
  font-weight: 700;
  line-height: 1;
}

.chip-remove:hover {
  color: color-mix(in srgb, var(--bs-danger) 80%, #000);
}

/* ─────────────────────────────────────────────────────────────
   UTILITIES
────────────────────────────────────────────────────────────── */

/* Текст с многоточием */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кастомный scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--bs-border-color);
}