:root{
    --info-accent: #3c8dbc;
    --info-row-alt: #f7fbde;
    --info-table-border: #98AFC7;
}

html, body { height: 100%; }

/* marquee (используется в index.php) */
.marquee{
    padding: 4px;
    overflow: hidden;
    border: 1px solid #aecde8;
    background: #fff;
    color: #174269;
    font-size: 18px;
}

/* legacy table styles */
.info_table th, .info_table td{
    padding: 3px !important;
    vertical-align: middle !important;
    text-align: center;
}
.tr_color{ background: var(--info-row-alt); }
.td_left{ text-align: left; }

.table-bordered-black-my{ border:1px solid var(--info-table-border); }
.table-bordered-black-my > thead > tr > th,
.table-bordered-black-my > tbody > tr > th,
.table-bordered-black-my > tfoot > tr > th,
.table-bordered-black-my > thead > tr > td,
.table-bordered-black-my > tbody > tr > td,
.table-bordered-black-my > tfoot > tr > td{
    border:1px solid var(--info-table-border);
}

/* mini components */
.tw-card{ background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px; }
.tw-card-h{ padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.08); }
.tw-card-b{ padding:16px; }

.tw-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:10px;
    font-weight:600; border:1px solid transparent;
}
.tw-btn-primary{ background:var(--info-accent); color:#fff; }
.tw-btn-warning{ background:#f59e0b; color:#111827; }
.tw-btn-success{ background:#22c55e; color:#052e16; }
.tw-btn-outline{ background:transparent; border-color:rgba(0,0,0,.25); color:#111827; }

.tw-input, .tw-select{
    width:100%; padding:8px 12px; border-radius:10px;
    border:1px solid rgba(0,0,0,.25); background:#fff;
}

/* modal */
.tw-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.tw-modal.is-open{ display:block; }
.tw-modal__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); }
.tw-modal__panel{
    position:relative; margin:5vh auto 0;
    width:min(520px, calc(100% - 24px));
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.tw-modal__panel--sm{ width:min(420px, calc(100% - 24px)); }
.tw-modal__header{
    padding:12px 16px; background:#f8fafc;
    border-bottom:1px solid rgba(0,0,0,.06);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.tw-modal__body{ padding:14px 16px; max-height:calc(100vh - 200px); overflow:auto; }
.tw-modal__footer{
    padding:12px 16px; background:#f8fafc;
    border-top:1px solid rgba(0,0,0,.06);
    display:flex; justify-content:flex-end; gap:10px;
}
.tw-spinner{
    width:22px; height:22px; border-radius:999px;
    border:3px solid rgba(60,141,188,.25);
    border-top-color:rgba(60,141,188,1);
    animation:twspin .8s linear infinite;
}
@keyframes twspin { to { transform: rotate(360deg); } }
body.tw-modal-open{ overflow:hidden; }


/* =======================================================
   АДАПТИВНАЯ ТАБЛИЦА (Умные переносы и сжатие)
   ======================================================= */
.adaptive-wrapper {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

.adaptive-table {
    width: 100%;
    border-collapse: collapse;
}

/* ЗАПРЕТ ПЕРЕНОСОВ ВНУТРИ СЛОВ (перенос ТОЛЬКО по пробелам) */
.adaptive-table th, .adaptive-table td {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important; /* Отменяем любые запреты на перенос */
}

/* dropdown backdrop: показывать, когда <details open> */
/*details[data-dropdown][open] .dropdown-backdrop{
    display: block;
}*/

/* МОБИЛЬНЫЕ УСТРОЙСТВА И ПЛАНШЕТЫ (до 1023px) - Разрешаем скролл */
@media (max-width: 1023px) {
    .adaptive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .adaptive-table {
        font-size: 13px; /* Комфортный шрифт для чтения */
    }
    .adaptive-table th, .adaptive-table td {
        padding: 6px 10px;
    }
}

/* ДЕСКТОПЫ (от 1024px) - БЕЗ СКРОЛЛА, СЖАТИЕ ШРИФТА */
@media (min-width: 1024px) {
    .adaptive-wrapper {
        overflow: hidden !important; /* Жестко отключаем скролл */
    }
    .adaptive-table {
        table-layout: auto;
        /* Шрифт зависит от ширины окна (vw). Плавно сужается до 7.5px если окно узкое */
        font-size: clamp(7.5px, 0.8vw, 13px);
    }
    .adaptive-table th, .adaptive-table td {
        padding: 4px !important; /* Минимальные отступы для экономии места */
        line-height: 1.2;
    }
}