/* Общие стили новых экранов используют палитру сайта и не зависят от языка. */
.content-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 0 32px;
}

.feature-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.feature-header h1 { font-size: 1.65rem; line-height: 1.25; margin-bottom: 6px; }
.feature-header p { color: var(--color-text-secondary); }
/* В тёмной Telegram-теме текст внутри светлых карточек остаётся контрастным. */
.feature-panel, .statistics-card, .profile-card, .detail-card, .booking-card,
.modal-dialog, .notification-dropdown, .table-wrapper, .data-table-wrapper, .news-card {
    color: var(--color-text);
}

.feature-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: 0 2px 8px var(--color-shadow);
}
.feature-toolbar, .feature-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.feature-toolbar { justify-content: space-between; }
.feature-actions { margin-top: 20px; }

/* Нативные поля оформляем теми же размерами, что и существующие формы сайта. */
:where(.content-page, .statistics-filters, .booking-action-dialog, .form-group) input:not([type=checkbox]):not([type=radio]):not([type=file]),
:where(.content-page, .statistics-filters, .booking-action-dialog, .form-group) select,
:where(.content-page, .statistics-filters, .booking-action-dialog, .form-group) textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}
:where(.content-page, .statistics-filters, .booking-action-dialog, .form-group) textarea {
    resize: vertical;
    min-height: 100px;
}
:where(.content-page, .statistics-filters, .booking-action-dialog, .form-group) :is(input, select, textarea):focus {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    outline-offset: 1px;
    border-color: var(--color-primary);
}
:where(.content-page, .statistics-filters, .booking-action-dialog, .form-group) :is(input, select, textarea):disabled {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}
:where(.content-page, .statistics-filters, .filters-bar) :is(input[type=checkbox], input[type=radio]) {
    width: 17px;
    height: 17px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}
.form-group textarea { width: 100%; }
.content-page fieldset { min-width: 0; }

/* Для небольших вспомогательных действий без специального класса. */
:where(.content-page) button:where(:not([class])), .editor-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
:where(.content-page) button:where(:not([class])):hover:not(:disabled), .editor-toolbar button:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
:where(button):disabled { cursor: not-allowed; }
:where(.content-page, .modal-dialog) button:disabled { opacity: .55; }
:where(.content-page, .modal-dialog, .filters-bar, .actions-dropdown) :is(button, a):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.feature-alert {
    padding: 12px 16px;
    margin: 12px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}
.feature-alert-warning { background: #fff8e8; border-color: #f2d59c; color: #815511; }
.feature-alert-error { background: #fff1f2; border-color: #f5c8cd; color: #a62c3b; }

/* Таблицы остаются внутри страницы, в том числе в Telegram Mini App. */
.table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    margin: 16px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.table-wrapper table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-wrapper th, .table-wrapper td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); text-align: left; }
.table-wrapper th { color: var(--color-text-secondary); font-size: .78rem; font-weight: 600; background: var(--color-bg); }
.table-wrapper tbody tr:last-child td { border-bottom: 0; }
.table-wrapper tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)); }

.pagination { flex-wrap: wrap; gap: 12px; margin-top: 20px; color: var(--color-text-secondary); }
.pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    font: inherit;
    cursor: pointer;
}
.pagination button:hover:not(:disabled) { background: var(--color-bg); border-color: var(--color-primary); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* Общие пункты меню одинаково выглядят в таблице и карточке пользователя. */
.actions-menu-item { display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.action-icon { display: inline-flex; justify-content: center; width: 18px; flex-shrink: 0; font-size: 1rem; color: var(--color-primary); }
.actions-menu-item.success .action-icon { color: var(--color-success); }
.actions-menu-item.danger .action-icon { color: var(--color-danger); }
.actions-menu-item.warning .action-icon { color: #b77713; }
.actions-menu-item.warning:hover { background: #fff8e8; }
.actions-menu-item:disabled { cursor: not-allowed; opacity: .5; }
.payment-badge { white-space: nowrap; }
.payment-rejected { background: #fff0f1; color: #bd3544; }
.payment-free, .payment-no-payment-required { background: #eef2f7; color: #556379; }
.payment-badge[data-payment-status="NotPaid"] { background: #fff3e0; color: #e65100; }
.payment-badge[data-payment-status="PendingVerification"] { background: #e3f2fd; color: #1565c0; }
.payment-badge[data-payment-status="Paid"] { background: #e8f5e9; color: #2e7d32; }
.payment-badge[data-payment-status="PaymentRejected"] { background: #fff0f1; color: #bd3544; }
.payment-badge[data-payment-status="NoPaymentRequired"] { background: #eef2f7; color: #556379; }

/* Редактор и публичный текст не должны выходить за границы карточек. */
.editor-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.editor-toolbar .selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); }
.preview-panel { margin: 16px 0; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cover-preview { display: block; max-width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--radius-sm); }
.article-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-md); }
.markdown-content { line-height: 1.75; overflow-wrap: anywhere; color: var(--color-text); }
.markdown-content > * + * { margin-top: 14px; }
.markdown-content :is(ul, ol) { padding-left: 24px; }
.markdown-content :is(h1, h2, h3) { line-height: 1.3; margin-top: 24px; }
.markdown-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.markdown-content blockquote { padding: 12px 18px; border-left: 3px solid var(--color-primary); background: var(--color-bg); color: var(--color-text-secondary); }
.markdown-content pre { overflow-x: auto; padding: 16px; background: var(--color-bg); border-radius: var(--radius-sm); }
.markdown-content code { padding: 2px 4px; background: var(--color-bg); border-radius: 3px; }
.markdown-content table { display: block; overflow-x: auto; }
.markdown-content th, .markdown-content td { padding: 8px 12px; border: 1px solid var(--color-border); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.news-board { margin: 24px 0 32px; }

.notification-bell-wrapper { position: relative; }
.notification-dropdown { z-index: 1100; right: 0; max-width: calc(100vw - 32px); width: 390px; max-height: 75dvh; overflow-y: auto; background: var(--color-surface); }
.notification-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mini-app-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 16px; background: var(--color-surface); color: var(--color-text); border-bottom: 1px solid var(--color-border); }

@media (max-width: 600px) {
    .content-page { padding: 8px 0 24px; }
    .feature-header { gap: 12px; margin-bottom: 18px; }
    .feature-header h1 { font-size: 1.4rem; }
    .feature-panel { padding: 16px; }
    .feature-actions { gap: 8px; }
    .feature-actions > :is(button, a) { flex: 1 1 auto; }
    .notification-dropdown { position: fixed; top: 65px; left: 12px; right: 12px; width: auto; }
    .table-wrapper th, .table-wrapper td { padding: 10px 12px; }
    .mini-app-toolbar { flex-wrap: wrap; gap: 8px; }
    .modal-actions { flex-wrap: wrap; }
}