// src/theme.js
import { colors } from '@mui/material';
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: 'Montserrat, sans-serif',
  },

  palette: {
    text: {
      primary: '#40120EFF',
    },
  },

  components: {
    MuiDataGrid: {
      styleOverrides: {
        row: {
          '&:hover': {
            backgroundColor: '#f0eae3',
          },
          '&.Mui-selected': {
            backgroundColor: '#DFCCBCFF',
            color: '#26201A',
          },
          '&.Mui-selected:hover': {
            backgroundColor: '#d0b9a8',
          },
          color: '#26201A',
        },
        cell: {
          '&:focus-within': {
            outline: '2px solid #DFCCBCFF', // custom Fendi focus
            outlineOffset: '-2px', // tighten the outline
            backgroundColor: '#f5f0eb', // optional subtle highlight
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          /* your current styles... */
          '&:focus': {
            outline: '2px solid #DFCCBCFF',
          },
          '&:focusVisible': {
            outline: '2px solid #DFCCBCFF',
          },
        },
      },
    },
    MuiIconButton: {
      styleOverrides: {
        root: {
          '&:focus, &:focus-visible': {
            outline: '2px solid #DFCCBCFF',
            outlineOffset: '2px',
          },
        },
      },
    },
    MuiListItem: {
      styleOverrides: {
        root: {
          transition: 'background-color 0.2s ease-in-out',
          '&:hover': {
            backgroundColor: '#AA7665FF',         
          },
        },
      },
    },

  }
});

export default theme;