/* File Path: /css/style.css */

/*
  This file contains custom styles to enhance the look and feel of the web portal.
  We are using a combination of custom CSS and Tailwind CSS classes for styling.
*/

/* Custom styles for form elements */
.form-radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 2px solid #D1D5DB; /* light gray */
    width: 1.25rem;
    height: 1.25rem;
    outline: none;
    transition: all 0.2s ease-in-out;
}

.form-radio:checked {
    border-color: #3B82F6; /* blue-500 */
    background-color: #3B82F6; /* blue-500 */
    position: relative;
}

.form-radio:checked::after {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-radio:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* blue-500 with transparency */
}

/* Custom styles for tables */
th {
    background-color: #F3F4F6; /* gray-100 */
    font-weight: 600;
    text-align: left;
    color: #4B5563; /* gray-600 */
}

td {
    color: #374151; /* gray-700 */
}

/* Hover effect for table rows */
tr.hover\\:bg-gray-100:hover {
    background-color: #F3F4F6; /* gray-100 */
}

/* Styles for the dashboard buttons */
.btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300;
}

.btn-secondary {
    @apply bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full transition duration-300;
}

/* Star rating styles */
.flex-row-reverse input:checked ~ span {
    color: #FACC15; /* yellow-400 */
}
.flex-row-reverse input:checked ~ input ~ span {
    color: #FACC15; /* yellow-400 */
}