@import "tailwindcss";
@plugin "flowbite-react/plugin/tailwindcss";
@source "../../.flowbite-react/class-list.json";

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    color: #334155;
    /* zoom: 0.95; */
    /* Slate-700 for better readability */
    /* transform: scale(0.95);transform-origin: top left;width: 105%; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: #0f172a;
    /* Slate-900 for sharp headings */
    font-weight: 700;
    letter-spacing: -0.02em;
    /* margin-bottom: 0.75rem; */
    /* margin-top: 2rem; */
}

input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    /* Main color */
    accent-color: #4CAF50;
    /* Border improve */
    border: 2px solid #4CAF50;
}

/* Hover effect */
input[type="radio"]:hover {
    transform: scale(1.1);
}

/* Focus (accessibility) */
input[type="radio"]:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* ========================================DARK MODE GLOBAL OVERRIDES - COMPREHENSIVE======================================== */
/* CRITICAL: Apply dark mode to ALL bg-white elements (except tabs) */
.dark *[class*="bg-white"]:not(.hover_tags):not(.tagsUnit) {
    background-color: #1e293b !important;
    /* slate-800 */
}

/* Full screen backgrounds should be darker */
.dark *[class*="bg-white"][class*="min-h-screen"],
.dark *[class*="bg-white"][class*="h-screen"],
.dark div[class*="bg-white min-h-screen"] {
    background-color: #0f172a !important;
    /* slate-900 */
}

/* Ensure text color is light on dark backgrounds (except tabs) */
.dark *[class*="bg-white"]:not(.hover_tags):not(.tagsUnit) {
    color: #f1f5f9;
    /* slate-100 */
}

/* Special handling for cards and containers (except tabs) */
.dark div[class*="bg-white"][class*="rounded"]:not(.hover_tags):not(.tagsUnit),
.dark div[class*="bg-white"][class*="shadow"]:not(.hover_tags):not(.tagsUnit),
.dark section[class*="bg-white"]:not(.hover_tags):not(.tagsUnit),
.dark article[class*="bg-white"]:not(.hover_tags):not(.tagsUnit) {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Labels and form elements */
.dark label,
.dark .label {
    color: #f1f5f9 !important;
}

/* All headings in dark mode */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #f1f5f9 !important;
}

/* Paragraphs and spans without explicit text color */
.dark p:not([class*="text-"]),
.dark span:not([class*="text-"]) {
    color: #e2e8f0;
    /* slate-200 */
}

/* Force text-black to actually be black in dark mode */
.dark .text-black,
.dark span.text-black,
.dark [class~="text-black"] {
    color: #000000 !important;
}

/* Ensure links are visible */
.dark a:not([class*="text-"]) {
    color: #99EA48;
}

/* Gray backgrounds should also be darkened */
.dark *[class*="bg-gray-100"] {
    background-color: #334155 !important;
    /* slate-700 */
}

.dark *[class*="bg-gray-50"] {
    background-color: #475569 !important;
    /* slate-600 */
}

.dark *[class*="bg-gray-200"] {
    background-color: #1e293b !important;
    /* slate-800 */
}

/* Borders */
.dark *[class*="border-gray-100"],
.dark *[class*="border-gray-200"] {
    border-color: #475569 !important;
    /* slate-600 */
}

/* List items in dark mode */
.dark ul li,
.dark ol li {
    color: #f1f5f9 !important;
    /* slate-100 */
}

/* Footer specific overrides */
.dark footer,
.dark footer * {
    color: #f1f5f9 !important;
}

.dark footer a {
    color: #99EA48 !important;
}

.dark footer a:hover {
    color: #ffffff !important;
}

/* Category pages and content lists */
.dark .contentAll ul li,
.dark .contentAll ol li {
    color: #f1f5f9 !important;
}

/* Ensure all list items have proper color */
.dark ul,
.dark ol {
    color: #f1f5f9;
}

/* CRITICAL: Override text-black class in dark mode */
/* DISABLED: This was forcing ALL text-black to be white in dark mode */
.dark .text-black,
.dark a.text-black,
.dark [class*="text-black"] {
    color: #f1f5f9 !important;
}

/* Specific utility for forcing black text on light-colored backgrounds (like lime green) in dark mode */
.always-black-text,
a.always-black-text,
.always-black-text * {
    color: #000000 !important;
}

.dark .always-black-text,
.dark a.always-black-text,
.dark .always-black-text * {
    color: #000000 !important;
}

/* Links should be white in dark mode */
.dark a:not([class*="text-green"]):not([class*="text-red"]) :not([class*="text-black"]) {
    color: #f1f5f9 !important;
}

/* Link hover state */
.dark a:hover {
    color: #99EA48 !important;
    /* green on hover */
}

/* Override any text-gray classes in dark mode */
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600 {
    color: #f1f5f9 !important;
}

/* SVG Icons - Invert colors in dark mode - ONLY for category cards and action icons */
.dark a[href*="/category/"] img[src*=".svg"],
.dark a[href*="/converter"] img[src*=".svg"],
.dark img[src*="/all-images/home_logo/feature.svg"],
.dark img[src*="/all-images/copy.svg"],
.dark img[src*="/all-images/printer.svg"],
.dark img[src*="/all-images/downloads.svg"],
.dark img[src*="/all-images/share.png"],
.dark img[src*="/all-images/feed.png"] {
    filter: invert(1) brightness(2) !important;
}

/* Extra specific rule for share and feedback icons */
.dark img[alt="Share"],
.dark img[alt="Feedback"],
.dark img[alt="Copy Result"],
.dark img[alt="Print Result"],
.dark img[alt="Download Result"] {
    filter: invert(1) brightness(2) !important;
}

/* Keep header logo normal - NO inversion */
.dark img[src*="/all-images/home_logo/new/"],
.dark img[src*="/all-images/logo/logo.svg"],
.dark nav img[src*="logo"],
.dark header img[src*="logo"] {
    filter: invert(1) !important;
    /* Make SVG white in dark mode */
}

/* Exclude About section image from inversion */
.dark .about-section-img {
    filter: none !important;
}

/* Remove hover effects on header logo */
.dark nav a:has(img[src*="logo"]):hover img,
.dark header a:has(img[src*="logo"]):hover img {
    transform: none !important;
}

/* Category card hover text should be black in dark mode (on green hover background) */
.dark a[href*="/category/"]:hover h3,
.dark a[href*="/category/"]:hover p,
.dark a[href*="/category/"]:hover span,
.dark a[href*="/converter"]:hover h3,
.dark a[href*="/converter"]:hover p,
.dark a[href*="/converter"]:hover span {
    color: #000000 !important;
    /* Black text on green hover background */
}

/* Ensure text is white on non-hover dark cards */
.dark a:not(:hover) h3,
.dark a:not(:hover) p,
.dark a:not(:hover) span {
    color: #f1f5f9 !important;
}

/* Green buttons and links should have black text in dark mode */
.dark button[class*="bg-[#99EA48]"],
.dark a[class*="bg-[#99EA48]"],
.dark [class*="bg-[#99EA48]"] button {
    color: #000000 !important;
}

/* Calculator card arrow buttons - keep arrows white */
.dark button[aria-label="Open calculator"] svg,
.dark .bg-black svg,
.dark .bg-gray-900 svg,
.dark .bg-gray-800 svg,
.dark button.bg-black svg,
.dark button.bg-gray-900 svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Header navigation - white text in dark mode (non-hover) */
.dark nav a:not(:hover),
.dark nav a:not(:hover) svg,
.dark nav a:not(:hover) span,
.dark nav button:not(:hover),
.dark nav button:not(:hover) svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Convert black backgrounds to green in dark mode (for active menu items) */
.dark nav a[class*="bg-[#000]"],
.dark nav button[class*="bg-[#000]"] {
    background-color: #99ea48 !important;
    color: #000000 !important;
}

.dark nav a[class*="bg-[#000]"] svg,
.dark nav button[class*="bg-[#000]"] svg {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* Form submit buttons - convert black to green in dark mode */
.dark form button[type="submit"][class*="bg-black"] {
    background-color: #99ea48 !important;
    color: #000000 !important;
}

/* Header navigation - green background and black text on hover in dark mode */
/* Exclude logo from hover effects */
.dark nav a:hover:not(:has(img[src*="logo"])),
.dark nav button:hover {
    background-color: #99ea48 !important;
}

.dark nav a:hover,
.dark nav a:hover svg,
.dark nav a:hover span,
.dark nav button:hover,
.dark nav button:hover svg {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* Keep logo white on hover - no green background */
.dark nav a:has(img[src*="logo"]):hover {
    background-color: transparent !important;
}

/* Category Dropdown Dark Mode Fix - Specific Overrides */
.dark .category-dropdown-item:hover,
.dark .category-dropdown-item:hover span,
.dark .category-dropdown-item:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    background-color: transparent !important;
}

/* Category card background and border overrides for dark mode */
.dark .category-card {
    background-color: #1e293b !important;
    /* slate-800 */
    border-color: #334155 !important;
    /* slate-700 */
}

.dark .category-card .bg-white,
.dark .category-card .bg-gray-100 {
    background-color: #334155 !important;
    /* slate-700 for icon container */
}

.dark .category-card:hover {
    background-color: #99ea48 !important;
    /* Keep green hover background */
}

/* ========================================END DARK MODE OVERRIDES======================================== */
/* TABLE DESIGN */
.table_result table,
.table_result td,
.table_result th {
    border: 1px solid #9f9d9d;
    border-collapse: collapse;
    padding: 5px;
    text-align: center;
    font-weight: 600;
}

.table_result tr:hover {
    background-color: #e0e0e0;
    transition: background-color 0.3s ease;
}

.table_result table thead tr:first-child {
    background-color: #000000;
    color: white;
    font-weight: 500 !important;
}

/* Dark mode for table_result tables */
.dark .table_result table,
.dark .table_result td,
.dark .table_result th {
    border-color: #475569;
    background-color: #1e293b;
    color: #f1f5f9;
}

.dark .table_result table thead tr:first-child {
    background-color: #475569;
    color: #f1f5f9;
}

.dark .table_result tr:hover {
    background-color: #334155 !important;
}

.dark .table_result tr:hover td,
.dark .table_result tr:hover th {
    color: #f1f5f9 !important;
}

.result_tab {
    margin-top: 1.5rem;
    /* mt-6 */
    padding: 1rem;
    /* p-4 */
    border-radius: 0.5rem;
    /* rounded-lg */
    white-space: pre-wrap;
    /* whitespace-pre-wrap */
    font-size: 15px;
    /* text-[15px] */
    border: 1px solid #d1fae5;
    /* border-green-100 */
    border: 2px dotted #00bcd4;
    padding: 20px;
    width: fit-content;
}

/* md:text-[16px] */
@media (min-width: 768px) {
    .result_tab {
        font-size: 16px;
    }
}

/* LINKS */
.table_result a {
    color: #000000;
    text-decoration: underline;
    font-weight: 600;
}

.table_result table {
    border: 1px solid black;
    /* margin: 10px 0px; */
    overflow: auto;
    font-size: 14px !important;
}

.table_result table tr {
    border: 1px solid black;
}

.table_result table tr td {
    border: 1px solid black;
    padding: 7px;
}

.table_result table tr th {
    border: 1px solid black;
    padding: 7px;
}

.table_result table tr:hover {
    background-color: rgb(211, 211, 211);
}

.table_result div,
table.col-12 {
    max-width: 100%;
    width: 100%;
}

.table_result tr:first-child {
    background-color: #e4e8ef;
    color: #000;
    font-weight: 500 !important;
}

/* CSS for better select option styling - Add this to your CSS file */
.unit-select {
    line-height: 1.6 !important;
    padding: 8px 12px !important;
}

.disc_class {
    list-style: none !important;
    padding-left: 0 !important;
}

.disc_class li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 2px !important;
}

.disc_class li::before {
    content: "•";
    color: #000000;
    /* Black */
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.dark .disc_class li::before {
    color: #ffffff;
    /* White in dark mode */
}

.unit-select option {
    padding: 8px 12px !important;
    margin: 2px 0 !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.method2-results * {
    text-align: left !important;
}

/* Result sections styling */
.result {
    background-color: white;
    color: #000;
}

.result_calculator {
    background-color: white;
    color: #000;
}

/* Dark mode for result sections */
.dark .result {
    background-color: #1e293b;
    color: #f1f5f9;
}

.dark .result_calculator {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* Tables inside result sections */
.result table {
    background-color: white;
    color: #000;
}

/* Dark mode for tables inside result sections */
.dark .result table {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* Table cells in result sections */
.dark .result table td,
.dark .result table th {
    color: #f1f5f9;
}

/* Table row hover in dark mode */
.dark .result table tr:hover {
    background-color: #334155;
}

.dark .result table tr:hover td {
    color: #f1f5f9;
}

/* Chart.js canvases inside result sections */
.result canvas {
    background-color: white;
}

.dark .result canvas {
    background-color: #1e293b;
}

/* Note: Chart.js text colors are controlled via JavaScript options* Set color: '#f1f5f9' in chart options for dark mode support */
.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

#globalLoader img {
    width: 200px !important;
}

/* custom-scrollbar.css */
.thin-green-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.thin-green-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.thin-green-scrollbar::-webkit-scrollbar-thumb {
    background-color: #99ea48;
    /* Tailwind's green-500 */
    border-radius: 2px;
}

.katex-rendered-content {

    /* Dark Mode Scrollbar Overrides - White Thumb */
    .dark .thin-green-scrollbar::-webkit-scrollbar-thumb {
        background-color: #ffffff;
        /* White */
    }

    .dark .thin-green-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #ffffff;
        /* White on hover too */
    }

    .dark .thin-green-scrollbar::-webkit-scrollbar-track {
        background: #1e293b;
        /* Dark Slate to match container */
    }

    white-space: nowrap;
}

.katex-block {
    margin: 1em 0;
    /* block math ke 1em upar niche gap dega */
}

.rendered-html p {
    margin: 0.5em 0;
    /* paragraphs ke beech thoda gap */
    line-height: 1.4;
}

.result_select_dropdown {
    border: 0px solid black !important
}

.textgreenrrsult {
    color: #99ea48 !important;
    font-weight: 700 !important;
}

.textgreen {
    color: #99ea48 !important;
}

.bg_black {
    background-color: #000 !important;
}

.bg_green {
    background-color: #99ea48 !important;
}

.text_green {
    color: #99ea48 !important;
}

.green {
    color: #38a169 !important;
}

input:disabled {
    background-color: #e0f2fe;
    /* Tailwind bg-gray-200 ka equivalent hex */
}

.label {
    display: inline-block;
    margin-bottom: 5px;
}

/* Ensure labels followed by inputs/selects are block-level for stacking */
.label:has(+ .input),
.label:has(+ div > .input),
.label:has(+ div > select) {
    display: block;
}

.input {
    display: block;
    /* Force block level */
    width: 100%;
    height: 45px;
    /* margin-top: 5px!important; */
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 7px !important;
    padding-right: 1px !important;
    border-radius: 5px !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: white;
    color: #4a5568;
    /* Tailwind's text-gray-800 */
    font-size: 15px !important;
    border: 1px solid #99EA48 !important;
}

/* Dark mode for inputs */
.dark .input {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #99ea48 !important;
}

.textareaInput {
    width: 100%;
    height: 80px;
    padding: 8px 16px !important;
    padding-left: 10px !important;
    border-radius: 12px !important;
    outline: none !important;
    box-shadow: none !important;
    display: block;
    /* Force block level */
    /* margin-top: 5px!important; */
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 7px !important;
    padding-right: 1px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    background-color: white;
    color: #4a5568;
    /* Tailwind's text-gray-800 */
    font-size: 15px !important;
    border: 1px solid #99ea48 !important;
}

.dark .textareaInput {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #99ea48 !important;
}

.input_search:focus {
    border-radius: 12px !important;
    border: 1px solid #99EA48 !important;
    box-shadow: 0 0 0 1px #d2d4d8;
    /* focus:ring-green-500 */
    outline: none !important;
}

.select {
    width: 100% !important;
    height: 45px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 7px !important;
    padding-right: 1px !important;
    padding-left: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #99ea48 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: white;
    font-size: 15px !important;
    color: #4a5568;
    /* Equivalent to text-gray-800 in Tailwind */
}

.dark .select {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #99ea48 !important;
}

/* result */
.result_table table {
    border: 1px solid black;
    margin: 0px 0px;
    overflow: auto;
}

.result_table table tr {
    border: 1px solid black;
}

.result_table table tr td {
    border: 1px solid black;
    padding: 7px;
}

.result_table table tr th {
    border: 1px solid black;
    padding: 7px;
}

.result_table table tr:hover {
    background-color: rgb(211, 211, 211);
    /* hover:bg-gray-50 */
}

.result_table tr:first-child {
    background-color: #e5e7eb;
    color: #000;
    font-weight: 500 !important;
}

.result_table table {
    max-width: 100%;
    width: 100%;
}

/* Dark mode for result tables */
.dark .result_table table {
    border-color: #475569;
}

.dark .result_table table tr {
    border-color: #475569;
    background-color: #1e293b;
}

.dark .result_table table tr td,
.dark .result_table table tr th {
    border-color: #475569;
    color: #f1f5f9;
}

.dark .result_table table tr:hover {
    background-color: #334155 !important;
}

.dark .result_table tr:first-child {
    background-color: #475569;
    color: #f1f5f9;
}

/* result */
/* calculator details css start */
/* MAIN CONTENT WRAPPER */
.contentAll {
    max-width: 100% !important;
    overflow-x: auto;
    font-family: 'Inter', sans-serif;
    color: #334155;
    line-height: 1.8;
}

.contentAll p {
    /* margin: 7px 0; */
    font-size: 1.05rem;
    color: #334155;
    clear: both;
}

/* Suble first letter capitalization - only for the very first paragraph of content */
.contentAll>p:first-of-type::first-letter {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2rem;
    color: #0f172a;
}

.dark .contentAll>p:first-of-type::first-letter {
    color: #f1f5f9;
}

/* Math / KaTeX handling for premium look */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    margin: 1rem 0 !important;
}

.katex {
    font-size: 1.1em !important;
}

/* Image styling for both direct and p-wrapped images */
.contentAll img,
.contentAll div img,
.contentAll p img {
    max-width: 70%;
    width: auto;
    height: auto;
    display: block;
    /* margin: 25px auto; */
    /* border-radius: 8px; Added for a more premium look */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); Added for a more premium look */
}

/* Mobile responsive */
@media (max-width: 768px) {

    .contentAll img,
    .contentAll div img,
    .contentAll p img {
        max-width: 100% !important;
        width: 100% !important;
        margin: 15px 0;
        /* border-radius: 4px; */
    }
}

.contentAll b,
.contentAll strong {
    color: #0f172a;
    font-weight: 600;
}

.dark .contentAll p {
    color: #f1f5f9;
}

.dark .contentAll b,
.dark .contentAll strong {
    color: #99ea48;
    /* Project's signature lime green */
}

/* LISTS */
.contentAll ul,
.contentAll ol {
    padding-left: 25px;
    margin-top: 2px;
    margin-bottom: 2px;
    /* margin-bottom: 1.25rem; */
}

.contentAll ul {
    list-style-type: disc !important;
}

.contentAll ol {
    list-style-type: decimal !important;
}

.contentAll ul li,
.contentAll ol li {
    margin-bottom: 0.2rem;
    padding-left: 0.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.dark .contentAll ul li,
.dark .contentAll ol li {
    color: #f1f5f9 !important;
}

/* HEADINGS */
.contentAll h2,
.contentAll h3,
.contentAll h4 {
    font-weight: 700;
    color: #000000;
    margin: 5px 0px 5px;
    line-height: 1.3;
}

.dark .contentAll h2,
.dark .contentAll h3,
.dark .contentAll h4 {
    color: #f1f5f9;
}

.contentAll h2 {
    font-size: 24px;
}

.contentAll h3 {
    font-size: 18px;
}

.contentAll h4 {
    font-size: 16px;
}

/* BOLD TEXT INSIDE HEADINGS */
/* .contentAll h2 strong,.contentAll h3 strong,.contentAll h4 strong,.contentAll h2 b,.contentAll h3 b,.contentAll h4 b {color: #000000;} */
.contentAll h2,
.contentAll h3,
.contentAll h4,
.contentAll h2,
.contentAll h3,
.contentAll h4 {
    color: #000000;
    /* margin-top: 15px; */
}

/* TABLE DESIGN */
.contentAll table,
.contentAll td,
.contentAll th {
    border: 1px solid #9f9d9d;
    border-collapse: collapse;
    padding: 5px;
    text-align: center;
    font-weight: 600;
}

.contentAll tr:hover {
    background-color: #e0e0e0;
    transition: background-color 0.3s ease;
}

.contentAll table thead tr:first-child {
    background-color: #000000;
    color: white;
    font-weight: 500 !important;
}

/* Dark mode for contentAll tables */
.dark .contentAll table,
.dark .contentAll td,
.dark .contentAll th {
    border-color: #475569;
    background-color: #1e293b;
    color: #f1f5f9;
}

.dark .contentAll table thead tr:first-child {
    background-color: #475569;
    color: #f1f5f9;
}

.dark .contentAll tr:hover {
    background-color: #334155 !important;
}

.dark .contentAll tr:hover td,
.dark .contentAll tr:hover th {
    color: #f1f5f9 !important;
}

/* LINKS */
.contentAll a {
    color: #000000;
    text-decoration: underline;
    /* font-weight: 600; */
}

.contentAll table {
    border: 1px solid black;
    margin: 10px 0px;
    overflow: auto;
}

.contentAll table tr {
    border: 1px solid black;
}

.contentAll table tr td {
    border: 1px solid black;
    padding: 7px;
}

.contentAll table tr th {
    border: 1px solid black;
    padding: 7px;
}

.contentAll table tr:hover {
    background-color: rgb(211, 211, 211);
}

.contentAll div,
table.col-12 {
    max-width: 100%;
    width: 100%;
}

.contentAll tr:first-child {
    background-color: #99ea48;
    color: #000;
    font-weight: 500 !important;
}

.label {
    font-size: 0.875rem;
    /* Equivalent to text-sm in Tailwind */
    font-weight: 500;
    /* Equivalent to font-medium in Tailwind */
    color: #4b5563;
    /* Equivalent to text-gray-700 in Tailwind */
}

#root {
    overflow: hidden !important;
}

.input_unit {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    font-size: 0.9rem;
    pointer-events: none;
}

.dark .input_unit {
    color: #f1f5f9 !important;
}

/* .text-blue {color: #3b82f6;} */
.dark .text-blue {
    color: #f1f5f9 !important;
}

input[type="radio"]:checked {
    background-color: #99ea48 !important;
    color: #99ea48 !important;
    width: 17px !important;
    border: 2px solid black !important;
}

input[type="checkbox"] {
    accent-color: #99ea48 !important;
    color: #99ea48 !important;
    width: 20px !important;
    height: 18px !important;
    border: 2px solid black !important;
}

.bg-gradient {
    background: green;
}

.days_class_active {
    background: #38a169;
    color: white;
}

.input_gray_color {
    background: #f8f6f6 !important;
}

select {
    width: 100%;
    height: 45px;
    /* margin-top: 5px!important; */
    padding: 8px 16px !important;
    padding-left: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #99ea48 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: white;
    color: #4a5568;
    /* Equivalent to text-gray-800 in Tailwind */
}

.dark select {
    background-color: #1e293b;
    color: #f1f5f9;
}

textarea {
    width: 100%;
    height: 80px;
    padding: 8px 16px !important;
    padding-left: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #99ea48 !important;
    outline: none !important;
    box-shadow: none !important;
}

.dark textarea {
    background-color: #1e293b;
    color: #f1f5f9;
}

textarea {
    resize: both !important;
}

.tagsUnit {
    background: #99ea48 !important;
    color: #000000;
}

/* Dark mode for tagsUnit - keep same styling */
.dark .tagsUnit {
    background: #99ea48 !important;
    color: #000000 !important;
}

/* Default background for tabs (inactive) in dark mode - ONLY for tabs without tagsUnit */
.dark .hover_tags:not(.tagsUnit):not(.bg-green-400) {
    background: #475569 !important;
    color: #f1f5f9 !important;
}

/* Ensure bg-green-400 works on hover_tags in dark mode */
.dark .hover_tags.bg-green-400 {
    background-color: #4ade80 !important;
    /* bg-green-400 */
    color: #000000 !important;
}

.hover_tags:hover {
    background: #000000;
    color: white;
}

/* Dark mode for hover_tags - use dark gray background instead of black */
.dark .hover_tags:hover:not(.tagsUnit) {
    background: #334155 !important;
    color: #ffffff !important;
}

/* ///////////////////////////////////////////////////////////// */
.velocitytab .v_active {
    border-bottom: 3px solid #99ea48;
}

.veloTabs:hover {
    background: #dcdcdc73;
}

.velocitytab .v_active strong {
    color: #000000;
}

.velocitytab p {
    position: relative;
    top: 2px;
}

@keyframes blink {

    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: #99EA48;
    }
}

#exampleLoadBtn {
    border: 2px solid transparent;
    /* Default border transparent */
    background: #1670a712;
    padding: 7px 10px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 12px;
    color: #000000;
}

.dark #exampleLoadBtn {
    background: #99ea48 !important;
    color: #000000 !important;
    border-color: #99ea48 !important;
}

.dark #exampleLoadBtn svg {
    stroke: #000000 !important;
}

#exampleLoadBtn svg {
    transform: rotate(180deg);
}

/* Inflection Point Calculator */
.res_step ol {
    list-style-type: decimal;
    border-left: 1px solid #FF8080;
    padding: 0 30px;
}

.res_step ol ol {
    list-style-type: upper-alpha;
    border-left: 1px solid #92D169;
}

.res_step ol ol ol {
    list-style-type: upper-roman;
    border-left: 1px solid #78BEF0;
}

.res_step ol ol ol ol {
    list-style-type: lower-alpha;
    border-left: 1px solid #CC66C9;
}

.res_step ol ol ol ol ol {
    list-style-type: lower-roman;
    border-left: 1px solid #F2A279;
}

/* Inflection Point Calculator */
.quadratic_fraction {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: .9em;
}

.quadratic_fraction .num {
    top: 0;
    padding: 0 .3rem;
    display: block;
    white-space: nowrap;
    border-bottom: 1px solid black;
}

.Gematria_Calculator tbody tr td {
    border: 1px solid black !important
}

.Gematria_Calculator thead tr td {
    border: 1px solid black !important
}

.orange_color {
    color: #CC6E29;
}

.light-orange {
    background: #FFE0B2;
}

.week_height {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 71.59px;
    line-height: 50px;
}

.border-white {
    border: 1px solid #fff;
}

.lighter-blue {
    background: #E1F5FE;
}

.trim_height {
    height: 215px;
}

.light-lime {
    background: #F0F4C3;
}

.green_color {
    color: #5F6D24;
}

.lime {
    background: #E6EE9C;
}

.green_color {
    color: #5F6D24;
}

.light-blue {
    background: #B3E5FC;
}

@media (max-width: 380px) {
    .calculator-box {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.velocitytab .v_active {
    border-bottom: 3px solid #000000;
}

.velocitytab .v_active strong {
    color: #000000;
}

.velocitytab p {
    position: relative;
    top: 2px;
}

.velocitytab .active {
    /* background-color: #000000; */
    color: black;
}

.select2 {
    width: 100% !important;
}

.integral_input {
    height: 30px;
    background: var(--white);
    padding-left: 5px;
    border: 1px solid #D2D4D8;
    border-radius: 5px;
    color: var(--black);
    font-size: 15px;
    box-sizing: border-box;
    width: 35px;
    outline: 0;
}

.integ_symb {
    font-size: 7rem;
    line-height: normal;
}

/* ========================================SKELETON LOADING DARK MODE - SUPER SPECIFIC======================================== */
/* Target skeleton loading container with maximum specificity */
.dark div.result.bg-white.rounded-lg.shadow-md,
.dark div.result[class*="bg-white"][class*="rounded-lg"],
.dark div[class*="bg-white"][class*="rounded-lg"][class*="shadow-md"].result {
    background-color: #1e293b !important;
    /* slate-800 */
    color: #f1f5f9 !important;
}

/* Target all skeleton animated bars */
.dark .result .animate-pulse div.bg-gray-200,
.dark .result .animate-pulse div[class*="bg-gray-200"],
.dark .result .animate-pulse>div[class*="bg-gray"],
.dark div.result div.animate-pulse div {
    background-color: #475569 !important;
    /* slate-600 base color */
}

/* Gradient effect for skeleton bars - lightest to darkest */
.dark .result .animate-pulse>div:nth-child(1) {
    background-color: #64748b !important;
    /* slate-500 - lightest, most visible */
}

.dark .result .animate-pulse>div:nth-child(2) {
    background-color: #475569 !important;
    /* slate-600 */
}

.dark .result .animate-pulse>div:nth-child(3) {
    background-color: #334155 !important;
    /* slate-700 */
}

.dark .result .animate-pulse>div:nth-child(4) {
    background-color: #1e293b !important;
    /* slate-800 - darkest, most subtle */
}

/* Hide Scrollbar Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Face Shape Scanner Animation */
@keyframes scan-line {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(350px);
    }

    100% {
        transform: translateY(0);
    }
}

.scanner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 50;
    pointer-events: none;
}

.scanner-line {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, transparent, rgba(34, 197, 94, 0.8), transparent);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.4);
    animation: scan-line 3s ease-in-out infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes slide-in-from-top-2 {
    from {
        transform: translateY(-0.5rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoom-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-in {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.slide-in-from-top-2 {
    animation-name: slide-in-from-top-2;
}

.zoom-in {
    animation-name: zoom-in;
}


.input_menu {
    position: absolute;
    z-index: 10;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    width: max-content;
    /* Jitna text hai utni width */
    min-width: 120px;
    /* Minimum width taake boht chhota na lage */
    margin-top: 0.25rem;
    right: 0;
    white-space: nowrap;
    /* Text ko line break hone se rokta hai */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    /* Thoda sa shadow taake premium lage */
}

/* Media queries mein fixed width ki ab zaroorat nahi */
@media (min-width: 768px) {
    .input_menu {
        /* width auto hi rahegi */
    }
}

@media (min-width: 1024px) {
    .input_menu {
        /* width auto hi rahegi */
    }
}

.input_label {
    position: absolute;
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: underline;
    right: 1.5rem;
    top: 0.75rem;
}