.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;
  }
  /* These filters are pinned to 150px, and some selected values are far wider
     than that — FM names run to "Rohit Kumar Fm" and longer. By default the
     control grows to fit its item, so picking a long name wrapped it onto a
     second line and pushed the whole filter row taller, shifting every control
     beside it. Hold the control to one line and let the value scroll sideways
     within it instead.

     Scoped to the Overview tab's own six selects by TomSelect's generated
     "<select id>-ts-control" id (the dropdown_input plugin points focus_node at
     .ts-control, so the id lands there). plantation.css is bundled by
     require_tree into application.css and so loads on every page; a bare
     .ts-wrapper rule would restyle the single-selects on all ~24 TomSelect
     screens. */
  #ovUnitFilter-ts-control,
  #ovRegionFilter-ts-control,
  #ovZoneFilter-ts-control,
  #ovCircleFilter-ts-control,
  #ovVillageFilter-ts-control,
  #ovFmFilter-ts-control {
    display: block !important;           /* not flex: a flex item cannot overflow-scroll */
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;               /* Firefox: no visible bar in a 32px pill */
  }
  #ovUnitFilter-ts-control::-webkit-scrollbar,
  #ovRegionFilter-ts-control::-webkit-scrollbar,
  #ovZoneFilter-ts-control::-webkit-scrollbar,
  #ovCircleFilter-ts-control::-webkit-scrollbar,
  #ovVillageFilter-ts-control::-webkit-scrollbar,
  #ovFmFilter-ts-control::-webkit-scrollbar {
    display: none;                       /* WebKit/Blink: same */
  }
  /* display:block drops the theme's align-items:center, so restore the vertical
     centring via line-height. The item must be inline-block to exceed the
     control and scroll; as a block child it would be squeezed and wrap instead.
     The caret is a background-image fixed at "right .75rem" on the control, so
     it stays put while the text scrolls beneath it, and the theme keeps its
     lane reserved through --ts-pr-caret. */
  #ovUnitFilter-ts-control > .item,
  #ovRegionFilter-ts-control > .item,
  #ovZoneFilter-ts-control > .item,
  #ovCircleFilter-ts-control > .item,
  #ovVillageFilter-ts-control > .item,
  #ovFmFilter-ts-control > .item {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    vertical-align: middle !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;
    }

    /* Same treatment for the P&D page stat cards */
    #pndStatsRow {
      overflow-x: visible;
    }

    #pndStatsRow .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 4px;
  }

  .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;
  }