body {
    font-family: 'Rubik', sans-serif;
    background-color: #f3f4f6; /* gray-100 */
    color: #374151; /* gray-700 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.view.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px;}
::-webkit-scrollbar-track { background: #e5e7eb; /* gray-200 */ } 
::-webkit-scrollbar-thumb { background: #9ca3af; /* gray-400 */ border-radius: 4px; } 
::-webkit-scrollbar-thumb:hover { background: #6b7280; /* gray-500 */ } 

.modal { display: none !important; } 
.modal.show { display: flex !important; } 
.text-start { text-align: start; }

.card {
    background-color: white;
    border-radius: 0.75rem; 
    border: 1px solid #e5e7eb; 
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.04); 
}
.button-primary, .button-secondary, .button-danger {
    padding: 0.75rem 1.5rem; 
    border-radius: 0.5rem; 
    font-weight: 500; 
    transition: background-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); 
    border: 1px solid transparent; 
    line-height: 1.25; 
    cursor: pointer;
}
.button-primary:disabled, .button-secondary:disabled, .button-danger:disabled { opacity: 0.6; cursor: not-allowed; }
.button-primary:focus-visible, .button-secondary:focus-visible, .button-danger:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); }
.button-primary:active:not(:disabled), .button-secondary:active:not(:disabled), .button-danger:active:not(:disabled) { transform: scale(0.98); }

.button-primary { background-color: #4f46e5; color: white; border-color: #4f46e5; } 
.button-primary:hover:not(:disabled) { background-color: #4338ca; border-color: #4338ca;} 
.button-primary:focus-visible { box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.6); }

.button-secondary { background-color: white; color: #374151; border-color: #d1d5db; } 
.button-secondary:hover:not(:disabled) { background-color: #f9fafb; border-color: #9ca3af; } 
.button-secondary:focus-visible { box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.6); border-color: #9ca3af; }

.button-danger { background-color: #ef4444; color: white; border-color: #ef4444; } 
.button-danger:hover:not(:disabled) { background-color: #dc2626; border-color: #dc2626; } 
.button-danger:focus-visible { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.6); }

.input-field, .select-field {
    background-color: #f9fafb; border: 1px solid #d1d5db; color: #111827; 
    font-size: 0.875rem; line-height: 1.25rem; border-radius: 0.5rem; 
    padding: 0.625rem 1rem; width: 100%; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.input-field:focus, .select-field:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3); }
.navbar-icon { height: 2.25rem; width: auto; margin-inline-end: 0.75rem; } 

.star-rating-display { display: flex; direction: ltr; }
.star-rating-display .star { font-size: 1.1rem; color: #d1d5db; padding: 0 0.05rem;} 
.star-rating-display .star.filled { color: #f59e0b; } 

.traffic-badge {
    display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px;
    font-weight: 500; color: white; font-size: 0.875rem; line-height: 1.25rem;
}
.traffic-badge-red { background-color: #ef4444; }
.traffic-badge-yellow { background-color: #f59e0b; }
.traffic-badge-green { background-color: #22c55e; }

/* --- IMPROVED STAR RATING STYLES --- */
.star-rating { display: flex; direction: ltr; }
.star-rating .star {
    font-size: 1.75rem;
    color: #d1d5db; /* Default gray */
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    padding: 0 0.1rem;
}
/* Hover preview state: a light, clear yellow */
.star-rating .star.hover {
    color: #fde047; 
}
/* Selected state: a strong, solid amber color that overrides hover */
.star-rating .star.selected {
    color: #f59e0b;
}

/* --- IMPROVED TRAFFIC LIGHT STYLES --- */
.traffic-light-btn {
    padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease-in-out; border: 2px solid;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.traffic-light-btn small { font-size: 0.75rem; line-height: 1rem; font-weight: 400; opacity: 0.8; }
.traffic-light-btn:active:not(:disabled) { transform: scale(0.98); filter: brightness(0.95); }

/* Default (unselected) state */
.traffic-light-btn.traffic-red { background-color: #fee2e2; color: #991b1b; border-color: #fecaca; } 
.traffic-light-btn.traffic-yellow { background-color: #fef3c7; color: #92400e; border-color: #fde68a;} 
.traffic-light-btn.traffic-green { background-color: #dcfce7; color: #14532d; border-color: #a7f3d0;} 

/* Selected state - much darker and more prominent */
.traffic-light-btn.traffic-red.selected { background-color: #dc2626; color: white; border-color: #b91c1c; } 
.traffic-light-btn.traffic-yellow.selected { background-color: #d97706; color: white; border-color: #b45309; } 
.traffic-light-btn.traffic-green.selected { background-color: #16a34a; color: white; border-color: #15803d; } 

.traffic-light-btn.selected { transform: scale(1.03); box-shadow: 0 4px 10px -2px rgba(0,0,0,0.15); }

.form-section { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; background-color: white; box-shadow: 0 1px 3px 0 rgba(0,0,0,.03),0 1px 2px -1px rgba(0,0,0,.03); }
.form-section-title { font-size: 1.25rem; font-weight: 600; color: #4338ca; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; }
.modal-card { background-color: white; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.modal-body-content { padding: 1.5rem; overflow-y: auto; flex-grow: 1; }
.modal-footer-content { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; background-color: #f9fafb; flex-shrink: 0; text-align: end; }

/* DASHBOARD STYLES */
.battalion-card { background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); overflow: hidden; }
.battalion-header { padding: 1rem 1.5rem; background-image: linear-gradient(to right, #4f46e5, #7c3aed); color: white; }
.pluga-card { background-color: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; }
.pluga-header { padding: 0.75rem 1.5rem; background-color: #eef2ff; color: #4338ca; border-bottom: 1px solid #e5e7eb; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.user-stats-grid { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.stat-item { background-color: #f3f4f6; border-radius: 0.5rem; padding: 0.75rem; text-align: center; border: 1px solid #e5e7eb; }
.stat-label { display: block; font-size: 0.75rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem; }
.stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.stat-value-green, .stat-value-yellow, .stat-value-red { font-weight: 700; font-size: 1.125rem; padding: 0.125rem 0.625rem; border-radius: 9999px; color: white; min-width: 1.75rem; text-align: center; }
.user-stat-badge { font-weight: 600; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; color: white; min-width: 1.25rem; display: inline-block; }
.stat-value-green, .user-stat-badge-green { background-color: #22c55e; }
.stat-value-yellow, .user-stat-badge-yellow { background-color: #f59e0b; }
.stat-value-red, .user-stat-badge-red { background-color: #ef4444; }

.accordion-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.75rem 1rem; font-weight: 600; background-color: #f9fafb; color: #4b5563; transition: background-color 0.2s, transform 0.1s ease; }
.accordion-trigger:hover { background-color: #f3f4f6; }
.accordion-trigger:active { background-color: #e5e7eb; transform: scale(0.99); }
.accordion-icon { width: 1.25rem; height: 1.25rem; transition: transform 0.3s ease; }
.accordion-icon.rotate-180 { transform: rotate(180deg); }
.accordion-content { background-color: white; max-height: 2000px; overflow: hidden; transition: all 0.5s ease-in-out; }
.accordion-content.hidden { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; overflow: hidden; }