/*
  Utilities and responsive tweaks
  - Mobile-first adjustments
  - Tablet/Desktop breakpoints
  - Small helpers to stack inline forms and button groups
*/

/* Base helpers */
.stack-sm {
  display: flex;
  gap: .5rem;
}
.btn-group-responsive > * { margin: .25rem; }
.text-truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Sticky helper for navs under the top navbar */
.sticky-nav {
  position: sticky;
  top: 60px; /* approx navbar height */
  z-index: 1020; /* above content */
}

/* Make tables a bit tighter on narrow devices */
.table-sm-text { font-size: .95rem; }

/* Inline form that stacks on small screens */
.form-inline-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.form-inline-responsive .form-control,
.form-inline-responsive .form-select {
  min-width: 140px;
}

/* Mobile (xs, <576px) */
@media (max-width: 575.98px) {
  h1, h2, h3 { font-size: 1.25rem; }
  .card { margin-bottom: 1rem; }
  table { font-size: 0.92rem; }
  .navbar-brand { font-size: 1rem; }
  footer p { font-size: 0.85rem; }

  /* Stack helpers */
  .stack-sm { flex-direction: column; }
  .stack-sm > * { width: 100% !important; }

  /* Inline form: full width fields on mobile */
  .form-inline-responsive .form-control,
  .form-inline-responsive .form-select,
  .form-inline-responsive .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Tighter paddings */
  .px-mobile-2 { padding-left: .5rem !important; padding-right: .5rem !important; }

  /* Portfolio: icon-only actions on xs */
  .actions-row .btn { padding: .25rem .5rem; }
  .actions-row .btn i { margin-right: 0 !important; }
  .portfolio-table th, .portfolio-table td { white-space: nowrap; vertical-align: middle; }
  .portfolio-table { font-size: 0.9rem; }
}

/* Tablet (md, >=768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .table-sm-text { font-size: .98rem; }
  .actions-row .btn { padding: .25rem .6rem; }
}

/* Desktop container max width for wide screens */
@media (min-width: 1200px) {
  .container-fluid { max-width: 1140px; }
}

/* Optional: improve VS layout in matches on very small screens */
@media (max-width: 400px) {
  .vs-label { display: inline-block; margin: 0 .25rem; }
}