/**
 * Platform-wide: responsive behaviour, touch targets, and clickability.
 * Ensures every page is responsive, every button/link is clickable and goes to the right place.
 * No shortcuts — professional tuning for all viewports.
 */

/* ========== Viewport & base ========== */
/* (viewport meta is in base templates; ensure no min-width locks body) */
body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* ========== Minimum touch targets (WCAG 2.5.5 — 44x44px) ========== */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  .dropdown-item,
  .breadcrumb-item a,
  .navbar-toggler,
  .page-link,
  .list-group-item-action,
  a[role="button"],
  .cp-sidebar-nav .nav-link,
  .cp-next-action,
  .cp-chip {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-link,
  .dropdown-item,
  .cp-sidebar-nav .nav-link {
    justify-content: flex-start;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .btn-sm {
    min-height: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* All viewports: ensure buttons and links are comfortably tappable/clickable */
.btn:not(.btn-sm),
.navbar-brand {
  min-height: 44px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.nav-link,
.cp-sidebar-nav .nav-link {
  padding: 0.6rem 0.75rem;
  border-radius: 0.375rem;
}
.dropdown-item {
  padding: 0.6rem 1rem;
}

/* ========== Clickability: no accidental blocks ========== */
a[href],
button:not([disabled]),
[role="button"]:not([aria-disabled="true"]),
input[type="submit"],
input[type="button"] {
  cursor: pointer;
}
a[href]:hover,
button:not([disabled]):hover {
  cursor: pointer;
}

/* Ensure clickable cards/rows use <a> or onclick; if they're links, full hit area */
.card-link,
.stretched-link {
  z-index: 1;
}

/* ========== Focus visible (keyboard & a11y) ========== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}
.control-plane-shell .btn:focus-visible,
.control-plane-shell .nav-link:focus-visible {
  outline-color: var(--platform-gold, #d4af37);
}

/* ========== Responsive containers ========== */
.container-fluid {
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}
@media (max-width: 576px) {
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ========== Navbar: always usable on small screens ========== */
.navbar-collapse {
  max-height: min(85vh, 600px);
  overflow-y: auto;
}
@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
  }
}

/* ========== Tables: horizontal scroll on small viewports ========== */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .table-responsive {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ========== Forms: full width on mobile ========== */
@media (max-width: 576px) {
  .form-control,
  .form-select,
  .btn {
    width: 100%;
  }
  .input-group .form-control,
  .input-group .btn {
    width: auto;
  }
}

/* ========== Control plane sidebar (nav + offcanvas) ========== */
.cp-sidebar-nav .nav-link {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cp-sidebar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.cp-sidebar-nav .nav-link:active {
  background-color: rgba(255, 255, 255, 0.12);
}
.offcanvas .cp-sidebar-nav .nav-link {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

/* Offcanvas close button: clear hit area */
.offcanvas-header .btn-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}