/**
 * mtk-nav.css — единые стили шапки + sub-tabs для всех страниц mtkradar.
 * Подключается через <link rel="stylesheet" href="mtk-nav.css?v=N">.
 *
 * Цвета — жёсткие hex (без CSS-переменных), чтобы не зависеть от
 * страничных --text2/--text3 (например в prequal-builder.html они темнее).
 */

.header {
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e2e0da);
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-logo { height: 32px; flex-shrink: 0; }
.header-extras { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.save-badge {
  font-size: 11px; font-family: var(--mono, 'JetBrains Mono', monospace);
  line-height: normal;
  padding: 4px 10px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 5px;
}
.save-ok { background: rgba(45,122,75,0.12); color: #2d7a4b; }
.save-pending { background: #fef3c7; color: #92400e; }
.user-badge {
  font-size: 11px; font-family: var(--mono, 'JetBrains Mono', monospace);
  line-height: normal;
  padding: 4px 10px; border-radius: 20px;
  background: #f2f1ee;
  color: #6b6862;
  border: 1px solid #e2e0da;
}

.mtk-nav-burger {
  display: none;
  background: none; border: 1px solid var(--border, #e2e0da); border-radius: 6px;
  font-size: 16px; padding: 4px 9px; line-height: 1;
  cursor: pointer; color: var(--text, #1a1917);
  margin-left: 12px;
}
.mtk-nav-burger:hover { background: var(--surface2, #f2f1ee); }

.mtk-nav-tabs { display: flex; gap: 4px; margin-left: 18px; align-items: center; flex-wrap: wrap; }
.mtk-nav-tab {
  font-family: inherit; font-size: 13px; font-weight: 500;
  line-height: 1.4;
  padding: 7px 14px; border-radius: 8px;
  color: #6b6862;
  text-decoration: none; cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.mtk-nav-tab:hover { background: #f2f1ee; color: #1a1917; text-decoration: none; }
.mtk-nav-tab.active {
  background: transparent; color: #1a1917; font-weight: 700;
  cursor: default; pointer-events: none;
}
.mtk-nav-tab.future {
  color: #9e9b96; cursor: default;
  font-style: italic; opacity: 0.6;
}
.mtk-nav-tab.future:hover { background: transparent; color: #9e9b96; }

.mtk-nav-subtabs {
  background: var(--bg, #faf9f7);
  border-bottom: 1px solid var(--border, #e2e0da);
  padding: 4px 22px;
  display: flex; gap: 2px; align-items: center; flex-wrap: wrap;
}
.mtk-nav-subtab {
  font-family: inherit; font-size: 12px; font-weight: 400;
  line-height: normal;
  padding: 4px 10px; border-radius: 5px;
  color: #9e9b96;
  background: transparent; border: none;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.12s;
  white-space: nowrap;
}
.mtk-nav-subtab:hover { color: #6b6862; text-decoration: none; }
.mtk-nav-subtab.active {
  color: #1a1917; font-weight: 600;
  cursor: default; pointer-events: none;
}

@media (max-width: 768px) {
  .header { padding: 12px 16px; gap: 10px; }
  .header-logo { height: 26px; }
  .save-badge { padding: 4px 8px; font-size: 10px; }
  .user-badge { padding: 4px 8px; font-size: 10px; }
  .header-extras { gap: 6px; }
  .mtk-nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  .mtk-nav-tabs {
    display: none;
    position: absolute; top: calc(100% + 4px); left: 8px; right: 8px;
    margin-left: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e0da); border-radius: 10px;
    padding: 6px;
    flex-direction: column; align-items: stretch; gap: 2px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    z-index: 90;
  }
  .mtk-nav-tabs.mtk-nav-open { display: flex; }
  .mtk-nav-tab { width: 100%; padding: 10px 12px; font-size: 14px; }
  .mtk-nav-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 12px;
  }
  .mtk-nav-subtabs::-webkit-scrollbar { display: none; }
  .mtk-nav-subtab { flex-shrink: 0; }
}