@import "variables";
@import "mixins";

// ----- HEADER SECTION RELATED STYLES ----- //
.cageeye-header-logo {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .cageeye-logo {
        margin-right: 20px; // Adjust space to the right of the logo
    }

    .cageeye-title {
        display: flex;
        flex-direction: column;
        justify-content: space-between; // Space between titles
        min-width: 200px;
        color: $heading-font-color;

        .cageeye-title-big {
            font-size: 24px; // Adjust size if necessary
            margin-bottom: 8px; // Adjust vertical space between titles if necessary
        }

        .cageeye-title-small {
            font-size: 16px; // Adjust size if necessary
        }
    }
}

$header-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 0 3px rgba(0, 126, 255, 0.1);

.header-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: 80px;
    position: -webkit-sticky; // Safari
    position: sticky;
    top: 0;
    // 48px icons centered in the 80px header leave 16px above, below, and on the outer sides
    padding: 0 16px;
    background: $background-secondary;
    border-bottom: 1px solid $border-color;
    z-index: 999;

    .cageeye-header-options {
        justify-self: center;
    }

    .cageeye-logo,
    .profile-img {
        height: 48px;
        display: block; // exact 48px box: no inline-baseline gap, so the icons center precisely
        border-radius: 50%;
    }
    .cageeye-header__user {
        margin-right: 0;
        margin-left: auto;
    }
}

.cageeye-header-options-container {
    display: flex;
    height: 100%;
}

.dropdown-label {
    font-size: 12px; // smaller than the 16px picker font
    font-weight: 400;
    color: $heading-font-color; // same as the picker text
    text-align: left;
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: nowrap;
}

.date-picker-container {
    margin: 0 2px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    .mantine-DatePickerInput-input {
        min-width: 300px;
        text-align: center;
        border-color: $border-color;
        background-color: transparent;
        color: $heading-font-color;
        font-weight: 400;
        font-size: 16px;
        padding: 0 10px;

        &::placeholder,
        i {
            color: $placeholder-color !important;
        }
    }
}

// ----- DATE PICKER CALENDAR POPOVER ----- //
// The calendar opens in a portal outside .date-picker-container; the input's popoverProps give
// the panel the date-picker-popover class so it can wear the same dark theme as the Select dropdowns.
// Mantine 7 styles the calendar with hash classes, so the rules below target structure (table/th/button)
// and the data attributes Mantine sets on day buttons (selected, in-range, weekend, outside).
.date-picker-popover {
    // Mantine's light-scheme hover paints PickerControls (the day cells and the month label)
    // with --mantine-color-gray-0, near-white — scope the variables so its own hover rules
    // resolve as the accent tint over this dark panel instead.
    --mantine-color-gray-0: rgba(0, 109, 169, 0.35);
    --mantine-color-gray-1: rgba(0, 109, 169, 0.35);

    background-color: $background-secondary;
    border-color: $border-color;
    color: $heading-font-color; // week numbers and default text

    th,
    td {
        color: $heading-font-color; // weekday letters (otherwise Mantine gray)
    }

    button {
        color: $heading-font-color; // header label, chevrons and day cells

        // Mantine's injected hover rules land after this stylesheet; the !important keeps the
        // translucent tint (the number stays readable through it) from being repainted near-white
        &:hover {
            background-color: rgba($blue4, 0.35) !important;
            color: $heading-font-color !important;
        }

        &[data-in-range] {
            background-color: rgba($blue4, 0.35);
            color: white;
        }

        &[data-selected] {
            background-color: $blue4;
            color: white;
        }

        &[data-weekend] {
            color: $heading-font-color; // not Mantine red
        }

        &[data-outside] {
            opacity: 0.4;
        }
    }
}

.farm-cages-selection-container {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 15px;
    height: 80px;
}

.dropdown {
    position: relative;
    margin: 0 2px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer !important;

    .mantine-Button-label {
        font-size: 16px;
        font-weight: 400;
    }

    #meals-options-container, #cages-options-container {
        display: none;
        position: absolute;
        min-width: 170px;
        background-color: $background-secondary;
        border: 1px solid $border-color;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        z-index: 10;
        padding: 4px; // even on the right, so the rows' highlight boxes are not clipped
        border-radius: 5px;
        margin-top: 8px;
        max-height: 400px; // long periods group many dates
        overflow-y: auto;
    }

    .dropdown-multiselect-button {
        min-width: 170px;
        white-space: nowrap;
        background-color: $background-secondary;
        color: $heading-font-color;
        border: 1px solid $border-color;
        padding: 0 8px 0 12px; // text and stepper sit where the Select input's text and chevron sit

        .mantine-Button-inner {
            width: 100%; // push the label and stepper to opposite edges
            justify-content: space-between;
            gap: 8px;
        }

        .mantine-Button-label {
            text-align: left;
        }

        // the grayed-out look of the disabled Select inputs: dimmed, with the placeholder color
        &:disabled,
        &[data-disabled] {
            opacity: 0.6;
            cursor: not-allowed;

            .mantine-Button-label {
                color: var(--mantine-color-placeholder);
            }
        }
    }

    .select-stepper-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15px; // the footprint of the Select inputs' chevron (its 15x15 viewBox)
        height: 15px;
        color: #868e96; // the same gray as the Select inputs' chevron

        // Mantine's own chevron path, so the button matches the Selects' glyph exactly
        .chevron {
            width: 15px;
            height: 15px;
            background-color: currentColor;
            clip-path: path(
                "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
            );
        }
    }

    &:focus #meals-options-container,
    &:hover #meals-options-container,
    &:hover #cages-options-container,
    &:focus #cages-options-container {
        display: block;
    }
}

.farms-dropdown-container,
.generations-dropdown-container {
    width: 220px;

    .mantine-Select-input{
        background-color: $background-secondary;
        color: $heading-font-color;
        border-color: $border-color;
        font-weight: 400;
        font-size: 16px;
    }
    .mantine-Select-dropdown {
        background-color: $background-secondary;
        border-color: $border-color;
    }
    .mantine-Select-option {
        color: $heading-font-color;
        font-size: 16px;
        &:hover {
            background-color: darken($blue4, 10%); // Slight darkening on hover
            color: white;
        }
    }

    .mantine-Select-groupLabel {
        color: #7F99AA;
        &::after{
            background-color: #7F99AA;
        }
    }
}

/* Styles the floating dropdown panel container */


.cages-sidebar {
    background-color: $background-secondary;
    width: 100%;
}

.units-paragraph {
    padding: 15px 20px;
    text-align: justify;
    border: 2px solid lighten($background-primary, 10%);
    border-radius: 8px;
    background-color: rgba($background-primary, 0.6);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    text-transform: none;
    font-weight: 400;
    letter-spacing: 0.5px;
}


.units-paragraph {
    padding: 15px 20px;
    text-align: justify;
    border: 2px solid lighten($background-primary, 10%);
    border-radius: 8px;
    background-color: rgba($background-primary, 0.6);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    text-transform: none;
    font-weight: 400;
    letter-spacing: 0.5px;
}

// ----- CAGES / MEALS DROPDOWN CHECKBOX OPTIONS ----- //
.dropdown-option-group {
    display: flex;
    align-items: center;
    gap: 8px; // space between the date and the line
    color: #7F99AA; // same group-label look as the farms picker's customer groups
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px; // same metrics as the Select option rows

    &::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #7F99AA;
    }
}

.dropdown-divider {
    height: 1px;
    margin: 2px 10px 4px; // inset like the rows' own padding
    background-color: #7F99AA; // the same gray as the farm picker's customer names
}

.dropdown-option-checkbox {
    width: 100%;
    box-sizing: border-box; // the highlight box stays inside the panel including its padding
    padding: 6px 10px; // same metrics as the Select option rows
    border-radius: 4px;

    // Mantine wraps label + input in a shrink-wrapped div; stretch it and push the box to the right
    > * {
        width: 100%;
        display: flex;
        justify-content: space-between; // text left, checkbox right
        align-items: center;
    }

    .mantine-Checkbox-label {
        color: $heading-font-color;
        font-size: 16px;
    }

    .mantine-Checkbox-input:checked {
        background-color: $blue4; // the picker accent instead of Mantine's default blue
        border-color: $blue4;
    }

    &:hover {
        background-color: darken($blue4, 10%); // same hover as the Select options

        .mantine-Checkbox-label {
            color: white;
        }
    }
}

@keyframes slideInOut {
    0%, 100% { transform: translateY(-50%) rotate(-90deg) translateX(10px); }
    50% { transform: translateY(-50%) rotate(-90deg) translateX(0); }
}

.development-banner {
    position: absolute;
    right: -25vh;
    top: 50vh;
    z-index: 1000;
    background-color: $orange6;
    color: black;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-size: 14px;
    font-family: 'Press Start 2P', cursive;
    font-weight: bold;
    cursor: pointer;
    animation: slideInOut 3s infinite ease-in-out;
    text-orientation: mixed;
    max-height: 60px;
    max-width: 80vh;
    text-align: center;
}

.lang-radio {

    margin-bottom: 1rem;

    .mantine-Radio-body {
        padding: 7px 10px;
        text-align: justify;
        border: 2px solid lighten($background-primary, 10%);
        border-radius: 8px;
        background-color: rgba($background-primary, 0.6);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        text-transform: none;
        font-weight: 400;
        letter-spacing: 0.5px;
        display: flex;
        border: 2px solid lighten($background-primary, 10%);
        justify-content: space-between;
        margin: 0.4rem;
        background-color: rgba($background-primary, 0.6) 
    }

    .mantine-Radio-root[data-checked="true"] .mantine-Radio-label {
         font-weight: bold;
    }
}

.maintenance-section {
    width: 100%;
    min-height: 30px;
    position: -webkit-sticky; // Safari
    position: sticky;
    bottom: 0px;
    padding: 0px 10px;
    background: $orange6;
    color: black;
    border-bottom: 1px solid $border-color;
    z-index: 999;    
    margin: auto;

    .maintenance-text{
        color: black;
        text-transform: uppercase;
    }
}

// Sentry

//opacity on feedback button
#sentry-feedback {
    opacity: 0.6;
    &:hover{
        opacity: 1;
    }
  }

//move dash debug menu a little higher to make room for sentry button
.dash-debug-menu {
    bottom: 85px !important;
}
.dash-debug-menu__outer{
    &--closed{
        bottom: 85px !important;
    }
    &--open{
        bottom: 78px !important;
    }
}