:root {
  --c1: #222831;
  --c2: #31363F;
  --c3: #76ABAE;      /* Soft, muted teal */
  --c3-dark: #4A7D80;
  --c4: #EEEEEE;
  --c5: #CFCFD2;
  --c6: #D9855B;     /* Warm terracotta */

--c1-rgb: rgb(34, 40, 49);
--c1-rgba: 34, 40, 49;
--c2-rgb: rgb(49, 54, 63);
--c2-rgba: 49, 54, 63;
--c3-rgb: rgb(118, 171, 174);
--c4-rgb: rgb(238, 238, 238);
--c4-rgba: 238, 238, 238;
--c5-rgb: rgb(207, 207, 210);
--c5-rgba: 207, 207, 210;


  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-even: 0 0 16px rgba(0, 0, 0, 0.3);

  --c10: #8E3A3A;     /* Deep, earthy red */
  --c12: #C6B063;     /* Muted gold-olive */
  --c13: #8A89A5;     /* Dusty lavender-gray */
  --c14: #92A385;     /* Muted sage green */

  --c15: #5A7A6B;     /* Muted sage */
  --c16: #B89F7B;     /* Warm khaki */
  --c17: #7A5C58;     /* Dusty rosewood */
  --c18: #6B8BA4;     /* Soft slate blue */
  --c19: #C4A484;     /* Sandstone */
  --c20: #8C6F75;     /* Mauve taupe */
  --c21: #A8B8C4;     /* Pale sky blue */
  --c22: #7B6660;     /* Smoky gray */
  --c23: #B8A082;     /* Camel */
  --c24: #6A7C89;     /* Steel teal */

  --c25: #4A90A4;   /* Bright Teal */
  --c26: #E8A87C;   /* Peachy Coral */
  --c27: #B8D48A;   /* Soft Lime */
  --c28: #8A9BC4;   /* Cornflower Blue */
  --c29: #D4A5A5;   /* Dusty Rose */
  --c30: #7FC7B9;   /* Seafoam Green */
  --c31: #F4B678;   /* Sunset Orange */
  --c32: #9B8BC5;   /* Lavender Purple */
  --c33: #E69898;   /* Salmon Pink */
  --c34: #6BA3C4;   /* Sky Blue */

  --teal-serenity: #76ABAE;      /* Soft, muted teal with a calming effect */
  --rustic-red: #8E3A3A;         /* Deep, earthy red with warmth */
  --terracotta-glow: #D9855B;    /* Warm, sun-baked terracotta */
  --golden-olive: #C6B063;       /* Muted gold with an olive undertone */
  --lavender-haze: #8A89A5;      /* Soft, dusty lavender-gray */

  /* damped */
  --sage-mist: #92A385;          /* Muted sage green with a misty feel */
  --muted-sage: #5A7A6B;         /* Earthy green with a soft, natural touch */
  --warm-khaki: #B89F7B;         /* Neutral, warm beige-khaki */
  --dusty-rosewood: #7A5C58;     /* Subdued reddish-brown, cozy and warm */
  --soft-slate-blue: #6B8BA4;    /* Cool, muted blue-gray for contrast */
  --sandstone: #C4A484;          /* Light, warm tan reminiscent of sandstone */
  --mauve-taupe: #8C6F75;        /* Soft, muted purple-gray for subtlety */
  --pale-sky-blue: #A8B8C4;      /* Light, airy blue for a fresh touch */
  --smoky-gray: #7B6660;         /* Neutral, slightly warm gray */
  --camel: #B8A082;              /* Warm, sandy beige for versatility */
  --steel-teal: #6A7C89;         /* Cool, muted blue-green for depth */

  /* colorful */
  --bright-teal: #4A90A4;      /* A lively, refreshing teal */
  --peachy-coral: #E8A87C;     /* Warm and inviting coral */
  --soft-lime: #B8D48A;        /* A gentle, natural lime green */
  --cornflower-blue: #8A9BC4;  /* Soft yet vibrant blue */
  --dusty-rose: #D4A5A5;       /* Muted pink with warmth */
  --seafoam-green: #7FC7B9;    /* Fresh and airy green */
  --sunset-orange: #F4B678;    /* Warm and energetic orange */
  --lavender-purple: #9B8BC5;  /* Soft but vibrant purple */
  --salmon-pink: #E69898;      /* Playful and warm pink */
  --sky-blue: #6BA3C4;         /* Bright but soothing blue */

  --energy-color: var(--c12);
  --carbohydrate-color: var(--c13);
  --protein-color: var(--c14);
  --fat-color: var(--c6);

  --text-dark: var(--c1);
  --text-light: var(--c4);

  --bottom-bar-background: var(--c2);

  --background: var(--c1);
  --card-background: var(--c1);

  --button: var(--c3);

  --icon-selected: var(--c6);
  --icon-default: var(--c3);
}

.text-dark {
  color: var(--text-dark);
}
.text-light {
  color: var(--text-light);
}
.red {
  color: var(--c10);
}
.orange {
  color: var(--fat-color);
}
.yellow{
  color: var(--c12);
}
.blue {
  color: var(--carbohydrate-color);
}
.green {
  color: var(--protein-color);
}

html {
  touch-action: manipulation;
}

/*
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/RobotoMono-Regular.woff2') format('woff2'),
         url('fonts/RobotoMono-Regular.woff') format('woff');
    font-display: swap;
}
*/

@font-face {
    font-family: 'Roboto Flex';
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 1000; /* Adjust these ranges to match your font's supported values */
    font-stretch: 25% 151%; /* Adjust these ranges to match your font's supported values */
    font-display: swap;
}


body {
  font-size: 14px;
  margin: 0; /* Remove default body margin */
  background-color: var(--background); /* Your background color */
  color: var(--text-dark); /* Your text color */
  /* font-family: 'Roboto Mono', 'Courier New', */
  font-family: 'Roboto Flex', monospace;
  padding-top: 20px; /* Adjust 4rem if your top-bar's actual height changes */
  padding-left: 20px; /* Retain original padding for left */
  padding-right: 20px; /* Retain original padding for right */
  padding-bottom: 20px; /* Retain original padding for bottom */
}

p {
  color: var(--text-light);
}

label {
  display: block;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 600;
}

/* Active tab label */
input[type="radio"]:checked + label {
    color: var(--c6);
}

button {
  background-color: var(--c3);
  color: var(--c1);
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  width: 50%;
  max-width: 200px;
  height: 48px;
  transition: background-color 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  touch-action: manipulation;
}

button:active {
  background-color: var(--c4);
  color: var(--c1);
  transform: translateY(1px); /* Slight upward movement */
  box-shadow: var(--shadow); 
}

label:active {
  color: var(--c6);
  transform: scale(0.98);
}

.label-small {
  font-size: 14px;
}

.label-medium {
  font-size: 16px;
}

.label-large {
  font-size: 20px;
}

.centered-horizontal-flex {
    display: flex;
    justify-content: space-around; /* Centers items along the new vertical main axis */
    align-items: center;
    gap: 0.6em;
}

.centered-vertical-flex {
    flex-direction: column;
    display: flex;
    justify-content: center; /* Centers items along the new vertical main axis */
    align-items: center;
}

.right-align {
    text-align: right;
}

.centered {
  display: flex;
  justify-content: center;
}

.content {
  padding-top: 58px;
}

h2 {
    color: var(--text-light);
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    color: var(--text-light);
    text-align: center;
    margin-bottom: 0px;
}

#scatterPlotContainer {
    display: flex;
    align-items: center;
    height: 600px; /* Set a fixed height for the entire plot and dropdown */
    width: 100%;
}

#scatterPlot{
    flex-grow: 1;
    width: 100%;
    height: 100%; /* Ensure the plot takes the full height */
}

#caloriesPlotContainer {
    display: flex;
    align-items: center;
    height: 600px; /* Set a fixed height for the entire plot and dropdown */
}

#caloriesPlot {
    width: 80%;
    height: 100%; /* Ensure the plot takes the full height */
}


/* Boxes */

.updatemenu-item-rect:hover {
      background-color: var(--c1); /* Green hover color */
      fill: var(--c4);
  }

.updatemenu-item-text:hover {
      background-color: var(--c3); /* Green hover color */
      fill: var(--c1);
      color: var(--c1);
  }

/* Ensure plot takes up the full space */
#caloriesPlot {
    width: 100%;
    height: 100%;
}

.unit {
  margin-left: 12px;
  /*color: #6b7280;*/
  color: var(--c5);
  font-weight: 400;
  font-size: 0.9rem;
  white-space: nowrap; /* Prevent unit from wrapping */
}

.category-bar {
    padding: 10px 15px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* BEGIN Collapsible content */

.collapsible-container {
    max-width: 800px;
    margin: auto;
    margin-top: 10px;
    background-color: var(--card-background);
    color: var(--c4);
}

.collapsible-bar {
    cursor: pointer;
}

.collapsible-bar h2 {
    margin: 0;
    font-size: 1.2em;
}

.arrow {
    display: inline-block;
    font-size: 1em;
    transition: transform 0.3s ease;
}

/* Rotate arrow when bar is active */
.collapsible-bar.active .arrow {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content.open {
    max-height: 2000px; /* Adjust this value to be larger than your largest table */
    padding: 0px;
}
/* END Collapsible content */

.consumed-time {
  padding: 8px;
}

@media (max-width: 768px) { /* You can adjust this breakpoint as needed */
  body {
    padding: 0; /* Remove padding for screens up to 768px wide */
  }
}

@keyframes flashBorder {
    0% {
        outline: 2px solid var(--c3);
        outline-offset: 2px;
    }
    100% {
        outline: 2px solid var(--c2);
        outline-offset: 2px;
    }
}

.flash-effect {
    animation: flashBorder 1s ease-out;
}

.shadow {
    box-shadow: var(--shadow-even);
}

.border-bottom {
    border-bottom: 1px solid var(--c2);
    border-radius: 8px;
}

.highlight {
    border: 0px solid var(--c2);
    border-radius: 8px;
    box-shadow: var(--shadow-even);
}

.card {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem;
    background-color: var(--card-background );
}