/**
 * Admin Settings Page — Mobile Styles
 * Только для страницы настроек плагина newdashboard.
 * НЕ трогает #page, #page-wrapper, body, .drawers — ими управляет тема RemUI.
 *
 * @package block_newdashboard
 */

/* ============================================
   СТРАНИЦА НАСТРОЕК — МОБИЛЬНЫЕ ОТСТУПЫ
   Применяется только к контентной области,
   не к layout-элементам темы.
   ============================================ */

@media (max-width: 767px) {

    /* Основной блок настроек — отступы 1.5% слева и справа */
    body#page-admin-setting-blocksettingnewdashboard div[role="main"] {
        padding-left: 1.5% !important;
        padding-right: 1.5% !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        box-sizing: border-box;
    }

    /* Форма настроек */
    body#page-admin-setting-blocksettingnewdashboard .settingsform {
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Элемент формы — вертикальный стек вместо горизонтального */
    body#page-admin-setting-blocksettingnewdashboard .form-item.row {
        flex-direction: column !important;
        margin-bottom: 1.2rem;
        width: 100%;
        box-sizing: border-box;
    }

    body#page-admin-setting-blocksettingnewdashboard .form-item .form-label,
    body#page-admin-setting-blocksettingnewdashboard .form-item .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100%;
        padding-bottom: 6px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.4;
    }

    body#page-admin-setting-blocksettingnewdashboard .form-item .form-setting,
    body#page-admin-setting-blocksettingnewdashboard .form-item .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Текстовые поля и textarea — на всю ширину */
    body#page-admin-setting-blocksettingnewdashboard .form-control,
    body#page-admin-setting-blocksettingnewdashboard textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px; /* предотвращает zoom на iOS */
    }

    /* TinyMCE */
    body#page-admin-setting-blocksettingnewdashboard .tox-tinymce {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Кнопки сохранения — на всю ширину */
    body#page-admin-setting-blocksettingnewdashboard #adminsettings .form-buttons,
    body#page-admin-setting-blocksettingnewdashboard .settingsform > .form-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 1rem;
    }

    body#page-admin-setting-blocksettingnewdashboard #adminsettings .form-buttons input[type="submit"],
    body#page-admin-setting-blocksettingnewdashboard #adminsettings .form-buttons input[type="button"] {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }

    /* ============================================
       ТАБЛИЦЫ НОВОСТЕЙ И АЛЕРТОВ
       Адаптивная ширина с отступами
       ============================================ */

    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-container {
        width: 100%;
        padding: 0 1.5% !important;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }

    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
    }

    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
        font-size: 13px;
    }

    /* Адаптивные колонки таблицы */
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table th,
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table td {
        padding: 10px 8px;
        word-break: break-word;
        vertical-align: top;
        min-width: 80px;
    }

    /* Первая колонка (заголовок) - больше места */
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table th:first-child,
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table td:first-child {
        width: 40% !important;
        min-width: 120px !important;
    }

    /* Вторая колонка (контент) - больше места */
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table th:nth-child(2),
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table td:nth-child(2) {
        width: 35% !important;
        min-width: 100px !important;
    }

    /* Третья колонка (статус) - компактнее */
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table th:nth-child(3),
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table td:nth-child(3) {
        width: 15% !important;
        min-width: 70px !important;
        text-align: center;
    }

    /* Четвертая колонка (действия) - компактнее */
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table th:nth-child(4),
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table td:nth-child(4) {
        width: 10% !important;
        min-width: 60px !important;
        text-align: center;
    }

    /* Кнопки действий в таблице — вертикальный стек */
    body#page-admin-setting-blocksettingnewdashboard .action-links {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }

    body#page-admin-setting-blocksettingnewdashboard .action-links .btn,
    body#page-admin-setting-blocksettingnewdashboard .action-links a.btn,
    body#page-admin-setting-blocksettingnewdashboard .action-links a {
        padding: 6px 10px;
        font-size: 13px;
        white-space: nowrap;
        display: inline-block;
        min-width: 50px;
        text-align: center;
    }

    /* Иконки в действиях */
    body#page-admin-setting-blocksettingnewdashboard .action-links img {
        width: 20px !important;
        height: 20px !important;
    }

    /* Кнопки добавления/импорта над таблицей */
    body#page-admin-setting-blocksettingnewdashboard .btn.mb-3 {
        display: block;
        width: calc(100% - 3%) !important;
        margin: 0 1.5% 12px 1.5% !important;
        text-align: center;
        padding: 12px !important;
        font-size: 15px !important;
        box-sizing: border-box;
    }

    /* Заголовки секций настроек */
    body#page-admin-setting-blocksettingnewdashboard .remui-setting-heading {
        padding: 10px 1.5%;
    }

    /* Описания настроек — не вылезают за экран */
    body#page-admin-setting-blocksettingnewdashboard .form-text,
    body#page-admin-setting-blocksettingnewdashboard .form-description {
        font-size: 13px;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: break-word;
        margin-top: 4px;
    }

    /* Контейнеры внутри формы */
    body#page-admin-setting-blocksettingnewdashboard .form-item > div,
    body#page-admin-setting-blocksettingnewdashboard .form-setting > div {
        width: 100%;
        box-sizing: border-box;
    }

    /* Бейджи статуса */
    body#page-admin-setting-blocksettingnewdashboard .badge {
        font-size: 11px;
        padding: 4px 8px;
        display: inline-block;
        white-space: nowrap;
    }
}

/* Чуть меньше отступы на совсем маленьких экранах */
@media (max-width: 480px) {

    body#page-admin-setting-blocksettingnewdashboard div[role="main"] {
        padding-left: 1% !important;
        padding-right: 1% !important;
    }

    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-container {
        padding: 0 1% !important;
    }

    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table table {
        font-size: 12px;
    }

    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table th,
    body#page-admin-setting-blocksettingnewdashboard .dashboard-admin-table td {
        padding: 8px 6px;
    }

    body#page-admin-setting-blocksettingnewdashboard .badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    body#page-admin-setting-blocksettingnewdashboard .btn.mb-3 {
        margin: 0 1% 12px 1% !important;
        width: calc(100% - 2%) !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
}