/* general */
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #f5f7fa;
    cursor: default;
}

a, a:visited, .blue {
    color: #0DA7DF;
    text-decoration: none;
}
a:hover{
    color: #0b8fc7;
    text-decoration: underline;
}

form {
    display: inline;
}

.white_text {
    font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 13px;
    color: #212529;
}

.customer_text {
    font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 20px;
    color: #212529;
}

.content {
    font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 12px;
    color: #212529;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

hr {
    border: 0;
    color: #ccc;
    height: 1px;
    border: 1px dotted #cccccc;
}

.footer {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 10px;
    color: #6c757d;
}

/* inputs */
.input, textarea.input_small, textarea.input_medium {
    width: 160px;
}

textarea.input_small {
    height: 32px;
}

textarea.input_medium {
    height: 60px;
}

textarea.input {
    width: 400px;
}

select.input {
    width: 250px;
}

input {
    color: #44627E;
    font: 8pt Arial;
}

input.long {
    width: 400px
}

input.readonly, textarea.readonly, select.readonly {
    color: #999
}

select {
    color: #44627E;
    font: 8pt Arial;
}

textarea {
    color: #44627E;
}

a.bli {
    background: url(../images/icon_links.png) 0 0;
    cursor: pointer;
    display: block;
    float: left;
    height: 17px;
    width: 26px
}

a.ccs {
    background: url(../images/icon_links.png) -26px 0;
    cursor: pointer;
    display: block;
    float: left;
    height: 17px;
    width: 31px
}

a.sim {
    background: url(../images/icon_links.png) -57px 0;
    cursor: pointer;
    display: block;
    float: left;
    height: 17px;
    width: 26px
}

a.bli:hover {
    background-position: 0 -17px
}

a.ccs:hover {
    background-position: -26px -17px
}

a.sim:hover {
    background-position: -57px -17px
}

/* YY */
.page_first {
    background: url(../images/paging_first.gif) top left no-repeat;
    height: 25px;
    width: 25px;
    position: relative
}

.page_prev {
    background: url(../images/paging_previous.gif) top left no-repeat;
    height: 25px;
    width: 25px;
    position: relative
}

.page_next {
    background: url(../images/paging_next.gif) top left no-repeat;
    height: 25px;
    width: 25px;
    position: relative
}

.page_last {
    background: url(../images/paging_last.gif) top left no-repeat;
    height: 25px;
    width: 25px;
    position: relative
}

a.fillspace {
    outline: none;
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

.taskbox {
    float: right;
    width: 200px;
    text-align: left;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    color: #212529;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px
}

.taskbox h3 {
    color: #212529;
    margin-top: 0;
}

.clear {
    clear: both
}

.left {
    float: left;
    text-align: left
}

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

.link {
    cursor: pointer
}

.padLeft5 {
    padding-left: 5px
}

.padLeft15 {
    padding-left: 15px
}

.padRight5 {
    padding-right: 5px
}

.marginLeft5 {
    margin-left: 5px
}

.marginRight5 {
    margin-right: 5px
}

.largeButton {
    padding: 20px
}

.ui-buttonset label.ui-button {
    margin-bottom: 5px
}

#tblContent {
    background: #FFFFFF;
    border-radius: 8px;
}

.hiddenfield {
    height: 0px;
    width: 0px;
    float: left;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute
}

.warning {
    color: red;
    font-style: italic
}

.smaller {
    font-size: 80%
}

h1, h2, h3, h4, h5, h6 {
    display: inline !important;
    color: #0DA7DF;
    font-weight: 600;
}

th {
    text-align: left
}

.center {
    text-align: center
}

.padding5 {
    padding: 5px
}

table.container {
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

table.container td, table.container th {
    border: 1px solid #dee2e6;
    border-collapse: collapse;
    padding: 8px;
}

table.container th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #212529;
}

.no-border {
    border: 0 !important
}

a img {
    border: 0
}

.dash-menu {
    list-style: none
}

.dash-menu li {
    text-align: center;
    margin-right: 30px
}

.dash-menu li a {
    text-decoration: none;
    outline: none
}

#menu ul {
    position: relative;
    bottom: 0;
    margin: 0;
    padding: 0
}

#menu ul > li {
    list-style: none;
    float: left;
    position: relative;
    top: 1px;
    margin: 0 .2em 1px 0;
    padding: 0;
    white-space: nowrap;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #ffffff;
}

#menu ul > li > a {
    display: block;
    float: left;
    padding: .7em 1em;
    text-decoration: none;
    color: #212529;
    font-weight: 500;
}

#menu ul > li.active_tab {
    background: linear-gradient(to bottom, #0DA7DF 0%, #0b8fc7 100%);
    border-bottom: 2px solid #0a7ba8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#menu ul > li.active_tab > a {
    color: #ffffff !important;
}

#menu ul > li.inactive_tab:hover {
    background: linear-gradient(to bottom, #e9ecef 0%, #dee2e6 100%);
    border-bottom: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#menu ul > li.inactive_tab {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.customFieldWrapper {
    margin-bottom: 3px
}

.dropdownBlock {
    display: none;
    position: absolute;
    top: 34px;
    left: 0px;
    z-index: 999;
    background-color: #FFF;
    border: 1px solid #0DA7DF;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    color: #212529;
    padding: 20px
}

#menu ul > li:hover > .dropdownBlock {
    display: block
}

.dropdownBlockInner {
    height: 100%;
    width: 100%;
    overflow: hidden;
    color: #0DA7DF;
    padding: 0 5px
}

.dropdownBlockInner h3 {
    color: #212529;
    margin-top: 0;
}

.user-permission-container {
    min-width: 500px;
    text-align: left
}

table.permissions td {
    text-align: center
}

/* jQuery UI addition */
.ui-state-success, .ui-widget-content .ui-state-success {
    border: 1px solid #145E01;
    background-color: #55FF7F;
    color: #000
}

.ui-state-success a, .ui-widget-content .ui-state-success a {
    color: #000
}

.ui-corner-all-force {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.addressrow:hover {
    cursor: pointer;
    background-color: rgba(13, 167, 223, 0.1);
    transition: background-color 150ms ease-in-out;
}

.frame {
    width: 240px;
    height: 135px;
    border: 1px solid;
}

#pagecontainer {
    width: 100%;
    margin: 0 auto;
}

#leftcolumn {
    width: 300px;
    float: left;
}

#centrecolumn {
    width: 330px;
    float: left;
}

#rightcolumn {
    width: 510px;
    float: left;
}

#comment {
    width: 290px;
    height: 125px;
}

#emailbody {
    width: 473px;
    height: 454px;
}

.fg-button {
    outline: 0;
    margin: 0 4px 0 0;
    padding: .4em 1em;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    text-align: center;
    zoom: 1;
}

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    zoom: 1;
    /* *display: inline; */
    /* this fix is needed for IE7- (deprecated) */
}

.decimal {
    width: 40px;
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
.green {
    background: #0FFF3C !important;
}

.yellow {
    background: #FFDA2F !important;
}

.red {
    background: #FF4B4B !important;
}

.orange {
    background: orange !important;
}

.address {
    width: 300px;
    height: 100px;
}
.noteArea {
    width: 320px;
    height: 80px;
}

.applyProduct {
    font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: Red;
}

.plainAnchor {
    text-decoration: none;
    color: #0000ff;
}

.menuButton {
    width: 100%;
    max-width: 300px;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(13, 167, 223, 0.3);
    position: relative;
    overflow: hidden;
}

.menuButton:hover {
    background: linear-gradient(135deg, #0b8fc7 0%, #0976a8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 167, 223, 0.4);
}

.menuButton:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(13, 167, 223, 0.3);
}

.menuButton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.menuButton:hover::before {
    width: 300px;
    height: 300px;
}

/* Menu Button Layout */
.page-header-section {
    margin-bottom: 30px;
}

.page-header-section h2 {
    font-size: 1.75rem;
    color: #0DA7DF;
    font-weight: 700;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 3px solid #0DA7DF;
}

.menu-button-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
}

.menu-button-item {
    width: 100%;
}

/* Responsive adjustments for menu buttons */
@media (min-width: 768px) {
    .menu-button-container {
        gap: 20px;
    }
}

/* Action Buttons - Modern Styling */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-family: inherit;
    vertical-align: middle;
}

.btn-primary {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0b8fc7 0%, #0976a8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 167, 223, 0.35);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(13, 167, 223, 0.3);
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #545b62 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.35);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(108, 117, 125, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.35);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
}

.btn-success:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
}

/* Button spacing helpers */
.btn-group {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Form Input Styling */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
    padding: 8px 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    color: #212529;
    background-color: #ffffff;
    border-color: #0DA7DF;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 167, 223, 0.25);
}

input[type="text"]::placeholder,
textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Form field container */
.form-field {
    display: inline-flex;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 10px;
}

.form-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    align-items: flex-end;
}

/* Table input styling */
table input[type="text"],
table select {
    width: 100%;
    min-width: 80px;
    padding: 6px 8px;
    font-size: 0.9rem;
}

table td {
    padding: 4px;
}

/* Select dropdown styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

/* Small input variant for table cells */
.input-sm {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* Remove button in table */
.remove {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.remove:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: scale(1.05);
}

/* Analysis Table Styling */
#analysisTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

#analysisTable th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid #0976a8;
}

#analysisTable td {
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
}

#analysisTable tr:last-child td {
    border-bottom: none;
}

#analysisTable tr:hover {
    background-color: #f8f9fa;
}

/* Product Item Cards */
.product-item {
    transition: all 0.2s ease;
}

.product-item:hover {
    border-color: #0DA7DF !important;
    box-shadow: 0 2px 8px rgba(13, 167, 223, 0.15);
    transform: translateY(-1px);
}

.element-info {
    transition: all 0.2s ease;
}

/* Textarea styling */
.noteArea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.noteArea:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/* Pie Chart Modal Styles */
.pie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.pie-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.7);
    }
}

.pie-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    z-index: 10001;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translate(-50%, -48%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.pie-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
    z-index: 10002;
}

.pie-modal-close:hover {
    color: #333;
}

.pie-modal-title {
    margin: 0 0 20px 0;
    padding-right: 40px;
    color: #0DA7DF;
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: 2px solid #0DA7DF;
    padding-bottom: 10px;
}

.pie-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.pie-modal-hint {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    margin-top: 20px;
    font-style: italic;
}

/* Make pie charts visually indicate they're clickable */
#normsPieChart,
[id^="orchard"][id$="PieChart"] {
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#normsPieChart:hover,
[id^="orchard"][id$="PieChart"]:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

#normsPieChart::after,
[id^="orchard"][id$="PieChart"]::after {
    content: '🔍 Click to enlarge';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 167, 223, 0.95);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#normsPieChart:hover::after,
[id^="orchard"][id$="PieChart"]:hover::after {
    opacity: 1;
}

/* Orchard charts grid layout */
.orchard-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.orchard-chart-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.orchard-chart-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Analysis Report Styles */
.analysis-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #0DA7DF;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.legend-positive {
    background: #0FFF3C;
}

.legend-negative {
    background: #FF4B4B;
}

.legend-warning {
    background: orange;
}

.report-section {
    margin: 30px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.report-section h3 {
    color: #0DA7DF;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #0DA7DF;
}

.norms-display {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.norms-table-section {
    flex: 1;
    min-width: 300px;
}

.norms-chart-section {
    flex: 0 0 auto;
}

.table-scroll-wrapper {
    overflow-x: auto;
    margin: 15px 0;
}

.table-scroll-wrapper table {
    min-width: 100%;
    border-collapse: collapse;
    background: white;
}

.table-scroll-wrapper table th {
    background: #0DA7DF;
    color: white;
    font-weight: 600;
    padding: 10px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-scroll-wrapper table td {
    padding: 8px 10px;
    border: 1px solid #dee2e6;
}

/* Harvest Page Styling */
.harvest-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #0DA7DF;
}

.harvest-form-fields .field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

.harvest-form-fields .field-group label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.harvest-form-fields input[type="text"],
.harvest-form-fields select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.harvest-form-fields input[type="text"]:focus,
.harvest-form-fields select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

.harvest-info-display {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border-left: 4px solid #0DA7DF;
}

.harvest-info-display .info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.harvest-info-display .info-item strong {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.harvest-info-display .info-item span {
    font-size: 1rem;
    color: #212529;
    font-weight: 500;
}

/* Block Details */
.block-details-container {
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.block-details-container .add-block-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.block-details-container .add-block-link:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
}

.block-details-container .add-block-link::before {
    content: '+';
    font-size: 1.2rem;
    font-weight: bold;
}

/* Block details: stack multiple blocks vertically */
.block-details-container #blockDetails {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* Each block row: Block Number, Block Size, Tonnes on the same line */
.block-details-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    padding: 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.block-details-row .field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 120px;
}

/* Tabs Styling */
#tabs {
    margin: 30px 0;
}

#tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid #dee2e6;
    background: #f8f9fa;
    padding: 10px 10px 0;
    border-radius: 8px 8px 0 0;
}

#tabs ul li {
    margin: 0;
}

#tabs ul li a {
    display: block;
    padding: 12px 20px;
    background: white;
    color: #495057;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-bottom: none;
}

#tabs ul li a:hover {
    background: #e9ecef;
    color: #0DA7DF;
}

#tabs ul li.ui-tabs-active a {
    background: #0DA7DF;
    color: white;
    border-color: #0DA7DF;
}

#tabs > div {
    padding: 25px;
    background: white;
    border: 2px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Elements Table */
#tabs table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#tabs table th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#tabs table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

#tabs table td:last-child {
    border-right: none;
}

#tabs table tr:last-child td {
    border-bottom: none;
}

#tabs table tr:hover {
    background: #f8f9fa;
}

#tabs table a.elementLink {
    color: #0DA7DF;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

#tabs table a.elementLink:hover {
    color: #0b8fc7;
    text-decoration: underline;
}

/* Calculation toggles */
.showCalculations,
.hideCalculations {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 10px 0;
}

.showCalculations:hover,
.hideCalculations:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.showCalculations::before {
    content: '▼';
}

.hideCalculations::before {
    content: '▲';
}

/* Product application section */
.applyProduct {
    padding: 15px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    margin: 15px 0;
}

.applyProduct span {
    color: #856404;
    font-weight: 600;
}

/* Product checkboxes and inputs */
.product {
    margin-right: 10px;
}

.txtQuantity {
    width: 80px;
    margin: 0 8px;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.noteArea {
    width: 100%;
    max-width: 600px;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin: 8px 0;
    font-family: inherit;
    resize: vertical;
}

.noteArea:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/* Unit indicators */
.unit-indicator {
    color: #6c757d;
    font-style: italic;
    font-size: 0.85rem;
}

/* Section Headers within Tabs */
#tabs h3 {
    color: #0DA7DF;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 20px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #0DA7DF;
}

/* Product list styling */
#tabs .product-list-item {
    padding: 12px;
    margin: 10px 0;
    background: #f8f9fa;
    border-left: 3px solid #0DA7DF;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#tabs .product-list-item:hover {
    background: #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#tabs .product-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Applied products table */
#tabs .applied-products-table {
    margin-top: 20px;
}

/* Reports Filter Section */
.reports-filter-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-field {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.filter-field label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.filter-actions {
    min-width: 120px;
}

/* Form Controls */
.form-control,
input[type="text"].form-control,
select.form-control {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
input[type="text"].form-control:focus,
select.form-control:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/* Reports Table */
.reports-table {
    width: 100%;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.reports-table thead {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
}

.reports-table thead th {
    color: white;
    font-weight: 600;
    padding: 14px 12px;
    text-align: left;
    border: none;
}

.reports-table tbody tr {
    transition: background-color 0.2s ease;
}

.reports-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.reports-table tbody tr:hover {
    background-color: #e9f7fd;
}

.reports-table tbody td {
    padding: 12px;
    border: 1px solid #dee2e6;
    border-left: none;
    border-right: none;
}

.reports-table tbody tr:last-child td {
    border-bottom: none;
}

/* Action Links */
.action-cell {
    white-space: nowrap;
}

.action-link {
    display: inline-block;
    padding: 5px 12px;
    margin-right: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.view-link {
    background-color: #0DA7DF;
    color: white;
}

.view-link:hover {
    background-color: #0b8fc7;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(13, 167, 223, 0.3);
}

.edit-link {
    background-color: #6c757d;
    color: white;
}

.edit-link:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 20px;
}

/* Pagination Wrapper */
.pagination-wrapper {
    margin-top: 20px;
    padding: 15px 0;
    text-align: center;
}

/* No Results Message */
.no-results-message {
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
    font-size: 1.1rem;
    margin-top: 20px;
}

/* Reports Page Styling */
.report-section {
    margin: 30px 0;
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-section h3 {
    color: #0DA7DF;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #0DA7DF;
    display: block !important;
}

/* Enhanced table styling for reports */
.report-section table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.report-section table th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
    font-weight: 600;
    text-align: center;
    padding: 14px 10px;
    font-size: 0.9rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-section table th:last-child {
    border-right: none;
}

.report-section table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    font-size: 0.9rem;
    background: white;
    transition: background-color 0.2s ease;
}

.report-section table td:last-child {
    border-right: none;
}

.report-section table tr:last-child td {
    border-bottom: none;
}

.report-section table tr:hover td {
    background-color: #f8f9fa !important;
}

/* Color-coded analysis results with modern styling */
.report-section table td[style*="background: #0FFF3C"],
.report-section table td[style*="background:#0FFF3C"] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    color: #155724 !important;
    font-weight: 700;
    border: 2px solid #b1dfbb;
}

.report-section table td[style*="background: #FF4B4B"],
.report-section table td[style*="background:#FF4B4B"] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
    color: #721c24 !important;
    font-weight: 700;
    border: 2px solid #f1aeb5;
}

.report-section table td[style*="background: orange"] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    color: #856404 !important;
    font-weight: 700;
    border: 2px solid #ffd700;
}

/* Norms section with pie chart layout */
.norms-display {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 20px 0;
}

.norms-table-section {
    flex: 1;
    min-width: 400px;
}

.norms-chart-section {
    flex: 0 0 320px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #e9ecef;
}

/* Pie chart grid for orchard charts */
.orchard-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.orchard-chart-item {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.orchard-chart-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(13, 167, 223, 0.2);
    border-color: #0DA7DF;
}

/* Table wrapper for horizontal scrolling */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Enhanced link styling in analysis tables */
.report-section a.plainAnchor {
    color: #0DA7DF;
    text-decoration: none;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.report-section a.plainAnchor:hover {
    background: #0DA7DF;
    color: white;
    text-decoration: none;
}

/* Legend for color coding */
.analysis-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #0DA7DF;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.legend-positive {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}

.legend-negative {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}

.legend-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
}

/* Reports Index/List Page Styling */
.reports-filter-section {
    background: white;
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #0DA7DF;
}

.filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
}

.filter-field label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.filter-field input[type="text"],
.filter-field select {
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.filter-field input[type="text"]:focus,
.filter-field select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

.filter-actions {
    flex: 0 0 auto;
    min-width: auto;
}

/* Reports table styling */
.reports-table {
    width: 100%;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.reports-table thead {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
}

.reports-table th {
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reports-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.reports-table tbody tr:hover {
    background-color: #f8f9fa;
}

.reports-table tbody tr:last-child {
    border-bottom: none;
}

.reports-table td {
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #495057;
}

.action-cell {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.view-link {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
}

.view-link:hover {
    background: linear-gradient(135deg, #0b8fc7 0%, #0976a8 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(13, 167, 223, 0.3);
}

.edit-link {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.edit-link:hover {
    background: linear-gradient(135deg, #5a6268 0%, #545b62 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(108, 117, 125, 0.3);
}

/* Pagination wrapper */
.pagination-wrapper {
    margin: 25px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* No results message */
.no-results-message {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 30px 0;
}

/* Pie Chart Modal Styles */
.pie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.pie-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    z-index: 10001;
}

.pie-modal-title {
    font-size: 1.5rem;
    color: #0DA7DF;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #0DA7DF;
    font-weight: 600;
}

.pie-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 20px;
}

.pie-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #6c757d;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 300;
}

.pie-modal-close:hover {
    background: #f8f9fa;
    color: #dc3545;
    transform: rotate(90deg);
}

.pie-modal-hint {
    text-align: center;
    margin-top: 20px;
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

/* Make pie charts appear clickable */
.orchard-chart-item span,
.norms-chart-section span {
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

.orchard-chart-item span:hover,
.norms-chart-section span:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(13, 167, 223, 0.2);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive modal */
@media (max-width: 768px) {
    .pie-modal-content {
        padding: 20px;
        max-width: 95%;
    }
    
    .pie-modal-title {
        font-size: 1.25rem;
    }
    
    .pie-modal-body {
        min-height: 300px;
        padding: 10px;
    }
}

.element{
    width: 25px;
}

/* Scrollable Table Containers */
.table-scroll-wrapper {
    width: 100%;
    margin: 20px 0;
    overflow: hidden;
}

.table-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.table-scroll-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

.table-scroll-container::-webkit-scrollbar-thumb {
    background: #0DA7DF;
    border-radius: 6px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #0b8fc7;
}

/* Analysis Table Styling */
.analysis-table,
#analysisTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 0.9rem;
}

.analysis-table th,
#analysisTable th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
    border-bottom: 2px solid #0976a8;
}

.analysis-table td,
#analysisTable td {
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
    background: white;
    vertical-align: middle;
}

.analysis-table tr:hover td,
#analysisTable tr:hover td {
    background: #f8f9fa;
}

.analysis-table input[type="text"],
.analysis-table select,
#analysisTable input[type="text"],
#analysisTable select {
    width: 100%;
    min-width: 80px;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
}

.analysis-table input[type="text"]:focus,
.analysis-table select:focus,
#analysisTable input[type="text"]:focus,
#analysisTable select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

.analysis-table .remove,
#analysisTable .remove {
    padding: 4px 10px;
    min-width: auto;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.analysis-table .remove:hover,
#analysisTable .remove:hover {
    background: #c82333;
    transform: scale(1.05);
}

/* Form row styling for analysis page */
.form-row {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

.form-field label {
    font-weight: 600;
    color: #212529;
    font-size: 0.9rem;
}

.form-field input[type="text"],
.form-field select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.form-field input[type="text"]:focus,
.form-field select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/*.plainAnchor a:link, a:visited{*/
    /*color:#0000ff;*/
/*}*/

/* ========================================
   ENHANCED SCROLLABLE TABLE WRAPPER
   ======================================== */

/* Improved table scroll wrapper for Analysed Data */
.table-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 600px !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    background: #fff !important;
    position: relative !important;
}

/* Custom scrollbar for table wrapper */
.table-scroll-wrapper::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #0DA7DF;
    border-radius: 8px;
    border: 2px solid #f1f1f1;
}

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

.table-scroll-wrapper::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Sticky table headers for scrollable tables */
.table-scroll-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 !important;
}

.table-scroll-wrapper table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
}

.table-scroll-wrapper table th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 12px 8px !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.table-scroll-wrapper table td {
    padding: 10px 8px !important;
    border: 1px solid #dee2e6 !important;
    text-align: center !important;
    background: #fff;
    min-width: 80px;
}

/* Alternating row colors for better readability */
.table-scroll-wrapper table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.table-scroll-wrapper table tbody tr:hover {
    background-color: #e9f5fb !important;
}

/* First column (Orchard) sticky for horizontal scroll */
.table-scroll-wrapper table td:first-child,
.table-scroll-wrapper table th:first-child {
    position: sticky;
    left: 0;
    z-index: 9;
    background: inherit;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.table-scroll-wrapper table th:first-child {
    z-index: 11 !important;
}

/* Second column (Lab #) sticky */
.table-scroll-wrapper table td:nth-child(2),
.table-scroll-wrapper table th:nth-child(2) {
    position: sticky;
    left: 120px;
    z-index: 9;
    background: inherit;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.table-scroll-wrapper table th:nth-child(2) {
    z-index: 11 !important;
}

/* Scroll indicator shadows */
.table-scroll-wrapper::before,
.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 8;
}

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

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

/* Scroll hint message */
.scroll-hint {
    text-align: center;
    padding: 10px;
    background: #e9f5fb;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 0.9rem;
    color: #0DA7DF;
    display: none;
}

@media (max-width: 992px) {
    .scroll-hint {
        display: block;
    }
    
    .table-scroll-wrapper {
        max-height: 500px !important;
    }
}

/* Links in scrollable table cells */
.table-scroll-wrapper a.plainAnchor {
    color: #0DA7DF;
    text-decoration: none;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
    display: inline-block;
}

.table-scroll-wrapper a.plainAnchor:hover {
    background: #0DA7DF;
    color: white;
    text-decoration: none;
}

/* ========================================
   SCROLLABLE TABLES - HARVEST ELEMENTS
   ======================================== */

/* Table scroll wrapper for horizontal scrolling */
.table-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    background: #fff !important;
    position: relative !important;
}

/* Add scroll indicator shadow */
.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-scroll-wrapper:not(.scrolled-end)::after {
    opacity: 1;
}

/* Style tables inside scroll wrapper */
.table-scroll-wrapper table {
    margin: 0 !important;
    min-width: 100% !important;
    white-space: nowrap !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Ensure table headers stick during scroll */
.table-scroll-wrapper table th {
    position: sticky !important;
    top: 0 !important;
    background: #f8f9fa !important;
    z-index: 10 !important;
    font-weight: 600 !important;
    padding: 12px 8px !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Table cell styling */
.table-scroll-wrapper table td {
    padding: 10px 8px !important;
    border: 1px solid #dee2e6 !important;
}

/* Alternate row coloring for better readability */
.table-scroll-wrapper table tr:nth-child(even) {
    background-color: #f8f9fa !important;
}

.table-scroll-wrapper table tr:hover {
    background-color: #e9ecef !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .table-scroll-wrapper {
        border-radius: 4px !important;
        margin: 10px -10px !important;
        width: calc(100% + 20px) !important;
    }
    
    .table-scroll-wrapper table th,
    .table-scroll-wrapper table td {
        padding: 8px 6px !important;
        font-size: 0.85rem !important;
    }
}

/* Scrollbar styling for webkit browsers */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px !important;
}

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

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #0DA7DF !important;
    border-radius: 4px !important;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #0b8fc7 !important;
}

/* ========================================
   FIX: Make quantity input fields usable
   ======================================== */

/* Update element class for quantity inputs */
.element {
    width: 25px !important;
}

/* Quantity input fields should be larger */
input.txtQuantity,
input[name*="txtQuantity"] {
    width: 80px !important;
    padding: 6px 10px !important;
    font-size: 0.95rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #212529 !important;
    text-align: right !important;
}

input.txtQuantity:focus,
input[name*="txtQuantity"]:focus {
    border-color: #0DA7DF !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1) !important;
}

input.txtQuantity:read-only,
input[name*="txtQuantity"]:read-only {
    background: #e9ecef !important;
    cursor: not-allowed !important;
}

/* Product list styling improvements */
.product-list-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

.product-list-item:hover {
    background: #ffffff;
    border-color: #0DA7DF;
    box-shadow: 0 2px 6px rgba(13, 167, 223, 0.15);
}

.product-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 500;
}

.product-list-item .unit-indicator {
    font-weight: 600;
    color: #6c757d;
    margin-left: 4px;
}

/* Notes textarea in product list */
.product-list-item .noteArea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    resize: vertical;
    margin-top: 8px;
}

.product-list-item .noteArea:focus {
    border-color: #0DA7DF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/* Associated Products section header */
h3 {
    color: #0DA7DF;
    font-weight: 600;
}

/* ========================================
   HARVEST PRODUCT QUANTITY INPUTS FIX
   ======================================== */

/* Fix for quantity input boxes */
.quantity-input {
    width: 100px !important;
    min-width: 80px !important;
    padding: 6px 10px !important;
    font-size: 0.95rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    margin: 0 10px !important;
}

.quantity-input:focus {
    outline: none !important;
    border-color: #0DA7DF !important;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1) !important;
}

/* Product list item layout */
.product-list-item {
    display: block;
    padding: 12px;
    margin: 8px 0;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.product-selection {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.product-selection input[type="checkbox"] {
    width: auto !important;
    margin-right: 10px;
}

.product-selection label {
    font-weight: 600;
    color: #495057;
    margin: 0;
    white-space: nowrap;
}

.product-name {
    flex: 1;
    color: #212529;
    font-size: 0.95rem;
}

.notes-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
}

.notes-container textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    resize: vertical;
}

/* Override the old element class for non-quantity uses */
.element:not(.quantity-input) {
    width: 25px !important;
}

/* ========================================
   ENHANCED REPORT TABLE STYLING
   ======================================== */

/* Base Report Table Styles */
.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 20px 0;
    font-size: 0.9rem;
}

.report-table thead {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
}

.report-table thead tr {
    background: transparent;
}

.report-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.report-table th:last-child {
    border-right: none;
}

.report-table tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #e9ecef;
}

.report-table tbody tr:last-child {
    border-bottom: none;
}

.report-table tbody tr:hover {
    background-color: #f8f9fa;
}

.report-table td {
    padding: 12px;
    color: #495057;
    border-right: 1px solid #e9ecef;
    vertical-align: middle;
}

.report-table td:last-child {
    border-right: none;
}

/* Analysis Table Specific Styles */
.analysis-table td[align="center"] {
    text-align: center !important;
    font-weight: 500;
}

.analysis-table td[style*="background: #0FFF3C"] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    font-weight: 600;
    color: #155724;
}

.analysis-table td[style*="background: #FF4B4B"] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
    font-weight: 600;
    color: #721c24;
}

.analysis-table td[style*="background: orange"] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    font-weight: 600;
    color: #856404;
}

/* Products Table Styles */
.products-table th {
    min-width: 150px;
}

.products-table td {
    line-height: 1.6;
}

.products-table td strong {
    color: #0DA7DF;
    font-weight: 600;
}

/* Scroll Hint */
.scroll-hint {
    text-align: center;
    padding: 10px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    border-radius: 6px;
    margin: 15px 0;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 4px solid #0DA7DF;
}

/* Enhanced Table Scroll Wrapper */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

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

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

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

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

/* Responsive Table Adjustments */
@media (max-width: 768px) {
    .report-table {
        font-size: 0.8rem;
    }
    
    .report-table th {
        padding: 10px 8px;
        font-size: 0.75rem;
    }
    
    .report-table td {
        padding: 8px 6px;
    }
    
    .scroll-hint {
        font-size: 0.85rem;
        padding: 8px;
    }
}

/* Striped Rows Option */
.report-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.report-table tbody tr:nth-child(even):hover {
    background-color: #e9ecef;
}

/* Links in Tables */
.report-table a.plainAnchor {
    color: #0DA7DF;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.report-table a.plainAnchor:hover {
    background: #0DA7DF;
    color: white;
    text-decoration: none;
}

/* Unit Indicators */
.report-table th .unit-indicator {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 2px;
}

/* Table Loading State */
.table-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty Table State */
.table-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-style: italic;
}

/* Print Styles for Tables */
@media print {
    .report-table {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
    
    .report-table thead {
        background: #f8f9fa !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .report-table th {
        color: #000000 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    .report-table td {
        border: 1px solid #dee2e6 !important;
    }
    
    .scroll-hint {
        display: none;
    }
}

/* ========================================
   LANDING PAGE IMAGE - RESPONSIVE
   ======================================== */

.landing-page-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.landing-page-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Maintain aspect ratio on larger screens */
@media (min-width: 1280px) {
    .landing-page-container {
        max-width: 1250px;
    }
}

/* Better aspect ratio on tablets */
@media (max-width: 992px) {
    .landing-page-image {
        max-height: 350px ;
    }
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .landing-page-image {
        max-height: 250px;
    }
    
    .landing-page-container {
        border-radius: 4px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .landing-page-image {
        max-height: 200px;
    }
}

/* ========================================
   OVERFLOW PREVENTION
   ======================================== */

/* Ensure content wrapper prevents overflow */
.content-wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

.content-wrapper > * {
    max-width: 100%;
}

/* Prevent images from overflowing */
.content-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Prevent tables from overflowing */
.content-wrapper table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Fix for any remaining overflow issues */
body {
    overflow-x: hidden;
}

#page-wrapper {
    overflow-x: hidden;
}

/* ========================================
   LANDING PAGE CENTERED LAYOUT
   ======================================== */

/* Center the landing page container and image */
.landing-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.landing-page-image {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    object-fit: contain;
}

/* Center menu items horizontally when on landing page */
.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0 auto;
    padding: 20px 0;
}

.nav-item {
    margin: 0;
}

.nav-link {
    display: inline-block;
    padding: 14px 28px;
    color: #2c3e50;
    text-decoration: none;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #e9ecef;
    min-width: 120px;
    text-align: center;
}

.nav-link:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #0DA7DF;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-color: #0DA7DF;
}

.nav-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.nav-link:focus {
    outline: 3px solid rgba(13, 167, 223, 0.3);
    outline-offset: 2px;
    border-color: #0DA7DF;
}

/* Main navigation wrapper */
.main-navigation {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 15px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 20px 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments for landing page */
@media (max-width: 768px) {
    .landing-page-container {
        padding: 20px 10px;
    }
    
    .landing-page-image {
        max-height: 60vh;
        border-radius: 8px;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 12px;
        padding: 15px 0;
    }
    
    .nav-link {
        width: 100%;
        max-width: 320px;
        text-align: center;
        padding: 16px 24px;
        font-size: 1.05rem;
    }
}

/* Ensure content wrapper centers everything on landing page */
.content-wrapper > .landing-page-container {
    min-height: calc(100vh - 250px);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================
   ANALYSIS TABLE STYLING
   ======================================== */

/* Table wrapper with scroll */
.table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: white;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-container {
    min-width: 100%;
    overflow: visible;
}

/* Analysis Table */
.analysis-table,
#analysisTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    background: white;
    margin: 0;
}

.analysis-table th,
#analysisTable th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 12px 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0976a8;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.analysis-table th:first-child,
#analysisTable th:first-child {
    border-top-left-radius: 8px;
    padding-left: 15px;
}

.analysis-table th:last-child,
#analysisTable th:last-child {
    border-top-right-radius: 8px;
    padding-right: 15px;
}

.analysis-table td,
#analysisTable td {
    padding: 8px;
    border-bottom: 1px solid #e9ecef;
    background: white;
    vertical-align: middle;
}

.analysis-table td:first-child,
#analysisTable td:first-child {
    padding-left: 15px;
}

.analysis-table td:last-child,
#analysisTable td:last-child {
    padding-right: 15px;
}

.analysis-table tr:hover td,
#analysisTable tr:hover td {
    background-color: #f8f9fa;
}

.analysis-table tr:last-child td:first-child,
#analysisTable tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.analysis-table tr:last-child td:last-child,
#analysisTable tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Table input fields styling */
.analysis-table input[type="text"],
#analysisTable input[type="text"],
.analysis-table select,
#analysisTable select {
    width: 100%;
    min-width: 80px;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.analysis-table input[type="text"]:focus,
#analysisTable input[type="text"]:focus,
.analysis-table select:focus,
#analysisTable select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
    background: #fff;
}

/* Remove button in table */
.analysis-table .remove,
#analysisTable .remove {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    min-width: 30px;
}

.analysis-table .remove:hover,
#analysisTable .remove:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

/* Alternate row colors for better readability */
.analysis-table tbody tr:nth-child(even) td,
#analysisTable tbody tr:nth-child(even) td {
    background-color: #f8f9fa;
}

.analysis-table tbody tr:nth-child(even):hover td,
#analysisTable tbody tr:nth-child(even):hover td {
    background-color: #e9ecef;
}

/* Compact table cells for better space usage */
.analysis-table td,
#analysisTable td {
    padding: 6px 4px;
}

/* Better select dropdown styling */
.analysis-table select,
#analysisTable select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 28px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .analysis-table,
    #analysisTable {
        font-size: 0.8rem;
    }
    
    .analysis-table th,
    #analysisTable th {
        padding: 10px 6px;
        font-size: 0.75rem;
    }
    
    .analysis-table input[type="text"],
    #analysisTable input[type="text"],
    .analysis-table select,
    #analysisTable select {
        min-width: 60px;
        padding: 4px 6px;
        font-size: 0.8rem;
    }
}

/* Loading state for table */
.analysis-table.loading,
#analysisTable.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty state */
.analysis-table tbody:empty::after,
#analysisTable tbody:empty::after {
    content: 'No data available';
    display: table-cell;
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-style: italic;
}

/* Highlight required fields with error */
.analysis-table input.error,
#analysisTable input.error,
.analysis-table select.error,
#analysisTable select.error {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.analysis-table input.error:focus,
#analysisTable input.error:focus,
.analysis-table select.error:focus,
#analysisTable select.error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* ========================================
   ANALYSIS TABLE STYLING
   ======================================== */

/* Table wrapper for scrolling */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 25px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: white;
}

.table-scroll-container {
    min-width: 100%;
    overflow-x: auto;
}

/* Analysis Table Base Styles */
#analysisTable,
.analysis-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    font-size: 0.9rem;
    margin: 0;
}

/* Table Headers */
#analysisTable th,
.analysis-table th {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid #0976a8;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

#analysisTable th:last-child,
.analysis-table th:last-child {
    border-right: none;
}

/* Table Cells */
#analysisTable td,
.analysis-table td {
    padding: 8px 6px;
    border-right: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
    vertical-align: middle;
    background: white;
}

#analysisTable td:last-child,
.analysis-table td:last-child {
    border-right: none;
    background: #f8f9fa;
}

/* Table Rows */
#analysisTable tr:hover td,
.analysis-table tr:hover td {
    background: #f0f8ff;
}

#analysisTable tr:last-child td,
.analysis-table tr:last-child td {
    border-bottom: none;
}

/* Input fields in table */
#analysisTable input[type="text"],
.analysis-table input[type="text"] {
    width: 100%;
    min-width: 70px;
    max-width: 120px;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#analysisTable input[type="text"]:focus,
.analysis-table input[type="text"]:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
    background: #fff;
}

/* Select dropdowns in table */
#analysisTable select,
.analysis-table select {
    width: 100%;
    min-width: 120px;
    max-width: 180px;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#analysisTable select:focus,
.analysis-table select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/* Remove button in table */
#analysisTable .remove,
.analysis-table .remove {
    padding: 4px 10px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    min-width: auto !important;
}

/* Alternating row colors */
#analysisTable tbody tr:nth-child(even),
.analysis-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

#analysisTable tbody tr:nth-child(even):hover,
.analysis-table tbody tr:nth-child(even):hover {
    background: #e9f5ff;
}

/* Special styling for specific columns */
#analysisTable td:first-child,
.analysis-table td:first-child {
    font-weight: 500;
    background: #fafbfc;
}

#analysisTable td:first-child input,
.analysis-table td:first-child input {
    font-weight: 500;
}

/* Responsive adjustments for analysis table */
@media (max-width: 1200px) {
    #analysisTable,
    .analysis-table {
        font-size: 0.85rem;
    }
    
    #analysisTable th,
    .analysis-table th {
        padding: 10px 6px;
        font-size: 0.8rem;
    }
    
    #analysisTable td,
    .analysis-table td {
        padding: 6px 4px;
    }
    
    #analysisTable input[type="text"],
    .analysis-table input[type="text"] {
        min-width: 60px;
        padding: 5px 6px;
        font-size: 0.8rem;
    }
    
    #analysisTable select,
    .analysis-table select {
        min-width: 100px;
        padding: 5px 6px;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .table-scroll-wrapper {
        margin: 15px -10px;
        border-radius: 0;
    }
    
    #analysisTable,
    .analysis-table {
        font-size: 0.8rem;
    }
    
    #analysisTable th,
    .analysis-table th {
        padding: 8px 4px;
        font-size: 0.75rem;
    }
    
    #analysisTable td,
    .analysis-table td {
        padding: 5px 3px;
    }
    
    #analysisTable input[type="text"],
    .analysis-table input[type="text"] {
        min-width: 50px;
        max-width: 90px;
        padding: 4px 5px;
        font-size: 0.75rem;
    }
}

/* Loading state */
#analysisTable.loading,
.analysis-table.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty state message */
.analysis-table-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 1rem;
}

/* Table caption/title */
.analysis-table-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0DA7DF;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

/* Data validation states */
#analysisTable input.error,
.analysis-table input.error {
    border-color: #dc3545;
    background: #fff5f5;
}

#analysisTable input.valid,
.analysis-table input.valid {
    border-color: #28a745;
}

/* Focus row highlight */
#analysisTable tr:focus-within,
.analysis-table tr:focus-within {
    background: #e3f2fd !important;
    box-shadow: inset 0 0 0 2px #0DA7DF;
}

/* Column width hints for better layout */
#analysisTable th:nth-child(1),
#analysisTable td:nth-child(1) {
    min-width: 100px; /* Orchard */
}

#analysisTable th:nth-child(2),
#analysisTable td:nth-child(2) {
    min-width: 90px; /* Lab # */
}

#analysisTable th:nth-child(3),
#analysisTable td:nth-child(3) {
    min-width: 120px; /* Ground Type/Produce */
}

/* Element columns (N, P, K, etc.) */
#analysisTable th:nth-child(n+4):nth-child(-n+17),
#analysisTable td:nth-child(n+4):nth-child(-n+17) {
    min-width: 80px;
}

/* Remove button column */
#analysisTable th:last-child,
#analysisTable td:last-child {
    min-width: 60px;
    width: 60px;
}

/* ========================================
   DATA TABLE STYLING (User & Analysis Tables)
   ======================================== */

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: white;
}

/* Data table styling */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.data-table thead {
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
}

.data-table thead th {
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0976a8;
}

.data-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
    background-color: #f8f9fa;
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table tbody td {
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #495057;
    vertical-align: middle;
}

/* Input fields in tables */
.data-table input[type="text"],
.data-table input[type="number"],
.data-table select {
    width: 100%;
    min-width: 80px;
    padding: 6px 8px;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.data-table input[type="text"]:focus,
.data-table input[type="number"]:focus,
.data-table select:focus {
    outline: none;
    border-color: #0DA7DF;
    box-shadow: 0 0 0 3px rgba(13, 167, 223, 0.1);
}

/* Action links in tables */
.data-table .action-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #0DA7DF 0%, #0b8fc7 100%);
    color: white;
}

.data-table .action-link:hover {
    background: linear-gradient(135deg, #0b8fc7 0%, #0976a8 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(13, 167, 223, 0.3);
    text-decoration: none;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.status-inactive {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

/* Type badges */
.type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.type-admin {
    background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
    color: #383d41;
}

.type-user {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
}

.type-client {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.type-agent {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

/* Remove buttons in tables */
.data-table .remove {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.data-table .remove:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .data-table thead th {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .data-table tbody td {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}