/* HUB — общи стилове върху темата */
/* марка: цветове и шрифт — застъпват се от Настройки→Визия (inline в <head>, СЛЕД този файл) */
:root {
  --hub-primary: #4f8cff;      /* главен акцент: връзки, активни, фокус */
  --hub-secondary: #6c757d;    /* вторичен акцент */
  --hub-btn: #4f8cff;          /* цвят на основните бутони */
  --hub-font: 'Inter';
}
/* кирилски шрифт навсякъде (темата ползва Muli/Open Sans без кирилица) */
body, p, a, span, div, input, select, textarea, button, label, table,
h1, h2, h3, h4, h5, h6, .card-title, .content-header-title, .brand-text,
.menu-title, .navigation, .navbar, .dropdown-item, .user-name {
  font-family: var(--hub-font), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
/* --- бутони --- */
.btn-primary {
  background-color: var(--hub-btn) !important;
  border-color: var(--hub-btn) !important;
  color: #fff !important;
}
/* hover/focus/active → вторичния цвят (темата иначе слага свое виолетово) */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--hub-secondary) !important;
  border-color: var(--hub-secondary) !important;
  color: #fff !important;
  filter: none;
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--hub-secondary) 40%, transparent) !important;
}
.btn-outline-primary { color: var(--hub-btn) !important; border-color: var(--hub-btn) !important; }
.btn-outline-primary:hover { background-color: var(--hub-btn) !important; color:#fff !important; }
.btn-secondary {
  background-color: var(--hub-secondary) !important;
  border-color: var(--hub-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus { filter: brightness(.93); }
.btn-outline-secondary { color: var(--hub-secondary) !important; border-color: var(--hub-secondary) !important; }
.btn-outline-secondary:hover { background-color: var(--hub-secondary) !important; color:#fff !important; }
/* --- акценти --- */
.text-primary { color: var(--hub-primary) !important; }
.bg-primary   { background-color: var(--hub-primary) !important; }
.badge-primary{ background-color: var(--hub-primary) !important; }
.text-secondary { color: var(--hub-secondary) !important; }
.bg-secondary   { background-color: var(--hub-secondary) !important; }
a { color: var(--hub-primary); }
a:hover { filter: brightness(.9); }
/* акцентът на менюто → главния цвят.
   Темата ползва твърдо #3bafda на три места: активния ред, 4px чертичка вдясно,
   и изскачащия етикет при свито меню. Пренасочваме и трите към var(--hub-primary). */
.main-menu .navigation > li.active > a {
  background: var(--hub-primary) !important;
  border-right: 4px solid var(--hub-secondary) !important;   /* контрастна чертичка = вторичния цвят */
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--hub-primary) 60%, transparent) !important;
  color: #fff !important;
}
.main-menu .navigation > li.active > a > i,
.main-menu .navigation > li.active > a > span { color: #fff !important; }
.main-menu .navigation > li .active > a { border-right: 4px solid var(--hub-secondary) !important; }
/* изскачащ етикет САМО при свито меню (hover flyout). Важно: пази се да НЕ оцветява
   етикетите в разгънатото меню — затова е заключено с body.menu-collapsed. */
body.menu-collapsed .main-menu .main-menu-content span.menu-title,
body.menu-collapsed .main-menu .main-menu-content a.menu-title,
body.menu-collapsed .main-menu .navigation > li > a > span {
  background-color: var(--hub-primary) !important;
  border-color: var(--hub-primary) !important;
}
/* свито меню: клик върху иконката навигира (самото навигиране е в platform.js) */
.main-menu .navigation > li:not(.has-sub) > a { cursor: pointer; }
/* свито меню: центрирай иконките в лентата (темата ги бута вдясно с ляв падинг 18px) */
body.menu-collapsed .main-menu .navigation > li > a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}
body.menu-collapsed .main-menu .navigation > li > a > i { margin: 0 auto !important; }
/* ☰ копче за свиване — плътно до десния край на менюто (и до логото), в двете състояния */
.navbar .navbar-container .hub-toggle-wrap { margin-left: 0 !important; }
.navbar .navbar-container .hub-toggle-wrap .menu-toggle { padding-left: 6px !important; padding-right: 12px !important; }
/* --- компактни съобщения (център на екрана, цветови код) --- */
.hub-note-wrap {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 10999; display: flex; flex-direction: column; gap: 10px;
  align-items: center; pointer-events: none; width: auto; max-width: 92vw;
}
.hub-note {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  min-width: 280px; max-width: 420px; padding: 13px 16px;
  border-radius: 14px;
  /* мека рамка около цялото съобщение, в цвета на типа */
  background: #fff;
  border: 1.5px solid var(--c, #4f8cff);                       /* резерва */
  background: color-mix(in srgb, var(--c) 6%, #fff);
  border-color: color-mix(in srgb, var(--c) 38%, #fff);
  box-shadow: 0 10px 30px rgba(20, 25, 40, .12);
  animation: hubNoteIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.hub-note.hub-note-out { opacity: 0; transform: translateY(-12px) scale(.98); transition: opacity .26s ease, transform .26s ease; }
.hub-note .hub-note-ic { color: var(--c); font-size: 1.45rem; line-height: 1; flex: 0 0 auto; }
.hub-note .hub-note-msg { flex: 1; font-size: .95rem; line-height: 1.35; color: #2c2f36; }
.hub-note .hub-note-x { flex: 0 0 auto; cursor: pointer; color: #aeb4c0; font-size: 1.05rem; line-height: 1; }
.hub-note .hub-note-x:hover { color: #6b7280; }
.hub-note .hub-note-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--c); transform-origin: left; animation: hubNoteBar linear forwards;
}
@keyframes hubNoteIn { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- плавни модали: отварят се отгоре надолу, затварят се надолу --- */
.modal.fade .modal-dialog {
  transition: transform .34s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
  transform: translateY(-70px);
  opacity: 0;
}
.modal.show .modal-dialog { transform: translateY(0); opacity: 1; }
.modal.fade.hub-closing .modal-dialog { transform: translateY(90px); opacity: 0; }   /* при затваряне — продължава надолу */

/* --- плавна поява на съдържанието при смяна на страница --- */
.app-content { animation: hubPageIn .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes hubPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.hub-leaving .app-content { opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; }
@keyframes hubNoteBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 480px){ .hub-note { min-width: 0; width: 92vw; } }
/* --- компактен ред за малка настройка: етикет вляво, тясно поле вдясно --- */
.hub-setrow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.hub-setrow .hub-setlabel { color:#4b5563; font-size:.9rem; line-height:1.2; }
.hub-setrow .hub-setinput { width:84px; flex:0 0 auto; text-align:center; }
@media (max-width:420px){ .hub-setrow .hub-setinput { width:72px; } }

/* --- чипове за IP списъци (леко заоблени, почти прави ъгли) --- */
.hub-iplist { display:flex; flex-wrap:wrap; gap:6px; }
.hub-chip {
  display:inline-flex; align-items:center; gap:7px;
  background:#f0f2f7; border:1px solid #e2e6ee; border-radius:5px;
  padding:3px 8px 3px 11px; font-size:.85rem; line-height:1;
}
.hub-chip code { background:none; color:#2c2f36; padding:0; font-size:.85rem; }
.hub-chip-x { cursor:pointer; color:#aeb4c0; font-size:.9rem; }
.hub-chip-x:hover { color:#ea5455; }
/* позволени → зелени */
#allow-list .hub-chip { background:#e8f8ef; border-color:#bfe8d0; }
#allow-list .hub-chip code { color:#1b8a4b; }
#allow-list .hub-chip-x:hover { color:#1b8a4b; }
/* забранени → червени */
#block-list .hub-chip { background:#fdecec; border-color:#f5c2c2; }
#block-list .hub-chip code { color:#d13b3b; }
#block-list .hub-chip-x:hover { color:#d13b3b; }
/* четлив IP етикет (неутрален) */
.hub-ip {
  display:inline-block; background:#eef1f6; color:#2c2f36;
  border-radius:5px; padding:2px 8px; font-family:monospace; font-size:.88rem;
}
/* заключени адреси → чипове в оранжево, по-дребен шрифт, × = „Деблокирай" */
.hub-chip-locked { background:#fff4e5; border-color:#ffd8a8; font-size:.8rem; }
.hub-chip-locked code { color:#e68a00; font-size:.8rem; }
.hub-chip-locked .hub-chip-meta { color:#e68a00; font-size:.76rem; }
.hub-chip-locked .hub-chip-x { color:#e0a56a; }
.hub-chip-locked .hub-chip-x:hover { color:#e68a00; }
/* ℹ икона за пояснения */
.hub-info { cursor:pointer; color:var(--hub-primary); }
.hub-info:hover { opacity:.8; }
/* DataTables — по-чисти очертания (покрива и 1.x, и новите 2.x класове) */
table.dataTable { border-collapse: collapse !important; }
/* „Покажи N" — етикет и бройка раздалечени.
   DataTables 2.x: <label> и <select> са СЪСЕДИ в .dt-length (не вложени) —
   затова gap-ът трябва да е на контейнера, не на label-а. Покриваме и 1.x (вложен select). */
.dt-length, .dataTables_length {
  display:inline-flex !important; align-items:center; gap:12px;
}
.dt-length label, .dataTables_length label {
  display:inline-flex !important; align-items:center; gap:12px; margin:0 !important; font-weight:400;
}
.dt-length select, .dataTables_length select, .dt-length .dt-input {
  margin:0 !important; min-width:70px; width:auto;
}
/* търсачката — плътно вдясно */
.dt-search, .dataTables_filter { text-align:right !important; }
.dt-search label, .dataTables_filter label {
  display:inline-flex !important; align-items:center; gap:10px; margin:0; font-weight:400;
}
.dt-search input, .dataTables_filter input { min-width:240px; }
/* иконки вместо думите „Покажи"/„Търси:" */
.hub-dt-ic { color:#9aa2b1; font-size:1rem; line-height:1; }
.dt-length .hub-dt-ic-len, .dataTables_length .hub-dt-ic-len { margin-right:2px; }
.dt-length label:empty, .dataTables_length label:empty { display:none !important; }
.dt-search .hub-dt-ic-srch, .dataTables_filter .hub-dt-ic-srch {
  position:relative; left:24px; margin-right:-16px; z-index:2; pointer-events:none;
}
.dt-search input, .dataTables_filter input { padding-left:40px; }
/* телефон: търсачката цял ред вляво, с лупата вътре (без „центриране") */
@media (max-width: 575.98px) {
  .dt-search, .dataTables_filter { position:relative; display:block !important; width:100%; text-align:left !important; margin-top:8px; }
  .dt-search label, .dataTables_filter label { display:block !important; width:100%; }
  .dt-search input, .dataTables_filter input { width:100% !important; min-width:0 !important; box-sizing:border-box; }
  .dt-search .hub-dt-ic-srch, .dataTables_filter .hub-dt-ic-srch {
    position:absolute; left:14px; top:50%; transform:translateY(-50%); margin:0; z-index:2;
  }
}
.dt-search input, .dt-length select,
.dataTables_filter input, .dataTables_length select { border:1px solid #d9dee5; border-radius:6px; }
/* активна страница в пагинацията → главния цвят */
.dt-paging .dt-paging-button.current, .dataTables_paginate .paginate_button.current {
  background:var(--hub-primary) !important; border-color:var(--hub-primary) !important; color:#fff !important; border-radius:6px;
}
/* леко закръгляне на картите */
.card { border-radius: 10px; }

/* --- компактни полета: вътрешен (плаващ) лейбъл + иконка вляво + око за парола --- */
.hub-field { position: relative; margin-bottom: 1rem; }
.hub-field .form-control {
  height: 56px; padding: 25px 40px 7px 40px; border-radius: 10px; line-height: 1.2;
}
.hub-field .form-control:focus { box-shadow: 0 0 0 .15rem rgba(79,140,255,.15); border-color:var(--hub-primary); }
.hub-field .hub-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #9aa2b1; font-size: 1rem; pointer-events: none;
}
.hub-field label {
  position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
  margin: 0; color: #9aa2b1; pointer-events: none; transition: all .15s ease; font-weight: 400;
}
.hub-field .form-control:focus ~ label,
.hub-field .form-control:not(:placeholder-shown) ~ label {
  top: 7px; left: 40px; transform: none; font-size: .7rem; color: var(--hub-primary);
}
.hub-field .hub-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #9aa2b1; cursor: pointer; font-size: 1rem;
}
.hub-field .hub-eye:hover { color: var(--hub-primary); }
/* полетата с код да са центрирани и разредени, но пак с иконка/лейбъл */
.hub-field.hub-code .form-control { text-align:center; letter-spacing:.4em; font-size:1.2rem; }
/* падащо меню в hub-field стил: иконка вляво + лейбъл винаги „горе" (select винаги има стойност) */
.hub-field.hub-select select.form-control { height:56px; padding:22px 30px 5px 40px; border-radius:10px; appearance:auto; }
.hub-field.hub-select label { top:7px; left:40px; transform:none; font-size:.7rem; color:var(--hub-primary); }
.hub-field.hub-select .hub-ic { top:60%; }

/* --- превключватели (switch): сиво = изключено / зелено = включено, по-ясни --- */
.custom-switch { padding-left: 2.7rem; min-height: 1.5rem; }
.custom-switch .custom-control-label { cursor: pointer; padding-top: .05rem; }
.custom-switch .custom-control-label::before {
  left: -2.7rem; top: .1rem; width: 2.2rem; height: 1.25rem; border-radius: 1rem;
  background-color: #cfd4dd; border-color: #cfd4dd;
  transition: background-color .2s ease, border-color .2s ease;
}
.custom-switch .custom-control-label::after {
  left: calc(-2.7rem + 3px); top: calc(.1rem + 3px);
  width: calc(1.25rem - 6px); height: calc(1.25rem - 6px);
  background-color: #fff; border-radius: 50%;
  transition: transform .2s ease;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #28c76f !important; border-color: #28c76f !important;   /* включено = зелено */
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(.95rem);
}
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .15rem rgba(40,199,111,.2);
}

/* --- задължителни полета: звезда + оранжево анимирано ограждане при празно --- */
.hub-field.req > label::after { content: ' *'; color: #ff9f43; font-weight: 700; }
.hub-field.hub-invalid .form-control {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 .18rem rgba(255,159,67,.22) !important;
}
.hub-field.hub-invalid .hub-ic { color: #ff9f43; }
.hub-field.hub-shake { animation: hubShake .42s ease; }
@keyframes hubShake {
  0%,100% { transform: none; }
  22% { transform: translateX(-5px); }
  44% { transform: translateX(4px); }
  66% { transform: translateX(-3px); }
  88% { transform: translateX(2px); }
}

/* --- цветове на ролите: админ=червен, модератор=оранжев, потребител=светлосин --- */
.badge.role-admin,     .hub-avatar.role-admin     { background:#ea5455 !important; color:#fff !important; }
.badge.role-groupadmin,.hub-avatar.role-groupadmin{ background:#7367f0 !important; color:#fff !important; }
.badge.role-moderator, .hub-avatar.role-moderator { background:#ff9f43 !important; color:#fff !important; }
.badge.role-user,      .hub-avatar.role-user      { background:#5ab6f7 !important; color:#fff !important; }
/* цветове на защитата: 2FA=тъмно зелен, каптча=светло зелен, без=светло сив */
.badge.auth-2fa     { background:#1f9d57 !important; color:#fff !important; }
.badge.auth-captcha { background:#5fd39a !important; color:#fff !important; }
.badge.auth-none    { background:#e4e8ef !important; color:#6b7280 !important; }
/* карти на групите — кафяв */
.badge.badge-group  { background:#8d6e63 !important; color:#fff !important; }
/* кръгъл аватар с човечето до името (горе вдясно) — в цвета на ролята */
.hub-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; color:#fff;
  margin-right:8px; background:#8a94a6; flex:0 0 auto;
}
.hub-avatar i {
  line-height:1; margin:0; font-size:.82rem;
  /* по-плътна (болдната) feather иконка */
  text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor;
}
/* кръгъл „+" бутон (с подсказка при посочване през title) */
.hub-add-btn { width:34px; height:34px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.hub-add-btn i { font-size:1.1rem; }

/* --- бранд в горната лента (лого или иконка) --- */
.hub-brand-logo { height:30px; width:auto; max-width:130px; margin-right:9px; }
.hub-auth-logo { height:56px; width:auto; max-width:180px; }
.hub-captcha-img { height:62px; width:auto; border:1px solid #d9dee5; border-radius:8px; background:#f5f7fa; vertical-align:middle; }

/* --- компактна Визия: етикети и цветови редове --- */
.hub-lbl { font-weight:500; font-size:.85rem; margin-bottom:3px; color:#4b5563; }
.hub-colorrow { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.hub-colorpick { width:38px; height:34px; padding:2px; border:1px solid #d9dee5; border-radius:7px; cursor:pointer; flex:0 0 auto; background:#fff; }
.hub-colorhex { max-width:96px; flex:0 0 96px; height:34px; }
.hub-colortext { font-size:.8rem; line-height:1.15; }
.hub-colortext b { display:block; font-weight:600; }
.hub-colortext .text-muted { font-size:.74rem; }

/* име на портала до логото (горе) */
.header-navbar .navbar-wrapper .navbar-header .navbar-brand .brand-text,
.navbar .navbar-brand .brand-text,
.navbar .brand-text { color:var(--hub-brand-text,#3b4252)!important; }

/* (Бутоните на модулите се стилизират в лявото меню — виж .hub-nav-module по-долу.
   Бутоните ВЪТРЕ в модулите нарочно не се пипат — ползват стандартния вид на HUB.) */

/* --- меню „видими колони" --- */
.hub-colvis-menu { padding:6px; min-width:180px; }
.hub-colvis-item { display:flex; align-items:center; padding:5px 8px; border-radius:6px; cursor:pointer; font-weight:400; font-size:.86rem; }
.hub-colvis-item:hover { background:#f2f5f9; }
.hub-colvis-item input { cursor:pointer; }

/* === таблици в модала на таблото: визуална прилика с модулните (статуси, цветове, филтри) === */
.hub-stat-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
/* моноширинен IP/MAC/потребител */
.hub-mono { font-family:Consolas,"Segoe UI Mono","SF Mono",Menlo,"DejaVu Sans Mono",monospace; font-size:.85rem; letter-spacing:.2px; white-space:nowrap; }
/* оцветено име според състоянието (като в модула) */
.hub-stat-name.hub-stat-on  { color:#28c76f; font-weight:600; }
.hub-stat-name.hub-stat-off { color:#ea5455; }
.hub-stat-name.hub-stat-unk { color:#8a93a2; }
/* бадж за състояние */
.hub-sbadge { display:inline-block; padding:2px 9px; border-radius:11px; font-size:.78rem; font-weight:600; line-height:1.4; }
.hub-sbadge-on  { background:#28c76f; color:#fff; }
.hub-sbadge-off { background:#ea5455; color:#fff; }
.hub-sbadge-unk { background:#e4e8ef; color:#6b7280; }
/* цветни филтри (зелено=на линия/вкл, червено=недостъпни/изкл) — както в модула */
.hub-stat-filter [data-c="on"]  { color:#1f9d57 !important; border-color:#a7e3c4 !important; background:#fff !important; }
.hub-stat-filter [data-c="off"] { color:#d14043 !important; border-color:#f3b7b8 !important; background:#fff !important; }
.hub-stat-filter [data-c="on"]:hover  { background:#e9f9f0 !important; color:#1f9d57 !important; }
.hub-stat-filter [data-c="off"]:hover { background:#fdeded !important; color:#d14043 !important; }
.hub-stat-filter [data-c="on"].active  { background:#28c76f !important; border-color:#28c76f !important; color:#fff !important; }
.hub-stat-filter [data-c="off"].active { background:#ea5455 !important; border-color:#ea5455 !important; color:#fff !important; }
.hub-stat-filter [data-f="all"].active { background:var(--hub-primary) !important; border-color:var(--hub-primary) !important; color:#fff !important; }
/* филтър „На линия" — иконата мига (както в модула) */
.hub-stat-filter [data-f="online"] i { animation:hubBlink 1.1s ease-in-out infinite; }
/* изключен акаунт → червено потребителско име (активен=зелено, на линия=мига — вече дефинирани) */
.hub-user-red { color:#ea5455; font-weight:600; }
/* текст вляво + бутон „копирай" вдясно, на един ред */
.hub-copc { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* бутон „копирай" до адрес/телефон */
.hub-copybtn { border:0; background:none; color:#9aa2b1; cursor:pointer; padding:2px 4px; line-height:1; font-size:1.15rem; flex:0 0 auto; }
.hub-copybtn:hover { color:var(--hub-primary); }

/* --- статус точка (таблица с акаунти) --- */
.hub-dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:#c7ccd4; vertical-align:middle; }
.hub-dot-on     { background:#28c76f; }          /* активен */
.hub-dot-off    { background:#c7ccd4; }          /* неактивен (сив) */
.hub-dot-online { background:#28c76f; animation:hubBlink 1.1s ease-in-out infinite; }  /* активен + онлайн → мига */
@keyframes hubBlink { 0%,100% { opacity:1; } 50% { opacity:.18; } }

/* статус върху потребителското име: зелено=активен, сиво=изключен, мига=на линия */
.hub-user { font-weight:500; }
.hub-user-active { color:#1f9d57; font-weight:600; }
.hub-user-off    { color:#9aa2b1; }
.hub-user-online { color:#1f9d57; font-weight:600; animation:hubBlink 1.1s ease-in-out infinite; }

/* бързи филтри (дискретни, икони+текст; на телефон само икони) */
.hub-acc-filter .btn i { font-size:.9rem; }
.hub-acc-filter .hub-flbl { margin-left:5px; }
@media (max-width: 575.98px) { .hub-acc-filter .hub-flbl { display:none; } }
/* цветове по смисъл: Активни=зелено, Изключени=сиво, На линия=зелено (с мигаща иконка).
   !important — темата (robust) има по-силни правила за .btn-outline-secondary. */
.hub-acc-filter [data-filter="active"], .hub-acc-filter [data-filter="online"] { color:#1f9d57 !important; border-color:#a7e3c4 !important; background:#fff !important; }
.hub-acc-filter [data-filter="inactive"] { color:#8a94a6 !important; border-color:#d3d8e0 !important; background:#fff !important; }
.hub-acc-filter [data-filter="active"]:hover, .hub-acc-filter [data-filter="online"]:hover { background:#e9f9f0 !important; color:#1f9d57 !important; border-color:#a7e3c4 !important; }
.hub-acc-filter [data-filter="inactive"]:hover { background:#f1f3f6 !important; color:#6c7686 !important; border-color:#d3d8e0 !important; }
.hub-acc-filter [data-filter="active"].active, .hub-acc-filter [data-filter="online"].active { background:#28c76f !important; border-color:#28c76f !important; color:#fff !important; }
.hub-acc-filter [data-filter="inactive"].active { background:#8a94a6 !important; border-color:#8a94a6 !important; color:#fff !important; }
.hub-acc-filter [data-filter="online"] i { animation:hubBlink 1.1s ease-in-out infinite; }

/* === Настройки: симетрични карти с равни височини и запълнено пространство === */
#tab-vis .card, #tab-sec .card, #tab-mail .card { margin-bottom:0; }
/* еднакъв отстъп: между редовете карти и между струпани карти на мобилно */
#tab-vis > .row, #tab-sec > .row, #tab-mail > .row { margin-bottom:1.5rem; row-gap:1.5rem; }
#tab-vis > .row:last-child, #tab-sec > .row:last-child, #tab-mail > .row:last-child { margin-bottom:0; }
#tab-vis .card.h-100, #tab-sec .card.h-100 { display:flex; flex-direction:column; }
#tab-vis .card.h-100 > .card-content, #tab-sec .card.h-100 > .card-content { flex:1 1 auto; display:flex; flex-direction:column; }
#tab-vis .card.h-100 > .card-content > .card-body, #tab-sec .card.h-100 > .card-content > .card-body { flex:1 1 auto; display:flex; flex-direction:column; }
/* основното действие на картата се долепя до дъното → равни редове, без „провиснали" кутии */
#tab-vis #vis-save { margin-top:auto; align-self:flex-start; }

/* === Заглавие на страницата: скрито на десктоп (менюто вече го показва), видимо на мобилно === */
.hub-page-head { display:none; }
@media (max-width: 991.98px){ .hub-page-head { display:flex; } }

/* === Табове: само избраният е цветен; другите тъмни/приглушени; избраният без „ръка" === */
.nav-tabs { border-bottom:1px solid #e6e9f0; }
.nav-tabs .nav-link { color:#5b6577 !important; background:transparent !important; border:none !important; border-bottom:2px solid transparent !important; cursor:pointer; font-weight:500; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color:#2f3542 !important; border-color:transparent !important; border-bottom:2px solid #d1d5db !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color:var(--hub-primary) !important; background:transparent !important;
  border:none !important; border-bottom:2px solid var(--hub-primary) !important;
  cursor:default !important; font-weight:600;
}

/* по-малки бутони в заглавието и действията на таблицата с акаунти */
.hub-acc-tools .btn { padding:.26rem .5rem; font-size:.82rem; }
.hub-acc-tools .hub-add-btn { width:30px; height:30px; }
.hub-acc-tools .hub-add-btn i { font-size:1rem; }
#acc-table td .btn { padding:.2rem .42rem; }
#acc-table td .btn i { font-size:.85rem; }
/* иконка-лого на модула в горната лента — свободна, без фон/кутия, центрирана спрямо текста */
.hub-brand-ic {
  display:inline-flex; align-items:center; justify-content:center; width:auto; height:34px;
  background:none; border:0; border-radius:0; color:var(--hub-primary); margin-right:9px;
  font-size:1.6rem; line-height:1;
}
.hub-brand-ic i { display:block; line-height:1; }

/* === Карта на модул в таблото: цяла е копче, с градиент от цветовете на модула,
   голяма икона, заглавие + подзаглавие и ред със статистики (цветовете идват от style-блок). === */
.hub-mod-card {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  min-height:150px; padding:20px 22px; border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.08); transition:box-shadow .15s ease;
}
.hub-mod-card:hover { box-shadow:0 8px 22px rgba(0,0,0,.15); }
.hub-mod-card-top { display:flex; align-items:center; gap:16px; }
.hub-mod-card-ic { font-size:3rem; line-height:1; flex:0 0 auto; }
.hub-mod-card-txt { min-width:0; }
.hub-mod-card-title { font-size:1.3rem; font-weight:700; line-height:1.1; }
.hub-mod-card-sub { font-size:.84rem; opacity:.92; margin-top:3px; }
.hub-mod-card-stats { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
/* статистиките са кликаеми (отварят модал с таблица) */
.hub-mod-stat { display:inline-flex; align-items:center; gap:6px; font-size:1rem; background:none; border:0; padding:4px 6px; border-radius:6px; cursor:pointer; transition:background-color .12s ease; }
.hub-mod-stat:hover { background:rgba(255,255,255,.18); }
.hub-mod-stat i { font-size:1.1rem; opacity:.9; }
.hub-mod-stat b { font-weight:700; font-size:1.05rem; }
/* брой офлайн устройства — мигаща червена цифра до бялото число (само при >0) */
.hub-mod-stat-off {
  color:#ff2d2d !important; font-weight:800; font-size:1.05rem; margin-left:1px;
  text-shadow:0 0 2px rgba(0,0,0,.45);
  animation:hubBlink 1.1s ease-in-out infinite;
}
.hub-mod-stat-off[hidden] { display:none !important; }
/* кръгло копче долу вдясно със стрелка (цветовете идват от style-блока на таблото) */
.hub-mod-fab {
  position:absolute; right:16px; bottom:16px; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,.22); transition:transform .15s ease, box-shadow .15s ease;
}
.hub-mod-fab:hover { transform:scale(1.1); box-shadow:0 4px 14px rgba(0,0,0,.3); }
.hub-mod-fab i { font-size:1.25rem; line-height:1; }

/* --- ляво меню: разделител, цветни модули, копче „към HUB" долу --- */
.hub-menu-divider { height:1px; margin:12px 20px; padding:0; background:#e4e8ef; list-style:none; }
/* Бутоните на модулите в менюто = богат бутон (икона + заглавие + подзаглавие).
   Само ОФОРМЛЕНИЕТО е тук; цветовете идват per-module от style-блок в sidebar.php
   (всеки модул сам определя своите от настройките си). Свиването се поема от темата:
   при свито меню .menu-title (→ .mb-text) се скрива и остава само иконата. */
.hub-nav-module > a { display:flex !important; align-items:center; gap:10px; height:auto !important; white-space:normal !important;
  background-image:none !important; box-shadow:none !important; transition:background-color .15s ease; }
.hub-nav-module > a > .mb-icon { flex:0 0 auto; font-size:1.3rem; margin:0 !important; }
/* надписите плътно един до друг около центъра (висока специфичност — темата слага свой line-height) */
.main-menu .navigation .hub-nav-module > a > .mb-text { display:flex !important; flex-direction:column !important; justify-content:center !important; line-height:1 !important; min-width:0; flex:1 1 auto; white-space:normal !important; }
.main-menu .navigation .hub-nav-module .mb-title { font-weight:600; line-height:1.12 !important; margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main-menu .navigation .hub-nav-module .mb-sub { font-size:.68rem; line-height:1.12 !important; opacity:.9; margin:1px 0 0 !important; white-space:normal; overflow-wrap:anywhere; }

/* Свито меню: темата генерира СВОЙ изскачащ етикет <a.menu-title> (position:fixed — не се реже).
   platform.js го преправя за модулите на заглавие + малко подзаглавие (клас .hub-fly, с цветове
   от модула). Тук само оформлението. */
.main-menu .main-menu-content > a.menu-title.hub-fly {
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important;
  text-transform:none !important; white-space:nowrap !important; line-height:1.2 !important;
  padding:8px 16px !important; border-radius:0 !important;   /* правоъгълно, като tooltip-а на Табло */
  width:240px !important; box-sizing:border-box !important;  /* със ширината на разгънатия бутон */
}
.main-menu .main-menu-content > a.menu-title.hub-fly .hub-fly-t { font-weight:600; font-size:.86rem; text-transform:none; }
.main-menu .main-menu-content > a.menu-title.hub-fly .hub-fly-s { font-size:.68rem; opacity:.9; margin-top:2px; text-transform:none; }
/* копче „към HUB" — заковано най-долу вляво в менюто на модула */
.hub-menu-module .main-menu-content { padding-bottom:58px; }
.hub-menu-back {
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px;
  padding:15px 20px; color:#fff; background:var(--hub-primary); text-decoration:none; font-weight:500;
}
.hub-menu-back:hover { filter:brightness(1.08); color:#fff; text-decoration:none; }
.hub-menu-back i { font-size:1.05rem; }

/* --- Преглед на акаунт (инфо-модал) --- */
.hub-info-grid { display:flex; flex-direction:column; }
.hub-info-row {
  display:flex; align-items:center; gap:12px;
  padding:9px 2px; border-bottom:1px solid #eef1f5;
}
.hub-info-row:last-child { border-bottom:0; }
.hub-info-label {
  flex:0 0 140px; display:inline-flex; align-items:center; gap:8px;
  color:#8a94a6; font-size:.82rem; font-weight:500;
}
.hub-info-label i { font-size:.95rem; }
.hub-info-val { flex:1 1 auto; color:#2c2f36; font-weight:500; word-break:break-word; }
.hub-info-val .hub-chip-sm { margin:2px 4px 2px 0; padding:1px 8px; font-size:.78rem; }
/* помощен клас за скриване (темата няма .d-none) */
.hub-hidden { display:none !important; }

/* --- Права за достъп в модала на акаунт (плъзгачи, подредени на решетка) --- */
.hub-perms { border:1px solid var(--hub-border, #e6e9f0); border-radius:8px; overflow:hidden; }
.hub-perm-row { display:flex; align-items:center; justify-content:space-between; gap:10px 16px;
  flex-wrap:wrap; padding:9px 12px; border-top:1px solid var(--hub-border, #e6e9f0); }
.hub-perm-row:first-child { border-top:0; }
.hub-perm-name { font-weight:600; display:inline-flex; align-items:center; min-width:120px; }
.hub-perm-toggles { display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin-left:auto; }
.hub-perm-toggles .custom-switch { margin-bottom:0; }
.hub-perm-child { padding-left:30px; background:rgba(0,0,0,.015); }
.hub-perm-child .hub-perm-name { font-weight:500; opacity:.9; }
.hub-perm-off { opacity:.5; }
@media (max-width: 575.98px){
  .hub-perm-row { flex-direction:column; align-items:flex-start; }
  .hub-perm-toggles { margin-left:0; }
}