:root {
  /* Tailwind color palette for local build support */
  /* Primary Palette (Oranges/Reds) */
  --primary-color: #772808; /* Main accent, links, interactive elements - Made darker for readability */
  --primary-darker: #441708; /* Hover for primary, darker accents - Made darker for readability */
  --primary-button-bg: #FFD273; /* Primary button background - Made lighter/less saturated */
  --primary-button-hover-bg: #fdc854; /* Primary button hover - Made lighter/less saturated */
  --primary-border-light: #FDBA74; /* Light borders for primary elements */
  --primary-bg-very-light: #faf0e6; /* Very light background for primary elements (e.g., hover on secondary button) */
  --primary-focus-shadow: rgba(251, 146, 60, 0.25); /* Focus ring color - Adjusted to new button bg */
  --primary-focus-glow: rgba(251, 146, 60, 0.589);
  --primary-bg-gradient-from: #FFFBEB; /* orange-50 like */
  --primary-bg-gradient-to: #FFF7ED;   /* orange-100 like, same as --primary-bg-very-light */

  /* Text Palette (Grays/Blacks) */
  --text-color-darkest: #111827; /* For main headings, titles */
  --text-color-dark: #1f2937;   /* Default dark text */
  --text-color-medium: #374151; /* Slightly lighter than default */
  --text-color-default: #4b5563; /* Standard body text, list items */
  --text-color-light: #6b7280;  /* Secondary text, icons, meta info */
  --text-color-lighter: #9ca3af; /* Placeholders, separators, disabled-like text */

  /* Background Palette */
  --bg-white: #fff;
  --bg-lightest-gray: #f9fafb; /* e.g., breadcrumbs background */
  --bg-light-gray: #f3f4f6;   /* e.g., image container placeholder */
  --bg-gray: #e5e7eb;         /* e.g., avatar placeholder, secondary action buttons */
  --bg-darker-gray: #d1d5db;  /* e.g., hover on secondary action buttons */

  /* Border Palette */
  --border-light: #e5e7eb;
  --border-default: #d1d5db;
  --border-transparent: transparent;

  /* Status Palette (Red for errors) */
  --status-error-bg: #fee2e2;
  --status-error-border: #ef4444;
  --status-error-text: #b91c1c;
  --status-error-text-alt: #dc2626; /* For stack trace or secondary error text */
  --status-error-border-light: #fca5a5; /* red-300 (для светлой границы danger кнопки) */
  --status-error-bg-light: #fef2f2; /* red-50 (для ховера danger кнопки) - может быть тот же что и --status-error-bg */
  --status-error-bg-dark: #fd7070;

  /* Success Palette (Greens) */
  --color-green-500: #22c55e; /* Tailwind green-500 */
  --color-green-600: #16a34a; /* Tailwind green-600 */
  --color-green-700: #15803d; /* Tailwind green-700 for text on light green bg */
  --color-green-100: #dcfce7; /* Tailwind green-100 for success alert bg */
  --color-green-400: #4ade80; /* Tailwind green-400 for success alert border */
  
  /* Generic white/black */
  --color-white: white; /* Renamed from --color-white to avoid conflict with --bg-white if used for text */
  --color-black: #000; /* Added a general black if needed */

  /* Shadows (can be more granular if needed) */
  --shadow-sm-color: rgba(0, 0, 0, 0.05);
  --shadow-md-color-primary: rgba(0, 0, 0, 0.1);
  --shadow-md-color-secondary: rgba(0, 0, 0, 0.06);
  --shadow-lg-color-primary: rgba(0, 0, 0, 0.1); 
  --shadow-lg-color-secondary: rgba(0, 0, 0, 0.05);
}

*, ::before, ::after {
  border-color: var(--border-default);
}

/* Общие контейнеры */
.card {
  background-color: var(--bg-white);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px var(--shadow-md-color-primary), 0 2px 4px -1px var(--shadow-md-color-secondary); /* shadow-md */
  padding: 1rem; /* p-4 */
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
  border: 1px solid var(--border-light); /* Добавлена граница */
}
.card:hover {
  box-shadow: 0 10px 15px -3px var(--shadow-lg-color-primary), 0 4px 6px -2px var(--shadow-lg-color-secondary); /* shadow-lg */
  background-color: var(--bg-white);
}

/* Заголовки */
.h1-title { /* Был text-3xl font-bold mb-4 */
  font-size: 1.875rem; 
  line-height: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  /* color: var(--text-color-darkest); /* Можно добавить, если все h1 одного цвета */
}
.h2-title { /* Был text-2xl font-bold text-gray-800 или text-xl font-semibold mb-4 */
  font-size: 1.5rem; 
  line-height: 2rem;
  font-weight: 700; /* font-bold */
  color: var(--text-color-dark); /* text-gray-800 */
  margin-bottom: 1rem; /* mb-4 или mb-6 */
}
.h2-title-alt { /* для text-xl font-semibold mb-4 */
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
  /* color: var(--text-color-dark); /* Можно добавить, если все h2-alt одного цвета */
}

.offer-block > h2 {
  font-size: 1.875rem; 
  line-height: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem; 
}
.offer-block > h3 { 
  font-size: 1.5rem; 
  line-height: 2rem;
  font-weight: 700; 
  color: var(--text-color-dark); 
  margin-bottom: 1rem; 
}

/* Ссылки */
.link-primary {
  color: var(--primary-color); /* text-blue-600 */
  text-decoration: none;
}
.link-primary:hover {
  color: var(--primary-darker); /* text-blue-800 */
  text-decoration: underline;
}

/* Кнопки (пока базовый) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.375rem; /* rounded-md */
  font-weight: 500; /* font-medium */
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  box-shadow: 0 1px 2px 0 var(--shadow-sm-color); /* shadow */
  border: 1px solid var(--border-transparent);
  cursor: pointer;
  text-decoration: none; /* Для ссылок-кнопок */

}

.btn-primary {
  background-color: var(--primary-button-bg); /* bg-blue-500 */
  color: var(--primary-darker);
  /* фоновую обводку текста тенью  */
  /*  text-shadow: 0 0 2px #111; */
}
.btn-primary:hover {
  background-color: var(--primary-button-hover-bg); /* hover:bg-blue-600 */
}

.btn-secondary {
  background-color: var(--bg-white);
  color: var(--primary-darker); /* text-blue-600 (использован цвет фона основной кнопки) */
  border-color: var(--primary-border-light); /* border-blue-300 */
}
.btn-secondary:hover {
  background-color: var(--primary-bg-very-light); /* hover:bg-blue-50 */
}

/* Списки */
.list-styled {
  list-style: none;
}
.list-styled > li {
  margin-bottom: 0.5rem; /* space-y-2 на родителе, это для каждого li */
  color: var(--text-color-default); /* text-gray-600 */
}

/* Утилиты */
.text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
}
.text-gray-500 { /* TODO: Переименовать класс или удалить, если дублируется с --text-color-light */
  color: var(--text-color-light);
}
.mb-6 {
 margin-bottom: 1.5rem;
}

/* Хлебные крошки */
.breadcrumbs {
  /* background-color: var(--bg-lightest-gray); /* bg-gray-50 */
  padding-bottom: 0.5rem; /* p-2 */
  border-bottom: 1px solid var(--border-light); /* border-b (подразумевая gray-200) */
}
.breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem; /* text-sm */
  color: var(--text-color-default); /* text-gray-600 */
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs .crumb-separator {
  margin: 0 0.5rem; /* mx-2 */
  color: var(--text-color-lighter); /* text-gray-400 */
}

/* Добавлено для ad.ejs */
.price-title {
  font-size: 1.875rem; /* Примерно как h1-title, но можно настроить */
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--primary-color); /* text-blue-600 */
  margin-bottom: 0.3rem; /* Можно добавить, если нужно */
}

.icon-text {
  display: flex;
  align-items: center;
  color: var(--text-color-default); /* text-gray-600 */
  margin-bottom: 0.5rem; /* mb-2 */
}
.icon-text svg {
  width: 1.25rem; /* h-5 */
  height: 1.25rem; /* w-5 */
  margin-right: 0.5rem; /* mr-2 */
}

.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) { /* md: */
  .feature-list {
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
  }
}

.feature-item {
  display: flex;
}

.feature-name {
  width: 50%;
  color: var(--text-color-default); /* text-gray-600 */
}

.feature-value {
  width: 50%;
  font-weight: 500; /* font-medium */
  /* color: var(--text-color-dark); /* Можно добавить, если нужно */
}
/* Конец добавлений для ad.ejs */

/* Добавлено для category.ejs */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  font-size: 0.875rem; /* sm:text-sm */
  line-height: 1.25rem;
  color: var(--text-color-dark); /* Tailwind default text color */
  background-color: var(--bg-white);
  border: 1px solid var(--border-default); /* border-gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 1px 2px 0 var(--shadow-sm-color); /* shadow-sm */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-input::placeholder {
  color: var(--text-color-lighter); /* placeholder-gray-400 */
}
.form-input:focus {
  outline: none;
  border-color: var(--primary-color); /* focus:border-blue-500 */
  box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow); /* focus:ring-blue-500 (примерный аналог) */
}

.link-card {
  display: block;
  padding: 1rem; /* p-4 */
  border: 1px solid var(--border-light); /* border (gray-200) */
  border-radius: 0.5rem; /* rounded-lg */
  transition: background-color 0.2s, box-shadow 0.2s;
}
.link-card:hover {
  background-color: var(--bg-lightest-gray); /* hover:bg-gray-50 */
  box-shadow: 0 4px 6px -1px var(--shadow-md-color-primary), 0 2px 4px -1px var(--shadow-md-color-secondary); /* hover:shadow-md */
}
.link-card .link-card-title {
  font-weight: 500; /* font-medium */
  color: var(--primary-darker); /* text-blue-700 */
}
.link-card .link-card-count {
  font-size: 0.875rem; /* text-sm */
  color: var(--text-color-light); /* text-gray-500 */
  margin-left: 0.25rem; /* ml-1 */
}

.text-gray-600 { /* TODO: Переименовать класс или удалить, если дублируется с --text-color-default */
  color: var(--text-color-default);
}
.my-2-custom {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-6-custom {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.text-center {
  text-align: center;
}
/* Конец добавлений для category.ejs */

/* Добавлено для user.ejs */
.avatar-container {
  width: 6rem; /* w-24 */
  height: 6rem; /* h-24 */
  background-color: var(--bg-gray); /* bg-gray-200 */
  border-radius: 9999px; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-container svg {
  width: 3rem; /* h-12 */
  height: 3rem; /* w-12 */
  color: var(--text-color-light); /* text-gray-500 */
}

.text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}

.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.my-5-custom {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.icon-text-start {
  display: flex;
  align-items: flex-start; /* Для случаев, когда иконка должна быть вверху */
  color: var(--text-color-default); /* text-gray-600 */
  margin-bottom: 0.5rem; /* mb-2 - по умолчанию, можно переопределить */
  gap: 0.5rem; /* gap-2 */
}
.icon-text-start svg {
  width: 1.25rem; /* h-5 */
  height: 1.25rem; /* w-5 */
  flex-shrink: 0; /* shrink-0 */
  margin-top: 0.125rem; /* mt-0.5 - для выравнивания с текстом */
}
/* Конец добавлений для user.ejs */

/* Добавлено для locations.ejs */
.mb-8 {
  margin-bottom: 2rem;
}

.list-styled li a {
  color: var(--text-color-default); /* text-gray-600 */
  text-decoration: none;
}
.list-styled li a:hover {
  color: var(--text-color-dark); /* text-gray-800 */
  text-decoration: underline;
}
/* Конец добавлений для locations.ejs */

/* Добавлено для error.ejs */
.alert {
  padding: 1rem; /* p-4 */
  margin-bottom: 1.5rem; /* mb-6 */
  border-left-width: 4px;
  border-radius: 0.25rem; /* Для совместимости, если нужно */
}

.alert-danger {
  background-color: var(--status-error-bg); /* bg-red-50 */
  border-color: var(--status-error-border); /* border-red-500 */
  color: var(--status-error-text); /* text-red-700 - основной текст */
}

.alert-danger .alert-title {
  /* Если нужен отдельный стиль для заголовка в алерте */
  font-weight: bold;
}

.alert-danger .alert-stack {
  font-size: 0.875rem; /* text-sm */
  color: var(--status-error-text-alt); /* text-red-600 */
  font-family: monospace; /* font-mono */
  margin-top: 0.75rem; /* mt-3 */
  white-space: pre-wrap; /* Для сохранения переносов в стеке */
}

/* Решение по кнопкам: сделаем .btn по умолчанию rounded-md, а .btn-pill для круглых */
.btn-pill {
  border-radius: 9999px; /* rounded-full */
}

/* Добавлено для search-form.ejs */
.btn-lg {
  padding: 0.5rem 1.5rem; /* py-2 px-6 */
}

.btn-secondary-action {
  background-color: var(--bg-gray); /* bg-gray-200 */
  color: var(--text-color-medium); /* text-gray-700 */
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
}
.btn-secondary-action:hover {
  background-color: var(--bg-darker-gray); /* hover:bg-gray-300 */
}
.btn-secondary-action svg {
  width: 1.25rem; /* h-5 */
  height: 1.25rem; /* w-5 */
  /* Цвет иконки stroke="currentColor" должен подхватиться из color кнопки */
}
/* Конец добавлений для search-form.ejs */

/* Добавлено для ads-list.ejs */
.p-8-custom {
  padding: 2rem;
}
/* Конец добавлений для ads-list.ejs */

/* Добавлено для карточек объявлений (card-vertical.ejs, card-horizontal.ejs) */
.item-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

.card.item-card {
  padding: 0; 
}

.item-card-image-container {
  position: relative;
  width: 100%;
  height: 200px; /* h-[200px] */
  background-color: var(--bg-light-gray); /* bg-gray-100 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
}
.item-card-image-container img {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.item-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--bg-gray); /* bg-gray-200 */
}
.item-card-image-placeholder svg {
  width: 3rem; /* h-12 */
  height: 3rem; /* w-12 */
  color: var(--text-color-lighter); /* text-gray-400 */
}

.item-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* flex-1 */
  padding: 1rem; /* p-4 */
  min-height: 0; /* Для корректной работы flex-grow и line-clamp */
}

.item-card-title {
  font-size: 1.125rem; /* text-lg, близко к text-xl (1.25rem) */
  font-weight: 700; /* font-bold */
  color: var(--text-color-darkest); /* text-gray-900 */
  line-height: 1.375; /* leading-tight */
  margin-bottom: 0.25rem; /* mb-1 */
  min-height: 48px; /* Примерно для 2 строк, было min-h-[48px] -> 3rem */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-card-description {
  color: var(--text-color-medium); /* text-gray-700 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  margin-bottom: 0.5rem; /* mb-2 */
  min-height: 40px; /* Для 2 строк */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-card-price {
  font-size: 0.875rem; /* text-sm, was text-lg */
  font-weight: 600; /* font-semibold */
  color: var(--text-color-dark); /* text-gray-800 */
  margin-bottom: 0.5rem; /* mb-2 */
  min-height: 32px; /* Для 1 строки, было min-h-[32px] -> 2rem */
  line-height: 1.25rem; /* Added for consistency with text-sm */
}

/* New classes for inline text spans next to icons on account page */
.text-metadata { /* For date, muted info */
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  color: var(--text-color-light);
}

.text-price-emphasis { /* For price text next to icon */
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  color: var(--text-color-dark);
  font-weight: 600; /* semi-bold like original item-card-price */
}

.item-card-location {
  display: flex;
  align-items: center;
  font-size: 0.875rem; /* text-sm */
  color: var(--text-color-light); /* text-gray-500 */
  margin-top: auto; /* Выравнивает этот блок вниз */
  line-height: 1.25rem; /* Added for consistency */
}
.item-card-location svg {
  width: 1rem; /* h-4 */
  height: 1rem; /* w-4 */
  margin-right: 0.25rem; /* mr-1 */
}

.item-card-horizontal {
  flex-direction: column; /* По умолчанию */
}

@media (min-width: 640px) { /* sm: */
  .item-card-horizontal {
    flex-direction: row;
  }
  .item-card-horizontal .item-card-image-container {
    width: 240px; 
    height: 200px; 
    flex-shrink: 0;    
    border-radius: 0.5rem;
  }
  .item-card-horizontal .item-card-description {
    -webkit-line-clamp: 2;
  }
}
/* Конец добавлений для карточек объявлений */

/* Добавлено для card-compact.ejs */
.item-card-compact {
  display: flex;
  background-color: var(--bg-white);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 2px 0 var(--shadow-sm-color); /* shadow-sm */
  overflow: hidden;
  transition: box-shadow 0.5s ease-in-out, background-color 0.5s ease-in-out;
  margin-bottom: 0.75rem; /* mb-3 */
  border: 1px solid var(--border-light); /* Добавлена граница */
}
.item-card-compact:hover {
  box-shadow: 0 4px 6px -1px var(--shadow-md-color-primary), 0 2px 4px -1px var(--shadow-md-color-secondary); /* hover:shadow-md */
}

.item-card-compact-image {
  position: relative;
  width: 5rem; /* w-20 */
  height: 5rem; /* h-20 */
  flex-shrink: 0; /* Чтобы не сжимался, если текст длинный */
  overflow: hidden;
  border-radius: 0.5rem;
}
.item-card-compact-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.item-card-compact-image .item-card-image-placeholder {
  background-color: var(--bg-gray); /* bg-gray-200 */
}
.item-card-compact-image .item-card-image-placeholder svg {
  width: 1.5rem; /* h-6 */
  height: 1.5rem; /* w-6 */
  color: var(--text-color-lighter); /* text-gray-400 */
}

.item-card-compact-body {
  display: flex;
  flex-direction: column;
  padding: 0.5rem; /* p-2 */
  flex-grow: 1;
  overflow: hidden; /* Для line-clamp */
}

.item-card-compact-title {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: var(--text-color-darkest); /* text-gray-900 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-card-compact-price {
  font-size: 0.875rem; /* text-sm */
  font-weight: 700; /* font-bold */
  color: var(--primary-color); /* text-blue-600 */
  line-height: 1.25rem; /* Added for consistency, assuming it might wrap */
}

.item-card-compact-location {
  margin-top: auto;
  font-size: 0.875rem; /* text-sm, was text-xs */
  color: var(--text-color-light); /* text-gray-500 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25rem; /* Added for consistency */
}
/* Конец добавлений для card-compact.ejs */

/* Конец добавлений для error.ejs */

/* Success Button */
.btn-success {
  background-color: var(--color-green-600); /* Darker green */
  color: var(--primary-darker);
}
.btn-success:hover {
  background-color: var(--color-green-700); /* Even darker green */
}

/* Danger Button (Solid) */
.btn-danger {
  background-color: var(--status-error-bg-dark); /* Darker red (red-600) */
  color: var(--primary-darker);
}
.btn-danger:hover {
  background-color: var(--status-error-text); /* Even darker red (red-700) */
}

/* Danger Outline Button */
.btn-danger-outline {
  color: var(--status-error-text);
  border-color: var(--status-error-border-light);
  background-color: var(--bg-white);
}
.btn-danger-outline:hover {
  color: var(--status-error-text); /* Можно сделать темнее при желании */
  background-color: var(--status-error-bg-light);
  border-color: var(--status-error-border); /* Можно сделать темнее границу */
}

/* Danger Text Button (маленькая) */
.btn-danger-text {
  color: var(--status-error-text-alt);
  background-color: var(--status-error-bg-light); /* Pale red background by default */
  border: 1px solid var(--status-error-border-light); 
  padding: 0.25rem 0.75rem; /* py-1 px-3, text-sm */
  font-size: 0.875rem; 
}
.btn-danger-text:hover {
  color: var(--status-error-text);
  background-color: var(--status-error-bg); /* Slightly darker pale red on hover */
  border-color: var(--status-error-border);
}

/* Alert Success (если еще не было такого общего класса) */
.alert-success {
  background-color: var(--color-green-100);
  border: 1px solid var(--color-green-400);
  color: var(--color-green-700);
  padding: 0.75rem 1.25rem; /* Примерные паддинги для алерта */
  margin-bottom: 1rem;
  border-left-width: 4px; /* Акцентная полоса */
  border-radius: 0.25rem;
}

/* Alert Danger - memastikan стили консистентны с alert-success */
.alert-danger {
  background-color: var(--status-error-bg); 
  border: 1px solid var(--status-error-border);
  color: var(--status-error-text); 
  padding: 0.75rem 1.25rem; /* Примерные паддинги для алерта */
  margin-bottom: 1rem; /* Был mb-6, унифицируем с alert-success */
  border-left-width: 4px;
  border-radius: 0.25rem; 
}

/* Icon Button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; 
  height: 2rem; 
  padding: 0.25rem; 
  border-radius: 0.375rem; /* rounded-md */
  background-color: var(--primary-bg-very-light); /* Pale themed background */
  border: 1px solid var(--primary-border-light);    /* Themed border */
  color: var(--primary-color); /* Themed icon color */
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn-icon:hover {
  background-color: var(--primary-border-light); /* Slightly darker pale orange on hover */
  border-color: var(--primary-color);    
  color: var(--primary-darker);                 
}

/* Outline Default Button (e.g., for edit action) */
.btn-outline-default {
  background-color: var(--primary-bg-very-light); /* Pale themed background */
  color: var(--primary-color); /* Themed text */
  border: 1px solid var(--primary-border-light); /* Themed border */
  padding: 0.25rem 0.75rem; /* py-1 px-3 */
  font-size: 0.875rem; /* text-sm */
  border-radius: 0.375rem; /* rounded-md */
}
.btn-outline-default:hover {
  background-color: var(--primary-border-light); /* Slightly darker pale themed background */
  color: var(--primary-darker); /* Darker themed text on hover */
  border-color: var(--primary-color); /* Darker themed border on hover */
}

/* Utility for themed border color */
.border-theme-primary {
  border-color: var(--primary-color);
}

/* Background Gradient for Primary Theme */
.bg-primary-gradient-light {
  background-image: linear-gradient(to bottom right, var(--primary-bg-gradient-from), var(--primary-bg-gradient-to));
}

/* Active link in sidebar */
.sidebar-link-active {
  background-color: var(--primary-bg-very-light);
  color: var(--primary-darker);
  /* border-right: 3px solid var(--primary-color); /* Отключено, т.к. может конфликтовать с rounded */
  /* font-weight остается от базового класса ссылки */
}

/* Danger Link */
.link-danger {
  color: var(--status-error-text-alt); /* text-red-600 */
  text-decoration: none;
}
.link-danger:hover,
.link-danger:focus {
  color: var(--status-error-text); /* text-red-700 */
  text-decoration: underline;
}

/* Navigation Link (e.g., for header) */
.nav-link {
  color: var(--text-color-default); /* Default gray for nav items */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.nav-link:hover,
.nav-link:focus {
  color: var(--primary-color); /* Themed accent color on hover/focus */
}

/* Utility to apply themed background on hover, e.g., for cards */
.hover-interactive-bg:hover {
  background-color: var(--primary-bg-very-light);
  
  box-shadow: 0 0 10px 0 var(--primary-focus-glow);

}

a {
  color: var(--primary-color);
  /* text-decoration: none; */ /* Убираем, пусть utility управляет */
  transition: color 0.2s, text-decoration 0.2s;
}
a:hover, a:focus {
  color: var(--primary-darker);
  /* text-decoration: underline; */ /* Убираем, пусть utility управляет */
}