#my-melo-page{

    width: 100%;
    margin-right: 10px;
    display: inline;
}

.melo-journal-table-wrap {
    font-size: .75em;
    font-family: Verdana;
}

.melo-journal-table-wrap h3{
    font-family: "Helvetica Neue", Helvetica;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0 0 20px 0;
}


/* Responsive Filter Layout */
.melo-journal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: end; /* Align bottoms */
    margin-bottom: 20px;
    justify-content: flex-start;
}

.filter-item {
  
    display: flex;
    flex-direction: column;
}

.filter-item label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #444;
    font-size: 0.9em;
}

.filter-item input[type="text"],
.filter-item select {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-self: end;
}

/* Tablet/Desktop: Side-by-side */
@media (min-width: 768px) {
    .melo-journal-filters {
        flex-wrap: nowrap;
    }
}

/* Mobile: Stack */
@media (max-width: 767px) {
    .melo-journal-filters {
        flex-direction: column;
    }
    
    .filter-item,
    .filter-actions {
        width: 100%;
    }
}

/* Mood Column in Table */
.melo-journal-table th.mood-column,
.melo-journal-table td.mood-column {
    text-align: center;
    width: 120px; /* Fixed width for consistency */
}

.melo-journal-table .journal-mood {
    font-size: 1.1em;
    display: inline-block;
}

.no-mood {
    color: #999;
}

/* Focus/Hover Effects */
.filter-item input:focus,
.filter-item select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.2);
}



/* Format Search bar */

.melo-journal-table-wrap form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}
.melo-journal-table-wrap input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 300px;
}

/* Consistent form controls styling */
.melo-journal-table-wrap input[type="text"],
.melo-journal-table-wrap select {
    padding: 8px 12px;
    height: 36px;              /* Explicit height for consistency */
    line-height: 1.4;          /* Matches typical input height */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    vertical-align: middle;
}

.melo-journal-table-wrap .button,
.melo-journal-table-wrap .button-primary {
    height: 36px;              /* Match input height */
    padding: 0 10px;           /* Horizontal padding only */
    line-height: 34px;         /* Centers text vertically */
    font-size: 1em;
    border-radius: 4px;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
}

/* Optional: Hover effect for better UX */
.melo-journal-table-wrap .button:hover {
    background-color: #f0f0f0;
}

.melo-journal-table-wrap .button-primary {
    background-color: #0073aa;
    color: white;
}

.melo-journal-table-wrap .button-primary:hover {
    background-color: #005177;
}

/* Flex containers for alignment */
.melo-journal-table-wrap form,
.melo-journal-table-wrap .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;       /* Vertically centers everything */
}

/* pagination styles */
.melo-pagination {
    text-align: center;
    margin: 20px 0;
}

.melo-pagination .button {
    height: 36px;
    padding: 0 16px;
    line-height: 34px;
    font-size: 14px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px; /* Makes it feel like a real button */
}

.melo-pagination .button:hover {
    background-color: #f0f0f0;
}

.melo-pagination .button-primary {
    background-color: #0073aa;
    color: white;
}

.melo-pagination .button-primary:hover {
    background-color: #005177;
}


/* Format the Calendar Widget */

.bp-post-calendar {
  width: 100%; /* Full container width */
  border-collapse: collapse;
  table-layout: fixed; /* Force even column distribution */
}

.bp-post-calendar-wrapper {
  width: 100%;
  font-size: 0.9em; /* Base font size */
  overflow-x: auto; /* For mobile/tablet overflow; overridden on full desktop */
}

.bp-post-calendar-wrapper th,
.bp-post-calendar-wrapper td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
  width: 14.2857%; /* Equal width for 7 columns (100%/7) */
}

.bp-post-calendar-wrapper .header {
  background: #f0f0f0;
}

.bp-post-calendar-wrapper .has-posts {
  background: #dff0d8;
}

.bp-post-calendar-wrapper .has-posts a {
  text-decoration: none; /* Clean up links */
  color: inherit; /* Inherit color for better theme integration */
}

.bp-post-calendar-wrapper .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping by default */
  margin-bottom: 8px;
  font-size: 1em;
  padding: 5px;
}

.bp-post-calendar-wrapper .nav div {
  display: flex;
  align-items: center; /* Vertically center arrows and text */
}

.bp-post-calendar-wrapper .nav a {
  margin: 0 3px;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 5px; /* Add padding for better touch targets */
}

/* Mobile: max-width 439px (align with site breakpoint) */
@media (max-width: 479px) {
  .bp-post-calendar-wrapper {
    font-size: 0.8em; /* Slightly smaller text for mobile */
  }

  .bp-post-calendar-wrapper th,
  .bp-post-calendar-wrapper td {
    padding: 3px; /* Reduce padding to fit more */
    width: 14.2857%; /* Keep equal, but allow scroll if too narrow */
  }

  .bp-post-calendar-wrapper .nav {
    flex-wrap: wrap; /* Allow wrapping if needed on very small screens */
    justify-content: center; /* Center for better mobile feel */
    font-size: 0.9em; /* Smaller nav text */
  }

  .bp-post-calendar-wrapper .nav div {
    margin: 5px 0; /* Space if wrapped */
  }

  .bp-post-calendar-wrapper .nav a {
    margin: 0 2px; /* Tighter margins */
    padding: 3px 6px; /* Larger tap areas for fingers */
  }

  /* If in sidebar, ensure full width (from site CSS, but reinforce) */
  .sidebar-left .widget .bp-post-calendar-wrapper {
    overflow-x: auto; /* Scroll if table too wide */
  }
}

/* Tablet/Intermediate: max-width 767px (align with site tablet breakpoint, keep scrollable) */
@media (max-width: 767px) {
  .bp-post-calendar-wrapper {
    overflow-x: auto; /* Ensure scrollable on tablets */
  }

  .bp-post-calendar-wrapper th,
  .bp-post-calendar-wrapper td {
    padding: 4px; /* Mid-level padding */
    min-width: 28px; /* Optional: Add back min-width if needed, but allow scroll */
  }
}

/* Full Desktop: min-width 768px (force fit without scrolling) */
@media (min-width: 768px) {
  .bp-post-calendar-wrapper {
    font-size: 0.9em; /* Restore base */
    overflow-x: visible; /* No scrolling needed; force fit */
  }

  .bp-post-calendar-wrapper th,
  .bp-post-calendar-wrapper td {
    padding: 5px; /* Original padding */
    min-width: 0; /* Allow cells to shrink below previous min-width */
    width: 14.2857%; /* Enforce equal distribution */
  }

  .bp-post-calendar-wrapper .nav {
    flex-wrap: nowrap;
    font-size: .8em;
  }

  .bp-post-calendar-wrapper .nav a {
    margin: 0 2px; /* More space */
    padding: 2px 8px; /* Comfortable sizing */
  }
}

/* YouTube Embed Styles */
.yt-embed {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
}
.yt-embed iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    display: block;
}

/* Mood Board Widget */
.widget-mood-board .mood-emoji { transition: all 0.2s; }
.widget-mood-board .mood-emoji:hover { transform: scale(1.2); }