/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 6px; }


th.sorted, td.sorted { background: #f0f8ff; }


th.asc, td.asc   { background: #e6ffe6; }   /* light green */
th.desc, td.desc { background: #ffe6e6; }   /* light red */


body { font-family: Arial, sans-serif; margin: 2rem; color: #333; }


.card {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card h2 { margin-top: 0; }

form div { margin-bottom: 0.8rem; }
label { display: block; font-weight: bold; margin-bottom: 0.2rem; }
input[type="text"], textarea, select {
    width: 100%; padding: 0.5rem; border: 1px solid #aaa; border-radius: 4px;
}

.btn {
    background: #1e88e5; color: white; border: none;
    padding: 0.5rem 1rem; border-radius: 4px;
    cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.1); }