/* Tabler navbar, adapted only for thumb reach and device safe areas. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* An opaque fixed top edge keeps scrolling content out of the PWA status area.
   The minimum strip also covers devices where the status bar is outside the viewport. */
#pwa-top-edge {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(env(safe-area-inset-top, 0px), 8px);
  background: var(--kote-page-bg, #eef3fa);
  pointer-events: none;
  z-index: 1031;
}
/* Navigation focuses the content landmark; it is not an interactive control. */
.page-wrapper > main.page-body[tabindex="-1"]:focus {
  outline: none;
}
@media (max-width: 767.98px) {
  html { touch-action: pan-x pan-y; }
  /* Keep Tabler's mobile table, grouping each key into two compact rows. */
  .table-mobile-md .key-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name status status" "connection connection actions";
    gap: 8px 12px;
    padding: 12px;
  }
  .table-mobile-md .key-row > td {
    min-width: 0;
    padding: 0 !important;
  }
  .key-row .key-name { grid-area: name; }
  .key-row .key-status { grid-area: status; align-self: center; text-align: right; }
  .table-mobile-md .key-row .key-name::before,
  .table-mobile-md .key-row .key-status::before,
  .table-mobile-md .key-row .key-connection::before { display: none; }
  .key-row .key-connection { grid-area: connection; }
  .key-row .key-connection .btn { max-width: 100%; white-space: normal; }
  .key-row .key-actions { grid-area: actions; align-self: end; }
  /* Floating key actions sit above the bottom navigation, below modals. */
  .table-mobile-md .key-row .dropdown-menu { --tblr-dropdown-zindex: 1040; }
  .table-mobile-md .key-row-without-connection {
    grid-template-areas: "name status status" "name actions actions";
  }
  .has-mobile-navigation .page-wrapper {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .has-mobile-navigation .user-navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
  }
  .has-mobile-navigation .user-navigation .navbar {
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
  }
  .has-mobile-navigation .user-navigation .container-xl {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .has-mobile-navigation .user-navigation .navbar-nav {
    width: 100%;
    padding: 4px;
    gap: 1px;
    flex-wrap: nowrap !important;
  }
  .has-mobile-navigation .user-navigation .nav-item {
    flex: 1;
    min-width: 0;
  }
  .has-mobile-navigation .user-navigation .nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: auto;
    min-height: 72px;
    padding: 8px 1px;
    font-size: 11px;
    text-align: center;
  }
  .has-mobile-navigation .user-navigation .nav-link-icon {
    display: flex;
    margin: 0;
  }
  .has-mobile-navigation .user-navigation .nav-link-title {
    width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 16px;
    font-weight: var(--tblr-font-weight-normal);
    display: block;
  }
  .has-mobile-navigation .user-navigation .nav-link[aria-current="page"] {
    color: var(--tblr-primary);
    background: var(--tblr-nav-active-bg);
  }
  .modal-content {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Regular Tabler buttons with 24px icons for desktop header actions. */
@media (min-width: 768px) {
  #header > .navbar .btn-icon {
    --tblr-btn-padding-y: 0.5625rem;
    --tblr-btn-line-height: 1.25rem;
    --tblr-btn-icon-size: 1.5rem;
  }
}