:root {
    --ikc-cyan: #007D79;
    --ikc-cyan-light: #e0f2f1;
    --ikc-red: #C13646;
    --bg-main: #f4f7f6;
}

html, body { height: 100%; }
body { display: flex; flex-direction: column; background-color: var(--bg-main); color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.main-wrapper { max-width: 1400px; margin: 0 auto; padding-top: 20px; flex: 1 0 auto; width: 100%; padding-bottom: 40px; }

/* Подвал сайта (Footer) */
.ikc-footer { background-color: #fff; border-top: 1px solid #e2e8f0; padding: 25px 0; margin-top: auto; }
.ikc-footer a { color: var(--ikc-cyan); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.ikc-footer a:hover { color: var(--ikc-red); }

/* Табы */
.nav-tabs { border-bottom: 2px solid #e2e8f0; margin-bottom: 25px; }
.nav-tabs .nav-link { color: #718096; font-weight: 600; border: none; padding: 12px 24px; transition: all 0.2s; }
.nav-tabs .nav-link:hover { color: var(--ikc-cyan); background: var(--ikc-cyan-light); border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link.active { color: var(--ikc-cyan); border-bottom: 3px solid var(--ikc-cyan); background: transparent; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* Контейнер Контроллера (Гибрид Варианта 1 и 3) */
.ctrl-container { background: #eef2f6; padding: 25px; border-radius: 16px; border-top: 6px solid var(--ikc-cyan); margin-bottom: 30px; }

/* Сетка карточек */
.card { border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); background: #fff; height: 100%; transition: box-shadow 0.2s; }
.card-header { background: #f8f9fa; border-bottom: 1px solid #e2e8f0; padding: 12px 16px; border-radius: 12px 12px 0 0 !important; }
.card-body { padding: 16px; }

.card-ctrl { border-top: 4px solid var(--ikc-cyan); border-left: none; }
.card-boiler { border-top: 4px solid var(--ikc-red); }
.card-relay { border-top: 4px solid var(--ikc-cyan); }
.card-sensor { border-top: 4px solid #a0aec0; }

/* Управление (Стрелки и Сворачивание) */
.ctrl-btns { display: flex; gap: 4px; opacity: 0.2; transition: opacity 0.2s; }
.card-header:hover .ctrl-btns { opacity: 1; }
.btn-icon { background: none; border: none; padding: 0 5px; color: #718096; font-size: 1.1rem; border-radius: 4px; line-height: 1; }
.btn-icon:hover { background: #e2e8f0; color: var(--ikc-cyan); }

/* Свернутый режим */
.summary-wrapper { background: #f8f9fa; padding: 10px 16px; font-size: 0.85rem; color: #4a5568; border-radius: 0 0 12px 12px; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e2e8f0; }

/* Ползунки */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: #e2e8f0; border-radius: 10px; }
input[type=range]::-webkit-slider-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--ikc-cyan); cursor: pointer; -webkit-appearance: none; margin-top: -6px; }

.text-ikc-cyan { color: var(--ikc-cyan) !important; }
.bg-ikc-cyan { background-color: var(--ikc-cyan) !important; color: white; }
.bg-ikc-red { background-color: var(--ikc-red) !important; color: white; }
.icon-svg { fill: none; stroke-width: 2; width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.flame-on { stroke: var(--ikc-red); }
.flame-off { stroke: #cbd5e0; }

/* Карточки устройств — общие элементы (вынесено из inline-стилей шаблонов) */
.dev-name-input { box-shadow: none !important; color: #000 !important; }
.sensor-tile-box { width: 54px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
/* Датчики серии MQ: цвет плитки по относительному уровню загазованности (зелёный/жёлтый/красный) */
.sensor-tile-box.mq-ok { background: #f0fff4 !important; color: #2f855a; border-color: #9ae6b4 !important; }
.sensor-tile-box.mq-warn { background: #fffaf0 !important; color: #b7791f; border-color: #f6e05e !important; }
.sensor-tile-box.mq-danger { background: #fff5f5 !important; color: #c53030; border-color: #feb2b2 !important; }

/* Окно лога (контроллер/глобальный) */
.log-window { background: #121212; font-family: monospace; font-size: 0.85rem; min-height: 400px; max-height: 65vh; overflow-y: auto; }

/* Переключатель видов (Контроллеры / Объекты) */
.seg { background: #fff; border-radius: 30px; padding: 3px; display: inline-flex; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.seg .seg-btn { border: none; background: none; border-radius: 30px; padding: 6px 18px; font-weight: 600; color: #718096; font-size: .9rem; }
.seg .seg-btn.active { background: var(--ikc-cyan); color: #fff; }

/* Пилюли зон в виде Объекта */
.zone-pills .nav-link { color: #718096; font-weight: 600; border-radius: 8px; }
.zone-pills .nav-link.active { background: var(--ikc-cyan); color: #fff; }

/* Вкладки контроллеров (вид «Контроллеры»): пилюли + ◀▶ переупорядочивание */
.ctrl-tabs .nav-link { color: #718096; font-weight: 600; border-radius: 8px; white-space: nowrap; }
.ctrl-tabs .nav-link.active { background: var(--ikc-cyan); color: #fff; }
.ctrl-tab-item { background: #fff; border-radius: 8px; }
.ctab-arrow { border: none; background: none; color: #a0aec0; font-weight: 700; font-size: 1.15rem; line-height: 1; padding: 0 4px; cursor: pointer; }
.ctab-arrow:hover { color: var(--ikc-cyan); }
.ctrl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.ctrl-dot.on { background: #48bb78; }
.ctrl-dot.off { background: #cbd5e0; }

/* Карточки в виде Объекта — высота по содержимому (над ними селектор зоны;
   .card{height:100%} иначе вылезает за колонку и карточки наезжают). */
.obj-card > .card { height: auto; }