/* ============================================================
   UPDATES.CSS v12 — 3-col accordion, enlarged for readability
   Overrides heavy base styles from style.css (line 8370–8650)
   ============================================================ */

/* === PAGE === */
.updates-section { padding-top: 0 !important; margin-top: 0 !important; }
.updates-section::before { display: none !important; }

/* === CONTROLS === */
.updates-controls {
    position: relative !important;
    z-index: 50;
    padding: 10px 0 !important;
    margin-bottom: 14px !important;
}
.updates-controls.stuck { backdrop-filter: blur(16px); box-shadow: var(--corp-shadow-sm); }
.updates-filters { gap: 7px !important; margin-bottom: 8px !important; flex-wrap: wrap; }
.filter-btn {
    padding: 7px 16px !important; font-size: 0.82rem !important;
    font-family: var(--corp-font) !important; font-weight: 600 !important;
    border-radius: 9px !important;
}
.filter-btn .filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; font-size: 0.72rem; font-weight: 700;
    background: rgba(0,0,0,0.10); margin-left: 5px;
}
.filter-btn.active .filter-count { background: rgba(255,255,255,0.3); }
.search-input { padding: 8px 12px 8px 38px !important; font-size: 0.85rem !important; }

/* === 3-COL GRID === */
.updates-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding-top: 0 !important;
    align-items: start;
}
.update-program-card.is-open { grid-column: 1 / -1 !important; }

/* === CARD ORDER: desired display sequence === */
#card-buh-2026 { order: 1; }
#card-buh-2025 { order: 2; }
#card-rmi      { order: 3; }
#card-vu       { order: 4; }
#card-arenda   { order: 5; }
#card-ami      { order: 6; }
#card-phu      { order: 7; }
#card-jkx      { order: 8; }
#card-zp       { order: 9; }

/* ============================================================
   CARD
   ============================================================ */
.update-program-card {
    background: var(--corp-surface) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: default !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.update-program-card:hover {
    transform: none !important;
    border-color: rgba(0,0,0,0.13) !important;
    box-shadow: var(--corp-shadow-sm) !important;
}
.update-program-card.is-open {
    border-color: rgba(230,57,70,0.18) !important;
    box-shadow: var(--corp-shadow-md) !important;
}

/* Left accent stripe */
.update-program-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    right: auto !important;
    width: 4px !important; height: auto !important;
    border-radius: 0 !important;
    transform: none !important;
    transform-origin: unset !important;
}
.update-program-card:hover::before { transform: none !important; }

.update-program-card[data-program="buh"]::before   { background: var(--corp-accent) !important; }
.update-program-card[data-program="jkx"]::before   { background: var(--accent-green) !important; }
.update-program-card[data-program="zp"]::before    { background: var(--accent-blue) !important; }
.update-program-card[data-program="other"]::before { background: var(--accent-orange) !important; }

/* ============================================================
   HEADER
   ============================================================ */
.update-program-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 13px 40px 13px 14px !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none;
    position: relative !important;
    min-height: auto !important;
    text-align: left !important;
    border-bottom: none !important;
    background: none !important;
    transition: background 0.12s ease !important;
    font-family: var(--corp-font) !important;
}
.update-program-header:hover { background: rgba(0,0,0,0.018) !important; }
.update-program-card.is-open .update-program-header {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Chevron */
.update-program-header::after {
    content: '' !important;
    position: absolute !important; right: 14px !important; top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    width: 18px !important; height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.update-program-card.is-open .update-program-header::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Icon */
.update-program-icon {
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    border-radius: 10px !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
    transition: none !important;
}
.update-program-icon svg { width: 22px !important; height: 22px !important; }

.update-program-card:hover .update-program-icon {
    transform: scale(1.08) !important;
}

/* Default + hover colors per program */
.update-program-card[data-program="buh"]   .update-program-icon,
.update-program-card[data-program="buh"]:hover .update-program-icon { background: var(--corp-accent-light) !important; color: var(--corp-accent) !important; }
.update-program-card[data-program="jkx"]   .update-program-icon,
.update-program-card[data-program="jkx"]:hover .update-program-icon { background: rgba(16,185,129,0.08) !important; color: var(--accent-green) !important; }
.update-program-card[data-program="zp"]    .update-program-icon,
.update-program-card[data-program="zp"]:hover .update-program-icon { background: rgba(37,99,235,0.08) !important; color: var(--accent-blue) !important; }
.update-program-card[data-program="other"] .update-program-icon,
.update-program-card[data-program="other"]:hover .update-program-icon { background: rgba(245,158,11,0.08) !important; color: var(--accent-orange) !important; }

/* Info */
.update-program-info { flex: 1 !important; min-width: 0 !important; }
.update-program-title {
    font-family: var(--font-heading) !important;
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    color: var(--corp-text) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.update-program-subtitle {
    font-family: var(--corp-font) !important;
    font-size: 0.78rem !important;
    color: var(--corp-text-secondary) !important;
    margin: 3px 0 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    opacity: 1 !important;
}

/* Badge */
.update-program-badge {
    position: static !important; transform: none !important; margin: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.update-program-badge span {
    display: inline-block !important;
    padding: 3px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    border-radius: 6px !important;
    background: var(--bg-gray) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}

/* ============================================================
   CONTENT
   ============================================================ */
.update-program-content {
    display: block !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease 0.05s !important;
}
.update-program-card.is-open .update-program-content {
    max-height: 6000px !important;
    opacity: 1 !important;
}
/* Текстовый контент (вакансии) — внутренние отступы, чтобы текст не прижимался к краю.
   Карточки с таблицей файлов (обновления) остаются без отступов. */
.update-program-card.is-open .update-program-content { padding: 18px 28px 22px !important; }
.update-program-card.is-open .update-program-content:has(.update-files-table) { padding: 0 !important; }
.tile-file-count { display: none !important; }

/* Instruction note */
.update-instruction {
    display: block !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    font-size: 0.8rem !important;
    font-family: var(--corp-font) !important;
    color: var(--corp-text-secondary) !important;
    line-height: 1.55 !important;
    background: var(--bg-light) !important;
    border-left: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    opacity: 1 !important;
}
.update-instruction strong { color: var(--corp-accent) !important; }

/* Files header — hidden */
.update-files { margin-top: 0 !important; }
.update-files-header { display: none !important; }
.update-files-header h4 {
    font-size: 0.72rem !important; font-family: var(--corp-font) !important;
    margin: 0 !important; color: var(--text-light) !important;
    font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important;
}
.update-files-count {
    font-size: 0.72rem !important; color: var(--text-light) !important; font-weight: 600 !important;
    background: none !important; padding: 0 !important;
}

/* ============================================================
   FILE TABLE
   ============================================================ */
.update-files-table {
    padding: 0 14px 12px !important;
    overflow-x: auto !important;
    border: none !important;
    border-radius: 0 !important;
}
.update-files-table table {
    width: 100% !important; border-collapse: collapse !important;
    background: transparent !important;
}
.update-files-table thead { background: none !important; }
.update-files-table th,
.update-files-table thead th {
    padding: 5px 8px !important;
    font-size: 0.7rem !important; font-family: var(--corp-font) !important;
    font-weight: 700 !important; color: var(--text-light) !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important; text-align: left !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
}

/* CRITICAL: show ALL rows (style.css hides n+4) */
.update-files-table thead th:nth-child(3),
.update-files-table tbody td:nth-child(3) { display: table-cell !important; }
.update-files-table tbody tr { display: table-row !important; }
.update-files-table tbody tr:nth-child(n+4) { display: table-row !important; }

.update-files-table tbody tr {
    cursor: pointer !important;
    border-bottom: none !important;
    transition: background 0.12s ease !important;
}
.update-files-table tbody tr:hover { background: var(--bg-light) !important; }
.update-files-table tbody tr:hover .file-name { color: var(--corp-accent) !important; }
.update-files-table tbody tr:hover .file-name svg { color: var(--corp-accent) !important; }

/* Override style.css td padding */
.update-files-table td,
.update-files-table tbody td {
    padding: 7px 8px !important;
    font-size: 0.84rem !important;
    vertical-align: middle !important;
    color: var(--text-primary) !important;
}
.update-files-table tbody tr + tr td { border-top: 1px solid rgba(0,0,0,0.04) !important; }

.file-name {
    display: flex !important; align-items: center !important;
    gap: 7px !important;
    font-size: 0.84rem !important; font-family: var(--corp-font) !important;
    color: var(--corp-text) !important; font-weight: 500 !important;
    transition: color 0.12s ease !important;
}
.file-name svg {
    width: 14px !important; height: 14px !important; flex-shrink: 0 !important;
    color: var(--text-light) !important; transition: color 0.12s ease !important;
}

.update-files-table tbody td:nth-child(2) {
    font-size: 0.78rem !important; color: var(--text-light) !important;
    white-space: nowrap !important; font-weight: 500 !important;
}
.update-files-table tbody td:nth-child(3) { white-space: nowrap !important; }
.update-files-table tbody td.file-date-cell {
    font-size: 0.78rem !important; color: var(--text-light) !important;
    white-space: nowrap !important; font-weight: 500 !important;
}

/* Download btn */
.file-download-btn {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 5px 12px !important; border-radius: 7px !important;
    font-size: 0.78rem !important; font-family: var(--corp-font) !important;
    text-decoration: none !important;
    background: var(--corp-accent-light) !important;
    color: var(--corp-accent) !important;
    font-weight: 600 !important; white-space: nowrap !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.file-download-btn:hover {
    background: var(--corp-accent) !important; color: #fff !important;
    transform: none !important; box-shadow: none !important;
}
.file-download-btn svg { width: 13px !important; height: 13px !important; }
.update-files-table tbody td svg { max-width: 16px !important; max-height: 16px !important; }

/* Hide show-more button from old layout */
.update-files-more { display: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .updates-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .updates-grid { grid-template-columns: 1fr !important; }
    .update-program-card.is-open { grid-column: auto !important; }
    .update-program-header { padding: 10px 34px 10px 10px !important; gap: 9px !important; }
    .update-program-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; }
    .update-files-table { padding: 0 10px 8px !important; }
    .update-files-table thead th:nth-child(2),
    .update-files-table tbody td:nth-child(2) { display: none !important; }
}