html {
    --bg-1: #fff;
    --bg-2: #e0e6eb;
    --bg-3: #c2cdd6;
    --fg-1: #212121;
    --fg-2: #4d4d4d;
    --link: #1c7ed4;
    --link-hover: #3492e5;
    --link-active: #176bb5
}

html.dark {
    --fg-1: #f0f0f0; /* Light text for better contrast */
    --fg-2: #d0d0d0; /* Slightly softer text */
    --bg-1: #2b2b2b; /* Dark background */
    --bg-2: #3a3a3a; /* Lighter background for navigation */
    --bg-3: #505050; /* Slightly lighter grey for secondary elements */
    --link: #73c1fc; /* Bright blue for contrast */
    --link-hover: #91cefd;
    --link-active: #4baffb;
}

body {
    --border-radius: 6px;
    --font: "Inter", "Poppins", "Nunito", sans-serif;
    --font-mono: "Fira Code", "JetBrains Mono", "Source Code Pro", monospace;
    background: var(--bg-1);
    color: var(--fg-1);
    font-family: var(--font);
    height: calc(100vh - 2rem);
    margin: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1.1
}

:-webkit-any(h1, h2, h3, h4, h5, h6, p) {
    margin: 1rem .1rem
}

:is(h1, h2, h3, h4, h5, h6, p) {
    margin: 1rem .1rem
}

label {
    margin: .5rem .1rem
}

:-webkit-any(h1, h2, h3, h4, h5, h6, p, label):first-child {
    margin-top: 0
}

:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
    margin-top: 0
}

:-webkit-any(h1, h2, h3, h4, h5, h6, p, label):last-child {
    margin-bottom: 0
}

:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
    margin-bottom: 0
}

a {
    color: var(--link)
}

a:hover {
    color: var(--link-hover)
}

a:active {
    color: var(--link-active)
}

label {
    align-items: center;
    gap: .5rem;
    display: flex
}

label input {
    margin: 0
}

button,
input,
select {
    font-family: inherit;
    font-size: inherit
}

button {
    background: var(--link);
    color: var(--bg-1);
    border-radius: var(--border-radius);
    border: none;
    padding: .5rem 1rem
}

button:hover {
    background: var(--link-hover)
}

button:active {
    background: var(--link-active)
}

:-webkit-any(button, button:hover, button:active):disabled {
    background: var(--link);
    filter: grayscale();
    opacity: .4
}

:is(button, button:hover, button:active):disabled {
    background: var(--link);
    filter: grayscale();
    opacity: .4
}

input,
textarea,
select {
    border: 1px solid var(--bg-2);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    padding: .5rem;
}

input,
textarea {
    background: var(--bg-1);
    color: inherit;
}

select {
    color: var(--fg-1);
}

select:not([multiple]) {
    background: var(--bg-1);
}

textarea {
    font-family: var(--font-mono);
    font-size: .9rem
}

form {
    flex-direction: column;
    align-items: baseline;
    gap: 1rem;
    display: flex
}

ul:has(li):has(form) {
    padding: 0;
    list-style: none
}

li form {
    flex-direction: row;
    gap: .5rem;
    margin: .5rem 0
}

nav {
    background: var(--bg-2);
    z-index: 2;
    border-radius: var(--border-radius);
    gap: 1em;
    margin: 0 0 1em;
    padding: 1em;
    display: flex;
    position: relative
}

nav a {
    text-decoration: none
}

nav a[aria-current=true] {
    border-bottom: 2px solid
}

ul:has(form) {
    padding: 0;
    list-style: none
}

progress {
    margin: .5rem 0
}

progress:first-child {
    margin-top: 0
}

progress:lsat-child {
    margin-bottom: 0
}

.error {
    color: red
}

code {
    background: var(--bg-2);
    font-family: var(--font-mono);
    border-radius: var(--border-radius);
    padding: .15rem .3rem;
    font-size: .9em
}

ul.todos {
    padding: 0
}

ul.todos li form {
    -webkit-user-select: none;
    user-select: none;
    background: var(--bg-1);
    filter: drop-shadow(2px 3px 6px #0000001a);
    border-radius: 5px;
    align-items: center;
    gap: .5em;
    margin: 0 0 .5em;
    padding: .5em .5em .5em 1em;
    transition: filter .2s, opacity .2s;
    display: flex;
    position: relative
}

ul.todos li:not(:has(>form)) {
    -webkit-user-select: none;
    user-select: none;
    background: var(--bg-1);
    filter: drop-shadow(2px 3px 6px #0000001a);
    border-radius: 5px;
    align-items: center;
    gap: .5em;
    margin: 0 0 .5em;
    padding: .5em .5em .5em 1em;
    transition: filter .2s, opacity .2s;
    display: flex;
    position: relative
}

ul.todos .done {
    filter: none;
    opacity: .4
}

ul.todos button {
    cursor: pointer;
    aspect-ratio: 1;
    opacity: .5;
    background-color: #0000;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border: none;
    width: 3em;
    height: 3em;
    margin: -.5em -.5em -.5em 0;
    transition: opacity .2s
}

ul.todos button:hover {
    opacity: 1
}

/*---------------------------------------------------------------------------------------*/
/*                                                                                       */
/*                                   Style Added                                         */
/*                                                                                       */
/*---------------------------------------------------------------------------------------*/

/* ======================
   Navigation Bar
   ====================== */

.top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, #62a14f 0%, #055303 100%);
        color: #fff;
        border-radius: var(--border-radius);
        padding: 0.5em 1.5em;
        margin-bottom: 1em;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.nav-left {
        display: flex;
        align-items: center;
        gap: 1rem;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-left a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
}

.nav-left a:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.07);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-right a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
}

.nav-right a:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.07);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.logo {
        height: 80px;
        width: auto;
}


.content {
        background: #fff; /* highlight the main area with white */
        border-radius: var(--border-radius);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.277); /* subtle shadow */
        padding: 2rem; /* more space inside */
}

.content h1 {
        font-size: 2rem; /* bigger than the default */
        margin-top: 0;
        margin-bottom: 0.5rem;
}


/*---------------------------------------------------------------------------------------*/
/*                          Dark mode styles                                             */
/*---------------------------------------------------------------------------------------*/

.dark-toggle {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.dark-toggle:hover {
	opacity: 0.7;
	transform: scale(1.1); /* Slight zoom effect on hover */
}



/* Ensure navigation links have good contrast */
html.dark .nav-right a {
    color: var(--link);
}

html.dark .nav-right a:hover {
    color: var(--link-hover);
    background: rgba(255, 255, 255, 0.15); 
}

/* Ensure the toggle button remains visible in dark mode */
html.dark .dark-toggle {
    color: #fff; 
}

/* Ensure the navigation bar has good contrast */
html.dark .top-nav {
    background: linear-gradient(90deg, #013b06 0%, #002212 100%);
    border: 1px solid var(--bg-3);
}

/* Improve readability of main content */
html.dark .content {
    background: var(--bg-2); 
    color: var(--link);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}


html.dark .content a:hover {
    color: var(--link-hover);
}

/* Ensure paragraphs and headings are clearly visible */
html.dark .content h1,
html.dark .content h2,
html.dark .content h3 {
    color: #ffffff;
}

html.dark .content p {
    color: #dddddd;
}

/* ======================
   Dark Mode Charts
   ====================== */

/* The `html.dark` class is applied when switching to dark mode */
html.dark .sidebar {
    background-color: #222 !important; /* Darker shade */
    color: #e0e0e0 !important; /* Light gray text */
    border-right: 1px solid #444 !important; /* Softer border */   
  }
  
  html.dark .sidebar h2,
  html.dark .sidebar h3,
  html.dark .sidebar label {
    color: #e0e0e0 !important; /* Light grey for readability */
    font-weight: 600; /* Make text bolder */
}

  /* Improve visibility for input fields in dark mode */
  html.dark input[type="date"],
  html.dark select,
  html.dark button {
      background-color: #333 !important;  /* Darker background */
      color: #ffffff !important;          /* White text */
      border: 1px solid #666 !important;  /* Visible border */
      padding: 0.5rem;
      border-radius: 6px;
      font-size: 1rem;
  } 
  /* Ensure the calendar icon is visible */
  html.dark input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1) brightness(1.2) !important;
      background: transparent !important;
      cursor: pointer;
  } 
  /* Improve readability of disabled elements */
  html.dark .sidebar label[disabled] {
      color: #999 !important;
      opacity: 1 !important;
  }
 
 /* Dark mode filter box */
html.dark .filters {
    background-color: #292929 !important; /* Softer dark gray */
    border: 1px solid #444 !important; /* More subtle border */
}

/* Dark mode input fields */
html.dark input[type="date"],
html.dark select,
html.dark button {
    background-color: #333 !important;  /* Darker input */
    color: #fff !important;  /* White text */
    border: 1px solid #555 !important;
}

/* Dark mode selected dropdown items */
html.dark select option:checked {
    background-color: #444 !important;
    color: #ffffff !important;
}

/* Dark mode button */
html.dark button {
    background-color: #444 !important;
    border: 1px solid #666 !important;
    color: #fff !important;
}

html.dark button:hover {
    background-color: #555 !important;
    border-color: #777 !important;
}