/* style.css */

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Existing styles */
  font-family: Angst Light;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  text-transform: uppercase;
  font-size: 120%;
}

:root {
  --top-bar-height: 50px;
  --scroll-offset: 50px; /* top-bar-height + extra spacing */
}

/*********************************************************
 * AUTH OVERLAY
 *********************************************************/
#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

#auth-form {
  width: min(360px, 90vw);
  padding: 22px;
  background-color: rgba(245, 245, 245, 0.98);
  border: 2px solid rgb(43, 80, 110);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#auth-form h2 {
  margin-bottom: 16px;
  font-size: 1.1rem;
  text-align: center;
}

#auth-form input {
  width: 100%;
  margin-bottom: 10px;
  padding: 9px;
  font-family: Angst Light;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: rgba(226, 228, 233);
}

.auth-actions {
  display: flex;
  gap: 10px;
}

.auth-actions button {
  flex: 1;
  padding: 8px;
  cursor: pointer;
  font-family: Angst Light;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: rgb(71, 133, 184);
  color: #fff;
}

.auth-actions button:hover {
  background-color: rgb(43, 80, 110);
}

#auth-message {
  min-height: 18px;
  margin-top: 12px;
  font-size: 0.75rem;
  text-align: center;
  text-transform: none;
}

/*********************************************************
 * TOP BAR
 *********************************************************/
#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1000;
  background-color: rgba(245, 245, 245, 0.95);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.7);
}

#top-bar button {
  margin-right: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: Angst Light;
  background-color: rgba(245, 245, 245, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius:8%;
}

#top-bar button:hover {
	background-color: rgba(112, 128, 144, 0.3);
	transform:translateY(2px);
}

#title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-right: 1%;
  margin-left: 0.35%;
  
}

/*********************************************************
 * POPUP for JUMP TO MONTH
 *********************************************************/
#jump-popup {
  position: fixed;
  top: 60px;
  left: 220px;
  z-index: 10000;
  display: none; /* hidden by default */
  
  width: 220px; /* Adjusted width for better spacing */
  background-color: rgba(245, 245, 245);
  border: 1px solid rgb(43, 80, 110);
  padding: 10px;
  border-radius: 5px;
  
}

#jump-popup label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 0.9rem;
}

#jump-popup select {
  width: 100%;
  padding: 5px;
  margin-top: 3px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: Angst Light;
  background-color: rgba(226, 228, 233);
}

#jump-popup button {
  margin-top: 10px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: Angst Light;
  padding: 5px;
  background-color: rgb(71, 133, 184);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
}

#jump-popup button:hover {
  background-color: rgb(43, 80, 110)
}

/*********************************************************
 * MAIN CONTENT CONTAINER
 *********************************************************/
#main-content {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 50px; /* Adjust for fixed top-bar */
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: -1;
}

.background-layer.active {
  opacity: 1;
}

/*********************************************************
 * SCROLLABLE CALENDAR (Left 63%)
 *********************************************************/
#calendar-container {
  width: 63%;
  height: 100%; /* Adjust for fixed top-bar */
  overflow-y: scroll;
  background: transparent;
  
  /* Snap settings */
  scroll-snap-type: y mandatory;
  scroll-padding-top: 50px; /* For the fixed bar height */
  

  /* Hide scrollbar */
  scrollbar-width: none;       
  -ms-overflow-style: none;    
  position: relative;
  margin-top: 0;
}

#calendar-container::-webkit-scrollbar {
  display: none;
}

#months-wrapper {
  
}

/*********************************************************
 * EACH MONTH BLOCK
 *********************************************************/
.month-block {
  height: calc(100vh - var(--scroll-offset));
  margin: 10vh 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
 
  /* Snap so top edge aligns below the bar */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.month-header {
  display: flex;
  align-items: center;             /* Vertically centers all child elements */
  justify-content: center;   
  
  font-size: 0.9vw;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: rgba(245, 245, 245, 0.8); 
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  height:3.3%;
  
  cursor: pointer; 
}

.month-header:hover {
	background-color: rgba(245, 245, 245, 0.95);
}

/* WEEK NUMBER COLUMN */
.week-number {
  background-color: rgba(245, 245, 245, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8vw;
  box-sizing: border-box;
}

/* CALENDAR GRID WITH WEEK NUMBER COLUMN */
.calendar-grid {
  display: grid;
  grid-template-columns: 5% repeat(7, 1fr);
  grid-gap: 5px;
  flex: 1; 
  align-content: start;
  width: 100%;
  
  transition: max-height 0.7s ease;
  overflow: hidden;
  max-height: 1000px;
}

/* Collapsed state for calendar-grid */
.calendar-grid.collapsed {
  max-height: 0;
}

/* Adjust DAY-BOX to align correctly */
.day-box {
  font-size: 0.8vw;
  height: 14vh;  /* or any preferred fixed height */
  position: relative;
  padding: 5px;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  user-select: none;
  background-color: rgba(245, 245, 245, 0.8);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  /* Make the day-box scrollable */
  overflow-y: auto;
  box-sizing: border-box;
}

.day-box:hover {
	background-color: rgba(245, 245, 245, 0.9);
}

.day-box a:hover {
	transform: translateY(4px);
}

/* Hide scrollbar in Firefox */
.day-box {
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar in IE, Edge */
.day-box {
  -ms-overflow-style: none;
}

/* Hide scrollbar in Chrome, Safari, Opera */
.day-box::-webkit-scrollbar {
  display: none;
}

.today {
  color:rgb(43, 80, 110);
  background-color: rgba(218, 230, 241, 0.95);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 3px solid rgb(71, 133, 184);
}

.today:hover {
	background-color: rgba(218, 230, 241, 1);
}

/* Highlight day-box in edit mode */
.day-box.editing-mode {
  border: 2px dashed #007BFF;
}

/* Highlight the selected day-box */
.selected-day {
  box-sizing: border-box;     /* Ensure border doesn't affect element size */
  background-color: rgba(218, 230, 241, 0.95);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 3px solid rgb(71, 133, 184);
}

.selected-day:hover {
	background-color: rgba(218, 230, 241, 1);
}

/*********************************************************
 * OUT-OF-RANGE (leading/trailing days)
 *********************************************************/
.day-box.out-of-range {
  color: rgb(89, 89, 89);
  background-color: rgba(245, 245, 245, 0.1);
  pointer-events: none; /* non-clickable */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.day-box.out-of-range img {
    filter: grayscale(100%);
}

/*********************************************************
 * RIGHT-CLICK CONTEXT MENU
 *********************************************************/
#context-menu {
  position: absolute;
  background: rgba(245, 245, 245);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  display: none;
  flex-direction: column;
  z-index: 1000;
}

#context-menu button {
  font-family: Angst Light;
  background: none;
  border: none;
  border-radius: 5px;
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  cursor: pointer;
}

#context-menu button:hover {
  background-color: rgba(112, 128, 144, 0.3);
}

/*********************************************************
 * ADD WORKOUT INPUT POPUP
 *********************************************************/

/* Styles for the workout input pop-up */
#workout-popup {
  width: 220px;
  background-color: rgba(245, 245, 245);
  border: 1px solid rgb(43, 80, 110);
  padding: 10px;
  border-radius: 5px;
}

#workout-popup label {
  font-weight: bold;
  font-size: 0.9rem;
}

#workout-popup input {
  width: 100%;
  padding: 5px;
  margin-top: 3px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: Angst Light;
  background-color: rgba(226, 228, 233);
}

#workout-popup button {
  width: 100%;
  font-family: Angst Light;
  padding: 5px;
  background-color: rgb(71, 133, 184);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  cursor: pointer;
}

#workout-popup button:hover {
  background-color: rgb(43, 80, 110)
}

/*********************************************************
 * ADD SMOKE-FAST INPUT POPUP
 *********************************************************/

#smokefast-popup {
  width: 220px;
  background-color: rgba(245, 245, 245);
  border: 1px solid rgb(43, 80, 110);
  padding: 10px;
  border-radius: 5px;
}

#smokefast-popup label {
  font-weight: bold;
  font-size: 0.9rem;
}

#smokefast-popup input {
  width: 100%;
  padding: 5px;
  margin-top: 3px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: Angst Light;
  background-color: rgba(226, 228, 233);
}

#smokefast-popup button {
  width: 100%;
  font-family: Angst Light;
  padding: 5px;
  background-color: rgb(71, 133, 184);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  cursor: pointer;
}

#smokefast-popup button:hover {
  background-color: rgb(43, 80, 110);
}

/*********************************************************
 * EDIT WORKOUT INPUT POPUP
 *********************************************************/
 
#edit-popup {
  width: 220px; /* Adjusted width for better spacing */
  background-color: rgba(245, 245, 245);
  border: 1px solid rgb(43, 80, 110);
  padding: 10px;
  border-radius: 5px;
}

#edit-popup label {
  font-weight: bold;
  font-size: 0.9rem;
}

#edit-popup input {
  width: 100%;
  padding: 5px;
  margin-top: 3px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: Angst Light;
  background-color: rgba(226, 228, 233);
}

#edit-popup button {
  width: 100%;
  font-family: Angst Light;
  padding: 5px;
  background-color: rgb(71, 133, 184);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  cursor: pointer;
}

#edit-popup button:hover {
  background-color: rgb(43, 80, 110)
}

/* Highlight day-box in edit mode */
.day-box.editing-mode {
  border: 3px dashed rgb(71, 133, 184);
}

.delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
  background: rgba(255, 0, 0, 0.8);
  color: #fff;
  font-weight: bold;
  padding: 4px 5px;
  border: none;
  border-radius: 40%;
  font-size: 1vw;
  line-height: 1;
/* Most of this styling doesn't work, it's set-up in events.js */
}

/* Optional: Hover effect for the 'X' button */
.delete-btn:hover {
  background: rgba(200, 0, 0, 0.9);
}

.day-box.editing-mode a:hover,
.day-box.editing-mode a:focus {
  transform: none; /* Remove any transform effects */
  cursor: default; /* Change cursor to default to indicate non-clickable */
}

/*********************************************************
 * CONFIRMATION MODAL
 *********************************************************/
 
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.hidden {
    display: none;
}

.modal-content {
    background-color: rgba(245, 245, 245);
    padding: 20px;
    border-radius: 10px;
	border: 2px solid rgb(43, 80, 110);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.modal-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.button-confirm {
	width:35%;
    background-color: rgb(71, 133, 184);
    color: #fff;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    cursor: pointer;
}

.button-cancel {
	width:35%;
    background-color: rgba(245, 245, 245, 0.8);
    color: #333;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    cursor: pointer;
}

.button-confirm:hover {
    background-color: rgb(43, 80, 110);
}

.button-cancel:hover {
    background-color: rgba(112, 128, 144, 0.3);
}

/*********************************************************
 * TEXT OVERLAY FOR WORKOUT BUTTON
 *********************************************************/
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  text-align: center;
  font-family: "Grunge Overlords new Regular", sans-serif;
  /* multiple shadows to create a thicker black stroke */
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  font-size: 1.4vw; /* or 18px, 1.5em, etc. */
  pointer-events: none;
}

/*********************************************************
 * WORKOUT IMAGE
 *********************************************************/
.workout-image {
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 10px 8px, rgba(0, 0, 0, 0.09) 0px 26px 16px;
}

/*********************************************************
 * SMOKE-FAST BOX
 *********************************************************/
 
 /* ================================================
   SMOKE-FAST COLOR VARIABLES
   (Change colors here only — no JS editing required)
   ================================================ */
:root {
  --smoke-fast-active: rgba(71, 133, 184, 0.8);  /* inside START–END */
  --smoke-fast-rest:   rgba(200, 200, 200, 0.1); /* outside range */
}

.smoke-fast-box {
  width: 100%;
  height: 20px; /* about half the height of a workout image */
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
              rgba(0, 0, 0, 0.09) 0px 4px 2px,
              rgba(0, 0, 0, 0.09) 0px 8px 4px,
              rgba(0, 0, 0, 0.09) 0px 10px 8px,
              rgba(0, 0, 0, 0.09) 0px 26px 16px;
  margin-bottom: 5px;
  background-color: var(--smoke-fast-rest);
  position: relative;
  cursor: default;
}

/*********************************************************
 * SMOKE-FAST LABEL INSIDE DAY-BOX EVENT
 *********************************************************/
.smoke-fast-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Angst Light;
  font-size: 55%;
  font-weight: bold;
  color: #000;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.6),
     1px -1px 0 rgba(255, 255, 255, 0.6),
    -1px  1px 0 rgba(255, 255, 255, 0.6),
     1px  1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/*********************************************************
 * SMOKE-FAST START / END LABELS IN DAY-BOX
 *********************************************************/
.smoke-fast-start,
.smoke-fast-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: Angst Light;
  font-size: 55%;
  font-weight: bold;
  color: #000;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.6),
     1px -1px 0 rgba(255, 255, 255, 0.6),
    -1px  1px 0 rgba(255, 255, 255, 0.6),
     1px  1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none; /* so right-click / edit still work on the box */
}

.smoke-fast-start {
  left: 5px;
}

.smoke-fast-end {
  right: 5px;
}

/*********************************************************
 * SMOKE-FAST OVERVIEW PANEL
 *********************************************************/
.smoke-fast-overview-panel {
  height: 50px;              /* a bit taller in the overview */
  margin-bottom: 10px;
}

/* Center "SMOKE-FAST" text */
.smoke-fast-overview-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Angst Light;
  font-weight: bold;
  font-size: 90%;
  color: #000;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.6),
     1px -1px 0 rgba(255, 255, 255, 0.6),
    -1px  1px 0 rgba(255, 255, 255, 0.6),
     1px  1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* START time on the left */
.smoke-fast-overview-start {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Angst Light;
  font-size: 80%;
  font-weight: bold;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.6),
     1px -1px 0 rgba(255, 255, 255, 0.6),
    -1px  1px 0 rgba(255, 255, 255, 0.6),
     1px  1px 0 rgba(255, 255, 255, 0.6);  
}

/* END time on the right */
.smoke-fast-overview-end {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Angst Light;
  font-size: 80%;
  font-weight: bold;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.6),
     1px -1px 0 rgba(255, 255, 255, 0.6),
    -1px  1px 0 rgba(255, 255, 255, 0.6),
     1px  1px 0 rgba(255, 255, 255, 0.6);
}

/*********************************************************
 * DETAILS PANEL (Right 37%)
 *********************************************************/
#details-container {
  width: 37%;
  padding: 10px;
  margin-top: 50px;
  height: calc(100% - 50px); 
  overflow: hidden;
}

#details-container::-webkit-scrollbar {
  display: none;
}

#tabs {
  display: flex;
}

.tab-button {
  font-family: Angst Light;
  background-color: rgba(112, 128, 144, 0.3);
  padding: 10px 20px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s;
  border-radius: 10px 10px 0 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 6px, rgba(0, 0, 0, 0.23) 0px 0px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.tab-button.active {
  background-color: rgba(245, 245, 245, 0.95);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 6px, rgba(0, 0, 0, 0.23) 0px 0px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom:none;
}

.tab-button:hover {
	background-color: rgba(245, 245, 245, 0.95);
}

/* TAB CONTENT STYLES */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  background-color: rgba(245, 245, 245, 0.8);
  height:86.7vh;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding:2%;
  overflow-y: auto; /* Enable vertical scrolling */
  
  /* Hide scrollbars for Chrome, Safari, and Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.tab-content.active::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/*********************************************************
 * OVERVIEW WORKOUTS SECTION
 *********************************************************/

/* Custom Styles for Workout Events in Overview Tab */
#overview-workouts {
  /* Example Styles */
  display: flex;
  flex-direction: column;
  gap: 5px; /* Space between workout buttons */
  padding: 10px;
}

/* Custom Styles for the WORKOUT Header in Overview Tab */
.overview-workouts-header {
  font-family: "Grunge Overlords new Regular";
  text-align: center;                /* Center the header text */
  margin-bottom: -9px;               /* Space below the header */
  color: black;
  
  font-weight: lighter;
  font-size: 170%; /* or 18px, 1.5em, etc. */
}

/* Example: Styling the workout buttons within overview-workouts */
#overview-workouts .overview-event-button {
  display: block;
  position: relative; /* Added to position overlay-text absolutely within */
  border: none;
  
  background-color: transparent;
  padding: 0;
  transition: transform 0.3s; /* Smooth animation for hover */
}

#overview-workouts a.overview-event-button {
  cursor: pointer;
  text-decoration: none; /* Removes underline from links */
}

#overview-workouts a.overview-event-button:hover {
  transform: translateY(4px);
}

/* If using images within the buttons, you might want additional styling */
#overview-workouts .overview-event-button img {
  display: block;
  width: 100%;
  object-fit: cover; /* Adjust based on your design */
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, 
              rgba(0, 0, 0, 0.09) 0px 4px 2px, 
              rgba(0, 0, 0, 0.09) 0px 8px 4px, 
              rgba(0, 0, 0, 0.09) 0px 10px 8px, 
              rgba(0, 0, 0, 0.09) 0px 26px 16px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 15px;     /* Optional rounding */
}

/* Styles for button elements (workouts without links) */
#overview-workouts button.overview-event-button {
  cursor: default;
}

#overview-workouts button.overview-event-button:hover {
  transform: none;
}

#overview-workouts .overview-event-button .overlay-text{
	font-size: 300%;
	pointer-events: none;
}

/*********************************************************
 * BAR GRAPH
 *********************************************************/
 
/* Header for both Workout and Smoke Stats graphs */
#bar-graph-header,
#smoke-graph-header {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 70%;
}

#bar-graph-header input,
#smoke-graph-header input {
  font-family: Angst Light;
  font-size: 90%;
}

#bar-graph-header select,
#smoke-graph-header select {
  font-family: Angst Light;
  font-size: 90%;
}

#bar-graph-header button,
#smoke-graph-header button {
  font-family: Angst Light;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.4);
  font-size: 90%;
  padding: 5px;
  background-color: rgba(112, 128, 144, 0.3);
}

#bar-graph-header button:hover,
#smoke-graph-header button:hover {
  background-color: rgba(245, 245, 245);
}

/* Graph container for both graphs */
#bar-graph-container,
#smoke-graph-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  gap: 10px;
  overflow-x: auto;
  background-color: rgb(219, 231, 240, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* Individual bar graph elements */
.bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer; /* Indicate clickable bars */
}

/* The bar itself */
.bar {
  background-color: rgb(71, 133, 184);
  width: 38px;
  position: relative;
  transition: height 0.3s;
}

/* Hover Effect: Change background color */
.bar:hover {
  background-color: rgb(43, 80, 110)
}

/* The count label above the bar */
.bar-label {
  font-family:Calibri;
  position: absolute;
  top: -20px;
  font-size: 0.6vw;
  color: #000;
  width: 100%;
  text-align: center;
}

/* The bucket label under the bar */
.bar-bucket-label {
  font-family:Calibri;
  margin-top: 5px;
  font-size: 50%;
  text-align: center;
}

/*********************************************************
 * WORKOUT TABLE
 *********************************************************/
 
#workout-table-container {
    margin-top: 20px;
    padding: 10px;
    background-color: rgb(219, 231, 240, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	height: 300px;
    overflow-y: auto; /* Enable vertical scrolling */

    /* Hide scrollbars for Chrome, Safari, and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.workout-table-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

#workout-table-container h3 {
	font-size:80%;
}

#workout-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
	font-size: 60%;
	margin-top:10px;
}

#workout-table th, #workout-table td {
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

#workout-table th {
    background-color: rgba(200, 200, 200, 0.6);
    font-weight: bold;
}

#workout-table tr {
    background-color: rgba(245, 245, 245);
}

#workout-table tr:hover {
    background-color: rgba(200, 200, 200, 0.6);
}

/* Responsive layout: stack calendar and overview on narrow screens */
@media (max-width: 1240px) {
  /* Stack vertically instead of side-by-side */
  #main-content {
    flex-direction: column;
  }

  /* Both sections full width */
  #calendar-container,
  #details-container {
    width: 100%;
  }

  /* Calendar: still full height below top bar */
  #calendar-container {
    height: calc(100vh - 50px); /* same offset as before */
  }

  /* Overview: below calendar, scrollable if it gets tall */
  #details-container {
    margin-top: 0;          /* remove extra gap under top bar */
    height: auto;           /* let content decide height */
    overflow-y: auto;       /* scroll inside if needed */
  }

  /* Allow the page itself to scroll on small screens */
  body {
    overflow: auto;
  }
}