/* ===== ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (Если используете) ===== */
/* :root {
  --font-primary: ...;
  --font-mono: ...;
  --font-mono-fallback: ...;
} */


/* ===== ТАБЛИЦА ===== */

.table-master-container {
  height: 800px; /* Высота может быть изменена, если в calendar.ejs нужна 600px */
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  margin: 20px 0;
  position: relative;
  overflow-x: auto;
}

.bonds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: auto;
  font-family: var(--font-primary); /* Глобальный шрифт для таблицы */
}

.bonds-table th,
.bonds-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.bonds-table th {
  cursor: pointer;
  user-select: none;
}

.bonds-table th:hover {
  background: #e9ecef;
}

.bonds-table thead {
  position: sticky;
  top: 0;
  z-index: 101;
  background: white;
}

.bonds-table thead tr:last-child th {
  background: #f8f9fa;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-top: none;
  position: sticky;
  top: 28px;
  z-index: 100;
}

.bonds-table tbody tr:hover {
  background: #f8f9fa;
}

.group-headers th {
  background: #343a40;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-bottom: none;
}


/* ===== КЛИКАЕМЫЕ ЭЛЕМЕНТЫ ===== */

.secid-clickable {
  cursor: pointer;
  color: #007bff;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-primary); /* Шрифт для кликабельного элемента */
}

.secid-clickable:hover {
  background-color: #f0f8ff;
  color: #0056b3;
  text-decoration: underline;
}

.price-clickable {
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
  font-weight: bold;
  font-family: var(--font-primary); /* Шрифт для кликабельного элемента */
}

.price-clickable:hover {
  color: #007bff;
  background-color: #f0f8ff;
}


/* ===== СТИЛИ ДЛЯ ЧИСЕЛ ===== */

.price, .yield, .volume, .currency,
.price-high, .price-medium, .price-low,
.yield-high, .yield-medium, .yield-low,
.change-positive, .change-negative,
.numeric {
  font-family: var(--font-mono), var(--font-mono-fallback);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}


/* ===== ЦВЕТОВЫЕ КЛАССИФИКАЦИИ ===== */

/* --- Цена --- */
.price-high { color: #e74c3c; font-weight: bold; }
.price-medium { color: #f39c12; }
.price-low { color: #27ae60; }

/* --- Доходность --- */
.yield-high { color: #27ae60; font-weight: bold; }
.yield-medium { color: #f39c12; }
.yield-low { color: #e74c3c; }

/* --- Изменение --- */
.change-positive {
  color: #00C853;          /* Яркий зеленый */
  background-color: rgba(0, 200, 83, 0.15);
}
.change-negative {
  color: #FF3B30;          /* Яркий красный */
  background-color: rgba(255, 59, 48, 0.15);
}

/* --- Купон --- */
.coupon-high { color: #27ae60; font-weight: bold; }
.coupon-medium { color: #f39c12; }
.coupon-low { color: #e74c3c; }

/* --- Амортизация --- */
.amortization-high { color: #c62828; }
.amortization-medium { color: #ef6c00; }
.amortization-low { color: #2e7d32; }

/* --- Спред доходности --- */
.yield-spread {
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}
.yield-spread.positive {
  background: #e8f5e8;
  color: #2e7d32;
}
.yield-spread.negative {
  background: #ffebee;
  color: #c62828;
}

/* --- Дни до оферты --- */
.days-to-offer {
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.days-soon {
  background: #ffebee;
  color: #c62828;
}
.days-near {
  background: #fff3e0;
  color: #ef6c00;
}
.days-far {
  background: #e8f5e8;
  color: #2e7d32;
}


/* ===== ПРОГРЕСС-БАР НКД ===== */

.progress-cell {
    width: 120px;
    min-width: 120px;
    text-align: center;
}

.process-bar {
    position: relative;
    width: 100px;
    height: 20px;
    background: #e0e0e6;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

.process-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 10px;
    transition: width 0.3s ease;
    min-width: 20px;
}

.process-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-shadow: 0 0 2px white;
    font-family: var(--font-primary); /* Шрифт для текста прогресс-бара */
}

/* Цвета для разных стадий прогресса */
.process-bar[data-process="0"] .process-fill { background: #f44336; }
.process-bar[data-process="25"] .process-fill { background: #ff9800; }
.process-bar[data-process="50"] .process-fill { background: #ffeb3b; }
.process-bar[data-process="75"] .process-fill { background: #8bc34a; }
.process-bar[data-process="90"] .process-fill { background: #4caf50; }


/* ===== СТИЛИ ДЛЯ АМОРТИЗАЦИИ ===== */

/* Ячейка признаков амортизации */
.amortization-cell {
    text-align: center;
    padding: 4px 8px;
}

/* Признаки амортизации (точки) */
.amortization-signs {
    /* Основные стили для отображения точек */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    font-size: 16px;
    color: #666;

    /* Для тултипа: cursor help (теперь тултип JavaScript) */
    cursor: help; /* Курсор указывает, что есть подсказка */
    user-select: none; /* Запрещаем выделение текста */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* ===== ЭФФЕКТИВНАЯ ДОХОДНОСТЬ ===== */
.effective-yield {
    font-weight: 600;
    color: #1976d2;
}


/* ===== РАЗНОЕ ===== */

.bond-type-icon {
  text-align: center;
  font-size: 16px;
}

.qualified-badge {
  background: #ff6b6b;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px; /* Добавлено из более поздней версии */
}

.sort-asc::after {
  content: " ↑";
  color: #007bff;
}

.sort-desc::after {
  content: " ↓";
  color: #007bff;
}

.coupon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px; /* Унифицированный размер шрифта */
  margin: 15px 0;
}

.coupon-table th,
.coupon-table td {
  padding: 8px 10px; /* Унифицированный отступ */
  border: 1px solid #dee2e6;
  text-align: left;
}

.coupon-table th {
  background: #f8f9fa;
  font-weight: 600;
  text-align: left;
}

.coupon-table tr:hover {
  background: #f8f9fa;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.virtualization-info {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 12px;
  color: #6c757d;
}

/* Анимация спиннера (если отсутствует) */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Стили для кликабельной цены (только текст) */
.clickable-price {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
}

.clickable-price:hover {
    background-color: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
}

.clickable-price::after {
    content: " 📈";
    opacity: 0;
    font-size: 11px;
    transition: opacity 0.2s ease;
}

.clickable-price:hover::after {
    opacity: 0.8;
}