/* Router Scan Web — classic gray chrome, аналог оригинального интерфейса */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 12px Tahoma, Verdana, sans-serif;
  background: #d4d0c8;
  color: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.hidden { display: none !important; }
.hint { color: #666; font-size: 11px; }
.warn { color: #a00; }

/* ---------- Верхняя панель ---------- */
#topbar {
  background: linear-gradient(#ece9d8, #d4d0c8);
  border-bottom: 1px solid #999;
  padding: 6px 8px;
}
.tb-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.tb-group { display: flex; flex-direction: column; gap: 3px; font-weight: bold; }
.tb-group label { font-size: 11px; }
.tb-grow { flex: 1; }
.tb-group label { font-size: 11px; }
/* Ports и IP ranges — в один ряд (как в оригинале) */
.tb-lists { flex-direction: row; gap: 10px; align-items: flex-start; }
.tb-lists label { display: flex; flex-direction: column; }
.tb-lists .listwrap { display: flex; flex-direction: column; }
.tb-lists .listtitle { font-size: 11px; }
.tb-group input[type=number], .tb-group input[type=text] {
  font: 12px Tahoma; padding: 2px 3px; border: 1px solid #7f9db9; background: #fff;
}
#inThreads { width: 70px; }
#inTimeout { width: 80px; }
.chk { font-weight: normal; white-space: nowrap; }
.credrow { display: flex; align-items: center; gap: 4px; font-weight: normal; }
.tb-menu { display: flex; flex-direction: column; gap: 4px; margin-left: auto; }
.btn-menu {
  font: 12px Tahoma; padding: 4px 10px; background: #ece9d8;
  border: 1px solid #888; cursor: pointer; white-space: nowrap;
}
.btn-menu:hover { background: #fff; }

.btn-start {
  font: bold 14px Tahoma; color: #fff; background: linear-gradient(#4bd04b, #1d9d1d);
  border: 1px solid #0c6b0c; border-radius: 4px; padding: 18px 22px; cursor: pointer;
  min-width: 130px;
}
.btn-start:hover { background: linear-gradient(#63e063, #28b428); }
.btn-start.stop {
  background: linear-gradient(#e04b4b, #9d1d1d); border-color: #6b0c0c;
}
.btn-pause {
  font: bold 13px Tahoma; background: linear-gradient(#f5d76e, #d4a017);
  border: 1px solid #8a6d0b; border-radius: 4px; cursor: pointer; padding: 4px 10px;
}
.btn-stop {
  font: 11px Tahoma; background: #ece9d8; border: 1px solid #888; cursor: pointer; padding: 3px 8px;
}

/* ---------- Списки портов/диапазонов ---------- */
.listbox {
  width: 150px; height: 92px; overflow: auto; background: #fff;
  border: 1px solid #7f9db9; margin-top: 2px; font-weight: normal;
}
.listbox div { padding: 1px 4px; cursor: pointer; white-space: nowrap; }
.listbox div.sel { background: #316ac5; color: #fff; }
.listbtns { display: flex; gap: 3px; margin-top: 2px; }
.listbtns button {
  width: 24px; height: 20px; font: bold 12px Tahoma; cursor: pointer;
  background: #ece9d8; border: 1px solid #888;
}

.searchbtns { display: flex; gap: 4px; margin-top: 2px; }
.searchbtns button, .dlgbtns button {
  font: 11px Tahoma; padding: 3px 10px; cursor: pointer;
  background: #ece9d8; border: 1px solid #888;
}
.searchbtns button:hover, .dlgbtns button:hover { background: #fff; }
#inSearch { width: 170px; }

/* ---------- Вкладки ---------- */
#tabs {
  display: flex; align-items: center; background: #d4d0c8;
  border-bottom: 1px solid #999; padding: 4px 8px 0; gap: 2px;
}
.tab {
  font: 12px Tahoma; padding: 5px 14px; cursor: pointer;
  background: #c9c5bc; border: 1px solid #999; border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.tab.active { background: #f4f2ec; font-weight: bold; padding-bottom: 7px; }
.tab-counts { margin-left: auto; font-size: 11px; color: #444; }

/* ---------- Таблица ---------- */
#tableView { flex: 1; display: flex; min-height: 0; background: #fff; }
#vscroll {
  flex: 1; overflow-y: auto; overflow-x: auto; position: relative;
  border: 1px solid #999; background: #fff; outline: none;
}
#vspacer { width: 1px; }
#grid { border-collapse: collapse; table-layout: fixed; position: relative; width: max-content; min-width: 100%; }
#grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(#f8f7f4, #dcd9d0);
  border-right: 1px solid #b5b1a8; border-bottom: 2px solid #999;
  padding: 3px 6px; text-align: left; white-space: nowrap; cursor: pointer;
  font-weight: bold; font-size: 11px;
}
#grid thead th:hover { background: #e8e5dc; }
#grid td {
  border-right: 1px solid #eee; border-bottom: 1px solid #eee;
  padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; cursor: default; height: 21px;
}
#grid tr.good td { background: #e2f6e2; }
#grid tr.good td.st { color: #067d06; font-weight: bold; }
#grid tr.sel td { background: #316ac5 !important; color: #fff; }
#grid td.ro-yes, #grid td.hi-yes { color: #c00; font-weight: bold; text-align: center; }

/* ---------- Лог ---------- */
#logView { flex: 1; overflow: auto; background: #fff; border: 1px solid #999; }
#logPre { font: 11px Consolas, monospace; padding: 6px; white-space: pre-wrap; }

/* ---------- Статусная строка ---------- */
#statusbar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#ece9d8, #d4d0c8);
  border-top: 1px solid #999; padding: 4px 8px; font-size: 11px;
}
#progressWrap {
  flex: 0 0 240px; height: 14px; background: #fff; border: 1px solid #888;
  position: relative; overflow: hidden;
}
#progressBar {
  height: 100%; width: 0%; background: repeating-linear-gradient(
    -45deg, #316ac5 0 8px, #5488d6 8px 16px);
}
#stText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  font-family: Consolas, "Courier New", monospace;
}
#stRight {
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 46%;
  max-width: 46%;
  font-family: Consolas, "Courier New", monospace;
  text-align: right;
}

/* ---------- Диалоги ---------- */
dialog {
  border: 1px solid #666; box-shadow: 0 8px 30px rgba(0,0,0,.4);
  padding: 12px; min-width: 420px; max-width: 720px;
}
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h3 { margin-bottom: 8px; font-size: 13px; }
dialog textarea {
  width: 100%; font: 11px Consolas, monospace; border: 1px solid #7f9db9;
  padding: 4px; margin-top: 6px;
}
.errors { color: #b00; font-size: 11px; margin-top: 6px; white-space: pre-line; }
.dlgbtns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }

#moduleList { max-height: 340px; overflow: auto; }
#moduleList label {
  display: flex; gap: 6px; padding: 3px 4px; align-items: baseline;
  border-bottom: 1px dotted #ddd; font-weight: normal; cursor: pointer;
}
#moduleList label:hover { background: #f2f0e9; }
#moduleList .mdesc { color: #666; font-size: 11px; }
#moduleList .planned { color: #999; }

/* ---------- Вкладка DB ---------- */
#dbView { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid #999; }
.dbbar { display: flex; gap: 10px; align-items: center; padding: 6px 8px; background: #ece9d8; border-bottom: 1px solid #999; flex-wrap: wrap; }
.dbbar label { font-size: 11px; font-weight: bold; }
.dbbar input { font: 12px Tahoma; padding: 2px 4px; border: 1px solid #7f9db9; width: 170px; }
.dbbtn { font: 11px Tahoma; padding: 3px 12px; cursor: pointer; background: #ece9d8; border: 1px solid #888; }
.dbbtn.active-db { background: #316ac5; color: #fff; font-weight: bold; }
#dbScroll { flex: 1; overflow: auto; }
.dbtab { border-collapse: collapse; width: 100%; font-size: 11px; }
.dbtab th { position: sticky; top: 0; background: linear-gradient(#f8f7f4, #dcd9d0); border-bottom: 2px solid #999; padding: 3px 6px; text-align: left; }
.dbtab td { border-bottom: 1px solid #eee; border-right: 1px solid #f2f2f2; padding: 2px 6px; white-space: nowrap; }
.dbtab td.cm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.dbtab tr:hover td { background: #f4f8ff; }

/* ---------- Контекстное меню ---------- */
#ctxMenu, #dbCtxMenu {
  position: fixed; z-index: 100; background: #fff; border: 1px solid #888;
  box-shadow: 2px 2px 8px rgba(0,0,0,.3); min-width: 160px;
}
#ctxMenu div, #dbCtxMenu div { padding: 4px 12px; cursor: pointer; font-size: 12px; }
#ctxMenu div:hover, #dbCtxMenu div:hover { background: #316ac5; color: #fff; }

/* Settings dialog */
#dlgSettings .setrow { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
#dlgSettings .setrow span { min-width: 170px; }
#dlgSettings .setrow input { flex: 1; min-width: 280px; }

/* Threads + Timeout в одну строку */
.tb-inline { display: flex; gap: 8px; align-items: center; margin: 2px 0; }
.tb-inline label { display: flex; align-items: center; gap: 4px; font-size: 11px; white-space: nowrap; }

/* Threads/Timeout — в одну строку */
label.oneline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
label.oneline .num { width: 76px; }

/* Threads/Timeout — строго одной строкой */
.tb-inline { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tb-inline label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; }
.tb-inline input { width: 76px; }