/*
 * 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.
 */
.dashboard-container { max-width: 1000px; margin: 20px auto; padding: 20px; }

/* Tabs Styles */
.tabs { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 20px; }
.tab-link { padding: 10px 20px; text-decoration: none; color: #555; font-weight: bold; }
.tab-link.active { border-bottom: 3px solid #3498db; color: #3498db; }

/* Table Styles */
.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.data-table th, .data-table td { padding: 12px; border: 1px solid #eee; text-align: left; }
.data-table th { background-color: #f8f9fa; }

/* Buttons */
.btn-primary { background: #3498db; color: white; padding: 8px 16px; border-radius: 4px; text-decoration: none; }
.action-bar { margin-bottom: 20px; }

.filter-container { background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
.filter-title { font-weight: bold; margin-bottom: 10px; color: #2c3e50; display: flex; align-items: center; gap: 8px; }
.filter-form { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-input { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; }
.filter-actions { display: flex; gap: 10px; }
.filter-btn { padding: 7px 15px; border-radius: 4px; text-decoration: none; border: none; cursor: pointer; font-weight: 500; }
.filter-btn.apply { background: #3498db; color: white; }
.filter-btn.reset { background: #64748b; color: white; display: inline-flex; align-items: center; }