.ts-wrapper.focus .ts-control {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .ts-control {
    border: none !important;
    box-shadow: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .ts-dropdown {
    z-index: 1040 !important;
  }

  .ts-dropdown .dropdown-input {
    background: #f5f0e8 !important;
    border: 1px solid #c1c1bc !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .ts-dropdown .dropdown-input:focus {
    background: #ebe5db !important;
    border-color: #c1c1bc !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .filters-row {
    position: relative;
    z-index: 1030;
  }

  /* Shared Pagination Styling */
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .pagination-wrapper ul.pagination {
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    border: 1px solid #c8d6df !important;
    border-radius: 8px !important;
    overflow: hidden;
  }
  .pagination-wrapper ul.pagination li.page-item { margin: 0; }
  .pagination-wrapper .page-item .page-link {
    border: none !important;
    border-right: 1px solid #c8d6df !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #5a7a8a;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    box-shadow: none !important;
  }
  .pagination-wrapper .page-item:last-child .page-link { border-right: none !important; }
  .pagination-wrapper .page-item .page-link:hover { background: #e8f0f5 !important; color: #3C7CA4; }
  .pagination-wrapper .page-item.active .page-link {
    background: #3C7CA4 !important;
    color: #fff !important;
    font-weight: 600;
    border-right: 1px solid #3C7CA4 !important;
  }
  .pagination-wrapper .page-item.disabled .page-link {
    color: #b0b0b0 !important;
    background: #fff !important;
    cursor: default;
  }

  .pagination {
    margin: 0 !important;
  }
  .farmer-main-content {
    /* background: #FBFBF8; */
    max-width: 100%;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
  }

  /* Table Panel Wrapper */
  .table-panel-wrapper {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
  }

  .table-container {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    height: 100%;
  }

  /* Modal Overlay */
  .farmer-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    backdrop-filter: blur(2px);
  }

  .farmer-modal-overlay.show {
    display: block;
  }

  /* Farmer Detail Modal */
  .farmer-detail-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 100%;
    max-width: 1000px;
    max-height: 85vh;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1050;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .farmer-detail-modal.open {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .panel-header {
    background: #ffecb3;
    border-bottom: 1px solid #ffe082;
    border-radius: 20px 20px 0 0;
  }

  .panel-header h5 {
    color: #333;
    font-size: 16px;
  }

  /* Close Button */
  .btn-close-panel {
    background: #f5f5f5;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-close-panel:hover {
    background: #e0e0e0;
  }

  .btn-close-panel i {
    font-size: 14px;
    color: #666;
  }

  /* Farmer Header Info */
  .farmer-header-info {
    border-bottom: 1px solid #eee;
  }

  .farmer-main-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .fm-id-badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
  }

  /* Detail Section Card */
  .detail-section-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
  }

  .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid #e8e8e8;
  }

  .section-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .section-icon i {
    font-size: 14px;
    color: #1976d2;
  }

  .section-icon.farming-icon {
    background: #fff3e0;
  }

  .section-icon.farming-icon i {
    color: #f57c00;
  }

  .section-icon.owner-icon {
    background: #fce4ec;
  }

  .section-icon.owner-icon i {
    color: #c2185b;
  }

  .section-icon.intercrop-icon {
    background: #e8f5e9;
  }

  .section-icon.intercrop-icon i {
    color: #388e3c;
  }

  .section-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
  }

  .section-body {
    padding: 15px;
  }

  /* Field Group */
  .field-group {
    margin-bottom: 0;
  }

  .field-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
    display: block;
  }

  .field-value-box {
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    min-height: 36px;
  }

  .field-value-box.supplier-box {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
  }

  /* Tab Styling */
  .tab-item {
    color: black;
    padding: 2px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
  }

  .tab-item.active {
    border-bottom: 3px solid #2e7d32;
    color: #2e7d32;
  }

  .tab-item:hover:not(.active) {
    background: rgba(0,0,0,0.05);
    border-radius: 8px 8px 0 0;
  }

  /* Stats Row - Horizontal Scroll */
  .stats-row {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    padding-bottom: 8px;
  }

  .stats-row::-webkit-scrollbar {
    height: 6px;
  }

  .stats-row::-webkit-scrollbar-track {
    background: transparent;
  }

  .stats-row::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }

  .stats-row::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
  }

  /* Unified table header — shared across all pages */
  .cane-table-header {
    background: linear-gradient(90deg, #3C7CA4 0%, #6394B2 100%);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .cane-table-header th {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.3;
    border-bottom: none;
    background: transparent !important;
  }

  .cane-table-header th:first-child {
    border-radius: 14px 0 0 0;
  }

  .cane-table-header th:last-child {
    border-radius: 0 14px 0 0;
  }

  @media (max-width: 991.98px) {
    .cane-table-header th {
      font-size: 12px;
      padding: 8px 6px;
    }
  }

  @media (max-width: 576px) {
    .cane-table-header th {
      font-size: 11px;
      padding: 6px 4px;
    }
  }

  /* Stats Cards */
  .stat-card-farmer {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 250px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Bump stat card text sizes by 2px vs. the inline defaults
     (applies to all pages using .stat-card-farmer: plantation, farmers,
     reports). !important overrides the inline font-size on the label. */
  .stat-card-farmer small {
    font-size: 13px !important;
  }

  .stat-card-farmer h5 {
    font-size: 22px !important;
  }

  .stat-card-farmer:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }

  /* On desktop, stretch the planting tab's 6 stat cards to fill the row equally */
  @media (min-width: 992px) {
    #plantingDetailsContainer .stats-row {
      overflow-x: visible;
    }

    #plantingDetailsContainer .stats-row .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Same treatment for the reports page stat cards */
    #reportStatsRow {
      overflow-x: visible;
    }

    #reportStatsRow .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Same treatment for the farmers/IndentProcessWeb page stat rows */
    #indentingStatsRow,
    #plantingStatsRow {
      overflow-x: visible;
    }

    #indentingStatsRow .stat-card-farmer,
    #plantingStatsRow .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Same treatment for the survey page stat cards */
    #surveyStatsRow {
      overflow-x: visible;
    }

    #surveyStatsRow .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Same treatment for the group call page stat cards */
    #gcStatsRow {
      overflow-x: visible;
    }

    #gcStatsRow .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Same treatment for the user management page stat cards */
    #umStatsRow,
    #umSyncStatsRow,
    #umSyncCompStatsRow,
    #umLogsStatsRow {
      overflow-x: visible;
    }

    #umStatsRow .stat-card-farmer,
    #umSyncStatsRow .stat-card-farmer,
    #umSyncCompStatsRow .stat-card-farmer,
    #umLogsStatsRow .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Same treatment for the activities page stat cards */
    #activitiesStatsRow,
    #meetingsStatsRow {
      overflow-x: visible;
    }

    #activitiesStatsRow .stat-card-farmer,
    #meetingsStatsRow .stat-card-farmer {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    /* Plantation review tab: each card is wrapped in a link_to (<a>),
       so the <a> is the flex item that needs to stretch, and the inner
       .stat-card-farmer needs to fill its <a> parent. */
    #reviewImagesContainer .stats-row {
      overflow-x: visible;
    }

    #reviewImagesContainer .stats-row > a {
      flex: 1 1 0;
      min-width: 0;
    }

    #reviewImagesContainer .stats-row > a > .stat-card-farmer {
      max-width: none;
      width: 100%;
    }
  }

  /* Shared Confirmation Modal */
  .confirm-modal .modal-content {
    border-radius: 30px;
    border: none;
    overflow: hidden;
    font-family: 'Zoho Puvi', sans-serif;
  }
  .confirm-modal .modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    justify-content: center;
  }
  .confirm-modal .modal-header .btn-close {
    position: absolute;
    right: 24px;
  }
  .confirm-modal .modal-header h3 {
    font-family: 'Zoho Puvi', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0;
  }
  .confirm-modal .modal-body {
    padding: 24px;
    text-align: center;
  }
  .confirm-modal .modal-body h5 {
    font-family: 'Zoho Puvi', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0;
  }
  .confirm-modal .modal-footer {
    border-top: none;
    padding: 12px 24px 20px;
    justify-content: center;
    gap: 12px;
  }
  .confirm-modal .btn-confirm-action {
    border-radius: 30px;
    padding: 8px 28px;
    font-family: 'Zoho Puvi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #C62828;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .confirm-modal .btn-confirm-action:hover {
    background: #b71c1c;
    color: white;
  }
  .confirm-modal .btn-confirm-cancel {
    border-radius: 30px;
    padding: 8px 28px;
    font-family: 'Zoho Puvi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .confirm-modal .btn-confirm-cancel:hover {
    background: #43a047;
    color: white;
  }
  .confirm-modal .btn-confirm-ok {
    border-radius: 30px;
    padding: 8px 28px;
    font-family: 'Zoho Puvi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .confirm-modal .btn-confirm-ok:hover {
    background: #43a047;
    color: white;
  }

  /* Filter Styling */
  .filter-item {
    padding: 0 8px;
  }

  .filter-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #555555;
    margin-bottom: 4px;
    padding-left: 8px;
  }

  .filter-select {
    border-radius: 30px !important;
    border: 1px solid #c1c1bc;
    padding: 5px 30px 5px 20px;
    font-size: 14px;
    font-weight: 500;
    min-width: 140px;
    background: #f5f0e8;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px;
    transition: all 0.2s ease;
  }

  .filter-select:hover {
    background: #ebe5db;
  }

  .filter-select:focus {
    outline: none;
    background: #ebe5db;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }

  /* Filter Buttons */
  .filter-btn-apply {
    border-radius: 30px !important;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-btn-apply:hover {
    background: #43a047;
    color: white;
  }

  .filter-btn-apply-reports {
    border-radius: 30px !important;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-btn-apply-reports:hover {
    background: #43a047;
    color: white;
  }

  .filter-select-ryot {
    border-radius: 30px !important;
    border: 1px solid #c1c1bc;
    padding: 5px 30px 5px 20px;
    font-size: 14px;
    font-weight: 500;
    min-width: 140px;
    background: #f5f0e8;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px;
    transition: all 0.2s ease;
  }

  .filter-select-ryot:hover {
    background: #ebe5db;
  }

  .filter-select-ryot:focus {
    outline: none;
    background: #ebe5db;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }

  .filter-btn-apply-search {
    border-radius: 30px !important;
    padding: 5px 0px;
    font-size: 14px;
    font-weight: 500;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-btn-apply-search:hover {
    background: #43a047;
    color: white;
  }

  .filter-btn-clear {
    border-radius: 30px !important;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    background: #f5f0e8;
    color: #333;
    border: 1px solid #c1c1bc;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-btn-clear:hover {
    background: #ebe5db;
    color: #333;
  }

  /* Table Styling */
  #farmersTable,
  #surveyTable,
  #auditTable,
  #gcHistoryTable,
  #pndTable,
  #activitiesTable,
  #notifTable,
  #meetingsTable {
    font-size: 13px;
    width: 100%;
  }

  /* thead styling handled by shared .cane-table-header class */

  #farmersTable tbody td,
  #surveyTable tbody td,
  #auditTable tbody td,
  #gcHistoryTable tbody td,
  #pndTable tbody td,
  #activitiesTable tbody td,
  #notifTable tbody td,
  #meetingsTable tbody td {
    padding: calc(0.5rem + 2px) 20px;
    vertical-align: middle;
    font-weight: 600;
    font-size: 15px;
    color: #343434;
    background: #fff;
    border-bottom: 1px solid #c8c8c8;
  }

  .farmer-row {
    transition: all 0.2s ease;
    cursor: pointer;
  }

  #farmersTable .farmer-row:hover td,
  #surveyTable .farmer-row:hover td,
  #auditTable .farmer-row:hover td,
  #gcHistoryTable .farmer-row:hover td,
  #pndTable .farmer-row:hover td,
  #activitiesTable .farmer-row:hover td,
  #notifTable .farmer-row:hover td,
  #meetingsTable .farmer-row:hover td {
    background: #f8f9fa;
  }

  .farmer-row.selected td {
    background: #ffecb3 !important;
    border-bottom-color: #ffe082 !important;
  }



  /* Status Badges */
  .status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
  }

  .status-pending {
    background: #fff3e0;
    color: #e65100;
  }

  .status-approved {
    background: #e8f5e9;
    color: #2e7d32;
  }

  .status-rejected {
    background: #ffebee;
    color: #c62828;
  }

  .status-na {
    background: #eceff1;
    color: #546e7a;
  }

  /* Supplier Info */
  .supplier-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .supplier-name {
    font-size: 11px;
    color: #1976d2;
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 8px;
  }

  /* Badge Pills */
  .badge-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
  }

  .badge-yes {
    background: #e8f5e9;
    color: #2e7d32;
  }

  .badge-no {
    background: #eceff1;
    color: #546e7a;
  }

  .badge-tagged {
    background: #fff3e0;
    color: #e65100;
  }

  /* Empty State */
  .empty-state {
    padding: 2rem;
  }

  /* Sticky Header */
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* Table Scroll Wrapper - Better scrolling indicators */
  .table-scroll-wrapper {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
  }

  .table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  .table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }

  .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
  }

  /* Scroll shadow indicators */
  .table-container {
    position: relative;
  }

  .table-container::before,
  .table-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .table-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
  }

  .table-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
  }

  .table-container.scroll-left::before {
    opacity: 1;
  }

  .table-container.scroll-right::after {
    opacity: 1;
  }

  /* Mobile Responsive */
  @media (max-width: 991.98px) {
    .farmer-dashboard-wrapper {
      height: auto !important;
      min-height: 100vh;
    }

    .farmer-main-content {
      border-radius: 0 !important;
    }

    .stats-row {
      flex-wrap: nowrap;
      padding-bottom: 10px;
    }

    .stat-card-farmer {
      flex: 0 0 auto;
      min-width: 160px;
      max-width: 200px;
    }

    .filters-row {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 10px;
      -webkit-overflow-scrolling: touch;
    }

    .filter-select {
      min-width: 90px;
    }

    .table-responsive {
      max-height: calc(100vh - 350px) !important;
    }

    #farmersTable,
    #surveyTable,
    #auditTable,
    #pndTable,
    #activitiesTable {
      min-width: auto;
    }

    #farmersTable tbody td,
    #surveyTable tbody td,
    #auditTable tbody td,
    #pndTable tbody td,
    #activitiesTable tbody td {
      font-size: 12px;
      padding: 8px 6px;
    }
  }

  @media (max-width: 767.98px) {
    .farmer-main-content {
      padding: 8px !important;
    }

    .table-panel-wrapper {
      margin-left: 8px !important;
      margin-right: 8px !important;
    }

    .stats-row {
      padding: 8px !important;
      gap: 8px !important;
    }

    .filters-row {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    .table-container {
      border-radius: 12px !important;
    }

    #farmersTable,
    #surveyTable,
    #auditTable,
    #pndTable,
    #activitiesTable {
      min-width: auto;
    }

    #farmersTable tbody td,
    #surveyTable tbody td,
    #auditTable tbody td,
    #pndTable tbody td,
    #activitiesTable tbody td {
      font-size: 11px;
      padding: 8px 4px;
    }

    /* Mobile Modal adjustments */
    .farmer-detail-modal {
      width: 95% !important;
      max-width: 95% !important;
      max-height: 90vh !important;
      border-radius: 16px !important;
    }

    .panel-header {
      border-radius: 16px 16px 0 0 !important;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .panel-body {
      max-height: calc(90vh - 70px) !important;
      padding-bottom: 20px !important;
    }
  }

  @media (max-width: 576px) {
    .stats-row {
      gap: 8px !important;
      flex-wrap: nowrap;
    }

    .stat-card-farmer {
      flex: 0 0 auto;
      min-width: 140px;
      max-width: 180px;
      padding: 10px 12px !important;
      border-radius: 12px !important;
    }

    .stat-card-farmer h3 {
      font-size: 1rem;
    }

    .stat-icon-wrapper {
      padding: 8px !important;
      border-radius: 8px !important;
    }

    .stat-icon-wrapper i {
      font-size: 16px !important;
    }

    .stat-card-farmer small {
      font-size: 12px !important;
    }

    .tab-item {
      padding: 6px 12px;
      font-size: 13px;
    }

    .filter-select {
      font-size: 12px;
      padding: 4px 24px 4px 10px;
      min-width: 80px;
    }

    .btn-sm {
      font-size: 12px;
      padding: 4px 10px;
    }

    #farmersTable,
    #surveyTable,
    #auditTable,
    #pndTable,
    #activitiesTable {
      min-width: auto;
    }

    #farmersTable tbody td,
    #surveyTable tbody td,
    #auditTable tbody td,
    #pndTable tbody td,
    #activitiesTable tbody td {
      font-size: 10px;
      padding: 6px 3px;
    }

    /* Text truncation for small screens */
    #farmersTable tbody td,
    #surveyTable tbody td,
    #auditTable tbody td,
    #pndTable tbody td,
    #activitiesTable tbody td {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .view-btn {
      font-size: 10px;
      padding: 4px 8px;
    }

    /* Panel mobile adjustments */
    .farmer-main-name {
      font-size: 16px;
    }

    .fm-id-badge {
      font-size: 11px;
      padding: 3px 10px;
    }

    .section-header {
      padding: 10px 12px;
    }

    .section-icon {
      width: 28px;
      height: 28px;
    }

    .section-icon i {
      font-size: 12px;
    }

    .section-label {
      font-size: 12px;
    }

    .section-body {
      padding: 12px;
    }

    .field-label {
      font-size: 10px;
    }

    .field-value-box {
      font-size: 12px;
      padding: 6px 10px;
      min-height: 32px;
    }

    .detail-section-card {
      border-radius: 10px;
    }

    /* Modal field groups - 1 column on very small screens */
    .detail-section-card .row .col-6,
    .detail-section-card .row .col-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

  /* Extra small devices - card-like layout for table */
  @media (max-width: 400px) {
    #farmersTable,
    #surveyTable,
    #auditTable,
    #pndTable,
    #activitiesTable {
      min-width: auto;
    }

    #farmersTable tbody td,
    #surveyTable tbody td,
    #auditTable tbody td,
    #pndTable tbody td,
    #activitiesTable tbody td {
      font-size: 9px;
      padding: 5px 2px;
    }

    .view-btn {
      font-size: 9px;
      padding: 3px 6px;
    }
  }

  /* Show Map Button */
  .show-map-btn {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;
  }

  .show-map-btn:hover {
    background: #388e3c;
    color: white;
    border-color: #388e3c;
  }

  /* Geofence Map Card */
  #geofenceMapCard .section-header {
    padding: 10px 15px;
  }

  #geofenceMap {
    z-index: 1;
  }

  /* Review Table - same styles as farmers table */
  #reviewTable {
    font-size: 13px;
    width: 100%;
  }

  #reviewTable thead {
    background: linear-gradient(90deg, #3C7CA4 0%, #6394B2 100%) !important;
  }

  #reviewTable thead th {
    font-size: 16px;
    font-weight: 600;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    padding: 12px 8px;
    border-bottom: 2px solid #e0e0e0;
    background: transparent !important;
  }

  #reviewTable tbody td {
    padding: calc(0.5rem + 2px) 20px;
    vertical-align: middle;
    font-weight: 600;
    font-size: 15px;
    color: #343434;
    background: #fff;
    border-bottom: 1px solid #c8c8c8;
  }

  #reviewTable .farmer-row:hover td {
    background: #f8f9fa;
  }

  /* Review container flex layout */
  #reviewImagesContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
/* Users page styles */

/* Image thumbnail styles */
.image-thumbnail-container {
  position: relative;
}

.image-thumbnail-container .img-thumbnail {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-opacity:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* Card hover effect */
.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Journey list item styling */
.journey-list .card {
  transition: all 0.3s ease;
}

.journey-list .card:hover {
  transform: translateY(-2px);
}

/* Modal adjustments */
.modal-backdrop.show {
  opacity: 0.5;
}

/* Table responsive improvements */
.table-responsive {
  border-radius: 0.375rem;
}

/* Custom badge styles */
.badge {
  font-weight: 600;
}

/* Improve small text readability */
.small {
  font-size: 0.875rem;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .btn-create-ticket {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
 }
 .btn-create-ticket:hover {
  background: #43a047;
  color: #fff;
 }

 .border-theme-color{
  border-color: #fcf9f5 !important;
 }

 .bg-theme{
  background-color: #fffbf4 !important;
 }

 .bg-light-theme{
  background-color: #fdfbf8 !important;
 }

 .display-none{
  display: none !important;
 }

 .input-bg{
  background-color: #fdfaf6 !important;
 }

 .mw-content{
  width: max-content;
 }

 .btn-outline-theme {
  --bs-btn-color: #5a4625;
  --bs-btn-border-color: #5a4625;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #5a4625;
  --bs-btn-hover-border-color: #5a4625;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #5a4625;
  --bs-btn-active-bg: #5a4625;
  --bs-btn-active-border-color: #5a4625;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FEF9F2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3e2;
  --bs-gradient: none;
}


 .btn-outline-dark-theme {
  --bs-btn-color: #644933;
  --bs-btn-border-color: #644933;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #644933;
  --bs-btn-hover-border-color: #644933;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #644933;
  --bs-btn-active-bg: #FEF9F2;
  --bs-btn-active-border-color: #644933;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FEF9F2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3e2;
  --bs-gradient: none;
}


.btn-theme {
  --bs-btn-color: #ffe09b;
  --bs-btn-bg: #815634;
  --bs-btn-border-color: #815634;
  --bs-btn-hover-color: #ffeec8;
  --bs-btn-hover-bg: #643e20;
  --bs-btn-hover-border-color: #643e20;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #643e20;
  --bs-btn-active-border-color: #643e20;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f1f1f1;
  --bs-btn-disabled-bg: #fff2e7;
  --bs-btn-disabled-border-color: #fff2e7;
}

.adv-theme{
  background: linear-gradient(to right, #3C7CA4, #6394B2);
}

.theme-background{
  /* background: linear-gradient(to top, #f5e9d2, #FFFCFA); */
  background: rgba(255, 250, 239, 0.7);
/* background: linear-gradient(90deg, rgb(255, 250, 241) 0%, rgb(255, 248, 244) 100%, rgb(252, 249, 222) 100%); */
/* background-color: #FEF9F2; */

}

.adv-color{
  color: #3C7CA4 !important;
}

.light-dark-bg{
  background-color: #7b736305;
}


  .ts-dropdown {
    z-index: 1040 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(200,200,200,0.5) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    margin-top: 4px !important;
  }
  /* Bootstrap5 theme caps the option list at 200px (~5-6 rows), which hid the
     lower options on short lists like the Audits category filter. Taller cap
     shows them all; longer lists (e.g. villages) still scroll within it. */
  .ts-dropdown .ts-dropdown-content {
    max-height: 360px !important;
  }
  .ts-dropdown .dropdown-input {
    outline: none !important;
    box-shadow: none !important;
  }
  .ts-dropdown .dropdown-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(200,200,200,0.5) !important;
  }