/* --------------------
   Global Styles
-------------------- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to right, #f8f1f1, #e0f7fa);
    margin: 0;
    padding: 20px;
    color: #333;
}

h1, h2 { text-align: center; color: #00695c; }
.container { max-width: 1000px; margin: 0 auto; padding: 10px; }

.card {
    background-color: #ffffffcc;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

/* --------------------
   Table & Mobile Fix (The Scroller)
-------------------- */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* Required for the scrollbar to appear */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iPhone */
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* This forces the table to stay wide enough to see all columns.
       Anything less than 800px on a phone will trigger the scrollbar. */
    min-width: 800px; 
}

thead { background-color: #00796b; color: white; }
thead th { padding: 12px; text-align: left; }
tbody tr { background-color: #e0f2f1; transition: background-color 0.2s; }
tbody tr:nth-child(even) { background-color: #b2dfdb; }
tbody tr:hover { background-color: #80cbc4; }
tbody td { padding: 10px; vertical-align: middle; }

.album-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

/* --------------------
   Stats & Controls
-------------------- */
.stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    font-weight: bold;
}

.filter-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --------------------
   Buttons & Form
-------------------- */
button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    background-color: #00695c;
    color: #fff;
}

button:disabled { background-color: #ccc; cursor: not-allowed; }
.delete-btn { background-color: #c62828; }
.hidden { display: none !important; }

.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

form input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-buttons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* --------------------
   Mobile Adjustments
-------------------- */
@media (max-width: 600px) {
    .stats-container { flex-direction: column; gap: 5px; }
    .stat-divider { display: none; }
    .filter-controls { flex-direction: column; }
    .input-grid { grid-template-columns: 1fr; }
}