/* =============================================
   GLOBAL / BASE STYLES
   ============================================= */

#toph1 {

  flex-grow: 1; /* Allow the title to take up available space */
  flex-shrink: 1; /* Let it shrink if necessary */
  white-space: nowrap; /* Prevent text from breaking into multiple lines */
  
}


/* Unified button styles */
button {
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

button:active {
  background-color: #003f7f;
}

/* Fix combined selector syntax */
#resetToDefaultBtn,
#closeOverlayBtn {
  margin-top: 20px;
}

/* Body and Global Typography */
body {
  font-family: 'Arial', sans-serif;
  background: #f4f4f4;
  color: #333;
  margin: 0;
  padding: 0 20px;
  line-height: 1.5;
}

/* Header */
h1 {
  color: #444;
  text-align: center;
  margin-top: 20px;
  font-size: 1.8em;
}

/* Sections */
.section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top:15px;
}

/* Piecharts */
.charts-container {
  display: flex; /* Flexbox layout */
  flex-wrap: wrap; /* Allow wrapping for small screens */
  gap: 5px; /* Space between charts */
  justify-content: center; /* Center content horizontally */
  margin-bottom:20px;
  

}

#piechart, #piecharttotals {
  flex: 1 1 calc(50% - 16px); /* Two columns on larger screens */
  max-width: calc(49.95% - 24px); /* Set a max width for charts */
  min-width: 300px; /* Minimum width for charts */
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 15px;
  margin-top: 5px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
  
}



.apexcharts-canvas {
  position: relative !important; /* Ensure it doesn’t use absolute positioning */
  z-index: 1 !important; /* Lower the z-index */
}

@media (max-width: 768px) {
  #piechart, #piecharttotals {
    flex: 1 1 100%; /* Stacked layout on smaller screens */
    max-width: 100%; /* Full width for small screens */
    
  }
  #piecharttotals {
    flex: 1 1 100%; /* Stacked layout on smaller screens */
    max-width: 100%; /* Full width for small screens */
    margin-bottom: 55px;
    margin-top: 0px;
  }

}

/* Transcript plus toggle */

#transcript {
  position: relative;
  margin-top: 5px;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid #ddd;
  min-height: 20px;
  max-height: 200px;
  overflow-y: auto;
  transition: max-height 0.3s ease;
}

#historyToggle {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 10%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  z-index: 10;
}


/* Transcript, Alert, Counter Elements */

#counter{
  margin-top: 5px;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}

#alert
{
  margin-top: 5px;
  font-size: 16px;
  padding: 0px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
}

/* RemoveAll Button */
#removeAllBtn {
  background: #dc3545; /* Red */
}

/* Close Button (for modals, etc.) */
.close-button {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  color: red;
  font-size: 1.6rem;
  cursor: pointer;
}

.close-button:hover {
  color: darkred;
}

/* =============================================
   PLAY/STOP STATE BUTTONS
   ============================================= */

/* PLAY STATE */
.play-state {
  background-color: #4caf50; /* green */
  color: #fff;
}

/* Optionally add a play symbol; remove if unused */
.play-state::before {
  content: '';
  color: inherit;
}

.play-state:hover {
  background-color: #45a049; /* Slightly darker green */
}

.play-state:active {
  background-color: #4caf50; 
  color: #fff;
}

/* STOP STATE */
.stop-state {
  background-color: #f44336; /* red */
  color: #fff;
}

/* Optionally add a stop symbol; remove if unused */
.stop-state::before {
  content: '';
  color: inherit;
}

.stop-state:hover {
  background-color: #e53935; /* Slightly darker red */
}

.stop-state:active {
  background-color: #f44336;
  color: #fff;
}

/* =============================================
   MODALS & OVERLAYS
   ============================================= */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none; /* Set to flex when active */
  justify-content: center;
  align-items: center;
  z-index: 2000;
  
}

.modal {
  position: relative;
  background: white;
  padding: 18px;
  border-radius: 5px;
  width: 380px;
  text-align: center;
  z-index: 3000;
}

.modal h2 {
  margin-bottom: 15px;
}

/* =============================================
   FORMS & INPUT GROUPS
   ============================================= */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group input {
  width: calc(100% - 10px);
  padding: 8px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-group input::placeholder {
  font-size: 0.8rem; /* Default size when typing */
  padding: 0.5rem;
}


/* =============================================
   WORD LIST
   ============================================= */
.word-list {
  max-height: 260px;
  overflow-y: auto;
}

/* Each list item in the word list */
.word-list li {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Ensures proper vertical alignment */
  margin-bottom: 5px;
  padding: 5px 0;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
}

#wordList {
  margin-right: 10px;
}

/* Word-list-specific button (e.g. "Remove" button) */
.word-list button {
  background: #dc3545;
  border: none;
  padding: 5px 10px;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  width: auto;
  max-width: 100px; /* optional */
}

.word-list button:hover {
  background: #b02a37;
}

/* =============================================
   LANGUAGE SELECTOR
   ============================================= */
#languageSelectorBtn {
  background-color: #ffc107; /* Yellow */
  color: #000;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#languageSelectorBtn:hover {
  background-color: #e0a800;
}

#languageSelectorBtn:active {
  background-color: #c69500;
}

/* Language Modal */
#languageModal select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#languageModal select:focus {
  border-color: #007bff;
  outline: none;
}

/* Save Language Button */
#saveLanguageBtn {
  background-color: #4caf50; /* Green save button */
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

#saveLanguageBtn:hover {
  background-color: #45a049;
}

#saveLanguageBtn:active {
  background-color: #388e3c;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Combine all your mobile styles into one @media block */
@media (max-width: 768px) {
  /* Language Modal Adjustments */
  #languageModal .modal-content {
    width: 90%;
  }

  #languageModal select {
    font-size: 14px;
    padding: 8px;
  }

  #saveLanguageBtn {
    font-size: 14px;
    padding: 8px 15px;
  }

  /* Word-list buttons on smaller screens */
  .word-list button {
    width: 78px;
    font-size: 0.8rem;
    padding: 8px;
  }

  /* Modal */
  .modal {
    width: 95%;
  }

  /* Body layout adjustments */
  body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 10px;
  }

  /* Extra bottom padding for #counter if needed */


  .section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top:15px;
  }

  button {
    flex: 1;
  }

  /* Sticky buttons at the bottom of the screen */
  .sticky-buttons {
    position: fixed;
    z-index:500;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  }
}

#counter {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default to 1 column */
    column-gap: 60px;
    row-gap: 0px;
    padding: 25px;
    text-align: left;
}
#counter div span {
    font-weight: normal; /* Numbers are not bold */
}

#counter div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed lightgray; /* Optional */
    padding: 5px;
    font-weight: bold;
}

/* Media queries to adjust the number of columns */
@media (min-width: 576px) {
    #counter {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (min-width: 768px) {
    #counter {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

@media (min-width: 1200px) {
    #counter {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
    }
}

/* Sticky header styles */
#stickyHeader {
  position: relative;
  margin: 0;
  top: 0;
  width: 100%;
  height: 60px; /* Fixed height */
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-between; /* Keep elements horizontally aligned */
  align-items: center;
  padding: 0 15px; /* Horizontal padding */
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
  z-index: 1000;
  box-sizing: border-box;
}

/* Hamburger Menu */
#menuContainer {
  display: flex;
  align-items: center;
}

#hamburgerMenu {
  background: none;
  border: none;
  font-size: 24px; /* Maintain proportional size */
  cursor: pointer;
  color: #333;
  width: 40px; /* Ensure enough clickable area */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navigation Drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  left: -350px; /* Hidden off-screen */
  width: 120px;
  height: 100%;
  background-color: #333;
  opacity:98%;
  color: white;
  overflow-y: auto;
  transition: left 0.3s ease-in-out;
  z-index: 1000;
  padding: 20px;
}

.nav-drawer.active {
  left: 0; /* Slide into view when active */
}

.nav-drawer .close-button {

  color: white;
  padding: 0px 5px;
  font-size:1.4rem;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 10px;
}

.nav-links {
  list-style: none;
  padding-left:15px;
}

.nav-links li {
  margin: 10px 0;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.nav-links li a:hover {
  text-decoration: underline;
}


/* Language Selector */
#topRightSelector {
  display: flex;
  gap: 8px; /* Space between buttons */
  align-items: center; /* Ensure alignment */
}

.language-btn {
  text-decoration: none;
  font-size: 14px; /* Maintain proportional size */
  color: #555;
  padding: 5px 10px; /* Keep padding consistent */
  border: 1px solid #ddd;
  border-radius: 3px;
  transition: background-color 0.2s, color 0.2s;
}

.language-btn:hover {
  background-color: #007bff;
  color: white;
}

.language-btn.active {
  background-color: #007bff;
  color: white;
  pointer-events: none; /* Disable interaction for the active button */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  #stickyHeader {
    height: 60px; /* Slightly reduce height */
    padding: 0 10px; /* Adjust horizontal padding */
  }

  #hamburgerMenu {
    font-size: 20px; /* Slightly smaller icon */
    width: 36px;
    height: 36px;
  }

  #topRightSelector {
    gap: 5px; /* Reduce spacing between language buttons */
  }

  .language-btn {
    font-size: 12px; /* Reduce font size slightly */
    padding: 4px 8px; /* Smaller button padding */
  }
}

/* Responsive Design for Very Small Screens (e.g., phones) */
@media (max-width: 480px) {
  #stickyHeader {
    flex-wrap: nowrap; /* Prevent stacking */
    padding: 0 5px; /* Minimal padding */
    height: 50px; /* Consistent height */
  }

  #hamburgerMenu {
    font-size: 18px; /* Adjust icon size */
    width: 30px; /* Compact but clickable */
    height: 30px;
  }

  #topRightSelector {
    gap: 3px; /* Minimize spacing */
  }

  .language-btn {
    font-size: 10px; /* Reduce size to fit */
    padding: 2px 6px; /* Compact padding */
  }
}