/*
 * TAU responsive overrides
 * Keep this file after the vendor/admin stylesheet so project fixes stay
 * isolated from the template package.
 */

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas {
  max-width: 100%;
}

video {
  height: auto;
}

.main-wrapper,
.page-wrapper,
.page-wrapper .content,
.card,
.card-body,
.row > * {
  min-width: 0;
}

.select2-container,
.select2-dropdown {
  max-width: 100%;
}

.select2-container {
  width: 100% !important;
}

.form-control,
.form-select,
select.select,
.select2-selection {
  max-width: 100%;
}

.modal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.modal-dialog {
  max-width: min(96vw, var(--bs-modal-width, 500px));
}

.modal-content {
  max-height: calc(100vh - 1.5rem);
}

.modal-body {
  overflow-x: hidden;
  overflow-y: auto;
}

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

.table-responsive > .table {
  min-width: 680px;
}

.table th,
.table td {
  vertical-align: middle;
}

.table td,
.table th,
.runpod-url,
.dashboard-region-table td,
.dashboard-region-table th {
  overflow-wrap: anywhere;
}

.dataTables_wrapper {
  width: 100%;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
  float: none !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  width: 100%;
}

.dataTables_wrapper .dataTables_filter input {
  max-width: 100%;
}

.dataTables_paginate .pagination {
  flex-wrap: wrap;
  gap: 4px;
}

.runpod-url-input {
  min-width: 0 !important;
  width: min(520px, 100%);
}

.card-header,
.page-header {
  row-gap: 12px;
}

.card-header .search-set,
.card-header .dropdown,
.page-header .page-btn {
  min-width: 0;
}

.btn,
.dropdown-toggle {
  white-space: normal;
}

.copyright-footer {
  padding: 12px 16px;
}

.login-logo img {
  height: auto !important;
  max-width: min(190px, 52vw);
}

.error-box {
  max-width: min(640px, calc(100vw - 32px));
  padding-left: 16px;
  padding-right: 16px;
}

.error-img img {
  height: auto;
}

/* Mobile drawer/header */
@media (max-width: 991.98px) {
  html.menu-opened,
  html.menu-opened body {
    overflow: hidden;
  }

  .header {
    height: 65px;
  }

  .header .header-left {
    left: 60px;
    padding: 0;
    right: 60px;
    width: auto;
    z-index: 1;
  }

  .header .header-left .logo {
    align-items: center;
    display: flex;
    height: 65px;
    justify-content: center;
  }

  .header .header-left .logo img {
    height: auto;
    max-height: 46px;
    max-width: 128px;
    width: auto;
  }

  .header .mobile_btn,
  .header .mobile-user-menu {
    height: 65px;
    line-height: 65px;
  }

  .sidebar,
  .settings-sidebar {
    background: #1f4e3d !important;
    box-shadow: 18px 0 42px rgba(15, 23, 42, 0.25);
    margin-left: -100%;
    top: 65px;
    width: min(86vw, 320px) !important;
  }

  .slide-nav .sidebar {
    margin-left: 0;
  }

  .sidebar .slimScrollDiv,
  .sidebar .sidebar-inner {
    width: 100% !important;
  }

  .sidebar .sidebar-menu,
  .settings-sidebar .sidebar-menu {
    padding: 18px 14px 24px;
  }

  body.mini-sidebar .sidebar .sidebar-menu > ul > li.submenu-open ul li a,
  body.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li.submenu-open ul li a,
  .sidebar .sidebar-menu > ul > li.submenu-open ul li a,
  .settings-sidebar .sidebar-menu > ul > li.submenu-open ul li a {
    justify-content: flex-start;
    padding: 10px 12px !important;
    text-align: left;
  }

  .sidebar .sidebar-menu > ul > li.submenu-open ul li a span,
  .sidebar .sidebar-menu > ul > li.submenu-open ul li a i,
  .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr,
  .settings-sidebar .sidebar-menu > ul > li.submenu-open ul li a span,
  .settings-sidebar .sidebar-menu > ul > li.submenu-open ul li a i,
  .settings-sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
    color: #ffffff;
  }

  .sidebar .sidebar-menu > ul > li.submenu-open ul > li.active a span,
  .sidebar .sidebar-menu > ul > li.submenu-open ul > li.active a i {
    color: #fe9f43;
  }

  .sidebar .sidebar-menu > ul > li.submenu-open ul li a span,
  .settings-sidebar .sidebar-menu > ul > li.submenu-open ul li a span {
    white-space: normal;
  }

  .sidebar .sidebar-menu > ul > li svg,
  .settings-sidebar .sidebar-menu > ul > li svg {
    color: currentColor;
    flex: 0 0 auto;
  }

  .sidebar-overlay.opened {
    display: block !important;
    height: calc(100vh - 65px);
    left: 0;
    top: 65px;
    width: 100vw;
    z-index: 1040;
  }

  .page-wrapper {
    margin-left: 0 !important;
  }

  .page-wrapper .content {
    padding: 16px;
  }

  .copyright-footer {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  .page-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .page-header .add-item,
  .page-header .page-title,
  .page-header .page-btn,
  .page-header .page-btn .btn,
  .page-header .btn-added {
    width: 100%;
  }

  .page-header .page-btn {
    margin-left: 0;
  }

  .card-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .card-header .search-set,
  .card-header .search-input,
  .card-header .dropdown,
  .card-header .dropdown-toggle {
    width: 100%;
  }

  .search-set .search-input input[type=search] {
    width: 100% !important;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_paginate {
    margin: 8px 12px;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .dataTables_paginate .pagination {
    justify-content: center;
  }

  .modal-dialog {
    margin: 0.75rem auto;
    max-width: calc(100vw - 1.5rem);
  }

  .modal-content {
    max-height: calc(100vh - 1.5rem);
  }

  .form-footer,
  .modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .form-footer .btn,
  .modal-footer .btn {
    width: 100%;
  }

  .table-responsive::before {
    color: #64748b;
    content: "Swipe table sideways to see more columns";
    display: block;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 12px 0;
  }
}

@media (max-width: 575.98px) {
  .page-wrapper .content {
    padding: 12px;
  }

  .card {
    border-radius: 10px;
  }

  .card-body {
    padding: 16px;
  }

  .account-content,
  .login-wrapper {
    min-height: 100vh;
  }

  .login-wrapper .row {
    margin-left: 0;
    margin-right: 0;
  }

  .login-content .card-body {
    padding: 1.25rem !important;
  }

  .tau-login-agreement {
    font-size: 13px;
  }
}

/* Optional mobile card-table mode for extremely wide data tables. */
@media (max-width: 767.98px) {
  .tau-mobile-card-table.table-responsive::before {
    content: none;
  }

  .tau-mobile-card-table > .table {
    min-width: 0;
  }

  .tau-mobile-card-table table,
  .tau-mobile-card-table thead,
  .tau-mobile-card-table tbody,
  .tau-mobile-card-table tr,
  .tau-mobile-card-table th,
  .tau-mobile-card-table td {
    display: block;
    width: 100%;
  }

  .tau-mobile-card-table thead {
    display: none;
  }

  .tau-mobile-card-table tbody tr {
    background: #ffffff;
    border: 1px solid #e6eaed;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    margin: 0 12px 12px;
    overflow: hidden;
  }

  .tau-mobile-card-table tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f5;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    padding: 10px 12px;
    text-align: left !important;
    white-space: normal;
    word-break: break-word;
  }

  .tau-mobile-card-table tbody td:last-child {
    border-bottom: 0;
  }

  .tau-mobile-card-table tbody td::before {
    color: #64748b;
    content: attr(data-label);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

/* Dashboard overview */
@media (max-width: 767.98px) {
  .dashboard-modern .content {
    padding: 14px !important;
  }

  .dashboard-heading {
    align-items: stretch;
  }

  .dashboard-period-badge {
    justify-content: center;
    white-space: normal;
    width: 100%;
  }

  .dashboard-chart-filters {
    grid-template-columns: 1fr !important;
  }

  .dashboard-chart-canvas {
    min-height: 240px !important;
  }

  .dashboard-map-body {
    height: auto !important;
  }

  .dashboard-map-visual,
  .dashboard-map {
    height: min(520px, 72vh) !important;
    min-height: 360px !important;
  }

  .dashboard-map-stats {
    grid-template-columns: 1fr !important;
  }

  .dashboard-map-label {
    width: 110px;
  }

  .dashboard-map-legend {
    max-width: calc(100vw - 56px);
    width: 210px !important;
  }
}

/* Fruit dashboard */
@media (max-width: 767.98px) {
  .dashboard-metrics {
    gap: 0.85rem;
  }

  .dashboard-filter-toolbar > [class*="col-"] {
    margin-bottom: 0.75rem;
  }

  .dashboard-filter-action {
    min-height: 48px;
  }

  .density-pie-frame {
    height: 320px !important;
    min-height: 320px !important;
  }

  .heatmap-map-frame {
    height: min(380px, 62vh) !important;
  }

  .map-preview-video-modal .modal-dialog {
    max-width: calc(100vw - 1rem);
  }
}

@media (max-width: 575.98px) {
  .metric-panel-header,
  .tau-scan-topbar,
  .heatmap-header {
    align-items: stretch !important;
  }

  .metric-card h4,
  .dashboard-stat-value {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
  }

  .heatmap-map-frame {
    height: 320px !important;
  }
}

/* Winter bud dashboard */
.winter-bud-native [style*="flex-wrap:nowrap"][style*="overflow-x:auto"] {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  overflow-x: visible !important;
}

.winter-bud-native [style*="flex-wrap:nowrap"][style*="overflow-x:auto"] > * {
  height: auto !important;
  min-height: 108px;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  .winter-bud-native .tau-map-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .winter-bud-native .tau-map-grid > .tau-map-card,
  .winter-bud-native .tau-side-chart-card {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767.98px) {
  .winter-bud-native {
    overflow-x: hidden;
  }

  .winter-bud-native .rsp-pad {
    padding: 12px !important;
  }

  .winter-bud-native .rsp-filter {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .winter-bud-native .rsp-fcol,
  .winter-bud-native .rsp-fact {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }

  .winter-bud-native .rsp-grid3,
  .winter-bud-native .rsp-grid4,
  .winter-bud-native .tau-chart-grid {
    grid-template-columns: 1fr !important;
  }

  .winter-bud-native .tau-section-header,
  .winter-bud-native .tau-chart-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .winter-bud-native .tau-title-row {
    align-items: flex-start;
  }

  .winter-bud-native .tau-section-copy {
    margin-left: 0;
  }

  .winter-bud-native .tau-map-section {
    border-radius: 16px;
    margin: 12px 0 18px;
  }

  .winter-bud-native .tau-map-grid {
    gap: 12px;
    padding: 12px !important;
  }

  .winter-bud-native .tau-map-shell .rsp-maph {
    height: min(430px, 68vh) !important;
    min-height: 320px !important;
  }

  .winter-bud-native .tau-map-hover-card {
    bottom: 10px;
    left: 10px;
    max-height: min(70%, 420px);
    right: 10px;
    top: auto;
    width: auto;
  }

  .winter-bud-native .tau-popup-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .winter-bud-native .tau-chart-visual {
    height: 240px;
  }

  .winter-bud-native .tau-side-chart-card .tau-chart-visual {
    min-height: 260px;
  }

  .winter-bud-native select,
  .winter-bud-native input,
  .winter-bud-native button {
    font-size: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .winter-bud-native [style*="flex-wrap:nowrap"][style*="overflow-x:auto"] {
    grid-template-columns: 1fr;
  }

  .winter-bud-native .tau-map-shell .rsp-maph {
    height: 360px !important;
    min-height: 300px !important;
  }

  .winter-bud-native .tau-map-legend {
    max-width: calc(100% - 24px);
  }
}