app/static/css/main.css
/* app/static/css/main.css */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Improved font stack */
}

main {
    flex: 1 0 auto;
    padding-top: 20px;
    padding-bottom: 40px; /* Add some bottom padding */
}

nav {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-wrapper {
    padding: 0 20px;
}

.brand-logo {
    font-size: 24px !important;
}

.container {
    width: 90%; /* Adjust container width slightly */
    max-width: 1100px; /* Add max-width */
}


.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 1rem; /* Ensure consistent top margin */
}

.card-title {
    color: #1976d2 !important;
    font-weight: 500 !important;
    font-size: 1.75rem; /* Adjust title size */
    margin-bottom: 1.5rem; /* Space below title */
}

.btn {
    background-color: #1976d2 !important;
    text-transform: none; /* Prevent uppercase */
    letter-spacing: 0.5px;
}

.btn:hover {
    background-color: #1565c0 !important;
}

.btn i.material-icons {
    line-height: inherit; /* Better icon alignment */
    margin-left: 8px; /* Space between text and icon */
}


.file-field .btn {
    background-color: #1976d2;
}

.progress {
    background-color: #bbdefb;
    margin-top: 1rem; /* Add space above progress bar */
}

.progress .indeterminate {
    background-color: #1976d2;
}

/* Input field focus styles */
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=password]:focus,
.input-field input[type=search]:focus,
.input-field textarea.materialize-textarea:focus {
    border-bottom: 1px solid #1976d2 !important;
    box-shadow: 0 1px 0 0 #1976d2 !important;
}

.input-field input[type=text]:focus + label,
.input-field input[type=email]:focus + label,
.input-field input[type=password]:focus + label,
.input-field input[type=search]:focus + label,
.input-field textarea.materialize-textarea:focus + label {
    color: #1976d2 !important;
}

/* Select dropdown focus styles */
.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid #1976d2 !important;
}

.select-wrapper .caret {
    fill: #1976d2 !important;
}

.dropdown-content li > a,
.dropdown-content li > span {
    color: #1976d2 !important;
}

/* Floating Action Button */
.btn-floating {
    background-color: #1976d2 !important;
}

/* Clear All Button */
#clearAllBtn {
    background-color: #e53935 !important; /* Red color */
    margin-top: 1rem; /* Space above clear button */
}
#clearAllBtn i.material-icons {
    margin-left: 8px;
}


/* Progress/Status Box */
#progressContainer {
    margin-top: 1.5rem; /* More space above status box */
    padding: 15px;
    border-left: 5px solid #00796b; /* Teal border */
}
#progressContainer h5 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
/* Reduce spacing in status box */
#progressContainer p {
    margin: 0.2rem 0; /* Reduced top/bottom margin */
    line-height: 1.4; /* Adjust line height if needed */
}
#progressActivity {
    font-weight: 500;
    display: flex; /* Align icon and text */
    align-items: center;
    margin-top: 0.5rem; /* Add slight space above activity line */
}
#progressActivity i.material-icons {
    margin-right: 8px; /* Space between icon and text */
}


/* --- Transcription History Section --- */

#transcriptionHistory {
    margin-top: 1rem; /* Space above history list */
}

.collection {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0; /* Add subtle border */
}

.collection.with-header .collection-header {
    background-color: #1976d2;
    color: white;
    padding: 10px 20px; /* Adjust padding */
    border-bottom: none;
}

.collection.with-header .collection-header h4 {
    margin: 0; /* Remove default margin */
    font-size: 1.5rem; /* Adjust header size */
    font-weight: 400;
}

.collection .collection-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 20px; /* Standard padding */
    position: relative; /* Needed for absolute positioning of actions */
}
.collection .collection-item:last-child {
    border-bottom: none; /* No border on last item */
}

/* --- Transcription History Item Spacing & Layout --- */

.collection-item b { /* Style for filename */
    font-weight: 500; /* Make filename slightly bolder */
    display: block; /* Ensure it takes full width */
    margin-bottom: 2px; /* Small space below filename */
    color: #333; /* Darker color for filename */
    font-size: 1.1em;
    /* Add padding-right to prevent overlap with absolutely positioned buttons */
    padding-right: 120px; /* Adjust this value based on button widths */
}

.collection-item p.meta {
  margin-top: 0; /* Reduce space above meta line */
  margin-bottom: 8px; /* Space below meta line */
  line-height: 1.3; /* Adjust line height if needed */
  font-size: 0.9em; /* Keep meta slightly smaller */
  color: #757575; /* Ensure grey color */
  /* Add padding-right to prevent overlap with absolutely positioned buttons */
  padding-right: 120px; /* Adjust this value based on button widths */
}

.collection-item p.transcription-text {
  margin-top: 5px; /* Add a bit more space above transcription text */
  margin-bottom: 5px; /* Space below transcription text before potential 'Read More' */
  line-height: 1.5; /* Standard line height for readability */
  color: #424242; /* Slightly darker text for readability */
  /* Text will naturally flow below other elements */
}

.collection-item a.read-more {
    display: inline-block; /* Keep it inline but allow margin */
    margin-top: 0px; /* Adjust if needed */
    margin-bottom: 5px;
    font-size: 0.9em;
    font-weight: 500;
}

/* Position action buttons top-right */
.collection-item .secondary-content.history-item-actions {
    position: absolute; /* Position relative to the parent li */
    top: 10px;        /* Distance from the top of the li */
    right: 10px;       /* Distance from the right of the li */
}

/* Ensure buttons in secondary content don't have extra margins */
.collection-item .secondary-content .btn-flat {
    margin: 0; /* Remove default margins */
    /* Padding is handled inline in JS now */
}
.collection-item .secondary-content .btn-flat i.material-icons {
    font-size: 22px; /* Slightly adjust icon size if needed */
    vertical-align: middle; /* Improve vertical alignment */
}


/* General Material Icons Alignment */
.material-icons {
    vertical-align: middle;
}


/* --- Responsive Adjustments --- */

@media only screen and (max-width: 992px) {
    .brand-logo {
        left: auto; /* Reset position */
        transform: none;
        position: relative; /* Allow normal flow */
    }

    .container {
        width: 95%; /* Use more width on tablets */
    }
}

@media only screen and (max-width: 600px) {
    .card-title {
        font-size: 1.5rem !important;
    }

    .collection.with-header .collection-header h4 {
        font-size: 1.3rem;
    }

    .collection-item {
        padding: 12px 15px; /* Reduce padding on small screens */
    }

    /* Adjust button positioning and text padding on small screens */
    .collection-item .secondary-content.history-item-actions {
        top: 5px;
        right: 5px;
    }
    .collection-item b,
    .collection-item p.meta {
        padding-right: 100px; /* Reduce padding slightly */
    }

    .collection-item .secondary-content .btn-flat {
         /* Inline padding might be too much, adjust if needed */
         padding: 0 0.3rem !important;
    }
     .collection-item .secondary-content .btn-flat i.material-icons {
         font-size: 20px;
     }

}