/* QUICKPORT CRM RESPONSIVE CSS v3 - Mobile + Tablet fixes */

/* ===== MOBILE ≤768px ===== */
@media (max-width: 768px) {

  /* Header compact */
  header {
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
  }

  /* Logo proportional */
  .header-logo-main {
    height: 36px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
  }
  .header-left { flex-shrink: 0; }

  /* Nav - compact single-line pill bar below logo */
  .nav-menu {
    width: 100% !important;
    order: 3 !important;
    gap: 3px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding: 4px 0 2px 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-menu::-webkit-scrollbar { display: none; }
  .nav-menu a {
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    line-height: 1.3 !important;
    min-height: unset !important;
    height: auto !important;
  }
  .nav-menu a:hover, .nav-menu a.active {
    background: rgba(255,255,255,0.2);
  }

  /* Form inputs full width */
  .form-group input[type="text"],.form-group input[type="email"],
  .form-group input[type="tel"],.form-group input[type="number"],
  .form-group input[type="date"],.form-group input[type="password"],
  .form-group select,.form-group textarea,
  .form-control,input.form-control,select.form-control,textarea.form-control {
    width: 100% !important;max-width: 100% !important;
    box-sizing: border-box;padding: 10px 12px !important;font-size: 16px !important;
  }
  input,select,textarea { font-size: 16px !important; }

  /* Buttons touch-friendly but not oversized */
  .btn,button,[role="button"],a.btn {
    min-height: 40px;padding: 10px 14px !important;
  }

  /* Grid columns stack */
  .col-md-3,.col-md-4,.col-md-6,.col-lg-3,.col-lg-4,.col-lg-6 {
    flex: 0 0 100% !important;max-width: 100% !important;
  }
  [class*="col-"] { padding-left: 8px;padding-right: 8px;margin-bottom: 12px; }

  /* Cards */
  .card,.dashboard-card { margin-bottom: 12px;border-radius: 10px; }
  .card-body { padding: 12px;word-break: break-word;overflow-wrap: break-word; }

  /* Modals fit screen */
  .modal-dialog { margin: 8px !important;width: calc(100% - 16px) !important;max-width: calc(100% - 16px) !important; }
  .modal-body { padding: 14px 12px;max-height: calc(100vh - 160px);overflow-y: auto; }

  /* Tables scroll */
  .table-responsive,.table-wrapper,table { display: block;width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch; }
  .table { font-size: 13px; }
  .table td,.table th { padding: 8px 6px;white-space: nowrap; }

  /* Typography */
  h1,.h1 { font-size: 22px !important; }
  h2,.h2 { font-size: 19px !important; }
  h3,.h3 { font-size: 17px !important; }
  h4,.h4 { font-size: 15px !important; }

  /* Container */
  .container,.container-fluid,.container-lg { padding-left: 12px !important;padding-right: 12px !important; }
  .form-group { margin-bottom: 16px; }
  main { margin: 15px auto !important;padding: 0 12px !important; }
  .alert { padding: 12px 10px;font-size: 14px; }
}

/* ===== VERY SMALL PHONES ≤480px ===== */
@media (max-width: 480px) {
  .header-logo-main { height: 30px !important;max-width: 120px !important; }
  .nav-menu a { font-size: 10px !important;padding: 3px 6px !important; }
  h1,.h1 { font-size: 20px !important; }
  .btn,button { font-size: 14px; }
  .modal-dialog { margin: 4px !important;width: calc(100% - 8px) !important; }
  .card-body { padding: 10px 8px; }
}

/* ===== TABLET 769-1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* FIX: Logo - proper size, not squeezed */
  header {
    padding: 8px 16px !important;
    gap: 12px;
  }
  .header-logo-main {
    height: 50px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
  }

  /* FIX: Nav tabs - fit all visible without cutoff */
  .nav-menu {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-menu::-webkit-scrollbar { display: none; }
  .nav-menu a {
    font-size: 13px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Two-column grid */
  .form-control,input.form-control,select.form-control { width: 100% !important; }
  .col-md-3,.col-lg-3 { flex: 0 0 50% !important;max-width: 50% !important; }
  .col-md-4,.col-lg-4 { flex: 0 0 50% !important;max-width: 50% !important; }
  .modal-dialog { max-width: 85% !important; }

  /* Better main spacing */
  main { margin: 20px auto !important; padding: 0 16px !important; }
}

/* ===== LARGE TABLET / SMALL LAPTOP 1025-1280px ===== */
@media (min-width: 1025px) and (max-width: 1280px) {
  .header-logo-main {
    height: 70px !important;
    width: auto !important;
    max-width: 250px !important;
    object-fit: contain !important;
  }
  .nav-menu { gap: 12px !important; }
  .nav-menu a { font-size: 14px !important; }
}

/* ===== GENERAL ===== */
:focus-visible { outline: 2px solid #4f46e5;outline-offset: 2px; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; }
}
html { scroll-behavior: smooth; }
.card-body a,.card-body span,.card-body p { word-break: break-all;overflow-wrap: break-word; }