/* Custom styles for TPRM Risk Assessment date pickers */
/* Place this file in your Dash app's 'assets' folder */

/* Reduce font size in date picker input */
.SingleDatePickerInput .DateInput_input {
    font-size: 12px !important;
    padding: 6px 10px !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Make the date picker container smaller */
.SingleDatePickerInput {
    border: 1px solid #D1D5DB !important;
    border-radius: 4px !important;
}

.SingleDatePickerInput__withBorder {
    border-radius: 4px !important;
}

/* Reduce size of calendar icon */
.SingleDatePickerInput_calendarIcon {
    padding: 6px !important;
}

.SingleDatePickerInput_calendarIcon_svg {
    width: 14px !important;
    height: 14px !important;
}

/* Make the input field full width */
.DateInput {
    width: 100% !important;
}

.SingleDatePicker {
    width: 100% !important;
}

/* Style the calendar popup */
.DayPicker {
    font-size: 12px !important;
}

.CalendarMonth_caption {
    font-size: 14px !important;
}

/* ============================================
   Vendor Button Styles - Risk Assessment
   ============================================ */

/* Base vendor button styles */
.ra-vendor-btn {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Incumbent Supplier buttons (green) - hover effect */
.ra-vendor-incumbent:hover {
    background-color: #C8E6C9 !important;
    border-color: #4CAF50 !important;
    transform: translateX(3px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Market Leader buttons (blue) - hover effect */
.ra-vendor-market:hover {
    background-color: #BBDEFB !important;
    border-color: #2196F3 !important;
    transform: translateX(3px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Active/pressed state for all vendor buttons */
.ra-vendor-btn:active {
    transform: translateX(1px) !important;
    box-shadow: none !important;
}