/* =========================
   Reset / Базовые настройки
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f7f8fa;
    color: #333;
    line-height: 1.6;
    display: flex; /* макет страницы как колонка */
    flex-direction: column;
}

/* ===============
   Header / Шапка
   =============== */
header {
    background-color: #3498db;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

header a {
    color: #fff; /* белый текст */
    text-decoration: none; /* убрать подчеркивание */
}

header h1 {
    font-size: 2.4rem;
    font-weight: 700;
}

header p {
    font-size: 1rem;
    margin-top: 10px;
}

/* =====================
   Main / Основной блок
   ===================== */
.gk-main-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 0;
}

.gk-container {
    width: 100%;
    max-width: 500px;
    margin: 30px auto;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .gk-container {
        max-width: 100%;
        padding: 20px;
    }
}

.gk-container h2 {
    margin-bottom: 10px;
    color: #3498db;
}

/* =========================
   Forms / Формы и поля ввода
   ========================= */
.gk-form-group {
    margin-bottom: 5px;
    text-align: left;
}

label {
    font-size: 1rem;
    margin-bottom: 5px;
    display: block;
}

input[type="text"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    font-family: inherit;
    background-color: #fff;
    color: #333;
    appearance: none; /* убираем стандартный стиль браузера */
}

/* Для textarea: разрешаем менять только высоту */
textarea {
    resize: vertical;
    min-height: 80px;
}

/* Стили для select: стрелка */
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px; /* чтобы текст не налезал на стрелку */
    cursor: pointer;
}

/* Hover и Focus для select */
select:hover {
    border-color: #3498db;
}

select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Подсказка по паролю */
.gk-password-info {
    font-size: 0.9rem;
    color: #888;
    margin-top: 5px;
    text-align: left;
}

/* =====================
   Buttons / Кнопки
   ===================== */
.gk-btn {
    width: 100%;
    padding: 14px;
    background-color: #3498db;
    color: white;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 15px;
}

.gk-btn:hover {
    background-color: #2980b9;
}

/* =========================
   Logout form / Форма выхода
   ========================= */
.gk-logout-form {
    margin: 0;
}

.gk-logout-form button,
.gk-logout-form input[type="submit"] {
    background-color: #e74c3c;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gk-logout-form button:hover,
.gk-logout-form input[type="submit"]:hover {
    background-color: #c0392b;
}

/* ==================
   Footer / Подвал
   ================== */
.gk-footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: auto;
    width: 100%;
}

.gk-footer p {
    font-size: 0.9rem;
}

/* ======================
   Error & Links / Ошибки и ссылки
   ====================== */
.gk-error {
    color: red;
    font-size: 1rem;
    margin-top: 20px;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Стековый хедер */
.gk-header--stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

.gk-header--stack h1 {
    margin: 0;
}

.gk-header--stack p {
    margin: 0;
    font-size: 1rem;
}

/* =========================
   Table / Таблица слов (обновлено v2 — десктоп тоже переносит длинные слова)
   ========================= */

/* Обёртка */
.gk-table-wrap {
    width: 100%;
    overflow-x: hidden; /* прячем горизонтальный скролл */
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* Таблица */
.gk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem; /* базовый шрифт для десктопа */
    table-layout: auto; /* чтобы колонки могли подстраиваться и переносить текст */
}

/* Заголовки */
.gk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f0f6fc;
    color: #333;
    text-align: center;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid #e6e9ef;
}

/* Ячейки */
.gk-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f1f4;
    color: #333;
    vertical-align: middle;
}

/* Зебра-строки + hover */
.gk-table tbody tr:nth-child(odd) { background-color: #fafbfc; }
.gk-table tbody tr:hover { background-color: #eef7ff; }

/* Скругления */
.gk-table thead th:first-child { border-top-left-radius: 10px; }
.gk-table thead th:last-child { border-top-right-radius: 10px; }
.gk-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.gk-table tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* === Колонки текста: теперь переносят строки и на десктопе === */
.gk-col--word-foreign,
.gk-col--word-native {
    width: 35%;          /* ориентировочная ширина, не жёсткая */
    white-space: normal; /* разрешаем перенос строк */
    overflow: visible;   /* показываем весь текст */
    text-overflow: clip; /* без троеточия — нужен полный текст */
    word-break: break-word; /* переносим длинные слова */
    hyphens: auto;       /* перенос по слогам, если доступен */
}

/* Колонки с иконками — минимально узкие */
.gk-col--icon {
    width: 48px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}

/* Иконка-флажок */
.gk-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: #e6eef6;
    margin: 0 auto;
    box-shadow: inset 0 0 0 1px #cbd5e1;
    cursor: default;
}

/* Состояния */
.gk-flag--on { background-color: #d7f5e9; box-shadow: inset 0 0 0 1px #86d3b2; }
.gk-flag--off { background-color: #eef2f7; box-shadow: inset 0 0 0 1px #cbd5e1; }
.gk-flag::before {
    content: '';
    width: 14px; height: 14px; display: block;
    background-color: #7f8c8d;
    mask-size: cover; -webkit-mask-size: cover;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-position: center; -webkit-mask-position: center;
}
/* Галочка */
.gk-flag--on::before {
    background-color: #2ecc71;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.173 12.414L2.5 8.74l1.414-1.414 2.26 2.26 5.912-5.913 1.414 1.414z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.173 12.414L2.5 8.74l1.414-1.414 2.26 2.26 5.912-5.913 1.414 1.414z'/></svg>");
}
/* Точка */
.gk-flag--off::before {
    background-color: #95a5a6;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='5' fill='currentColor'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='5' fill='currentColor'/></svg>");
}
/* Выучено — фирменный акцент */
.gk-flag--learned { background-color: #e9f3ff; box-shadow: inset 0 0 0 1px #9ac3f5; }
.gk-flag--learned::before {
    background-color: #3498db;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M13.485 1.929l-7.07 7.07-3.182-3.182-1.414 1.414 4.596 4.596 8.485-8.485z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M13.485 1.929l-7.07 7.07-3.182-3.182-1.414 1.414 4.596 4.596 8.485-8.485z'/></svg>");
}

/* Фокус для доступности */
.gk-table .gk-flag:focus { outline: 2px solid #3498db; outline-offset: 2px; }

/* Утилита: широкий контейнер для таблиц */
.gk-container--wide { max-width: 1080px; }

/* =========================
   Мобильная компактность (осталась)
   ========================= */
@media (max-width: 600px) {
    .gk-container { padding: 16px; }
    .gk-table { font-size: 0.85rem; }
    .gk-table thead th { padding: 8px 10px; }
    .gk-table tbody td { padding: 8px 10px; }

    .gk-col--word-foreign,
    .gk-col--word-native {
        width: auto;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        hyphens: auto;
    }

    .gk-col--icon { width: 36px; padding-left: 4px; padding-right: 4px; }
    .gk-flag { width: 18px; height: 18px; border-radius: 4px; }
    .gk-flag::before { width: 12px; height: 12px; }

    body { line-height: 1.5; }
}

/* =========================
   Низкая высота экрана
   ========================= */
@media (max-height: 500px) and (max-width: 600px) {
    .gk-table { font-size: 0.8rem; }
    .gk-table thead th,
    .gk-table tbody td { padding: 6px 8px; }
}

/* =========================
   Тёмная тема
   ========================= */
@media (prefers-color-scheme: dark) {
    .gk-table-wrap { background: #1e293b; box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
    .gk-table thead th { background-color: #273447; color: #e5e7eb; border-bottom-color: #32455e; }
    .gk-table tbody td { color: #e5e7eb; border-bottom-color: #2b3b52; }
    .gk-table tbody tr:nth-child(odd) { background-color: #223046; }
    .gk-table tbody tr:hover { background-color: #24415f; }
    .gk-flag { background-color: #334155; box-shadow: inset 0 0 0 1px #475569; }
}

/* =========================
   Массовые действия над таблицей (панель в 1 строку)
   ========================= */

/* Обёртка формы: держим ширину контейнера */
.gk-bulk-form {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Панель действий: одна строка, контент не вылезает */
.gk-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;       /* не переносить на новую строку */
    width: 100%;
    box-sizing: border-box;  /* учитывать паддинги контейнера */
    text-align: left;        /* как поиск */
}

/* Селект — «флюидный»: занимает остаток пространства, но не схлопывается */
.gk-select {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid #ccc;        /* как у input/select наверху */
    border-radius: 5px;            /* согласовано с формами */
    background-color: #fff;
    color: #333;
    font-size: 1rem;
    line-height: 1.2;
    appearance: none;
    min-width: 180px;              /* разумный минимум, чтоб не схлопывался */
    box-sizing: border-box;
}

.gk-select--fluid {
    flex: 1 1 240px;               /* растягиваемся, базис ~240px */
    min-width: 0;                  /* разрешаем сжатие внутри флекса */
}

/* Кнопка Apply: отменяем глобальный width:100%; делаем фиксированную */
.gk-btn.gk-btn--apply {
    width: auto !important;        /* ключевое: не тянем на 100% */
    flex: 0 0 auto;                /* не растягивается */
    padding: 8px 16px;
    font-size: 1rem;
    border: 1px solid #9ac3f5;
    border-radius: 5px;
    background-color: #e9f3ff;
    color: #273447;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;           /* текст кнопки не переносится */
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.gk-btn.gk-btn--apply:hover {
    background-color: #d9ecff;
    border-color: #7fb4f3;
}

/* Колонка чекбоксов — узко и стабильно */
.gk-col--select {
    width: 40px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}
.gk-table thead th.gk-col--select { width: 40px; }

/* Мобильная настройка: держим одну строку и чуть ужимаем размеры */
@media (max-width: 600px) {
    .gk-bulk-bar {
        gap: 8px;
        flex-wrap: nowrap;         /* принудительно держим в одну строку */
    }

    .gk-select {
        padding: 8px 10px;
        font-size: 0.95rem;
        min-width: 150px;          /* немного меньше базовый минимум */
    }

    .gk-select--fluid {
        flex: 1 1 200px;           /* базис поуже на мобильных */
        min-width: 0;              /* важно: позволяет не ломать строку */
    }

    .gk-btn.gk-btn--apply {
        padding: 8px 14px;         /* компактнее кнопка на мобиле */
        font-size: 0.95rem;
    }

    .gk-col--select { width: 32px; }
}

/* Тёмная тема для панели (подходящая к твоей палитре) */
@media (prefers-color-scheme: dark) {
    .gk-select {
        border-color: #475569;
        background-color: #1f2937;
        color: #e5e7eb;
    }
    .gk-btn.gk-btn--apply {
        background-color: #223c58;
        border-color: #4a7fb8;
        color: #e5e7eb;
    }
    .gk-btn.gk-btn--apply:hover {
        background-color: #244b6f;
        border-color: #6ea2da;
    }
}


/* =========================
   Вертикальное выравнивание: селект и кнопка в одной линии
   ========================= */

/* Панель — остаёмся в одной строке и центрируем по вертикали */
.gk-bulk-bar {
    display: flex;
    align-items: center;    /* центр по вертикали */
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

/* Селект — базовая высота и одинаковая типографика */
.gk-select {
    font-size: 1rem;
    line-height: 1.2;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    appearance: none;
    min-width: 180px;
}

.gk-select--fluid {
    flex: 1 1 240px;
    min-width: 0;
}

/* Кнопка Apply — сброс нижнего отступа и точное центрирование */
.gk-btn.gk-btn--apply {
    width: auto !important;       /* отменяем width:100% из .gk-btn */
    margin: 0 !important;         /* ← критично: убираем margin-bottom:15px */
    flex: 0 0 auto;
    display: inline-flex;         /* точное выравнивание контента по центру */
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 1rem;
    line-height: 1.2;
    border: 1px solid #9ac3f5;
    border-radius: 5px;
    background-color: #e9f3ff;
    color: #273447;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.gk-btn.gk-btn--apply:hover {
    background-color: #d9ecff;
    border-color: #7fb4f3;
}

/* Мобайл: остаёмся в одной линии, чуть компактнее */
@media (max-width: 600px) {
    .gk-bulk-bar { flex-wrap: nowrap; gap: 8px; }

    .gk-select { font-size: 0.95rem; min-width: 150px; }
    .gk-select--fluid { flex: 1 1 200px; min-width: 0; }

    .gk-btn.gk-btn--apply {
        padding: 8px 14px;
        font-size: 0.95rem;
    }
}

/* Тёмная тема — согласовано с твоими цветами */
@media (prefers-color-scheme: dark) {
    .gk-select {
        border-color: #475569;
        background-color: #1f2937;
        color: #e5e7eb;
    }
    .gk-btn.gk-btn--apply {
        background-color: #223c58;
        border-color: #4a7fb8;
        color: #e5e7eb;
    }
    .gk-btn.gk-btn--apply:hover {
        background-color: #244b6f;
        border-color: #6ea2da;
    }
}


/* =========================
   Отступ между панелью действий и таблицей
   ========================= */
.gk-bulk-bar {
    margin-bottom: 12px; /* или 16px, если хочешь больше воздуха */
}