/******************************************************************************
 * ФАЙЛ: /var/www/asen/css/main.css
 * НАЗНАЧЕНИЕ:
 *   - Дополнительные стили поверх Bootstrap для сайта asen.edemis.uk
 *   - НИЧЕГО не переизобретает, только чуть настраивает внешний вид:
 *       - шапка (header)
 *       - нижний колонтитул (footer)
 *       - меню пользователя
 *       - базовая типографика
 *
 * ВАЖНО:
 *   - Bootstrap уже подключён через CDN в header.php
 *   - Здесь мы добавляем только "акцентные" стили.
 ******************************************************************************/

/* ----------------------------------------------------------------------------
 * БАЗОВЫЕ НАСТРОЙКИ ТЕКСТА И ФОНА
 * ------------------------------------------------------------------------- */

/* Общий фон чуть светлее, чтобы белые блоки смотрелись как карточки */
body {
    background-color: #f8f9fa; /* светло-серый, родной для Bootstrap */
    color: #212529;            /* базовый тёмный текст */
}

/* Заголовки — чуть плотнее и компактнее */
h1, h2, h3, h4, h5 {
    font-weight: 600;
}

/* Параграфы — немного уменьшим отступ сверху */
p {
    margin-top: 0.3rem;
    margin-bottom: 0.7rem;
}

/* ----------------------------------------------------------------------------
 * HEADER (ШАПКА САЙТА)
 * Классы:
 *   .app-header    — применяется к <header> в header.php
 * ------------------------------------------------------------------------- */

.app-header {
    /* Фон и граница уже заданы через Bootstrap-классы (bg-light, border-bottom),
       здесь лишь добавим легкую тень, чтобы шапка визуально отделялась. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* Логотип / название в шапке немного отделим от всего остального */
.app-header .h5 {
    letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
 * БЛОК РОЛИ И ИМЕНИ ПОЛЬЗОВАТЕЛЯ
 * Класс:
 *   .role-badge   — выводит STUD / PROF / ADMIN
 * ------------------------------------------------------------------------- */

.role-badge {
    font-size: 0.8rem;
    letter-spacing: 0.08em;         /* чуть шире буквы, чтобы был эффект "бейджа" */
    text-transform: uppercase;
    color: #495057;
}

/* Можно задать разные цвета для разных ролей, если захочешь позже.
   Пока оставляем нейтральный. 
   Пример (если захочешь включить, раскомментируй):

.role-badge.role-stud   { color: #0d6efd; }
.role-badge.role-prof   { color: #198754; }
.role-badge.role-admin  { color: #dc3545; }
*/

/* ----------------------------------------------------------------------------
 * МЕНЮ ПОЛЬЗОВАТЕЛЯ (ВТОРАЯ ЛИНИЯ В HEADER)
 * Класс:
 *   .user-menu    — контейнер для ссылок по ролям
 * ------------------------------------------------------------------------- */

.user-menu a {
    font-size: 0.95rem;
    color: #0d6efd;                /* Bootstrap primary цвет */
}

.user-menu a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * FOOTER (НИЖНИЙ КОЛОНТИТУЛ)
 * Класс:
 *   .app-footer   — футер в footer.php
 * ------------------------------------------------------------------------- */

.app-footer {
    font-size: 0.9rem;
    color: #6c757d;           /* muted текст */
    background-color: #f8f9fa;
}

/* Чуть уменьшим межстрочный интервал в футере */
.app-footer p {
    margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------------------------
 * КАРТОЧКИ / КОНТЕНТНЫЕ БЛОКИ
 * К примеру, блок "welcome" или "dashboard" может быть в .card
 * Здесь можно задать общий стиль для таких "основных" карточек.
 * ------------------------------------------------------------------------- */

.card {
    border-radius: 0.5rem;
}

/* Если понадобится "главная" карточка, можно вешать класс .card-main,
   а здесь немного усилить тень. Пока оставим на будущее.

.card-main {
    box-shadow: 0 0.35rem 1.2rem rgba(0, 0, 0, 0.07);
}
*/

/* ----------------------------------------------------------------------------
 * ФОРМЫ (ПО-УМОЛЧАНИЮ Bootstrap справляется, но можно чуть добавить)
 * ------------------------------------------------------------------------- */

/* Немного больше вертикального пространства между элементами формы */
.form-group,
.mb-form-row {
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------------------------
 * МЕЛКИЕ ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ (МОГУТ ПРИГОДИТЬСЯ ПОТОМ)
 * ------------------------------------------------------------------------- */

/* Тихий текст-подсказка (ещё слабее, чем text-muted) */
.text-hint {
    font-size: 0.8rem;
    color: #adb5bd;
}

/* Блок-ограничитель ширины для форм, если нужно центрировать:
   .form-narrow { max-width: 600px; margin: 0 auto; } */

.form-narrow {
    max-width: 600px;
    margin: 0 auto;
}