/**
 * BK DevOps accessibility and mobile layout helpers.
 * Loaded after bk-brand.css. Does not replace Vuexy core styles.
 */

:root {
  --bk-a11y-focus: var(--bk-teal-dark, #142c2c);
  --bk-a11y-focus-ring: var(--bk-orange, #f15019);
  --bk-a11y-muted: #3d4a57;
  --bk-a11y-link: #b3360e;
  --bk-a11y-link-hover: #8f2a0b;
  --bk-a11y-success-text: var(--bk-green-dark, #009739);
  --bk-tap: 44px;
}

/* Skip link: visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 1080;
  padding: 0.55rem 0.9rem;
  background: var(--bk-teal-dark, #142c2c);
  color: #fff;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  outline: 3px solid var(--bk-gold, #ffab49);
  outline-offset: 2px;
}

/* Allow pinch-zoom and readable body text */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Contrast: muted text on light surfaces */
.text-muted,
small.text-muted,
.footer,
.content-footer,
.menu-header-text,
.form-text,
.card-header small {
  color: var(--bk-a11y-muted) !important;
}

a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):not(.page-link):not(.skip-link) {
  color: var(--bk-a11y-link);
}

a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):not(.page-link):not(.skip-link):hover {
  color: var(--bk-a11y-link-hover);
}

.bg-label-success,
.badge.bg-label-success {
  color: var(--bk-a11y-success-text) !important;
}

.bg-label-primary,
.badge.bg-label-primary {
  color: var(--bk-orange-text, #c2410c) !important;
}

.bg-label-warning,
.badge.bg-label-warning {
  color: var(--bk-gold-text, #d97800) !important;
}

.bg-label-info,
.badge.bg-label-info {
  color: #163838 !important;
}

/* Keyboard focus rings */
:focus-visible {
  outline: 3px solid var(--bk-a11y-focus-ring);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.menu-link:focus-visible,
.layout-menu-toggle:focus-visible {
  outline: 3px solid var(--bk-a11y-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(241, 80, 25, 0.35), var(--bk-accent-glow, 0 4px 18px rgba(241, 80, 25, 0.25));
}

.menu-link:focus-visible,
.nav-link:focus-visible {
  background-color: rgba(241, 80, 25, 0.08);
}

/* Icon-only hamburger / close controls remain usable.
   Vuexy also puts .layout-menu-toggle on the full-page dimmer
   (.layout-overlay.layout-menu-toggle). Do not force display on that
   overlay — it must stay display:none unless .layout-menu-expanded. */
.layout-menu-toggle:not(.layout-overlay),
.layout-menu-toggle:not(.layout-overlay) .nav-link,
.navbar .layout-menu-toggle a {
  min-width: var(--bk-tap);
  min-height: var(--bk-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Restore Vuexy overlay: hidden when the mobile sidebar is closed. */
.layout-overlay {
  display: none;
}

.layout-menu-expanded .layout-overlay {
  display: block;
}

/* Tables: keep a scroll affordance and wrapping cells on narrow phones */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 375px) {
  .layout-navbar {
    flex-wrap: wrap;
    min-height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .layout-navbar .navbar-nav-right {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .layout-navbar .btn-sm {
    min-height: var(--bk-tap);
    padding-inline: 0.75rem;
  }

  .card-header,
  .card-header.d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  .card-header .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap;
    width: 100%;
  }

  .card-header .btn,
  .container-xxl > .d-flex .btn {
    min-height: var(--bk-tap);
  }

  .table-responsive {
    overflow-x: auto;
    border: 1px solid rgba(19, 43, 43, 0.12);
    border-radius: 0.375rem;
  }

  .table-responsive::after {
    content: "Swipe sideways to see more columns";
    display: block;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    color: var(--bk-a11y-muted);
    background: #f4f5f7;
    border-top: 1px solid rgba(19, 43, 43, 0.08);
  }

  .table.table-hover th,
  .table.table-hover td {
    white-space: nowrap;
    padding: 0.65rem 0.7rem;
  }

  .menu-vertical .menu-link {
    min-height: var(--bk-tap);
  }

  .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
  }
}

@media (max-width: 575.98px) {
  .layout-page .container-xxl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}