*{
box-sizing:border-box;
font-family: 'Montserrat';

}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight:400;
    src: local('Montserrat'),
        url(../fonts/Montserrat.ttf) format('truetype');}

/* Переменные (цвета, размеры) — в css/tokens.css */


input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

input {
    border-radius:var(--border-radius);
}

/* Убираем стандартный фон и добавляем свою тень */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important; /* Цвет фона */
    box-shadow: 0 0 0 30px white inset !important; /* Цвет фона */
    -webkit-text-fill-color: var(--text) !important; /* Цвет текста */
    caret-color: var(--text); /* Цвет курсора */}

html{
	height: 100%;}

body {
	font-family: 'Montserrat';
	background:var(--bg-body);
	font-size: 9pt;
    display:flex;
    flex-direction:column;
    min-height: 100vh;
    min-width:360px;
}

header {
	background: var(--cl-fon-gray);
	padding:20px 0 0;}
	
.content {
    flex: 1;
    margin:0 auto;
    width:100%;
    max-width:var(--content-size);
    padding:0 20px;
}

/* Универсальный контейнер: используется на страницах php/lessons_add.php,
   php/lessons_edit.php, php/otchet_jurnal_group.php,
   teacher/lessons_add_teacher.php, teacher/lessons_edit_teacher.php,
   teacher/teacher_journal_group.php. Ширина согласована с .content. */
.container {
    width:100%;
    max-width:var(--content-size);
    margin:0 auto;
    padding:20px;
}

.header-block {
    margin:0 auto;
    width:100%;
    max-width:var(--content-size);
    padding:0 20px;}

.header-block h2{
    width:100%;
    padding:5px 0!important;
    display:block !important;
    font-size:20pt;
    margin:10px 0 10px;
    border-bottom: 1px solid var(--border-strong);}

.header-block h2 span{
    font-size:14pt;}

.header-block p{
    font-size:12pt;
    margin:10px 0;}

.header-block p span{
    font-size:10pt;
    }
    


.logo {
    margin:0 auto;
    max-width:var(--content-size);
    color:var(--on-primary);
    padding:0 20px;
    font-size:16pt;
    text-transform:uppercase;
    font-family: 'Montserrat';
}


/***** ***** ***** ***** ***** *****  --- СТРАНИЦА АВТОРИЗАЦИИ --- *****/
body.login-page {
	font-family: 'Montserrat';
	background: var(--cl-fon-gray);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 320px;}

body.login-page .login-form {
	background: var(--bg-body);
	margin: auto;
	padding: 30px 40px;
	box-shadow: 2px 3px 10px var(--shadow-color);
	width: 100%;
	max-width: 310px;
	border-radius:var(--border-radius);
	box-sizing: border-box;}

body.login-page .login-form form{
	display: flex;
	flex-direction: column;}

body.login-page .login-form h2 {
	font-size: 18pt;
	margin:0 0 20px;
	
	color: var(--text);}

body.login-page .login-form p{
	font-size: 12pt;
	line-height: 1.3;
	color: var(--text);
	
	margin: 5px 0;}

body.login-page .login-form input{
	background-color: var(--surface-2);
	border: none;
	color: var(--text);
	font-size: 13pt;
	width: 100%;
	margin: 0 0 15px;}


input:active,
input:focus{
    background-color: var(--surface-2);
}

body.login-page ::placeholder {
	color: var(--cl-login-placeholder);
	color: var(--text);
	background:var(--surface-2);}

body.login-page .login-form button {
	font-family: 'Montserrat';
	background: var(--cl-green);
	color: var(--on-primary);
	padding: 10px 0;
	margin: 15px 0 0;
	border: none;
	font-size: 14pt;
	/* font-weight: 600; */
	border-radius: 5px;
	cursor: pointer;}

body.login-page .login-form button:hover {
	background: var(--cl-green);}

body.login-page .login-form p.errors {
	color: var(--danger);}
	
.link {
    color:var(--text);
    
    font-size:11pt;
}


/***** ***** ***** ***** ***** *****  - МЕНЮ - *****/
header .menu {
    font-family: 'Montserrat';
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	display:table;
	padding: 20px 20px 0;}

header .menu a{
	color: #f3f3f3;
	font-size: 13pt;
	float:left;
	padding: 0 0 20px;
	margin: 0 20px 0 0;
	display: inline-block;
    border-bottom:5px solid var(--cl-fon-gray);}

header .menu a:hover{
	color:var(--cl-green-light);
    border-bottom:5px solid var(--cl-green-light);}
	
header .menu a:last-child{
    margin: 0 0 0 20px;
    float:right;}

/***** ***** ***** ***** ***** *****  - Вспомогательное МЕНЮ - *****/	
.menu2 {
    /* background:var(--surface-3); */
	width: 100%;}
	
.menu2 > div{
    padding: 10px 20px 20px;
    width: 100%;
    margin: 0 auto;
    display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	max-width: var(--content-size);}

.menu2 a{
	color: var(--cl-green);
	
	font-size: 12pt;
	/* text-transform: uppercase; */
	margin: 0 20px 0 0;
	padding: 3px 0;
	display: inline-block;
	font-weight: 100;
    border-bottom: 2px solid var(--border);
}

.menu2 a:hover{
	color:var(--cl-green);
    border-bottom: 2px dotted var(--cl-green)
}


.header-name {
    padding:30px 0 0;
    /* background:var(--surface-3); */
}
    
h1{
    width:100%;
    font-family: 'Montserrat';
	color: var(--text);
	
	text-transform: uppercase;
	max-width: 1300px;
	margin: 0 auto;
	display: block;
	font-size: 18pt;
	padding: 0 20px;}

h1 span{
    font-size:12pt;}

.error {
	color: var(--cl-red);
	
	display: block;
	margin: 10px auto;
	width: 100%;
	clear: both;

	font-size: 12pt;
	max-width: 1300px;
	box-sizing: border-box;

}

.cl_green {
    color: var(--cl-green);
    
}
    
.cl_red {
    color:var(--cl-red);
    
}

.green {
	max-width: 1300px;
	background: var(--cl-green);
	color: var(--on-primary);
	display: block;
	margin: 10px auto 0;
	padding: 12px 20px;
	width: 100%;
	clear: both;
	border-radius: var(--border-radius);
	font-size: 12pt;
	box-sizing: border-box;
    
    animation: hideAnimation 0s ease-in 5s; 
    animation-fill-mode: forwards;}
    
    @keyframes hideAnimation { to { visibility: hidden; width: 0; height: 0; }}



a{
    position:relative;
	color: var(--cl-green);
	text-decoration: none;}

/* Если установлено соединение с БД */

.connect {
    width:100%;
	margin: 0 auto;
	padding: 5px;
	background:var(--cl-green);
	text-align: center;
	font-size:0;}


/* Все студенты */

.st_famil a {
    color:var(--text);
    position:relative;
    padding:10px;
    display:block}

.users a .tooltip-text {display:none;}

.st_famil a:hover{
    color:red;}

.users a:hover .tooltip-text {
    width:260px;
    color:000;
    line-height:1.5;
    padding:20px;
    border-radius:var(--border-radius);
    position:absolute;
    background:rgba(255,255,255,.95);
    right:-300px;
    box-shadow:2px 2px 10px var(--shadow-color);
    top:0px;
    z-index:2;
    display:block;}
    
.st_famil a:hover .tooltip-text:hover {
    display:block}
    



/**/

form {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;	
	display: flex;
	flex-wrap: wrap;
}
.block_cat {
    clear:both;
	width: 100%;}

.block_cat p{
	font-size: 12pt;
	margin: 3px 0;
}

.block_form {
	float: left;
	margin: 5px 20px 5px 0;
}
.block_textarea {
    clear:both;
}

form {
	margin: 0px auto;
}

label {
    padding:10px 0 10px;
    display:table;
}

form input{
    font-family: 'Montserrat';
	padding: 10px 20px;
	border: 1px solid var(--border);
	outline: none;
	background: var(--surface-2);
	font-size: 11pt;
	color: var(--cl-blue);
    
}

form input[name="pasport_number"]{
	width: 125px;}

form input[name="pasport_kem_vydan"],
form input[name="adress"]{
	width: 450px;}

form input[type="date"]{
    width: 240px;}
    
form input[type="text"].long{
    min-width:100%;
}

/* Вывод даты */
input[type="date"] {
    max-width:220px;}

form input[type="submit"],
button{
	padding: 10px 20px;
	border: none;
	outline: none;
	background: var(--cl-green);
	color: var(--on-primary);
	font-size: 12pt;
	border-radius:var(--border-radius);
	margin:10px 0;
	cursor: pointer;}

::placeholder{
	font-size: 8pt;}

select{
    font-family: 'Montserrat';
    min-width:220px;
    font-size: 12pt;
    padding: 10px 15px;
	border: 1px solid var(--border);
	outline: none;
	background: var(--surface-2);
	font-size: 11pt;
	border-radius: var(--border-radius);
	color: var(--cl-blue);
    
}

select.st_filial{
    min-width:240px;}
    
textarea {
    min-width:100% !important;
    display:block;
    min-height:80px;
    font-family: 'Montserrat';
	padding: 10px 20px;
	border: 1px solid var(--border);
	outline: none;
	background: var(--surface-2);
	font-size: 11pt;
	line-height:1.3;
	resize:none;
	color: var(--cl-blue);
	
}

/* Вывод Студентов в Таблицу  */

.users {
	width: 100%;
	max-width: 1300px;
	margin: 50px auto;
	font-size: 11pt;}

.users tr:nth-child(odd) {
	background:var(--cl-gray-light);}

.users tr td {
	padding: 10px 10px;
	position: relative;
	min-width: 100px}

.users tr td.id,
.users tr td.doc,
.users tr td.edit {
	min-width: 10px	}

.users tr td.dogovor{
	background: var(--surface-3);
}



.users tr td.r_surname,
.users tr td.r_name,
.users tr td.r_patron_name {
	background:rgba(47,159,137,.10);}

.users .icon {
	width: 15px;}



/***** ***** ***** ***** ***** ***** СТРАНИЦА - ДОГОВОР */

.dogovor {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;}

.dogovor h1,
.dogovor h2{
	text-align: center;
	font-size: 11pt;
	font-weight: 300;
	line-height: 1;
	color: var(--text);}

.dogovor h3{
	text-align: center;
	font-size: 10pt;
	font-weight: 300;
	margin: 12px 0}

.dogovor p{
	font-size: 9pt;
	line-height: 1.25;
	margin: 5px 0;
	text-align: justify}

.dogovor p.left{
	display: block;
	float: left;
	width: 50%;}

.dogovor p.right{
	display: block;
	float: right;
	width: 50%;
	text-align: right;}

.dogovor span{
	color: red;}

.dogovor .recvizity {
	padding: 10px 5% 0 5%;
	width: 50%;
	float: left;
	box-sizing: border-box;
	text-align: left;}

.dogovor .recvizity p{
	text-align: left;}

.dogovor .recvizity span.small{
	font-size:8pt;
	color: gray;
	padding: 0 40px;}

@media print {
    .connect{
        display:none;
    }
	.dogovor span{
		color: var(--text);}

	header {display: none;}
}



/* Dashboard */



/* Поиск на сайте */

.search {
    width:100%;
    display:table;
    margin:20px 0;
    clear:both;}

.search form{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;}

.search input{
    width:80%;}

.search button {
    width:calc(20% - 20px);
    background:var(--cl-green);
    color:var(--on-primary);
    border:0;
    outline: 0;
    border-radius:var(--border-radius);
    font-family: 'Montserrat';
    padding:15px 20px;
    margin:0;
    font-size:12pt;
    cursor:pointer;}

.search-result {
    margin:20px 0;
    font-size:12pt}

    @media screen and (max-width:700px) {
        .search input{
            width:70%;}
        
        .search button {
            width:calc(30% - 15px);}
    }


/* Dashboard  - Всего студентов  и Ниаменований групп */    


.add_students,
.add_groups {
    box-sizing:border-box;
    display:table;
    float:right;
    width:calc(20% - 20px);
    margin:10px 0 0;
    background:var(--surface-2);
    box-shadow:2px 2px 15px #777;
    border-radius:var(--border-radius);
    padding:20px;}

.add_students p,
.add_groups p{
    text-align:right;
    margin:15px 0 0px;
    font-size:10pt;}

.add_students p:first-child,
.add_groups p:first-child{
    text-align:right;
    list-style:1;
    margin:0;
    font-size:30pt;}
    
.add_students p a,
.add_groups p a{
    font-size:11pt;
    padding:0 0 2px;
    display:inline-table;
    border-bottom:1px dotted var(--border-strong);
    color:var(--text);}
    
.add_students p a:hover,
.add_groups p a:hover{
    color:var(--cl-green);
    border-bottom:1px dotted var(--cl-green);}

.add_students p:nth-child(1) a,
.add_groups p:nth-child(1) a{
    font-size:30pt;
    text-decoration: none;}

.add_students p:nth-child(2),
.add_groups p:nth-child(2){
    text-align:right;
    list-style:1;
    color:var(--text-muted);
    margin:5px 0 0px;}

.add_students span,
.add_groups span{
    text-align:right;
    font-size:10pt;}

.add_students {
    margin:5px 20px 0 0;}
    
/* Студенты  - Фильтр всех студентов */  
    
.filter_form {
    background:var(--surface-3);
    padding:20px;
    display:flex;
    gap:0px 20px;
    margin:0;
    border-radius:var(--border-radius);
    flex-wrap:wrap;}
    
.filter_form > div{
    width:calc(33.33% - 20px*3/4);
    position:relative;}
    
.filter_form > div p{
    font-size:10pt;
    margin:10px 0 5px;
}

.filter_form > div select {
    font-family: 'Montserrat';
    width:100%;
    border-radius:var(--border-radius);
    margin:3px 0 0;}

.filter_form > div:last-child input{
    position:absolute;
    right:0px;
    bottom:0px;}
    
@media screen and (max-width:900px) {
    .filter_form > div{
    width:100%;
}
}

/* Dashboard  - Последние 5 студентов из базы */

.last5students {
    clear:both;
    padding:10px 0;}

.last5students h3{
    margin:0;}


/***** ***** ***** ***** *****  СТУДЕНТЫ ГРУППЫ  ***** ***** ***** *****/

.users-filter {
    margin:0;
    clear:both;
    width:100%;
    font-size:11pt;
}

.users-filter tr{
    width:100%;
    display:table;
    border-radius:var(--border-radius);
    margin:15px 0;
    background:var(--surface-2);
    position:relative;
    counter-increment: student;
}

.users-filter tr:first-child{
    margin:0 0 15px;
}

.users-filter tr:nth-child(10){
    margin:15px 0 40px;
}

.users-filter tr:before{
    position:absolute;
    content:"";
    width:30px;
    height:30px;
    display:table;
    border-radius:var(--border-radius);
    left:15px;
    top:8px;
    padding:12px;
    background:var(--surface);
}

.users-filter tr:after{
    position:absolute;
    width:30px;
    height:30px;
    left:30px;
    top:15px;
    content:counter(student);
}

.users-filter tr td{
    padding:15px 20px;
    vertical-align: middle;
}

.users-filter tr td:nth-child(1) {
    width:30%;
    text-align:left;
    
    padding-left:60px;
}

.users-filter tr td:nth-child(2) {
    width:25%;
}

.users-filter tr td:nth-child(3) {
    width:18%;
}

.users-filter tr td:nth-child(4) {
    width:14%;
    text-align:right;
}

.users-filter tr td:nth-child(5) {
    width:13%;
    text-align:center;
}

/* "Последние 10 студентов заключившие договор" (Dashboard) — у этой таблицы
   7 колонок, а не 5, под которые рассчитаны проценты выше. Задаём свои
   ширины, чтобы сумма и статус не сжимались до переноса на несколько строк. */
.contracts-table tr td:nth-child(1) {
    width: 22%;
}

.contracts-table tr td:nth-child(2) {
    width: 12%;
}

.contracts-table tr td:nth-child(3) {
    width: 19%;
}

.contracts-table tr td:nth-child(4) {
    width: 11%;
    text-align: left;
}

.contracts-table tr td:nth-child(5) {
    width: 10%;
    text-align: left;
    white-space: nowrap;
}

.contracts-table tr td:nth-child(6) {
    width: 13%;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.contracts-table tr td:nth-child(7) {
    width: 13%;
    text-align: center;
}

@media screen and (max-width: 900px) {
    .contracts-table {
        display: block;
        overflow-x: auto;
    }

    .contracts-table tr {
        display: table;
        min-width: 760px;
    }
}

.users-filter a {
    color:var(--text);
    position:relative;
    display:inline-block;
}

.users-filter a .tooltip-text {
    display:none;
}

.users-filter a:hover{
    color:var(--cl-green);
    
}

.users-filter a:hover .tooltip-text {
    width:300px;
    color:var(--text);
    line-height:1.5;
    padding:20px;
    border-radius:var(--border-radius);
    position:absolute;
    background:var(--surface) !important; /* ПОЛНОСТЬЮ НЕПРОЗРАЧНЫЙ БЕЛЫЙ */
    right:-320px;
    box-shadow:2px 2px 10px var(--shadow-color);
    top:0px;
    z-index:2;
    display:block;
    border:1px solid var(--border);
    font-weight:400;
    text-shadow:none;
}

/* ВСЕ внутренние элементы тултипа должны быть на белом фоне */
.users-filter a:hover .tooltip-text * {
    background:transparent;
}

.users-filter a:hover .tooltip-text .tooltip-title {
    font-weight:600;
    font-size:14px;
    color:var(--text);
    border-bottom:1px solid var(--border);
    padding-bottom:8px;
    margin-bottom:8px;
    background:transparent;
}

.users-filter a:hover .tooltip-text .tooltip-row {
    display:flex;
    justify-content:space-between;
    padding:3px 0;
    background:transparent;
}

.users-filter a:hover .tooltip-text .tooltip-row .label {
    color:var(--text-muted);
    font-weight:400;
}

.users-filter a:hover .tooltip-text .tooltip-row .value {
    color:var(--text);
    font-weight:500;
    text-align:right;
}

.users-filter a:hover .tooltip-text .tooltip-divider {
    border-top:1px solid var(--border);
    margin:8px 0;
}

.users-filter a:hover .tooltip-text .tooltip-parent {
    padding:4px 0;
    background:transparent;
}

.users-filter a:hover .tooltip-text .tooltip-parent .parent-name {
    font-weight:500;
    color:var(--text);
}

.users-filter a:hover .tooltip-text .tooltip-parent .parent-phone {
    color:var(--text-muted);
    font-size:12px;
}

.users-filter a:hover .tooltip-text:hover {
    display:block;
}

.tooltip-text,
.tooltip-text * {
    background: var(--surface) !important;
}

.status-badge {
    font-family: 'Montserrat';
    display:inline-block;
    text-align:center;
    min-width:100px;
    padding: 7px 8px;
    border-radius: 12px;
    color: var(--on-primary);
    font-size: 13px;
    font-weight: bold;
    margin:-5px 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    background:var(--surface-3);
}

/* ============================================
   СТИЛИ ДЛЯ БАЛАНСА
   ============================================ */
.balance-positive {
    color: var(--success);
    font-weight: bold;
}

.balance-negative {
    color: var(--danger);
    font-weight: bold;
}

.balance-zero {
    color: var(--info);
    font-weight: bold;
}

.available-lessons {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

.balance-value {
    display: block;
    font-size: 14px;
}

.balance-lessons {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
}

@media screen and (max-width:900px) {
    
    .users-filter tr{
        display:flex;
        flex-wrap:wrap;
    }
    
    .users-filter tr td{
        padding:15px 20px;
    }
    
    .users-filter tr td:nth-child(1) {
        min-width:calc(100% - 120px);
        padding:15px 10px 10px 60px;
        order:1;
    }
    
    .users-filter tr td:nth-child(2) {
        min-width:calc(100% - 120px);
        padding:0px 10px 10px 60px;
        order:3;
    }
    
    .users-filter tr td:nth-child(3) {
        width:100px;
        text-align:right;
        padding:15px 0px 10px;
        order:2;
    }
    
    .users-filter tr td:nth-child(4) {
        min-width:120px;
        padding:9px 20px 20px;
        order:4;
        text-align:right;
    }
    
    .users-filter tr td:nth-child(5) {
        min-width:120px;
        padding:9px 20px 20px;
        order:5;
        text-align:center;
    }
    
    .status-badge {
        margin:-10px 0;
        font-size:8pt;
        padding:4px 10px;
        min-width:90px;
    }
    
    .users-filter a:hover .tooltip-text {
        width:260px;
        right:0;
        top:30px;
        left:0;
        transform:translateX(0);
    }
}







.content h3{
    font-size:14pt;
    margin:10px 0;
    text-transform:uppercase;
}

.content p {
    font-size:12pt;
    margin:10px 0;
    list-style:1.4;
}
.content p a{
    color:var(--cl-green);
    
}

.content p a:hover{}

details{
    margin:10px 0;
    border-radius:var(--border-radius);
    padding:0 20px;
    background:var(--surface-3);
    
}


summary {
    /* text-transform:uppercase; */
    background:var(--surface-2);
    padding:15px 20px;
    border-radius:var(--border-radius);
    font-size:11pt;
    background:var(--cl-fon-gray);
    color:var(--on-primary);
    cursor:pointer;
    margin:0 -20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

/* Количество успешных договоров в группе */
.kol_stud {
    margin:-5px 3px;
    width:27px;
    height:27px;
    display:block;
    padding:7px 0;
    text-align:center;
    color:var(--on-primary);
    float:left;
    border-radius:var(--border-radius);
    background:var(--cl-green);}
    
.kol_not_stud {
    margin:-5px 0;
    width:27px;
    height:27px;
    display:block;
    padding:7px 0;
    text-align:center;
    color:var(--on-primary);
    float:left;
    border-radius:var(--border-radius);
    background:#e22222;}

.settings h3{
    margin:20px 0 10px;
    font-size:16pt;
}

.settings p{
    margin:5px 0;
    line-height:1.3;
}

.settings a{
    color:var(--cl-green);
}


.st_date {
    padding:30px 0 10px;
    /* background:var(--surface-2); */
    width:100%;
    clear:both;
}

/***** ***** ***** *****  ЗАНЯТИЯ ***** ***** ***** *****/

/***** ***** ***** *****   Занятия на странице ВСЕ ЗАНЯТИЯ   ***** ***** ***** *****/

.filters {
    display:flex;
    flex-wrap:wrap;
    margin:10px 0 30px;
    background:var(--surface-3);
    border-radius:var(--border-radius);
    padding:10px 20px;}

.lesson{
    min-width:100%;}

.lesson tr{
    min-width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    background:var(--surface-2);
    overflow:hidden;
    border-radius:var(--border-radius);
    margin:15px 0;}


.lesson tr.status2{
    background:var(--success-soft);}

    
.lesson tr td{
    padding:5px 20px;}
    
.lesson tr td p{
    font-size:11pt;}

/* Дата проведения */
.lesson tr td:first-child{
    width:110px;
    background:var(--surface);}

/* Филиал */    
.lesson tr td:nth-child(2){
    width:10%;}

/* Группа */
.lesson tr td:nth-child(3){
    width:20%;}

/* Преподаватель */
.lesson tr td:nth-child(4){
    width:30%;}

/* Кол-во пройденных минут */
.lesson tr td:nth-child(5){
    width:60px;}

/* Ствтус занятия */
.lesson tr td:nth-child(6){
    text-align:center;
    width:200px;}
    
/***** ***** ***** *****   Занятия на странице ГРУППЫ (только занятия группы)   ***** ***** ***** *****/
    
.lesson_group{
    min-width:100%;}

.lesson_group tr{
    min-width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    background:var(--surface-2);
    overflow:hidden;
    border-radius:var(--border-radius);
    margin:15px 0;}
    
.lesson_group tr.status2{
    background:var(--success-soft);}
    
.lesson_group tr.status2{
    background:var(--success-soft);}
    
.lesson_group tr td{
    padding:5px 20px;}
    
.lesson_group tr td p{
    font-size:11pt;}

.lesson_group tr td p a{
    color:var(--text);
    }
    
.lesson_group tr td p a:hover{
    color:var(--cl-green);}

/* Дата проведения */
.lesson_group tr td:first-child{
    width:110px;}

/* Педагог */   
.lesson_group tr td:nth-child(2){
    width:25%;}

/* Тема занятия */ 
.lesson_group tr td:nth-child(3){
    width:40%;}

/* Кол-во пройденных минут */
.lesson_group tr td:nth-child(4){
    width:60px;}


/* Статус занятия */
.lesson_group tr td:nth-child(5){
    text-align:center;
    width:calc(35% - 170px);}
    
    @media screen and (max-width:900px) {
        
    .lesson_group tr td p{
        margin:0;}
        
    .lesson_group tr td:first-child{
        order:1;
        width:30%;
        padding:20px 20px 0;}
    
    .lesson_group tr td:nth-child(3){
        min-width:70%;
        padding:20px 20px 0;
        order:2;}
        
    .lesson_group tr td:nth-child(5){
        order:3;
        width:30%;
        padding:10px 20px 15px;}
        
    .lesson_group tr td:nth-child(5) p{
        text-align:left;}
        
    .lesson_group tr td:nth-child(4){
        order:5;
        width:30px;
        padding:10px 0 0 7px;}
        
    .lesson_group tr td:nth-child(2){
        padding:10px 20px 15px;
        min-width:calc(70% - 30px);
        order:4;}
    }
    
    @media screen and (max-width:450px) {
        
    .lesson_group tr td p{
        font-size:10pt;}
        
    .lesson_group tr td:first-child{
        padding:20px 0 0 10px;}
    
    .lesson_group tr td:nth-child(3){
        padding:20px 0 0 10px;}
        
    .lesson_group tr td:nth-child(5){
        padding:10px 0px 15px 10px;}
        
    .lesson_group tr td:nth-child(5) p{
        font-size:8pt;}
        
    .lesson_group tr td:nth-child(4){
        padding:10px 0 0 7px;}
        
    .lesson_group tr td:nth-child(2){
        padding:10px 10px 15px;}
    }
    
    
    
    
    
    
    
    
    
    


footer {
    width:100%;
    margin:10px 0 0;
	background: var(--cl-fon-gray);
    padding:20px 20px 10px;
}

footer .f-top{
    width:100%;
    margin:0 auto;
    padding:0 20px;
    line-height:1.5;
    max-width:var(--content-size);
}

footer .f-top p{
    color:var(--text-faint);
}




/* КАБИНЕТ ПРЕПОДАВАТЕЛЯ */

.teachers-group {
    margin:0;
    clear:both;
    width:100%;
    font-size:11pt;}

.teachers-group tr{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    border-radius:var(--border-radius);
    margin:15px 0;
    background:var(--surface-2);
    position:relative;
    counter-increment: student;}
    
.teachers-group tr:first-child{
    margin:0 0 15px;}

.teachers-group tr:before{
    position:absolute;
    content:"";
    width:30px;
    height:30px;
    display:table;
    border-radius:var(--border-radius);
    left:15px;
    top:18px;
    padding:12px;
    background:var(--surface);}

.teachers-group tr:after{
    position:absolute;
    width:30px;
    height:30px;
    left:30px;
    top:27px;
    content:counter(student);}
    
.teachers-group tr td{
    padding:15px 20px;}

/* Название группы */
.teachers-group tr td:nth-child(1) {
    width:60%;
    text-align:left;
    padding-left:70px;}

/* Филиал группы */
.teachers-group  tr td:nth-child(2) {
    width:20%;}

/* Количество студентов в группе */    
.teachers-group tr td:nth-child(3) {
    width:110px;
    text-align:right;}
    
    @media screen and (max-width:650px) {
        
        .teachers-group tr td{
            padding:0;}
    
        /* Название группы */
        .teachers-group tr td:nth-child(1) {
            width:100%;
            padding:10px 0 0;
            text-align:left;
            padding-left:60px;}
        
        /* Филиал группы */
        .teachers-group  tr td:nth-child(2) {
            width:calc(100% - 70px);
            padding-left:60px;
            margin:-10px 0 5px;
        }
        
        /* Количество студентов в группе */    
        .teachers-group tr td:nth-child(3) {
            width:70px;
            text-align:right;
            margin:-15px 0 0;
        }
    }

.teachers-group a {
    color:var(--text);
    position:relative;
    display:inline-block;}
    
.teachers-group   a:hover{
    color:var(--cl-green);}

.teacher h2 {
    font-size:14pt;
    margin:30px 0 12px;
    text-transform:uppercase;
}

.jurnal-page{
    width:100%;
}

.jurnal-page h2 {
    display:inline-block;
    width:100%;
    margin:30px 0 10px;
    font-size:18pt;
    text-transform:uppercase;
    border-bottom:1px solid var(--border-strong);
}

.jurnal {
    min-width:100%;
    margin:10px 0;

}
.jurnal tbody{

}

.jurnal tbody tr{
    display:flex;
    width:100%;
    background:var(--surface-2);
    margin:10px 0;
    border-radius:var(--border-radius);
}
.jurnal  td{
    padding:10px 10px;
    font-size:11pt;
    display:flex;
    flex-direction:column;
}

.jurnal  td:nth-child(1){
    padding:20px 10px 10px 15px;
}
.jurnal  td:nth-child(2){
    width:100%;
    padding:20px 10px 10px 0px;
}
.jurnal  td:nth-child(3),
.jurnal  td:nth-child(4),
.jurnal  td:nth-child(5){
    padding:5px 10px 5px 0px;
}

.jurnal input,
.jurnal select {
    text-align:center;
    min-width:40px !important;
    max-width:40px !important;
    padding:10px;
    padding:10px 3px;
    color:red;
    font-weight:600;
    background:var(--surface);
}

.jurnal select { 
    -webkit-appearance: none; /* для Chrome и Safari */ 
    -moz-appearance: none; /* для Firefox */ 
    appearance: none; /* для всех современных браузеров */ 
    background-color: var(--surface); /* важно */ 
    
}  


@media screen and (max-width:400px) {}



.teacher input[type="date"]{
    width:150px;}
    
.teacher input[type="number"]{
    width:90px;
    padding:11px 20px;}
    
.teacher select#ls_status{
    max-width:140px !important;
    min-width:140px !important;}
    
.teacher .block_form:nth-child(4){
    width:calc(100% - 440px);
    margin:5px 0;}
    
.teacher input[type="text"] {
    min-width:100% !important;
    padding:11px 20px;

}
@media screen and (max-width:900px) {
    .teacher .block_form:nth-child(4){
    width:100%;
    margin:5px 0;}
}
@media screen and (max-width:650px) {
    .teacher .block_form{
        margin: 5px 10px 5px 0;}
        
    .teacher input[type="date"]{
        padding:10px 10px;
        width:120px;}
        
    .teacher input[type="number"]{
        padding:11px 10px;
        width:50px;}
        
    .teacher select#ls_status{
        padding:10px 10px;
        max-width:120px !important;
        min-width:120px !important;}
}


.external-students-section {
    padding:15px 0 0;

}

/* Карточка студента */
.user-id {
    min-width:100%;
    display:table;}

.content .users-cart{
    min-width:calc(100% - 300px);
    float:left;
    display:table;
    clear:both;}

.content .users-cart h2{
    font-size:22pt;
    margin:10px 0 0;}

.content .users-cart p{
    font-size:12pt !important;
    margin:10px 0;}
    
.content .users-cart strong{
    font-weight:600;}

.final-balance-info {
    padding:5px 0;
    width:300px;
    float:right;
    display:table;
    text-align:right;}
    
.final-balance-result {
    /* font-weight:600; */
}


        /* Скрываем стрелки у input type="number" */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Для Firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        /* Стилизация полей ввода оценок */
        .jurnal input[type="number"] {
            width: 62px;
            height: 38px;
            text-align: center;
            padding: 5px;
            font-size: 16px;
        }
        
        select.status-toggle {
            cursor: pointer;
            min-width: 50px;
            user-select: none;
        }

        select.status-toggle:hover {
            background-color: var(--surface-2);
        }


/* Модальное окно при успешном сохранении занятия */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: var(--surface);
    margin: 15% auto;
    padding: 20px;
    border-radius: var(--border-radius);
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.modal-success {
    color: var(--success);
    font-size: 18px;
    margin-bottom: 20px;
}

.modal-close {
    background-color: var(--info);
    color: var(--on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
}

.modal-close:hover {
    background-color: var(--info-hover);
}

.menu_teacher a {
    background:var(--cl-green);
    color:var(--on-primary);
    font-size:11pt;
    padding:10px 15px;
    border-radius:var(--border-radius);
    margin:15px 0 0;
    display:table;
}




/***** ***** ***** ***** *****  Карточка группы  ***** ***** ***** *****/
.group-edit details{
    border-radius:0 var(--border-radius) var(--border-radius) var(--border-radius);
}

.group-edit .header-block .teacher {
    width:30%;
    float:left;
    margin:0 20px 10px 0;
    padding:5px 20px;
    border-radius:5px;
    background:var(--surface-3);}
    
.group-edit .header-block .cours {
    width:calc(25% - 20px);
    float:left;
    margin:0 20px 10px 0;
    padding:5px 20px;
    border-radius:var(--border-radius);
    background:var(--surface-3);}
    
.group-edit .cours_last{
    margin: 0 0 10px 0;
    width:calc(20% - 20px);
    float:left;
    padding:5px 20px;
    border-radius:var(--border-radius);
    background:var(--surface-3);}

.group-edit .header-block .description {
    min-width:100%;
    clear:both;
    color:var(--text);
    margin:0 0 10px;
    color:var(--text);
    
    line-height:1.3;
    font-size:10pt;}

    @media screen and (max-width:900px) {
    .group-edit .header-block .teacher {
        width:100%;
        float:left;
        margin:0 20px 10px 0;
        padding:5px 20px;
        border-radius:var(--border-radius);
        background:var(--surface-3);}
        
    .group-edit .header-block .cours,
    .group-edit .cours_last{
        width:100%;}
    
    }

.group_edit {
    margin:0;
    clear:both;
    width:100%;
    font-size:11pt;}

.group_edit tr{
    width:100%;
    display:table;
    border-radius:var(--border-radius);
    margin:15px 0;
    background:var(--surface-2);
    position:relative;
    counter-increment: student;}
    
.group_edit tr:first-child{
    margin:0 0 15px;}

.group_edit tr:before{
    position:absolute;
    content:"";
    width:30px;
    height:30px;
    display:table;
    border-radius:var(--border-radius);
    left:15px;
    top:8px;
    padding:12px;
    background:var(--surface);}

.group_edit tr:after{
    position:absolute;
    width:30px;
    height:30px;
    left:30px;
    top:15px;
    content:counter(student);}
    
.group_edit tr td{
    padding:15px 20px;}

.group_edit tr td:nth-child(1) {
    width:calc(100% - 600px);
    text-align:left;
    
    padding-left:60px;}
    
.group_edit tr td:nth-child(2),
.group_edit tr td:nth-child(3),
.group_edit tr td:nth-child(4),
.group_edit tr td:nth-child(5){
    width:150px;
    text-align:center;}
    
.group_edit tr td:nth-child(5){
    text-align:right;}

.group_edit a {
    color:var(--text);
    
    position:relative;
    display:inline-block;}




@media screen and (max-width:900px) {
    
    .group_edit tr{
        display:flex;
        flex-wrap:wrap;}
    
    .group_edit tr td:nth-child(1) {
        width:calc(100% - 150px);
        text-align:left;
        
        padding:15px 0 5px 60px;
        order:1;}
        
    .group_edit tr td:nth-child(2),
    .group_edit tr td:nth-child(3),
    .group_edit tr td:nth-child(5){
        width:33.33%;
        padding:0 20px 10px;
        order:3;}

    .group_edit tr td:nth-child(4){
        order:2;
        text-align:right;}
        
    .group_edit tr td:nth-child(2){
        padding-left:60px;
        text-align:left;}
    }

@media screen and (max-width:600px) {
    
    .group_edit tr:before{
        left:10px;}
    
    .group_edit tr:after{
        left:25px;}
    
    .group_edit tr{
        display:flex;
        flex-wrap:wrap;}
    
    .group_edit tr td:nth-child(1) {
        width:calc(100% - 120px);

        padding:15px 0 5px 50px;}
        
    .group_edit tr td:nth-child(2),
    .group_edit tr td:nth-child(5){
        width:50%;
        padding:0 10px 10px;
        order:4;}
        
    .group_edit tr td:nth-child(3){
        width:100%;
        order:3;
        text-align:left;
        padding-left:50px;}

    .group_edit tr td:nth-child(4){
        order:2;
        text-align:right;
        width:120px;
        padding:15px 10px;}
        
    .group_edit tr td:nth-child(2){
        padding-left:50px;
        text-align:left;}
    }
 

.group-edit .group-content {
    display:flex;
    flex-wrap:wrap;
}
    




.tabs-container {
    position: relative;
    width: 100%;}
        
        .tabs-header {
            display: flex;
            position: sticky;
            top: 0;
            z-index: 100;}
        
        .tab-button {
            flex: 1;
            background: none;
            border: none;
            padding: 12px 20px;
            cursor: pointer;
            font-size: 16px;}
        
        .tab-button:last-child {
            border-right: none;}
        
        .tab-button:hover {
            background-color: var(--surface-3);}
        
        .tab-button.active {
            color: var(--on-primary);
            font-weight: bold;}
        
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid var(--border);
            border-top: none;}
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s;}
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* Альтернативный вариант с details/summary */
        .details-tabs {
            width:100%;
            margin-top: 20px;}
        
        .details-tabs summary {
            display: none; /* Скрываем стандартный summary */}
        
        .custom-tabs {
            display: flex;
            flex-wrap:wrap;
            z-index: 100;}
        
        .custom-tab-btn {
            padding: 12px 15px;
            background: var(--surface-3);
            border-radius:var(--border-radius) var(--border-radius) 0 0;
            border-bottom:1px solid var(--border);
            cursor: pointer;
            margin-right: 5px;
            font-size:11pt;
            text-shadow:var(--shadow-color);
            transition: all 0.3s;}
        
        .custom-tab-btn.active {
            border-bottom:1px solid var(--border);
            color: var(--cl-green);
            }
        
        .tab-panel {
            width:100%;
            display: none;
            padding: 20px;
            border-top: 1px solid var(--border);
            margin-top: -1px;}
        
        .tab-panel.active {
            display: block;}



.payments-table {
    background:var(--surface);}
    
    @media screen and (max-width:600px) {
    .custom-tab-btn {
        padding: 12px 8px;
        font-size:10pt;
        font-weight:600;
    }
    }
/* Страница со списокм групп  */

.groups_all {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:20px 0;
    flex-direction:column;}

.groups_all a{
    background:var(--surface-2);
    height:auto;
    cursor:pointer;
    font-size:12pt;
    border-radius:5px;
    position:relative;
    counter-increment: group;}

.groups_all a:hover{
    background: var(--success-soft);}

.groups_all a{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    color:var(--text);
    background:var(--surface-2);
    padding:8px 20px;
    border-radius:var(--border-radius);}
        
.groups_all  a p {
    display:block;
    padding:0 10px 0 0;}

.groups_all p:nth-child(1){
    width:calc(40% - 70px);
    
    padding:0 0 0 40px;}
    
.groups_all p:nth-child(2){
    width:30%;}
    
.groups_all p:nth-child(3){
    width:20%;}
    
.groups_all  p:nth-child(4){
    width:70px;}
 
    
    @media screen and (max-width:900px) {
        
        .groups_all p:nth-child(1){
            width:100%;}
            
        .groups_all p:nth-child(2){
            width:60%;
            padding:0 0 0 40px;
        }
    }
    
    @media screen and (max-width:600px) {
        
        .groups_all p:nth-child(1){
            width:70%;
            padding:0 0 0 40px;
            order:1;}
            
        .groups_all p:nth-child(3){
            width:30%;
            text-align:right;
            order:2;}
            
        .groups_all p:nth-child(2){
            width:calc(100% - 70px);
            padding:0 0 0 40px;
            order:3;}
            
        .groups_all p:nth-child(4){
            text-align:right;
            order:4;}
    }


    

/* Страница со списокм преподавателей  */

.teachers_all {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    flex-direction:column;}
    
.teachers_all > div {
    display:flex;
    flex-wrap:wrap;
    counter-increment: group;}

.teachers_all > div > p:first-child{
    width:35px;
    background:var(--surface-3);
    padding:0px 0;
    z-index:2;
    margin:0;
    position:relative;}

.teachers_all > div > p a.access-denied:first-child {
    background:#707070;
    display:flex;
    width:100%;
    height:100%;
    border-radius:var(--border-radius) 0 0 var(--border-radius);}

.teachers_all > div > p a.access-allowed:first-child {
    background:var(--cl-green);
    display:flex;
    width:100%;
    height:100%;
    border-radius:var(--border-radius) 0 0 var(--border-radius);}

.teachers_all a:hover{
    background: var(--success-soft);}

.teachers_all a:nth-child(2){
    width:calc(100% - 35px);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    color:var(--text);
    background:var(--surface-2);
    padding:8px 10px 0px 20px;
    border-radius:0 var(--border-radius) var(--border-radius) 0;}
    
.teachers_all a:nth-child(2):hover{
    background: var(--success-soft);}
    
.teachers_all p:nth-child(1){
    width:40%;
    
    padding:0 0 0 40px;}
    
.teachers_all p:nth-child(2){
    width:20%;}
    
.teachers_all p:nth-child(3){
    width:25%;}
    
.teachers_all  p:nth-child(4){
    text-align:right;
    width:15%;}
    
.teachers_all  p:nth-child(4){
    text-align:right;
    padding:0;
    width:15%;}
 
.groups_all p:nth-child(1):before,
.teachers_all a p:nth-child(1):before{
    display:block;
    position:absolute;
    content:"";
    width:10px;
    height:10px;
    display:table;
    border-radius:var(--border-radius);
    left:15px;
    top:8px;
    padding:12px;
    background:var(--surface);}

.groups_all p:nth-child(1):after,
.teachers_all a p:nth-child(1):after{
    position:absolute;
    width:20px;
    height:20px;
    left:25px;
    top:18px;
    font-size:11pt;
    background:var(--surface);
    content:counter(group);}

.teachers_all p:nth-child(1) span{
    color:var(--on-primary);
    padding:17px 12px;}
    
.content .teachers_all p {
    margin:10px 0 0;}
    
    @media screen and (max-width:900px) {
        
        .teachers_all p:nth-child(1){
            width:100%;}
            
        .teachers_all p:nth-child(2){
            width:32%;
            padding:0 0 0 40px;}
            
        .teachers_all p:nth-child(3){
            width:38%;}
            
        .teachers_all  p:nth-child(4){
            text-align:right;
            width:30%;}
        
        .teachers_all a{
            padding:8px 5px 0px 20px;}
            
        .content .teachers_all p{
            margin:7px 0;}
    }
    
    @media screen and (max-width:600px) {
        .content .teachers_all p{
            margin:3px 0 10px;}
        
        .teachers_all p:nth-child(1){
            width:70%;
            padding:0 0 0 40px;
            order:1;}
            
        .teachers_all p:nth-child(3){
            width:100%;
            padding:0 0 0 40px;
            order:2;}
            
        .teachers_all p:nth-child(2){
            width:50%;
            padding:0 0 0 40px;
            order:3;}
            
        .teachers_all p:nth-child(4){
            text-align:right;
            width:50%;
            order:4;}
            
        .teachers_all a:nth-child(2){
            border-radius:var(--border-radius) 0 0 var(--border-radius);}
            
        .teachers_all > div > p a.access-denied:first-child,
        .teachers_all > div > p a.access-allowed:first-child {
            border-radius:0 var(--border-radius) var(--border-radius) 0;}
            

    }
    
.group-edit details summary,
.group-content details summary{
    display:none;
}

.group-edit details,
.group-content details{
    width:100%;
    margin:0;
    padding:0;
}

.group-edit h2,
.group-content h2{
    width:100%;
    clear:both;
}

.teachers_add {
    background:var(--surface-3);
    padding:20px;
    border-radius:var(--border-radius);
}



/* Стили для переключателя (toggle) */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
    margin-right: 10px;
    vertical-align: middle;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox_inp {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #707070;
    transition: .3s;
    border-radius: 34px;
}

.checkbox_inp:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--surface);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .checkbox_inp {
    background-color: var(--cl-green); 
}

input:checked + .checkbox_inp:before {
    transform: translateX(26px);
}



/* Контейнер для блока с доступом */
.access-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;}

.access-toggle small {
    color: var(--text-muted);
    font-size: 0.85em;}
    
.current-user span{
    display: flex;
    align-items: center;
    gap: 10px;
    width:100%;
    height:100%;
    color:var(--text);
    padding:0 12px;
    background:var(--surface-3);
    flex-wrap: wrap;}










































/* ============================================================
   Inline <style> blocks consolidated from PHP pages
   ============================================================ */

/* ===================== From index.php ===================== */
/* Стили для договора в таблице */
            .dogovor-number {
                font-weight: 600;
                color: var(--text);
                font-size: 14px;
            }

            .dogovor-price {
                color: var(--success);
                font-weight: 500;
                font-size: 14px;
            }

            /* Стили для шапки таблицы */
            .last5students table thead th {
                background: var(--surface-2);
                padding: 10px 12px;
                text-align: left;
                font-weight: 600;
                color: var(--text-muted);
                border-bottom: 2px solid var(--border);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
                white-space: nowrap;
            }

            .last5students table tbody td {
                padding: 10px 12px;
                border-bottom: 1px solid var(--border);
                color: var(--text);
                vertical-align: middle;
            }

            .last5students table tbody tr:hover td {
                background: var(--surface-2);
            }

            .last5students table tbody td a {
                color: var(--cl-blue);
                text-decoration: none;
                font-weight: 500;
            }

            .last5students table tbody td a:hover {
                text-decoration: underline;
            }

            /* Адаптивность для маленьких экранов */
            @media (max-width: 768px) {
                .last5students {
                    overflow-x: auto;
                }
                
                .last5students table {
                    font-size: 13px;
                    min-width: 700px;
                }
                
                .last5students table thead th,
                .last5students table tbody td {
                    padding: 8px 10px;
                }
            }

            /* Стили для тултипа */
            .tooltip-text {
                display: none;
                position: absolute;
                background: #333;
                color: var(--on-primary);
                padding: 10px 14px;
                border-radius: 6px;
                font-size: 13px;
                font-weight: normal;
                line-height: 1.6;
                z-index: 1000;
                min-width: 200px;
                max-width: 300px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                margin-top: 5px;
                white-space: normal;
                word-wrap: break-word;
            }

            .last5students td {
                position: relative;
            }

            td a:hover .tooltip-text {
                display: block;
            }

            /* Стили для подписей вместо заголовков */
            .table-caption {
                font-size: 13px;
                color: var(--text-muted);
                padding: 8px 12px;
                background: var(--surface-2);
                border-bottom: 1px solid var(--border);
                font-weight: 500;
            }


/* ===================== From 404.php ===================== */
body.page-404 {
            font-family: Arial, sans-serif;
            background: var(--surface-2);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .error-box {
            background: var(--surface);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-width: 500px;
            width: 90%;
            text-align: center;
        }
        .error-code {
            font-size: 72px;
            color: var(--danger);
            margin: 0;
        }
        .error-title {
            font-size: 24px;
            color: var(--text);
            margin: 10px 0;
        }
        .error-message {
            color: var(--text-muted);
            margin: 20px 0;
            padding: 15px;
            background: var(--surface-2);
            border-radius: 5px;
        }
        .user-info {
            background: var(--info-soft);
            padding: 10px;
            border-radius: 5px;
            margin: 20px 0;
            text-align: left;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            text-decoration: none;
            border-radius: 5px;
            color: var(--on-primary);
        }
        .btn-primary { background: var(--info); }
        .btn-secondary { background: #95a5a6; }
        .btn-primary:hover { background: #2980b9; }
        .btn-secondary:hover { background: #7f8c8d; }


/* ===================== From groups_edit.php ===================== */
.delete-btn {
                background-color: var(--danger);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
            }
            
            .delete-btn:hover {
                background-color: var(--danger-hover);
            }
            
            .delete-btn:disabled {
                background-color: var(--neutral);
                cursor: not-allowed;
            }
            
            .modal {
                display: none;
                position: fixed;
                z-index: 1000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
            }
            
            .modal-content {
                background-color: var(--surface);
                margin: 15% auto;
                padding: 20px;
                border-radius: 8px;
                width: 400px;
                text-align: center;
            }
            
            .modal-buttons {
                margin-top: 20px;
            }
            
            .modal-confirm-btn {
                background-color: var(--danger);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
                margin-right: 10px;
            }
            
            .modal-cancel-btn {
                background-color: var(--neutral);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
            }


/* ===================== From php/teachers_edit.php ===================== */
.block_form select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            background: var(--surface);
        }
        
        .history-section {
            margin-top: 20px;
            padding: 15px;
            background: var(--surface-2);
            border-radius: 8px;
            border: 1px solid var(--border);
        }
        
        .history-section h4 {
            margin: 0 0 10px 0;
            color: var(--text);
        }
        
        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        
        .history-table th {
            background: var(--surface-2);
            padding: 8px 12px;
            text-align: left;
            font-weight: 600;
        }
        
        .history-table td {
            padding: 6px 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .history-table tr:hover td {
            background: var(--surface-2);
        }
        
        .history-empty {
            color: var(--text-faint);
            font-style: italic;
            padding: 10px 0;
        }
        
        .badge-history-active {
            display: inline-block;
            padding: 2px 8px;
            background: var(--cl-green);
            color: var(--on-primary);
            border-radius: 4px;
            font-size: 11px;
        }
        
        .badge-history-inactive {
            display: inline-block;
            padding: 2px 8px;
            background: var(--neutral);
            color: var(--on-primary);
            border-radius: 4px;
            font-size: 11px;
        }


/* ===================== From php/admin/admins.php ===================== */
.error-message {
            background-color: var(--danger-soft);
            color: var(--danger-text);
            padding: 12px 20px;
            margin: 20px;
            border-radius: 4px;
            border: 1px solid var(--danger);
        }


/* ===================== From php/admin/admins_struktura_bd.php ===================== */
.db-structure {
            padding: 20px;
        }
        .table-card {
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            overflow: hidden;
        }
        .table-header {
            background: #4a6fa5;
            color: var(--on-primary);
            padding: 15px 20px;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .table-header .table-name {
            font-size: 20px;
        }
        .table-header .record-count {
            background: rgba(255,255,255,0.2);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
        }
        .table-content {
            padding: 20px;
        }
        .columns-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        .columns-table th {
            background: var(--surface-2);
            padding: 10px;
            text-align: left;
            font-weight: 600;
            color: var(--text-muted);
            border-bottom: 2px solid var(--border);
        }
        .columns-table td {
            padding: 8px 10px;
            border-bottom: 1px solid var(--border);
        }
        .columns-table tr:hover td {
            background: var(--surface-2);
        }
        .data-type {
            font-family: monospace;
            color: var(--success);
        }
        .null-yes {
            color: var(--danger);
            font-weight: 500;
        }
        .null-no {
            color: var(--success);
        }
        .key-pri {
            background: var(--warning);
            color: var(--text);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
        }
        .key-uni {
            background: var(--info);
            color: var(--on-primary);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }
        .key-mul {
            background: var(--neutral);
            color: var(--on-primary);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }
        .default-value {
            font-family: monospace;
            color: var(--text-muted);
        }
        .extra-info {
            color: var(--text-muted);
            font-style: italic;
        }
        .db-info {
            background: var(--info-soft);
            border-left: 4px solid var(--info);
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .db-info strong {
            color: var(--info);
        }
        .table-actions {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
        }
        .sample-data {
            margin-top: 20px;
        }
        .sample-data h4 {
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .sample-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .sample-table th {
            background: var(--surface-2);
            padding: 8px;
            text-align: left;
        }
        .sample-table td {
            padding: 6px 8px;
            border-bottom: 1px solid var(--border);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: var(--surface);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-card .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #4a6fa5;
        }
        .stat-card .stat-label {
            color: var(--text-muted);
            margin-top: 5px;
        }


/* ===================== From php/calendar_lessons.php ===================== */
.calendar-container {
            margin-top: 20px;
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
            padding: 15px;
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .week-nav {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .week-nav a {
            padding: 8px 16px;
            background: var(--surface-2);
            border-radius: 5px;
            text-decoration: none;
            color: var(--text);
            font-size: 14px;
            transition: background 0.3s;
        }
        
        .week-nav a:hover {
            background: var(--surface-3);
        }
        
        .week-nav .current-week {
            font-weight: bold;
            color: #9C27B0;
        }
        
        body.page-calendar-lessons .settings {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filters-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-select {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .filter-select select {
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 5px;
            font-size: 14px;
            background: var(--surface);
            cursor: pointer;
            min-width: 180px;
        }
        
        .filter-select select:focus {
            outline: none;
            border-color: #9C27B0;
        }
        
        .filter-select label {
            font-size: 14px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        
        .checkbox-group {
            display: flex;
            gap: 15px;
        }
        
        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            user-select: none;
            font-size: 14px;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        
        .time-scale {
            display: flex;
            border-bottom: 2px solid var(--border);
            background: var(--surface-2);
        }
        
        .time-gutter {
            width: 80px;
            flex-shrink: 0;
            border-right: 1px solid var(--border);
            background: var(--surface-2);
        }
        
        .days-header {
            display: flex;
            flex: 1;
        }
        
        .day-header {
            flex: 1;
            padding: 15px;
            text-align: center;
            border-right: 1px solid var(--border);
            font-weight: 600;
            color: var(--text);
            min-width: 120px;
        }
        
        .day-header:last-child {
            border-right: none;
        }
        
        .day-header.today {
            background: var(--purple-soft);
            color: #9C27B0;
        }
        
        .calendar-grid {
            display: flex;
            position: relative;
        }
        
        .time-column {
            width: 80px;
            flex-shrink: 0;
            border-right: 1px solid var(--border);
            background: var(--surface-2);
        }
        
        .time-slot {
            height: 60px;
            padding: 5px;
            border-bottom: 1px solid var(--border);
            text-align: center;
            color: var(--text-muted);
            font-size: 12px;
        }
        
        .days-columns {
            display: flex;
            flex: 1;
            position: relative;
        }
        
        .day-column {
            flex: 1;
            position: relative;
            border-right: 1px solid var(--border);
            min-width: 150px;
            height: <?php echo $grid_height; ?>px;
        }
        
        .day-column:last-child {
            border-right: none;
        }
        
        .hour-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 60px;
            border-bottom: 1px solid var(--border);
            pointer-events: none;
        }
        
        body.page-calendar-lessons .lesson {
            position: absolute;
            left: 5px;
            right: 5px;
            background: #9C27B0;
            color: var(--on-primary);
            padding: 6px 8px;
            border-radius: 5px;
            font-size: 12px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s;
            z-index: 1;
            cursor: pointer;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            line-height: 1.3;
        }
        
        body.page-calendar-lessons .lesson:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 10;
        }
        
        .lesson-title {
            font-weight: 600;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .lesson-time {
            font-size: 10px;
            opacity: 0.9;
            margin-bottom: 2px;
        }
        
        .lesson-teacher {
            font-size: 10px;
            opacity: 0.9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .lesson-date {
            position: absolute;
            top: 2px;
            right: 4px;
            font-size: 8px;
            opacity: 0.7;
            background: rgba(0,0,0,0.2);
            padding: 1px 3px;
            border-radius: 3px;
        }
        
        .lesson-duration {
            position: absolute;
            bottom: 2px;
            right: 4px;
            font-size: 8px;
            opacity: 0.7;
            background: rgba(0,0,0,0.2);
            padding: 1px 3px;
            border-radius: 3px;
        }
        
        .no-lessons {
            color: var(--text-faint);
            text-align: center;
            padding: 20px;
            font-style: italic;
            position: absolute;
            width: 100%;
        }
        
        .filter-panel {
            background: var(--surface);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text);
        }
        
        .classroom-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .classroom-filter {
            padding: 5px 12px;
            background: var(--surface-2);
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .classroom-filter:hover {
            background: var(--surface-3);
        }
        
        .classroom-filter.active {
            background: #9C27B0;
            color: var(--on-primary);
        }
        
       
        
        .filial-badge {
            font-size: 9px;
            opacity: 0.8;
            margin-top: 2px;
        }
        
        
        
        .debug-info {
            background: var(--surface-2);
            padding: 15px;
            margin: 20px;
            border-left: 4px solid #9C27B0;
            font-family: monospace;
            font-size: 12px;
        }


/* ===================== From php/students-all_filter.php ===================== */
.search-block {
    margin: 20px 0;
    padding: 15px 20px;
    background: var(--surface-3);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.search-block .search-row {
    width:100%;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

.search-block .search-row .search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.search-block .search-row .search-input:focus {
    border-color: var(--info);
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.search-block .search-row .search-btn {
    padding: 10px 28px;
    background: var(--info);
    color: var(--on-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-block .search-row .search-btn:hover {
    background: var(--info);
}

.search-block .search-row .search-btn.clear-btn {
    background: var(--surface-3);
    color: var(--text);
}

.search-block .search-row .search-btn.clear-btn:hover {
    background: var(--surface-3);
}

.search-block .search-hint {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 8px;
}

.search-block .search-hint span {
    display: inline-block;
    background: var(--surface);
    padding: 2px 10px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border);
}


            /* ============================================
               СТИЛИ ДЛЯ ТУЛТИПА
               ============================================ */
            .student-name-link {
                position: relative;
                display: inline-block;
                cursor: help;
                color: var(--info);
                text-decoration: none;
            }
            
            .student-name-link:hover {
                text-decoration: underline;
            }
            
            
            
            /* ============================================
               БАЛАНС В ТАБЛИЦЕ
               ============================================ */
            .balance-positive {
                color: var(--success);
                font-weight: bold;
            }
            
            .balance-negative {
                color: var(--danger);
                font-weight: bold;
            }
            
            .balance-zero {
                color: var(--info);
                font-weight: bold;
            }
            
            .available-lessons {
                font-size: 11px;
                color: var(--text-muted);
                display: block;
            }
            
            /* ============================================
               АДАПТИВНОСТЬ
               ============================================ */
            @media (max-width: 768px) {
                .search-block .search-row {
                    flex-direction: column;
                    align-items: stretch;
                }
                
                .search-block .search-row .search-input {
                    min-width: auto;
                }
                
                .search-block .search-row .search-btn {
                    width: 100%;
                    text-align: center;
                }
                
                .student-name-link .tooltip-text {
                    width: 280px;
                    left: 0;
                    transform: translateX(0) translateY(10px);
                }
                
                .student-name-link:hover .tooltip-text {
                    transform: translateX(0) translateY(0);
                }
            }
            
            /***** ***** ***** ***** *****  СТУДЕНТЫ ГРУППЫ  ***** ***** ***** *****/
            
            .users-filter {
                margin:0;
                clear:both;
                width:100%;
                font-size:11pt;
            }
            
            .users-filter tr{
                width:100%;
                display:table;
                border-radius:var(--border-radius);
                margin:15px 0;
                background:var(--surface-2);
                position:relative;
                counter-increment: student;
            }
            
            .users-filter tr:first-child{
                margin:0 0 15px;
            }
            
            .users-filter tr:nth-child(10){
                margin:15px 0 40px;
            }
            
            .users-filter tr:before{
                position:absolute;
                content:"";
                width:30px;
                height:30px;
                display:table;
                border-radius:var(--border-radius);
                left:15px;
                top:8px;
                padding:12px;
                background:var(--surface);
            }
            
            .users-filter tr:after{
                position:absolute;
                width:30px;
                height:30px;
                left:30px;
                top:15px;
                content:counter(student);
            }
            
            .users-filter tr td{
                padding:15px 20px;
                vertical-align: middle;
            }
            
            .users-filter tr td:nth-child(1) {
                width:30%;
                text-align:left;
                
                padding-left:60px;
            }
            
            .users-filter tr td:nth-child(2) {
                width:25%;
            }
            
            .users-filter tr td:nth-child(3) {
                width:18%;
            }
            
            .users-filter tr td:nth-child(4) {
                width:14%;
                text-align:right;
            }
            
            .users-filter tr td:nth-child(5) {
                width:13%;
                text-align:center;
            }
            
            .users-filter a {
                color:var(--text);
                position:relative;
                display:inline-block;
            }
            
            .users-filter a .tooltip-text {
                display:none;
            }
            
            .users-filter a:hover{
                color:var(--cl-green);
                
            }
            
            .users-filter a:hover .tooltip-text {
                width:300px;
                color:var(--text);
                line-height:1.5;
                padding:20px;
                border-radius:var(--border-radius);
                position:absolute;
                background:rgba(255,255,255,0.98);
                right:-320px;
                box-shadow:2px 2px 10px var(--shadow-color);
                top:0px;
                z-index:2;
                display:block;
                border:1px solid var(--border);
                font-weight:400;
                text-shadow:none;
            }
            
            .users-filter a:hover .tooltip-text:hover {
                display:block;
            }
            
            .status-badge {
                font-family: 'Montserrat';
                display:inline-block;
                text-align:center;
                min-width:100px;
                padding: 7px 8px;
                border-radius: 12px;
                color: var(--on-primary);
                font-size: 13px;
                font-weight: bold;
                margin:-5px 0;
                text-shadow: 0 1px 1px rgba(0,0,0,0.3);
                background:var(--surface-3);
            }
            
            @media screen and (max-width:900px) {
                
                .users-filter tr{
                    display:flex;
                    flex-wrap:wrap;
                }
                
                .users-filter tr td{
                    padding:15px 20px;
                }
                
                .users-filter tr td:nth-child(1) {
                    min-width:calc(100% - 120px);
                    padding:15px 10px 10px 60px;
                    order:1;
                }
                
                .users-filter tr td:nth-child(2) {
                    min-width:calc(100% - 120px);
                    padding:0px 10px 10px 60px;
                    order:3;
                }
                
                .users-filter tr td:nth-child(3) {
                    width:100px;
                    text-align:right;
                    padding:15px 0px 10px;
                    order:2;
                }
                
                .users-filter tr td:nth-child(4) {
                    min-width:120px;
                    padding:9px 20px 20px;
                    order:4;
                    text-align:right;
                }
                
                .users-filter tr td:nth-child(5) {
                    min-width:120px;
                    padding:9px 20px 20px;
                    order:5;
                    text-align:center;
                }
                
                .status-badge {
                    margin:-10px 0;
                    font-size:8pt;
                    padding:4px 10px;
                    min-width:90px;
                }
                
                .users-filter a:hover .tooltip-text {
                    width:260px;
                    right:0;
                    top:30px;
                    left:0;
                    transform:translateX(0);
                }
            }


/* ===================== From php/teachers_add.php ===================== */
.block_form select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            background: var(--surface);
        }


/* ===================== From php/calendar.php ===================== */
.calendar-container {
            margin-top: 20px;
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
            padding: 15px;
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .week-nav {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .week-nav a {
            padding: 8px 16px;
            background: var(--surface-2);
            border-radius: 5px;
            text-decoration: none;
            color: var(--text);
            font-size: 14px;
            transition: background 0.3s;
        }
        
        .week-nav a:hover {
            background: var(--surface-3);
        }
        
        .week-nav .current-week {
            font-weight: bold;
            color: var(--cl-green);
        }
        
        body.page-calendar .settings {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filters-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-select {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .filter-select select {
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 5px;
            font-size: 14px;
            background: var(--surface);
            cursor: pointer;
            min-width: 180px;
        }
        
        .filter-select select:focus {
            outline: none;
            border-color: var(--cl-green);
        }
        
        .filter-select label {
            font-size: 14px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        
        .checkbox-group {
            display: flex;
            gap: 15px;
        }
        
        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            user-select: none;
            font-size: 14px;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        
        .time-scale {
            display: flex;
            border-bottom: 2px solid var(--border);
            background: var(--surface-2);
        }
        
        .time-gutter {
            width: 80px;
            flex-shrink: 0;
            border-right: 1px solid var(--border);
            background: var(--surface-2);
        }
        
        .days-header {
            display: flex;
            flex: 1;
        }
        
        .day-header {
            flex: 1;
            padding: 15px;
            text-align: center;
            border-right: 1px solid var(--border);
            font-weight: 600;
            color: var(--text);
            min-width: 120px;
        }
        
        .day-header:last-child {
            border-right: none;
        }
        
        .day-header.today {
            background: var(--success-soft);
            color: var(--cl-green);
        }
        
        .calendar-grid {
            display: flex;
            position: relative;
        }
        
        .time-column {
            width: 80px;
            flex-shrink: 0;
            border-right: 1px solid var(--border);
            background: var(--surface-2);
        }
        
        .time-slot {
            height: 60px;
            padding: 5px;
            border-bottom: 1px solid var(--border);
            text-align: center;
            color: var(--text-muted);
            font-size: 12px;
        }
        
        .days-columns {
            display: flex;
            flex: 1;
            position: relative;
        }
        
        .day-column {
            flex: 1;
            position: relative;
            border-right: 1px solid var(--border);
            min-width: 150px;
            height: <?php echo $grid_height; ?>px;
        }
        
        .day-column:last-child {
            border-right: none;
        }
        
        .hour-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 60px;
            border-bottom: 1px solid var(--border);
            pointer-events: none;
        }
        
        body.page-calendar .lesson {
            position: absolute;
            left: 5px;
            right: 5px;
            background: var(--cl-green);
            color: var(--on-primary);
            padding: 6px 8px;
            border-radius: 5px;
            font-size: 12px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s;
            z-index: 1;
            cursor: pointer;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            line-height: 1.3;
        }
        
        body.page-calendar .lesson:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 10;
        }
        
        .lesson-title {
            font-weight: 600;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .lesson-time {
            font-size: 10px;
            opacity: 0.9;
            margin-bottom: 2px;
        }
        
        .lesson-teacher {
            font-size: 10px;
            opacity: 0.9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .lesson-duration {
            position: absolute;
            bottom: 2px;
            right: 4px;
            font-size: 8px;
            opacity: 0.7;
            background: rgba(0,0,0,0.2);
            padding: 1px 3px;
            border-radius: 3px;
        }
        
        .no-lessons {
            color: var(--text-faint);
            text-align: center;
            padding: 20px;
            font-style: italic;
            position: absolute;
            width: 100%;
        }
        
        .filter-panel {
            background: var(--surface);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text);
        }
        
        .classroom-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .classroom-filter {
            padding: 5px 12px;
            background: var(--surface-2);
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .classroom-filter:hover {
            background: var(--surface-3);
        }
        
        .classroom-filter.active {
            background: var(--cl-green);
            color: var(--on-primary);
        }
        
        .header-name {
            margin-bottom: 20px;
        }
        
        body.page-calendar .content {
            padding: 20px;
        }
        
        .filial-badge {
            font-size: 9px;
            opacity: 0.8;
            margin-top: 2px;
        }


/* ===================== From php/pay-all.php ===================== */
.payments-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 14px;
        }
        
        .payments-table th, .payments-table td {
            border: 1px solid var(--border);
            padding: 8px;
            text-align: left;
        }
        
        .payments-table th {
            background-color: var(--surface-2);
            font-weight: bold;
            white-space: nowrap;
        }
        
        .payments-table tr:hover {
            background-color: var(--surface-2);
        }
        
        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        .pagination a, .pagination span {
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid var(--border);
            border-radius: 4px;
        }
        
        .pagination a:hover {
            background-color: var(--surface-2);
        }
        
        .pagination .current {
            background-color: var(--cl-green);
            color: var(--on-primary);
            border: 1px solid var(--cl-green);
        }
        
        .pagination .disabled {
            color: #ddd;
            cursor: not-allowed;
        }
        
        .stats {
            background-color: var(--surface-2);
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid var(--cl-green);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 15px;
            margin-bottom: 10px;
        }
        
        .stat-item {
            padding: 10px;
            background-color: var(--surface);
            border-radius: 4px;
            border: 1px solid var(--border);
        }
        
        .stat-item h4 {
            margin: 0 0 5px 0;
            color: var(--text-muted);
            font-size: 14px;
        }
        
        .stat-item p {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: var(--text);
        }
        
        .stat-item.sum p {
            color: var(--cl-green);
        }
        
        .stat-item.commission p {
            color: var(--warning);
        }
        
        .stat-item.net p {
            color: var(--cl-blue);
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
            font-size: 18px;
        }
        
        .search-form {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .search-form input[type="text"] {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 4px;
            flex-grow: 1;
            max-width: 300px;
        }
        
        .search-form button {
            padding: 8px 20px;
            background-color: var(--cl-green);
            color: var(--on-primary);
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .search-form button:hover {
            background-color: var(--cl-green-dark);
        }
        
        .export-btn {
            display: inline-block;
            padding: 8px 20px;
            background-color: var(--cl-blue);
            color: var(--on-primary);
            text-decoration: none;
            border-radius: 4px;
            margin-left: auto;
        }
        
        .export-btn:hover {
            background-color: #0b7dda;
        }
        
        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .filter-group label {
            font-size: 14px;
            color: var(--text-muted);
        }
        
        .filter-group select, .filter-group input {
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
        }
        
        .actions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .filter-status {
            background-color: var(--info-soft);
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            border-left: 4px solid var(--cl-blue);
        }
        
        .filter-status h4 {
            margin: 0 0 5px 0;
            color: #0b5ed7;
        }
        
        .filter-status p {
            margin: 0;
            font-size: 14px;
        }
        
        .clear-filter {
            color: var(--danger);
            text-decoration: none;
            margin-left: 10px;
            font-size: 14px;
        }
        
        .clear-filter:hover {
            text-decoration: underline;
        }
        
        .amount-positive {
            color: var(--cl-green);
            font-weight: bold;
        }
        
        .amount-commission {
            color: var(--warning);
            font-weight: bold;
        }
        
        .amount-net {
            color: var(--cl-blue);
            font-weight: bold;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        .commission-badge {
            display: inline-block;
            padding: 2px 6px;
            background-color: var(--warning);
            color: var(--on-primary);
            border-radius: 3px;
            font-size: 12px;
            margin-left: 5px;
        }


/* ===================== From php/groups_edit.php ===================== */
.delete-btn {
                background-color: var(--danger);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
            }
            
            .delete-btn:hover {
                background-color: var(--danger-hover);
            }
            
            .delete-btn:disabled {
                background-color: var(--neutral);
                cursor: not-allowed;
            }
            
            .modal {
                display: none;
                position: fixed;
                z-index: 1000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
            }
            
            .modal-content {
                background-color: var(--surface);
                margin: 15% auto;
                padding: 20px;
                border-radius: 8px;
                width: 400px;
                text-align: center;
            }
            
            .modal-buttons {
                margin-top: 20px;
            }
            
            .modal-confirm-btn {
                background-color: var(--danger);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
                margin-right: 10px;
            }
            
            .modal-cancel-btn {
                background-color: var(--neutral);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
            }
            
            .schedule-table {
                width: 100%;
                border-collapse: collapse;
                
            }
            
            .schedule-table th {
                background: var(--surface-2);
                padding: 12px;
                text-align: left;
                border-bottom: 2px solid var(--border);
            }
            
            .schedule-table td {
                padding: 10px;
                border-bottom: 1px solid var(--border);
            }
            
            .schedule-table tr:hover {
                background: var(--surface-2);
            }
            
            .delete-time-btn {
                background: none;
                border: none;
                color: var(--danger);
                cursor: pointer;
                font-size: 18px;
                padding: 0 5px;
            }
            
            .delete-time-btn:hover {
                color: var(--danger);
            }
            
            .add-time-row {
                background: var(--info-soft);
            }
            
            .time-input {
                padding: 8px;
                border: 1px solid var(--border);
                border-radius: 4px;
                width: 100px;
            }
            
            .day-select {
                padding: 8px;
                border: 1px solid var(--border);
                border-radius: 4px;
                min-width: 130px;
            }
            
            .cabinet-input {
                padding: 8px;
                border: 1px solid var(--border);
                border-radius: 4px;
                width: 80px;
            }
            
            .success-message {
                background: var(--success-soft);
                color: var(--success-text);
                padding: 12px;
                border-radius: 4px;
                margin: 20px 0;
                border: 1px solid var(--success);
            }
            
            .schedule-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .add-row-btn{
                background: var(--cl-fon-gray);
            }
            
            .add-row-btn:hover {
                background: #222;
            }
            
            .save-times-btn {
                background: var(--cl-green);
                color: var(--on-primary);
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
                margin-top: 20px;
            }
            
            .save-times-btn:hover {
                background: var(--cl-green-hover);
            }
            
            .balance-positive {
                color: var(--success);
                font-weight: bold;
            }
            
            .balance-negative {
                color: var(--danger);
                font-weight: bold;
            }
            
            .balance-zero {
                color: var(--info);
                font-weight: bold;
            }
            
            .available-lessons {
                font-size: 12px;
                color: var(--text-muted);
                display: block;
            }
            
            .student-row:hover {
                background-color: var(--surface-2);
            }
            
            .lesson-info {
                font-size: 11px;
                color: var(--text-faint);
                margin-top: 2px;
            }


/* ===================== From php/student_transfer.php ===================== */
.transfer-container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            padding: 30px;
        }
        
        .transfer-container h1 {
            font-size: 24px;
            margin: 0 0 20px 0;
            color: var(--text);
        }
        
        .student-info {
            background: var(--surface-2);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            border-left: 4px solid var(--cl-blue);
        }
        
        .student-info .name {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }
        
        .student-info .details {
            margin-top: 8px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 14px;
            color: var(--text-muted);
        }
        
        .student-info .details .label {
            color: var(--text-faint);
        }
        
        .student-info .details .value {
            font-weight: 500;
            color: var(--text);
        }
        
        .form-group {
            margin-bottom: 18px;
        }
        
        .form-group label {
            display: block;
            font-weight: 500;
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 5px;
        }
        
        .form-group label .required {
            color: var(--danger);
        }
        
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }
        
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            border-color: var(--cl-blue);
            outline: none;
            box-shadow: 0 0 0 3px rgba(9, 82, 149, 0.1);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-row.three-col {
            grid-template-columns: 1fr 1fr 1fr;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .checkbox-group label {
            cursor: pointer;
            font-size: 14px;
            color: var(--text);
        }
        
        .checkbox-group .hint {
            display: block;
            font-size: 12px;
            color: var(--text-faint);
            font-weight: normal;
        }
        
        .balance-info {
            background: var(--success-soft);
            padding: 15px 20px;
            border-radius: 8px;
            margin: 20px 0;
            border: 1px solid var(--success);
        }
        
        .balance-info .balance-amount {
            font-size: 24px;
            font-weight: 700;
        }
        
        .balance-info .balance-amount.positive {
            color: var(--success);
        }
        
        .balance-info .balance-amount.negative {
            color: var(--danger);
        }
        
        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }
        
        .form-actions .btn {
            padding: 12px 32px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: background 0.2s;
        }
        
        .form-actions .btn-primary {
            background: var(--success);
            color: var(--on-primary);
        }
        
        .form-actions .btn-primary:hover {
            background: var(--success-hover);
        }
        
        .form-actions .btn-secondary {
            background: var(--surface-3);
            color: var(--text);
        }
        
        .form-actions .btn-secondary:hover {
            background: var(--surface-3);
        }
        
        .alert-success {
            background: var(--success-soft);
            border: 1px solid var(--success);
            color: var(--success-text);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .alert-error {
            background: var(--danger-soft);
            border: 1px solid var(--danger);
            color: var(--danger-text);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .alert-error ul {
            margin: 0;
            padding-left: 20px;
        }
        
        .help-text {
            background: var(--info-soft);
            padding: 15px 20px;
            border-radius: 8px;
            margin-top: 25px;
        }
        
        .help-text h4 {
            margin: 0 0 10px 0;
            color: var(--info);
        }
        
        .help-text ul {
            margin: 0;
            padding-left: 20px;
            font-size: 14px;
            color: var(--text-muted);
        }
        
        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .form-row.three-col {
                grid-template-columns: 1fr;
            }
            
            .student-info .details {
                grid-template-columns: 1fr;
            }
            
            .form-actions {
                flex-direction: column;
            }
            
            .form-actions .btn {
                text-align: center;
            }
            
            .transfer-container {
                padding: 20px;
            }
        }


/* ===================== From php/pay_add-r.php ===================== */
.form-container {
                margin: 20px auto;
                padding: 20px;
                background: var(--surface);
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            
            .form-section {
                width: 100%;
                margin-bottom: 30px;
                padding: 20px;
                background: var(--surface-2);
                border-radius: 6px;
            }
            
            .form-section h3 {
                margin-top: 0;
                margin-bottom: 20px;
                color: var(--text);
                font-size: 16px;
                font-weight: bold;
                border-bottom: 1px solid var(--border);
                padding-bottom: 10px;
            }
            
            .form-row {
                display: flex;
                gap: 20px;
                margin-bottom: 15px;
                flex-wrap: wrap;
            }
            
            .form-group {
                flex: 1;
                min-width: 200px;
            }
            
            .form-group label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
                color: var(--text-muted);
            }
            
            .form-group input,
            .form-group select,
            .form-group textarea {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid var(--border);
                border-radius: 4px;
                font-size: 14px;
                box-sizing: border-box;
            }
            
            .form-group input:focus,
            .form-group select:focus,
            .form-group textarea:focus {
                border-color: var(--cl-green);
                outline: none;
                box-shadow: 0 0 3px rgba(76, 175, 80, 0.3);
            }
            
            .form-group textarea {
                resize: vertical;
            }
            
            .form-group .ui-autocomplete-input {
                width: 100% !important;
            }
            
            .required {
                color: var(--danger);
            }
            
            .form-actions {
                margin-top: 40px;
                display: flex;
                gap: 15px;
                justify-content: center;
                width: 100%;
            }
            
            .btn {
                padding: 12px 30px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 500;
                text-decoration: none;
                display: inline-block;
                transition: background-color 0.3s;
                min-width: 150px;
                text-align: center;
            }
            
            .btn2 {
                padding: 12px 30px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 500;
                text-decoration: none;
                display: inline-block;
                transition: background-color 0.3s;
                min-width: 150px;
                height: 42px;
                text-align: center;
                background-color: var(--surface-3);
                color: var(--on-primary);
                margin: 10px 0 0;
            }
            
            .btn-primary {
                background-color: var(--cl-green);
                color: var(--on-primary);
            }
            
            .btn-primary:hover {
                background-color: var(--cl-green-dark);
            }
            
            .alert {
                padding: 15px;
                margin-bottom: 20px;
                border-radius: 4px;
            }
            
            .alert-success {
                background-color: var(--success-soft);
                border: 1px solid var(--success);
                color: var(--success-text);
            }
            
            .alert-error {
                background-color: var(--danger-soft);
                border: 1px solid var(--danger);
                color: var(--danger-text);
            }
            
            .alert-error ul {
                margin-bottom: 0;
            }
            
            .help-text {
                width: 100%;
                padding: 15px;
                background: var(--info-soft);
                border-radius: 6px;
            }
            
            .help-text h3 {
                margin-top: 0;
                color: var(--text);
                font-size: 16px;
            }
            
            .help-text ul {
                margin: 10px 0 0;
                padding-left: 20px;
            }
            
            .help-text li {
                margin: 5px 0;
                color: var(--text-muted);
            }
            
            .selected-student {
                background: var(--success-soft);
                padding: 15px;
                border-radius: 4px;
                border: 1px solid var(--success);
                margin-top: 10px;
                display: none;
            }
            
            .selected-student.show {
                display: block;
            }
            
            .selected-student .student-name {
                font-size: 18px;
                font-weight: bold;
                color: var(--success);
            }
            
            .selected-student .student-details {
                margin-top: 8px;
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
            }
            
            .selected-student .student-details span {
                background: var(--success-soft);
                padding: 4px 12px;
                border-radius: 4px;
                font-size: 14px;
                color: var(--text);
            }
            
            .selected-student .student-details .label {
                font-weight: normal;
                color: var(--text-muted);
            }
            
            .selected-student .student-details .value {
                font-weight: bold;
                color: var(--success);
            }
            
            .clear-student-btn {
                margin-left: 10px;
                border: none;
                background: var(--danger);
                color: var(--on-primary);
                padding: 2px 12px;
                border-radius: 3px;
                cursor: pointer;
                font-size: 14px;
            }
            
            .clear-student-btn:hover {
                background: var(--danger-hover);
            }
            
            .ui-autocomplete {
                max-height: 400px;
                overflow-y: auto;
                overflow-x: hidden;
                z-index: 1000;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            }
            
            .ui-menu-item {
                padding: 8px 15px;
                font-size: 14px;
                border-bottom: 1px solid var(--border);
            }
            
            .ui-menu-item:hover {
                background-color: var(--info-soft);
            }
            
            .ui-menu-item .ui-state-active {
                background-color: var(--cl-blue) !important;
                color: var(--on-primary) !important;
            }
            
            .ui-menu-item .student-item {
                display: flex;
                flex-direction: column;
            }
            
            .ui-menu-item .student-item .student-name {
                font-weight: 500;
                font-size: 15px;
            }
            
            .ui-menu-item .student-item .student-meta {
                font-size: 12px;
                color: var(--text-muted);
                margin-top: 2px;
            }
            
            .ui-menu-item .student-item .student-meta .meta-item {
                display: inline-block;
                margin-right: 15px;
            }
            
            .ui-menu-item .student-item .student-meta .meta-item .label {
                color: var(--text-faint);
            }
            
            .ui-menu-item .student-item .student-meta .meta-item .value {
                color: var(--text);
                font-weight: 500;
            }
            
            .student-id-hint {
                font-size: 12px;
                color: var(--text-faint);
                margin-left: 10px;
            }
            
            @media (max-width: 768px) {
                .form-row {
                    flex-direction: column;
                    gap: 10px;
                }
                
                .form-group {
                    min-width: 100%;
                }
                
                .form-actions {
                    flex-direction: column;
                    align-items: center;
                }
                
                .btn {
                    width: 100%;
                    max-width: 300px;
                }
                
                .selected-student .student-details {
                    flex-direction: column;
                    gap: 5px;
                }
            }


/* ===================== From php/stavka_all.php ===================== */
.stavka-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        .stavka-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .stavka-card.active {
            border-left: 4px solid var(--cl-green);
        }
        .stavka-card.inactive {
            border-left: 4px solid var(--warning);
            opacity: 0.8;
        }
        .stavka-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            gap: 10px;
        }
        .stavka-title-block {
            flex: 1;
        }
        .stavka-title {
            font-size: 18px;
            font-weight: bold;
            color: var(--text);
        }
        .stavka-dates {
            color: var(--text-muted);
            font-size: 14px;
            margin-top: 5px;
        }
        .stavka-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .stavka-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .stat-item {
            background: var(--surface-2);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
        }
        .stat-item span {
            font-weight: bold;
            color: var(--cl-blue);
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
        }
        .btn-edit {
            background: var(--cl-blue);
            color: var(--on-primary);
        }
        .btn-edit:hover {
            background: var(--info);
        }
        .btn-delete {
            background: var(--danger);
            color: var(--on-primary);
        }
        .btn-delete:hover {
            background: var(--danger-hover);
        }
        .btn-add {
            background: var(--cl-green);
            color: var(--on-primary);
            padding: 10px 20px;
            font-size: 16px;
            margin-bottom: 20px;
            display: inline-block;
        }
        .btn-add:hover {
            background: var(--cl-green-dark);
        }
        .btn-sm {
            padding: 4px 10px;
            font-size: 12px;
        }
        .btn-teacher {
            background: #9C27B0;
            color: var(--on-primary);
        }
        .btn-teacher:hover {
            background: #7B1FA2;
        }
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .badge-success {
            background: var(--cl-green);
            color: var(--on-primary);
        }
        .badge-warning {
            background: var(--warning);
            color: var(--on-primary);
        }
        .badge-info {
            background: var(--cl-blue);
            color: var(--on-primary);
        }
        .teachers-list {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed var(--border);
        }
        .teachers-list-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .teacher-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            background: var(--surface-2);
            border-radius: 4px;
            margin-bottom: 5px;
            transition: background 0.2s;
        }
        .teacher-item:hover {
            background: var(--surface-2);
        }
        .teacher-item .teacher-info {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        .teacher-item .teacher-name {
            font-weight: 500;
            color: var(--text);
        }
        .teacher-item .teacher-phone {
            color: var(--text-muted);
            font-size: 13px;
        }
        .teacher-item .teacher-login {
            color: var(--text-faint);
            font-size: 12px;
        }
        .no-teachers {
            color: var(--text-faint);
            font-style: italic;
            font-size: 14px;
            padding: 5px 0;
        }
        .empty-state {
            text-align: center;
            padding: 60px;
            color: var(--text-faint);
            background: var(--surface-2);
            border-radius: 8px;
            font-size: 16px;
        }
        @media (max-width: 768px) {
            .stavka-header {
                flex-direction: column;
            }
            .teacher-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            .teacher-item .teacher-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
        }


/* ===================== From php/students-all_edit.php ===================== */
/* ============================================
               ОСНОВНЫЕ СТИЛИ
               ============================================ */
            
            /* Контейнер с двумя колонками */
            .student-page {
                display: grid;
                grid-template-columns: 1fr 380px;
                gap: 30px;
                align-items: start;
            }
            
            /* Кнопка "Вернуться назад" вверху */
            .back-top {
                margin-bottom: 20px;
            }
            
            .back-top .btn-back {
                padding: 10px 24px;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                text-decoration: none;
                display: inline-block;
                background: var(--surface-3);
                color: var(--text);
                transition: background 0.2s;
            }
            
            .back-top .btn-back:hover {
                background: var(--surface-3);
            }
            
            /* ============================================
               ЛЕВАЯ КОЛОНКА - КАРТОЧКА СТУДЕНТА
               ============================================ */
            .student-card {
                background: var(--surface);
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
                overflow: hidden;
            }
            
            .student-card .card-header {
                padding: 20px 24px 16px;
                border-bottom: 1px solid var(--border);
            }
            
            .student-card .card-header .top-row {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 15px;
            }
            
            .student-card .card-header .student-name {
                font-size: 22px;
                font-weight: 600;
                color: var(--text);
                margin: 0;
            }
            
            .student-card .card-header .student-id {
                font-size: 13px;
                color: var(--text-faint);
                margin-top: 4px;
            }
            
            .student-card .card-header .status-badge {
                padding: 4px 14px;
                border-radius: var(--border-radius);
                font-size: 13px;
                font-weight: 500;
                color: var(--on-primary);
                white-space: nowrap;
                background: var(--cl-green);
            }
            
            .student-card .card-body {
                padding: 20px 24px;
            }
            
            .student-card .info-row {
                display: flex;
                padding: 8px 0;
                border-bottom: 1px solid var(--border);
            }
            
            .student-card .info-row:last-child {
                border-bottom: none;
            }
            
            .student-card .info-row .label {
                font-size: 14px;
                color: var(--text-muted);
                min-width: 150px;
                flex-shrink: 0;
            }
            
            .student-card .info-row .value {
                font-size: 14px;
                color: var(--text);
                font-weight: 500;
            }
            
            .student-card .info-row .value .old-dogovor {
                font-size: 12px;
                color: var(--text-faint);
                font-weight: 400;
            }
            
            .student-card .info-row .value .teacher-name {
                color: var(--cl-blue);
                font-weight: 400;
            }
            
            .student-card .info-row .value .group-time {
                color: var(--text-muted);
                font-weight: 400;
                font-size: 13px;
            }
            
            .student-card .info-row .value .comment-text {
                color: var(--text-muted);
                font-weight: 400;
                font-style: italic;
                background: var(--surface-2);
                padding: 4px 10px;
                border-radius: 4px;
                display: inline-block;
                border-left: 3px solid var(--warning);
            }
            
            .student-card .parents-section {
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid var(--border);
            }
            
            .student-card .parents-section .parent-item {
                display: flex;
                justify-content: space-between;
                padding: 6px 0;
                font-size: 14px;
            }
            
            .student-card .parents-section .parent-item .parent-name {
                color: var(--text);
            }
            
            .student-card .parents-section .parent-item .parent-phone {
                color: var(--text-muted);
            }
            
            .student-card .parents-section .parent-label {
                font-size: 12px;
                color: var(--text-faint);
                margin-bottom: 4px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            
            .student-card .card-actions {
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid var(--border);
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
            }
            
            .student-card .card-actions .btn {
                flex: 1 1 0;
                padding: 10px 24px;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap:0 8px;
                transition: all 0.2s;
            }
            
            .student-card .card-actions .btn-edit {
                background: var(--success);
                color: var(--on-primary);
            }
            
            .student-card .card-actions .btn-edit:hover {
                background: var(--cl-green);
            }
            
            .student-card .card-actions .btn-warning {
                background: var(--warning);
                color: var(--on-primary);
            }
            
            .student-card .card-actions .btn-warning:hover {
                background: var(--warning);
            }
            
            .student-card .card-actions .btn-delete {
                background: var(--danger);
                color: var(--on-primary);
            }
            
            .student-card .card-actions .btn-delete:hover {
                background: var(--danger-hover);
            }
            
            /* ============================================
               ПРАВАЯ КОЛОНКА - БАЛАНС
               ============================================ */
            .balance-card {
                background: var(--surface);
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
                overflow: hidden;
            }
            
            .balance-card .balance-header {
                padding: 16px 20px;
                background: var(--surface-2);
                border-bottom: 1px solid var(--border);
                font-weight: 600;
                font-size: 15px;
                color: var(--text);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .balance-card .balance-header .quick-actions {
                display: flex;
                gap: 8px;
            }
            
            .balance-card .balance-header .quick-pay-btn {
                flex: 1 1 0;
                text-align: center;
                background: var(--success);
                color: var(--on-primary);
                border: none;
                padding: 6px 16px;
                border-radius: var(--border-radius);
                font-size: 13px;
                cursor: pointer;
                font-weight: 500;
                transition: background 0.2s;
            }
            
            .balance-card .balance-header .quick-pay-btn:hover {
                background: var(--success-hover);
            }
            
            .balance-card .balance-header .quick-writeoff-btn {
                flex: 1 1 0;
                text-align: center;
                background: var(--danger);
                color: var(--on-primary);
                border: none;
                padding: 6px 16px;
                border-radius: var(--border-radius);
                font-size: 13px;
                cursor: pointer;
                font-weight: 500;
                transition: background 0.2s;
            }
            
            .balance-card .balance-header .quick-writeoff-btn:hover {
                background: var(--danger-hover);
            }
            
            .balance-card .balance-body {
                padding: 20px;
            }
            
            .balance-card .balance-main {
                text-align: center;
                padding: 10px 0 16px;
                border-bottom: 1px solid var(--border);
            }
            
            .balance-card .balance-main .amount {
                font-size: 36px;
                font-weight: 700;
            }
            
            .balance-card .balance-main .amount.positive {
                color: var(--success);
            }
            
            .balance-card .balance-main .amount.negative {
                color: var(--danger);
            }
            
            .balance-card .balance-main .amount.zero {
                color: var(--info);
            }
            
            .balance-card .balance-main .label {
                font-size: 14px;
                color: var(--text-muted);
                margin-top: 4px;
            }
            
            .balance-card .balance-main .sub-label {
                font-size: 14px;
                color: var(--danger);
                font-weight: 500;
                margin-top: 2px;
            }
            
            .balance-card .balance-details {
                padding-top: 16px;
            }
            
            .balance-card .balance-details .detail-row {
                display: flex;
                justify-content: space-between;
                padding: 6px 0;
                font-size: 14px;
            }
            
            .balance-card .balance-details .detail-row .label {
                color: var(--text-muted);
            }
            
            .balance-card .balance-details .detail-row .value {
                color: var(--text);
                font-weight: 500;
            }
            
            .balance-card .balance-details .detail-row .value.positive {
                color: var(--success);
            }
            
            .balance-card .balance-details .detail-row .value.negative {
                color: var(--danger);
            }
            
            .balance-card .balance-details .divider {
                border-top: 1px solid var(--border);
                margin: 10px 0;
            }
            
            /* ============================================
               ПОСЛЕДНИЕ ЗАНЯТИЯ (сворачиваемое, по умолчанию открыто)
               ============================================ */
            .recent-lessons {
                background: var(--surface);
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
                overflow: hidden;
                margin-top: 30px;
            }
            
            .recent-lessons .lessons-header {
                padding: 16px 24px;
                background: var(--surface-2);
                border-bottom: 1px solid var(--border);
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                user-select: none;
                transition: background 0.2s;
            }
            
            .recent-lessons .lessons-header:hover {
                background: var(--surface-2);
            }
            
            .recent-lessons .lessons-header .toggle-icon {
                font-size: 14px;
                color: var(--text-faint);
                transition: transform 0.3s;
            }
            
            .recent-lessons .lessons-header .toggle-icon.open {
                transform: rotate(180deg);
            }
            
            .recent-lessons .lessons-body {
                display: block;
                padding: 0;
            }
            
            .recent-lessons .lessons-body.hidden {
                display: none;
            }
            
            .recent-lessons table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }
            
            .recent-lessons table th {
                background: var(--surface-2);
                padding: 12px 16px;
                text-align: left;
                font-weight: 600;
                color: var(--text-muted);
                border-bottom: 1px solid var(--border);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            
            .recent-lessons table td {
                padding: 12px 16px;
                border-bottom: 1px solid var(--border);
                color: var(--text);
            }
            
            .recent-lessons table tr:hover td {
                background: var(--surface-2);
            }
            
            .recent-lessons .lesson-status {
                padding: 2px 12px;
                border-radius: var(--border-radius);
                font-size: 12px;
                font-weight: 500;
                display: inline-block;
            }
            
            .recent-lessons .lesson-status.present {
                background: var(--success-soft);
                color: var(--success);
            }
            
            .recent-lessons .lesson-status.absent {
                background: var(--danger-soft);
                color: var(--danger);
            }
            
            .recent-lessons .lesson-status.late {
                background: var(--warning-soft);
                color: var(--warning);
            }
            
            .recent-lessons .no-lessons {
                padding: 30px 24px;
                text-align: center;
                color: var(--text-faint);
                font-size: 14px;
            }
            
            /* ============================================
               ИСТОРИЯ ПЕРЕВОДОВ (сворачиваемая)
               ============================================ */
            .transfer-history {
                margin-top: 30px;
                background: var(--surface);
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
                overflow: hidden;
            }
            
            .transfer-history .transfer-header {
                padding: 16px 24px;
                background: var(--surface-2);
                border-bottom: 1px solid var(--border);
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                user-select: none;
                transition: background 0.2s;
            }
            
            .transfer-history .transfer-header:hover {
                background: var(--surface-2);
            }
            
            .transfer-history .transfer-header .toggle-icon {
                font-size: 14px;
                color: var(--text-faint);
                transition: transform 0.3s;
            }
            
            .transfer-history .transfer-header .toggle-icon.open {
                transform: rotate(180deg);
            }
            
            .transfer-history .transfer-body {
                display: none;
                padding: 20px 0;
            }
            
            .transfer-history .transfer-body.open {
                display: block;
            }
            
            .transfer-history table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }
            
            .transfer-history table th {
                background: var(--surface-2);
                padding: 12px 16px;
                text-align: left;
                font-weight: 600;
                color: var(--text-muted);
                border-bottom: 1px solid var(--border);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            
            .transfer-history table td {
                padding: 12px 16px;
                border-bottom: 1px solid var(--border);
                color: var(--text);
            }
            
            .transfer-history table tr:hover td {
                background: var(--surface-2);
            }
            
            .transfer-history .no-transfers {
                padding: 30px 24px;
                text-align: center;
                color: var(--text-faint);
                font-size: 14px;
            }
            
            /* ============================================
               ИСТОРИЯ ЗАЧИСЛЕНИЙ И СПИСАНИЙ (сворачиваемая)
               ============================================ */
            .transactions-history {
                margin-top: 30px;
                background: var(--surface);
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
                overflow: hidden;
            }
            
            .transactions-history .transactions-header {
                padding: 16px 24px;
                background: var(--surface-2);
                border-bottom: 1px solid var(--border);
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                user-select: none;
                transition: background 0.2s;
            }
            
            .transactions-history .transactions-header:hover {
                background: var(--surface-2);
            }
            
            .transactions-history .transactions-header .toggle-icon {
                font-size: 14px;
                color: var(--text-faint);
                transition: transform 0.3s;
            }
            
            .transactions-history .transactions-header .toggle-icon.open {
                transform: rotate(180deg);
            }
            
            .transactions-history .transactions-body {
                display: none;
                padding: 20px 0;
            }
            
            .transactions-history .transactions-body.open {
                display: block;
            }
            
            .transactions-history .month-block {
                border-bottom: 1px solid var(--border);
            }
            
            .transactions-history .month-block:last-child {
                border-bottom: none;
            }
            
            .transactions-history .month-header {
                padding: 12px 24px;
                background: var(--surface-2);
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
                border-bottom: 1px solid var(--border);
            }
            
            .transactions-history .month-header .month-title {
                font-size: 16px;
                font-weight: 600;
                color: var(--text);
            }
            
            .transactions-history .month-header .month-summary {
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                font-size: 14px;
            }
            
            .transactions-history .month-header .month-summary .income {
                color: var(--success);
                font-weight: 500;
            }
            
            .transactions-history .month-header .month-summary .expense {
                color: var(--danger);
                font-weight: 500;
            }
            
            .transactions-history .month-header .month-summary .month-total {
                font-weight: 600;
                padding: 2px 12px;
                border-radius: var(--border-radius);
            }
            
            .transactions-history .month-header .month-summary .month-total.positive {
                color: var(--success);
                background: var(--success-soft);
            }
            
            .transactions-history .month-header .month-summary .month-total.negative {
                color: var(--danger);
                background: var(--danger-soft);
            }
            
            .transactions-history .month-header .month-summary .month-total.zero {
                color: var(--info);
                background: var(--info-soft);
            }
            
            .transactions-history table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }
            
            .transactions-history table th {
                background: var(--surface-2);
                padding: 10px 16px;
                text-align: left;
                font-weight: 600;
                color: var(--text-muted);
                border-bottom: 1px solid var(--border);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            
            .transactions-history table td {
                padding: 10px 16px;
                border-bottom: 1px solid var(--border);
                color: var(--text);
            }
            
            .transactions-history table td:first-child {
                width: 130px;
            }
            
            .transactions-history table td:nth-child(2) {
                width: 130px;
            }
            
            .transactions-history table td:nth-child(3) {
                width: 130px;
            }
            
            .transactions-history table td:nth-child(4) {
                width: auto;
            }
            
            .transactions-history table td:nth-child(5) {
                width: 180px;
            }
            
            .transactions-history table tr:hover td {
                background: var(--surface-2);
            }
            
            .transactions-history .transaction-type {
                display: inline-block;
                padding: 2px 12px;
                border-radius: var(--border-radius);
                font-size: 12px;
                font-weight: 500;
            }
            
            .transactions-history .transaction-type.type-payment {
                background: var(--success-soft);
                color: var(--success);
            }
            
            .transactions-history .transaction-type.type-writeoff {
                background: var(--danger-soft);
                color: var(--danger);
            }
            
            .transactions-history .amount-cell.positive {
                color: var(--success);
                font-weight: 600;
            }
            
            .transactions-history .amount-cell.negative {
                color: var(--danger);
                font-weight: 600;
            }
            
            .transactions-history .no-transactions {
                padding: 30px 24px;
                text-align: center;
                color: var(--text-faint);
                font-size: 14px;
            }
            
            /* ============================================
               МОДАЛЬНОЕ ОКНО РЕДАКТИРОВАНИЯ
               ============================================ */
            .edit-modal {
                display: none;
                position: fixed;
                z-index: 1000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                backdrop-filter: blur(4px);
                justify-content: center;
                align-items: center;
            }
            
            .edit-modal.open {
                display: flex;
            }
            
            .edit-modal .modal-content {
                background: var(--surface);
                border-radius: 8px;
                max-width: 700px;
                width: 90%;
                max-height: 90vh;
                overflow-y: auto;
                padding: 30px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            }

            .quick-pay-modal .modal-content {
                background: var(--surface);
                border-radius: 8px;
                max-width: 420px;
                width: 90%;
                padding: 30px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            }

            .quick-writeoff-modal .modal-content {
                background: var(--surface);
                border-radius: 8px;
                max-width: 420px;
                width: 90%;
                padding: 30px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            }

            .delete-modal .modal-content {
                background: var(--surface);
                border-radius: 8px;
                max-width: 500px;
                width: 90%;
                padding: 30px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            }
            
            .edit-modal .modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 24px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--border);
            }
            
            .edit-modal .modal-header h2 {
                margin: 0;
                font-size: 20px;
                color: var(--text);
            }
            
            .edit-modal .modal-header .close-btn {
                background: none;
                border: none;
                font-size: 28px;
                cursor: pointer;
                color: var(--text-faint);
                line-height: 1;
            }
            
            .edit-modal .modal-header .close-btn:hover {
                color: var(--text);
            }
            
            .edit-modal .form-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
                margin-bottom: 16px;
            }
            
            .edit-modal .form-row.three-col {
                grid-template-columns: 1fr 1fr 1fr;
            }
            
            .edit-modal .form-group {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            
            .edit-modal .form-group label {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-muted);
            }
            
            .edit-modal .form-group input,
            .edit-modal .form-group select {
                padding: 10px 12px;
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 14px;
                transition: border-color 0.2s;
                width: 100%;
                box-sizing: border-box;
            }
            
            .edit-modal .form-group input:focus,
            .edit-modal .form-group select:focus {
                border-color: var(--cl-blue);
                outline: none;
                box-shadow: 0 0 0 3px rgba(9, 82, 149, 0.1);
            }
            
            .edit-modal .form-actions {
                display: flex;
                gap: 12px;
                margin-top: 24px;
                padding-top: 20px;
                border-top: 1px solid var(--border);
            }
            
            .edit-modal .form-actions .btn-save {
                background: var(--success);
                color: var(--on-primary);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
            }
            
            .edit-modal .form-actions .btn-save:hover {
                background: var(--success-hover);
            }
            
            .edit-modal .form-actions .btn-cancel {
                background: var(--surface-3);
                color: var(--text);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
            }
            
            .edit-modal .form-actions .btn-cancel:hover {
                background: var(--surface-3);
            }
            
            /* ============================================
               МОДАЛЬНОЕ ОКНО ЗАЧИСЛЕНИЯ
               ============================================ */
            .quick-pay-modal {
                display: none;
                position: fixed;
                z-index: 1001;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                backdrop-filter: blur(4px);
                justify-content: center;
                align-items: center;
            }
            
            .quick-pay-modal.open {
                display: flex;
            }
            
            .quick-pay-modal .modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--border);
            }
            
            .quick-pay-modal .modal-header h2 {
                margin: 0;
                font-size: 18px;
                color: var(--text);
            }
            
            .quick-pay-modal .modal-header .close-btn {
                background: none;
                border: none;
                font-size: 28px;
                cursor: pointer;
                color: var(--text-faint);
                line-height: 1;
            }
            
            .quick-pay-modal .modal-header .close-btn:hover {
                color: var(--text);
            }
            
            .quick-pay-modal .form-group {
                margin-bottom: 16px;
            }
            
            .quick-pay-modal .form-group label {
                display: block;
                font-size: 13px;
                font-weight: 500;
                color: var(--text-muted);
                margin-bottom: 4px;
            }
            
            .quick-pay-modal .form-group input,
            .quick-pay-modal .form-group select {
                padding: 10px 12px;
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 14px;
                width: 100%;
                box-sizing: border-box;
            }
            
            .quick-pay-modal .form-group input:focus,
            .quick-pay-modal .form-group select:focus {
                border-color: var(--cl-blue);
                outline: none;
                box-shadow: 0 0 0 3px rgba(9, 82, 149, 0.1);
            }
            
            .quick-pay-modal .form-actions {
                display: flex;
                gap: 12px;
                margin-top: 20px;
                padding-top: 16px;
                border-top: 1px solid var(--border);
            }
            
            .quick-pay-modal .form-actions .btn-pay {
                background: var(--success);
                color: var(--on-primary);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
                flex: 1;
            }
            
            .quick-pay-modal .form-actions .btn-pay:hover {
                background: var(--success-hover);
            }
            
            .quick-pay-modal .form-actions .btn-cancel {
                background: var(--surface-3);
                color: var(--text);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
            }
            
            .quick-pay-modal .form-actions .btn-cancel:hover {
                background: var(--surface-3);
            }
            
            .quick-pay-modal .student-info {
                background: var(--surface-2);
                padding: 12px 16px;
                border-radius: 8px;
                margin-bottom: 20px;
                font-size: 14px;
            }
            
            .quick-pay-modal .student-info .name {
                font-weight: 600;
                color: var(--text);
            }
            
            .quick-pay-modal .student-info .balance {
                color: var(--text-muted);
                margin-top: 4px;
            }
            
            /* ============================================
               МОДАЛЬНОЕ ОКНО СПИСАНИЯ
               ============================================ */
            .quick-writeoff-modal {
                display: none;
                position: fixed;
                z-index: 1001;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                backdrop-filter: blur(4px);
                justify-content: center;
                align-items: center;
            }
            
            .quick-writeoff-modal.open {
                display: flex;
            }
            
            .quick-writeoff-modal .modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--border);
            }
            
            .quick-writeoff-modal .modal-header h2 {
                margin: 0;
                font-size: 18px;
                color: var(--text);
            }
            
            .quick-writeoff-modal .modal-header .close-btn {
                background: none;
                border: none;
                font-size: 28px;
                cursor: pointer;
                color: var(--text-faint);
                line-height: 1;
            }
            
            .quick-writeoff-modal .modal-header .close-btn:hover {
                color: var(--text);
            }
            
            .quick-writeoff-modal .form-group {
                margin-bottom: 16px;
            }
            
            .quick-writeoff-modal .form-group label {
                display: block;
                font-size: 13px;
                font-weight: 500;
                color: var(--text-muted);
                margin-bottom: 4px;
            }
            
            .quick-writeoff-modal .form-group input,
            .quick-writeoff-modal .form-group select {
                padding: 10px 12px;
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 14px;
                width: 100%;
                box-sizing: border-box;
            }
            
            .quick-writeoff-modal .form-group input:focus,
            .quick-writeoff-modal .form-group select:focus {
                border-color: var(--cl-blue);
                outline: none;
                box-shadow: 0 0 0 3px rgba(9, 82, 149, 0.1);
            }
            
            .quick-writeoff-modal .form-actions {
                display: flex;
                gap: 12px;
                margin-top: 20px;
                padding-top: 16px;
                border-top: 1px solid var(--border);
            }
            
            .quick-writeoff-modal .form-actions .btn-writeoff {
                background: var(--danger);
                color: var(--on-primary);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
                flex: 1;
            }
            
            .quick-writeoff-modal .form-actions .btn-writeoff:hover {
                background: var(--danger-hover);
            }
            
            .quick-writeoff-modal .form-actions .btn-cancel {
                background: var(--surface-3);
                color: var(--text);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
            }
            
            .quick-writeoff-modal .form-actions .btn-cancel:hover {
                background: var(--surface-3);
            }
            
            .quick-writeoff-modal .student-info {
                background: var(--surface-2);
                padding: 12px 16px;
                border-radius: 8px;
                margin-bottom: 20px;
                font-size: 14px;
            }
            
            .quick-writeoff-modal .student-info .name {
                font-weight: 600;
                color: var(--text);
            }
            
            .quick-writeoff-modal .student-info .balance {
                color: var(--text-muted);
                margin-top: 4px;
            }
            
            /* ============================================
               МОДАЛЬНОЕ ОКНО УДАЛЕНИЯ
               ============================================ */
            .delete-modal {
                display: none;
                position: fixed;
                z-index: 1002;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                backdrop-filter: blur(4px);
                justify-content: center;
                align-items: center;
            }
            
            .delete-modal.open {
                display: flex;
            }
            
            .delete-modal .modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--border);
            }
            
            .delete-modal .modal-header h2 {
                margin: 0;
                font-size: 20px;
                color: var(--danger);
            }
            
            .delete-modal .modal-header .close-btn {
                background: none;
                border: none;
                font-size: 28px;
                cursor: pointer;
                color: var(--text-faint);
                line-height: 1;
            }
            
            .delete-modal .modal-header .close-btn:hover {
                color: var(--text);
            }
            
            .delete-modal .delete-warning {
                background: var(--warning-soft);
                padding: 12px 16px;
                border-radius: 8px;
                border-left: 4px solid var(--warning);
                margin: 10px 0 16px;
            }
            
            .delete-modal .delete-warning strong {
                color: var(--danger);
            }
            
            .delete-modal .delete-student-name {
                font-size: 16px;
                font-weight: 600;
                color: var(--text);
                padding: 10px 0;
            }
            
            .delete-modal .form-actions {
                display: flex;
                gap: 12px;
                margin-top: 20px;
                padding-top: 16px;
                border-top: 1px solid var(--border);
            }
            
            .delete-modal .form-actions .btn-delete-confirm {
                background: var(--danger);
                color: var(--on-primary);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
                flex: 1;
            }
            
            .delete-modal .form-actions .btn-delete-confirm:hover {
                background: var(--danger-hover);
            }
            
            .delete-modal .form-actions .btn-cancel {
                background: var(--surface-3);
                color: var(--text);
                padding: 12px 32px;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
                flex: 1;
            }
            
            .delete-modal .form-actions .btn-cancel:hover {
                background: var(--surface-3);
            }
            
            /* ============================================
               АДАПТИВНОСТЬ
               ============================================ */
            @media (max-width: 1024px) {
                .student-page {
                    grid-template-columns: 1fr;
                }
            }
            
            @media (max-width: 768px) {
                .student-card .card-header .top-row {
                    flex-direction: column;
                    align-items: flex-start;
                }
                
                .student-card .info-row {
                    flex-direction: column;
                    padding: 10px 0;
                }
                
                .student-card .info-row .label {
                    min-width: auto;
                    font-size: 12px;
                }
                
                .student-card .card-actions {
                    flex-direction: column;
                }
                
                .student-card .card-actions .btn {
                    justify-content: center;
                }
                
                .balance-card .balance-header {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 10px;
                }
                
                .balance-card .balance-header .quick-actions {
                    justify-content: center;
                }
                
                .edit-modal .form-row {
                    grid-template-columns: 1fr;
                }
                
                .edit-modal .form-row.three-col {
                    grid-template-columns: 1fr;
                }
                
                .edit-modal .modal-content {
                    padding: 20px;
                }
                
                .balance-card .balance-main .amount {
                    font-size: 28px;
                }
                
                .recent-lessons table {
                    font-size: 12px;
                }
                
                .recent-lessons table th,
                .recent-lessons table td {
                    padding: 8px 10px;
                }
                
                .transactions-history .month-header {
                    flex-direction: column;
                    align-items: flex-start;
                }
                
                .transactions-history .month-header .month-summary {
                    font-size: 13px;
                }
                
                .transactions-history table {
                    font-size: 12px;
                }
                
                .transactions-history table th,
                .transactions-history table td {
                    padding: 8px 10px;
                }
                
                .transactions-history table td:first-child,
                .transactions-history table td:nth-child(2),
                .transactions-history table td:nth-child(3),
                .transactions-history table td:nth-child(5) {
                    width: auto;
                }
            }


/* ===================== From php/stavka_edit.php ===================== */
        .setka-form {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .form-row {
            margin-bottom: 15px;
        }
        
        .form-row label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: var(--text);
        }
        
        .form-row input[type="text"],
        .form-row input[type="date"],
        .form-row input[type="number"],
        .form-row select {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }
        
        .form-row-inline {
            display: flex;
            gap: 20px;
        }
        
        .form-row-inline > div {
            flex: 1;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-primary {
            background: var(--cl-green);
            color: var(--on-primary);
        }
        
        .btn-primary:hover {
            background: var(--cl-green-dark);
        }
        
        .btn-secondary {
            background: var(--cl-blue);
            color: var(--on-primary);
        }
        
        .btn-secondary:hover {
            background: var(--info);
        }
        
        .btn-danger {
            background: var(--danger);
            color: var(--on-primary);
        }
        
        .btn-danger:hover {
            background: var(--danger-hover);
        }
        
        .btn-warning {
            background: var(--warning);
            color: var(--on-primary);
        }
        
        .btn-warning:hover {
            background: var(--warning);
        }
        
        .uslugi-section {
            margin-top: 30px;
        }
        
        .usluga-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .usluga-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--border);
        }
        
        .usluga-title {
            font-weight: bold;
            font-size: 16px;
        }
        
        .usluga-price {
            color: var(--cl-green);
            font-weight: bold;
            font-size: 18px;
        }
        
        .usluga-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            color: var(--text-muted);
            font-size: 14px;
        }
        
        .usluga-actions {
            position: absolute;
            top: 15px;
            right: 15px;
        }
        
        .usluga-actions button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin-left: 5px;
            padding: 5px;
        }
        
        .edit-btn {
            color: var(--cl-blue);
        }
        
        .delete-btn {
            color: var(--danger);
        }
        
        .usluga-form {
            background: var(--info-soft);
            border: 1px solid var(--cl-blue);
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .form-group {
            margin-bottom: 10px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: var(--text-muted);
            font-size: 13px;
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .info-text {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 5px;
        }
        
        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: var(--cl-blue);
            text-decoration: none;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
        
        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }
        
        .badge-info {
            background: var(--info-soft);
            color: var(--info);
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--text-faint);
            background: var(--surface-2);
            border-radius: 6px;
            margin: 20px 0;
        }


/* ===================== From php/otchet_jurnal_group.php ===================== */
.journal-report {
            width: 100%;
            overflow-x: auto;
            margin-top: 20px;
        }
        
        .journal-report table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .journal-report th, .journal-report td {
            border: 1px solid var(--border);
            padding: 8px;
            text-align: center;
            vertical-align: middle;
            min-width: 50px;
        }
        
        .journal-report th {
            background-color: var(--surface-2);
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .student-name {
            text-align: left;
            min-width: 200px;
            position: sticky;
            left: 0;
            background-color: var(--surface);
            z-index: 5;
            white-space: nowrap;
        }
        
        .vertical-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            height: 150px;
            padding: 5px 2px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .grade-cell {
            font-weight: bold;
            font-size: 14px;
        }
        
        .absence-cell {
            background-color: var(--danger-soft);
            color: var(--danger);
            font-weight: bold;
        }
        
        .empty-cell {
            background-color: var(--surface-2);
        }
        
        .summary-row {
            background-color: var(--surface-2);
            font-weight: bold;
        }
        
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background-color: var(--surface-2);
            border-radius: 5px;
        }
        
        .filter-form {
            background-color: var(--surface-3);
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        
        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: flex-end;
            margin-bottom: 10px;
        }
        
        .filter-group {
            flex: 1;
            min-width: 200px;
        }
        
        .filter-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--text);
        }
        
        .filter-group input[type="date"] {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 14px;
        }
        
        .filter-actions {
            display: flex;
            gap: 10px;
            padding:0 10px;
            margin-top: 15px;
        }
        
        .date-range-info {
            background-color: var(--info-soft);
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
            margin-top: 10px;
        }
        
        .print-btn {
            margin-top: 10px;
        }
        
        .avg-grade {
            font-size: 16px;
            color: var(--cl-blue);
        }
        
        .attendance-rate {
            font-size: 14px;
            color: var(--success);
        }
        
        @media print {
            .no-print {
                display: none;
            }
            
            .journal-report table {
                font-size: 12px;
            }
            
            .journal-report th, .journal-report td {
                padding: 4px;
            }
            
            .vertical-text {
                font-size: 10px;
                height: 120px;
            }
        }


/* ===================== From php/groups_add.php ===================== */
.modal {
                display: none;
                position: fixed;
                z-index: 1000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
            }
            .modal-content {
                background-color: var(--surface-2);
                margin: 15% auto;
                padding: 20px;
                border-radius: 8px;
                width: 400px;
                text-align: center;
            }
            .modal-success {
                border-left: 4px solid var(--cl-green);
            }
            .modal-buttons {
                margin-top: 20px;
            }
            .modal-buttons button {
                padding: 10px 20px;
                margin: 0 10px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            .btn-primary {
                background-color: var(--cl-green);
                color: var(--on-primary);
            }
            .btn-secondary {
                background-color: var(--neutral);
                color: var(--on-primary);
            }


/* ===================== From php/lessons_edit.php ===================== */
.external-student-row {
                background-color: var(--surface-2);
            }
            .remove-external-btn {
                color: #ff4444;
                text-decoration: none;
                margin-left: 10px;
                font-size: 12px;
            }
            .remove-external-btn:hover {
                text-decoration: underline;
            }
            .jurnal table {
                width: 100%;
                border-collapse: collapse;
                margin: 20px 0;
            }
            .jurnal table td, .jurnal table th {
                border: 1px solid var(--border);
                padding: 8px;
                text-align: left;
            }
            .jurnal table th {
                background-color: var(--surface-2);
            }
            .block_form input[type="number"] {
                width: 80px;
            }
            .external-students-form {
                border: 1px solid var(--border);
                padding: 15px;
                margin: 20px 0;
                border-radius: 5px;
                background-color: var(--surface-2);
            }


/* ===================== From php/teachers_edit_new.php ===================== */
.setka-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}
.setka-card.active {
    background: var(--info-soft);
    border-color: var(--cl-blue);
}
.setka-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.setka-title {
    font-weight: bold;
    font-size: 16px;
    color: var(--text);
}
.setka-name {
    font-size: 18px;
    color: var(--cl-green-dark);
    font-weight: bold;
}
.setka-dates {
    color: var(--text-muted);
    font-size: 14px;
    margin: 5px 0;
    background: var(--surface-2);
    padding: 8px;
    border-radius: var(--border-radius);
}
.setka-actions {
    position: absolute;
    top: 15px;
    right: 15px;
}
.setka-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-left: 5px;
    padding: 5px;
}
.delete-setka-btn {
    color: var(--cl-red);
}
.setka-form {
    background: var(--surface);
    border: 1px solid var(--cl-green);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.form-row {
    margin-bottom: 15px;
}
.form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text);
}
.form-row select, .form-row input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-size: 14px;
}
.form-row select:focus, .form-row input[type="date"]:focus {
    border-color: var(--cl-green);
    outline: none;
}
.form-row-inline {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.btn-save {
    background: var(--cl-green);
    color: var(--on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
}
.btn-save:hover {
    background: var(--cl-green-dark);
}
.btn-cancel {
    background: var(--neutral);
    color: var(--on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
}
.btn-cancel:hover {
    background: var(--neutral-hover);
}
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 500;
}
.badge-success {
    background: var(--success-soft);
    color: var(--success-text);
}
.badge-warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}
.badge-info {
    background: var(--info-soft);
    color: var(--info-text);
}
.badge-danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-faint);
    background: var(--surface-2);
    border-radius: 8px;
}
.current-date-badge {
    background: var(--info-soft);
    color: var(--info);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 8px;
}

/* Стили для зарплаты */
.salary-summary {
    background: var(--cl-fon-gray);
    color: var(--on-primary);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 25px;
}
.salary-total {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
}
.salary-label {
    font-size: 16px;
    opacity: 0.9;
    margin-top: 5px;
}
.period-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.period-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--surface);
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
    text-decoration: none;
    color: var(--text);
}
.period-btn:hover {
    background: var(--surface-2);
}
.period-btn.active {
    background: var(--cl-green);
    color: var(--on-primary);
    border-color: var(--cl-green);
}
.custom-period-form {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--surface-2);
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
}
.salary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}
.salary-table th {
    background: var(--surface-2);
    padding: 12px;
    text-align: left;
    font-weight: 600;
}
.salary-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
.salary-table tr:hover {
    background: var(--surface-2);
}
.payment-found {
    color: var(--cl-green-dark);
    font-weight: bold;
}
.payment-not-found {
    color: var(--cl-red);
}
.setka-badge {
    background: var(--info-soft);
    color: var(--info);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
}
.debug-info {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 5px;
    cursor: help;
    border-bottom: 1px dotted var(--border-strong);
}
.lesson-link {
    color: var(--cl-blue);
    text-decoration: none;
    border-bottom: 1px dashed var(--cl-blue);
}
.lesson-link:hover {
    color: var(--cl-green-dark);
    border-bottom: 1px solid var(--cl-green-dark);
}

/* ===================== From teacher/teacher_zp.php ===================== */
body.page-zp .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.earnings-header {
    background: var(--cl-fon-gray);
    color: var(--on-primary);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.teacher-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.teacher-name {
    font-size: 28px;
    font-weight: bold;
}

.teacher-stavka {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 5px;
}

.total-earnings {
    font-size: 36px;
    font-weight: bold;
    background: rgba(255,255,255,0.15);
    padding: 15px 30px;
    border-radius: var(--border-radius);
}

.total-earnings small {
    font-size: 16px;
    display: block;
    color: rgba(255,255,255,0.8);
}

.filter-section {
    background: var(--cl-gray-light);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid var(--border);
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-muted);
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 14px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

.btn-primary {
    background: var(--cl-green);
    color: var(--on-primary);
}

.btn-primary:hover {
    background: var(--cl-green-dark);
}

.btn-secondary {
    background: var(--neutral);
    color: var(--on-primary);
}

.btn-secondary:hover {
    background: var(--neutral-hover);
}

.btn-info {
    background: var(--info);
    color: var(--on-primary);
}

.btn-info:hover {
    background: var(--info-hover);
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--surface);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
}

.stat-card h3 {
    margin: 0 0 10px 0;
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--text);
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 5px;
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.group-card {
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
}

.group-header {
    background: var(--cl-fon-gray);
    color: var(--on-primary);
    padding: 20px;
}

.group-header h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.group-header .group-info {
    display: flex;
    gap: 15px;
    font-size: 14px;
    opacity: 0.9;
}

.group-body {
    padding: 20px;
}

.group-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.group-stat {
    background: var(--cl-gray-light);
    padding: 12px;
    border-radius: var(--border-radius);
}

.group-stat .value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text);
    line-height: 1.2;
}

.group-stat .label {
    font-size: 12px;
    color: var(--text-muted);
}

.group-earnings {
    background: var(--cl-green);
    color: var(--on-primary);
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
}

.group-earnings small {
    font-size: 14px;
    display: block;
    font-weight: normal;
}

.group-footer {
    padding: 15px 20px;
    background: var(--cl-gray-light);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.details-link {
    color: var(--cl-green-dark);
    text-decoration: none;
    font-weight: 500;
}

.details-link:hover {
    text-decoration: underline;
}

.summary-section {
    background: var(--cl-gray-light);
    padding: 25px;
    border-radius: 8px;
    margin-top: 30px;
    border: 1px solid var(--border);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-total {
    font-size: 20px;
    font-weight: bold;
    color: var(--cl-green-dark);
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px solid var(--cl-green);
}

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--border-radius);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success {
    background: var(--success-soft);
    color: var(--success-text);
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.badge-info {
    background: var(--info-soft);
    color: var(--info-text);
}

.empty-state {
    text-align: center;
    padding: 60px;
    background: var(--cl-gray-light);
    border-radius: 8px;
    color: var(--text-muted);
}

.empty-state h3 {
    margin-bottom: 15px;
    color: var(--text-muted);
}

.no-stavka-warning {
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    color: var(--warning-text);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.stavka-used-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
}

@media print {
    .no-print {
        display: none !important;
    }
    
    .group-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid var(--border);
        box-shadow: none;
    }
    
    .group-header {
        background: var(--surface-2);
        color: var(--text);
    }
    
    .group-earnings {
        background: var(--surface-2);
        color: var(--text);
    }
}

/* ===================== From teacher/teacher_journal_group.php ===================== */
.journal-report {
            width: 100%;
            overflow-x: auto;
            margin-top: 20px;
        }
        
        .journal-report table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .journal-report th, .journal-report td {
            border: 1px solid var(--border);
            padding: 8px;
            text-align: center;
            vertical-align: middle;
            min-width: 50px;
        }
        
        .journal-report th {
            background-color: var(--surface-2);
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .student-name {
            text-align: left;
            min-width: 200px;
            position: sticky;
            left: 0;
            background-color: var(--surface);
            z-index: 5;
            white-space: nowrap;
        }
        
        .vertical-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            height: 150px;
            padding: 5px 2px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .grade-cell {
            font-weight: bold;
            font-size: 14px;
        }
        
        .absence-cell {
            background-color: var(--danger-soft);
            color: var(--danger);
            font-weight: bold;
        }
        
        .empty-cell {
            background-color: var(--surface-2);
        }
        
        .summary-row {
            background-color: var(--surface-2);
            font-weight: bold;
        }
        
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background-color: var(--surface-2);
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-form {
            background-color: var(--surface-2);
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        
        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: flex-end;
            margin-bottom: 10px;
        }
        
        .filter-group {
            flex: 1;
            min-width: 200px;
        }
        
        .filter-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--text);
        }
        
        .filter-group input[type="date"] {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 14px;
        }
        
        .filter-actions {
            display: flex;
            gap: 10px;
            padding: 0 10px;
            margin-top: 15px;
        }
        
        .print-btn {
            margin-top: 10px;
        }
        
        .avg-grade {
            font-size: 16px;
            color: var(--cl-blue);
        }
        
        .attendance-rate {
            font-size: 14px;
            color: var(--success);
        }
        
        .group-progress {
            background-color: var(--surface-2);
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        
        .progress-bar {
            height: 10px;
            background-color: var(--surface-3);
            border-radius: 5px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--cl-green);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .teacher-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .teacher-badge {
            background-color: var(--cl-blue);
            color: var(--on-primary);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .btn-secondary {
            display: inline-block;
            padding: 8px 16px;
            background-color: var(--neutral);
            color: var(--on-primary);
            text-decoration: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-secondary:hover {
            background-color: var(--neutral-hover);
        }
        
        .alert-warning {
            padding: 15px;
            background-color: var(--warning-soft);
            border: 1px solid var(--warning);
            color: var(--warning-text);
            border-radius: 4px;
            margin: 20px 0;
        }
        
        @media print {
            .no-print {
                display: none !important;
            }
            
            .journal-report table {
                font-size: 12px;
            }
            
            .journal-report th, .journal-report td {
                padding: 4px;
            }
            
            .vertical-text {
                font-size: 10px;
                height: 120px;
            }
            
            .student-name {
                background-color: var(--surface) !important;
            }
        }


/* ===================== From login/index.php ===================== */
.error {
            background-color: var(--danger-soft);
            color: var(--danger-text);
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 20px;
            border: 1px solid var(--danger);
        }
        .error-blocked {
            background-color: var(--warning-soft);
            color: var(--warning-text);
            border-color: var(--warning);
        }



/* ============================================================
   MOBILE ADAPTIVITY FIXES
   Consolidated fixes so every page is usable on mobile screens.
   Placed last so they win over earlier same-specificity rules.
   ============================================================ */

/* ---- Главное меню (шапка) - раньше не адаптировалось ---- */
@media screen and (max-width:900px) {
    header .menu {
        display:flex;
        flex-wrap:wrap;
        padding:10px 15px 0;
    }

    header .menu a{
        float:none;
        font-size:11pt;
        margin:0 15px 12px 0;
        padding:0 0 8px;
    }

    header .menu a:last-child{
        float:none;
        margin:0 0 12px;
    }

    .logo {
        font-size:14pt;
        padding:0 15px;
    }
}

@media screen and (max-width:480px) {
    header .menu a{
        font-size:10pt;
        margin:0 10px 10px 0;
    }
}

/* ---- Календарь (calendar.php, calendar_lessons.php) ----
   Сетка календаря по своей природе шире экрана телефона
   (колонка времени + 5-7 колонок дней). Даём ей скроллиться
   по горизонтали внутри своего блока, а не ломать всю страницу. */
.calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.calendar-scroll .time-scale,
.calendar-scroll .calendar-grid {
    min-width: 700px;
}

@media screen and (max-width:900px) {
    .day-header {
        min-width: 100px;
        padding: 10px 5px;
        font-size: 12px;
    }

    .day-column {
        min-width: 110px;
    }

    .time-gutter,
    .time-column {
        width: 60px;
    }
}

/* ---- Модальные окна (groups_edit.php, groups_add.php) ----
   Раньше .modal-content имел фиксированную ширину 400px,
   что шире экрана большинства телефонов. */
.modal-content {
    max-width: 90vw;
    box-sizing: border-box;
}

@media screen and (max-width:480px) {
    .modal-content {
        width: 100%;
        margin: 25% auto;
    }
}

/* ---- Широкие таблицы без адаптива ----
   payments-table (php/pay-all.php), columns-table и sample-table
   (php/admin/admins_struktura_bd.php), history-table
   (php/teachers_edit.php), schedule-table (php/groups_edit.php) -
   даём им скроллиться по горизонтали вместо того, чтобы ломать
   верстку страницы или сжимать колонки до нечитаемости. */
@media screen and (max-width:768px) {
    .payments-table,
    .columns-table,
    .sample-table,
    .history-table,
    .schedule-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .payments-table thead,
    .columns-table thead,
    .sample-table thead,
    .history-table thead,
    .schedule-table thead,
    .payments-table tbody,
    .columns-table tbody,
    .sample-table tbody,
    .history-table tbody,
    .schedule-table tbody,
    .payments-table tr,
    .columns-table tr,
    .sample-table tr,
    .history-table tr,
    .schedule-table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
}

/* ---- Строение БД (php/admin/admins_struktura_bd.php) ----
   Заголовок карточки таблицы может переполниться на узких экранах. */
@media screen and (max-width:480px) {
    .table-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .db-structure {
        padding: 12px;
    }
}

/* ---- Строки формы в одну линию без переноса ----
   php/stavka_edit.php (.form-row-inline > div { flex:1 }) и
   php/teachers_edit_new.php (.form-row-inline) сжимались на
   узких экранах вместо переноса на новую строку. */
@media screen and (max-width:600px) {
    .form-row-inline {
        flex-wrap: wrap;
    }

    .form-row-inline > div {
        flex: 1 1 100%;
    }
}

/* ---- 404 страница ----
   Уже адаптирована (flex-центрирование, width:90%), но чуть
   уменьшим отступы на совсем маленьких экранах. */
@media screen and (max-width:400px) {
    .error-box {
        padding: 25px 20px;
    }

    .error-code {
        font-size: 56px;
    }
}

/* ============================================================
   Страница «Настройки» (php/settings-all.php)
   Раньше это был плоский список <h3>/<p> без карточек, к тому же
   ломался классом .settings, «утёкшим» из календаря (display:flex).
   Оформлено в стиле эталона (Карточка группы): белые карточки
   8px, светлая рамка, зелёные ссылки.
   ============================================================ */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 20px 0 30px;
}

.settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.settings-card h3 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14pt;
    color: var(--text);
}

.settings-card p {
    margin: 8px 0;
    line-height: 1.4;
    font-size: 10pt;
    color: var(--text-muted);
}

.settings-card a {
    color: var(--cl-green);
    font-weight: 600;
    text-decoration: none;
}

.settings-card a:hover {
    text-decoration: underline;
}

.settings-card-note p {
    color: var(--text-faint);
    font-style: italic;
}

.settings-section-title {
    margin: 10px 0 5px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14pt;
    color: var(--text);
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Личный кабинет студента (/lk/) + управление доступом (админка)
   Стиль согласован с эталоном «Карточка группы»: плоские карточки
   8px, зелёный акцент var(--cl-green), тёмная шапка var(--cl-fon-gray).
   ============================================================ */

.lk-welcome {
    margin: 10px 0 20px;
    font-size: 12pt;
    color: var(--text);
}

.lk-top-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media screen and (max-width: 800px) {
    .lk-top-grid {
        grid-template-columns: 1fr;
    }
}

.lk-balance-card {
    background: var(--cl-fon-gray);
    color: var(--on-primary);
    border-radius: 8px;
    padding: 25px;
}

.lk-balance-label {
    font-size: 11pt;
    opacity: 0.85;
}

.lk-balance-amount {
    font-size: 32px;
    font-weight: bold;
    margin: 8px 0;
}

.lk-balance-card.lk-balance-negative .lk-balance-amount {
    color: #ff8a80;
}

.lk-balance-card.lk-balance-positive .lk-balance-amount {
    color: #7ee2ad;
}

.lk-balance-sub {
    font-size: 10pt;
    opacity: 0.8;
    margin-bottom: 15px;
}

.lk-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lk-stat-value {
    font-size: 26px;
    font-weight: bold;
    color: var(--text);
}

.lk-stat-label {
    font-size: 10pt;
    color: var(--text-muted);
    margin-top: 5px;
}

.lk-pay-btn {
    display: inline-block;
    align-self: flex-start;
    background: var(--cl-green);
    color: var(--on-primary) !important;
    padding: 10px 18px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
}

.lk-pay-btn:hover {
    background: var(--cl-green-dark);
}

.lk-pay-btn-inline {
    margin-bottom: 10px;
}

.lk-section {
    margin-bottom: 35px;
}

.lk-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.lk-section-header h2 {
    font-size: 14pt;
    color: var(--text);
    margin: 0;
}

.lk-see-all {
    color: var(--cl-green);
    font-size: 10pt;
    text-decoration: none;
}

.lk-see-all:hover {
    text-decoration: underline;
}

.lk-empty {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

.lk-table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.lk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}

.lk-table th {
    background: var(--surface-2);
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.lk-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    color: var(--text);
}

.lk-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 9pt;
    font-weight: 600;
}

.lk-badge-present {
    background: var(--success-soft);
    color: var(--success-text);
}

.lk-badge-absent {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.lk-amount-plus {
    color: var(--cl-green-dark);
    font-weight: 600;
}

.lk-amount-minus {
    color: var(--danger);
    font-weight: 600;
}

.lk-pagination {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.lk-pagination a,
.lk-page-current {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 10pt;
}

.lk-page-current {
    background: var(--cl-green);
    color: var(--on-primary);
    border-color: var(--cl-green);
}

.lk-notice {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    font-size: 10pt;
}

.lk-notice-success {
    background: var(--success-soft);
    color: var(--success-text);
    border: 1px solid var(--success);
}

.lk-notice-warn {
    background: var(--warning-soft);
    color: var(--warning-text);
    border: 1px solid var(--warning);
}

.lk-notice-error {
    background: var(--danger-soft);
    color: var(--danger-text);
    border: 1px solid var(--danger);
}

.lk-pay-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 25px;
    max-width: 420px;
}

.lk-pay-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lk-pay-form input {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 11pt;
}

.lk-pay-hint {
    font-size: 9pt;
    color: var(--text-muted);
    margin-top: 12px;
}

.lk-intro {
    margin-bottom: 15px;
}

/* Переключатель студента в шапке личного кабинета */
.lk-child-switcher {
    background: rgba(255,255,255,0.08);
    max-width: var(--content-size);
    margin: 0 auto;
    padding: 8px 20px;
    font-size: 10pt;
}

.lk-child-switcher-label {
    color: rgba(255,255,255,0.7);
    margin-right: 10px;
}

.lk-child-active {
    color: var(--on-primary);
    font-weight: 600;
    margin-right: 15px;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--cl-green);
}

.lk-child-link {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    margin-right: 15px;
}

.lk-child-link:hover {
    color: var(--on-primary);
    text-decoration: underline;
}

/* Админка: управление доступом студента в ЛК + настройки ЮKassa */
.lk-access-link {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--info);
    color: var(--on-primary);
    border-radius: var(--border-radius);
    font-size: 10pt;
    font-weight: 500;
    text-decoration: none;
}

.lk-access-link:hover {
    background: var(--info-hover);
    text-decoration: none;
}

.lk-access-student-name {
    margin: 10px 0 20px;
    color: var(--text);
}

.lk-access-card {
    max-width: 100%;
    width: 100%;
    margin-bottom: 20px;
}

.lk-access-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
}

.lk-access-form-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}

.lk-access-form-row label {
    flex: 1;
}

@media screen and (max-width: 500px) {
    .lk-access-form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.lk-access-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10pt;
    color: var(--text-muted);
}

.lk-access-form input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 11pt;
}

.lk-checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.lk-access-inline-form {
    display: inline-block;
    margin: 4px 0;
}

.lk-code-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    font-family: monospace;
    font-size: 10pt;
    margin-top: 6px;
    word-break: break-all;
}

.lk-instructions {
    padding-left: 20px;
    color: var(--text);
    font-size: 10pt;
    line-height: 1.6;
}

@media screen and (max-width: 600px) {
    .lk-table-wrap {
        overflow-x: auto;
    }
}

/* Поля формы настроек ЮKassa (пароль, выпадающие списки) */
.lk-access-form input[type="password"],
.lk-access-form input[type="email"],
.lk-access-form select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 11pt;
}

.lk-pay-form input[type="email"] {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 11pt;
}

/* ============================================================
   Раздел «Помощь» (тикеты) — /lk/support*.php и /php/support_*.php
   + счётчики новых обращений в меню (личный кабинет и админка)
   ============================================================ */

.lk-menu-badge {
    display: inline-block;
    background: var(--danger);
    color: var(--on-primary);
    font-size: 8pt;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    vertical-align: middle;
}

.lk-badge-open {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.lk-badge-closed {
    background: var(--surface-2);
    color: var(--text-muted);
}

.lk-row-unread {
    background: var(--warning-soft) !important;
    font-weight: 600;
}

.lk-ticket-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.lk-ticket-filters a {
    padding: 6px 14px;
    border-radius: var(--border-radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 10pt;
}

.lk-ticket-filters a.lk-filter-active {
    background: var(--cl-green);
    border-color: var(--cl-green);
    color: var(--on-primary);
}

.lk-support-form-card {
    max-width: 100%;
    width: 100%;
}

.lk-pay-form textarea {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 11pt;
    font-family: inherit;
    resize: vertical;
}

.lk-ticket-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    background: var(--cl-gray-light);
    border-left: 4px solid var(--cl-green);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 15px;
}

.lk-ticket-header h2 {
    margin: 0;
    font-size: 14pt;
    color: var(--text);
}

.lk-ticket-context {
    color: var(--text-muted);
    font-size: 10pt;
    margin-bottom: 20px;
}

.lk-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
    width: 100%;
}

.lk-ticket-message {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.lk-ticket-message-user {
    margin-right: 0;
}

.lk-ticket-message-admin {
    margin-left: 50px;
    width: calc(100% - 50px);
    background: var(--success-soft);
    border-color: var(--success);
}

.lk-ticket-message-meta {
    font-size: 9pt;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.lk-ticket-message-body {
    font-size: 10.5pt;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media screen and (max-width: 700px) {
    .lk-ticket-message-admin {
        margin-left: 20px;
        width: calc(100% - 20px);
    }
}

/* ============================================================
   Бейдж уровня доступа администратора (php/admin/admins.php,
   php/admin/admins_edit.php) — Super Administrator / Administrator
   ============================================================ */
.admin-role-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 8.5pt;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 6px;
}

.admin-role-badge.role-super {
    background: var(--success-soft);
    color: var(--cl-green-dark);
    border: 1px solid var(--success);
}

.admin-role-badge.role-admin {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}