/* General styles */
body {
    font-family: sans-serif;
    font-size: 90%
}

/* Data provider error banner */
.data-error-banner {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: #3b2e00;
    font-size: 0.9rem;
}

.data-error-banner strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.data-error-banner p {
    margin: 0.25rem 0;
    color: #3b2e00;
}

.data-error-banner ul {
    margin: 0.35rem 0 0.35rem 1.25rem;
    padding: 0;
}

.data-error-banner li {
    margin-bottom: 0.15rem;
    color: #3b2e00;
}

/* Full-page error layout */
.data-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.data-error-page .error-page-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 0.5rem;
}

.data-error-page h2 {
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.data-error-page .data-error-banner {
    max-width: 500px;
    text-align: left;
}

/* Style for the main fluid container to remove top spacing */
main.container-fluid {
    padding-top: 0;
    margin-top: 0;
}

h1 {
    color: #2c3e50; /* Dark blue, adjust as needed */
    vertical-align: middle;
}

/* Header container styles */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.last-updated {
    font-size: 1.25rem;
    font-weight: bold;
    background-color: #f0f0f0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
    }
}

/* Matrix table styles */
.matrix-table table {
    border-collapse: collapse;
    width: auto;
    table-layout: fixed;
}

.matrix-table th, .matrix-table td {
    border: 1px solid #ccc;
    padding: 0.25rem 0.5rem;
    text-align: right;
    min-width: 4.25rem;
}

.matrix-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.matrix-table td:first-child, .matrix-table th:first-child {
    text-align: left;
    background-color: #f8f8f8;
    font-weight: bold;
    width: 6.75rem;
    white-space: nowrap;
    padding-left: .25rem;
}

.matrix-input {
    text-align: right; /* Keep if inputs should always be right-aligned */
    font-size: inherit;
    padding: .25rem !important;
    margin: 0 !important; /* Ensure all margins are 0, overriding Pico */
}

.matrix-input.basis-select {
    -webkit-appearance: none !important; /* Safari / Chrome */
    -moz-appearance: none !important;    /* Firefox */
    appearance: none !important;         /* Spec */
    background-image: none !important;   /* Ensure no default arrow image */
    text-align: right;
    padding-right: .50rem !important; /* Use padding-right for internal spacing */
    direction: rtl; /* Forces text alignment right in Safari */
    /* Reset dropdown direction after selection */
    unicode-bidi: isolate-override;
}

/* Ensure the select options remain left-aligned in the dropdown menu */
.matrix-input.basis-select option {
    direction: ltr;
    text-align: right;
}

.matrix-input.basis-select::-ms-expand { /* IE11 */
    display: none !important;
}

.matrix-input[data-input-type="start_bid_price"] {
    text-align: left;
    padding-left: .25em !important;
}

/* Apply consistent column widths across tables */
#summary-matrix table, #results-matrix table {
    width: 100%;
}

/* Remove increment arrows from number inputs */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cattle-header-logo {
    width: 2.25em;
    height: auto;
    vertical-align: middle;
    margin-right: 0.625rem;
}

/* Form styles */
/* #calculator-form div {
    margin-bottom: 10px;
} */

/* #calculator-form label {
    display: inline-block;
    width: 150px;
} */

.profit {
    background-color: #d4edda; /* Light green */
}
.loss {
    background-color: #f8d7da; /* Light red */
}

/* CSS variables for dynamic Lab-based color stops */
:root {
    --profit-1: #c8e6c9;
    --profit-2: #a5d6a7;
    --profit-3: #81c784;
    --profit-4: #66bb6a;
    --profit-5: #388e3c;
    --loss-1: #ffcdd2;
    --loss-2: #ef9a9a;
    --loss-3: #e57373;
    --loss-4: #ef5350;
    --loss-5: #c62828;
}

/* Profit spectrum using CSS variables */
.profit-1 { background-color: var(--profit-1); }
.profit-2 { background-color: var(--profit-2); }
.profit-3 { background-color: var(--profit-3); }
.profit-4 { background-color: var(--profit-4); color: #fff; }
.profit-5 { background-color: var(--profit-5); color: #fff; }

/* Loss spectrum using CSS variables */
.loss-1 { background-color: var(--loss-1); }
.loss-2 { background-color: var(--loss-2); }
.loss-3 { background-color: var(--loss-3); }
.loss-4 { background-color: var(--loss-4); }
.loss-5 { background-color: var(--loss-5); color: #fff; }

.kalmbach-logo {
    height: 7.5em; /* Adjust as needed */
    width: auto;
}

/* Remove bottom margin from top input grid controls */
#calculator-form .grid input[type="number"] {
    margin-bottom: 0 !important; /* Override Pico's default spacing */
}

/* Tooltip for P/L breakdown */
.tooltip {
    position: relative;
    cursor: pointer;
}

.tooltip.tooltip-active .tooltip-content {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltip-content {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    /* Center the content */
    text-align: center;
    border-radius: 4px;
    padding: 0.5rem;
    position: absolute;
    z-index: 1000;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.tooltip-content .calculation-display {
    display: grid;
    grid-template-columns: repeat(7, auto);
    column-gap: 0.4em; /* Adjust for spacing between formula elements */
    row-gap: 0.1em;    /* Adjust for spacing between formula row and value row */
    justify-items: center; /* Center content within each grid cell */
    align-items: center; /* Align items to the center of the cell vertically */
}

/* Style for the first row (formula text) */
.tooltip-content .calculation-display > div:nth-child(-n+7) {
    font-weight: normal; /* Titles like "Sale Value" will not be bold, per previous styling */
}

/* Style for the numeric values (second row, specific columns) */
.tooltip-content .calculation-display > div:nth-child(n+8) {
    text-align: center;
}