/* =========================================================
   01. ROOT VARIABLES
========================================================= */
:root {
    --topbar-height: 110px;
    --footer-height: 56px;
    --app-shell-height: calc(100vh - var(--topbar-height) - var(--footer-height));
    --tam-maroon: #500000;
    --tam-maroon-light: #884545;
    --tam-maroon-dark: #3b0000;
    --tam-gold: #C99700;
    --tam-cream: #F7F4F1;
    --tam-light-bg: #F4F1EE;
    --tam-panel-bg: #FFFFFF;
    --tam-soft-gray: #E7E1DC;
    --tam-border: #D1C7C0;
    --tam-text: #2F2A28;
    --tam-muted-text: #6B625D;
    --tam-hover: #E8DFD9;
    --tam-sidebar: #EAE4DE;
    --tam-tab-inactive: #D8D0CA;
    --tam-tab-hover: #CFC3BB;
    --tam-success: #6C8A6E;
    --tam-danger: #A24848;
    --tam-white: #FFFFFF;
}

/* =========================================================
   02. GLOBAL / BASE
========================================================= */
html,
body {
    height: 100%;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--tam-cream);
    color: var(--tam-text);
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1;
}

.hidden {
    display: none !important;
}

/* =========================================================
   03. HEADER / TOPBAR
========================================================= */
.custom-topbar {
    background-color: #6b0000;
    min-height: 110px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 160px;
    align-items: center;
    column-gap: 20px;
    border-bottom: 6px solid #e5e5e5;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.header-left {
    justify-content: flex-start;
}

.header-center {
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.header-right {
    justify-content: flex-end;
}

.header-title {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =========================================================
   04. AGRILIFE BRANDING
========================================================= */
.agrilife-brand {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.agrilife-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    margin-top: 10px;
}

.navbar-logo {
    height: 65px;
    width: auto;
    display: block;
}

.agrilife-subtext {
    font-size: 18px;
    color: white;
    margin-top: 4px;
    margin-bottom: 10px;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    white-space: nowrap;
}

/* =========================================================
   05. HEADER AUTH / USER INFO
========================================================= */
.auth-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

.btn-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: all 0.25s ease;
    border: 1px solid #ffffff;
    box-sizing: border-box;
}

.btn-login {
    background: transparent;
    color: #ffffff;
}

.btn-login:hover {
    background: #ffffff;
    color: var(--tam-maroon);
    text-decoration: none;
}

.btn-signup {
    background: #ffffff;
    color: var(--tam-maroon);
}

.btn-signup:hover {
    background: #f3ecec;
    color: var(--tam-maroon);
    text-decoration: none;
}

.header-auth-links,
.user-info,
.user-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-auth-links,
.user-info {
    gap: 4px;
    width: 100%;
}

.header-auth-link {
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    font-weight: 600;
    color: rgb(231, 228, 228);
    text-decoration: none;
    line-height: 1;
}

.header-auth-link:hover,
.header-logout-btn:hover {
    text-decoration: underline;
}

.header-auth-link:hover {
    color: #f0d9d9;
}

.user-icon {
    width: 40px;
    height: auto;
    border-radius: 50%;
}

.header-user-name {
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    color: rgb(231, 228, 228);
    line-height: 1;
}

.logout-form-header {
    margin: 0;
}

.header-logout-btn {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    color: rgb(231, 228, 228);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* =========================================================
   06. NAVBAR
========================================================= */
.navbar {
    background-color: var(--tam-maroon);
}

.navbar-brand {
    font-weight: bold;
    color: whitesmoke !important;
}

.navbar-nav .nav-link {
    font-size: 1.1em;
    color: white !important;
}

.navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item form {
    display: inline-block;
}

.navbar-nav .nav-item form {
    margin: 0;
    padding: 0;
}

.navbar-nav .nav-item form button {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: white !important;
}

.navbar-toggler-icon,
.btn-link {
    color: white !important;
}

.btn-link:hover {
    color: #e6d7cf !important;
    text-decoration: underline;
}

/* =========================================================
   07. GENERIC LAYOUT CONTAINERS
========================================================= */
.container {
    background-color: var(--tam-light-bg) !important;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(80, 0, 0, 0.08);
    padding: 20px;
}

.content {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    height: var(--app-shell-height);
    background-color: var(--tam-soft-gray);
}

.monitoring,
.forecasting,
.marketing {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: var(--app-shell-height);
    min-height: var(--app-shell-height);
    align-items: start;
    gap: 8px;
    padding: 4px;
    background-color: transparent !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

.management {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    height: var(--app-shell-height);
    min-height: var(--app-shell-height);
    align-items: start;
    gap: 8px;
    padding: 4px;
    background-color: transparent !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

.left-bar-monitoring,
.left-bar-forecasting,
.left-bar-management,
.left-bar-marketing,
.main-content-monitoring,
.main-content-forecasting,
.main-content-management,
.main-content-marketing {
    align-self: start;
    margin-top: 0;
}
/* =========================================================
   08. TOP-LEVEL TABS
========================================================= */
.tabs {
    display: flex;
    background-color: transparent;
    gap: 10px;
    padding: 10px 0;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border: none;
    border-right: 1px solid var(--tam-border);
    border-radius: 6px;
    cursor: pointer;
    background-color: var(--tam-tab-inactive);
    color: var(--tam-text);
    font-size: 22px;
    font-weight: 600;
    font-family: "Segoe UI", Arial, sans-serif;
}

.tab:last-child {
    border-right: none;
}

.tab:hover {
    background-color: var(--tam-tab-hover);
}

.tab.active {
    background-color: var(--tam-maroon-light);
    color: white;
    font-size: 22px;
    font-weight: 700;
}

/* =========================================================
   09. SHARED SIDE BARS / PANELS
========================================================= */
.left-bar,
.right-bar,
.left-bar-monitoring,
.right-bar-monitoring,
.left-bar-forecasting,
.right-bar-forecasting,
.left-bar-management,
.right-bar-management,
.left-bar-marketing {
    padding: 14px 3px 14px 10px;
    background-color: var(--tam-panel-bg);
    border: 1px solid var(--tam-border);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin: 0;
    box-sizing: border-box;
}

.monitoring,
.forecasting,
.management,
.marketing {
    gap: 8px;
    padding: 4px;
    box-sizing: border-box;
}

.left-bar-monitoring,
.left-bar-forecasting,
.left-bar-management,
.left-bar-marketing {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    z-index: 50;
    overflow: hidden;
}


.left-bar-monitoring,
.left-bar-forecasting,
.left-bar-management,
.left-bar-marketing,
.main-content-monitoring,
.main-content-forecasting,
.main-content-management,
.main-content-marketing {
    box-sizing: border-box;
}

.right-bar,
.right-bar-monitoring,
.right-bar-forecasting,
.right-bar-management {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    box-sizing: border-box;
}

.right-bar-management,
.right-bar-monitoring,
.right-bar-forecasting {
    display: none !important;
}

.right-bar-forecasting,
.right-bar-management {
    position: relative;
    z-index: 50;
    overflow: hidden;
}

.main-content-monitoring,
.main-content-forecasting,
.main-content-management,
.main-content-marketing {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.location-list-monitoring,
.location-list-forecasting,
.location-list-management,
.location-list-marketing {
    flex: 1;
    min-height: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #999999 #ffffff;
}

.left-bar-monitoring ul,
.left-bar-forecasting ul,
.left-bar-management ul,
.left-bar-marketing ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.no-field-message-monitoring-right,
.no-field-message-forecasting-right,
.no-field-message-management-right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 12px 20px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    background: #fafafa;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}

/* Custom left panel scrollbar */
.location-list-monitoring::-webkit-scrollbar,
.location-list-forecasting::-webkit-scrollbar,
.location-list-management::-webkit-scrollbar,
.location-list-marketing::-webkit-scrollbar {
    width: 8px;
}

.location-list-monitoring::-webkit-scrollbar-track,
.location-list-forecasting::-webkit-scrollbar-track,
.location-list-management::-webkit-scrollbar-track,
.location-list-marketing::-webkit-scrollbar-track {
    background: #ffffff !important;
    border-radius: 4px;
}

.location-list-monitoring::-webkit-scrollbar-thumb,
.location-list-forecasting::-webkit-scrollbar-thumb,
.location-list-management::-webkit-scrollbar-thumb,
.location-list-marketing::-webkit-scrollbar-thumb {
    background: #999999 !important;
    border-radius: 4px;
}

.location-list-monitoring::-webkit-scrollbar-thumb:hover,
.location-list-forecasting::-webkit-scrollbar-thumb:hover,
.location-list-management::-webkit-scrollbar-thumb:hover,
.location-list-marketing::-webkit-scrollbar-thumb:hover {
    background: #777777 !important;
}

/* =========================================================
   10. MAIN CONTENT WRAPPERS
========================================================= */
.main-content,
.main-content-monitoring,
.main-content-forecasting,
.main-content-management,
.main-content-marketing {
    background-color: var(--tam-panel-bg);
    border: 1px solid var(--tam-border);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin: 0;
    min-width: 0;
    position: relative;
}

.main-content {
    display: grid;
    grid-template-rows: 2fr 1fr;
    padding: 20px;
}

.main-content-monitoring,
.main-content-forecasting,
.main-content-marketing {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    box-sizing: border-box;
}

.main-content-management {
    display: block;
    height: 100%;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.main-content-marketing,
.marketing-grid-layout,
.marketing-grid-panel {
    min-width: 0;
}

/* =========================================================
   11. MIDDLE CONTENT AREAS
========================================================= */
.middle-bar-top,
.middle-bar-bottom {
    background-color: var(--tam-panel-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--tam-border);
}

.middle-bar-top-monitoring,
.middle-bar-top-forecasting {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

#middle-bar-growth-regulator-management,
#middle-bar-defoliation-timing-management {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    margin-bottom: 15px;
    box-sizing: border-box;
}

/* =========================================================
   12. DROPDOWNS / CONTROLS
========================================================= */
.dropdown-menu {
    border-radius: 0;
}

.dropdown-menu-monitoring,
.dropdown-menu-forecasting,
.dropdown-menu-management,
.dropdown-menu-marketing {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    padding: 8px 12px;
    font-size: 15px;
    color: var(--tam-text);
    background-color: #fff;
    border: 1px solid var(--tam-border);
    border-radius: 6px;
    box-sizing: border-box;
    position: static;
    top: auto;
    left: auto;
    margin: 0;
}

.dropdown-group-monitoring,
.dropdown-group-forecasting,
.dropdown-group-marketing,
.dropdown-group-management {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.dropdown-group-monitoring label,
.dropdown-group-forecasting label,
.dropdown-group-marketing label,
.dropdown-group-management label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tam-text);
}

.right-bar-management .dropdown-group-inline,
.right-bar-monitoring .dropdown-group-inline,
.right-bar-forecasting .dropdown-group-inline,
.right-bar-management-content .dropdown-group-inline,
.right-bar-monitoring-content .dropdown-group-inline,
.right-bar-forecasting-content .dropdown-group-inline {
    width: 100%;
}

.right-bar-management-content,
.right-bar-monitoring-content,
.right-bar-forecasting-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    width: 100%;
}

.right-bar-management-content .dropdown-group-inline,
.right-bar-monitoring-content .dropdown-group-inline,
.right-bar-forecasting-content .dropdown-group-inline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.right-bar-management .dropdown-label-inline,
.right-bar-monitoring .dropdown-label-inline,
.right-bar-forecasting .dropdown-label-inline,
.right-bar-management-content .dropdown-label-inline,
.right-bar-monitoring-content .dropdown-label-inline,
.right-bar-forecasting-content .dropdown-label-inline {
    display: block;
    width: 100%;
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tam-text);
    line-height: 1.3;
}

.right-bar-management-content .dropdown-menu-management,
.right-bar-forecasting-content .dropdown-menu-forecasting,
.right-bar-monitoring-content .dropdown-menu-monitoring {
    width: 100%;
}

.controls-grid .dropdown-group-inline,
.defoliation-controls-grid-management .dropdown-group-inline {
    width: 100%;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    column-gap: 12px;
    margin: 0;
}

.controls-grid .dropdown-label-inline,
.defoliation-controls-grid-management .dropdown-label-inline {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tam-text);
    text-align: left;
    line-height: 1.4;
}

.controls-grid .dropdown-menu-management,
.defoliation-controls-grid-management .dropdown-menu-management {
    width: 100%;
}

/* =========================================================
   13. MAP CONTAINERS
========================================================= */
#map-container-monitoring,
#map-container-forecasting,
.map-container {
    width: 100%;
    height: 420px;
    min-height: 420px;
    min-width: 0;
    border: 1px dashed var(--tam-border);
}

#map-container-growth-regulator-management,
#map-container-defoliation-timing-management,
#map-container-soil-field-management {
    width: 100%;
    height: 520px;
    min-height: 520px;
    min-width: 0;
    box-sizing: border-box;
}

#map-container-growth-regulator-management,
#map-container-defoliation-timing-management {
    border: 1px dashed var(--tam-border);
    background-color: var(--tam-panel-bg);
    border-radius: 6px;
    overflow: hidden;
}

#map-container-growth-regulator-uav-management,
#map-container-growth-regulator-satellite-management,
#map-container-defoliation-uav-management,
#map-container-defoliation-satellite-management {
    width: 100%;
    height: 420px;
    min-height: 420px;
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

#map-container-marketing-uav,
#map-container-marketing-satellite {
    width: 100%;
    height: 420px;
    min-height: 420px;
    min-width: 0;
    flex: 1 1 auto;
    border-radius: 4px;
    overflow: hidden;
}

#map-container-monitoring-uav,
#map-container-monitoring-satellite,
#map-container-forecasting-uav,
#map-container-forecasting-satellite {
    width: 100%;
    height: 420px;
    min-height: 400px;
    flex: 1 1 auto;
    border-radius: 4px;
    overflow: hidden;
}

/* =========================================================
   14. SLIDERS
========================================================= */
#slider-container-monitoring,
#slider-container-forecasting,
#slider-container-management {
    margin-top: 0;
    margin-bottom: 0;
    width: 80%;
    text-align: center;
}

.slider-container {
    margin-top: 12px;
}

.slider {
    width: 100%;
}

.slider-label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--tam-text);
}

#slider-container-forecasting-uav,
#slider-container-forecasting-satellite,
#slider-container-monitoring-uav,
#slider-container-monitoring-satellite {
    flex: 0 0 auto;
    width: 95%;
    margin: 12px auto 0;
}

#slider-container-monitoring-uav,
#slider-container-monitoring-satellite {
    display: none;
}

#slider-markers-monitoring,
#slider-markers-forecasting,
#slider-markers-management,
#slider-markers-monitoring-uav,
#slider-markers-monitoring-satellite,
#slider-markers-forecasting-uav,
#slider-markers-forecasting-satellite,
.slider-markers,
.marketing-map-slider-labels,
.defoliation-date-slider-markers-management {
    position: relative;
    width: 100%;
}

#slider-markers-monitoring,
#slider-markers-forecasting,
#slider-markers-management {
    height: 34px;
}

#slider-markers-monitoring-uav,
#slider-markers-monitoring-satellite {
    height: 36px;
    margin-top: 8px;
}

#slider-markers-forecasting-uav,
#slider-markers-forecasting-satellite,
.slider-markers,
.marketing-map-slider-labels {
    height: 26px;
    margin-top: 6px;
}

#slider-markers-monitoring span,
#slider-markers-forecasting span,
#slider-markers-management span {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%) rotate(-45deg) !important;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    color: var(--tam-muted-text);
}

#slider-markers-forecasting-uav span,
#slider-markers-forecasting-satellite span {
    position: absolute;
    transform: translateX(-50%) rotate(-45deg);
    font-size: 14px;
    white-space: nowrap;
    color: var(--tam-muted-text);
}

input[type="range"] {
    width: 100%;
    height: 4px;
    cursor: pointer;
    accent-color: var(--tam-maroon);
}

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--tam-maroon);
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    margin-top: -5px;
}

#selected-slider-value-forecasting-uav,
#selected-slider-value-forecasting-satellite,
#selected-slider-value-monitoring-uav,
#selected-slider-value-monitoring-satellite {
    text-align: center;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tam-maroon);
}

#column-slider-monitoring-uav,
#column-slider-monitoring-satellite,
.marketing-map-date-slider,
.defoliation-date-slider-management {
    width: 100%;
}

.defoliation-date-slider-wrap-management {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px 14px;
    background: none;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.defoliation-date-slider-label-management {
    display: none;
}

.defoliation-date-slider-management {
    margin: 4px 0 10px;
    display: block;
    box-sizing: border-box;
}

.defoliation-date-slider-markers-management {
    height: 34px;
    margin-top: 6px;
    overflow: hidden;
}

.defoliation-date-slider-markers-management span {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: top left;
    font-size: 16px;
    white-space: nowrap;
    color: #666;
    line-height: 1;
    pointer-events: none;
}

/* =========================================================
   15. CHARTS
========================================================= */
#histogram-container-monitoring,
#scatter-plot-container-monitoring,
#histogram-container-forecasting,
#scatter-plot-container-forecasting,
#histogram-container-management,
#scatter-plot-container-management {
    width: 50%;
    height: 100%;
    margin-top: 0;
    padding-top: 0;
}

.chart-container {
    width: 100%;
    min-height: 300px;
}

.chart-spacing {
    margin-top: 20px;
}

#uav-histogram-container-forecasting,
#uav-scatter-plot-container-forecasting,
#satellite-histogram-container-forecasting,
#satellite-scatter-plot-container-forecasting,
#uav-histogram-container-marketing,
#uav-scatter-plot-container-marketing,
#satellite-histogram-container-marketing,
#satellite-scatter-plot-container-marketing,
#uav-histogram-container-monitoring,
#satellite-histogram-container-monitoring,
#uav-scatter-plot-container-monitoring,
#satellite-scatter-plot-container-monitoring {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

#uav-scatter-plot-container-forecasting,
#satellite-scatter-plot-container-forecasting,
#uav-scatter-plot-container-marketing,
#satellite-scatter-plot-container-marketing,
#uav-scatter-plot-container-monitoring,
#satellite-scatter-plot-container-monitoring {
    margin-top: 20px;
}

#line-plot-growth-regulator-uav-management,
#derivative-plot-growth-regulator-uav-management,
#line-plot-growth-regulator-satellite-management,
#derivative-plot-growth-regulator-satellite-management,
#line-plot-defoliation-uav-management,
#line-plot-defoliation-satellite-management {
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

#line-plot-growth-regulator-uav-management,
#derivative-plot-growth-regulator-uav-management,
#line-plot-growth-regulator-satellite-management,
#derivative-plot-growth-regulator-satellite-management {
    height: 320px;
    min-height: 320px;
}

#line-plot-defoliation-uav-management,
#line-plot-defoliation-satellite-management {
    width: 100%;
    min-height: 320px;
    height: 320px;
}

/* =========================================================
   16. FORECASTING LAYOUT
========================================================= */
.forecasting-grid-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(320px,1fr) 220px;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

#uav-map-panel-forecasting { grid-column: 1; grid-row: 1; }
#uav-chart-panel-forecasting { grid-column: 2; grid-row: 1; }
#uav-controls-panel-forecasting { grid-column: 3; grid-row: 1; }
#satellite-map-panel-forecasting { grid-column: 1; grid-row: 2; }
#satellite-chart-panel-forecasting { grid-column: 2; grid-row: 2; }
#satellite-controls-panel-forecasting { grid-column: 3; grid-row: 2; }

/* =========================================================
   17. MONITORING LAYOUT
========================================================= */
.monitoring-grid-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(320px,1fr) 220px;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

#uav-map-panel-monitoring { grid-column: 1; grid-row: 1; }
#uav-chart-panel-monitoring { grid-column: 2; grid-row: 1; }
#uav-control-panel-monitoring { grid-column: 3; grid-row: 1; }
#satellite-map-panel-monitoring { grid-column: 1; grid-row: 2; }
#satellite-chart-panel-monitoring { grid-column: 2; grid-row: 2; }
#satellite-control-panel-monitoring { grid-column: 3; grid-row: 2; }

/* =========================================================
   18. MARKETING LAYOUT
========================================================= */
.marketing-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 0.5fr;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

/* Yield Prediction */
#uav-map-panel-marketing { grid-column: 1; grid-row: 1; }
#uav-chart-panel-marketing { grid-column: 2; grid-row: 1; }
#uav-yield-panel-marketing { grid-column: 3; grid-row: 1; }
#satellite-map-panel-marketing { grid-column: 1; grid-row: 2; }
#satellite-chart-panel-marketing { grid-column: 2; grid-row: 2; }
#satellite-yield-panel-marketing { grid-column: 3; grid-row: 2; }

/* Break Even */
#uav-map-panel-break-even-marketing { grid-column: 1; grid-row: 1; }
#uav-chart-panel-break-even-marketing { grid-column: 2; grid-row: 1; }
#uav-controls-panel-break-even-marketing { grid-column: 3; grid-row: 1; }
#satellite-map-panel-break-even-marketing { grid-column: 1; grid-row: 2; }
#satellite-chart-panel-break-even-marketing { grid-column: 2; grid-row: 2; }
#satellite-controls-panel-break-even-marketing { grid-column: 3; grid-row: 2; }

.forecasting-grid-panel,
.monitoring-grid-panel,
.marketing-grid-panel {
    background: var(--tam-panel-bg);
    border: 1px solid var(--tam-border);
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    /* IMPORTANT FIX */
    overflow: visible;

    /* keep tooltips above neighboring panels */
    z-index: 1;
}

.forecasting-panel-title,
.monitoring-panel-title,
.marketing-panel-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    flex: 0 0 auto;
    color: var(--tam-maroon);
}

/* =========================================================
   19. MANAGEMENT - GENERAL
========================================================= */
.bottom-forecasting,
.bottom-management {
    width: 100%;
    margin-top: 20px;
}

.management-collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: var(--tam-maroon);
    color: white;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.management-section-body {
    width: 100%;
    display: block;
    background: transparent;
    padding: 0;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.management-section-body.collapsed {
    display: none;
}

.management-subtabs {
    display: flex;
    width: 100%;
    gap: 10px;
    margin-bottom: 18px;
}

.management-subtab {
    flex: 1;
    text-align: center;
}

.management-subtab,
.soil-inner-subtab-btn-management {
    padding: 10px 16px;
    border: 1px solid var(--tam-border);
    background: #f1ece8;
    color: var(--tam-text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: "Segoe UI", Arial, sans-serif;
}

.management-subtab:hover,
.soil-inner-subtab-btn-management:hover {
    background: var(--tam-hover);
}

.management-subtab.active,
.soil-inner-subtab-btn-management.active {
    background: var(--tam-maroon);
    color: #fff;
    border-color: var(--tam-maroon);
    font-weight: 700;
}

.management-tab-panel {
    display: none;
    width: 100%;
}

.management-tab-panel.active {
    display: block;
}

.management-two-dataset-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    width: 100%;
    align-items: start;
}

.management-dataset-card {
    width: 100%;
    min-width: 0;
    padding: 16px;
    background: #faf8f6;
    border: 1px solid var(--tam-border);
    border-radius: 10px;
    box-sizing: border-box;
}

/* =========================================================
   20. MANAGEMENT - DATASET CONTROLS
========================================================= */
.management-dataset-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    align-items: end;
}

.management-dataset-controls .dropdown-group-monitoring {
    margin-bottom: 0;
    min-width: 0;
}

.management-dataset-controls label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tam-text);
}

.management-dataset-controls .dropdown-menu-management {
    width: 100%;
}

/* =========================================================
   21. MANAGEMENT - SOIL & FIELD PROPERTIES
========================================================= */
.soil-field-grid-management {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

.soil-map-grid-management {
    width: 100%;
    min-width: 0;
}

.soil-bottom-grid-management {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #faf8f6;
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
}

.soil-toggle-grid-management {
    margin: 4px 0 8px;
}

.soil-legend-info-management {
    font-size: 13px;
    color: var(--tam-muted-text);
    line-height: 1.5;
    background: #fff;
    border: 1px dashed var(--tam-border);
    border-radius: 6px;
    padding: 10px;
}

.soil-map-wrapper-management {
    position: relative;
    width: 100%;
    height: 100%;
}

.soil-map-loading-management {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.75);
    z-index: 1500;
}

.soil-map-spinner-management {
    width: 55px;
    height: 55px;
    border: 6px solid #ddd;
    border-top: 6px solid var(--tam-maroon);
    border-radius: 50%;
    animation: soilMapSpin_management 1s linear infinite;
    margin-bottom: 14px;
}

.soil-map-loading-text-management {
    font-size: 20px;
    font-weight: 600;
    color: var(--tam-maroon);
}

@keyframes soilMapSpin_management {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================
   22. MANAGEMENT - GROWTH REGULATOR
========================================================= */
.growth-regulator-grid-management,
.defoliation-grid-management {
    display: grid;
    grid-template-columns: 3fr 1.45fr;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

.map-grid { grid-column: 1; grid-row: 1; }
.controls-grid { grid-column: 2; grid-row: 1; }
.plots-grid { grid-column: 1; grid-row: 2; }
.empty-grid { grid-column: 2; grid-row: 2; }

.controls-grid,
.defoliation-controls-grid-management {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    background: #faf8f6;
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    box-sizing: border-box;
}

.plots-grid,
.defoliation-plots-grid-management {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.growth-map-message-management {
    width: 100%;
    margin-top: 5px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tam-muted-text);
}

.growth-chart-management {
    width: 100%;
    min-height: 320px;
    background: #fff;
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    overflow: hidden;
}

.growth-table-container-management {
    width: 100%;
    min-height: 320px;
    background: #faf8f6;
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
    overflow-x: auto;
    overflow-y: auto;
}

.growth-table-placeholder-management {
    font-size: 14px;
    color: var(--tam-muted-text);
    line-height: 1.5;
    padding: 10px;
}

.growth-recommendation-table-management {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.growth-recommendation-table-management th,
.growth-recommendation-table-management td {
    border: 2px solid #4b3e3a;
    text-align: center;
    padding: 4px 6px;
}

.growth-recommendation-table-management th {
    font-weight: 500;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--tam-text);
}

.growth-recommendation-table-management th:first-child { background: #e9e1d4; }
.growth-recommendation-table-management th:nth-child(2) { background: #eadbd2; }
.growth-recommendation-table-management th:nth-child(3) { background: #e9e1d4; }
.growth-recommendation-table-management th:nth-child(4) { background: #d9e0d4; }
.growth-recommendation-table-management th:nth-child(5) { background: #dfd8e8; }
.growth-recommendation-table-management th:nth-child(6) { background: #ead8d0; }

.growth-recommendation-table-management td:first-child {
    background: #e4ddd8;
    font-weight: 500;
}

#growth-uav-card-management,
#growth-satellite-card-management,
#defoliation-uav-card-management,
#defoliation-satellite-card-management {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "controls"
        "message"
        "content";
    gap: 16px;
    align-items: start;
}

#growth-uav-card-management .panel-header-with-info,
#growth-satellite-card-management .panel-header-with-info,
#defoliation-uav-card-management .panel-header-with-info,
#defoliation-satellite-card-management .panel-header-with-info {
    grid-area: header;
}

#growth-uav-card-management .management-dataset-controls,
#growth-satellite-card-management .management-dataset-controls,
#defoliation-uav-card-management .management-dataset-controls,
#defoliation-satellite-card-management .management-dataset-controls {
    grid-area: controls;
    margin-bottom: 16px;
}

#growth-message-uav-management,
#growth-message-satellite-management {
    grid-area: message;
    display: none;
}

#defoliation-message-uav-management,
#defoliation-message-satellite-management {
    grid-area: message;
    display: block;
}

#growth-uav-card-management .management-content-grid,
#growth-satellite-card-management .management-content-grid {
    grid-area: content;
    display: grid;
    grid-template-columns: minmax(0, 2.45fr) minmax(320px, 0.95fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "map table"
        "plots table";
    gap: 16px;
    align-items: stretch;
    margin-top: 4px;
}

#map-container-growth-regulator-uav-management,
#map-container-growth-regulator-satellite-management {
    grid-area: map;
}

#growth-uav-card-management .management-plots-two-col,
#growth-satellite-card-management .management-plots-two-col {
    grid-area: plots;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
    height: 320px;
}

#growth-uav-card-management .management-table-block,
#growth-satellite-card-management .management-table-block {
    grid-area: table;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 756px;
    max-height: 756px;
    overflow: hidden;
}

#growth-table-container-uav-management,
#growth-table-container-satellite-management {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--tam-border);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
}

.management-table-title-inside {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 6px 0 8px 0;
    color: var(--tam-maroon);
    text-align: center;
    border-bottom: 1px solid var(--tam-border);
    line-height: 1.2;
}

.management-content-grid.hidden {
    display: none !important;
}

/* =========================================================
   23. MANAGEMENT - DEFOLIATION
========================================================= */
.defoliation-map-grid-management { grid-column: 1; grid-row: 1; }
.defoliation-controls-grid-management { grid-column: 2; grid-row: 1; }
.defoliation-plots-grid-management { grid-column: 1; grid-row: 2; }
.defoliation-empty-grid-management { grid-column: 2; grid-row: 2; }

#defoliation-uav-card-management .management-content-grid,
#defoliation-satellite-card-management .management-content-grid {
    grid-area: content;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 4px;
    overflow: hidden;
}

#defoliation-uav-card-management .management-content-grid.hidden,
#defoliation-satellite-card-management .management-content-grid.hidden {
    display: none !important;
}

.defoliation-map-and-slider-management {
    display: flex;
    flex-direction: column;
    align-self: start;
    overflow: hidden;
    min-height: 0;
    width: 100%;
}

#defoliation-content-uav-management,
#defoliation-content-satellite-management {
    overflow: hidden;
    align-items: start;
}

.defoliation-plot-and-text-management {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.defoliation-recommendation-box-management {
    width: 100%;
    margin-top: 0;
    padding: 14px 16px;
    border: 1px solid #d7dbe3;
    border-radius: 10px;
    background: #f8f9fb;
    font-size: 15px;
    line-height: 1.5;
    color: #2f3542;
    box-sizing: border-box;
}

/* =========================================================
   24. LOCATION IMAGE / DESCRIPTION
========================================================= */
.location-item-monitoring,
.location-item-forecasting,
.location-item-management,
.location-item-marketing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 0;
}

.location-image-monitoring,
.location-image-forecasting,
.location-image-management,
.location-image-marketing {
    width: 100%;
    max-width: 160px;
    min-width: 80px;
    height: auto;
    max-height: 90px;
    margin: 4px 0 1px 0;
    display: block;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    filter: grayscale(100%) brightness(0.8);
    border-radius: 8px;
    padding: 4px;
    object-fit: contain;
}

.location-image-monitoring:hover,
.location-image-forecasting:hover,
.location-image-management:hover,
.location-image-marketing:hover {
    opacity: 0.75;
}

.location-image-monitoring.active,
.location-image-forecasting.active,
.location-image-management.active,
.location-image-marketing.active {
    opacity: 1;
    filter: none;
    background-color: rgba(80, 0, 0, 0.08);
    border: none;
    box-shadow: 0 0 12px rgba(80, 0, 0, 0.5);
}

.location-item-monitoring .location-image-monitoring.active + .location-description-monitoring,
.location-item-forecasting .location-image-forecasting.active + .location-description-forecasting,
.location-item-management .location-image-management.active + .location-description-management,
.location-item-marketing .location-image-marketing.active + .location-description-marketing {
    color: #7a1e1e;
}

.location-description-monitoring,
.location-description-forecasting,
.location-description-management,
.location-description-marketing {
    margin-top: 2px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #333333;
    text-align: center;
    word-break: break-word;
}

/* =========================================================
   25. BUTTONS
========================================================= */
.play-btn {
    margin-top: 20px;
    padding: 5px 10px;
    background: var(--tam-maroon);
    color: var(--tam-white);
    border: none;
    border-radius: 4px;
}

.play-btn:hover {
    background: var(--tam-maroon-light);
}

/* =========================================================
   26. LOADING
========================================================= */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #d9d9d9;
    border-top: 6px solid var(--tam-maroon);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 12px;
    font-size: 14px;
    font-weight: bold;
    color: var(--tam-text);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================
   27. INITIAL VISIBILITY
========================================================= */
#monitoring-content,
#loading-monitoring,
#uav-map-panel-monitoring,
#uav-chart-panel-monitoring,
#uav-control-panel-monitoring,
#satellite-map-panel-monitoring,
#satellite-chart-panel-monitoring,
#satellite-control-panel-monitoring,
#uav-map-panel-forecasting,
#uav-chart-panel-forecasting,
#uav-controls-panel-forecasting,
#satellite-map-panel-forecasting,
#satellite-chart-panel-forecasting,
#satellite-controls-panel-forecasting {
    display: none;
}

/* =========================================================
   28. FOOTER
========================================================= */
.custom-footer {
    position: relative;
    z-index: 100;
    background-color: #500000;
    color: #ffffff;
    padding: 10px 10px;
    margin-top: 10px;
    font-size: 14px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}

.footer-left,
.footer-center,
.footer-right {
    flex: 1;
}

.footer-center {
    text-align: center;
    font-weight: 500;
}

.footer-right {
    text-align: right;
}

/* =========================================================
   29. TAB INFO / TOOLTIP
========================================================= */
.tabs-with-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: stretch;
}

.tab-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.tab-wrapper .tab {
    width: 100%;
    padding-right: 42px;
}

.tab-info-icon,
.management-tab-info-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #000;
    line-height: 1;
    z-index: 5;
}

.tab-info-icon {
    font-size: 20px;
}

.management-tab-info-icon {
    font-size: 18px;
}

.tab-info-icon:hover,
.management-tab-info-icon:hover {
    color: #6f0000;
}

.tab-info-popup,
.management-tab-info-popup {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: #ffffff;
    color: #222;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    display: none;
    z-index: 1000;
}

.tab-info-icon:hover + .tab-info-popup,
.management-tab-info-icon:hover + .management-tab-info-popup {
    display: block;
}

.tab-info-popup.show {
    display: block;
}

.tab-info-popup::before,
.management-tab-info-popup::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 18px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-top: 1px solid #d6d6d6;
    border-left: 1px solid #d6d6d6;
    transform: rotate(45deg);
}

.tab-wrapper .tab.active + .tab-info-icon,
.management-subtab-wrapper .management-subtab.active + .management-tab-info-icon {
    color: #ffffff;
}

.management-subtabs-with-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.management-subtab-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.management-subtab-wrapper .management-subtab {
    width: 100%;
    padding-right: 42px;
    text-align: center;
}

.panel-header-with-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

/* =========================================================
   30. SIDEBAR / GRID INFO TOOLTIP
========================================================= */
.sidebar-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
}


.sidebar-info-header .info-wrapper {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    position: relative;
    padding-bottom: 10px; 
}

.info-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.info-icon-circle {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6f1d1b;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.sidebar-info-box,
.grid-info-box {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sidebar-info-box {
    position: absolute;
    top: 0;
    min-width: 220px;
    max-width: 300px;
    width: max-content;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 99999;
}

.left-bar-monitoring .sidebar-info-box,
.left-bar-forecasting .sidebar-info-box,
.left-bar-management .sidebar-info-box,
.left-bar-marketing .sidebar-info-box {
    left: calc(100% + 10px);
    right: auto;
    transform: none;
}

.right-bar-monitoring .sidebar-info-box,
.right-bar-forecasting .sidebar-info-box,
.right-bar-management .sidebar-info-box {
    right: calc(100% + 10px);
    left: auto;
    transform: none;
}

.info-wrapper:hover .sidebar-info-box {
    opacity: 1;
    visibility: visible;
}

.grid-info-corner {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 50;
}

.grid-info-corner .info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.grid-info-corner .sidebar-info-box {
    position: absolute;
    right: 0;
    left: auto;
    bottom: 36px;
    top: auto;
    transform: none;
    width: 240px;
    max-width: 240px;
    min-width: 240px;
    text-align: left;
    z-index: 5000;
}

.grid-info-corner .info-wrapper:hover .sidebar-info-box {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.grid-info-box {
    position: absolute;
    top: 38px;
    right: 0;
    min-width: 220px;
    max-width: 280px;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: none;
}

.info-wrapper:hover .grid-info-box,
.info-wrapper:hover .sidebar-info-box {
    display: block;
}

/* =========================================================
   31. MARKETING - VISIBILITY / SUBTABS / BREAK EVEN
========================================================= */
.marketing-content-hidden,
.loading-hidden,
.marketing-panel-hidden,
.marketing-slider-hidden,
.marketing-tab-hidden {
    display: none;
}

.marketing-map-slider-wrap {
    margin-top: 12px;
    padding: 10px 12px;
    background: none;
    border-radius: 8px;
}

.marketing-map-slider-wrap-satellite {
    background: #f8f8f8;
}

.marketing-subtabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.marketing-subtabs-with-info {
    display: inline-grid;
    grid-template-columns: repeat(2, max-content);
    gap: 18px;
    align-items: stretch;
    justify-content: start;
    width: auto;
    margin-bottom: 16px;
    overflow: hidden !important;
    position: relative;
    z-index: 50;
}

.marketing-subtab-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    overflow: hidden !important;
    z-index: 50;
}

.marketing-subtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 10px 42px 10px 16px;
    border: 1px solid var(--tam-border);
    background: #f1ece8;
    color: var(--tam-text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: all 0.2s ease;
    font-family: "Segoe UI", Arial, sans-serif;
}

.marketing-subtab:hover {
    background: var(--tam-hover);
}

.marketing-subtab.active {
    background: var(--tam-maroon);
    color: #fff;
    border-color: var(--tam-maroon);
    font-weight: 700;
}

.marketing-tab-info-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #000;
    line-height: 1;
    z-index: 5;
    font-size: 18px;
}

.marketing-tab-info-icon:hover {
    color: #6f0000;
}

.marketing-subtab.active + .marketing-tab-info-icon {
    color: #ffffff;
}

.marketing-tab-info-popup {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: 320px;
    background: #ffffff;
    color: #222;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    display: none;
    z-index: 9999 !important;
}

.marketing-tab-info-popup::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-top: 1px solid #d6d6d6;
    border-left: 1px solid #d6d6d6;
    transform: translateX(-50%) rotate(45deg);
}

.marketing-tab-info-icon:hover + .marketing-tab-info-popup {
    display: block;
}

.marketing-tab-content {
    width: 100%;
    display: none;
}

.marketing-tab-content.marketing-tab-active,
.marketing-tab-active {
    display: block;
}

.marketing-break-even-panel-full {
    grid-column: 1 / -1;
}

.marketing-break-even-placeholder {
    padding: 20px;
    font-size: 16px;
    color: #333;
}

.marketing-slider-label {
    position: absolute;
    top: 0;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.marketing-slider-label-start {
    transform: translateX(0);
    text-align: left;
}

.marketing-slider-label-middle {
    transform: translateX(-50%);
    text-align: center;
}

.marketing-slider-label-end {
    transform: translateX(-100%);
    text-align: right;
}

.marketing-slider-label-active {
    font-weight: 700;
    color: #6f1d1b;
    text-decoration: underline;
}

.main-content-marketing {
    overflow: hidden !important;
    position: relative;
    z-index: 50;
}

.left-bar-marketing .sidebar-info-header,
.left-bar-marketing .info-wrapper {
    overflow: hidden !important;
    position: relative;
    z-index: 300;
}

.left-bar-marketing .sidebar-info-box {
    left: calc(100% + 10px);
    right: auto;
    top: 0;
    z-index: 999999 !important;
}

/* =========================================================
   32. RESPONSIVE
========================================================= */
@media (max-width: 1400px) {
    .management-dataset-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .custom-topbar {
        grid-template-columns: 240px 1fr 220px;
        min-height: 90px;
    }

    .navbar-logo {
        height: 64px;
    }

    .header-title {
        font-size: 22px;
    }

    .header-user-name,
    .header-logout-btn,
    .header-auth-link,
    .btn-auth {
        font-size: 16px;
    }

    .marketing-grid-layout,
    .monitoring-grid-layout,
    .forecasting-grid-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #uav-map-panel-marketing,
    #uav-chart-panel-marketing,
    #uav-yield-panel-marketing,
    #satellite-map-panel-marketing,
    #satellite-chart-panel-marketing,
    #satellite-yield-panel-marketing,
    #uav-map-panel-break-even-marketing,
    #uav-chart-panel-break-even-marketing,
    #uav-controls-panel-break-even-marketing,
    #satellite-map-panel-break-even-marketing,
    #satellite-chart-panel-break-even-marketing,
    #satellite-controls-panel-break-even-marketing,
    #uav-map-panel-monitoring,
    #uav-chart-panel-monitoring,
    #uav-control-panel-monitoring,
    #satellite-map-panel-monitoring,
    #satellite-chart-panel-monitoring,
    #satellite-control-panel-monitoring,
    #uav-map-panel-forecasting,
    #uav-chart-panel-forecasting,
    #uav-controls-panel-forecasting,
    #satellite-map-panel-forecasting,
    #satellite-chart-panel-forecasting,
    #satellite-controls-panel-forecasting {
        grid-column: auto;
        grid-row: auto;
    }

    #map-container-marketing-uav,
    #map-container-marketing-satellite,
    #map-container-monitoring-uav,
    #map-container-monitoring-satellite,
    #map-container-forecasting-uav,
    #map-container-forecasting-satellite {
        min-height: 320px;
    }

    #growth-uav-card-management,
    #growth-satellite-card-management {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "controls"
            "message"
            "content";
    }

    #growth-uav-card-management .management-content-grid,
    #growth-satellite-card-management .management-content-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "map"
            "plots"
            "table";
    }

    #growth-uav-card-management .management-plots-two-col,
    #growth-satellite-card-management .management-plots-two-col,
    #defoliation-uav-card-management .management-plots-two-col,
    #defoliation-satellite-card-management .management-plots-two-col {
        grid-template-columns: 1fr;
        height: auto;
    }

    #growth-uav-card-management .management-table-block,
    #growth-satellite-card-management .management-table-block,
    #defoliation-uav-card-management .management-table-block,
    #defoliation-satellite-card-management .management-table-block {
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    #growth-table-container-uav-management,
    #growth-table-container-satellite-management,
    #defoliation-table-container-uav-management,
    #defoliation-table-container-satellite-management {
        min-height: 300px;
        height: auto;
    }
}

@media (max-width: 992px) {
    .growth-regulator-grid-management,
    .defoliation-grid-management {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .map-grid,
    .controls-grid,
    .plots-grid,
    .empty-grid,
    .defoliation-map-grid-management,
    .defoliation-controls-grid-management,
    .defoliation-plots-grid-management,
    .defoliation-empty-grid-management {
        grid-column: 1;
    }

    .controls-grid .dropdown-group-inline,
    .defoliation-controls-grid-management .dropdown-group-inline {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .management-dataset-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .management-plots-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .custom-topbar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
        text-align: center;
    }

    .header-left,
    .header-center,
    .header-right {
        justify-content: center;
    }

    .header-right {
        min-width: 0;
    }

    .navbar-logo {
        height: 56px;
    }

    .header-title {
        font-size: 18px;
        white-space: normal;
    }

    .auth-buttons {
        justify-content: center;
    }

    .monitoring,
    .forecasting,
    .marketing,
    .management {
        grid-template-columns: 1fr;
    }

    .management-dataset-controls,
    .management-subtabs-with-info,
    .marketing-subtabs-with-info {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   33. MARKETING BREAK EVEN SUMMARY
========================================================= */
.marketing-break-even-summary-wrapper {
    margin-top: 18px;
}

.marketing-break-even-summary-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.marketing-break-even-summary-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.marketing-break-even-summary-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.marketing-break-even-summary-table th,
.marketing-break-even-summary-table td {
    border: 1px solid #d9d9d9;
    padding: 8px 10px;
    text-align: center;
    font-size: 14px;
}

.marketing-break-even-summary-table th {
    background: #f7f7f7;
    font-weight: 600;
}

/* =========================================================
   99. FINAL CLEAN SOIL TOOLTIP RULES
========================================================= */
.soil-inner-subtabs-management {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.soil-info-subtab-wrapper-management {
    position: relative;
    display: inline-block;
}

.soil-inner-subtab-btn-with-info-management {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 42px 10px 16px;
    min-width: 140px;
    overflow: hidden;
}

.soil-info-icon-management {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.soil-info-popup-management {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 280px;
    background: #ffffff;
    color: #222;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    display: none;
    z-index: 1000;
    text-align: center;
}

.soil-info-popup-management::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-top: 1px solid #d6d6d6;
    border-left: 1px solid #d6d6d6;
    transform: translateX(-50%) rotate(45deg);
}

.soil-info-subtab-wrapper-management:hover .soil-info-popup-management {
    display: block;
}


.sidebar-info-header .monitoring-panel-title,
.sidebar-info-header .forecasting-panel-title,
.sidebar-info-header .management-panel-title,
.sidebar-info-header .marketing-panel-title {
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* =========================================================
   34. FOOTER OVERLAP FIX
========================================================= */

@media (max-width: 768px) {
    .monitoring,
    .forecasting,
    .marketing,
    .management {
        height: auto;
        min-height: auto;
        overflow: hidden !important;
    }

    .left-bar-monitoring,
    .left-bar-forecasting,
    .left-bar-management,
    .left-bar-marketing,
    .main-content-monitoring,
    .main-content-forecasting,
    .main-content-management,
    .main-content-marketing {
        height: auto;
        min-height: auto;
        max-height: none;
    }
}


/* =========================================================
   DOWNLOAD BUTTON (MATCH MONITORING STYLE)
========================================================= */
.download-btn {
    width: 100%;
    height: 44px;

    background-color: var(--tam-tab-inactive);   /* grey */
    color: var(--tam-text);

    border: 1px solid var(--tam-border);
    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.25s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover (light grey like tabs) */
.download-btn:hover {
    background-color: var(--tam-tab-hover);
}

/* Active / Click → maroon */
.download-btn:active {
    background-color: var(--tam-maroon-light);
    color: white;
    border-color: var(--tam-maroon);
}

/* Optional: when enabled after data load → make it maroon */
.download-btn.enabled {
    background-color: var(--tam-maroon-light);
    color: white;
    border-color: var(--tam-maroon);
}

/* Disabled */
.download-btn:disabled {
    background-color: #e0e0e0;
    color: #888;
    cursor: not-allowed;
}


/* =========================================================
   MONITORING MAP TOOLS: same-row transparent controls
========================================================= */
.monitoring-map-tools-row {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.monitoring-map-tool {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    color: #000000;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.monitoring-map-tool input[type="checkbox"] {
    cursor: pointer;
}

.monitoring-map-rotate-control {
    min-width: 100px;
}

.monitoring-map-rotate-slider {
    width: 90px;
    cursor: pointer;
    accent-color: #7b0000;
}

#map-rotate-value-monitoring-uav,
#map-rotate-value-monitoring-satellite {
    min-width: 32px;
    text-align: right;
    font-weight: 600;
    color: #5a0000;
}


/* =========================================================
   35. UNIFIED INFO ICON SIZE OVERRIDE
   All info icons are forced to the same visible size.
========================================================= */

/* Panel/sidebar icons that are custom circular buttons */
.info-icon-circle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #6f1d1b !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer;
    box-sizing: border-box !important;
}

/* FontAwesome-style info-circle icons in tabs/subtabs */
.tab-info-icon,
.management-tab-info-icon,
.marketing-tab-info-icon,
.soil-info-icon-management {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Important: for fa-info-circle, this controls the visible circle size */
    font-size: 20px !important;
    line-height: 1 !important;

    cursor: pointer;
    box-sizing: border-box !important;
}

/* Keep correct placement for tab icons */
.tab-info-icon,
.management-tab-info-icon,
.marketing-tab-info-icon,
.soil-info-icon-management {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Active tab icon should remain white */
.tab-wrapper .tab.active + .tab-info-icon,
.management-subtab-wrapper .management-subtab.active + .management-tab-info-icon,
.marketing-subtab.active + .marketing-tab-info-icon {
    color: #ffffff !important;
}

/* Inactive tab/subtab icons */
.tab-wrapper .tab:not(.active) + .tab-info-icon,
.management-subtab-wrapper .management-subtab:not(.active) + .management-tab-info-icon,
.marketing-subtab:not(.active) + .marketing-tab-info-icon {
    color: #000000 !important;
}

/* =========================================================
   FORECASTING MAP TOOLS: same-row transparent controls
   Same visual style as Monitoring map tools
========================================================= */
.forecasting-map-wrapper {
    position: relative;
}

.forecasting-map-tools-row {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.forecasting-map-tool {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    color: #000000;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.forecasting-map-tool input[type="checkbox"] {
    cursor: pointer;
}

.forecasting-map-rotate-control {
    min-width: 100px;
}

.forecasting-map-rotate-slider {
    width: 90px;
    cursor: pointer;
    accent-color: #7b0000;
}

#map-rotate-value-forecasting-uav,
#map-rotate-value-forecasting-satellite {
    min-width: 32px;
    text-align: right;
    font-weight: 600;
    color: #5a0000;
}


/* =========================================================
   FINAL TOOLTIP VISIBILITY FIX
   Prevent info boxes from being clipped or hidden
========================================================= */

.forecasting-grid-layout,
.monitoring-grid-layout,
.marketing-grid-layout,
.management-two-dataset-layout,
.management-content-grid,
.panel-header-with-info,
.info-wrapper {
    overflow: visible !important;
}

/* Panels should allow tooltip overflow */
.forecasting-grid-panel,
.monitoring-grid-panel,
.marketing-grid-panel,
.management-dataset-card {
    overflow: hidden !important;
    position: relative !important;
    z-index: 1;
}

/* Raise hovered panel above neighboring panels */
.forecasting-grid-panel:hover,
.monitoring-grid-panel:hover,
.marketing-grid-panel:hover,
.management-dataset-card:hover {
    z-index: 9999 !important;
}

/* Keep tooltip container above everything */
.info-wrapper {
    position: relative !important;
    z-index: 10000 !important;
}

/* Sidebar tooltip */
.sidebar-info-box {
    z-index: 10001 !important;
}

/* Grid tooltip */
.grid-info-box {
    position: absolute !important;
    top: 38px !important;
    right: 0 !important;

    min-width: 240px;
    max-width: 320px;

    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;

    padding: 10px 12px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

    z-index: 10002 !important;

    display: none;
}

/* Show tooltip on hover */
.info-wrapper:hover .grid-info-box,
.info-wrapper:hover .sidebar-info-box {
    display: block !important;
}

/* Right-side control panel tooltips */
#uav-controls-panel-forecasting .grid-info-box,
#satellite-controls-panel-forecasting .grid-info-box,
#uav-control-panel-monitoring .grid-info-box,
#satellite-control-panel-monitoring .grid-info-box {
    right: 0 !important;
    left: auto !important;
}

/* Ensure map containers do not clip tooltip */
.forecasting-map-wrapper,
.monitoring-map-wrapper,
.marketing-map-wrapper  {
    overflow: hidden !important;
    width: 100%;
}

/* =========================================================
   DRAGGABLE JENKS COLORBAR FIX
   Custom colorbar used after Plotly showscale is disabled.
   The bar is shortened and moved down so the bottom color,
   bottom knob, and bottom label stay inside the 420px map.
========================================================= */

/* Map wrappers must clip the map image, but the colorbar is positioned
   with enough bottom clearance so it is not clipped. */
.forecasting-map-wrapper,
.monitoring-map-wrapper {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Custom vertical colorbar overlay */
.forecasting-colorbar-break-overlay,
.monitoring-colorbar-break-overlay {
    position: absolute !important;
    right: 58px !important;
    top: 58px !important;
    width: 30px !important;
    height: 330px !important;
    z-index: 35 !important;
    pointer-events: none;
    overflow: visible !important;
    border: 1px solid #777777;
    box-sizing: border-box;
}

/* Small feature abbreviation above colorbar, e.g., CC */
.forecasting-colorbar-title,
.monitoring-colorbar-title {
    position: absolute;

    left: 50%;
    top: -18px;

    transform: translateX(-50%);

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    background: rgba(0,0,0,0.55);

    padding: 2px 5px;

    border-radius: 3px;

    white-space: nowrap;

    z-index: 250 !important;
}

/* Draggable or fixed horizontal hit area at each break */
.forecasting-colorbar-break-handle,
.monitoring-colorbar-break-handle {
    position: absolute;
    left: 0;
    width: 100%;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: ns-resize;
    user-select: none;
}

.forecasting-colorbar-break-handle.fixed,
.monitoring-colorbar-break-handle.fixed {
    cursor: default;
    pointer-events: none;
}

/* Round control knob */
.forecasting-colorbar-break-knob,
.monitoring-colorbar-break-knob {
    position: absolute;
    right: -7px;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #555555;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    box-sizing: border-box;
}

.forecasting-colorbar-break-handle.fixed .forecasting-colorbar-break-knob,
.monitoring-colorbar-break-handle.fixed .monitoring-colorbar-break-knob {
    width: 9px;
    height: 9px;
    right: -5px;
    background: #f3f3f3;
}

/* Break value labels */
/* Break value labels */
.forecasting-colorbar-break-label,
.monitoring-colorbar-break-label {
    position: absolute;

    left: calc(100% + 14px) !important;
    top: 50%;

    transform: translateY(-50%);

    padding: 2px 4px !important;

    background: rgba(0, 0, 0, 0.55) !important;

    color: #ffffff !important;

    font-size: 11px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    border-radius: 3px;

    z-index: 200 !important;
}

.forecasting-colorbar-break-handle.dragging .forecasting-colorbar-break-label,
.monitoring-colorbar-break-handle.dragging .monitoring-colorbar-break-label {
    background: #6f1d1b;
    color: #ffffff;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Fixed Plotly map container size */
#map-container-forecasting-uav,
#map-container-forecasting-satellite,
#map-container-monitoring-uav,
#map-container-monitoring-satellite {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
}


/* =========================================================
   MARKETING TAB SCROLL FIX
   Add this at the end of my_project.css
========================================================= */

#marketing-content,
.marketing,
.main-content-marketing,
#marketing-tab-content-yield-prediction,
#marketing-tab-content-break-even,
.marketing-tab-content {
    overflow-y: auto !important;
    max-height: calc(100vh - 120px) !important;
}

.marketing-grid-layout {
    overflow-y: visible !important;
    padding-bottom: 90px !important;
}

#satellite-yield-panel-marketing,
#satellite-chart-panel-marketing,
#satellite-map-panel-marketing {
    margin-bottom: 40px !important;
}


.marketing-content-hidden,
.loading-hidden,
.marketing-panel-hidden,
.marketing-slider-hidden,
.marketing-tab-hidden {
    display: none;
}

#uav-map-panel-marketing,
#uav-chart-panel-marketing,
#uav-yield-panel-marketing,
#satellite-map-panel-marketing,
#satellite-chart-panel-marketing,
#satellite-yield-panel-marketing {
    display: none;
}

/* =========================================================
   35. MAP TOOL OVERLAY + CUSTOM COLORBAR
   Shared by Forecasting, Monitoring, and Marketing
========================================================= */
.forecasting-map-wrapper {
    position: relative;
    width: 100%;
}

.forecasting-map-tools-row {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 20;
    display: flex;
    gap: 8px;
    align-items: center;
}

.forecasting-map-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(80, 0, 0, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: #111111;
    line-height: 1;
}

.forecasting-map-rotate-control input[type="range"],
.forecasting-map-rotate-slider {
    width: 120px;
}

/* Custom colorbar overlays used when Plotly showscale is disabled */
.forecasting-colorbar-break-overlay,
.monitoring-colorbar-break-overlay {
    position: absolute !important;
    right: 58px !important;
    top: 58px !important;
    width: 30px !important;
    height: 330px !important;
    z-index: 35 !important;
    pointer-events: none;
    overflow: visible !important;
    border: 1px solid #777777;
    box-sizing: border-box;
}

.forecasting-colorbar-title,
.monitoring-colorbar-title {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 250 !important;
}

.forecasting-colorbar-break-label,
.monitoring-colorbar-break-label {
    position: absolute;
    left: calc(100% + 14px) !important;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 4px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: 3px;
    z-index: 200 !important;
}

/* =========================================================
   FINAL MARKETING COLORBAR FIX
   Match Forecasting / Monitoring drag behavior
========================================================= */

.marketing-colorbar-break-overlay {
    position: absolute !important;
    right: 58px !important;
    top: 58px !important;

    width: 30px !important;
    height: 330px !important;

    z-index: 35 !important;

    /* IMPORTANT */
    pointer-events: none !important;

    overflow: visible !important;

    border: 1px solid #777777 !important;
    box-sizing: border-box !important;
}

/* Drag handles */
.marketing-colorbar-break-handle {
    position: absolute !important;

    left: 0 !important;
    width: 100% !important;
    height: 18px !important;

    transform: translateY(-50%) !important;

    /* IMPORTANT */
    pointer-events: auto !important;

    cursor: ns-resize !important;

    user-select: none !important;

    z-index: 100 !important;

    touch-action: none !important;
}

.marketing-colorbar-break-handle.fixed {
    cursor: default !important;
    pointer-events: none !important;
}

/* Smooth dragging */
.marketing-colorbar-break-handle.dragging {
    transition: none !important;
}

.marketing-colorbar-break-knob {
    position: absolute !important;

    right: -7px !important;
    top: 50% !important;

    width: 13px !important;
    height: 13px !important;

    transform: translateY(-50%) !important;

    border-radius: 50% !important;

    background: #ffffff !important;
    border: 1px solid #555555 !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;

    box-sizing: border-box !important;

    pointer-events: none !important;
}

.marketing-colorbar-break-label {
    position: absolute !important;

    left: calc(100% + 14px) !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    min-width: 38px !important;

    text-align: center !important;

    padding: 3px 5px !important;

    background: rgba(0, 0, 0, 0.72) !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    border-radius: 4px !important;

    z-index: 220 !important;

    pointer-events: none !important;
}

/* Normal mode */
.marketing-colorbar-default-mode .marketing-colorbar-break-knob {
    display: none !important;
}

/* Jenks mode */
.marketing-colorbar-jenks-mode .marketing-colorbar-break-knob {
    display: block !important;
}


.marketing-colorbar-title {
    position: absolute;

    left: 50%;
    top: -18px;

    transform: translateX(-50%);

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    background: rgba(0,0,0,0.55);

    padding: 2px 5px;

    border-radius: 3px;

    white-space: nowrap;

    z-index: 250 !important;

    pointer-events: none !important;
}

/* =========================================================
   MANAGEMENT MAP STYLE — MATCH MONITORING MAPS
   Clean replacement for older/redundant management map rules.
========================================================= */

/* Keep management sub-tabs fixed; scroll only the selected tab content */
.main-content-management {
    height: calc(100vh - 155px);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.management-subtabs {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
}

.management-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

/* Same wrapper behavior used by Monitoring maps */
.management-map-wrapper,
.management-rotate-map-wrapper {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

/* Same map dimensions as Monitoring/Forecasting map containers */
#map-container-growth-regulator-uav-management,
#map-container-growth-regulator-satellite-management,
#map-container-defoliation-uav-management,
#map-container-defoliation-satellite-management {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    min-width: 0 !important;
    border: 1px solid var(--tam-border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Ensure the map wrapper occupies the correct CSS grid area */
#growth-uav-card-management .management-map-wrapper,
#growth-satellite-card-management .management-map-wrapper {
    grid-area: map;
}

/* Defoliation map column should behave like a Monitoring map panel */
.defoliation-map-and-slider-management {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Rotate tools: same transparent overlay style as Monitoring */
.management-map-tools-row {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    pointer-events: auto !important;
}

.management-map-tool {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(80, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.management-map-rotate-control input[type="range"],
.management-map-rotate-slider {
    width: 120px !important;
    cursor: pointer !important;
    accent-color: var(--tam-maroon) !important;
}

#map-rotate-value-growth-uav-management,
#map-rotate-value-growth-satellite-management,
#map-rotate-value-defoliation-uav-management,
#map-rotate-value-defoliation-satellite-management {
    min-width: 32px !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--tam-maroon) !important;
}

/* =========================================================
   MANAGEMENT INSIDE COLORBAR — SAME VISUAL POSITION AS MONITORING
   Use this only with JS that disables Plotly native colorbar
   by setting showscale:false on Plotly traces.
========================================================= */

.management-colorbar-inside-overlay {
    position: absolute !important;
    right: 58px !important;
    top: 58px !important;
    width: 30px !important;
    height: 330px !important;
    z-index: 35 !important;
    pointer-events: none !important;
    overflow: visible !important;
    border: 1px solid #777777 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}

.management-colorbar-inside-title {
    position: absolute !important;
    left: 50% !important;
    top: -28px !important;
    transform: translateX(-50%) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.55) !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    z-index: 250 !important;
    pointer-events: none !important;
}

.management-colorbar-inside-tick {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
}

.management-colorbar-inside-knob {
    position: absolute !important;
    right: -5px !important;
    top: 50% !important;
    width: 9px !important;
    height: 9px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
    border: 1px solid #555555 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.management-colorbar-inside-label {
    position: absolute !important;
    left: calc(100% + 14px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 2px 4px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 3px !important;
    z-index: 200 !important;
    pointer-events: none !important;
}

/* Hide any accidental standalone Plotly colorbar SVG nodes that are outside the map.
   The correct solution is still showscale:false in JS, but this prevents visual leakage. */
#map-container-growth-regulator-uav-management .colorbar,
#map-container-growth-regulator-satellite-management .colorbar,
#map-container-defoliation-uav-management .colorbar,
#map-container-defoliation-satellite-management .colorbar {
    display: none !important;
}

@media (max-width: 1200px) {
    .management-colorbar-inside-overlay {
        right: 58px !important;
        top: 58px !important;
        height: 330px !important;
    }
}

@media (max-width: 768px) {
    .management-colorbar-inside-overlay {
        right: 42px !important;
        top: 50px !important;
        height: 300px !important;
    }

    .management-map-rotate-control input[type="range"],
    .management-map-rotate-slider {
        width: 90px !important;
    }

    .management-colorbar-inside-label {
        font-size: 10px !important;
    }
}

/* =========================================================
   FINAL DEFOLIATION MAP + SLIDER FIT FIX
   Match Growth Regulator map behavior:
   - map fills the map wrapper
   - rotate tool stays over the map image
   - date slider fits below the map
   - % Open colorbar stays inside the map
========================================================= */

/* Defoliation grid: left map/slider + right chart/recommendation */
#defoliation-uav-card-management .management-content-grid,
#defoliation-satellite-card-management .management-content-grid {
    grid-area: content;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 4px;
    overflow: visible !important;
    padding-bottom: 8px !important;
}

#defoliation-uav-card-management .management-content-grid.hidden,
#defoliation-satellite-card-management .management-content-grid.hidden {
    display: none !important;
}

#defoliation-content-uav-management,
#defoliation-content-satellite-management {
    overflow: visible !important;
    align-items: start;
}

.defoliation-map-and-slider-management {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-bottom: 58px !important;
    box-sizing: border-box !important;
}

/* Keep the map wrapper exactly like Growth Regulator: map clipped, controls overlayed */
.defoliation-map-and-slider-management .management-map-wrapper,
.defoliation-map-and-slider-management .management-rotate-map-wrapper {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* Defoliation map container fills the wrapper */
#map-container-defoliation-uav-management,
#map-container-defoliation-satellite-management {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    min-width: 0 !important;
    border: 1px solid var(--tam-border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Rotate control: same look as Growth Regulator, but shifted below Plotly's top map margin */
.defoliation-map-and-slider-management .management-map-tools-row {
    position: absolute !important;
    top: 50px !important;
    left: 12px !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    pointer-events: auto !important;
}

.defoliation-map-and-slider-management .management-map-tool {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(80, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.defoliation-map-and-slider-management .management-map-rotate-slider,
.defoliation-map-and-slider-management .management-map-rotate-control input[type="range"] {
    width: 120px !important;
    cursor: pointer !important;
    accent-color: var(--tam-maroon) !important;
}

/* Defoliation date slider */
.defoliation-date-slider-wrap-management {
    width: calc(100% - 32px) !important;
    margin: 10px 16px 0 16px !important;
    padding: 0 0 42px 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
}

.defoliation-date-slider-management {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 8px 0 !important;
    box-sizing: border-box !important;
}

.defoliation-date-slider-markers-management {
    position: relative !important;
    width: 100% !important;
    height: 44px !important;
    margin-top: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.defoliation-date-slider-markers-management span {
    position: absolute !important;
    bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: #666666 !important;
    pointer-events: none !important;
    transform: translateX(-50%) rotate(-45deg) !important;
    transform-origin: top center !important;
}

/* Defoliation % Open colorbar inside the map image */
.defoliation-map-and-slider-management .management-colorbar-inside-overlay {
    top: 70px !important;
    right: 62px !important;
    height: 310px !important;
    z-index: 55 !important;
}

.defoliation-map-and-slider-management .management-colorbar-inside-title {
    top: 4px !important;
    transform: translateX(-50%) !important;
}

/* Right side of Defoliation panel */
.defoliation-plot-and-text-management {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#line-plot-defoliation-uav-management,
#line-plot-defoliation-satellite-management {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    border: 1px solid var(--tam-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.defoliation-recommendation-box-management {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #d7dbe3 !important;
    border-radius: 10px !important;
    background: #f8f9fb !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #2f3542 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1200px) {
    #defoliation-uav-card-management .management-content-grid,
    #defoliation-satellite-card-management .management-content-grid {
        grid-template-columns: 1fr;
    }

    .defoliation-map-and-slider-management .management-map-wrapper,
    .defoliation-map-and-slider-management .management-rotate-map-wrapper,
    #map-container-defoliation-uav-management,
    #map-container-defoliation-satellite-management {
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }

    .defoliation-map-and-slider-management .management-colorbar-inside-overlay {
        top: 64px !important;
        right: 58px !important;
        height: 285px !important;
    }
}

@media (max-width: 768px) {
    .defoliation-map-and-slider-management .management-map-wrapper,
    .defoliation-map-and-slider-management .management-rotate-map-wrapper,
    #map-container-defoliation-uav-management,
    #map-container-defoliation-satellite-management {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
    }

    .defoliation-map-and-slider-management .management-map-tools-row {
        top: 48px !important;
        left: 10px !important;
    }

    .defoliation-map-and-slider-management .management-map-rotate-slider,
    .defoliation-map-and-slider-management .management-map-rotate-control input[type="range"] {
        width: 90px !important;
    }

    .defoliation-map-and-slider-management .management-colorbar-inside-overlay {
        top: 60px !important;
        right: 42px !important;
        height: 250px !important;
    }

    .management-colorbar-inside-label {
        font-size: 10px !important;
    }
}



/* =========================================================
   FINAL OVERRIDE — DEFOLIATION MAP FILL FIX
   Keeps Defoliation map behavior consistent with Growth Regulator.
========================================================= */

/* Defoliation two-column content */
#defoliation-uav-card-management .management-content-grid,
#defoliation-satellite-card-management .management-content-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    overflow: visible !important;
}

/* Left map/slider column */
.defoliation-map-and-slider-management {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    padding-bottom: 54px !important;
    box-sizing: border-box !important;
}

/* Make the Defoliation map wrapper the same as Growth Regulator */
.defoliation-map-and-slider-management .management-map-wrapper,
.defoliation-map-and-slider-management .management-rotate-map-wrapper {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* Make Plotly fill the map wrapper */
#map-container-defoliation-uav-management,
#map-container-defoliation-satellite-management {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    min-width: 0 !important;
    border: 1px solid var(--tam-border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Force Plotly internals to fill container */
#map-container-defoliation-uav-management .plot-container,
#map-container-defoliation-uav-management .svg-container,
#map-container-defoliation-uav-management .main-svg,
#map-container-defoliation-uav-management .mapboxgl-map,
#map-container-defoliation-satellite-management .plot-container,
#map-container-defoliation-satellite-management .svg-container,
#map-container-defoliation-satellite-management .main-svg,
#map-container-defoliation-satellite-management .mapboxgl-map {
    width: 100% !important;
    height: 100% !important;
}

/* Put rotate tool directly over the map image */
.defoliation-map-and-slider-management .management-map-tools-row {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
}

/* Same rotate styling as Growth Regulator */
.defoliation-map-and-slider-management .management-map-tool {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(80, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* Defoliation date slider fits below map */
.defoliation-date-slider-wrap-management {
    width: calc(100% - 32px) !important;
    margin: 10px 16px 0 16px !important;
    padding: 0 0 42px 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
}

.defoliation-date-slider-management {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 8px 0 !important;
    display: block !important;
}

.defoliation-date-slider-markers-management {
    width: 100% !important;
    height: 44px !important;
    margin-top: 6px !important;
    overflow: visible !important;
}

.defoliation-date-slider-markers-management span {
    font-size: 13px !important;
    line-height: 1 !important;
    transform: translateX(-50%) rotate(-45deg) !important;
    transform-origin: top center !important;
}

/* Keep % Open colorbar inside the map */
.defoliation-map-and-slider-management .management-colorbar-inside-overlay {
    top: 58px !important;
    right: 58px !important;
    height: 330px !important;
}

.defoliation-map-and-slider-management .management-colorbar-inside-title {
    top: -28px !important;
}