/* V17 Stage 4.5 - responsive UI. Uses effective CSS viewport, so browser zoom 125%/150% naturally triggers compact breakpoints. */
html { -webkit-text-size-adjust: 100%; }
body { padding-top: 64px; overflow-x: hidden; }
.navbar-brand { font-weight: bold; }
.table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; }
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:0; margin-bottom:15px; }
.table-responsive > .table { margin-bottom:0; }
.form-control { max-width:100%; }
textarea.form-control { resize:vertical; }
img, canvas, svg { max-width:100%; height:auto; }
.stat { padding:18px; border:1px solid #ddd; border-radius:4px; margin-bottom:15px; }
.stat b { font-size:28px; }
.page-actions { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.it-nav-toggle { display:none; float:right; margin:8px 0; padding:7px 10px; border:1px solid #777; border-radius:4px; background:transparent; color:#fff; font-size:18px; line-height:20px; }
.it-nav-toggle:focus { outline:2px solid #fff; outline-offset:2px; }
.it-nav-wrap { display:block; }
.navbar .container-fluid { padding-left:15px; padding-right:15px; }

/* Medium widths and desktop with high browser zoom: reduce navigation density. */
@media (max-width: 1350px) {
  .navbar-nav > li > a { padding-left:8px; padding-right:8px; font-size:13px; }
  .navbar-brand { font-size:16px; padding-left:8px; padding-right:10px; }
}

/* Effective viewport <= 1700 CSS px: mobile/tablet navigation. Browser zoom reduces CSS viewport,
   therefore a 1920px monitor at 150% can automatically enter this mode when appropriate. */
@media (max-width: 1700px) {
  body { padding-top:58px; }
  .it-nav-toggle { display:block; }
  .navbar-header { float:none; min-height:50px; }
  .navbar-brand { float:left; }
  .it-nav-wrap { display:none; clear:both; max-height:calc(100vh - 52px); overflow-y:auto; overflow-x:hidden; padding-bottom:10px; }
  .it-nav-wrap.open { display:block; }
  .navbar-nav, .navbar-right { float:none !important; margin:0 -15px; }
  .navbar-nav > li { float:none; }
  .navbar-nav > li > a { padding:10px 15px; font-size:14px; }
  .navbar-fixed-top { position:fixed; }
  .navbar-right { border-top:1px solid #333; }
  .container-fluid { padding-left:12px; padding-right:12px; }
  h1 { font-size:28px; } h2 { font-size:24px; } h3 { font-size:20px; }
  .form-inline .form-control { width:100%; margin-bottom:7px; }
  .form-inline .btn { margin-bottom:7px; }
  .btn-toolbar .btn, .page-actions .btn { margin-bottom:5px; }
}

@media (max-width: 767px) {
  body { padding-top:55px; font-size:14px; }
  .container, .container-fluid { width:100%; padding-left:10px; padding-right:10px; }
  .panel-body { padding:12px; }
  .panel-heading { padding:9px 12px; }
  .table-responsive { border:1px solid #ddd; }
  .table-responsive > .table { min-width:680px; }
  .table-responsive .table.table-compact-mobile { min-width:520px; }
  .form-group { margin-bottom:12px; }
  .btn { white-space:normal; }
  .btn-block-xs { display:block; width:100%; margin:6px 0; }
  .nav-tabs { white-space:nowrap; overflow-x:auto; overflow-y:hidden; display:block; }
  .nav-tabs > li { float:none; display:inline-block; }
  .modal-dialog { margin:10px; }
  .pagination { margin:10px 0; }
  .pagination > li > a, .pagination > li > span { padding:6px 9px; }
}

@media (max-width: 480px) {
  h1 { font-size:24px; } h2 { font-size:21px; } h3 { font-size:18px; }
  .stat { padding:12px; } .stat b { font-size:23px; }
  .panel-body { padding:10px; }
  .public-device-table { min-width:0 !important; }
  .public-device-table th { width:42% !important; }
  .public-device-table th, .public-device-table td { padding:7px !important; word-break:break-word; }
}

/* Applied by JS using visualViewport. This handles split windows and zoomed desktops without relying on a guessed zoom %. */
html.it-compact .container-fluid { padding-left:10px; padding-right:10px; }
html.it-compact .panel-body { padding:12px; }
html.it-compact .stat { padding:12px; }

/* V17 Stage 4.6.14 - prevent long navbar from being clipped at browser zoom 125%-200%.
   1700 CSS px intentionally switches the long desktop menu to the hamburger layout earlier.
   At 1920 physical px / 125% zoom the effective width is about 1536 CSS px, so this applies; 100% remains desktop. */
@media (max-width: 1700px) {
  .navbar { min-height:50px; }
  .navbar .container-fluid { position:relative; }
  .it-nav-toggle { display:block; }
  .navbar-header { float:none; min-height:50px; }
  .navbar-brand { float:left; }
  .it-nav-wrap {
    display:none;
    clear:both;
    max-height:calc(100vh - 52px);
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:10px;
    background:#222;
  }
  .it-nav-wrap.open { display:block; }
  .navbar-nav, .navbar-right { float:none !important; margin:0 -15px; }
  .navbar-nav > li { float:none; }
  .navbar-nav > li > a { padding:10px 15px; font-size:14px; white-space:normal; }
  .navbar-right { border-top:1px solid #444; }
}

/* V17 Stage 4.6.17 - robust navbar collapse.
   JS adds .it-nav-collapsed when viewport is <=1850 CSS px OR when the horizontal menu
   would not fit. This does not depend on browser zoom reporting exactly 125%. */
html.it-nav-collapsed body { padding-top:58px; }
html.it-nav-collapsed .navbar { min-height:50px; }
html.it-nav-collapsed .navbar .container-fluid { position:relative; }
html.it-nav-collapsed .it-nav-toggle { display:block !important; }
html.it-nav-collapsed .navbar-header { float:none !important; min-height:50px; }
html.it-nav-collapsed .navbar-brand { float:left; }
html.it-nav-collapsed .it-nav-wrap {
  display:none !important;
  clear:both;
  max-height:calc(100vh - 52px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:10px;
  background:#222;
}
html.it-nav-collapsed .it-nav-wrap.open { display:block !important; }
html.it-nav-collapsed .navbar-nav,
html.it-nav-collapsed .navbar-right { float:none !important; margin:0 -15px; }
html.it-nav-collapsed .navbar-nav > li { float:none !important; }
html.it-nav-collapsed .navbar-nav > li > a { padding:10px 15px; font-size:14px; white-space:normal; }
html.it-nav-collapsed .navbar-right { border-top:1px solid #444; }