/* =========================================
   6. КОМПОНЕНТЫ (components.css)
========================================= */

/* --- Модульная Таблица (.tbl) --- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: normal; color: var(--text-mut); padding: 8px 10px; }
.tbl td { padding: 8px 10px; vertical-align: middle; }

/* Модификаторы таблицы */
.tbl-bor td, .tbl-bor th { border: 1px solid var(--bd-base); }
.tbl-row-bor td { border-bottom: 1px solid var(--bd-base); }
.tbl-row-bor tr:last-child td { border-bottom: none; }
.tbl-strip tr:nth-child(even) { background-color: rgba(0,0,0, 0.02); }
.tbl-hov tr:hover { background-color: rgba(0,0,0, 0.04); cursor: default; }

/* --- Блоки и Диалоги --- */
.block { padding: 15px; background-color: var(--bg-card); box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-radius: 5px; }
.block-low { padding: 10px; background-color: var(--bg-card); border: 1px solid var(--bd-base); border-radius: 3px; }
.dialog { position: fixed; z-index: 1000; left: 0; right: 0; top: 0; bottom: 30%; margin: auto; width: 500px; height: 400px; background-color: var(--bg-card); box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-radius: 8px; }

/* --- Свитчеры --- */
.switch-off { border: 1px solid var(--bd-base); width: 28px; background-color: rgba(0,0,0,0.05); padding: 2px; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.switch-off div { background-color: #888; width: 12px; height: 12px; border-radius: 50%; transition: all 0.2s; }

/* Включенный свитчер использует Акцентный цвет */
.switch-on { border: 1px solid var(--accent); width: 28px; background-color: color-mix(in srgb, var(--accent) 20%, transparent); padding: 2px; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.switch-on div { background-color: var(--accent); width: 12px; height: 12px; border-radius: 50%; margin-left: auto; transition: all 0.2s; }

/* --- Кнопки-ссылки --- */
a.a-button { display: inline-block; padding: 6px 15px; border: 1px solid var(--bd-base); border-radius: 3px; color: var(--text-main); background-color: var(--bg-card); transition: all 0.1s; }
a.a-button:hover { border-color: #888; background-color: rgba(0,0,0,0.02); }

/* --- Бейджи-сообщения --- */
.message-normal { border-radius: 3px; background-color: #e6fced; color: #16a34a; padding: 4px 8px; display: inline-block; font-size: 12px; }
.message-alert { border-radius: 3px; background-color: #fef3c7; color: #d97706; padding: 4px 8px; display: inline-block; font-size: 12px; }