/* ===== VARIABLES ===== */
:root {
    /* Цветовая палитра (ОБНОВЛЕНО: Новый акцентный цвет #c72636) */
    --primary: #c72636;
    --primary-dark: #9f1f2c; /* Более темный для :hover */
    --primary-light: #d84553; /* Более светлый для текста/границ */
    --primary-50: #fef0f1; /* Фон для badge/alert */
    --primary-100: #fbe6e8;
    --primary-200: #f6c8cc;

    /* Нейтральные цвета (ОСТАВЛЕНЫ, но с новым акцентом) */
    --white: #ffffff;
    --black: #000000;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Функциональные цвета (ОСТАВЛЕНЫ) */
    --success: #22c55e;
    --warning: #eab308;
    --error: #ef4444;
    --info: #06b6d4;

    /* Тени (ОБНОВЛЕНО: Более жесткие и менее заметные тени) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.1);

    /* Скругления (ОБНОВЛЕНО: Строгие прямоугольные формы) */
    --radius-sm: 0px; /* Было 4px */
    --radius: 0px; /* Было 8px */
    --radius-md: 0px; /* Было 12px */
    --radius-lg: 0px; /* Было 16px */

    /* Анимации (ОСТАВЛЕНЫ) */
    --transition: all 0.15s ease-out;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--white);
    min-height: 100vh;
    font-size: 14px;
}

/* ===== TYPOGRAPHY (ОСТАВЛЕНЫ) ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5em;
    color: var(--gray-900);
}

h1 {
    font-size: 2rem;
    font-weight: 700;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
    color: var(--gray-700);
}

.text-sm {
    font-size: 0.875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ===== LAYOUT (ОСТАВЛЕНЫ) ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== LOGIN PAGE (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) ===== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--white);
}

.login-card {
    background: var(--white);
    padding: 40px 32px;
    border-radius: var(--radius-md); /* 0px */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200); /* Более заметная граница */
    width: 100%;
    max-width: 400px;
}

.login-title {
    text-align: center;
    margin-bottom: 30px;
}

.login-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.login-title p {
    color: var(--gray-600);
    font-size: 1rem;
}

/* ===== FORMS (ОБНОВЛЕНО: Прямоугольные формы) ===== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius); /* 0px */
    font-size: 14px;
    transition: var(--transition);
    background: var(--white);
    color: var(--gray-900);
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 2px var(--primary-50); /* Добавляем контур фокуса */
}

.form-input::placeholder {
    color: var(--gray-400);
}

/* ===== BUTTONS (ОБНОВЛЕНО: Прямоугольные формы, новый цвет, более строгие тени) ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid transparent; /* Добавлена граница для консистентности */
    border-radius: var(--radius-sm); /* 0px */
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    gap: 8px;
    background: transparent;
    color: var(--gray-700);
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: none; /* Убираем подъем */
    box-shadow: var(--shadow-sm); /* Более строгая тень */
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover {
    background: var(--primary-50);
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    transform: none; /* Убираем подъем */
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

.btn-full {
    width: 100%;
}

/* ===== NAVBAR (ОБНОВЛЕНО: Прямоугольные формы) ===== */
.navbar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--gray-50);
    border-radius: var(--radius); /* 0px */
    border: 1px solid var(--gray-200);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm); /* 0px */
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 12px;
}

/* ===== ICONS (ОСТАВЛЕНЫ) ===== */
.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

/* Иконки для действий (ОСТАВЛЕНЫ, но пути могут быть неверны) */
.icon-edit {
    background-image: url('/public/assets/icons/edit.svg');
}

.icon-delete {
    background-image: url('/public/assets/icons/delete.svg');
}

.icon-user {
    background-image: url('/public/assets/icons/user.svg');
}

.icon-group {
    background-image: url('/public/assets/icons/group.svg');
}

.icon-dashboard {
    background-image: url('/public/assets/icons/dashboard.svg');
}

.icon-logout {
    background-image: url('/public/assets/icons/logout.svg');
}

/* ===== CARDS (ОБНОВЛЕНО: Прямоугольные формы) ===== */
.card {
    background: var(--white);
    border-radius: var(--radius-md); /* 0px */
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--gray-200); /* Более заметная граница */
    box-shadow: var(--shadow-sm); /* Более строгая тень */
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow); /* Мягкое усиление тени при наведении */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius); /* 0px */
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 1px solid var(--primary-200); /* Более заметная граница */
}

/* ===== GRID SYSTEM (ОСТАВЛЕНЫ) ===== */
.grid {
    display: grid;
    gap: 20px;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ===== DASHBOARD (ОСТАВЛЕНЫ) ===== */
.dashboard {
    min-height: calc(100vh - 80px);
    padding: 32px 0;
    background: var(--white);
}

.dashboard-header {
    margin-bottom: 32px;
}

.dashboard-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.welcome-text {
    font-size: 1rem;
    color: var(--gray-600);
}

.role-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-sm); /* 0px */
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
}

/* ===== STATS CARDS (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius-md); /* 0px */
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: var(--transition);
}

.stat-card:hover {
    box-shadow: var(--shadow-sm);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== TABLES (ОБНОВЛЕНО: Прямоугольные формы) ===== */
.table-container {
    background: var(--white);
    border-radius: var(--radius-md); /* 0px */
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

.table th,
.table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.table th {
    background: var(--gray-50);
    font-weight: 500;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover {
    background: var(--primary-50); /* Новый цвет для :hover */
}

.table td {
    color: var(--gray-700);
}

/* ===== BADGES (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) ===== */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-sm); /* 0px */
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent; /* Добавлена граница */
}

.badge-primary {
    background: var(--primary-50);
    color: var(--primary-dark);
    border-color: var(--primary-200);
}

.badge-success {
    background: #f0fdf4;
    color: var(--success);
    border-color: #bbf7d0;
}

.badge-warning {
    background: #fefce8;
    color: var(--warning);
    border-color: #fde68a;
}

.badge-error {
    background: #fef2f2;
    color: var(--error);
    border-color: #fecaca;
}

/* ===== ALERTS (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) ===== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius); /* 0px */
    margin-bottom: 16px;
    border: 1px solid;
    font-weight: 500;
    font-size: 0.875rem;
}

.alert-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--error);
}

.alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: var(--success);
}

.alert-info {
    background: var(--primary-50); /* Используем новый primary-50 для info */
    border-color: var(--primary-200);
    color: var(--primary);
}


/* ===== NOTIFICATIONS (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) ===== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--white);
    border-radius: var(--radius); /* 0px */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    padding: 0;
    max-width: 400px;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.notification.show {
    transform: translateX(0);
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.notification-message {
    flex: 1;
    font-weight: 500;
    color: var(--gray-900);
    font-size: 0.875rem;
}

.notification-close {
    background: none;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
}

.notification-close:hover {
    color: var(--gray-600);
}

.notification-success {
    border-left: 3px solid var(--success);
}

.notification-error {
    border-left: 3px solid var(--error);
}

.notification-info {
    border-left: 3px solid var(--primary); /* Новый primary */
}

/* ===== TABLE ACTIONS (ОБНОВЛЕНО: Прямоугольные формы) ===== */
.table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 80px;
}

.table-actions .btn {
    padding: 6px;
    font-size: 12px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm); /* 0px */
}

/* ===== FORM LAYOUTS (ОСТАВЛЕНЫ) ===== */
.form-row-responsive {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-group-flex {
    flex: 1;
    min-width: 180px;
}

.form-actions {
    flex-shrink: 0;
}

/* ===== TEST CREDENTIALS (ОБНОВЛЕНО: Прямоугольные формы) ===== */
.test-credentials {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    padding: 20px;
    margin-top: 24px;
}

.test-credentials h4 {
    color: var(--gray-700);
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.credential-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.875rem;
}

.credential-item:last-child {
    border-bottom: none;
}

.credential-role {
    font-weight: 600;
}

.credential-data {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* ===== FOOTER (ОСТАВЛЕНЫ) ===== */
.footer {
    background: var(--gray-50);
    color: var(--gray-600);
    padding: 32px 0;
    margin-top: 64px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.875rem;
}

.footer-content {
    text-align: center;
}

/* ===== UTILITIES (ОСТАВЛЕНЫ) ===== */
.mb-0 {
    margin-bottom: 0;
}

.mb-4 {
    margin-bottom: 20px;
}

.mb-8 {
    margin-bottom: 32px;
}

.mt-4 {
    margin-top: 20px;
}

.mt-8 {
    margin-top: 32px;
}

.p-4 {
    padding: 20px;
}

.text-muted {
    color: var(--gray-500);
}

.text-primary {
    color: var(--primary);
}

/* ===== LOADING (ОБНОВЛЕНО: Новый цвет) ===== */
.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn.loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 6px;
}

/* ===== RESPONSIVE DESIGN (ОСТАВЛЕНЫ, кроме скруглений) ===== */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .navbar-content {
        flex-direction: column;
        gap: 12px;
    }

    .user-menu {
        width: 100%;
        justify-content: space-between;
    }

    .card {
        padding: 20px 16px;
    }

    .login-card {
        padding: 32px 24px;
    }

    .dashboard-header h1 {
        font-size: 1.75rem;
    }

    .table-container {
        overflow-x: auto;
        font-size: 0.875rem;
    }

    .credential-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .modal-full {
        width: 100%;
        height: 100%;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px 20px;
    }

    .modal-form {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== BUTTON VARIANTS (ОБНОВЛЕНО: Строгие формы, новый цвет) ===== */
.btn-danger {
    background: var(--error);
    color: var(--white);
    border: 1px solid var(--error);
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: none;
    box-shadow: var(--shadow-sm);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
}

.btn-outline-danger:hover {
    background: var(--error);
    color: var(--white);
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Стили для иконки удаления (ОБНОВЛЕНО: Цвет в SVG изменен с #ef4444 на #c72636, но для `icon-delete` оставим error цвет) */
/* Для .icon-delete, когда не в кнопке */
.icon-delete {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4H14M5.33333 4V2.66667C5.33333 2.48986 5.40357 2.32029 5.5286 2.19526C5.65362 2.07024 5.82319 2 6 2H10C10.1768 2 10.3464 2.07024 10.4714 2.19526C10.5964 2.32029 10.6667 2.48986 10.6667 2.66667V4M12.6667 4V13.3333C12.6667 13.5101 12.5964 13.6797 12.4714 13.8047C12.3464 13.9298 12.1768 14 12 14H4C3.82319 14 3.65362 13.9298 3.5286 13.8047C3.40357 13.6797 3.33333 13.5101 3.33333 13.3333V4H12.6667Z' stroke='%23ef4444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Иконка отвязки (ОБНОВЛЕНО: Новый цвет) */
.icon-unlink {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 9.5L4 12M9.5 6.5L12 4M12 9.5L9.5 12M4 6.5L6.5 4M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z' stroke='%23eab308' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Используем warning */
}

.btn-outline-danger .icon-delete {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4H14M5.33333 4V2.66667C5.33333 2.48986 5.40357 2.32029 5.5286 2.19526C5.65362 2.07024 5.82319 2 6 2H10C10.1768 2 10.3464 2.07024 10.4714 2.19526C10.5964 2.32029 10.6667 2.48986 10.6667 2.66667V4M12.6667 4V13.3333C12.6667 13.5101 12.5964 13.6797 12.4714 13.8047C12.3464 13.9298 12.1768 14 12 14H4C3.82319 14 3.65362 13.9298 3.5286 13.8047C3.40357 13.6797 3.33333 13.5101 3.33333 13.3333V4H12.6667Z' stroke='%23ef4444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Стили для кнопки отвязки (ОБНОВЛЕНО: Строгие формы, убран подъем, новый цвет) */
.btn-unlink {
    background: transparent;
    border: 1px solid var(--warning);
    color: var(--warning);
}

.btn-unlink:hover {
    background: var(--warning);
    color: var(--white);
    transform: none;
    box-shadow: var(--shadow-sm);
}

.btn-outline-unlink {
    background: transparent;
    border: 1px solid var(--warning);
    color: var(--warning);
}

.btn-outline-unlink:hover {
    background: var(--warning);
    color: var(--white);
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* МИНИМАЛЬНЫЕ СТИЛИ ДЛЯ МОДАЛЬНЫХ ОКОН (ОБНОВЛЕНО: Прямоугольные формы) */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: var(--radius); /* 0px */
    padding: 0;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 1.2rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50px;
}

.modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Стили для личного кабинета преподавателя (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) */
.groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-item {
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-item:hover {
    background: var(--primary-50);
    border-color: var(--primary-dark);
}

.group-name {
    font-weight: 600;
    color: var(--gray-900);
}

.group-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.group-arrow {
    font-weight: bold;
    color: var(--primary);
}

/* Расписание (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) */
.schedule-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.schedule-day-section h4 {
    margin-bottom: 12px;
    color: var(--gray-800);
    font-size: 1.125rem;
}

.lessons-list {
    display: grid;
    gap: 12px;
}

.lesson-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    background: var(--white);
}

.lesson-time {
    min-width: 120px;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.875rem;
}

.lesson-details {
    flex: 1;
}

.lesson-subject {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.lesson-group, .lesson-classroom {
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Студенты (ОБНОВЛЕНО: Прямоугольные формы) */
.students-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    overflow: hidden;
}

.student-header {
    padding: 16px;
    background: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.student-header:hover {
    background: var(--gray-50);
}

.student-info {
    flex: 1;
}

/* Исправляем высоту и скроллинг (ОБНОВЛЕНО: Прямоугольные формы) */
.dashboard {
    min-height: calc(100vh - 80px);
    padding: 32px 0;
    background: var(--white);
    position: relative;
}

.students-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: none;
}

.student-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    overflow: hidden;
    background: var(--white);
}

.student-grades {
    padding: 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    max-height: 400px;
    overflow-y: auto;
}

/* Улучшаем отображение секции студентов */
#studentsSection {
    transition: all 0.3s ease;
    transform-origin: top;
    margin-bottom: 40px;
}

/* Улучшаем отображение карточек студентов */
.student-header {
    padding: 16px;
    background: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

.student-header:hover {
    background: var(--gray-50);
}

/* Навигация в секции студентов (ОБНОВЛЕНО: Прямоугольные формы) */
.students-navigation {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    flex-wrap: wrap;
    justify-content: center;
}

.students-navigation .btn {
    font-size: 0.75rem;
    padding: 6px 12px;
}

/* Улучшаем отображение студента */
.student-number {
    color: var(--gray-500);
    font-weight: 400;
    margin-right: 8px;
    font-size: 0.875rem;
}

.grades-header {
    padding: 12px 16px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grades-count {
    font-size: 0.75rem;
    color: var(--gray-500);
    background: var(--white);
    padding: 2px 8px;
    border-radius: var(--radius-sm); /* 0px */
    border: 1px solid var(--gray-300);
}

/* Оценки (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) */
.student-grades {
    padding: 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.grades-header {
    padding: 12px 16px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.grades-header h4 {
    margin: 0;
    font-size: 1rem;
}

.subject-grades {
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.subject-grades:last-child {
    border-bottom: none;
}

.subject-grades h5 {
    margin: 0 0 12px 0;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.grades-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grade-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--white);
    border-radius: var(--radius-sm); /* 0px */
    border: 1px solid var(--gray-200);
}

.grade-value {
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-sm); /* 0px */
    font-size: 0.875rem;
    min-width: 20px;
    text-align: center;
}

.icon-news {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 20H5C4.46957 20 3.96086 19.7893 3.58579 19.4142C3.21071 19.0391 3 18.5304 3 18V6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4H15C15.5304 4 16.0391 4.21071 16.4142 4.58579C16.7893 4.96086 17 5.46957 17 6V18C17 18.5304 16.7893 19.0391 16.4142 19.4142C16.0391 19.7893 15.5304 20 15 20ZM5 6V18H19V6H5ZM7 9H17V11H7V9ZM7 13H15V15H7V13Z' fill='%23c72636'/%3E%3C/svg%3E");
}

.icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.66667H3.99998C2.52722 2.66667 1.33331 3.86057 1.33331 5.33333V12C1.33331 13.4728 2.52722 14.6667 3.99998 14.6667H12C13.4727 14.6667 14.6666 13.4728 14.6666 12V5.33333C14.6666 3.86057 13.4727 2.66667 12 2.66667Z' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33331 1.33333V4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 1.33333V4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.33331 6.66667H14.6666' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.grade-5 {
    background: var(--success);
    color: white;
}

.grade-4 {
    background: #3b82f6;
    color: white;
}

/* Не меняем, т.к. не primary */
.grade-3 {
    background: var(--warning);
    color: white;
}

.grade-2 {
    background: var(--error);
    color: white;
}

/* Список занятий (ОБНОВЛЕНО: Прямоугольные формы) */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    font-size: 0.875rem;
}

.schedule-day {
    font-weight: 600;
    color: var(--primary);
    min-width: 30px;
}

.schedule-time {
    font-weight: 600;
    min-width: 80px;
}

.schedule-subject {
    flex: 1;
    font-weight: 500;
}

.schedule-group {
    color: var(--gray-600);
}

.schedule-classroom {
    color: var(--gray-500);
}

/* Стили для расписания (ОБНОВЛЕНО: Прямоугольные формы) */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.schedule-day {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius); /* 0px */
    overflow: hidden;
}

.schedule-day-header {
    background: var(--primary);
    color: white;
    padding: 1rem;
    text-align: center;
}

/* Стили для пагинации (ОБНОВЛЕНО: Прямоугольные формы, новый цвет) */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagination-item {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm); /* 0px */
    text-decoration: none;
    color: var(--gray-700);
    transition: var(--transition);
}

.pagination-item:hover {
    background: var(--primary-50);
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

.pagination-item.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Стили для пустых состояний (ОСТАВЛЕНЫ) */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}


/* Стили для курсов */
.courses-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.course-item {
    display: flex;
    justify-content: between;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    transition: var(--transition);
}

.course-item:hover {
    box-shadow: var(--shadow-sm);
}

.course-info {
    flex: 1;
}

.course-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.course-description {
    color: var(--gray-600);
    margin-bottom: 12px;
    line-height: 1.5;
}

.course-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.course-date {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.course-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Просмотр курса */
.course-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.course-view h4 {
    margin-bottom: 12px;
    color: var(--gray-800);
}

.groups-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
}

.file-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.file-name {
    font-weight: 500;
    color: var(--gray-800);
}

.file-size, .file-type {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.file-actions {
    display: flex;
    gap: 8px;
}

.file-preview-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

.file-preview-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
}

.file-preview-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.file-preview-item:last-child {
    border-bottom: none;
}

.file-icon {
    font-size: 20px;
    margin-right: 10px;
}

.file-info {
    flex: 1;
}

.file-name {
    display: block;
    font-weight: 500;
    margin-bottom: 2px;
}

.file-meta {
    font-size: 12px;
    color: #666;
}

.file-preview-item .file-size {
    font-size: 12px;
    color: #888;
    margin-left: 8px;
}

/* Добавить в style.css или в секцию стилей students.php */
.loading {
    position: relative;
    color: transparent !important;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Стили для страницы оценок */
.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.students-container {
    max-height: 600px;
    overflow-y: auto;
}

.student-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.student-row:hover {
    background-color: var(--hover-bg);
}

.student-info {
    display: flex;
    flex-direction: column;
}

.student-name {
    font-weight: 600;
    font-size: 16px;
}

.student-details {
    font-size: 14px;
    color: var(--text-muted);
}

.grade-history {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.grade-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: var(--card-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 14px;
}

.grade-value {
    font-weight: bold;
}

.grade-5 {
    color: #28a745;
}

.grade-4 {
    color: #17a2b8;
}

.grade-3 {
    color: #fd7e14;
}

.grade-2 {
    color: #dc3545;
}

.grade-type {
    font-size: 12px;
    color: var(--text-muted);
}

.modal-grade-selector {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.grade-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.grade-option:hover {
    background: var(--hover-bg);
}

.grade-option.selected {
    border-color: var(--primary-color);
    background: rgba(66, 153, 225, 0.1);
}

.grade-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: white;
    margin-bottom: 5px;
}

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

.stat-card {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
}

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

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.student-row {
    animation: fadeIn 0.3s ease-out;
}

/* Адаптивность */
@media (max-width: 768px) {
    .student-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .filters-grid {
        grid-template-columns: 1fr;
    }

    .modal-grade-selector {
        flex-wrap: wrap;
        justify-content: center;
    }
}