@media (max-width: 768px) {
    #scroll-wrapper { width: 100%; overflow-x: hidden; }
}
/* Typography scale */
:root {
    --font-size-base: 1rem;      /* ~16px */
    --font-size-sm: 0.875rem;    /* ~14px */
    --font-size-lg: 1.125rem;    /* ~18px - use sparingly */
    /* Subtle light accent for borders/lines over dark background */
    --tracklogg-accent-light: rgba(255, 255, 255, 0.75);
    /* Darker Bootstrap primary color overrides */
    --bs-primary: #15506A;
    --bs-primary-rgb: 21, 80, 106;
    --bs-link-color: #15506A;
    --bs-link-hover-color: #0F3E53;
    --bs-focus-ring-color: rgba(21, 80, 106, 0.25);
    /* Tie GPP to current primary */
    --phase-gpp: var(--bs-primary);
}

/* Ensure document expands to full height for background coverage */
html, body { min-height: 100%; }
.text-base { font-size: var(--font-size-base) !important; }
.text-sm   { font-size: var(--font-size-sm) !important; }
.text-lg   { font-size: var(--font-size-lg) !important; }
.no-table-borders th,
.no-table-borders td {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}
/* Static CSS file: static/css/custom.css */

/* Highlight for today's date (above content, below badges) */
.highlight-today { position: relative; border-radius: var(--bs-border-radius) !important; padding: 0 !important; }
.highlight-today::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--bs-warning);
    border-radius: inherit; /* match date card curvature */
    pointer-events: none; /* don’t block clicks */
    z-index: 0; /* above card content, below badges */
}
/* Keep default table borders off without suppressing the overlay */
.no-table-borders td.highlight-today { border: none !important; }

/* Non-intrusive highlight when editing a session */
.active-session { position: relative; }
.active-session::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--bs-warning); /* match today highlight color */
    border-radius: inherit;              /* match session card corner radius */
    pointer-events: none;
    z-index: 0;                          /* below badges/photo/kebab */
}

/* Highlight for copy mode */
.copy-mode-highlight {
    border: 2px solid var(--bs-success) !important;  /* Use Bootstrap success color for border */
    border-radius: 8px !important;
    padding: 5px !important;
    background-color: rgba(40, 167, 69, 0.2) !important;  /* Light green background */
    color: white !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5) !important;  /* Green shadow for effect */
    cursor: pointer !important;  /* Indicates clickable element */
    transition: all 0.3s ease-in-out;  /* Smooth transition effect */
}

/* Hover effect for copy mode */
.copy-mode-highlight:hover {
    background-color: rgba(40, 167, 69, 0.4) !important;  /* Darker green on hover */
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.8) !important;  /* Stronger shadow on hover */
    transform: scale(1.05);  /* Slight enlargement on hover */
}

/* Highlight for move mode */
.move-mode-highlight {
    border: 2px solid var(--bs-warning) !important;  /* Use Bootstrap warning color for move mode */
    border-radius: 8px !important;
    padding: 5px !important;
    background-color: rgba(255, 193, 7, 0.2) !important;  /* Light yellow background */
    color: white !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5) !important;  /* Yellow shadow for effect */
    cursor: pointer !important;
    transition: all 0.3s ease-in-out;
}

/* Hover effect for move mode */
.move-mode-highlight:hover {
    background-color: rgba(255, 193, 7, 0.4) !important;  /* Darker yellow on hover */
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.8) !important;  /* Stronger shadow on hover */
    transform: scale(1.05);
}

/* Horizontal separator */
.styled-separator {
    border: 1px solid var(--tracklogg-accent-light);  /* Light gray separator */
    margin: 20px 0;  /* Vertical space around the separator */
}

/* Tag click boxes (checkbox styling) */
.d-flex.flex-wrap .form-check {
    margin: 10px 10px 10px -20px !important;  /* Standardized margins for consistency */
}

/* Compact table layout for minimizing space */
table {
    border-collapse: collapse !important;  /* Combine table borders */
    border-spacing: 0 !important;  /* Remove spacing between cells */
}
/* Calendar table uses fixed layout to keep columns equal */
.calendar-table { table-layout: fixed; width: 100% !important; }

table td, table th {
    padding: 2px 3px !important;  /* Minimal padding for compact layout */
    vertical-align: top;  /* Align text at the top */
}

/* Compact input fields inside tables */
table input[type="text"],
table input[type="number"],
table textarea {
    width: 100% !important;       /* Ensure all table inputs take full width */
    padding: 4px !important;      /* Compact padding for inputs in tables */
    box-sizing: border-box;       /* Ensure padding and borders are included in the width */
}

/* Checkbox column (for consistent size) */
table th input[type="checkbox"], table td input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
}

/* Styling for add (+) and delete (x) buttons */
.add-row, .delete-row, .btn-delete-athlete, .btn-delete-event, .btn-delete-session {
    padding: 2px 4px !important;  /* Minimal padding for small buttons */
    font-size: 0.75rem !important;  /* Smaller font size for compact icon buttons */
    width: 24px !important;  /* Fixed width */
    height: 24px !important;  /* Fixed height */
    line-height: 1 !important;  /* Fit text within button */
    margin: 0 !important;  /* No margins */
}

/* Exercise tables: no fixed column widths to keep layout fluid on all screens */

/* Style for the badges */
.badge-symbol {
  background-color: transparent !important; /* Remove background */
  border: none !important; /* Remove border */
  color: green; /* Ensure the symbol color is visible */
  font-size: 1.2rem; /* Adjust size as needed */
  padding: 0; /* Remove padding */
  margin-left: 5px; /* Space between badges */
}

/* Calendar compact: unify session text size with date text */
.edit-session,
.calendar-session,
.calendar-session-btn,
.calendar-session-name {
    font-size: 0.95rem !important; /* Match weekly notes size on desktop */
    line-height: 1.1;
}

/* Allow wrapping to save horizontal space in session cards */
.edit-session,
.calendar-session,
.calendar-session-btn {
    white-space: normal !important;      /* Override Bootstrap .btn nowrap */
    overflow-wrap: anywhere;             /* Break long words/URLs gracefully */
    word-break: break-word;              /* Extra safety for legacy browsers */
    height: auto !important;             /* Let height grow with wrapped lines */
}
.calendar-session-name {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Remove blue border around session cards only */
.edit-session.btn,
a.edit-session.btn,
.edit-session {
    border: 0 !important;
    box-shadow: none !important;
}

/* Adjust the position of the badges */
.session-tags {
  position: absolute;
  top: -5px;  /* Adjust for top alignment */
  right: -5px; /* Adjust for right alignment */
  z-index: 1;  /* Ensure it's above the session button */
}

/* Photo badge styles */
.photo-badge {
    padding: 0.1rem 0.35rem !important;
    line-height: 1 !important;
    font-size: 0.85em; /* slightly smaller */
}
.photo-badge .photo-count { margin-left: 4px; }
.kebab-badge {
    padding: 0.1rem 0.35rem !important;
    line-height: 1 !important;
    font-size: 0.85em; /* match photo badge */
}
.kebab-badge.dropdown-toggle::after { display: none !important; } /* hide caret to keep badge compact */
.kebab-bottom-right { bottom: -6px; right: -6px; z-index: 2; }
.kebab-bottom-right .dropdown-menu { z-index: 1050; } /* above badges/buttons */

/* Thumbnails */
.photo-thumb-wrap { width: 150px; height: 150px; overflow: hidden; }
.photo-thumb { width: 100%; height: 100%; object-fit: cover; }

/* =============================== */
/* Background theme color tuning   */
/* =============================== */
/* Make most text white against the blue background */
body.has-bg { color: #ffffff; }
body.has-bg a { color: #ffffff; }
body.has-bg a:hover, body.has-bg a:focus { color: #f1f1f1; }
/* Force informational accent to white (used by calendar nav and labels) */
.text-info { color: #ffffff !important; }
/* Outline primary buttons (calendar nav) use white to stand out over bg */
.btn-outline-primary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
}

/* Remove dark backgrounds from tables for transparency over the background image */
.table, .calendar-table, .table-responsive, .table-striped, .table-hover {
    background-color: transparent !important;
}
/* Bootstrap 5 table variable overrides for transparency */
.table {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06) !important; /* subtle hover */
    border-color: var(--tracklogg-accent-light) !important; /* unify borders with calendar separators */
}
.table > :not(caption) > * > * { background-color: transparent !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.06) !important; }
/* Calendar-specific safeguard */
.calendar-table td, .calendar-table th { background-color: transparent !important; }

/* Exercise table row separators: use the same accent color and subtle thickness */
/* Keep the exercise table borders consistent without enforcing layout */
#exercise-table {
    border-collapse: collapse !important;
}
/* Advanced table inputs: transparent background over page image */
#exercise-table input[type="text"],
#exercise-table input[type="number"],
#exercise-table input[type="date"],
#exercise-table input[type="time"],
#exercise-table input[type="email"],
#exercise-table input[type="url"],
#exercise-table input[type="search"],
#exercise-table select,
#exercise-table textarea {
    background-color: transparent !important;
    color: #ffffff !important; /* ensure readability */
    border: 1px solid var(--tracklogg-accent-light) !important; /* thin white line */
    border-radius: var(--bs-border-radius) !important; /* slightly rounded */
    box-shadow: none !important; /* remove carved/inset look */
}
#exercise-table input[type="text"]::placeholder,
#exercise-table input[type="number"]::placeholder,
#exercise-table input[type="date"]::placeholder,
#exercise-table input[type="time"]::placeholder,
#exercise-table input[type="email"]::placeholder,
#exercise-table input[type="url"]::placeholder,
#exercise-table input[type="search"]::placeholder,
#exercise-table textarea::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1 !important; /* Safari */
}
/* Keep focus clean without heavy glow */
#exercise-table input[type="text"]:focus,
#exercise-table input[type="number"]:focus,
#exercise-table input[type="date"]:focus,
#exercise-table input[type="time"]:focus,
#exercise-table input[type="email"]:focus,
#exercise-table input[type="url"]:focus,
#exercise-table input[type="search"]:focus,
#exercise-table select:focus,
#exercise-table textarea:focus {
    background-color: transparent !important;
    border-color: #ffffff !important; /* brighten slightly on focus */
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure checkboxes keep their native/bootswatch appearance */
#exercise-table input[type="checkbox"] {
    appearance: auto; /* reset any inherited appearance */
    -webkit-appearance: checkbox;
    background: initial !important;
    border: initial !important;
    box-shadow: initial !important;
}
/* Ensure header text aligns with left-aligned cell content */
#exercise-table th { text-align: left !important; }
#exercise-table th[data-full]::before { text-align: left !important; }
#exercise-table tbody tr {
    border-bottom: 1px solid var(--tracklogg-accent-light) !important;
}
#exercise-table tbody tr:last-child {
    border-bottom: none !important;
}

/* Position helpers */
.photo-badge-pos { bottom: -6px; left: -6px; z-index: 2; }
.photo-badge-pos-10 { bottom: -10px; left: -6px; z-index: 2; }
.session-tags-advanced { right: 30px !important; }
.tags-top-10 { top: -10px !important; }
.tags-top-5 { top: -5px !important; }
.tags-right-5 { right: -5px !important; }
.tags-right-30 { right: 30px !important; }

/* Smaller dropdown menu items for kebab menus */
.dropdown-menu.small .dropdown-item {
    font-size: var(--font-size-sm) !important; /* 0.875rem */
    padding: 0.25rem 0.5rem !important;       /* tighter spacing */
}

/* Inline-style replacements / utilities */
.nowrap { white-space: nowrap !important; }
.lh-tight { line-height: 1.1 !important; }
.col-20 { width: 20%; }
.week-sep { border-top: 5px solid #fff !important; }
.week-sep { border-top-color: rgba(255, 255, 255, 0.75) !important; }
/* Ensure week separator is not translucent (override Bootstrap hr opacity) */
.week-sep { opacity: 1 !important; }
.week-header { gap: 1em; font-weight: normal; padding-left: 0; margin-left: 0; }
.week-number { white-space: nowrap; padding-left: 0.25em; margin-left: 0.25em; }
.restday-minh { height: auto !important; min-height: 58px; }

/* Carousel caption readability */
.carousel-caption.d-block {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

/* Improve visibility of file input text/button across themes */
input[type="file"].form-control {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
}
/* Button part (Chrome/Edge/Firefox) */
input[type="file"].form-control::file-selector-button {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
}
/* Button part (Safari/WebKit) */
input[type="file"].form-control::-webkit-file-upload-button {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
}
/* Make placeholder text readable */
.form-control::placeholder {
    color: var(--bs-secondary-color, #6c757d) !important;
    opacity: 1; /* Safari */
}
/* Ensure consistent placeholder color in dark/light modes */
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--bs-secondary-color, #6c757d) !important;
}
/* Modal-specific: enforce readable caption placeholder */
#manageSessionPhotosModal #photoCaptionInput {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}
#manageSessionPhotosModal #photoCaptionInput::placeholder {
    color: var(--bs-secondary-color, #6c757d) !important;
    opacity: 1 !important;
}
/* Handle disabled/readonly states retaining readable colors */
input[type="file"].form-control:disabled,
input[type="file"].form-control[readonly] {
    color: var(--bs-secondary-color, #6c757d) !important;
    background-color: var(--bs-secondary-bg) !important;
}

/* Session photo gallery */
.session-photo-gallery {
    border-top: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.25));
    padding-top: 1.5rem;
}

.session-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.session-photo-card {
    margin: 0;
    border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.2));
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--bs-body-bg, #0c0c0c);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.session-photo-link {
    display: block;
}

.session-photo-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.session-photo-meta {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.session-photo-caption {
    font-weight: 600;
}

.session-photo-timestamp {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #adb5bd);
}

/* Colors for phases */
.phase-gpp {
    background-color: var(--bs-primary); /* Blue, same as primary color */
    color: white;
}

.phase-spp {
    background-color: #94358f;  /* Purple */
    color: white;
}

.phase-pcp {
    background-color: var(--bs-warning);  /* Orange, same as warning color */
    color: white;
}

.phase-cp {
    background-color: #e53338;  /* Red, same as TTW red */
    color: white;
}

.phase-tp {
    background-color: #D3D3D3;  /* Light grey for Transition Phase */
    color: black;
}

.phase-other {
    background-color: #A9A9A9;  /* Dark grey for Other */
    color: white;
}

/* Light mode removed: site uses a single dark theme that matches the background */

/* Adjust table column widths */
.athlete-col {
    width: 25%; /* Allocate more space for the athlete column */
}

.result-col {
    width: auto; /* Automatically adjust result columns */
}

/* Form styling */
.form-control {
    padding: 0.375rem 0.75rem; /* Bootstrap default padding */
    font-size: var(--font-size-base); /* Consistent font size */
    height: 2.2rem;
    line-height: 1.2rem;
}

/* Textareas: honor the rows attribute and allow growth on all screens */
textarea.form-control {
    height: auto !important;   /* Don’t force input-height on textareas */
    resize: vertical;          /* Allow manual vertical resize */
}

/* Weekly notes textarea: transparent background over page image */
.week-notes {
    background-color: transparent !important;
}
.week-notes::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}
/* Extra specificity to beat Bootswatch form-control background */
textarea.form-control.week-notes,
.week-notes-wrapper .form-control.week-notes {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
}
/* Make the weekly notes card container transparent as well */
.week-notes-card {
    background-color: transparent !important;
}
/* Status row under the notes: keep transparent and readable */
.week-notes-status-row {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Full-page background image (activated when body.has-bg is present) */
body.has-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2; /* behind everything */
    background: url('../img/bg-track.jpg') center center / cover no-repeat; /* avoid attachment: fixed for iOS */
    filter: none; /* keep it crisp; overlay controls darkness */
    /* iOS Safari/Chrome stability hints */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}
/* Subtle dark overlay to preserve readability on both themes */
body.has-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1; /* above image, below content */
    background: rgba(0, 0, 0, 0.35);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, background-color;
}
/* Light theme needs a bit more overlay for contrast */
/* Light mode overlay removed */
/* Make main containers slightly translucent to blend with bg without losing contrast */
.container {
    background: rgba(0, 0, 0, 0.0);
}
/* Cards and modals get a subtle backdrop to ensure legibility */
.card, .modal-content, .dropdown-menu {
    backdrop-filter: blur(2px);
    background-color: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
}

/* Responsive mobile adjustments */
@media (max-width: 768px) {
    /* Adjustments for the calendar layout on mobile */
    .calendar-cell {
        padding: 5px !important;
        margin: 0 !important;
    }
    .calendar-date,
    .calendar-date.text-info,
    .calendar-date .text-info {
        font-size: 0.75rem !important; /* Match weekly notes size on mobile */
    }
    .calendar-session-name {
        font-size: 0.75rem !important; /* Match weekly notes size on mobile */
    }
    .calendar-date, .calendar-date .text-info, .session-card, .calendar-session, .calendar-session-btn, .session-card .text-info, .calendar-session .text-info, .calendar-session-btn .text-info {
        font-size: 0.75rem !important; /* Match weekly notes size on mobile */
    }
    /* Match session card font size to date cards on mobile */
    .session-card, .calendar-session, .calendar-session-btn {
        font-size: 0.75rem !important; /* Match weekly notes size on mobile */
    }
    /* Ensure small text inside calendar date uses same size */
    .calendar-date .text-sm { font-size: 0.75rem !important; }
    /* Match session card font size to date cards */
    .session-card, .calendar-session, .calendar-session-btn {
        font-size: 0.75rem !important;
    }
    /* Match weekly notes to date/session titles on mobile */
    .week-notes {
        font-size: 0.8em !important;
    }
    .kebab-menu {
        display: none;  /* Hide kebab menu on mobile */
    }
    .session-tags {
        top: -2px; /* Adjust the top alignment for mobile */
        right: -2px; /* Adjust the right alignment for mobile */
    }
    .badge-symbol {
        font-size: 1rem; /* Slightly smaller font size for mobile */
        margin-left: 3px; /* Adjust space between badges for mobile */
    }

    /* Compact table adjustments for mobile */
    table {
    font-size: var(--font-size-sm) !important;  /* Smaller font size for table on mobile */
    }
    table th, table td {
        padding: 2px 4px !important;  /* Compact padding on mobile */
    }
    table input[type="text"],
    table input[type="number"],
    table textarea {
    font-size: var(--font-size-sm) !important;  /* Smaller font size for table inputs on mobile */
        padding: 3px !important;     /* Slightly reduced padding for mobile */
    }

    /* Match week header and stats font size to table font size on mobile */
    .week-header span,
    .week-header .text-info {
    font-size: var(--font-size-sm) !important;
    }

    /* Apply smaller font size to form inputs (outside the table) on mobile */
    .form-control {
        padding: 0.25rem 0.5rem;
    font-size: var(--font-size-sm); /* Slightly smaller font size for mobile */
        height: 2rem;
        line-height: 1rem;
    }

    /* Ensure textarea fields follow the same styling */
    textarea.form-control {
        font-size: var(--font-size-sm) !important;   /* Ensure textarea matches input field sizes on mobile */
        height: auto !important;      /* Let height adjust based on content */
        resize: vertical;             /* Allow vertical resizing */
    }
    /* Weekly notes: override generic textarea size to match date/session titles */
    textarea.form-control.week-notes {
        font-size: 0.75rem !important; /* Slightly smaller to visually match button rendering */
        line-height: 1.1 !important;
    }
    
    /* Smaller label font size for mobile */
    .form-label {
    font-size: var(--font-size-sm) !important;   /* Reduce label font size for mobile */
    }

    /* Ensure form group spacing is consistent on mobile */
    .form-group, .mb-3 {
        margin-bottom: 0.75rem !important;  /* Compact margin for form fields on mobile */
    }

    /* Smaller checkboxes and labels (tags) on mobile */
    .form-check {
        margin-bottom: 5px !important;  /* Reduce the spacing between checkboxes */
    }
    .form-check-label {
    font-size: var(--font-size-sm) !important;     /* Reduce the font size of the label (tag name) */
    }

    /* Make Manage Photos inline button match tag font size */
    #managePhotosBtn {
        font-size: var(--font-size-sm) !important;
    }

    /* Align small Upload button with input height */
    #uploadPhotoBtn.btn-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; }

    /* Optional: Adjust checkbox size itself if needed */
    .form-check input[type="checkbox"] {
        transform: scale(0.8);          /* Scale down the size of the checkbox itself */
        margin-right: 5px !important;   /* Adjust space between checkbox and label */
    }

}

/* Mobile: reduce accidental zoom/side-scroll */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom on focus (requires >=16px) */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Neutralize Bootstrap table-responsive scroll for the calendar wrapper */
  #scroll-wrapper.table-responsive {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Clamp overlay badge offsets to avoid tiny overflows */
  .session-tags { right: 0 !important; top: 0 !important; }

  /* Safety: suppress any residual horizontal overflow */
  html, body { overflow-x: hidden !important; }
}

/* Default: Show full names on larger screens */
th[data-full]::before {
    content: attr(data-full);   /* Display full day name */
}

/* Hide the original short name by setting visibility to hidden */
th[data-full] {
    visibility: hidden;         /* Hide the original short name */
    position: relative;         /* Needed to position the pseudo-element */
}

/* Make the full name visible using the ::before pseudo-element */
th[data-full]::before {
    visibility: visible;        /* Ensure the pseudo-element is visible */
    position: absolute;         /* Position it on top of the original content */
    top: 0;
    left: 0;
    right: 0;
    text-align: center;         /* Center the text */
    display: block;             /* Ensure it behaves like block-level element */
}

/* On mobile: Show short names */
@media (max-width: 768px) {
    th[data-full]::before {
        content: unset;         /* Remove the full name on mobile */
    }

    th[data-full] {
        visibility: visible;    /* Show the original short name */
    }

    /* iOS mobile: hide fixed layers and use body background with overlay */
    body.has-bg::before,
    body.has-bg::after { display: none !important; }
    body.has-bg {
        background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('../img/bg-track.jpg');
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover;
        background-attachment: scroll, scroll;
    }
}

/* Custom Small Toast */
.toast-small {
    max-width: 250px; /* Sets the maximum width of the toast */
    /* Optional: Adjust height if needed */
    /* height: 60px; */
}

/* Optional: Adjust padding for smaller toast */
.toast-small .toast-body {
    padding: 0.5rem; /* Reduces padding inside the toast body */
    font-size: var(--font-size-sm); /* Slightly smaller font size */
}

/* Optional: Adjust the close button size */
.toast-small .btn-close {
    padding: 0.2rem;
    margin-left: 0.5rem;
}

/* Commented out section for background color (used for debugging, can be removed if no longer needed) */
/*
body {
    background-color: red;
}

/* Weekly notes status indicator */
.week-notes-status {
    min-height: 1em;
    opacity: 0.8;
}
.week-notes-status.fade-out { transition: opacity 0.5s ease; opacity: 0.0; }
.week-notes-status.status-saving { color: var(--bs-warning); }
.week-notes-status.status-saved { color: var(--bs-success); }
.week-notes-status.status-error { color: var(--bs-danger); }

/* Ensure weekly notes textarea fills space nicely */
.week-notes {
    line-height: 1.1; /* Match session/date cards */
    resize: none;
    padding: 8px;
    color: var(--bs-light, #f8f9fa);
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0.95rem !important; /* Slightly smaller to match buttons visually */
    margin: 0 !important; /* Eliminate any default gaps */
}

/* Layout helpers for weekly notes container */
.week-notes-outer { position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; }
.week-notes-card { height: 100%; }

/* Weekly notes container colors: ensure full transparency */
.week-notes-card { background-color: transparent !important; }
.week-notes { background-color: transparent !important; }
.week-notes:focus {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;      /* remove focus ring */
    outline: 0 !important;            /* remove outline */
}
.week-notes-status-row { background-color: transparent !important; }

/* Weekly notes outer frame: match date card (calendar-date outline) border */
.week-notes-card {
    border-color: rgba(255, 255, 255, 0.75) !important; /* same as .btn-outline-primary */
    border-width: 1px !important;                      /* same thickness */
    border-style: solid !important;
}

/* =============================== */
/* Plotly modebar restyle/position */
/* =============================== */
.js-plotly-plot { position: relative !important; }
.js-plotly-plot .plotly { position: relative !important; }
.js-plotly-plot > .modebar-container,
.js-plotly-plot .plotly > .modebar-container,
.js-plotly-plot .modebar-container {
    position: absolute !important;
    inset: auto auto 8px 8px !important; /* top right bottom left */
    top: auto !important;
    bottom: 8px !important;
    right: auto !important;
    left: 8px !important;
    width: auto !important;            /* shrink to fit toolbar */
    text-align: left !important;       /* avoid right alignment */
}
.js-plotly-plot .plotly .modebar {
    position: absolute !important;
    background: rgba(0, 0, 0, 0.2) !important; /* subtle glass */
    border-radius: 6px !important;
    backdrop-filter: blur(2px);
    bottom: 8px !important;
    left: 8px !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

/* ID-scoped safety: ensure containers are positioned for bottom-left anchoring */
#plot-container,
#plot_session_completeness,
#plot_exercise_completeness,
#plot_distance,
#plot_duration,
#plot_weight { position: relative !important; }

#plot-container .modebar-container,
#plot_session_completeness .modebar-container,
#plot_exercise_completeness .modebar-container,
#plot_distance .modebar-container,
#plot_duration .modebar-container,
#plot_weight .modebar-container {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: 8px !important;
}
.js-plotly-plot .plotly .modebar .modebar-btn {
    color: #fff !important;
    opacity: 0.8;
}
.js-plotly-plot .plotly .modebar:hover .modebar-btn,
.js-plotly-plot .plotly .modebar .modebar-btn:hover {
    opacity: 1;
}

/* Phase button overrides: ensure phase color wins over .btn-primary */
:root {
  /* Phase brand colors from README */
  --phase-gpp: var(--bs-primary);
  --phase-spp: #893b8b;
  --phase-pcp: #e7a03c;
  --phase-cp:  #e53338;
  --phase-tp:  #54b98f;
}

/* GPP */
.btn.phase-gpp, a.btn.phase-gpp, .btn.btn-primary.phase-gpp {
  background-color: var(--phase-gpp) !important;
  border-color: var(--phase-gpp) !important;
  color: #fff !important;
}
.btn.phase-gpp:hover, .btn.phase-gpp:focus { filter: brightness(0.95); }

/* SPP */
.btn.phase-spp, a.btn.phase-spp, .btn.btn-primary.phase-spp {
  background-color: var(--phase-spp) !important;
  border-color: var(--phase-spp) !important;
  color: #fff !important;
}
.btn.phase-spp:hover, .btn.phase-spp:focus { filter: brightness(0.95); }

/* PCP */
.btn.phase-pcp, a.btn.phase-pcp, .btn.btn-primary.phase-pcp {
  background-color: var(--phase-pcp) !important;
  border-color: var(--phase-pcp) !important;
  color: #000 !important;
}
.btn.phase-pcp:hover, .btn.phase-pcp:focus { filter: brightness(0.95); }

/* CP */
.btn.phase-cp, a.btn.phase-cp, .btn.btn-primary.phase-cp {
  background-color: var(--phase-cp) !important;
  border-color: var(--phase-cp) !important;
  color: #fff !important;
}
.btn.phase-cp:hover, .btn.phase-cp:focus { filter: brightness(0.95); }

/* TP */
.btn.phase-tp, a.btn.phase-tp, .btn.btn-primary.phase-tp {
  background-color: var(--phase-tp) !important;
  border-color: var(--phase-tp) !important;
  color: #000 !important;
}
.btn.phase-tp:hover, .btn.phase-tp:focus { filter: brightness(0.95); }