:root {
    --main-color:       #1a237e;
    --top-bar-back:     linear-gradient(135deg, #1a237e, #283593);
    --top-bar-height:   56px;
	--body-back:        #f0f2f5;
	--body-text:        #333;
    --big-radius:       20px;
    --small-radius:     10px;
    --aside-width:      240px;
    --aside-back:       #fff;
	--box-shadow:		0 2px 8px rgba(0,0,0,0.3);
}
/* ===== СБРОС И БАЗОВЫЕ СТИЛИ ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color:var(--body-back);
	color:var(--body-text); min-height:100vh; }

/* ===== SHARED STYLES ===== */
.popup { position:absolute; top:100%; left:0; box-shadow:var(--box-shadow); z-index:500; display:block; }
.flexvc { display:flex; align-items:center; }
.between { display:flex; justify-content:space-between; }
.around { justify-content:space-around; display:flex; }
.wrap20 { display:flex; flex-wrap:wrap; gap:20px; overflow:auto; }
.pad10 { padding:10px; } .pad20 { padding:20px; } .pad30 { padding:30px; }
.maxw60 { max-width:60px; } .maxw100 { max-width:100px; } .maxw200 { max-width:200px; } .maxw300 { max-width:300px; } .maxw400 { max-width:400px; }
.scale0 { transform:scale(0); } .flex1 { flex:1; }
.scroll-content { overflow:auto; flex:1; }
.auto { margin:auto; }
.wfit { width:fit-content; }

/* ===== ГЛАВНОЕ МЕНЮ (Верхняя панель) ===== */
.top-bar { background:var(--top-bar-back); color:white; display:flex; align-items:center; height:var(--top-bar-height);
    padding:0 24px; position:fixed; top:0; left:0; right:0; z-index:500; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.top-bar .logo { display:flex; align-items:center; gap:12px; margin-right:48px; font-size:18px; font-weight:700; letter-spacing:0.5px; }
.top-bar .logo .logo-icon { width:36px; height:36px; background:rgba(255,255,255,0.15); border-radius:8px;
	display:flex; align-items:center; justify-content:center; font-size:20px; padding:5px; }
.logo-icon > div { background-color:#fff; border-radius:50%; background-image:url(../../favicon/favicon.svg);
	width:100%; height:100%; background-size:contain; }
.main-nav { display:flex; height:100%; align-items:stretch; }
.main-nav a, .user-info a { color:rgba(255,255,255,0.75); text-decoration:none; padding:0 20px; display:flex; align-items:center;
	font-size:14px; font-weight:500; transition:all 0.2s; border-bottom:3px solid transparent; position:relative; height:100%;
	cursor:pointer; }
.main-nav a:hover, .user-info a:hover { color:white; background:rgba(255,255,255,0.08); }
.main-nav a.active { color:white; border-bottom-color:#64b5f6; background:rgba(255,255,255,0.1); }
.top-bar a .nav-icon { margin-right:8px; font-size:16px; }

/* ===== ACCOUNT ===== */
.user-menu { position:relative; display:flex; align-items:center; width:100%; height:100%; cursor:pointer; gap:12px;
	padding:0 12px; }
.user-menu:hover { background:rgba(255,255,255,0.08); color:white; }
.user-info { margin-left:auto; height:100%; }
.user-info .avatar { width:34px; height:34px; border-radius:50%; background:#5c6bc0; display:flex; align-items:center;
	justify-content:center; font-size:14px; font-weight:600; border:2px solid rgba(255,255,255,0.3); }
.user-info .user-name { font-size:13px; font-weight:500; }
.user-info .user-role { font-size:11px; color:rgba(255,255,255,0.5); }
#user-menu { right:0; left:auto; background:var(--aside-back); }

/* ===== ОБЁРТКА КОНТЕНТА ===== */
main { position:fixed; z-index:100; padding:20px; display:flex; flex-direction:column;
    left:var(--aside-width); top:var(--top-bar-height); height:calc(100vh - var(--top-bar-height)); width:calc(100% - var(--aside-width)); }
main.no-menu { left:0; width:100%; }

/* ===== СУБ-МЕНЮ (Левая панель) ===== */
.sidebar { width:var(--aside-width); background:var(--aside-back); border-right:1px solid #e0e0e0; padding:20px 0; position:fixed;
    top:var(--top-bar-height); bottom:0; left:0; overflow-y:auto; z-index:100; box-shadow:2px 0 8px rgba(0,0,0,0.04); }
.sidebar .menu-section { margin-bottom:8px; }
.sidebar .menu-section-title { padding:8px 24px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
    color:#9e9e9e; }
.sidebar a, #user-menu a  { display:flex; align-items:center; gap:12px; padding:10px 24px; color:#555; text-decoration:none; font-size:13.5px;
    transition:all 0.15s; border-left:3px solid transparent; }
.sidebar a:hover, #user-menu a:hover { background:#f5f7ff; color:var(--main-color); }
.sidebar a.active { background:#e8eaf6; color:var(--main-color); font-weight:600; border-left-color:var(--main-color); }
.sidebar a .sub-icon { width:20px; text-align:center; font-size:15px; opacity:0.7; }
.sidebar a .badge { margin-left:auto; background:#ef5350; color:white; font-size:10px; padding:2px 7px; border-radius:10px; font-weight:600; }

/* ===== ОСНОВНОЙ КОНТЕНТ ===== */
.content { flex:1; padding:24px; min-width:0; }

/* ===== ЗАГОЛОВОК СТРАНИЦЫ ===== */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h1 { font-size:22px; font-weight:700; color:var(--main-color); }
.page-header .breadcrumb { font-size:13px; color:#888; }
.page-header .breadcrumb a { color:#5c6bc0; text-decoration:none; }

/* ===== ПАНЕЛЬ ИНСТРУМЕНТОВ ===== */
.toolbar { background:white; border-radius:12px; padding:18px 24px; margin-bottom:20px;
    box-shadow:0 1px 4px rgba(0,0,0,0.06); border:1px solid #e8e8e8; }
.toolbar-title { font-size:13px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:14px; display:flex;
    text-decoration:none; }
.toolbar-title a { text-decoration:underline; color:inherit; font-weight:inherit; font-size:inherit; }    
.toolbar-title a:hover { color:#333; }
.toolbar-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.toolbar-group { display:flex; flex-direction:column; gap:5px; }
.toolbar-dummy { flex:1; }

label { font-size:12px; font-weight:600; color:#777; }
select, input, textarea { padding:9px 14px; border:1.5px solid #ddd; border-radius:8px; font-size:13.5px; 
	color:#333; background:#fafafa; transition:all 0.2s; outline:none; width:100%; }
textarea { resize:vertical; min-height:50px; }
select:focus, input:focus, textarea:focus { border-color:#5c6bc0; background:white; box-shadow:0 0 0 3px rgba(92,107,192,0.12); }
.toolbar-actions { display:flex; gap:10px; align-items:flex-end; }

.btn { padding:9px 20px; border:none; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; transition:all 0.2s;
    display:flex; align-items:center; gap:6px; white-space:nowrap; justify-content:center; }
.btn-primary { background:linear-gradient(135deg, #1a237e, #3949ab); color:white; }
.btn-primary:hover { background:linear-gradient(135deg, #0d1642, #283593); box-shadow:0 4px 12px rgba(26,35,126,0.3); }
.btn-secondary, .btn-page { background:#f5f5f5; color:#555; border:1.5px solid #ddd; }
.btn-secondary:hover, .btn-page:hover { background:#cce; border-color:#ccc; }
.btn-success { background:linear-gradient(135deg, #2e7d32, #43a047); color:white; }
.btn-success:hover { box-shadow:0 4px 12px rgba(46,125,50,0.3); }
.btn-page { padding:5px 8px; }
.btn-help { padding:3px 5px; margin-left:10px; }

/* ===== ИНФОРМАЦИОННАЯ ПАНЕЛЬ ЖУРНАЛА ===== */
.journal-info { background:white; border-radius:12px 12px 0 0; padding:16px 24px; border:1px solid #e8e8e8; border-bottom:none;
    display:flex; align-items:center; justify-content:space-between; }
.journal-info .journal-meta { display:flex; gap:32px; }
.journal-info .meta-item { display:flex; flex-direction:column; }
.journal-info .meta-item .meta-label { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:0.5px;  font-weight:600; }
.journal-info .meta-item .meta-value { font-size:14px; font-weight:600; color:#333; margin-top:2px; }
.journal-nav { display:flex; gap:8px; align-items:center; }
.journal-nav button { width:36px; height:36px; border-radius:8px; border:1.5px solid #ddd; background:white; cursor:pointer;
    font-size:16px; color:#555; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.journal-nav button:hover { border-color:#5c6bc0; color:#5c6bc0; background:#f5f7ff; }
.journal-nav .semester-label { font-size:13px; font-weight:600; color:#555; margin:0 8px; }
.pagination { display:flex; align-items:center; justify-content:flex-start; font-size:12px; color:#666; gap:20px; }
.pagination-buttons { display:flex; gap:5px; align-items:center; }
.pagination-buttons span { padding:5px 8px; color:var(--main-color); font-weight:600; font-size:13.5px; border-style:dashed;
	border-radius:8px; border:1.5px solid #ddd; }

/* ===== ТАБЛИЦА ЖУРНАЛА ===== */
.journal-table-wrapper { background:white; border:1px solid #e8e8e8; border-top:none; border-radius:0;
    overflow-x:auto; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.journal-table { width:100%; border-collapse:collapse; min-width:900px; font-size:13px; }
.journal-table th { background-color:rgba(26,35,126,0.1); padding:5px; }
.journal-table th.asc, .journal-table th.desc { background-color:rgb(209,211,229); }
.journal-table th.asc::after { content:" ▲"; color:inherit; }
.journal-table th.desc::after { content:" ▼"; color:inherit; }
.journal-table th:hover { background-color:rgb(194,193,215); cursor:pointer; }

/* Заголовки дат */
.journal-table thead th { background:#f8f9fc; border:1px solid #e0e0e0; text-align:center; position:sticky;
    top:1px; z-index:50; box-sizing:content-box; }
.journal-table thead th .th-inner { padding:8px 4px; }
.journal-table thead th .th-date { font-size:13px; font-weight:700; color:#333; display:block; padding:0; }
.journal-table thead th .th-weekday { font-size:10px; color:#999; font-weight:400; display:block; margin-top:2px; }

/* Заголовки разделов (неделя, месяц) */
.journal-table thead th.section-header { background:#e8eaf6; }
.journal-table thead th.section-header .th-date { font-size:11px; color:var(--main-color); text-transform:uppercase; letter-spacing:0.5px; }

/* Фиксированная первая колонка (№) и вторая (ФИО) */
.journal-table .col-num { width:40px; min-width:40px; max-width:40px; position:sticky; left:0; z-index:20; background:#fafafa; }
.journal-table thead .col-num { z-index:30; background:#f8f9fc; }
.journal-table .col-name { width:220px; min-width:220px; max-width:220px; position:sticky; left:40px; z-index:20; }
.journal-table thead .col-name { z-index:30; background:#f8f9fc; }
.journal-table thead th.col-name { text-align:left; }
.journal-table thead th.col-name .th-inner { padding:10px 16px; }
.journal-table tbody td { border:1px solid #e8e8e8; padding:0 6px; text-align:center; height:36px; vertical-align:middle; }
.journal-table tbody td.col-num { background:#fafafa; color:#999; font-size:12px; font-weight:600; }
.journal-table tbody td.col-name { text-align:left; padding:6px 16px; font-weight:500; color:#333; white-space:nowrap; }
.journal-table tbody td.col-fio { text-align:left; padding:6px 16px; font-weight:500; color:#333; white-space:nowrap; }
.journal-table tbody tr:nth-child(even) td { background:#f0f0f5;}
.journal-table tbody tr:hover td { background:#f5f7ff; }
.journal-table.clickable tbody tr:hover td { background:#f5f7ff; cursor:pointer; }
.journal-table tbody tr:hover td.col-num { background:#eef0fb; }
.journal-table tbody tr:hover td.col-name { background:#f5f7ff; }
.journal-table a { color:inherit; text-decoration:none; }
.journal-table a:hover { color:var(--main-color); text-decoration: underline; }

/* Оценки */
.grade { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px;
    font-weight:700; font-size:13px; cursor:pointer; transition:transform 0.15s; }
.grade:hover { transform:scale(1.2); }
.grade-5 { background:#e8f5e9; color:#2e7d32; }
.grade-4 { background:#e3f2fd; color:#1565c0; }
.grade-3 { background:#fff8e1; color:#f57f17; }
.grade-2 { background:#ffebee; color:#c62828; }
.grade-n { background:#fafafa; color:#bbb; font-size:14px; }
.grade-e { background:#fce4ec; color:#ad1457; font-size:11px; font-weight:700; }

/* Столбец среднего балла */
.journal-table .col-avg { width:60px; min-width:60px; position:sticky; right:0; z-index:20; background:#f8f9fc; }
.journal-table thead .col-avg { z-index:30; background:#e8eaf6; }
.avg-value { font-weight:700; font-size:14px; }
.avg-high { color:#2e7d32; }
.avg-mid { color:#1565c0; }
.avg-low { color:#c62828; }

/* Итоговая строка */
.journal-table tfoot td { border:1px solid #e0e0e0; padding:10px 4px; background:#f8f9fc; font-weight:600; font-size:12px; color:#666; }

/* Статусная строка под таблицей */
.table-footer { background:white; border:1px solid #e8e8e8; border-top:none; border-radius:0 0 12px 12px; padding:12px 24px;
    display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#888; }
.legend { display:flex; gap:16px; align-items:center; }
.legend-item { display:flex; align-items:center; gap:5px; }
.legend-color { width:16px; height:16px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; }

/* ===== СТАТИСТИКА (карточки) ===== */
.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:20px; }
.stat-card { background:white; border-radius:12px; padding:20px; border:1px solid #e8e8e8; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.stat-card .stat-label { font-size:12px; color:#999; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.stat-card .stat-value { font-size:28px; font-weight:700; color:var(--main-color); margin-top:4px; }
.stat-card .stat-sub { font-size:12px; color:#2e7d32; margin-top:4px; }
.stat-card .stat-sub.negative { color:#c62828; }

/* ===== СКРОЛЛБАР ===== */
.journal-table-wrapper::-webkit-scrollbar { height:8px; }
.journal-table-wrapper::-webkit-scrollbar-track { background:#f0f0f0; border-radius:4px; }
.journal-table-wrapper::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }
.journal-table-wrapper::-webkit-scrollbar-thumb:hover { background:#aaa; }

/* ===== ПЕРИОДЫ (разделители недель) ===== */
.journal-table td.week-separator, .journal-table th.week-separator { background:#f0f1f5; border-left:2px solid #c5cae9; }

/* ===== СКРОЛЛБАР ===== */
.permissions td { padding:2px 5px; }
.permiss { padding:3px 10px; border:1px solid #bbb; background-color:rgba(0, 255, 0, 0.1); color:#2e7d32;
    cursor:pointer; border-radius:10px; text-align:center; margin:auto; width:fit-content; }
.permiss[data-value="0"] { background-color:rgba(0,0,0,0.1); color:#bbb; }
.permiss[data-value="0"]:hover, .permiss:hover { background-color:var(--main-color); color:#fff; }
.permiss.changed { box-shadow:0 0 5px rgba(255,0,0,0.8); }

/************************************************************/
/** 				МОДАЛЬНЫЕ ОКНА 							*/
/************************************************************/
.modal { display:flex; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);
	backdrop-filter:blur(8px); z-index:2000; justify-content:center; align-items:center; }
.modal-box { background:linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(253,250,245,0.96) 100%);
    padding:20px 25px; border-radius:20px; min-width:360px; position:relative;
    box-shadow:0 24px 80px rgba(0,0,0,0.22); border:1px solid rgba(229, 152, 155, 0.25);  backdrop-filter:blur(10px);
    animation:fadeIn 0.35s ease-out; max-height:95vh; max-width:90vw; }
.modal-title { background:linear-gradient(135deg, rgba(26,35,126,0.10), rgba(92,107,192,0.06)); position:relative;
    border:1px solid rgba(92,107,192,0.18); border-radius:10px; padding:3px 50px 3px 20px; margin-bottom:16px; }
.modal-title h2 { font-size:22px; font-weight:800; color:var(--main-color); margin-bottom:8px; }
.modal-box .close { position:absolute; top:2px; right:5px; width:34px; height:34px; border-radius:12px; display:flex; align-items:center;
    justify-content:center; font-size:26px; color:rgba(0,0,0,0.35); cursor:pointer; transition:.3s; }
.modal-box .close:hover { color:rgba(0,0,0,1.0); }
.scroll-form { max-height:calc(95vh - 170px); overflow-y:auto; display:flex; gap:10px; flex-direction:column; }
.form-buttons { display:flex; align-items:center; justify-content:center; padding:10px 0; gap:20px; }
.form-buttons > * { width:100%; }
.form-error { border-radius:10px; background-color:rgba(255, 0, 0, 0.10); color:#b00020; border:1px solid rgba(176, 0, 32, 0.35);
    padding:12px 14px; margin:6px auto; text-align:left; }
.p-help { max-width:400px; padding:5px 0; text-indent:24px; text-align:justify; } .p-help:last-child { margin-bottom:15px; }

/************************************************************
* 				ЛЕНТА НОВОСТЕЙ 								*
************************************************************/
.news-hero { background:linear-gradient(135deg, rgba(26,35,126,0.10), rgba(92,107,192,0.06)); border:1px solid rgba(92,107,192,0.18); border-radius:12px; padding:18px 24px; margin-bottom:16px; }
.news-hero h1 { font-size:22px; font-weight:800; color:var(--main-color); margin-bottom:8px; }
.news-hero p { color:#666; font-size:13.5px; line-height:1.4; max-width:820px; }
.news-actions { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.news-hero .btn { padding:10px 18px; }
.news-feed { background:white; border:1px solid #e8e8e8; padding:16px 20px; flex:1; overflow: auto; }
.news-feed h2 { font-size:13px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px; }
.news-item { padding:12px 0; border-top:1px solid #efefef; display:flex; gap:12px; align-items:flex-start; }
.news-item:first-child { border-top:none; padding-top:0; }
.news-date { min-width:120px; font-size:12px; color:#9e9e9e; font-weight:600; }
.news-title { font-size:14px; font-weight:700; color:#333; margin-bottom:4px; }
.news-text { font-size:13.5px; color:#666; line-height:1.35; }
.news-text img { max-width:300px; display:block; margin:10px auto; }

/************************************************************
* 				СООБЩЕНИЯ	 								*
************************************************************/
#messages { position:fixed; display:flex; flex-direction:column-reverse; right:50px; bottom:50px; height:100vh; z-index:1500;
	max-width:300px; }
.message { animation:fadeInMess 5.1s linear; background:linear-gradient(135deg, rgb(255, 255, 255), rgb(212, 219, 255));
	border-radius:12px; padding:18px 24px; margin-bottom:16px; box-shadow:0 24px 80px rgba(0,0,0,0.22); border:1px solid #bbb; }

/************************************************************
* 				ВНЕШНИЕ САЙТЫ СТУДЕНТОВ						*
************************************************************/
.news-text img { max-width:300px; display:block; margin:10px auto; }
.external a { display:block; background:white; border-radius:12px; padding:20px; text-decoration: none;
    border:1px solid #e8e8e8; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.external a:hover { text-decoration: underline; color:#0d1642; }

/************************************************************
* 				АНИМАЦИЯ	 								*
************************************************************/
@keyframes fadeIn {	from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInMess {	
    0% { opacity:0; transform:translate(-50%, -40%); } 
    10% { opacity:1; transform:translate(-50%, -50%); }
    90% { opacity:1; transform:translate(-50%, -50%); } 
    100% { opacity:0; transform:translate(-50%, -80%); }
}

.hidden { display:none; }

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width:1200px) {
    .stats-row { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:900px) {
    main, main.no-menu { left:0; width:100vw; padding:5px; }
    .sidebar { display:none; }
    .content { margin-left:0; }
    .toolbar-row { flex-direction:column; }
    .toolbar-group { min-width:100%; }
}