/* Enhanced styles.css to improve the display of the new values in the struktur-nama tables */

/* General body styling */
body {
    font-family: Roboto, Poppins, sans-serif;
    background-color: #fcf2e8;
    margin: 0;
    padding: 9px;
    font-size: 11px;
    height: 100vh;
    width: 100%;
    padding-right: 0px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

/* Hide scrollbars but keep functionality */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, newer Edge */
}

/* Container styling */
.container {
    width: 95%;
    align-content: center;
    /*! background-color: #fcf2e8; */
    /*! padding: 10px; */
    /*! box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    height: 95%;
}

/*Switch toggle panel*/
.view-controls {
        text-align: left;
    margin-bottom: 5px;
    padding-right: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
}

.toggle-container {
    display: flex;
    align-items: ;
    cursor: pointer;
}

.toggle-label {
    font-size: 11px;
    font-weight: 600;
    font-family: Poppins;
    color: #666;
    margin: 0 px;
}

.toggle-label.active {
    color: #006d5b;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 18px;
 
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 0px;
    right: 5px;
    bottom: 4px;
    background-color: #fcf2e8;
    transition: .4s;
    border-radius: 50%;
}

.toggle-slider:after {
    
    /*! left: 2px; */
    /*! right: 4px; */
     
}

input:checked + .toggle-slider {
    background-color: #006d5b;
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Panel visibility states */
.panel-container.single-view .panel-middle,
.panel-container.single-view .panel-right {
    display: none;
}

.panel-container.single-view .panel-left {
    width: 100%;
}

/* Panel transition effects */
.panel {
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Panel layout styling */
.panel-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
}

.panel {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.panel-left, .panel-right {
    width: 47%;
}

.panel-middle {
    width: 6%;
    display: flex;
    flex-direction: column;
    gap: 267px;
}

/* Input section styling */
.input-section {
    background-color: #fcf2e8;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.input-section label,
.input-section input {
    display: block;
    margin-bottom: 8px;
}

.input-section input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
    font-size: 13px;
}

/* Result section heading styling */
.input-section h3 {
    margin-top: 10px;
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: capitalize !important;
}

/* Button styling */
.button {
    background-color: #006d5b;
    border: none;
    color: #fcf2e8;
    padding: 8px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 0;
    cursor: pointer;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
}

.button:hover {
    background-color: #00856f;
}



/* Table wrapper styling */
.table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: 10px;
    min-height: 70px; /* Ensure table wrappers have minimum height */
    display: block; /* Make sure display is block */
    visibility: visible; /* Make sure visibility is not hidden */
}

.table-wrapper.struktur-nama-wrapper {
    display: contents;
}

/* General table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
/*    color: black;*/
    display: table; /* Ensure table display is correct */
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 3px;
    text-align: center;
    height: 15px;
}

/* Specific tables styling */
.struktur-nama,
.antakala-table,
.monthly-table {
    width: 100%;
}

.derived-table {
    width: 100%;
    height: 100%;

}

/* Fix for antakala tables */
#antakala-table-1, #antakala-table-2 {
    display: table;
    visibility: visible;
    margin: 0px 0;
    min-height: 10px;
}

/* Header styling */
.struktur-nama tr:nth-child(2) th,
.struktur-nama tr:nth-child(4) th,
.derived-table th,
.comparison-table th,
.header-cell {
    border: none !important;
    position: sticky;
    top: 0;
    background-color: #d5d5d5;
    color: black !important;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #fcf2e8;
    font-weight: 500;
    min-height: 14px;

}
.derived-table td{
    border: none !important;
    height: 25px;
}
/* Styling for the struktur-nama table headers */
/*.struktur-nama tr:nth-child(2) th,
.struktur-nama tr:nth-child(4) th {
    background-color: #b2b2b2;
    color: #fcf2e8;
    font-size: 10px;
    font-weight: 500;
}
*/

/* Highlighted cells in struktur-nama */
.struktur-nama tr:nth-child(1) td:nth-of-type(3),
.struktur-nama tr:nth-child(1) td:nth-of-type(5),
.struktur-nama tr:nth-child(1) td:nth-of-type(7),
.struktur-nama tr:nth-child(1) td:nth-of-type(8),
.struktur-nama tr:nth-child(1) td:nth-of-type(9),
.struktur-nama tr:nth-child(1) td:nth-of-type(10) {
    background-color: #e8eef2;
    font-size: 15px;
    font-weight: 500;
}

/* Highlighting for advanced values in row 3 */
.struktur-nama tr:nth-child(3) td:nth-of-type(1),
.struktur-nama tr:nth-child(3) td:nth-of-type(2),
.struktur-nama tr:nth-child(3) td:nth-of-type(3),
.struktur-nama tr:nth-child(3) td:nth-of-type(4),
.struktur-nama tr:nth-child(3) td:nth-of-type(5),
.struktur-nama tr:nth-child(3) td:nth-of-type(6)  {
    background-color: #e8eef2;
    font-size: 14px;
    font-weight: 500;
}

/* Comparison section styling */
.comparison-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    /*! border: 2px dashed #ccc; */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}
.comparison-item-relation{
    display: block;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 50px;
    /*! background: darkgray; */
    justify-content: flex-end;
}
.comparison-item-married{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*! margin-bottom: 10px; */
    width: 100%;
    /*! background: darkgray; */
    padding-bottom: 10px;
}

#comparison-input {
    width: 100%;
    margin-bottom: 10px;
}

#comparison-result {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}
#rlt-karma-result{
    text-decoration: underline solid #006d5b 21%;
    padding-bottom: 10px;
    /*! border: 1px solid; */
    text-underline-offset: 4px;
}
/* VCOMP Table styling */
#vcomp-table {
    width: 100%;
    background-color: #fcf2e8;
}

#vcomp-table td {
    padding: 5px;
    white-space: nowrap;
    font-size: 11px;
    border: none !important;
    height: 20px !important;
}

/* Hover effects */
/*.derived-table tr:hover,
.antakala-table tr:hover,
#vcomp-table tr:hover {
    background-color: #FFECCC;
}
*/
/* Specific formatting for derived table cells */
.derived-table td:nth-child(6),
.derived-table td:nth-child(8) {
    font-weight: 500;
    font-size: 14px;
}

/* Birth date container */
.birth-date-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.birth-date-input {
    flex: 1;
}

/* Color classes for comparison results */
.color-red {
    color: red;
}
.color-lightred {
    color: lightcoral;
}
.color-default {
    color: black;
}
.color-lightgreen {
    color: lightgreen;
}
.color-green {
    color: green;
}

/* Monthly table styling */
.monthly-table th{
     background-color: #006d5b;
    color: #fcf2e8 !important;
}
}
.monthly-table-container {
    background-color: #b2b2b2;
    color: #fcf2e8;
}

.monthly-table td {
    font-size: 11px !important;
    font-weight: normal !important;
}

/* Background color styles for specific cells */
.cell-bg-red {
    background-color: #FF0000 !important;
}

.cell-bg-pink {
    background-color: #E8A392 !important;
}

/* Specific styling for new data types */
.index-value {
    color: #006d5b;
    font-weight: bold;
}

/* Responsive styling for mobile devices */
@media (max-width: 768px) {
    .panel-container {
        flex-direction: column;
    }
    .input-section,
    .sex {
    background-color: #fcf2e8;
   
    }

    .input-section label,
    .input-section input {
        display: block;
        margin-bottom: 8px;
    }

    .input-section input {
        width: 100%;
        padding: 2px;
        margin-top: 3px;
        box-sizing: border-box;
        font-size: 13px;
    }
    .button{
        background-color: #006d5b;
        border: none;
        color: #fcf2e8;
        padding: 5px 5px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin-top: 0;
        cursor: pointer;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 500;
    }
    .sex-1,
    .sex2 {
        height: 25px !importants;
    }
    /* Result section heading styling */
    .input-section h3 {
        margin-top: 10px;
        font-size: 16px;
        margin-bottom: 10px;
        text-transform: capitalize !important;
    }
    
    .panel-left, .panel-middle, .panel-right {
        width: 100%;
    }
    
    .birth-date-container {
        flex-direction: column;
        display: flex;
        flex-direction: row;
        display: inline-flex;
        align-items: center;
        gap: 30px;
        width: 100%;
    }
    .birth-date-input,
    .sex{
        min-width:50px;

    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }
    
}
}