.site-main {
    background-color: #f0f0f0;
    padding: 20px;
}



/* Контейнер для трёх колонок */
.main-content {
    display: flex;
    gap: 10px; /* отступы между колонками */
    align-items: stretch; /* колонки одинаковой высоты */
    min-height: calc(100vh - 120px); /* минус шапка/футер, если они есть */
}

/* Общие стили для колонок */
.main-content .col {
    padding: 20px;
    color: rgb(255, 255, 255);
    border-radius: 8px;
}

/* Первая колонка (15%) */
.col-1 {
    flex: 0 0 15%;
    background-color: #1f2937; /* тёмно-серый с оттенком синего */
    padding: 15px;
    border-radius: 8px;
    color: #f9fafb; /* почти белый */
    
}

.col-1 h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 25px;
    text-align: center;
    color: #ffffff; /* светло-голубой акцент */
}

.col-1 ul {
    list-style: none; /* убираем точки */
    padding: 0;
    margin: 0;
}

.col-1 li {
    margin-bottom: 10px;
}

.col-1 a {
    display: block;
    padding: 10px 12px;
    background: #1f2937; /* лёгкая прозрачность */
    border-radius: 6px;
    color: #f9fafb;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 6px rgba(59,130,246,0.5); /* лёгкое свечение */
    border: 2px solid #60a5fa;   /* голубая рамка */
    
}

.col-1 a:hover {
    background-color: #354f77;   /* синий фон */
}

/* Подсветка выбранной вакансии */
.col-1 a.active {
    background-color: #ffffff;   /* синий фон */
    color: #ffffff;              /* белый текст */
    font-weight: bold;
    border: 2px solid #60a5fa;   /* голубая рамка */
    box-shadow: 0 0 6px rgba(59,130,246,0.5); /* лёгкое свечение */
}

/* Блок вакансии */
.vacancy-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 300;
}

/* Название вакансии */
.vacancy-title {
    font-weight: bold;
    font-size: 16px;   /* чуть крупнее */
    margin-bottom: 6px;
    color: #f9fafb;
    font-family: 'Roboto', sans-serif;
}

/* Блок клиента */
.vacancy-client {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-style: italic;
    opacity: 0.9;
    color: #ffffff; /* светло-серый */
    font-family: 'Roboto Condensed', sans-serif; /* ✅ подключённый в head шрифт */
}

/* Логотип клиента */
.vacancy-client img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
    background: #fff;  /* белый фон для прозрачных png */
    padding: 2px;
    
}


/* Вторая колонка (15%) */
.col-2 {
    flex: 0 0 15%;
    background-color: #1f2937;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif; /* ✅ подключённый в head шрифт */
}

.col-2 h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 25px;
    text-align: center;
}

.col-2 ul {
    list-style: none; /* убираем маркеры */
    padding: 0;
    margin: 0;
}

.col-2 li {
    margin-bottom: 10px;
}

.col-2 a {
    display: block;
    padding: 10px 12px;
    background: #354f77;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.col-2 a:hover {
    background: #4e6e9e;
}

.col-2 a.active {
    background: #fff;
    color: #354f77;
    font-weight: bold;
    border: 2px solid #60a5fa;   /* голубая рамка */
    box-shadow: 0 0 6px rgba(59,130,246,0.5); /* лёгкое свечение */    
}


.cand-placeholder {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white; /* хорошо видно на зелёном фоне */
    margin-right: 8px;
    vertical-align: middle;
}


/* Третья колонка (70%) */
.col-3 {
    flex: 1; /* занимает всё оставшееся место */
    background-color: #1f2937;
    
}

#candidate-info {
    transition: opacity 0.2s ease;
}
#candidate-info.fade-out {
    opacity: 0;
}
#candidate-info.fade-in {
    opacity: 1;
}

.status-badge {
  display: inline-block;
  margin-top: 4px;
  min-width: 80px;
  text-align: center;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.cand-link {
  display: block;
  padding: 6px 8px;
}

.cand-name {
  display: block;
  font-weight: 500;
}

/* разные цвета для статусов */
.status-new { background: #6c757d; }        /* серый */
.status-forwarded { background: #6f42c1; } /* фиолетовый */
.status-review { background: #ffc107; } /* жёлтый */
.status-interview { background: #fd7e14; } /* оранжевый */
.status-offer { background: #20c997; }     /* бирюзовый/зелёный */
.status-hired { background: #3528a7; }     /* зелёный */
.status-rejected { background: #dc3545; }  /* красный */

.status-badge {
  float: right;
}

.vacancy-status-title {
    margin: 10px 0 5px;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 6px;
    color: #fff;
}

/* Цвета по статусам */
.status-priority { background: #f57e1c; } /* Синий */
.status-open { background: #286aa7; }     /* Зелёный */
.status-paused { background: #ffc107; color: #000; }  /* Жёлтый */
.status-closed { background: #dc3545; }   /* Красный */

.vacancy-item-wrapper {
    margin-bottom: 8px; /* расстояние между вакансиями */
}

.vacancy-item {
    padding: 8px;
    border-radius: 6px;
    background: #1e2a38; /* или твой фон */
    transition: background 0.2s;
}

.vacancy-item:hover {
    background: #2b3a4d; /* эффект при наведении */
}