/* ===== MOBILE FRIENDLY ENHANCEMENTS ===== */
    @media (max-width: 820px) {

      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .main {
        min-width: 0;
        padding-bottom: 76px;
      }

      .card {
        padding: 12px !important;
        border-radius: 12px;
      }

      .card-head {
        flex-wrap: wrap;
        gap: 8px;
      }

      .card-head h3 {
        font-size: 15px;
      }

      .card-head small {
        font-size: 11px;
      }

      .grid,
      .grid-2,
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr !important;
      }

      .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .table-wrap table {
        min-width: 640px;
      }

      table {
        font-size: 12px;
      }

      th,
      td {
        white-space: nowrap;
      }

      .toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }

      .toolbar input,
      .toolbar select,
      .toolbar button {
        flex: 1 1 auto;
        min-width: 0;
      }

      input,
      select,
      textarea {
        font-size: 16px !important;
        max-width: 100%;
      }

      .btn {
        padding: 8px 12px;
        font-size: 12px;
      }

      .modal-card,
      .modal .card {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 88vh;
        overflow-y: auto;
      }

      .inbox-layout,
      .gc-layout {
        grid-template-columns: 1fr !important;
      }

      .gc-list-card,
      .gc-pin-card {
        max-height: none;
      }

      .stage-col {
        min-width: 82vw;
      }

      .field {
        width: 100%;
      }

      .row {
        flex-wrap: wrap;
      }
    }

    @media (max-width: 640px) {
      .btn {
        padding: 7px 10px;
        font-size: 11px;
      }

      .tms-cal-item {
        font-size: 10px;
      }

      .card-head h3 {
        font-size: 14px;
      }
    }