@media (max-width: 767px) { /* Applies to screens smaller than 768px (common breakpoint for mobile) */
            body {
                background-color: #007bff; /* Or your desired background color for mobile */
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh; /* Ensures the body takes full viewport height */
                margin: 0;
                padding: 20px; /* Add some padding around the form */
                box-sizing: border-box; /* Include padding in the element's total width and height */
            }

            .bg-white.rounded-xl.shadow-md {
                width: 100%; /* Make the form take full width on mobile */
                max-width: 400px; /* Optional: set a max-width even on mobile to prevent it from becoming too wide on slightly larger phones */
                /*border-radius: 0;*/  /* Remove rounded corners for a full-width look */
                box-shadow: none; /* Remove shadow for a flatter look */
                padding: 20px; /* Adjust padding as needed */
            }

            .max-w-md.mx-auto.mt-6 {
                max-width: 100%; /* Ensure inputs take full width of their parent */
                margin-left: 0;
                margin-right: 0;
                text-align: left; /* Align labels to the left */
            }
        }

        .content h1 {
          font-size: 2.25rem;
          font-weight: 700;
          line-height: 1.25;
          margin-bottom: 0.75rem;
          color: #222;
        }
        
        .content h2 {
          font-size: 1.75rem;
          font-weight: 600;
          line-height: 1.3;
          margin-bottom: 0.6rem;
          color: #2a2a2a;
        }
        
        .content h3 {
          font-size: 1.5rem;
          font-weight: 600;
          line-height: 1.35;
          margin-bottom: 0.6rem;
          color: #333;
        }
        
        .content h4 {
          font-size: 1.25rem;
          font-weight: 500;
          line-height: 1.5;
          margin-bottom: 0.6rem;
          color: #444;
        }
        
        .content h5 {
          font-size: 1.125rem;
          font-weight: 500;
          line-height: 1.5;
          margin-bottom: 0.5rem;
          color: #555;
        }
        
        .content a {
          color: #3273dc; /* Bulma’s primary blue */
          text-decoration: underline;
          text-underline-offset: 2px;
          transition: color 0.2s ease;
        }
        
        .content a:hover,
        .content a:focus {
          color: #1d4ed8; /* A deeper blue on hover */
          text-decoration-thickness: 2px;
        }

      
    
      /* Optional: spacing under the top block */
      .content {
        margin-bottom: 2rem;
      }
    
      /* Optional: soften the box for reading feel */
      .box {
        padding: 2rem;
      }
      
      
      
      
      /* styles.css Google Gemini 30.07.2025 */

/* styles.css */

/* --- General Adjustments (already present, but good to reiterate) --- */
.epadmin-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.epadmin-table td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.epadmin-table .date-cell {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}



/* --- Specific adjustments for the problematic range: 640px to 767px --- */
@media (min-width: 640px) and (max-width: 767px) {
    /* Override some of the 'max-width: 767px' rules for this specific range */
    body {
        /* You might want a different background or no specific background for this range */
        background-color: initial; /* Revert to default or define a new one */
        display: block; /* Allow normal document flow */
        padding: 0; /* Remove fixed padding from body */
        min-height: auto; /* Remove min-height */
    }

    .bg-white.rounded-xl.shadow-md {
        width: 95%; /* Make it take almost full width, but with some margin */
        max-width: 700px; /* Adjust max-width to fit this screen size better */
        margin-left: auto; /* Center the block */
        margin-right: auto; /* Center the block */
        border-radius: 0.75rem; /* Re-introduce some rounded corners */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Re-introduce a subtle shadow */
        padding: 1.5rem; /* Adjust padding inside the main content block */
    }

    .epadmin-container {
        padding-left: 1.5rem; /* More generous padding for content */
        padding-right: 1.5rem;
    }

    /* Adjust search input and button alignment for this specific range */
    form.mb-4 {
        display: flex;
        flex-direction: row; /* Ensure they stay in a row */
        justify-content: center; /* Center the search form elements */
        align-items: center;
    }

    #searchInput {
        flex-grow: 1; /* Allow search input to grow */
        max-width: 450px; /* Prevent it from becoming too wide */
    }

    /* Pagination button styling for this range */
    .flex.flex-wrap.gap-2.mb-4 {
        justify-content: center; /* Center pagination buttons */
    }

    /* Ensure action icons are well-spaced */
    .epadmin-table .icon-cell .flex {
        justify-content: center; /* Center icons if needed, or adjust spacing */
        gap: 0.75rem; /* Add more space between icons */
    }
}


/* --- Media Queries for Medium Screens (e.g., tablets and small laptops) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        background-color: initial;
        display: block;
        padding: 0;
        min-height: auto;
    }

    .bg-white.rounded-xl.shadow-md {
        width: 90%;
        max-width: 960px;
        border-radius: 0.75rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        padding: 1.5rem;
    }

    .epadmin-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    form.mb-4 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #searchInput {
        max-width: 600px;
    }

    .flex.flex-wrap.gap-2.mb-4 {
        justify-content: center;
    }
}

/* --- Media Queries for Large Screens (Desktops) --- */
@media (min-width: 1024px) {
    body {
        background-color: initial;
        display: block;
        padding: 0;
        min-height: auto;
    }

    .bg-white.rounded-xl.shadow-md {
        width: 80%;
        max-width: 1024px;
        padding: 2rem;
    }

    .epadmin-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    form.mb-4 {
        justify-content: flex-start;
    }

    .flex.flex-wrap.gap-2.mb-4 {
        justify-content: flex-start;
    }
}

.subtitle-block a {
  text-decoration: underline;
  cursor: pointer;
}
.subtitle-block a:hover {
  color: #1d4ed8;
}