@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;700&family=Manjari:wght@400;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Sans:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&display=swap');

.table > tbody > tr.current-bukthi-indicator > td {
    background-color: #e6f0ff !important; /* A light, accessible blue */
    font-weight: 600;
    cursor: pointer; /* A nice UX touch to show the row is interactive */
}

    /* Apply the left border ONLY to the very first cell of the highlighted row */
    .table > tbody > tr.current-bukthi-indicator > td:first-child {
        border-left: 4px solid #0d6efd !important; /* The standard Bootstrap primary blue */
    }

.dasa-header th {
    background-color: #FFF9E6 !important; /* A light, pleasant yellow like in your image */
    color: #5D4037 !important; /* A dark brown for good contrast */
    font-weight: 600; /* A nice semi-bold weight */
    border-bottom: 1px solid #E0E0E0 !important;
}
/*
            This is a CSS rule that targets all <th> and <td> elements
            that are descendants of the element with the ID "HoroscopeContents".
        */
#HoroscopeContents th,
#HoroscopeContents td {
    /*
               Sets the padding. 'em' is a relative unit, so it scales with the font size.
               '0.25em' will result in a nice, tight padding.
            */
    padding: 0.25rem !important;
}

canvas {
    width: 100%;
    height: auto;
}

.prediction-box {
    transition: box-shadow 0.3s ease;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background-color: #fff;
    min-height: 220px;
}

    .prediction-box:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    .prediction-box .ibox-title {
        font-size: 16px;
        font-weight: bold;
        color: #1ab394;
        border-bottom: 1px solid #eee;
    }

    .prediction-box .ibox-content {
        color: #676a6c;
        padding-top: 10px;
    }
/* Highlight entire current dasa row with background and border */
.current-dasa-row {
    background-color: #FFF3B0; /* Light yellow background */
    font-weight: 700; /* Bold text */
    border-left: 5px solid #F39C12; /* Orange left border */
    transition: background-color 0.3s ease;
}

    /* Add a star icon before the dasa name cell */
    .current-dasa-row .dasa-name::before {
        content: '★ ';
        color: #F39C12; /* Same orange as border */
        font-weight: 900;
        font-size: 1.2em;
    }

    /* Optional: change background color on hover for better interaction */
    .current-dasa-row:hover {
        background-color: #FFECA3;
        cursor: pointer;
    }

    /* Style dasa-name cell to position icon nicely */
    .current-dasa-row .dasa-name {
        position: relative;
        padding-left: 1.2em; /* Space for the star icon */
    }

    /* Accessibility: high contrast for text */
    .current-dasa-row,
    .current-dasa-row td {
        color: #4A3E00; /* Dark brown text for readability */
    }
/* Desktop and larger screens: side by side */
.panel-body {
    display: flex;
    gap: 20px;
}

/* Chart container fixed width and sticky */
#rasiChartContainer {
    position: sticky;
    top: 20px;
    flex-shrink: 0;
    width: 320px;
    height: fit-content;
    border: 1px solid #ccc;
    padding: 10px;
}

/* Predictions container scrollable */
#idPredictions {
    flex-grow: 1;
    overflow-y: auto;
    max-height: 600px;
}

/* Responsive: on small devices stack vertically */
@media (max-width: 767px) {
    .tabs-container .panel-body {
        padding: 5px !important;
    }

    .panel-body {
        display: block; /* no flex on small screens */
    }

    #rasiChartContainer {
        position: relative; /* disable sticky */
        width: 100%; /* full width */
        margin-bottom: 20px; /* spacing below chart */
    }

    #idPredictions {
        max-height: none; /* disable max height */
        overflow-y: visible; /* no scrolling inside */
    }
}
/* 1. The new container that holds the answer box and button */
.answer-container {
    position: relative; /* This is the key for positioning the button */
}

/* 2. The Copy Button itself */
/*#copyAnswerButton {
    position: absolute;*/ /* Position it relative to the .answer-container */
    /*top: 8px;*/ /* A nice padding from the top edge */
    /*right: 8px;*/ /* A nice padding from the right edge */
    /*z-index: 10;*/ /* Ensure it's on top of any text scrollbars */
/*}*/

    /* 3. Style for the button after a successful copy */
    /*#copyAnswerButton.copied {
        background-color: #198754;*/ /* Bootstrap success green */
        /*border-color: #198754;
        color: white;
    }*/

.star-rating {
    display: flex;
    flex-direction: row-reverse; /* This is the magic for the hover effect */
    justify-content: flex-end;
    font-size: 1.8rem; /* Adjust star size */
    line-height: 1;
}

    .star-rating input {
        display: none;
    }

    .star-rating label {
        color: #ccc;
        cursor: pointer;
        transition: color 0.2s;
        padding: 0 0.1em;
    }

    /* This handles the hover effect */
    .star-rating:not(:hover) input:checked ~ label,
    .star-rating:hover input:hover ~ label {
        color: #ffc107; /* Bootstrap's standard 'warning' color for stars */
    }

    /* This handles the selected star */
    .star-rating input:checked + label:hover,
    .star-rating input:checked ~ label:hover,
    .star-rating label:hover ~ input:checked ~ label {
        color: #ffc107;
    }

/* Specific styling for the copy button on the answer container */
.answer-container {
    position: relative;
}


/*
 * Styles for the Quill Editor Modal
 */
#editPredictionModal .modal-dialog {
    max-width: 800px; /* A wider modal for better editing */
}

#quillEditorModal {
    /* This creates a fixed-height editor with a scrollbar */
    height: 60vh; /* 60% of the viewport height */
    display: flex;
    flex-direction: column;
}

    #quillEditorModal .ql-container {
        flex-grow: 1; /* Allows the editor area to expand */
        overflow-y: auto; /* Adds a vertical scrollbar when needed */
    }
/* --- 2. Define font-family rules for each language class --- */
.lang-en {
    font-family: 'Noto Sans', sans-serif;
}
/* English (Default) */
.lang-ta {
    font-family: 'Noto Sans Tamil', sans-serif;
}
/* Tamil */
.lang-ml {
    font-family: 'Manjari', sans-serif;
}
/* Malayalam */
.lang-te {
    font-family: 'Noto Sans Telugu', sans-serif;
}
/* Telugu */
.lang-kn {
    font-family: 'Noto Sans Kannada', sans-serif;
}
/* Kannada */
.lang-hi {
    font-family: 'Noto Sans Devanagari', serif;
}
/* Hindi */

    .lang-ta strong,
    .lang-ml strong,
    .lang-te strong,
    .lang-kn strong,
    .lang-hi strong {
        /* Use 700, which is the standard numeric value for "bold". */
        font-weight: 700 !important;
    }

/* --- 3. Generic styling for the answer containers --- */
.ai-answer-text,
#quillEditorModal .ql-editor {
    font-size: 1rem;
    line-height: 1.7;
}

    .ai-answer-text strong, .ai-answer-text b,
    #quillEditorModal .ql-editor strong, #quillEditorModal .ql-editor b {
        font-weight: 700; /* This will now use the BOLD file from the dynamically applied font-family  */
    }

    .ai-answer-text h1, .ai-answer-text h2, .ai-answer-text h3,
    #quillEditorModal .ql-editor h1, #quillEditorModal .ql-editor h2, #quillEditorModal .ql-editor h3 {
        color: #003366;
        font-weight: 700;
    }
    #quillEditorModal .ql-editor .ql-ui {
        display: none !important;
    }