@import url("../../styles/style.css");

main {
    #airplanes-table-card {
        display: flex;
        flex-direction: column;
        gap: 30px;

	.serial {
		background-color: #87e6de;
		padding: 2px 5px;
	}

	#f_serial {
	    height: 20px;
	}

	#d_serial {
	    display: flex;
	    gap: 30px;
	}

	#serial_result {
	    max-height: 150px;
	    overflow-y: auto;
	    font-size: 12px;
	}

        .selects {
            flex-wrap: wrap;
            gap: 10px;

            &:not([style*="display: none"]) {
                display: flex !important;
            }

            .custom-select {
                width: max-content;

                .custom-select-trigger {
                    padding-right: 30px;
                }
            }
        }

        table {
            table-layout: fixed;

            tr {
                th, td {
                    &:nth-child(1) {
                        min-width: 180px;
                        max-width: 180px;
                    }
                    &:nth-child(2) {
                        min-width: 140px;
                        max-width: 140px;
                    }
                    &:nth-child(3) {
                        min-width: 180px;
                        max-width: 180px;
                    }
                    &:nth-child(4) {
                        min-width: 180px;
                        max-width: 180px;
                    }
                    &:nth-child(5) {
                        min-width: 80px;
                        max-width: 80px;
                    }
                    &:nth-child(6) {
                        min-width: 90px;
                        max-width: 90px;
                    }
                    &:nth-child(7) {
                        min-width: 150px;
                        max-width: 150px;
                    }
                    &:nth-child(8) {
                        min-width: 230px;
                        max-width: 230px;
                    }
                    &:nth-child(9) {
                        min-width: 80px;
                        max-width: 80px;
                    }
                    &:nth-child(10) {
                        min-width: 110px;
                        max-width: 110px;
                    }
                    &:nth-child(11) {
                        min-width: 70px;
                        max-width: 70px;
                    }
                    &:nth-child(12) {
                        min-width: 80px;
                        max-width: 80px;
                    }

                    @media screen and (max-width: 900px) {
                        &:nth-child(2) {
                            min-width: 100px;
                            max-width: 100px;
                        }
                        &:nth-child(3) {
                            min-width: 140px;
                            max-width: 140px;
                        }
                        &:nth-child(4) {
                            min-width: 140px;
                            max-width: 140px;
                        }
                        &:nth-child(5) {
                            min-width: 50px;
                            max-width: 50px;
                        }
                        &:nth-child(6) {
                            min-width: 60px;
                            max-width: 60px;
                        }
                        &:nth-child(7) {
                            min-width: 110px;
                            max-width: 110px;
                        }
                        &:nth-child(8) {
                            min-width: 170px;
                            max-width: 170px;
                        }
                        &:nth-child(9) {
                            min-width: 60px;
                            max-width: 60px;
                        }
                        &:nth-child(10) {
                            min-width: 80px;
                            max-width: 80px;
                        }
                        &:nth-child(11) {
                            min-width: 40px;
                            max-width: 40px;
                        }
                        &:nth-child(12) {
                            min-width: 50px;
                            max-width: 50px;
                        }
                    }
                }

                td:first-child {
                    min-width: 200px;
                    max-width: 200px;
                }

                th {
                    position: relative;

                    .table-header-link {
                        position: relative;

                        .info-icon {
                            position: absolute;
                            right: -30px;
                            top: -10px;
                            padding: 4px;
                        }
                    }

                    .prompt {
                        position: fixed;
                        top: 20px;
                        left: 20px;
                        width: 200px;
                        /* margin: 5svh 0 0 1vw; */
                        max-height: 80svh;
                        overflow: auto;
                        padding: 20px;
                        background: var(--background-header-color);
                        border: 2px solid var(--main-border-color);
                        box-shadow: -1px -1px 15px rgba(66, 165, 245, 0.15);
                        display: none;
                        transition: all 200ms ease;
                        z-index: 1000000;

                        &.active {
                            display: block;
                        }
                    }
                }
            }
        }

        table.arts {
            table-layout: fixed;

            tr {
                th, td {
                    &:nth-child(1) {
                        min-width: 200px;
                        max-width: 200px;
                    }
                    &:nth-child(2) {
                        min-width: 90px;
                        max-width: 90px;
                    }
                    &:nth-child(3) {
                        min-width: 180px;
                        max-width: 180px;
                    }
                    &:nth-child(4) {
                        min-width: 180px;
                        max-width: 180px;
                    }
                    &:nth-child(5) {
                        min-width: 180px;
                        max-width: 180px;
                    }
                    &:nth-child(6) {
                        min-width: 150px;
                        max-width: 150px;
                    }
                    &:nth-child(7) {
                        min-width: 80px;
                        max-width: 80px;
                    }
                    &:nth-child(8) {
                        min-width: 80px;
                        max-width: 80px;
                    }

                    @media screen and (max-width: 900px) {
                    &:nth-child(2) {
                        min-width: 60px;
                        max-width: 60px;
                    }
                    &:nth-child(3) {
                        min-width: 120px;
                        max-width: 120px;
                    }
                    &:nth-child(4) {
                        min-width: 120px;
                        max-width: 120px;
                    }
                    &:nth-child(5) {
                        min-width: 120px;
                        max-width: 120px;
                    }
                    &:nth-child(6) {
                        min-width: 100px;
                        max-width: 100px;
                    }
                    &:nth-child(7) {
                        min-width: 50px;
                        max-width: 50px;
                    }
                    &:nth-child(8) {
                        min-width: 50px;
                        max-width: 50px;
                    }
                }
            }
        }

        .table-footer {
            display: flex;
            flex-direction: column;
            gap: 5px;

            #stats {
                display: flex;
                gap: 10px;
                color: var(--text-menu-color);
            }

            a {
                padding: 0 5px 2px 0;
                width: max-content;
            }

            @media screen and (max-width: 600px) {
                align-items: center;;
            }
        }
    }
}

/* Adaptability */
@media screen and (min-width: 2270px) {
    main #airplanes-table-card {
        table.arts tr th, table tr td {
            &:nth-child(2) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(3) {
                min-width: 15vw;
                max-width: 15vw;
            }
            &:nth-child(4) {
                min-width: 15vw;
                max-width: 15vw;
            }
            &:nth-child(5) {
                min-width: 15vw;
                max-width: 15vw;
            }
            &:nth-child(6) {
                min-width: 10vw;
                max-width: 10vw;
            }
            &:nth-child(7) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(8) {
                min-width: 5vw;
                max-width: 5vw;
            }
        }
        table tr th, table tr td {
            &:nth-child(3) {
                min-width: 15vw;
                max-width: 15vw;
            }
            &:nth-child(4) {
                min-width: 15vw;
                max-width: 15vw;
            }
            &:nth-child(5) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(6) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(7) {
                min-width: 10vw;
                max-width: 10vw;
            }
            &:nth-child(8) {
                min-width: 20vw;
                max-width: 20vw;
            }
            &:nth-child(9) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(10) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(11) {
                min-width: 5vw;
                max-width: 5vw;
            }
            &:nth-child(12) {
                min-width: 5vw;
                max-width: 5vw;
            }
        }
    }
}