@use '../../abstracts/variables' as *;
@use '../../mixins/breakpoints' as *;
$primary-blue: rgba(59, 86, 167, 255);
$secondary-brown: rgb(91, 23, 31);
$text-color: #333;
$background-color: #f9f9f9;
$border-radius: 20px;
$box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
.org-reports-container {
    // padding-top: 185px;
    @include media-min-xl {
        padding-top: 0;
    }

    @include media-min-lg {
        margin-left: 70px;
    }

    @include media-min-xl {
        margin-left: 488px;
        margin-top: 78px;
    }
    @include media-min-5-xl {
        margin-left: 644px;
        margin-top: 103px;
    }
    @include media-min-6-xl {
        margin-left: 781px;
        margin-top: 110px;
    }

    .org-reports-form-container {
        border-radius: 5px;
        box-shadow: 0 4px 9px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow-y: scroll;
        scrollbar-width: none;
        font-size: 14px;
        font-weight: 500;
        // padding: 20px;
        background-color: white;
        height: 100%;
        overflow-y: auto;

        @include media-min-xl {
            box-shadow: none;
            border-radius: 0px;
        }

        .org-reports-header {
            background-color: $secondary-brown;
            padding: 15px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 1;
            font-weight: 800;
            font-size: 1.2rem;
            @media (max-width: 1024px) {
                display: flex;
                justify-content: center;
                align-items: center;
            }


            h1 {
                color: white;
                font-size: 16px;
                margin: 0;
                font-weight: 400;
                @include media-min-5-xl {
                    font-size: 24px;
                }
                @include media-min-6-xl {
                    font-size: 30px;
                }
            }
        }


        @include media-min-5-xl {
            font-size: 24px;
        }

        @include media-min-6-xl {
            font-size: 30px;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .org-reports-date-range-container {
            display: flex;
            flex-direction: column;

            @include media-min-xl {
                flex-direction: row;
                justify-content: space-around;
            }
            .orgreport-label {
                flex: 1;
            }

            .org-reports-date-range {
                display: flex;
                flex: 4;
                flex-direction: column;
                // justify-content: space-between;
                flex-wrap: wrap;

                @include media-min-xl {
                    flex-direction: row;
                    gap: 20px;
                }

                select {
                    padding: 10px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                }

                .date-inputs {
                    display: flex;
                    flex-direction: column;

                    @include media-min-xl {
                        flex-direction: row;
                        gap: 3px;
                    }
                    @include media-min-xl-s {
                        gap: 20px;
                    }

                    .date-input-group {
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 10px;

                        @include media-min-xl {
                            flex-direction: row;
                            gap: 5px;
                            margin-bottom: 0px;
                        }

                        @include media-min-xl-s {
                            gap: 10px;
                        }

                        label {
                            margin-bottom: 5px;
                        }

                        input {
                            border: 1px solid black;
                            padding-left: 5px;
                        }
                    }
                }
            }
        }

        form {
            height: 90%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .org-context {
                display: flex;
                flex-direction: column;
                gap: 20px;

                .org-rep-form-group {
                    display: flex;
                    flex-direction: column;

                    label {
                        margin-bottom: 5px;
                    }

                    input[type="text"],
                    input[type="email"],
                    select {
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                    }

                    @include media-min-xl {
                        flex-direction: row;
                        align-items: center;

                        label {
                            flex: 1;
                            margin-bottom: 0;
                        }

                        input,
                        select,
                        .full-width {
                            flex: 4;
                        }
                    }
                }

                .full-width {
                    width: 100%;
                }
            }

            .org-reports-form-buttons {
                position: sticky;
                bottom: 0;
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                align-items: center;
                flex-direction: column;
                @include media-min-sm {
                    justify-content: left;
                    flex-direction: row;
                }

                .org-reports-btn {
                    padding: 10px 20px;
                    background-color: #3a55a4;
                    color: white;
                    border: none;
                    border-radius: 5px;
                    width: 200px;
                    cursor: pointer;
                    transition: background-color 0.3s ease;
                    @include media-min-sm {
                        width: auto;
                    }

                    &:hover {
                        background-color: #003366;;
                    }
                }
            }
        }
    }

    .noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .dropdown-container {
        width: 100%;
        font-size: 14px;
        font-family: sans-serif;
        position: relative;
        overflow-y: auto;
    }

    .dropdown-container-org {
        width: 100%;
        font-size: 14px;
        font-family: sans-serif;
        position: relative;
        @include media-min-5-xl {
            font-size: 20px;
            height: 300px;
        }
        @include media-min-6-xl {
            font-size: 30px;
        }
    }

    .dropdown-button {
        width: 100%;
        height: 37px;
        background: whitesmoke;
        padding: 7px 12px;
        cursor: pointer;
        border: 1px solid lightgray;
        box-sizing: border-box;
    }

    .dropdown-label {
        float: left;
    }

    .dropdown-quantity {
        margin-left: 4px;
    }

    .dropdown-list {
        width: 100%;
        border: 1px solid lightgray;
        border-top: none;
        padding: 10px 12px;
        box-sizing: border-box;
        height: 150px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #ccc #f5f5f5;
        @include media-min-5-xl {
            height: 220px;
        }
    }

    .dropdown-list input[type="search"] {
        padding: 5px;
        margin-bottom: 10px;
        width: 100%;
        box-sizing: border-box;
        @include media-min-5-xl {
            font-size: 20px;
        }
        @include media-min-6-xl {
            font-size: 30px;
        }
    }

    .dropdown-search {
        padding: 5px;
        width: 100%;
        margin-bottom: 10px;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    ul li {
        margin-bottom: 10px;
    }

    input[type="checkbox"] {
        margin-right: 5px;
    }

    .dropdown-list label {
        display: block;
    }

}