/* Nightwatch readability and responsive refinements. */
main { width: 100%; max-width: none; padding: clamp(18px, 2vw, 34px); }
.overline { font-size: 11px; }
.brand small { font-size: 9px; }
nav button { font-size: 10px; }
.quick { font-size: 11px; }
.quick kbd, .pulse b, .pulse small { font-size: 9px; }
#logout { font-size: 11px; }
.metrics span, .role h3, .legend, th, .status { font-size: 10px; }
.metrics small, .panelhead small, .event small, .hostcard .address,
.rolepill, .servicetag, .cardfoot, .availrow label, .availrow b { font-size: 11px; }
.node { font-size: 11px; padding: 8px 10px; }
.event time { font-size: 10px; }
.hostcard p { font-size: 12px; line-height: 1.45; height: auto; min-height: 35px; }
.filters button { font-size: 10px; }
.tablepanel table { font-size: 12px; }
.dot { width: 7px; height: 7px; flex: 0 0 auto; }

@media (max-width: 1100px) {
  nav button { padding-inline: 8px; }
  .toptools { gap: 6px; }
  .hostgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; }
  body { overflow-x: hidden; }
  .sidebar { position: sticky; top: 0; padding: 10px 12px max(7px, env(safe-area-inset-bottom)); gap: 8px; align-items: center; }
  .brand { height: 34px; }
  .toptools { align-self: center; }
  nav { height: 43px; gap: 0; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  nav::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  nav button { min-height: 43px; padding: 0 13px; font-size: 10px; }
  nav button.active:after { left: 13px; right: 13px; }
  main { padding: 18px max(12px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  main > header { gap: 12px; margin-bottom: 18px; }
  header h1 { font-size: clamp(23px, 7vw, 29px); }
  header .actions { flex-shrink: 0; }
  .actions button { min-height: 42px; padding: 9px 12px; }
  .metrics { gap: 9px; }
  .metrics article, .panel, .hostcard { padding: 16px; }
  .metrics strong { font-size: 29px; margin-top: 10px; }
  .panelhead { align-items: flex-start; gap: 10px; }
  .panelhead > input { width: min(100%, 260px); }
  .legend { display: none; }
  .toolbar input { width: 100%; font-size: 16px; }
  .filters { width: 100%; padding-bottom: 3px; scrollbar-width: none; }
  .filters button { min-height: 40px; white-space: nowrap; padding-inline: 12px; }
  .hostgrid { grid-template-columns: 1fr; }
  .hostcard { min-width: 0; }
  .servicetag { padding: 6px 8px; }
  .cardactions { flex-wrap: wrap; }
  .infraaction, .configure { min-height: 40px; }
  .tablepanel { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablepanel .panelhead { position: sticky; left: 0; padding: 16px; margin: 0; min-width: min(100%, 680px); }
  .tablepanel table { min-width: 760px; }
  th, td { padding: 12px 10px; }
  .availrow { grid-template-columns: minmax(78px, 110px) minmax(100px, 1fr) 38px; gap: 7px; }
  .cells { overflow: hidden; }
  .watch { overflow: hidden; }
  .timeline { max-width: none; }
  .timeline .event { grid-template-columns: 9px minmax(0, 1fr); gap: 10px; }
  .timeline .event time { grid-column: 2; margin-top: 3px; }
  .eventfilters { width: 100%; flex-wrap: wrap; }
  .eventfilters select { min-height: 40px; font-size: 12px; flex: 1; }
  .overlay { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .palette { width: calc(100% - 20px); margin: 12px auto auto; max-height: calc(100dvh - 24px); overflow: auto; }
  .palette > input { position: sticky; top: 0; z-index: 1; font-size: 16px; }
  .paletteitem { min-height: 52px; }
  .palette footer { display: none; }
  .drawer { width: 100%; height: 100dvh; padding: 28px 16px calc(24px + env(safe-area-inset-bottom)); }
  .close { width: 44px; height: 44px; right: 8px; top: 8px; }
  .detailtitle { margin-right: 38px; gap: 12px; flex-direction: column; }
  .detailstatus { width: max-content; }
  .detailservice { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .confirmbox { max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; }
  .confirmbox input, .editform input, .editform textarea { font-size: 16px; }
  .confirmbuttons button { min-height: 44px; }
  #toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); text-align: center; }
}

@media (max-width: 420px) {
  .actions #refresh { font-size: 0; }
  .actions #refresh:first-letter { font-size: 18px; }
  .metrics { grid-template-columns: 1fr; }
  .panelhead { flex-direction: column; }
  .panelhead > input { width: 100%; font-size: 16px; }
  .issuehead { gap: 8px; flex-direction: column; }
  .issuecard { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .detailmetrics { grid-template-columns: 1fr 1fr; }
  .confirmbuttons { flex-direction: column-reverse; }
  .confirmbuttons button { width: 100%; }
}

@media (hover: none) {
  button, .entity, .servicetag { -webkit-tap-highlight-color: transparent; }
  .node, .paletteitem, .infraaction, .configure { min-height: 40px; }
}