<style>
	.panel-heading {
	     background-color: #404040 !important;
	}
	.page-heading {
	     background-color: #404040 !important;
	     height: 40px;
	     padding:0
	}
	
	.container input[type="text"] {
		border-radius: 4px;
	  	margin-bottom: -1px;
	  	width:35%;
	}
	
	.container button[type="button"] {
		border-radius: 4px;
	}
		
	td.details-control {
		text-align:center;
		color:#10206B; /*indigo;*/
		cursor: pointer;
	}
	
	tr.shown td.details-control {
	    text-align:center; 
	    color:#10206B; /*indigo;*/
	}
	
	div.dt-buttons {
		position: relative;
    	float: right;
	}

	td.details-control2 {
		text-align:center;
		color:#10206B;
		cursor: pointer;
	}
	
	tr.shown td.details-control2 {
	    text-align:center; 
	    color:#10206B;
	}
	
form.example input[type=text] {
  padding: 5px;
  font-size: 15px;
  border: 1px solid grey;

  width: 60%;
  background: #ffffff;
  		border-radius: 0px;
	  	margin-bottom: 0px;
	  	
}

form.example button {

  width: 10%;
  padding: 5px;
  background: #10206B;
  color: white;
  font-size: 15px;
  border: 1px solid darkblue;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #000080;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}	

/* --- FULL DARK MODE SUITE --- */
        
        body.dark-mode { background-color: #121212; color: #e0e0e0; }
        
        /* 1. PDF Viewer Inversion */
        body.dark-mode #pdf_image, 
        body.dark-mode #pdf-js-viewer canvas { 
            filter: invert(90%) hue-rotate(180deg); 
        }
        
        body.dark-mode #txt_data {
            background-color: #1e1e1e !important;
            color: #ffffff !important;
            border: 1px solid #444 !important;
        }
        
        /* 2. Container & Intro Panel Fixes */
        body.dark-mode #pdf-js-viewer,
        body.dark-mode #pdf-container,
        body.dark-mode #intro_window {
            background-color: #1a1a1a !important;
        }
        
        body.dark-mode #intro_window h1,
        body.dark-mode #intro_window h4,
        body.dark-mode .intro h4 {
            color: #e0e0e0 !important; /* Academic Reader & Click to upload text */
        }
        
        body.dark-mode .intro a { color: #8ab4f8 !important; }
        
        /* 3. Inputs & UI Fixes */
        body.dark-mode #radio h5, 
        body.dark-mode #radio i,
        body.dark-mode #radio label,
        body.dark-mode .radio-row h5 {
            color: #bbccff !important;
        }
        
        body.dark-mode #radio2 h6, 
        body.dark-mode #radio2 i,
        body.dark-mode #radio2 label,
        body.dark-mode .radio2-row h6 {
            color: #bbccff !important;
        }        
        
        
        .dynamic-text, .file-label, .remove-btn, .label-text h6 {
            color: #10206B;
        }
        
        .label-text {
            color: #10206B !important;
        }
        
        /* Specifically target label-text inside links to prevent them from turning black/blue */
        a .label-text {
            color: #10206B !important;
            text-decoration: none; /* Optional: keeps it clean */
        }

        .dynamic-text, .file-label, .remove-btn, .label-text h5 {
            color: #10206B;
        }        
        #search_off {
            accent-color: #10206B;
        }
        .remove-btn {
            background-color: transparent;
            border: none;
            font-size: small;
            cursor: pointer;
        }

        body.dark-mode .dynamic-text,
        body.dark-mode .file-label,
        body.dark-mode .remove-btn,
        body.dark-mode .label-text{
            color: #bbccff !important;
        }
        
        body.dark-mode #search_off {
            accent-color: #bbccff !important;
        }        
        
        body.dark-mode #use_more_docs {
            accent-color: #bbccff; /* Light blue for visibility */
        }
        body.dark-mode .use_more_docs_text {
            color: #bbccff !important; /* Matches your other dark mode labels */
        }      
        
        body.dark-mode #use_perspective {
            accent-color: #bbccff; /* Light blue for visibility */
        }
        body.dark-mode .use_more_docs_text {
            color: #bbccff !important; /* Matches your other dark mode labels */
        }           
        
        body.dark-mode #ad .card {
            background-color: #1e1e1e; /* Dark grey card background */
            border: 1px solid #333;
        }
        
        body.dark-mode #ad h4 span {
            color: #bbccff !important; /* Light blue/lavender text */
        }
        
        body.dark-mode #ad a {
            color: #88aaff; /* Lighter blue for links so they are readable */
        }
        
        body.dark-mode #ad span[title] {
            color: #cccccc; /* Subtle grey for the link spans */
        }
        
        body.dark-mode #footer {
            background-color: #121212 !important; 
            border-top: none !important;  /* This specifically removes that solid line */
            box-shadow: none !important;   /* Also removes any subtle shadow that might look like a line */
        }
        
        body.dark-mode #footer h6,
        body.dark-mode #footer h6 span,
        body.dark-mode #footer a,
        body.dark-mode #footer .footer-link {
            color: #bbccff !important;
        }
        

        
        body.dark-mode select#source, 
        body.dark-mode select#area,
        body.dark-mode select#category,
        body.dark-mode select#subcategory,
        body.dark-mode select#language_area,
        body.dark-mode select#source_area,
        body.dark-mode select#time_area,
        body.dark-mode input#query {
            background-color: #2d2d2d !important;
            color: #ffffff !important;
            border: 1px solid #555 !important;
        }
        
        body.dark-mode .menu-bar,
        body.dark-mode #hide-panel-btn, 
        body.dark-mode #show-panel-btn {
            background-color: #0a1135 !important;
        }
        
        
        body.dark-mode .upload-btn {
            background-color: #333 !important; /* Darker background */
            border-color: #555 !important;      /* Darker border to match dark mode */
        }
        
        body.dark-mode .upload-btn i {
            color: #bbccff !important;          /* Your light blue accent for the icon */
        }
        
        body.dark-mode .upload-btn:hover {
            background-color: #444 !important; /* Slight highlight on hover */
        }

        /* 4. Answer Results */
        body.dark-mode #qa_result h5,
        body.dark-mode #qa_result h4,
        body.dark-mode #examples a {
            color: #8ab4f8 !important;
        }
        
        /* --- DARK MODE FIXES FOR INSTRUCTIONS & RESULTS --- */
        
        /* Targets the "Try", "review this paper", and other examples */
        body.dark-mode #examples,
        body.dark-mode #examples span {
            color: #cbd5e0 !important; /* Light grey for "Try" and dots */
        }
        
        body.dark-mode #examples a {
            color: #8ab4f8 !important; /* Light blue for links like "review this paper" */
            text-decoration: underline;
        }
        
        /* Targets the "Answer" heading and the content below it */
        body.dark-mode #answer_title span,
        body.dark-mode #answer_title b,
        body.dark-mode #answer_title u {
            color: #ffffff !important; /* Pure white for the "Answer" underline */
        }
        
        body.dark-mode #mytitle, 
        body.dark-mode #mytitle span,        
        body.dark-mode #title span,
        body.dark-mode #title b,
        body.dark-mode #title u {
            color: #ffffff !important; /* Pure white for the "Answer" underline */
        }
        
        body.dark-mode #related_work_title span,
        body.dark-mode #related_work_title b,
        body.dark-mode #related_work_title u,         
        body.dark-mode #reference_title span,
        body.dark-mode #reference_title b,
        body.dark-mode #reference_title u {
            color: #ffffff !important; /* Pure white for the "Answer" underline */
        }        
        
        body.dark-mode #highlight,
        body.dark-mode #highlight span,
        body.dark-mode #related_work,
        body.dark-mode #related_work span,    
        body.dark-mode #reference,
        body.dark-mode #reference span,           
        body.dark-mode #qa_result h5,
        body.dark-mode #qa_result h4 {
            color: #e2e8f0 !important; /* Soft white/grey for the AI response text */
        }
        
        /* Fixes the icons (magnifying glass, etc.) next to "Answer" */
        body.dark-mode .glyphicon,
        body.dark-mode .fa-align-justify {
            /*color: #8ab4f8 !important;*/
        }
        
        /* Fix for DataTables (The "Too Bright" Table) */
        body.dark-mode #example, 
        body.dark-mode table.dataTable,
        body.dark-mode .dataTables_wrapper {
            background-color: #1e1e1e !important;
            color: #e0e0e0 !important;
        }
        
        body.dark-mode #thead th,
        body.dark-mode table.dataTable thead th {
            background-color: #2d2d2d !important;
            color: #bbccff !important;
            border-bottom: 1px solid #444 !important;
        }
        
        body.dark-mode table.dataTable tbody td {
            background-color: #1e1e1e !important;
            border-bottom: 1px solid #333 !important;
        }
        
        /* Fix for Search/Filter Input */
        body.dark-mode .dataTables_filter input {
            background-color: #2d2d2d !important;
            color: #ffffff !important;
            border: 1px solid #555 !important;
        }
        
        /* Fix for Dynamic Instruction Text and Horizontal Lines */
        body.dark-mode #instruction,
        body.dark-mode #instruction h5,
        body.dark-mode #instruction span,
        body.dark-mode #instruction a,
        body.dark-mode #instruction u,
        body.dark-mode #instruction i {
            color: #bbccff !important;
        }
        
        body.dark-mode hr {
            background-color: #bbccff !important;
            color: #bbccff !important;
            opacity: 0.3; /* Softens the lines in dark mode */
        }
        
        /* Fix for the Load All Results Button */
        body.dark-mode #button2 {
            background-color: #2d2d2d !important;
            color: #bbccff !important;
            border-color: #bbccff !important;
        }

        
        /* Fix for Radio Labels */
        body.dark-mode #has_papers_label,
        body.dark-mode #has_tracking_label,
        body.dark-mode #has_trending_label {
            color: #bbccff !important;
        }        
        
        
        /* --- 5. Daily Paper Digest Specific Fixes --- */
        
        /* 1. Layout & Titles (The light blue accents) */
        body.dark-mode #instruction,
        body.dark-mode #instruction h5,
        body.dark-mode #instruction span,
        body.dark-mode #instruction a,
        body.dark-mode #instruction u,
        body.dark-mode #instruction i,
        body.dark-mode #has_papers_label,
        body.dark-mode #has_tracking_label,
        body.dark-mode #has_trending_label,
        body.dark-mode #button2 {
            color: #bbccff !important;
        }
        
        body.dark-mode hr {
            background-color: #bbccff !important;
            color: #bbccff !important;
            opacity: 0.3;
        }
        
        /* 2. The Table Body & Wrapper */
        body.dark-mode #example, 
        body.dark-mode table.dataTable,
        body.dark-mode .dataTables_wrapper {
            background-color: #1e1e1e !important;
            color: #e0e0e0 !important;
        }
        
        body.dark-mode table.dataTable tbody td {
            background-color: #1e1e1e !important;
            border-bottom: 1px solid #333 !important;
        }
        
        /* 3. Table Headers (Added background back for contrast) */
        body.dark-mode #thead th,
        body.dark-mode #thead th span,
        body.dark-mode table.dataTable thead th,
        body.dark-mode table.dataTable thead th span {
            background-color: #2d2d2d !important;
            color: #bbccff !important;
        }
        
        /* 4. DataTable Controls (Show Entries, Filter, Info) */
        body.dark-mode .dataTables_length, 
        body.dark-mode .dataTables_filter,
        body.dark-mode .dataTables_info,
        body.dark-mode .dataTables_length label,
        body.dark-mode .dataTables_filter label {
            color: #e0e0e0 !important;
        }
        
        /* 5. Dropdowns & Inputs (The "Too Dark" boxes) */
        body.dark-mode .dataTables_length select,
        body.dark-mode .dataTables_filter input,
        body.dark-mode select[name="example_length"],
        body.dark-mode .dataTables_length select option {
            background-color: #2d2d2d !important;
            color: #ffffff !important;
            border: 1px solid #555 !important;
        }
        
        body.dark-mode td.details-control2 i.fa-plus-square,
        body.dark-mode td.details-control2 i.fa-minus-square {
            color: #bbccff !important;
        }        
        body.dark-mode .dataTable span, 
        body.dark-mode .dataTables_wrapper span {
            color: #2a6496 !important; /* This provides much better readability */
        }        
        
        body.dark-mode #button2 {
            background-color: #2d2d2d !important;
            border-color: #bbccff !important;
        }        
        
/* 1. Base style for all pagination buttons in Dark Mode */
body.dark-mode .dataTables_paginate .paginate_button {
    color: #bbccff !important;
    border: 1px solid #444 !important;
}

/* 2. The "Current" active page number (usually needs a background) */
body.dark-mode .dataTables_paginate .paginate_button.current {
    background: #3d4a7a !important; /* Slightly darker blue background */
    color: white !important;
    border: 1px solid #bbccff !important;
}

/* 3. Hover state for buttons */
body.dark-mode .dataTables_paginate .paginate_button:hover {
    background: #2a6496 !important;
    color: white !important;
    border: 1px solid #bbccff !important;
}

/* 4. Disabled buttons (like 'Previous' when on page 1) */
body.dark-mode .dataTables_paginate .paginate_button.disabled {
    color: #666 !important; /* Muted grey so it looks disabled */
    border: 1px solid #333 !important;
}

/* 5. The "..." ellipsis text */
body.dark-mode .dataTables_paginate .ellipsis {
    color: #bbccff !important;
}        

        body.dark-mode #button {
            background-color: #2d2d2d !important;
            color: #bbccff !important;
            border-color: #bbccff !important;
            border-left: 1px solid;
        }
        
        
/* Hide the sun by default */
.mode-icon-sun {
    display: none !important;
}

/* Style the moon */
.mode-icon-moon {
    display: inline-block;
    color: #10206B; /* Your brand blue */
}

/* --- Dark Mode State --- */

/* When body has .dark-mode, HIDE the moon */
body.dark-mode .mode-icon-moon {
    display: none !important;
}

/* When body has .dark-mode, SHOW the sun */
body.dark-mode .mode-icon-sun {
    display: inline-block !important;
    color: #bbccff; /* Your light lavender/blue */
}        
</style>