/* =========================================================================
   Modern admin theme — CSS overlay on top of Flask-Admin (Bootstrap 4).
   Pure styling, no markup/logic dependencies. Safe to tweak freely.
   ========================================================================= */

/* Палитра «Перекрёстка»: основной зелёный #11592E. Остальные оттенки
   выведены из него. Контраст с белым 8.43:1, на подложке строк 7.67:1,
   оба выше WCAG AA (4.5). */
:root {
    --c-bg: #f5f6fa;
    --c-surface: #ffffff;
    --c-border: #e6e8ef;
    --c-text: #1f2430;
    --c-muted: #6b7280;
    --c-primary: #11592E;
    --c-primary-hover: #0B3B1E;   /* темнее основного, правый край шапки */
    --c-primary-soft: #EFF6F1;    /* подложка строк и пунктов меню */
    --c-primary-bright: #1C7A42;  /* только декор, без текста поверх */
    --c-accent: #FFD200;
    --c-success: #16a34a;
    --c-danger: #dc2626;
    --c-warning: #d97706;
    --c-info: #0ea5e9;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --ring: 0 0 0 3px rgba(17, 89, 46, .22);
}

/* ---------- Base ---------- */
body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", "Apple Color Emoji", sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--c-primary);
    transition: color .15s ease;
}
a:hover { color: var(--c-primary-hover); }

h1, h2, h3, h4, h5 { font-weight: 650; letter-spacing: -.01em; color: var(--c-text); }
h1 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }

/* Списки моделей широкие (у пользователей больше десятка колонок), поэтому
   бутстраповское ограничение контейнера снимаем: таблица должна занимать весь
   экран, а не 1140px посередине. */
.container, .container-fluid {
    max-width: none;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 4px;
}

@media (min-width: 1300px) {
    .col-is_email_verified { text-align: center; }
}

/* Если колонок всё равно больше, чем влезает, таблица скроллится сама,
   а не растягивает страницу. */
.table-responsive, .model-list { overflow-x: auto; }

/* ---------- Navbar ---------- */
.navbar {
    /* Градиент от основного зелёного к тёмному — по нему идёт белый текст */
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-hover) 100%) !important;
    border: none !important;
    box-shadow: var(--shadow-md);
    min-height: 60px;
    padding: .35rem 1.25rem;
    border-radius: 0;
}
.navbar .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 1.15rem;
}
.navbar-dark .navbar-nav .nav-link,
.navbar .navbar-nav > li > a,
.navbar .nav-link {
    /* было .85 — на фирменном синем это давало 3.99, ниже AA */
    color: #fff !important;
    border-radius: var(--radius-sm);
    padding: .5rem .85rem !important;
    transition: background .15s ease, color .15s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav > li > a:hover,
.navbar .nav-link:hover,
.navbar .navbar-nav .active > .nav-link,
.navbar .navbar-nav > .active > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .16);
}
.navbar .dropdown-menu {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: .35rem;
    margin-top: .4rem;
}
.navbar .dropdown-item { border-radius: 6px; padding: .5rem .75rem; }
.navbar .dropdown-item:hover { background: var(--c-primary-soft); color: var(--c-primary-hover); }

/* ---------- Cards / panels / wells ---------- */
.card, .well, .panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.well { padding: 1.5rem; }
.card { box-shadow: var(--shadow-md); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--c-border);
    font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 550;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    transition: all .15s ease;
    box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: var(--ring); }

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

.btn-success { background: var(--c-success); border-color: var(--c-success); }
.btn-danger  { background: var(--c-danger);  border-color: var(--c-danger); }
.btn-warning { background: var(--c-warning); border-color: var(--c-warning); color: #fff; }
.btn-info    { background: var(--c-info);    border-color: var(--c-info); color: #fff; }

.btn-default, .btn-secondary, .btn-outline-secondary {
    background: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text);
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
    background: #f3f4f8;
    border-color: #d3d7e2;
    color: var(--c-text);
}
.btn-sm { padding: .3rem .65rem; font-size: .82rem; }

/* ---------- Tables ---------- */
.table {
    background: var(--c-surface);
    border-radius: var(--radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
}
.table thead th {
    background: #fafbfe;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-border) !important;
    border-top: none !important;
    padding: .7rem .85rem;
    white-space: nowrap;
}
.table tbody td {
    padding: .7rem .85rem;
    border-top: 1px solid #f0f1f6 !important;
    vertical-align: middle;
}
.table tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background: var(--c-primary-soft); }
.table .btn-sm { box-shadow: none; }

/* Row action icons */
.fa, .glyphicon { color: inherit; }
td .fa-pencil, td .glyphicon-pencil { color: var(--c-info); }
td .fa-trash,  td .glyphicon-trash  { color: var(--c-danger); }
td .fa-eye,    td .glyphicon-eye-open { color: var(--c-muted); }

/* ---------- Forms ---------- */
.form-control, .form-select, select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"], input[type="search"] {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: .55rem .75rem;
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus,
input:focus {
    border-color: var(--c-primary);
    box-shadow: var(--ring);
    outline: none;
}
label, .control-label { font-weight: 600; color: var(--c-text); margin-bottom: .35rem; }
.help-block, .form-text, .text-muted { color: var(--c-muted) !important; }

/* Filters / select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 38px;
}

/* ---------- Pagination ---------- */
.pagination { gap: 4px; }
.pagination .page-link, .pagination > li > a, .pagination > li > span {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm) !important;
    color: var(--c-text);
    margin: 0;
    padding: .4rem .7rem;
}
.pagination .page-item.active .page-link,
.pagination > .active > a, .pagination > .active > span {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.pagination .page-link:hover { background: var(--c-primary-soft); color: var(--c-primary-hover); }

/* ---------- Alerts / flash ---------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: .8rem 1rem;
}
.alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.alert-danger, .alert-error { background: #fef3f2; border-color: #fecaca; color: #b42318; }
.alert-warning { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.alert-info { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }

/* ---------- Badges ---------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .3em .65em;
    letter-spacing: .01em;
}

/* ---------- Dashboard stat cards (see admin/index.html) ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
    margin: 1.75rem 0;
}
.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.4rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    /* единственное намеренное пятно фирменного жёлтого — на дашборде.
       Полоска декоративная, текста поверх нет, поэтому здесь можно яркий синий */
    background: linear-gradient(180deg, var(--c-accent), var(--c-primary-bright));
}
.stat-card__label {
    color: var(--c-muted);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}
.stat-card__value {
    font-size: 2.2rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--c-text);
}
.page-title { margin: 1.5rem 0 .25rem; }

/* ---------- Login page ---------- */
.login-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2.25rem 2rem;
}
.login-card h1 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.login-card .btn-primary { width: 100%; padding: .65rem; font-size: 1rem; }
.login-card .form-group { margin-bottom: 1.1rem; }

/* ---------- Игровое поле в профиле участника ---------- */
/* Повторяем игру: 8 шоколадок в две строки по четыре (1-4 сверху, 5-8 снизу),
   в каждой 12 долек сеткой 3×4. */
.game-bars {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 800px) {
    .game-bars { grid-template-columns: repeat(2, max-content); }
}
.game-bar__title {
    margin-bottom: .35rem;
    font-weight: 600;
}
.game-bar__grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-auto-rows: 40px;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
}
.game-field__cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface-muted, #f1f3f5);
    color: var(--c-text-muted, #868e96);
}
/* Номер дольки в углу: в истории баллов клетка названа этим номером, а её
   место в строке задаёт персональная раскладка участника — без подписи
   оператору пришлось бы искать дольку наведением курсора. */
.game-field__cell__square {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 9px;
    line-height: 1;
    opacity: .65;
}
/* Открытую дольку выделяем заливкой: оператор должен видеть ход участника
   с одного взгляда, не наводя курсор. */
.game-field__cell--opened {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    font-weight: 650;
}