/* Dark Mode Theme for ClassQuizzer */
/* Supports both system preference (@media) and manual toggle (data-color-scheme attribute) */

/* ===== SYSTEM PREFERENCE DETECTION ===== */
@media (prefers-color-scheme: dark) {
  html:not([data-color-scheme]) html { background-color: #1e1e1e; }  
  html:not([data-color-scheme]) body { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
  
}

/* ===== MANUAL DATA-ATTRIBUTE TOGGLE ===== */
html[data-color-scheme="dark"] { background-color: #1e1e1e; }
html[data-color-scheme="dark"] body { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
html[data-color-scheme="dark"] p { background-color:  #1e1e1e};
html[data-color-scheme="dark"] div { background-color: #1e1e1e }
html[data-color-scheme="dark"] #header-wrap { background-color: #1e1e1e ; }
html[data-color-scheme="dark"] #content, html[data-color-scheme="dark"] #main, html[data-color-scheme="dark"] #container, html[data-color-scheme="dark"] .content { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
html[data-color-scheme="dark"] #content-wrapper { background-color: #1e1e1e !important; }
html[data-color-scheme="dark"] #content-outer { background-color: #1e1e1e !important; border-color: #3a3a3a !important; }

html[data-color-scheme="dark"] form, html[data-color-scheme="dark"] .form-group, html[data-color-scheme="dark"] .smart-green, html[data-color-scheme="dark"] .basic-grey, html[data-color-scheme="dark"] .form-style-10, html[data-color-scheme="dark"] form.white-pink { background-color: #1e1e1e !important; color: #e0e0e0 !important; }

html[data-color-scheme="dark"] input, html[data-color-scheme="dark"] textarea, html[data-color-scheme="dark"] select { background-color: #3a3a3a !important; color: #e0e0e0 !important; border-color: #555 !important; }
html[data-color-scheme="dark"] input:focus, html[data-color-scheme="dark"] textarea:focus, html[data-color-scheme="dark"] select:focus { background-color: #2a4a3a !important; border-color: #64b5f6 !important; outline-color: #64b5f6 !important; }

html[data-color-scheme="dark"] button, html[data-color-scheme="dark"] input[type="button"], html[data-color-scheme="dark"] input[type="submit"], html[data-color-scheme="dark"] .btn { background-color: #2a5a4a !important; color: #fff !important; border-color: #3a5a4a !important; }
html[data-color-scheme="dark"] button:hover, html[data-color-scheme="dark"] input[type="button"]:hover, html[data-color-scheme="dark"] input[type="submit"]:hover, html[data-color-scheme="dark"] .btn:hover { background-color: #3a6a5a !important; }

html[data-color-scheme="dark"] table { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; }
html[data-color-scheme="dark"] table th { background-color: #2a5a4a !important; color: #fff !important; }
html[data-color-scheme="dark"] table td { border-color: #3a3a3a !important; background-color: #1e1e1e !important;  color:#ffffffea!important;/*geo fix*/ }
html[data-color-scheme="dark"] table tr:hover { background-color: #2d2d2d !important; }


html[data-color-scheme="dark"] a, html[data-color-scheme="dark"] a:link, html[data-color-scheme="dark"] a:visited { color: #64b5f6 !important; }
html[data-color-scheme="dark"] a:hover, html[data-color-scheme="dark"] a:focus { color: #90caf9 !important; }

html[data-color-scheme="dark"] .menu, html[data-color-scheme="dark"] #menu, html[data-color-scheme="dark"] #nav, html[data-color-scheme="dark"] nav, html[data-color-scheme="dark"] .navbar { background-color: #2a5a4a !important; color: #fff !important; }
html[data-color-scheme="dark"] .menu a, html[data-color-scheme="dark"] #menu a, html[data-color-scheme="dark"] #nav a, html[data-color-scheme="dark"] nav a, html[data-color-scheme="dark"] .navbar a { color: #e0e0e0 !important; }
html[data-color-scheme="dark"] .menu a:hover, html[data-color-scheme="dark"] #menu a:hover, html[data-color-scheme="dark"] #nav a:hover, html[data-color-scheme="dark"] nav a:hover, html[data-color-scheme="dark"] .navbar a:hover { background-color: #3a6a5a !important; color: #fff !important; }

html[data-color-scheme="dark"] #sidebar, html[data-color-scheme="dark"] .sidebar, html[data-color-scheme="dark"] .grid_3 { background-color: #2d2d2d !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; }

html[data-color-scheme="dark"] h1, html[data-color-scheme="dark"] h2, html[data-color-scheme="dark"] h3, html[data-color-scheme="dark"] h4, html[data-color-scheme="dark"] h5, html[data-color-scheme="dark"] h6 { color: #e0e0e0 !important; background-color: #2c1414 !important;/*geo fix*/ }

html[data-color-scheme="dark"] .card, html[data-color-scheme="dark"] .modal-content { background-color: #2d2d2d !important; color: #e0e0e0 !important; }

html[data-color-scheme="dark"] code, html[data-color-scheme="dark"] pre { background-color: #2d2d2d !important; color: #81c784 !important; border-color: #3a3a3a !important; }
html[data-color-scheme="dark"] blockquote { background-color: #2d2d2d !important; color: #b0bec5 !important; border-color: #3a3a3a !important; }

html[data-color-scheme="dark"] label { color: #e0e0e0 !important; }

html[data-color-scheme="dark"] .ui-widget { background-color: #2d2d2d !important; color: #e0e0e0 !important; }
html[data-color-scheme="dark"] .ui-widget-header { background-color: #2a5a4a !important; color: #fff !important; }

html[data-color-scheme="dark"] .overlay, html[data-color-scheme="dark"] #overlay { background-color: rgba(0, 0, 0, 0.7) !important; }



/*  quiz list  need more for header of roundbox*/
/*html[data-color-scheme="dark"] .roundBox, ul, li { background-color: #1e1e1e !important; }*/
/*html[data-color-scheme="dark"] ul { background-color: #1e1e1e !important; }
html[data-color-scheme="dark"] li { background-color: #1e1e1e !important; }*/