/**
 * editor-base.css — HKView v5 DB Editor
 * Strukturel CSS — tema-agnostisk (farver via CSS-variabler fra tema-filen)
 * Gælder for ALLE temaer. Indeholder mobile breakpoints.
 */

/* ── Sidestruktur ── */
body        { overflow-y: auto; height: auto; min-height: 100vh; }
.page-body  { flex: 1; padding: 16px; }

/* ── Sticky top (header + toolbar) ── */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sticky-top .toolbar {
  padding: 6px 16px 6px;
  margin-bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Toolbar ── */
.toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; flex-shrink: 0; }

/* Tab-pills */
.tab-pills  { display: flex; background: var(--bg3); border-radius: 6px; padding: 2px; }
.tab-pill   { padding: 5px 14px; border: none; background: transparent; color: var(--text2); border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.tab-pill.active     { background: var(--accent); color: #fff; }
.tab-pill.fav.active { background: var(--orange); }

/* Sort */
.sort-select { padding: 5px 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 4px; font-size: 12px; }
.sort-select:focus { outline: none; border-color: var(--accent); }
.sort-dir-btn { padding: 5px 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text2); border-radius: 4px; font-size: 13px; cursor: pointer; }
.sort-dir-btn:hover { border-color: var(--accent); color: var(--text); }

/* Søgefelt */
.search-box { padding: 5px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 4px; font-size: 13px; width: 180px; }
.search-box:focus { outline: none; border-color: var(--accent); }

/* ── Stats-bar ── */
.stats-bar { display: flex; gap: 14px; align-items: center; padding: 6px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text2); margin-bottom: 10px; }
.stats-bar span { color: var(--text); font-weight: 600; }

/* ── Tabel ── */
.db-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.db-table th { text-align: left; padding: 0; background: var(--bg2); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 10; }
.db-table td { border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: middle; padding: 0; }

/* Kolonne-header inde i <th> — bruger samme grid som .host-bar */
.col-header { display: grid; grid-template-columns: 42px 122px 130px 54px 1fr 125px 148px;
              column-gap: 8px; padding: 6px 10px;
              font-size: 10px; font-weight: 700; color: var(--text2);
              text-transform: uppercase; letter-spacing: 0.6px; }
.col-header > div:last-child { text-align: right; }

/* ── Host-bar (CSS Grid — faste kolonner, perfekt lodret alignment) ── */
.host-bar         { display: grid; grid-template-columns: 42px 122px 130px 54px 1fr 125px 148px;
                    align-items: center; column-gap: 8px; padding: 5px 10px; }
.host-bar.editing { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.hb-left  { display: flex; align-items: center; gap: 6px; }
.hb-ip    { font-family: monospace; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-name  { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-ch    { color: var(--accent); font-weight: 700; font-size: 12px; white-space: nowrap; }
.hb-meta  { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text2); min-width: 0; flex-wrap: wrap; }
.hb-date  { font-size: 10px; color: var(--text2); opacity: 0.55; white-space: nowrap; font-family: monospace; text-align: right; cursor: default; }
.hb-date:hover { opacity: 1; }
.hb-acts  { justify-content: flex-end; }

/* Status-dot */
.status-dot         { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.online  { background: var(--green); box-shadow: 0 0 5px var(--green); }
.status-dot.offline { background: var(--red); }
.status-dot.unknown { background: var(--border); }
.status-dot.checking{ background: var(--orange); animation: pulse 0.8s infinite; }

/* Expand-knap */
.expand-btn       { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 10px; padding: 2px 5px; border-radius: 3px; transition: all 0.1s; line-height: 1; width: 20px; }
.expand-btn:hover { color: var(--text); background: var(--bg3); }
.expand-btn.open  { color: var(--accent); }

/* Inline edit-inputs */
.inline-input       { padding: 3px 6px; border: 1px solid var(--accent); background: var(--bg); color: var(--text); border-radius: 3px; font-size: 12px; min-width: 60px; }
.inline-input:focus { outline: none; }
.inline-select      { padding: 3px 6px; border: 1px solid var(--accent); background: var(--bg); color: var(--text); border-radius: 3px; font-size: 12px; }

/* Handlingsknapper */
.row-acts           { display: flex; gap: 2px; align-items: center; }
.act-btn            { background: none; border: none; color: var(--text2); cursor: pointer; padding: 3px 6px; border-radius: 3px; font-size: 11px; transition: all 0.12s; white-space: nowrap; line-height: 1.4; }
.act-btn:hover      { background: var(--bg3); color: var(--text); }
.act-btn.save       { color: var(--green); font-weight: 700; }
.act-btn.save:hover { background: rgba(78,204,163,0.15); }
.act-btn.del        { color: var(--red); }
.act-btn.del:hover  { background: rgba(233,69,96,0.12); }
.act-btn.restore    { color: var(--green); }
.act-btn.check      { color: var(--blue); }
.act-btn.check:hover{ background: rgba(77,166,255,0.12); }
.act-btn.shodan     { color: var(--orange); font-weight: 700; font-size: 10px; }
.act-btn.shodan:hover{ background: rgba(240,165,0,0.12); }

/* Land-badge + flag */
.cc-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--bg3); font-size: 11px; color: var(--text2); font-weight: 600; letter-spacing: 0.3px; }
.flag-img { height: 14px; width: 21px; border-radius: 2px; vertical-align: middle; margin-right: 4px; display: inline-block; object-fit: cover; flex-shrink: 0; }
.host-org { font-size: 10px; color: rgba(255,255,255,0.25); }

/* Stream-badge (Main / Sub) */
.stream-badge       { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; letter-spacing: 0.4px; text-transform: uppercase; }
.stream-badge.main  { background: rgba(77,166,255,0.18);  color: var(--blue); }
.stream-badge.sub   { background: rgba(255,255,255,0.07); color: var(--text2); }
.stream-badge.other { background: rgba(255,255,255,0.05); color: var(--border); }

/* Protokol-badge (H.264 / H.265 / CPU) */
.proto-badge      { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.2px; }
.proto-badge.h264 { background: rgba(77,166,255,0.14);  color: var(--blue); }
.proto-badge.h265 { background: rgba(78,204,163,0.14);  color: var(--green); }
.proto-badge.cpu  { background: rgba(192,96,224,0.18);  color: var(--purple); }

/* RTSP-status badge (✓ ok / ✗ failed / ? unknown) */
.rtsp-status      { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 900; flex-shrink: 0; cursor: default; }
.rtsp-status.ok   { background: rgba(78,204,163,0.18); color: var(--green); }
.rtsp-status.fail { background: rgba(233,69,96,0.18);  color: var(--red); }
.rtsp-status.unk  { background: rgba(255,255,255,0.06); color: var(--text2); }

/* ── Device sub-rækker ── */
.dev-row-tr > td { padding: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.03) !important; }
.dev-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 42px; font-size: 12px; flex-wrap: nowrap; background: rgba(0,0,0,0.22); }
.dev-ch  { color: var(--accent); font-weight: 700; font-family: monospace; min-width: 52px; flex-shrink: 0; font-size: 11px; }

/* Inline-redigerbare felter */
.dev-inline       { background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 3px; color: var(--text); font-size: 12px; padding: 2px 7px; transition: border-color 0.15s, background 0.12s; flex: 1; min-width: 70px; max-width: 200px; }
.dev-inline:hover { border-color: var(--border); background: rgba(255,255,255,0.07); }
.dev-inline:focus { outline: none; border-color: var(--accent); background: var(--bg3); }
.dev-inline.dev-cred { flex: none; }
.cred-sep { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }

.dev-fav       { cursor: pointer; font-size: 13px; color: var(--border); flex-shrink: 0; transition: color 0.12s; }
.dev-fav.on    { color: var(--orange); }
.dev-fav:hover { color: var(--orange); }
.dev-acts      { display: flex; gap: 3px; flex-shrink: 0; margin-left: auto; align-items: center; }

/* Quick-gem-knap */
.save-quick-btn       { background: rgba(78,204,163,0.12); border: 1px solid var(--green); color: var(--green); border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.12s; white-space: nowrap; flex-shrink: 0; }
.save-quick-btn:hover { background: rgba(78,204,163,0.28); }
.rtsp-btn             { color: var(--blue); font-size: 10px; font-weight: 700; }
/* Eye toggle knapper */
.dev-eye-on  { color: var(--text2); opacity: 0.6; font-size: 13px; }
.dev-eye-on:hover { opacity: 1; }
.dev-eye-off { color: var(--red); opacity: 0.8; font-size: 13px; }
.dev-eye-off:hover { opacity: 1; }
/* Deaktiveret device-række */
.dev-row-tr.dev-disabled { opacity: 0.38; }
.dev-row-tr.dev-disabled .dev-row { background: rgba(200,50,50,0.05); }
/* Deaktiveret host-række */
.host-row.host-disabled { opacity: 0.45; }
.host-row.host-disabled .host-bar { background: rgba(200,50,50,0.04); }
/* Arkiveret host-række — dæmp og grå status-dot (gammel status er ubrugelig) */
.host-row.host-archived { opacity: 0.65; }
.host-row.host-archived .status-dot { background: #555 !important; border-color: #555 !important; }
.host-row.host-archived .hb-ip::after {
  content: ' ARKIV';
  font-size: 9px;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 1px 3px;
  border-radius: 3px;
  margin-left: 5px;
  opacity: 0.7;
  vertical-align: middle;
}

/* Device fuld-edit */
.dev-edit-row       { padding: 6px 10px 6px 42px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: rgba(233,69,96,0.05) !important; }
.dev-edit-row label { font-size: 11px; color: var(--text2); }

/* Tilføj-device / noter */
.add-dev-tr > td { background: rgba(0,0,0,0.12) !important; padding: 4px 10px 4px 42px !important; }
.notes-tr   > td { background: rgba(0,0,0,0.12) !important; padding: 6px 10px 6px 42px !important; }
.notes-row   { display: flex; align-items: center; gap: 8px; }
.notes-label { font-size: 11px; color: var(--text2); flex-shrink: 0; }
.notes-input       { flex: 1; padding: 4px 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 3px; font-size: 12px; max-width: 500px; }
.notes-input:focus { outline: none; border-color: var(--accent); }
.notes-save-btn { flex-shrink: 0; font-size: 12px; padding: 3px 7px; }

/* Tilføj-host-bar */
.add-host-bar         { display: none; gap: 8px; align-items: center; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--accent); border-radius: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.add-host-bar.show    { display: flex; }
.add-host-bar label   { font-size: 12px; color: var(--text2); }
.add-host-bar input   { padding: 5px 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 4px; font-size: 13px; }
.add-host-bar input:focus { outline: none; border-color: var(--accent); }

/* Tom tilstand */
.empty-state { padding: 48px; text-align: center; color: var(--text2); font-size: 14px; }

/* ── Toast ── */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 9999; }
.toast      { padding: 10px 16px; border-radius: 6px; font-size: 13px; color: #fff; min-width: 200px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: toast-in 0.2s ease; }
.toast.ok   { background: #2a7a5c; }
.toast.err  { background: var(--red); }
.toast.info { background: #1a3a5c; color: var(--text); }

/* ── Snapshot thumbnail ── */
.snap-thumb       { width: 64px; height: 42px; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,0.35); border: 1px solid var(--border); flex-shrink: 0; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; }
.snap-thumb:hover { border-color: var(--accent); }
.snap-thumb .snap-img            { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap-thumb.no-snap .snap-img   { display: none; }
.snap-thumb .snap-none           { display: none; font-size: 18px; opacity: 0.3; pointer-events: none; }
.snap-thumb.no-snap .snap-none  { display: block; }
/* Spinner-overlay under capture — gammel billede forbliver bag overlay */
.snap-capture-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
                        display: flex; align-items: center; justify-content: center;
                        font-size: 16px; z-index: 2; animation: pulse 1s infinite; pointer-events: none; }
.snap-btn              { color: var(--text2); font-size: 13px; padding: 3px 5px; }
.snap-btn:hover        { color: var(--text); background: var(--bg3); }
.snap-btn.capturing    { color: var(--orange); animation: pulse 0.8s infinite; }

/* ── Snapshot-modal ── */
.snap-modal          { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 1000; align-items: center; justify-content: center; }
.snap-modal.show     { display: flex; }
.snap-modal-box      { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; max-width: 720px; width: 90%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.snap-modal-hdr      { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.snap-modal-hdr span { color: var(--accent); }
.snap-modal-body     { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0a0a0a; min-height: 200px; }
.snap-modal-body img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.snap-modal-ftr      { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; }
.snap-modal-info     { flex: 1; font-size: 12px; color: var(--text2); }
.snap-modal-ts       { font-size: 11px; color: var(--border); }

/* ── Log-panel ── */
.log-panel          { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 240px; background: var(--bg2); border-top: 2px solid var(--accent); z-index: 100; flex-direction: column; }
.log-panel.show     { display: flex; }
.log-panel-hdr      { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 5px 12px; border-bottom: 1px solid var(--border); background: var(--bg3); font-size: 12px; }
.log-panel-hdr span { font-weight: 600; color: var(--accent); }
.log-panel-hdr select, .log-panel-hdr input[type=number] { padding: 2px 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 3px; font-size: 11px; }
.log-content          { flex: 1; overflow-y: auto; padding: 6px 10px; font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.5; color: var(--text2); background: #0d1117; }
.log-content .log-err   { color: var(--red); }
.log-content .log-warn  { color: var(--orange); }
.log-content .log-debug { color: rgba(255,255,255,0.3); }

/* ── Indstillinger-panel ── */
.settings-panel      { display: none; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; }
.settings-panel.show { display: block; }
.settings-panel h3   { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--accent); }
.setting-row              { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.setting-row:last-child   { border-bottom: none; }
.setting-key              { min-width: 170px; color: var(--text2); font-family: monospace; }
.setting-val              { flex: 1; }
.setting-input            { padding: 4px 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 3px; font-size: 12px; width: 100%; }
.setting-input:focus      { outline: none; border-color: var(--accent); }

/* ── Tema-skifter ── */
.theme-switcher   { display: flex; gap: 4px; align-items: center; }
.theme-badge      { font-size: 11px; padding: 3px 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); cursor: pointer; transition: all 0.15s; font-weight: 500; }
.theme-badge:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.12); }
.theme-badge.active { border-color: var(--accent); color: var(--accent); background: transparent; font-weight: 700; }

/* ── Scan-kanal-resultater ── */
.scan-row-tr > td    { padding: 6px 10px 6px 58px !important; background: rgba(78,204,163,0.03) !important; }

/* Generelle tilstande */
.scan-result         { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; padding: 6px 0; }
.scan-result.scan-loading { color: var(--orange); }
.scan-result.scan-error   { color: var(--red); }
.scan-result.scan-empty   { color: var(--text2); align-items: center; }

/* Panel-layout */
.scan-panel    { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.scan-header   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.scan-title    { color: var(--green); font-weight: 600; flex-shrink: 0; }
.scan-existing { color: var(--text2); font-size: 11px; flex-shrink: 0; }
.scan-acts     { display: flex; gap: 6px; align-items: center; }
.scan-sub-btn  { font-size: 11px; padding: 2px 8px; color: var(--blue); border-color: var(--blue); }
.scan-sub-note { font-size: 11px; color: var(--blue); opacity: 0.8; }

/* Kort-grid */
.scan-cards    { display: flex; flex-wrap: wrap; gap: 8px; }

/* Enkelt kanal-kort */
.scan-ch-card  {
  display: flex; flex-direction: column; gap: 4px;
  width: 140px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
  transition: border-color 0.12s;
}
.scan-ch-card:hover { border-color: var(--green); }

.scan-card-top    { display: flex; align-items: center; justify-content: space-between; }
.scan-card-check  { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.scan-card-check input { accent-color: var(--green); }
.scan-ch-num      { font-size: 12px; font-weight: 700; color: var(--text); }
.scan-card-badges { display: flex; gap: 3px; align-items: center; }

/* Type-badges */
.scan-type-main { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px;
                  background: rgba(77,166,255,0.15); color: var(--blue); }
.scan-type-sub  { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px;
                  background: rgba(192,96,224,0.15); color: var(--purple); }

/* Auth-status badges */
.scan-ok   { color: var(--green);  font-size: 10px; font-weight: 700; }
.scan-auth { color: var(--orange); font-size: 10px; }

/* Thumbnail-område i kortet */
.scan-card-thumb   { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center;
                     background: rgba(0,0,0,0.2); border-radius: 4px; overflow: hidden; }
.scan-preview-btn  { font-size: 11px; padding: 2px 6px; border: 1px solid var(--border);
                     background: transparent; color: var(--text2); border-radius: 4px; cursor: pointer; }
.scan-preview-btn:hover { border-color: var(--accent); color: var(--text); }
.scan-prev-img     { width: 100%; height: auto; display: block; cursor: pointer; border-radius: 4px; }
.scan-prev-loading { color: var(--orange); font-size: 18px; animation: pulse 1s infinite; }
.scan-prev-err     { color: var(--red); font-size: 10px; text-align: center; padding: 4px; }

/* ── Animationer ── */
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes pulse    { 50% { opacity:0.4; } }
@keyframes spin     { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBIL  (< 768px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .page-body { padding: 8px; }

  /* Toolbar */
  .toolbar      { gap: 4px; flex-wrap: wrap; }
  .toolbar-sep  { display: none; }
  .search-box   { width: 130px; font-size: 12px; }
  .tab-pill     { padding: 4px 9px; font-size: 11px; }
  .sort-select  { font-size: 11px; padding: 4px 6px; }
  .sort-dir-btn { font-size: 11px; padding: 4px 6px; }

  /* Stats-bar */
  .stats-bar { font-size: 11px; gap: 8px; padding: 4px 8px; flex-wrap: wrap; }

  /* Host-bar: mobil — tilbagefald til flex */
  .host-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .hb-left  { width: auto; }
  .hb-ip    { font-size: 12px; overflow: visible; }
  .hb-name  { display: none; }
  .hb-meta  { flex: 1; flex-basis: 100%; order: 10; font-size: 10px; overflow: visible; }
  .hb-date  { display: none; }
  .hb-acts  { margin-left: auto; justify-content: flex-start; }

  /* Device-rækker: horisontal scroll */
  .dev-row      { overflow-x: auto; padding: 5px 8px 5px 28px; gap: 5px; -webkit-overflow-scrolling: touch; }
  .dev-inline   { min-width: 55px; }
  .snap-thumb   { width: 48px; height: 32px; }

  /* Modals */
  .snap-modal-box { width: 97%; }

  /* Log */
  .log-panel { height: 180px; }
  .log-panel-hdr { flex-wrap: wrap; gap: 4px; }

  /* Tema-skifter i header */
  .theme-badge { font-size: 9px; padding: 2px 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET  (768px – 1023px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .search-box { width: 140px; }
  .host-bar   { display: flex; flex-wrap: wrap; }
  .hb-meta    { flex: 1; flex-basis: auto; overflow: visible; }
  .hb-date    { display: none; }
}