/* ======================================== */
/*         Combined Style Sheet           */
/*   (Style Sheet 1 first, then Style Sheet 2)  */
/* ======================================== */

/* ---------------------------------------- */
/*           Style Sheet 1                */
/* ---------------------------------------- */

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Center the page title, remove default margin */
h1 {
  margin: 0;
  font-size: 1.8rem; /* slightly bigger */
  color: #007bff;    /* brand color */
}

/* Navbar Logo */
.navbar-brand img {
  height: 40px;
}

/* .title-box {
  width: 40vw;
  margin: 20px auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 10px;

  // Soft background color + subtle box shadow
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} */




        /* ----------------------------------------------------------
         * 3) Task Box
         *    - Matching style to Title Box
         * --------------------------------------------------------- */
       /*  .task-box {
          width: 40vw;
          margin: 15px auto;
          border: 1px solid #ccc;
          box-sizing: border-box;
          padding: 10px;
          background-color: #fff;
          box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        } */
        .race-task-header {
          margin: 0;
        }
        .race-task-header h2 {
          font-size: 1.6rem;
          margin-bottom: 3px;
          color: #007bff;
          text-transform: uppercase;  /* optional style */
          letter-spacing: 1px;        /* optional style */
        }
        .race-task-header span {
          display: inline-block;
          font-size: 2rem;
          color: #d9534f;
          font-weight: bold;
        }

        /* A single reusable card style for both the Title Box & Task Box */
.race-card {
  /*width: 40vw;               /* same as your other boxes, or tweak as needed */
  margin: 15px auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 10px;            /* a bit more padding for consistency */
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 4px;       /* optional rounding for a consistent look */
}

/* Tighten just the space below the Distance card under the map 
#distance-card {
  margin-bottom: 4px;   
}*/

/* A standard heading style inside .race-card */
.race-card h1,
.race-card h2 {
  margin: 0;
  color: #007bff;     /* brand color */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Example for an inner "subtitle" (like a timer or minor text) */
.race-card .subheading {
  font-size: 1.2rem;
  color: #d9534f;      /* matches your timer color */
  font-weight: bold;
  margin-top: 10px;    /* spacing from the heading */
  display: block;      /* ensure it’s on its own line if desired */
}



        /* ----------------------------------------------------------
         * 4) Map & Street View Container
         * --------------------------------------------------------- */
         .map-container {
          position: relative;
          /* width: 40vw; */
          height: 40vh;
          margin: 0 auto;
          border: 1px solid #ccc;
          box-sizing: border-box;
          background-color: #fff;
    
          /* subtle shadow to match the boxes */
          box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        }
        #map {
          width: 100%;
          height: 100%;
        }
        #street-view {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          /* no background so Street View is visible */
        }

/* Hero Section */
.hero-section {
  /* Keep the gradient background */
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  text-align: center;
  padding: 80px 20px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 30px auto;
}

/* Features Section */
.features-section {
  padding: 60px 20px;
}

.features-section h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.features-section .feature img {
  width: 260px;  /* Increase from 80px */
  height: auto;  /* Keeps aspect ratio */
  margin-bottom: 15px;
}

/* Add a simple hover effect for the feature boxes */
.feature {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.feature:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* CTA Section */
.cta-section {
  background-color: #f8f9fa;
  text-align: center;
  padding: 40px 20px;
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.cta-section p {
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.btn-success {
  font-size: 1.2rem;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
}

/* Footer */
.footer {
  background-color: #343a40;
  color: white;
  padding: 20px 0;
  text-align: center;
}
.footer p {
  margin: 5px 0;
}
.footer a {
  text-decoration: none;
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.footer a:hover {
  opacity: 1;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .hero-title {
      font-size: 2.2rem;
  }
  .hero-subtitle {
      font-size: 1rem;
      margin-bottom: 20px;
  }
  .features-section .feature {
      margin-bottom: 20px;
  }
}

/* ---------------------------------------- */
/*           Style Sheet 2                */
/* ---------------------------------------- */

/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Duplicate selector: body - using Style Sheet 1's version */
/*
body {
font-family: "Open Sans", Arial, sans-serif;
background-color: #f0f4f8;
color: #333;
}
*/

/* .hidden class for toggling visibility in JS */
.hidden {
display: none;
}

:root {
--primary-color: #007bff;
--primary-hover: #0056b3;
--accent-color: #ff5252;
--light-bg: #f0f4f8;
--text-color: #333;
}

/* Container for your content */
.card-container {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Basic button styles */
button {
padding: 10px 16px;
margin: 8px 4px;
border: none;
border-radius: 4px;
cursor: pointer;
background: var(--primary-color);
color: #fff;
font-size: 16px;
transition: 0.3s ease;
}
button:hover {
background: var(--primary-hover);
transform: scale(1.02);
}

/* Input styling */
input[type="text"] {
padding: 8px 12px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
margin-right: 8px;
width: 60%;
}
input[type="text"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Duel Container & Cards */
.duel-container {
display: flex;
justify-content: space-around;
margin: 20px 0;
}
.duel-card {
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
padding: 20px;
margin: 10px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.duel-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Spacing around sections */
#taskInput,
#duelSection,
#resultSection {
margin-bottom: 2rem;
}

/* Headings */
h1 {
font-size: 2.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 1rem;
}
h2 {
font-size: 1.75rem;
margin: 1rem 0;
color: var(--primary-color);
text-align: center;
}

/* PROGRESS BAR STYLES */
#progressBarOuter {
width: 100%;
height: 8px;
background-color: #e9ecef;
border-radius: 4px;
margin: 10px 0;
overflow: hidden;
}
#progressBarInner {
width: 0%;
height: 100%;
background-color: var(--primary-color);
border-radius: 4px 0 0 4px;
transition: width 0.3s ease;
}
#progressText {
text-align: center;
margin-bottom: 1rem;
}

/* FINAL ORDERED LIST (Result Section) */
#resultSection {
text-align: center;
margin-top: 2rem;
}

#resultSection h2 {
margin-bottom: 1rem;
color: var(--primary-color);
}

#finalList {
list-style-type: decimal; /* or decimal-leading-zero, lower-alpha, etc. */
padding-left: 1.5rem;     /* so numbers don’t overlap the left border */
margin: 0 auto;
max-width: 400px;
}

#finalList li {
background: #f9f9f9;
border-left: 4px solid var(--primary-color);
padding: 12px 16px;
margin: 8px 0;
border-radius: 4px;
transition: background 0.3s ease;
font-size: 1.1rem;
line-height: 1.4;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#finalList li:hover {
background: #eef2f7;
}

#taskName, 
#taskDuration {
width: 45%;
margin-right: 4px;
}

.race-container {
/* A card-like box in the middle */
max-width: 500px;
margin: 2rem auto;          /* center horizontally, plus space on top/bottom */
background: #fff;           /* white card background */
border-radius: 8px;         /* slight rounding */
box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* subtle shadow */
padding: 2rem;
text-align: center;         /* center text */
}

/* Make the heading for the race stand out */
.race-container h2 {
margin-bottom: 1.5rem;
font-size: 2rem;
color: #007bff;  /* or var(--primary-color) if you use CSS variables */
}

/* Style the first task display */
.race-task {
font-size: 2rem;
font-weight: bold;
letter-spacing: 1px;
color: #222;
}

/* Style the countdown timer */
.race-countdown {
font-size: 2rem;
font-weight: bold;
color: #d9534f; /* a red shade, or any accent color you like */
margin-bottom: 1rem;
}

/* OPTIONAL: If you want a little label next to "Time left" */
.race-countdown::before {
/* e.g., content: "Time Left: "; 
   comment this out if you prefer the JS text to stand alone */
content: "";
}

/* If you want to style the "Time is up!" message differently */
.race-countdown.time-up {
color: #dc3545;   /* a bright red */
font-weight: 700;
font-size: 2.2rem;
}

/* Style for the time selection buttons */
.task-time-btn {
background-color: #6c757d;
color: #fff;
border: none;
margin: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s ease;
}
.task-time-btn:hover {
background-color: #5a6268;
}
.task-time-btn.active {
background-color: #007bff !important; /* Highlighted color */
color: white !important;
border-color: #0056b3;
}

/* Center the Task Entry box */
#taskInput {
  max-width: 400px;
  margin: 2rem auto;  /* top/bottom 2rem, left/right auto */
  
  /* Optional styling for a nicer look */
  padding: 1.5rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  /* Center text inside */
  text-align: center;
}

/* Three Lines Container */
.three-lines-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;  /* increased a bit for clarity with 3 lines + shapes */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  z-index: 9999;
  background: transparent;
}

/* Basic line style for all lines */
.three-lines-container .line {
  width: 80%;          /* length of each line */
  height: 2px;         /* thickness */
  background: #333;    /* color of the line */
  border-radius: 1px;
  position: relative;  /* so we can place the shape with absolute positioning */
}

/* =========================
 1) TOP LINE: BLUE CIRCLE
 ========================= */
.line-with-circle .circle {
  position: absolute;
  left: 0px; /* Ensure the circle starts at 0px */
  top: 50%;
  transform: translateY(-50%);
  width: 30px;   /* Adjusted size */
  height: 30px;  /* Adjusted size */
  border-radius: 50%;
  background: blue;
  transition: left 0.5s ease; /* Smooth movement */
}

/* =========================
 2) MIDDLE LINE: RED SQUARE
 ========================= */
.line-with-square::before {
  content: "";
  position: absolute;
  left: -1.5rem;  
  top: 50%;
  transform: translateY(-50%);
  /* Square size & shape */
  width: 30px;
  height: 30px;
  background: red;      /* square color */
}

/* =========================
 3) BOTTOM LINE: GOLD STAR
 ========================= */
.line-with-star::before {
  content: "★";         /* star character */
  position: absolute;
  left: -1.5rem;   
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.0rem;    /* size of the star */
  color: gold;          /* star color */
}

/* Additional styles for lists and tasks */
.list-group-item {
  font-size: 1.1rem;
  transition: all 0.2s ease-in-out;
}

.list-group-item:hover {
  background-color: #f8f9fa;
}

#task-list .list-group-item {
  cursor: move;
}

#task-list .list-group-item.dragging {
  opacity: 0.6;
}

.delete-task {
  cursor: pointer;
  background: none;
  border: none;
  color: red;
  font-size: 1.2rem;
}

.time-button {
  padding: 10px 15px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #f8f9fa; /* Default light background */
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.time-button:hover {
  background-color: #e2e6ea; /* Slightly darker on hover */
}

.time-button.active {
  background-color: #007bff !important; /* Highlighted color */
  color: white !important;
  border-color: #0056b3;
}

.btn-xs {
padding: 1px 1px;
font-size: 10px;
line-height: 1;
border-radius: 1px;
min-width: 20px; /* Ensures button isn't too tiny */
}

/* Map container styling */
.map-container {
  position: relative;
  height: 40vh; /* Keep or adjust as needed */
  box-sizing: border-box;

  /* no border/shadow here */
  /* no width: 40vw; either */
}

#map {
  width: 100%;
  height: 100%;
}



/* === Dashboard Task List Styling === */
/* === Task List Styling (Shared Across Pages) === */
#todays-task-list .list-group-item,
#future-task-list .list-group-item,
#completed-task-list .list-group-item,
#race-task-list .list-group-item {    /* ✅ added */
  border: 2px solid #888;
  margin-bottom: 6px;
  border-radius: 6px;
  background-color: #fff;
}

#race-task-list {
  text-align: left !important;
}


          /* 1) Force left alignment inside the task list */
          #race-task-list,
        #race-task-list li {
          text-align: left !important;
        }
        
        /* 2) Remove default bullet points for .list-group */
        #race-task-list.list-group {
          list-style: none;    /* remove bullets */
          padding-left: 0;
          margin-left: 0;
        }

        #race-task-list .list-group-item {
          border: 2px solid #888;
          margin-bottom: 6px;
          border-radius: 6px;
          background-color: #fff;
        }

/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
        /* ----------------------------------------------------------
         * 5) Buttons
         * --------------------------------------------------------- */
         .button-container {
          margin: auto;
        }
        button {
          padding: 12px 18px;
          font-size: 16px;
          margin: 5px;
          cursor: pointer;
          border: none;
          background-color: #007BFF;
          color: white;
          border-radius: 4px;
          transition: background-color 0.2s ease, transform 0.2s ease;
        }
        button:hover {
          background-color: #0056b3;
          transform: translateY(-1px); /* slight lift effect */
        }
        /* If you’d like a disabled style: */
        button:disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }

/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */
/* CHECK THIS SECTION */



#body01 {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  text-align: center; 
  /* Soft gradient from top (light grey) to bottom (white) */
  background: linear-gradient(to bottom, #f2f2f2, #ffffff);
  min-height: 100vh; /* ensures gradient covers full page */
}


#middle {
  margin:auto;
}

/* =================================================================
   Project grid – make every card the same height
   =================================================================*/
/* let cards grow naturally, but keep them even with h-100 (Bootstrap) */
.project-card { 
  height: auto;                      /* remove fixed 230px */
  display: flex;
  flex-direction: column;
}

/* make the body a flex column so we can pin the bottom section */
.project-card-body {
  display: flex;                     /* NEW */
  flex-direction: column;            /* NEW */
  min-height: 220px;                 /* keep some presence, adjust to taste */
  overflow: hidden;
}

/* push the metrics/meta area to the bottom of the card body */
.project-meta { 
  margin-top: auto;                  /* NEW */
}

/* Clamp utilities (title = 2 lines, desc = 3 lines) */
.project-title-clamp,
.project-desc-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-title-clamp {
  line-clamp: 2;          /* standard-ish */
  -webkit-line-clamp: 2;  /* webkit */
  font-weight: 600;
}

.project-desc-clamp {
  line-clamp: 3;
  -webkit-line-clamp: 3;
  color: #6c757d;
}



/* optional: nicer little “chip” for subproject */
.subproject-chip {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: .75rem;
  border-radius: 999px;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  margin-right: .25rem;
}


/* Optional: give every card body a fixed min-height so
   short titles/descriptions don’t shrink the card */
.project-card-body {
  min-height: 170px;          /* adjust to taste */
}

/* css/styles.css */
.opacity-50 { opacity: .5; }


/* ribbon look */
.priority-badge{
  position:absolute;
  top:-8px;          /* adjust to taste */
  left:50%;
  transform:translateX(-50%);
  padding:6px 12px;
  font-weight:600;
  z-index:2;
}

/* give card some top-padding so the badge doesn’t overlap */
.project-card{
  padding-top:18px;
}


.clickable { cursor:pointer; }
/*Future tasks colours*/
.badge-task { background:#0d6efd; }   /* blue   – personal tasks   */
.badge-meet { background:#6f42c1; }   /* purple – meetings         */
.badge-proj { background:#20c997; }   /* teal   – project tasks    */


  /* simple draggable FAB */
  .fab{
    position:fixed;right:1rem;bottom:1rem;
    padding:.65rem 1rem;          /* ← room for text */
    border-radius:999px;          /* pill shape */
  }
  .fab.dragging{opacity:.6;cursor:grabbing}

    /* duration buttons inside the FAB modal */
  #fabModal .task-time-btn{
    flex: 1 0 calc(33.333% - 0.5rem);   /* three per row, minus the gap */
    text-align: center;
  }

/* Keep it simple */
.pay-btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background: #635bff;          /* Stripe purple */
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.pay-btn:hover {
  opacity: 0.9;
}

.hero-buttons .btn {
  padding: 12px 30px;
  font-size: 1.1rem;
}

/* Benefits Section */
.benefits-section {
  background-color: #fff;
  padding: 60px 20px;
}

.benefits-section i {
  font-size: 3rem;
  color: #007bff;
  margin-bottom: 15px;
}

.benefits-section h5 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* --- Landing-specific polish --------------------------------- */
.hero-section{
  background:linear-gradient(135deg,#6a11cb,#2575fc);
  color:#fff;
  padding:90px 15px;min-height:60vh;
}
.benefits-section i{color:#0d6efd}
.benefits-section p{max-width:280px;margin-inline:auto}
.features-section .feature img{margin-bottom:12px}
.features-section .feature{background:#fff;border-radius:8px;padding:25px;box-shadow:0 6px 12px rgba(0,0,0,.05)}
.features-section .feature:hover{box-shadow:0 8px 18px rgba(0,0,0,.08)}
.cta-section{background:#f8f9fa}

/* Add or replace in styles.css */
.feature img {
  max-width: 80px;      /* hard cap */
  width: 100%;          /* shrink with the column */
  height: auto;
}

/* Compact styling for D/W/M/Q/Y tick boxes */
#repeat-presets .form-check { margin-bottom: 0; }
#repeat-presets .wr-pill {
  padding: 2px 10px;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  user-select: none;
  cursor: pointer;
}
#repeat-presets .form-check-input:checked + .wr-pill {
  background: #f1f3f5;
  border-color: #adb5bd;
  font-weight: 600;
}

/* Bigger, easy-to-click icon button */
.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Keep the cursor as a pointer on the icon */
.btn-icon i {
  pointer-events: none;
}

/* Optional: prevent accidental card navigation when clicking menus or buttons */
.no-nav {
  /* purely a marker class used by JS; no styles needed */
}

.btn-icon:hover {
  box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15); /* like Bootstrap focus ring */
}


/* Normal embedded SV size (tweak height as you like) */
  #street-view {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
  }

  /* Fullscreen overlay toggled by JS */
  #street-view.sv-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    z-index: 2147483000; /* on top of the UI */
    background: #000;
  }

    /* Viewport-cover fallback for the Map when Fullscreen API is blocked */
  #map.map-fullscreen,
  .map-container.map-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    z-index: 2147483000; /* above navbar and UI */
    background: #000;
  }

  /* Hide page scrollbars while fullscreen */
  html.no-scroll, body.no-scroll {
    overflow: hidden !important;
  }

  /* Motivation card visuals (accessible, lightweight) */
.motivation-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #fff, #f7f9fc);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  margin: 0.75rem 0 1rem 0;
}

.motivation-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.motivation-text {
  font-weight: 600;
  margin: 0;
}

.motivation-hint {
  justify-self: end;
  font-size: 0.875rem;
  color: #6c757d;
  margin-right: 0.5rem;
}

.motivation-shuffle {
  grid-column: 1 / -1;    /* button full width under text on small screens */
  justify-self: start;
  margin-top: 0.25rem;
}

/* ----- Parking Lot (Out-of-scope) styling ----- */
.task-card--out {
  border-left: 4px dashed #adb5bd; /* visible but subtle cue */
  padding-left: 8px;
  opacity: 0.95;
}

.pill-later {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 12px;
  background: #f1f3f5; /* subtle grey */
  border: 1px solid #dee2e6;
  margin-left: 8px;
}

.reason-chip {
  display: inline-block;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 8px;
  background: #eef7ff;
  border: 1px solid #d0e7ff;
  margin-left: 8px;
}

/* Out-of-scope cards: subtle background and border */
.task-card--out { 
  background-color: #fffdf5; 
  border-left: 4px solid #f0ad4e;
}
.pill-later {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid #f0ad4e;
  font-size: 0.75rem;
}
.reason-chip {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: #f7f7f7;
  font-size: 0.75rem;
}

/* highlight the item we’ll do next */
.task-next {
  border-left: 4px solid var(--bs-primary, #0d6efd);
  background-color: rgba(13,110,253,0.05);
}

/* Highlights the very next task a bit more */
.task-item.priority-1 {
  border-left: 4px solid var(--bs-primary, #0d6efd);
  background: rgba(13,110,253,.05);
}

/* Keep children inside the rounded outer box */
.race-card { 
  border-radius: 12px;     /* (if you use it) */
  overflow: hidden;        /* clip gutters/ghosts to the rounded edges */
}

/* Inside the outer card, don’t let .row use negative side margins */
.race-card > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Let right column grow normally and allow children to be visible */
.col-md-6.col-lg-7 { min-height: 0; }

/* Never clip content in the main container */
.container-xxl { overflow: visible; }

/* Flex safety: allow columns to shrink instead of blowing out width */
.race-card > .row > [class*="col"] { min-width: 0; }

/* NEW: small glassy pills for header status */
.status-pill{
  padding: .25rem .6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: rgba(255,255,255,.65);            /* subtle glass look */
  backdrop-filter: saturate(150%) blur(6px);     /* modern feel (ignored if unsupported) */
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
#race-status-strip { min-height: 32px; }         /* keep header compact */


  #pretask-panel .btn.active {
  outline: 2px solid rgba(13,110,253,.35);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}


  /* NEW: allow the button groups to wrap nicely */
  #pretask-why.btn-group,
  #pretask-confidence.btn-group {
    flex-wrap: wrap;
  }
  #pretask-why .btn,
  #pretask-confidence .btn {
    margin-bottom: .25rem; /* spacing when wrapped */
  }

  /* When space is tight, give the WHY block the whole line */
  #pretask-panel .why-block {
    flex: 1 1 100%;
  }

.fab{
  position:fixed;       /* your floating behavior */
  right:24px; bottom:24px;
  border-radius:9999px; /* pill shape */
  display:inline-flex;  /* make sure it never goes full width */
  width:auto;           /* override any global .btn width rules */
  padding:0.6rem 0.9rem;
  z-index:1080;
}


  /* Floating Add Task button — force compact “pill” */
#fab-add-task{
  position: fixed !important;
  inset: auto 24px 24px auto !important; /* top right bottom left */
  left: auto !important;                 /* guard against left:0 from elsewhere */
  right: 24px !important;
  width: auto !important;                /* beat any width:100% rules */
  display: inline-flex !important;
  border-radius: 9999px;
  white-space: nowrap;
  z-index: 1080;
}

/* ===== Morning Plan panel (left vertical rail layout) ===== */
:root {
  /* Tweak this if the sticky panel sits too high/low vs your navbar */
  --wr-sticky-top: 32px;
}

#morning-panel .morning-panel-card {
  display: grid;
  grid-template-columns: 64px 1fr; /* slimmer rail → more room for notes */
  border-radius: 12px;
  margin-top: .25rem !important;    /* override any .mt-3 added by JS */
}

/* Fallback in case the JS mounts a plain .card instead of .morning-panel-card */
#morning-panel > .card { 
  margin-top: .25rem !important; 
}

/* Make the morning inputs feel roomier and use the full column */
#morning-panel .mp-body .form-control {
  width: 100%;
  min-height: 44px;
}

/* Bigger textareas for nicer writing experience */
#morning-panel .mp-body textarea.form-control {
  min-height: 120px;      /* tweak to taste (e.g., 140–160px) */
}

/* Tighten label spacing slightly to free horizontal room */
#morning-panel .mp-body .form-label {
  margin-bottom: .35rem;
}


#morning-panel .mp-rail {
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  background: #fff;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  min-height: 100%;
}

#morning-panel .mp-title {
  writing-mode: vertical-rl;     /* vertical text */
  transform: rotate(180deg);     /* make it read top->bottom */
  font-weight: 700;
  color: #495057;
  letter-spacing: 0.5px;
}

#morning-panel .btn-rail {
  writing-mode: vertical-rl;     /* vertical button label */
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 6px 8px;
}

#morning-panel .mp-body {
  padding: 12px 16px;
}

/* Mobile: fall back to a normal header/body layout */
@media (max-width: 991.98px) {
  #morning-panel .morning-panel-card {
    display: block;
  }
  #morning-panel .mp-rail {
    border-right: 0;
    border-bottom: 1px solid #e9ecef;
    flex-direction: row;
    gap: 8px;
  }
  #morning-panel .mp-title,
  #morning-panel .btn-rail {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* Distance card — compact, 2 columns, and override Bootstrap utilities */
#distance-card {
  min-height: 0;
  padding: 6px 10px !important;       /* beat .p-2 */
  margin-top: .25rem !important;       /* beat .mt-2 */
  margin-bottom: .25rem !important;    /* keep bottom tiny */
  display: grid !important;            /* guard against any display utility */
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
}

#distance-card h3 {
  grid-column: 1 / -1;
  font-size: 1rem;
  margin: 0 0 4px !important;          /* beat .mb-2 on the <h3> */
}

#distance-card > div {
  margin: 0;
  line-height: 1.2;
  font-size: .95rem;
}

/* Mobile: keep the same two columns (looks good) and tight padding */
@media (max-width: 576px) {
  #distance-card {
    grid-template-columns: 1fr 1fr;
    padding: 6px 8px;
  }
}

/* Lines immediately before … (context might be other layout rules) */

/* Map covers viewport in focus mode */
.map-fullscreen {
  position: fixed;      /* sits on top */
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  width: 100vw;
  height: 100vh;
  z-index: 9999;        /* make sure it’s above sidebars/lists */
}

/* Prevent background page from scrolling when map is full-screen */
.no-scroll {
  overflow: hidden !important;
}


/* ================================
   Fixed navbar support (race_map)
   --------------------------------
   We add top padding equal to the navbar height so content
   doesn’t slide under the fixed navbar.
   ================================ */

/* Default height for your current navbar (logo + pills with py-2) */
.wr-has-fixed-nav {
  --wr-fixed-nav-h: 72px;           /* tweak if your navbar is taller/shorter */
  --wr-sticky-top: calc(var(--wr-fixed-nav-h) + 16px); /* keeps sticky panels below navbar */
  padding-top: var(--wr-fixed-nav-h);
}

/* If your navbar gets taller on small screens, you can bump the value */
@media (max-width: 991.98px) {       /* Bootstrap lg breakpoint */
  .wr-has-fixed-nav {
    --wr-fixed-nav-h: 88px;          /* adjust if pills wrap to a second line on mobile */
  }
}

/* Ensure the navbar floats above other sticky elements but stays below modals */
.navbar.fixed-top {
  z-index: 1030;                     /* Bootstrap default for fixed navbars */
  border-bottom: 1px solid rgba(0,0,0,0.06); /* subtle divider */
}

/* Your morning panel already uses: style="top: var(--wr-sticky-top, 16px)"
   The variable above keeps it nicely tucked under the fixed navbar. */

   html {
  scroll-padding-top: var(--wr-fixed-nav-h);
}

/* --- Fixed navbar hardening ---------------------------------- */
/* 1) Make sure 'fixed-top' really fixes the navbar to the viewport */
.navbar.fixed-top {
  position: fixed !important;  /* force fixed, in case anything overrode it */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;               /* above content, below modals */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 2) Provide a global default for the header height.
      (Custom properties don’t inherit upward, so html couldn’t
      see the value we set only on <body>.) */
:root {
  --wr-fixed-nav-h: 72px;      /* tweak if your header is taller */
}

/* 3) Body padding so content doesn't slide under the fixed header */
.wr-has-fixed-nav {
  padding-top: var(--wr-fixed-nav-h);
  /* keep your sticky offset in sync with header height */
  --wr-sticky-top: calc(var(--wr-fixed-nav-h) + 16px);
}

/* 4) Optional: smooth anchor scrolling that clears the fixed header */
html {
  scroll-padding-top: var(--wr-fixed-nav-h);
}

/* ================================
   Projects page – equal-height cards + footer with traffic dot
   ================================ */

/* Make each column a flex wrapper and prevent content from stretching width */
#project-list-active > div,
#project-list-archived > div {
  display: flex;
  min-width: 0; /* prevents long content from widening the column */
}

/* Ensure the card itself fills the column and lays out vertically */
.project-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Let the body grow; the footer stays pinned to the bottom */
.project-card .card-body {
  flex: 1 1 auto;
}

/* Archived projects: make the difference obvious */
.project-card.archived {
  filter: grayscale(40%) brightness(0.95);
  background-color: var(--bs-light, #f8f9fa);
  border-color: var(--bs-secondary-border-subtle, #dee2e6);
}

/* New footer strip with badges on the left, traffic light on the right */
.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 56px;              /* tidy consistent height */
  background: #fff;
  border-top: 1px solid #e9ecef;
  padding: .5rem .75rem;
}

/* Badges container wraps nicely on small screens */
.project-footer .summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Single traffic light dot */
.traffic-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #dee2e6;
  flex: 0 0 18px;
}
.traffic-dot.green {  background: #28a745; box-shadow: 0 0 0 4px rgba(40,167,69,.12); }
.traffic-dot.amber {  background: #ffc107; box-shadow: 0 0 0 4px rgba(255,193,7,.12); }
.traffic-dot.red   {  background: #dc3545; box-shadow: 0 0 0 4px rgba(220,53,69,.12); }

/* (Lint fix) add the standard property for clamped text */
.project-title-clamp { line-clamp: 2; }
.project-desc-clamp  { line-clamp: 3; }


#project-list-active > div > .card,
#project-list-archived > div > .card { width: 100%; }

/* Keep each line of the Bootstrap row level */
#project-list-active,
#project-list-archived {
  align-items: stretch;            /* stretch columns to the tallest in the line */
}

/* Make each column a flex wrapper so its card can stretch */
#project-list-active > .col,
#project-list-archived > .col {
  display: flex;
}

/* Ensure the card fills its column and keeps footer pinned */
#project-list-active > .col > .project-card,
#project-list-archived > .col > .project-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#project-list-active > .col > .project-card .card-body,
#project-list-archived > .col > .project-card .card-body {
  flex: 1 1 auto;
}

/* Make the two-button group wrap nicely on small screens */
@media (max-width: 576px) {
  #meeting-fields .btn-group[role="group"] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  #meeting-fields .btn-group .btn {
    flex: 1 1 160px; /* allow each button to grow */
  }
}

/* Wrap the button groups nicely on narrow screens */
@media (max-width: 576px) {
  #meeting-fields .btn-group[role="group"] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  #meeting-fields .btn-group .btn {
    flex: 1 1 160px;
  }
}

.task-section-select { min-width: 12rem; }

.section-block { background: #fff; }
.section-drag-handle { cursor: grab; user-select: none; margin-right: .25rem; }
.section-task-list .drag-handle { cursor: grab; }
.section-task-list { border-left: 2px solid #eee; }

/* EOD Journal visual hint */
li.list-group-item.eod-task .fw-bold::after {
  content: '  ·  EOD';
  font-weight: 600;
  color: #0d6efd;
}

/* =========================================================
   Daily Report – "How You Spent Your Time" styles
   ========================================================= */
.value-bar {
  display: flex;
  height: 60px;                 /* ≈ 3 lines at default size */
  border-radius: 999px;         /* pill shape */
  overflow: hidden;
  background: #f3f4f6;          /* light gray track */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.value-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;      /* keep the text centered */
  white-space: normal;          /* allow wrapping to multiple lines */
  overflow: hidden;             /* anything beyond the box is clipped */
  text-overflow: ellipsis;      /* keep nice truncation where possible */
  line-height: 1.2;             /* slightly tighter lines for readability */
  text-align: center;           /* center multi-line text */
  padding: 0 6px;               /* small breathing room for text */
  font-size: 0.95rem;           /* optional: slightly smaller text to fit */
}

/* Optional: slightly lower height on narrow screens */
@media (max-width: 576px) {
  .value-bar { height: 54px; }
}

.value-segment:last-child {
  border-right: none;
}
.value-segment:focus {
  outline: 2px dashed rgba(0,0,0,.35);
  outline-offset: 2px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.375rem;
  vertical-align: -1px;
}

/* Legend colors must match the JS COLORS map */
.legend-project      { background: #2563eb; }  /* Project tasks */
.legend-recurring    { background: #059669; }  /* Recurring tasks */
.legend-adhoc        { background: #f59e0b; }  /* Ad hoc tasks */
.legend-userchaired  { background: #8b5cf6; }  /* User chaired meetings */
.legend-othermeeting { background: #ef4444; }  /* Other meetings */

/* Print-friendly (so the bar still looks clean on PDF/print) */
@media print {
  .value-bar {
    box-shadow: none;
  }
  .value-segment {
    border-right: 1px solid #ffffff;
  }
}

/* Spent Time anchor helper (optional spacing) */
#spent-time-anchor {
  margin-top: 0.5rem;  /* tune as you like */
}

/* -------------------------------------------
 * End-of-Day Journal visual tweaks
 * -------------------------------------------
 * 1) Today list card (we tag these rows with data-eod="1")
 * 2) Current Task card (right-hand panel) when EOD is loaded
 */

/* 1) EOD row in lists */
li.list-group-item[data-eod="1"] {
  background-color: #e8f5e9 !important; /* beat Bootstrap bg utilities */
}

/* Optional: keep a similar shade on hover */
li.list-group-item[data-eod="1"]:hover {
  background-color: #e3f2e6 !important;
}

/* 2) EOD as Current Task (right-hand panel) */
.race-card.eod-current {
  background-color: #e8f5e9 !important;
}