/* static/css/style.css */
/* Add your custom styles here to make the app responsive and appealing */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0; /* Ensure no default body margin */
    padding: 0; /* Ensure no default body padding */
}

.navbar {
    margin-bottom: 20px;
}

.container {
    padding-top: 20px;
    padding-bottom: 20px;
    /* Use max-width for containers to prevent overly wide layouts on large screens */
    max-width: 1200px; /* Example max-width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Add padding for smaller screens */
    padding-right: 15px; /* Add padding for smaller screens */
}

/* For forms */
.form-group {
    margin-bottom: 1.5rem;
}

/* For tables */
.table {
    width: 100%; /* Ensure tables take full width */
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse; /* Ensure cells are properly aligned */
}

.table th, .table td {
    vertical-align: middle;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    text-align: left; /* Default text alignment */
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
}

/* For cards on homepage */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem; /* Add margin for spacing between cards */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column; /* Stack navbar items vertically on small screens */
        align-items: flex-start;
    }

    .navbar-brand {
        margin-bottom: 10px;
    }

    .form-inline .form-control,
    .form-inline .btn {
        width: 100%; /* Make form controls full width */
        margin-bottom: 10px; /* Add spacing */
    }

    /* Adjust table display for small screens */
    .table thead {
        display: none; /* Hide table headers on small screens */
    }

    .table tbody, .table tr, .table td {
        display: block; /* Make table rows and cells behave like block elements */
        width: 100%;
    }

    .table tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        overflow: hidden; /* Ensure border-radius applies */
    }

    .table td {
        text-align: right; /* Align content to the right */
        padding-left: 50%; /* Make space for pseudo-element labels */
        position: relative;
    }

    .table td::before {
        content: attr(data-label); /* Use data-label for content */
        position: absolute;
        left: 0;
        width: 45%; /* Space for label */
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
    }

    /* Specific adjustments for notes list to keep action buttons visible */
    .list-group-item {
        flex-direction: column; /* Stack content vertically */
        align-items: flex-start;
    }

    .list-group-item > div:first-child {
        margin-bottom: 10px; /* Space between note content and actions */
    }

    .list-group-item .btn {
        width: 100%; /* Make buttons full width */
        margin-bottom: 5px; /* Space between buttons */
    }
}

/* Further refinements for very small screens */
@media (max-width: 576px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    h1 {
        font-size: 1.75rem; /* Smaller headings */
    }

    .btn {
        font-size: 0.9rem; /* Smaller button text */
        padding: 0.5rem 0.8rem;
    }
}