/* Main CSS */
body {
    background-color: #f4f4f4 !important;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.entry-content {
    padding: 0;
}

.table {
    background: transparent !important;
    background-color: transparent !important;
    border-collapse: collapse;
    width: 100%;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: transparent !important;
    border-width: 0 !important;
    padding: 4px 0 !important;
}

.eye-title {
    background-color: black;
    text-align: center;
    color: white;
    padding: 10px 16px;
    border-radius: 16px;
    display: inline-block;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 auto;
}

input, select {
    border-radius: 0 !important;
    font-size: 13px !important;
    border: 1px solid #ddd !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    height: 42px !important;
}

input, select, .form-control {
    padding: .6rem .75rem !important;
}

input:focus, select:focus {
    border-color: #4A91F1 !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 145, 241, 0.25) !important;
    outline: 0 !important;
}

input::placeholder {
    color: #7f8c8d !important;
    font-size: 12px !important;
}

.input-wrapper label {
    font-weight: bold;
    flex-basis: 10%;
    min-width: 40px;
}

.addition h4 {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.buttons button {
    color: white;
    border: 0;
    padding: 10px 0 !important;
    width: 200px !important;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border-radius: 30px !important;
    margin: 0 20px;
    transition: all linear 0.2s ease-in;
}

.caclulatebtn {
    background-color: #4A91F1;
}

.caclulatebtn:hover {
    background-color: rgba(74, 146, 241, 0.8);
}

.resetbtn {
    background-color: #FF3131;
}

.resetbtn:hover {
    background-color: rgba(255, 49, 49, 0.8);
}

/* New Minimalist Result Boxes */
.result {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #e6f0ff !important;
    border-radius: 4px !important;
    padding: 12px 15px;
    margin: 8px 0;
}

.result-table {
    width: 48%;
    margin-bottom: 0;
}

.result-header {
    font-size: 1.1rem;
    font-weight: bold;
    color: black;
    margin-bottom: 8px;
    text-align: left;
}

.result-label {
    font-weight: bold;
    font-size: 1rem;
    color: black;
    white-space: nowrap;
    padding-right: 10px;
}

.result-value {
    font-size: 1rem;
    color: black;
    font-weight: normal;
    line-height: 1.4;
}

.transposed-result {
    font-size: 1rem;
    color: black;
    font-weight: normal;
    line-height: 1.4;
}

/* Remove all borders and boxes */
.box, .border, [class*="border-"] {
    border: none !important;
    box-shadow: none !important;
}

/* Axis error styling */
.axis-error {
    margin-top: -8px;
    margin-bottom: 8px;
    font-size: 12px;
    padding-left: 50px;
}

/* Responsive CSS */
@media screen and (max-width: 1200px) {
    .buttons .col-md-6 {
        width: 53%;
    }
}

@media screen and (max-width: 991px) {
    .buttons .col-md-6 {
        width: 80%;
    }

    .input-wrapper {
        gap: 12px;
    }

    .input-wrapper label {
        flex-basis: 13%;
    }
}

@media screen and (max-width: 767px) {
    .eye-row .col-md-6 {
        max-width: 50%;
    }

    .buttons .col-md-6 {
        width: 100%;
    }

    .result.mt-5 {
        margin-top: 1rem !important;
    }

    .input-wrapper label {
        flex-basis: 20%;
    }
    
    .eye-title {
        font-size: 1.2rem;
        padding: 8px 30px;
    }
    
    .result-table {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .result-table:last-child {
        margin-bottom: 0;
    }
    
    .axis-error {
        padding-left: 45px;
    }
}

@media screen and (max-width: 575px) {
    .result {
        margin: 8px 0 !important;
        padding: 10px 12px;
    }

    .buttons button {
        padding: 8px 0 !important;
        width: 160px !important;
        font-size: 15px !important;
        margin: 0 6px !important;
    }

    .input-wrapper label,
    .addition h4 {
        font-family: sans-serif !important;
    }
    
    .form-control {
        padding: .375rem .75rem !important;
    }
    
    .result-label,
    .result-value,
    .transposed-result {
        font-size: 0.95rem;
    }
    
    .result-header {
        font-size: 1rem;
    }
    
    .axis-error {
        padding-left: 40px;
    }
}

@media screen and (min-width: 351px) and (max-width: 374px) {
    .buttons button {
        width: 145px !important;
    }
}

@media screen and (max-width: 430px) {
    .eye-row .text-center {
        text-align: right !important;
    }
}

@media screen and (max-width: 350px) {
    .buttons button {
        padding: 7px 0 !important;
        width: 130px !important;
        font-size: 17px !important;
    }

    .result-label,
    .result-value,
    .transposed-result {
        font-size: 0.9rem !important;
    }

    .eye-title {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
    
    .result {
        padding: 8px 10px;
    }
    
    .axis-error {
        padding-left: 35px;
    }
}

/* Ensure absolutely no borders anywhere */
.result,
.result table,
.result tr,
.result th,
.result td,
.result thead,
.result tbody,
.result tfoot {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Tight spacing between lines */
.result-row {
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.result-gap {
    margin-top: 4px;
}

/* Select dropdown styling */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem !important;
}

select.form-control:invalid {
    color: #7f8c8d;
}

select.form-control option {
    color: black;
}

/* Limit dropdown height on mobile */
@media screen and (max-width: 767px) {
    select.form-control {
        max-height: 200px;
        overflow-y: auto;
    }
}

/* Custom scrollbar for dropdown */
select.form-control::-webkit-scrollbar {
    width: 6px;
}

select.form-control::-webkit-scrollbar-track {
    background: #f1f1f1;
}

select.form-control::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

select.form-control::-webkit-scrollbar-thumb:hover {
    background: #555;
}