/* =========================================
   ИЗОЛИРОВАННЫЕ СТИЛИ ДЛЯ РЕДАКТОРА ОФИСА
   Префикс .office- гарантирует отсутствие конфликтов
   ========================================= */

.office-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.office-section-title {
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 25px;
    border-bottom: 2px solid #333333;
    padding-bottom: 10px;
    color: #ffffff;
}

/* Системные уведомления */
.office-msg-box {
    position: relative;
    padding: 15px 40px 15px 20px; 
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    animation: officeFadeIn 0.3s ease;
}
.office-msg-success { background: rgba(43, 147, 72, 0.15); color: #2b9348; border-left: 4px solid #2b9348; }
.office-msg-error { background: rgba(183, 28, 28, 0.15); color: #b71c1c; border-left: 4px solid #b71c1c; }

.office-msg-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.office-msg-close:hover { opacity: 1; }

@keyframes officeFadeIn { 
    from { opacity: 0; transform: translateY(-10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Блок загрузки */
.office-upload-section {
    margin-bottom: 60px;
    width: 100%;
}

.office-file-input-wrapper {
    margin-bottom: 20px;
}

.office-file-input {
    width: 100%;
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
}

.office-file-input::file-selector-button {
    background: #111111;
    color: #ffffff;
    border: 2px solid #333333;
    padding: 10px 20px;
    margin-right: 15px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.15s;
}
.office-file-input::file-selector-button:hover { border-color: #555555; }

/* =========================================
   КНОПКИ ФОРМЫ ЗАГРУЗКИ (ОТКРЫТЬ / РЕДАКТИРОВАТЬ)
   ========================================= */

.office-half-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

/* Общий каркас кнопок по твоему образцу глобальной .btn-action */
.office-btn-action {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    height: 38px; 
    box-sizing: border-box; 
    background: transparent; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 1.2rem; 
    padding: 0 20px; 
    transition: all 0.2s; 
    cursor: pointer; 
    font-family: inherit; 
    width: 100%; /* Чтобы кнопки заполняли форму от края до края */
    margin: 0; /* margin-left: 1.5rem убираем, так как отступ задан через gap в сетке */
}

/* Кнопка "ОТКРЫТЬ ДЛЯ ПРОСМОТРА" (Синяя) */
.office-btn-view {
    color: var(--text-inform-link, #4a90e2);
    border: 2px solid var(--text-inform-link, #4a90e2);
}
.office-btn-view:hover {
    background: var(--text-inform-link, #4a90e2);
    color: var(--text-white, #ffffff);
}

/* Кнопка "ОТКРЫТЬ ДЛЯ РЕДАКТИРОВАНИЯ" (Красная) */
.office-btn-edit {
    color: var(--accent-red, #b71c1c);
    border: 2px solid var(--accent-red, #b71c1c);
}
.office-btn-edit:hover {
    background: var(--accent-red, #b71c1c);
    color: var(--text-white, #ffffff);
}

/* Сетка документов */
.office-files-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); 
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.office-file-item {
    background-color: #111111;
    border: 2px solid #333333;
    border-left-width: 6px; 
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: background-color 0.15s;
}
.office-file-item:hover { background-color: #1a1a1a; }

/* Привязка к глобальным переменным форматов (настроены в colors.css) */
.office-type-word { border-left-color: var(--doc-word, #2b579a); }
.office-type-cell { border-left-color: var(--doc-cell, #217346); }
.office-type-slide { border-left-color: var(--doc-slide, #b7472a); }
.office-type-other { border-left-color: var(--doc-other, #666666); }

.office-file-info {
    border-bottom: 1px solid #222222;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.office-file-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.office-file-name:hover { color: var(--text-inform-link, #4a90e2); }

.office-file-meta {
    font-size: 13px;
    color: #888888;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.office-time-left { color: #aaaaaa; font-weight: 600; }

/* Действия в карточке */
.office-file-actions {
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: center;
}

.office-action-link {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    transition: color 0.15s;
}

.office-action-dl { color: var(--text-inform-link, #4a90e2); }
.office-action-dl:hover { color: #ffffff; }

.office-action-del { color: var(--accent-red, #b71c1c); }
.office-action-del:hover { color: #ffffff; }

.office-empty-state { color: #666666; font-style: italic; }

/* Плавная прокрутка для якорных ссылок (к правилам) */
html {
    scroll-behavior: smooth;
}

/* Отступы для блоков, чтобы облегчить HTML-код */
.office-upload-section {
    margin-bottom: 60px;
    margin-top: 20px;
}
.office-list-section {
    margin-bottom: 60px;
    margin-top: 20px;
}
.office-rules-section {
    margin-bottom: 100px;
    margin-top: 40px;
}

/* =========================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ========================================= */
@media (max-width: 768px) {
    /* Перестраиваем кнопки загрузки друг под друга */
    .office-half-buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Адаптируем размер кнопок и разрешаем тексту переноситься, если экран совсем узкий */
    .office-btn-action {
        font-size: 1rem;
        height: auto;
        min-height: 42px;
        padding: 12px 10px;
        white-space: normal; 
        text-align: center;
    }

    /* Карточки загруженных документов тоже выстраиваем в одну колонку */
    .office-files-list {
        grid-template-columns: 1fr;
    }

    /* Уменьшаем шрифты внутри карточки документа для аккуратности */
    .office-file-name {
        font-size: 15px;
    }
    
    .office-file-meta {
        flex-direction: column;
        gap: 5px;
    }

    /* Действия (Скачать / Удалить) в карточке */
    .office-file-actions {
        justify-content: space-between;
        gap: 10px;
    }

    .office-action-link {
        font-size: 1.1rem;
        padding: 0 10px;
    }
}