/* radio_recorder/static/css/style.css */

/* --- General Styles --- */
html {
    color-scheme: light; /* Prevent OS-level dark mode from overriding styles */
}

body {
    font-family: sans-serif; /* Basic fallback font */
    background-color: #f8f9fa; /* Light grey background */
    color: #212529; /* Dark text color */
    padding-top: 70px; /* Adjust if using a fixed-top navbar */
    padding-bottom: 40px; /* Space for footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Allows the main content to grow and push the footer down */
}

.container {
    /* Assumes a container class for centering content */
    max-width: 1140px; /* Or your preferred max width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* --- Navbar Customization (Example if using Bootstrap Navbar) --- */
.navbar {
    border-bottom: 1px solid #dee2e6;
    background-color: #ffffff !important; /* Override default bg */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- Forms --- */
form {
    margin-bottom: 1.5rem; /* Space below forms */
}

.form-group {
    margin-bottom: 1rem; /* Space between form fields (if using this class) */
}

/* Style labels (optional) */
/* label {
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block;
} */

/* Basic input styling (often handled by framework) */
/* input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:focus, select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
} */

/* Ensure consistent button spacing */
.btn {
    margin-right: 5px;
    margin-bottom: 5px; /* Handle wrapping */
}

/* --- Flash Messages (Alerts) --- */
.alert {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

/* Standard alert colors (Bootstrap compatible) */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* --- Tables --- */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse; /* Ensure borders connect */
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    text-align: inherit; /* Align header text */
}

.table tbody tr:nth-of-type(odd) {
    /* background-color: rgba(0, 0, 0, 0.02); */ /* Subtle striping */
}

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

/* --- Lists (e.g., for Dashboard) --- */
.list-group { /* Bootstrap class */
    margin-bottom: 1rem;
}

.list-group-item {
    /* Style items within lists */
    /* Bootstrap handles most of this */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space out content and actions */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow actions to wrap on small screens */
    gap: 10px; /* Add space between text and action buttons */
}

.list-group-item small {
    color: #6c757d; /* Grey text for details */
    display: block; /* Put details on a new line */
    margin-top: 4px;
}

/* Ensure forms/buttons inside list items don't cause excessive spacing */
.list-group-item form {
    margin-bottom: 0; /* Override default form margin */
    display: inline-block; /* Keep buttons inline */
}

/* --- Specific Sections --- */
#login-form-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

.dashboard-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* --- Action Buttons inside Tables/Lists --- */
.action-button {
    /* Add specific styles if needed, e.g., minimum width */
    /* white-space: nowrap; */ /* Prevent button text wrapping */
}

/* --- Footer --- */
.footer {
    margin-top: 2rem; /* Space above footer */
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9em;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
    background-color: #e9ecef; /* Slightly different background */
}

/* Custom Styles */

body {

    padding-top: 56px; /* Adjust body padding to account for fixed navbar */

    background-color: #f8f9fa;

}



.footer {

    position: fixed;

    bottom: 0;

    width: 100%;

    height: 60px;

    line-height: 60px;

    background-color: #e9ecef;

}



main {

    padding-bottom: 70px; /* Add padding to the bottom of main content to avoid overlap with footer */

}



.text-truncate {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* Responsive styles for mobile devices */

@media (max-width: 767px) {

    /* Reduce side padding on mobile for the main container */

    main.container {

        padding-left: 0.5rem;

        padding-right: 0.5rem;

    }



    /* Fix overflow in recent recordings list on mobile */

    #recent-recordings-list .list-group-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem; /* Reduce gap and let margin handle spacing */

    }



    #recent-recordings-list .recording-meta-actions {

        width: 100%;

        justify-content: space-between; /* Spread out the items */

        margin-top: 0.5rem;

    }



        #recent-recordings-list .recording-info {



            width: 100%;



        }



    



            /* Responsive table for recordings page */



    



            .table-responsive thead {



    



                display: none; /* Hide table header on mobile */



    



            }
            #recordings-table-body tr {



            display: block;



            border: 1px solid #dee2e6;



            border-radius: 0.25rem;



            margin-bottom: 1rem;



            padding: 0.5rem;



        }



        #recordings-table-body td {



            display: flex;



            justify-content: space-between;



            align-items: center;



            padding: 0.5rem;



            border: none;



            border-bottom: 1px solid #eee;



        }



        #recordings-table-body td:last-child {



            border-bottom: none;



        }



            #recordings-table-body td::before {



                content: attr(data-label);



                font-weight: bold;



                margin-right: 1rem;



            }
            /* Align action buttons to the right on mobile */
            #recordings-table-body td[data-label="Дзеянні:"] {
                justify-content: flex-end;
            }

                    #recordings-table-body td[data-label="Дзеянні:"]::before {

                            display: none; /* Hide the "Дзеянні:" label */

                        }

            

                /* Station list action buttons on mobile */

                .station-actions-container {

                    /* On mobile, make the button group take full width */

                    display: flex;

                    width: 100%;

                }

                .station-actions-container .btn {

                    flex-grow: 1; /* Each button will grow to fill the space */

                }
            }

/* Player styles have been moved to /static/css/player.css */